notarization_applet/pagesHome/type/index.vue

<template>
	<view class="content">
		<view class="one">
			<u-search shape="square" v-model="value" :show-action="true" action-text="取消" placeholder="想买什么车"
				@change="toChange" @custom="toCustom"></u-search>
		</view>
		<view class="two" v-if="!value&&moreList.length>0">
			<view class="two_1">
				<view class="left">
					搜索历史
				</view>
				<view class="right" @tap="toRest">
					<u-icon size="18px" name="trash"></u-icon>
				</view>
			</view>
			<view class="two_2">
				<view class="title" v-for="(item, index) in moreList" :key="index">
					<span @tap="toView(item)">{{item.name}}</span>&nbsp;
					<u-icon size="15px" name="close" @tap="toDelete(item)"></u-icon>
				</view>
			</view>
		</view>
		<view class="thr" v-else>
			<view class="list" v-for="(item, index) in list" :key="index" @tap="toView(item)">
				<view class="left">
					<image v-if="item.file" class="image" :src="item.file&&item.file.length>0?item.file[0].url:''">
					</image>
					<u-icon v-else size="16px" name="search"></u-icon>
				</view>
				<view class="right">
					{{item.name}}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { getCurrentInstance, ref } from 'vue';
	//该依赖已内置不需要单独安装
	import { onShow } from "@dcloudio/uni-app";
	// 请求接口
	const $api = getCurrentInstance()?.appContext.config.globalProperties.$api;
	const value = ref('');
	const list = ref([{ name: "本田" }]);
	const moreList = ref([{ name: "本田" }]);
	onShow(() => {
		search();
		toCustom();
	})
	// 查询
	const search = async () => {
	};
	// 搜索
	const toChange = async () => {
	};
	// 取消
	const toCustom = async () => {
		value.value = ''
	};
	// 查看详情
	const toView = (item) => {
		uni.navigateTo({
			url: `/pagesHome/search/index?type=${item.type || ''}`
		})
	};
	// 取消
	const toRest = async () => {
		console.log('重置');
	};
	// 删除
	const toDelete = async () => {
		console.log('删除');
	};
</script>
<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 100vh;

		.one {
			padding: 2vw;
		}

		.two {
			padding: 2vw;
			font-size: var(--font14Size);

			.two_1 {
				margin: 2vw;
				display: flex;
				justify-content: space-between;
			}

			.two_2 {
				margin: 2vw 0 0 0;
				display: flex;
				flex-wrap: wrap;

				.title {
					display: flex;
					align-items: center;
					padding: 2vw;
					margin: 1vw;
					background-color: var(--f9Color);
				}
			}
		}

		.thr {
			.list {
				display: flex;
				align-items: center;
				margin: 1vw 1vw 0 1vw;
				padding: 2vw;
				border-bottom: 1px solid var(--f9Color);
			}

			.left {
				.image {
					width: 40px;
					height: 40px;
					border-radius: 40px;
				}
			}

			.right {
				margin: 0 0 0 2vw;
				font-size: var(--font14Size);
			}
		}
	}
</style>