修改

pagesHome/type/index.vue

@@ -4,12 +4,28 @@
 			<u-search shape="square" v-model="value" :show-action="true" action-text="取消" placeholder="想买什么车"
 				@change="toChange" @custom="toCustom"></u-search>
 		</view>
-		<view class="two">
+		<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="14px" name="search"></u-icon>
+					<u-icon v-else size="16px" name="search"></u-icon>
 				</view>
 				<view class="right">
 					{{item.name}}
@@ -21,11 +37,17 @@
 
 <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([]);
+	const list = ref([{ name: "本田" }]);
+	const moreList = ref([{ name: "本田" }]);
+	onShow(() => {
+		search();
+		toCustom();
+	})
 	// 查询
 	const search = async () => {
 	};
@@ -43,7 +65,14 @@
 			url: `/pagesHome/search/index?type=${item.type || ''}`
 		})
 	};
-	
+	// 取消
+	const toRest = async () => {
+		console.log('重置');
+	};
+	// 删除
+	const toDelete = async () => {
+		console.log('删除');
+	};
 </script>
 <style lang="scss" scoped>
 	.content {
@@ -57,11 +86,36 @@
 		}
 
 		.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 0 0 0;
-				padding: 1vw;
+				margin: 1vw 1vw 0 1vw;
+				padding: 2vw;
 				border-bottom: 1px solid var(--f9Color);
 			}
 

unpackage/dist/dev/mp-weixin/pagesHome/type/index.js

@@ -16,7 +16,14 @@ const _sfc_main = /* @__PURE__ */ common_vendor.defineComponent({
     var _a;
     (_a = common_vendor.getCurrentInstance()) == null ? void 0 : _a.appContext.config.globalProperties.$api;
     const value = common_vendor.ref("");
-    const list = common_vendor.ref([]);
+    const list = common_vendor.ref([{ name: "本田" }]);
+    const moreList = common_vendor.ref([{ name: "本田" }]);
+    common_vendor.onShow(() => {
+      search();
+      toCustom();
+    });
+    const search = async () => {
+    };
     const toChange = async () => {
     };
     const toCustom = async () => {
@@ -28,8 +35,14 @@ const _sfc_main = /* @__PURE__ */ common_vendor.defineComponent({
         url: `/pagesHome/search/index?type=${item.type || ""}`
       });
     };
+    const toRest = async () => {
+      console.log("重置");
+    };
+    const toDelete = async () => {
+      console.log("删除");
+    };
     return (_ctx, _cache) => {
-      return {
+      return common_vendor.e({
         a: common_vendor.o(toChange),
         b: common_vendor.o(toCustom),
         c: common_vendor.o(($event) => value.value = $event),
@@ -40,15 +53,36 @@ const _sfc_main = /* @__PURE__ */ common_vendor.defineComponent({
           placeholder: "想买什么车",
           modelValue: value.value
         }),
-        e: common_vendor.f(list.value, (item, index, i0) => {
+        e: !value.value && moreList.value.length > 0
+      }, !value.value && moreList.value.length > 0 ? {
+        f: common_vendor.p({
+          size: "18px",
+          name: "trash"
+        }),
+        g: common_vendor.o(toRest),
+        h: common_vendor.f(moreList.value, (item, index, i0) => {
+          return {
+            a: common_vendor.t(item.name),
+            b: common_vendor.o(($event) => toView(item), index),
+            c: common_vendor.o(($event) => toDelete(), index),
+            d: "2f32406a-2-" + i0,
+            e: index
+          };
+        }),
+        i: common_vendor.p({
+          size: "15px",
+          name: "close"
+        })
+      } : {
+        j: common_vendor.f(list.value, (item, index, i0) => {
           return common_vendor.e({
             a: item.file
           }, item.file ? {
             b: item.file && item.file.length > 0 ? item.file[0].url : ""
           } : {
-            c: "2f32406a-1-" + i0,
+            c: "2f32406a-3-" + i0,
             d: common_vendor.p({
-              size: "14px",
+              size: "16px",
               name: "search"
             })
           }, {
@@ -57,7 +91,7 @@ const _sfc_main = /* @__PURE__ */ common_vendor.defineComponent({
             g: common_vendor.o(($event) => toView(item), index)
           });
         })
-      };
+      });
     };
   }
 });

unpackage/dist/dev/mp-weixin/pagesHome/type/index.wxss

@@ -13,19 +13,40 @@
 .content .one.data-v-2f32406a {
   padding: 2vw;
 }
-.content .two .list.data-v-2f32406a {
+.content .two.data-v-2f32406a {
+  padding: 2vw;
+  font-size: var(--font14Size);
+}
+.content .two .two_1.data-v-2f32406a {
+  margin: 2vw;
+  display: flex;
+  justify-content: space-between;
+}
+.content .two .two_2.data-v-2f32406a {
+  margin: 2vw 0 0 0;
+  display: flex;
+  flex-wrap: wrap;
+}
+.content .two .two_2 .title.data-v-2f32406a {
+  display: flex;
+  align-items: center;
+  padding: 2vw;
+  margin: 1vw;
+  background-color: var(--f9Color);
+}
+.content .thr .list.data-v-2f32406a {
   display: flex;
   align-items: center;
-  margin: 1vw 0 0 0;
-  padding: 1vw;
+  margin: 1vw 1vw 0 1vw;
+  padding: 2vw;
   border-bottom: 1px solid var(--f9Color);
 }
-.content .two .left .image.data-v-2f32406a {
+.content .thr .left .image.data-v-2f32406a {
   width: 40px;
   height: 40px;
   border-radius: 40px;
 }
-.content .two .right.data-v-2f32406a {
+.content .thr .right.data-v-2f32406a {
   margin: 0 0 0 2vw;
   font-size: var(--font14Size);
 }