fix

src/pages/client/clientPackage/search.vue

@@ -1,235 +1,257 @@
 <template>
-	<view class="search">
-		<view class="search-item">
-			<u-search v-model="search_text" :clearabled="true" @custom='handlerSearchBtn' />
-			<!-- <button class="search-btn" @click="handlerSearchBtn">搜索</button> -->
-		</view>
-		<!-- 搜索历史 -->
-		<view class="history">
-			<view class="history-top">
-				<hotCom>搜索历史</hotCom>
-				<view class="history-right" @click="handlerAllSearchRecord">
-					<u-icon name="trash" />
-					<text>删除记录</text>
-				</view>
-			</view>
-			<view class="label">
-				<u-tag v-for="(item,index) of search_list" :key="index" :text="item.name" plain closable :show="close2"
-					@close="handlerCloseSearchItem(item,index)" />
-			</view>
-		</view>
-
-		<!-- 热门搜索 -->
-		<view class="history">
-			<view class="history-top">
-				<text class="hotCom">热门搜索</text>
-			</view>
-			<view class="label">
-				<u-tag v-for="(item,index) in favourite_list" :text="item.name" class="label-item" @click="$Router.push(`/pages/client/clientPackage/storeDetail?id=${item.id}`)"/>
-			</view>
-		</view>
-
-		<u-divider text="猜你喜欢"></u-divider>
-
-		<!-- 列表 -->
-		<view class="popular-box">
-			<view class="hot" v-for="(item,index) of popular_search_list" @click="$Router.push(`/pages/client/clientPackage/storeDetail?id=${item.id}`)">
-				<Image src="https://cdn.uviewui.com/uview/album/1.jpg"></Image>
-				<view>
-					<view class="item-text">{{ item.name }}</view>
-					<view class="item-flex">
-						<view class="star">
-							<u-rate :count="count" :value="item.score" readonly/>
-							<text class="line">|</text>
-						</view>
-						<view>{{ item.goodReview }}单</view>
-					</view>
-					<view class="address-flex">
-						<view>{{ item.address }}</view>
-						<view>2.7km</view>
-					</view>
-				</view>
-			</view>
-		</view>
-	</view>
+  <view class="search">
+    <view class="search-item">
+      <u-search v-model="search_text" :clearabled="true" @custom="handlerSearchBtn" />
+      <!-- <button class="search-btn" @click="handlerSearchBtn">搜索</button> -->
+    </view>
+    <!-- 搜索历史 -->
+    <view class="history">
+      <view class="history-top">
+        <hotCom>搜索历史</hotCom>
+        <view class="history-right" @click="handlerAllSearchRecord">
+          <u-icon name="trash" />
+          <text>删除记录</text>
+        </view>
+      </view>
+      <view class="label">
+        <u-tag
+          v-for="(item, index) of search_list"
+          :key="index"
+          :text="item.name"
+          plain
+          closable
+          :show="close2"
+          @close="handlerCloseSearchItem(item, index)"
+        />
+      </view>
+    </view>
+
+    <!-- 热门搜索 -->
+    <view class="history">
+      <view class="history-top">
+        <text class="hotCom">热门搜索</text>
+      </view>
+      <view class="label">
+        <u-tag
+          v-for="(item, index) in favourite_list"
+          :text="item.name"
+          :key="index"
+          class="label-item"
+          @click="$Router.push(`/pages/client/clientPackage/storeDetail?id=${item.id}`)"
+        />
+      </view>
+    </view>
+
+    <u-divider text="猜你喜欢"></u-divider>
+
+    <!-- 列表 -->
+    <view class="popular-box">
+      <view
+        class="hot"
+        v-for="(item, index) of popular_search_list"
+        :key="index"
+        @click="$Router.push(`/pages/client/clientPackage/storeDetail?id=${item.id}`)"
+      >
+        <Image src="https://cdn.uviewui.com/uview/album/1.jpg"></Image>
+        <view>
+          <view class="item-text">{{ item.name }}</view>
+          <view class="item-flex">
+            <view class="star">
+              <u-rate :count="count" :value="item.score" readonly />
+              <text class="line">|</text>
+            </view>
+            <view>{{ item.goodReview }}单</view>
+          </view>
+          <view class="address-flex">
+            <view>{{ item.address }}</view>
+            <view>2.7km</view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
 </template>
 
 <script>
-	import { listHotMerchant,likeMerchant } from "@/api/client/home.js"
-	export default {
-		data() {
-			return {
-				count: 5,
-				value: 4,
-				close2: true,
-				radios: [{
-					checked: true,
-				}, ],
-				checkboxs: [{
-					checked: true,
-				}, ],
-				search_text: '', // 搜索text
-				search_list: [], // 搜索列表
-				
-				popular_search_list:[],//热门搜索列表
-				favourite_list:[] // 猜你喜欢列表
-			};
-		},
-		onShow() {
-			if (uni.getStorageSync('searchItem')) {
-				this.search_list = uni.getStorageSync('searchItem')
-			}
-		},
-		mounted() {
-			this.handlerInitList()
-		},
-		methods: {
-			// 初始化热门搜索 猜你喜欢列表
-			handlerInitList(){
-				listHotMerchant().then(res=>{
-					this.popular_search_list = res.data
-				})
-				
-				// 猜你喜欢列表
-				likeMerchant().then(res=>{
-					this.favourite_list = res.data
-				})
-			},
-			// 点击搜索按钮
-			handlerSearchBtn() {
-				if (!this.search_text) {
-					uni.showToast({
-						title: '请输入您要搜索的关键字',
-						icon: 'none'
-					})
-					return
-				} else {
-					let params = {
-						name: this.search_text
-					}
-					this.search_list.push(params)
-					uni.setStorageSync('searchItem', this.search_list)
-					this.search_text = ''
-				}
-			},
-			// 删除搜索记录按钮
-			handlerCloseSearchItem(item, index) {
-				this.search_list.splice(index, 1)
-				uni.setStorageSync('searchItem', this.search_list)
-			},
-			// 删除所有搜索记录按钮
-			handlerAllSearchRecord() {
-				uni.removeStorageSync('searchItem');
-				this.search_list = []
-			}
-		}
-	};
+import { listHotMerchant, likeMerchant } from '@/api/client/home.js';
+export default {
+  data() {
+    return {
+      count: 5,
+      value: 4,
+      close2: true,
+      radios: [
+        {
+          checked: true,
+        },
+      ],
+      checkboxs: [
+        {
+          checked: true,
+        },
+      ],
+      search_text: '', // 搜索text
+      search_list: [], // 搜索列表
+
+      popular_search_list: [], //热门搜索列表
+      favourite_list: [], // 猜你喜欢列表
+    };
+  },
+  onShow() {
+    if (uni.getStorageSync('searchItem')) {
+      this.search_list = uni.getStorageSync('searchItem');
+    }
+  },
+  mounted() {
+    this.handlerInitList();
+  },
+  methods: {
+    // 初始化热门搜索 猜你喜欢列表
+    handlerInitList() {
+      listHotMerchant().then(res => {
+        this.popular_search_list = res.data;
+      });
+
+      // 猜你喜欢列表
+      likeMerchant().then(res => {
+        this.favourite_list = res.data;
+      });
+    },
+    // 点击搜索按钮
+    handlerSearchBtn() {
+      if (!this.search_text) {
+        uni.showToast({
+          title: '请输入您要搜索的关键字',
+          icon: 'none',
+        });
+        return;
+      } else {
+        let params = {
+          name: this.search_text,
+        };
+        this.search_list.push(params);
+        uni.setStorageSync('searchItem', this.search_list);
+        this.search_text = '';
+      }
+    },
+    // 删除搜索记录按钮
+    handlerCloseSearchItem(item, index) {
+      this.search_list.splice(index, 1);
+      uni.setStorageSync('searchItem', this.search_list);
+    },
+    // 删除所有搜索记录按钮
+    handlerAllSearchRecord() {
+      uni.removeStorageSync('searchItem');
+      this.search_list = [];
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-	.search {
-		min-height: 100vh;
-		background-color: #fff;
-	}
-
-	/* 搜索样式 */
-	.search-item {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		padding: 0 20rpx;
-		height: 80rpx;
-		line-height: 80rpx;
-		background-color: #fff;
-		margin-bottom: 10rpx;
-
-		.search-btn {
-			width: 160rpx;
-			height: 70rpx;
-			font-size: 28rpx;
-			line-height: 70rpx;
-		}
-	}
-
-	/* 搜索历史样式 */
-	.history {
-		padding: 30rpx;
-		margin-bottom: 10rpx;
-
-		.history-top {
-			display: flex;
-			justify-content: space-between;
-			margin-bottom: 20rpx;
-
-			.history-right {
-				margin-top: 15rpx;
-				display: flex;
-				font-size: 12px;
-			}
-
-			hotCom {
-				font-size: 15px;
-				font-weight: bold;
-				color: #404045;
-			}
-		}
-	}
-
-	.label {
-		display: flex;
-		flex-wrap: wrap;
-	}
-
-	// 列表
-	.hot {
-		height: 220rpx;
-		background-color: #fff;
-		padding: 0 20rpx;
-		margin-bottom: 20rpx;
-		display: flex;
-
-		Image {
-			width: 120px;
-			height: calc(100% - 20rpx);
-			margin: 10rpx 20rpx 10rpx 0;
-		}
-
-		.item-text {
-			font-weight: bold;
-			margin: 10rpx 0 10rpx;
-			color: #333;
-		}
-
-		.item-flex {
-			display: flex;
-			justify-content: space-between;
-			font-size: 14px;
-			margin: 0 20rpx 30rpx 0;
-			color: #0d0d0d66;
-
-			.star {
-				display: flex;
-
-				.line {
-					margin-left: 18rpx;
-					margin-top: 5rpx;
-					font-size: 24rpx;
-				}
-			}
-		}
-
-		.address-flex {
-			display: flex;
-			justify-content: space-between;
-			font-size: 12px;
-			color: #999;
-			margin-right: 20rpx;
-		}
-	}
-
-	::v-deep view.data-v-1481d46d,
-	scroll-view.data-v-1481d46d,
-	swiper-item.data-v-1481d46d {
-		margin: 0 4rpx;
-	}
-</style>
+.search {
+  min-height: 100vh;
+  background-color: #fff;
+}
+
+/* 搜索样式 */
+.search-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 20rpx;
+  height: 80rpx;
+  line-height: 80rpx;
+  background-color: #fff;
+  margin-bottom: 10rpx;
+
+  .search-btn {
+    width: 160rpx;
+    height: 70rpx;
+    font-size: 28rpx;
+    line-height: 70rpx;
+  }
+}
+
+/* 搜索历史样式 */
+.history {
+  padding: 30rpx;
+  margin-bottom: 10rpx;
+
+  .history-top {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 20rpx;
+
+    .history-right {
+      margin-top: 15rpx;
+      display: flex;
+      font-size: 12px;
+    }
+
+    hotCom {
+      font-size: 15px;
+      font-weight: bold;
+      color: #404045;
+    }
+  }
+}
+
+.label {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+// 列表
+.hot {
+  height: 220rpx;
+  background-color: #fff;
+  padding: 0 20rpx;
+  margin-bottom: 20rpx;
+  display: flex;
+
+  Image {
+    width: 120px;
+    height: calc(100% - 20rpx);
+    margin: 10rpx 20rpx 10rpx 0;
+  }
+
+  .item-text {
+    font-weight: bold;
+    margin: 10rpx 0 10rpx;
+    color: #333;
+  }
+
+  .item-flex {
+    display: flex;
+    justify-content: space-between;
+    font-size: 14px;
+    margin: 0 20rpx 30rpx 0;
+    color: #0d0d0d66;
+
+    .star {
+      display: flex;
+
+      .line {
+        margin-left: 18rpx;
+        margin-top: 5rpx;
+        font-size: 24rpx;
+      }
+    }
+  }
+
+  .address-flex {
+    display: flex;
+    justify-content: space-between;
+    font-size: 12px;
+    color: #999;
+    margin-right: 20rpx;
+  }
+}
+
+::v-deep view.data-v-1481d46d,
+scroll-view.data-v-1481d46d,
+swiper-item.data-v-1481d46d {
+  margin: 0 4rpx;
+}
+</style>