首页搜索页添加

order/orderConfirm/orderConfirm.vue

@@ -91,7 +91,7 @@
 	<view class="cont conttop">
 		<view class="cont_title">订单备注</view>
 		<view class="cont_textarea">
-			<textarea class="cont_textarea_text" placeholder="选填,可以告诉我们您的特殊需求"></textarea>
+			<textarea class="cont_textarea_text" :disable-default-padding="isIos" placeholder="选填，可以告诉我们您的特殊需求"></textarea>
 		</view>
 	</view>
 	<view style="height: 200rpx;"></view>
@@ -191,6 +191,15 @@ const show = ref(false);
 const timList = ref([]);
 //使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
 //const { count,doubleCount } = storeToRefs(counterStore);
+const isIos = ref(false);
+const System = () =>{
+	const phone = wx.getSystemInfoSync();
+	if (phone.platform == 'ios') {
+	    isIos.value = true
+	} else if (phone.platform == 'android') {
+	    isIos.value = false
+	}
+};
 const OpenShop = ()=>{
 	shopShow.value ? shopPopup.value.close():shopPopup.value.open();
 };
@@ -246,6 +255,7 @@ const onAddress=()=>{
 	})
 };
 onLoad((options) => {
+	System();
 	timeFun();
 });
 onShow(() => {

order/orderConfirm/style.scss

@@ -28,7 +28,7 @@ page{
 					color: #000000;
 					.cont_default{
 						font-size: 20rpx;
-						background-color: #FFF4CD;
+						background-color: rgba(249, 212, 72, 0.2);
 						border-radius: 10rpx;
 						color: #F9D448;
 						margin-right: 10rpx;

pages.json

@@ -178,6 +178,22 @@
 						"navigationBarBackgroundColor": "#FFFFFF"
 				   }
 				},
+				{
+				   "path": "SearchProduct/SearchProduct",
+				   "style": {
+						"navigationBarTitleText": "",
+						"navigationBarBackgroundColor": "#FFFFFF",
+						"navigationStyle": "custom"
+				   }
+				},
+				{
+				   "path": "SearchList/SearchList",
+				   "style": {
+						"navigationBarTitleText": "",
+						"navigationBarBackgroundColor": "#FFFFFF",
+						"navigationStyle": "custom"
+				   }
+				},
 				{
 				   "path": "addressList/addressList",
 				   "style": {

pages/cart/cart.vue

@@ -2,16 +2,16 @@
   <page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta>
   <view class="main">
   	  <!-- 头部区域 -->
-  		<view class="head" :style="{'padding-top':headerHeight+'px'}" @click="location()">
+  		<view class="head" :style="{'padding-top':headerHeight+'px'}" >
-  			<view class="head_location head_location_active"><text class="location_title">东方体育中心</text></view>
+  			<view class="head_location head_location_active" @click="location()"><text class="location_title">人间都汇·汤泉养生</text></view>
   			<view class="head_ul">
 				<view class="head_l">
 					<view class="head_q">购物车</view>
 					<view class="head_w">我常买</view>
 				</view>
 				<view class="head_r">
-					<view class="head_li" @click="OpenCoupon()">优惠券(3）</view>
+					<view class="head_li" @click.stop="OpenCoupon()">优惠券(3）</view>
-					<view class="head_li" :class="showEdit?'head_edit':''" @click="edit">{{showEdit?'退出管理':'管理'}}</view>
+					<view class="head_li" :class="showEdit?'head_edit':''" @click.stop="edit">{{showEdit?'退出管理':'管理'}}</view>
 				</view>
 			</view>
   		</view>
@@ -31,7 +31,7 @@
 								<image class="cart_shop_img" :src="item.imgUrl" mode="widthFix"></image>
 							</view>
 							<view class="cart_shop_cont">
-								<view class="cart_title">{{item.title}}</view>
+								<view class="cart_title"><text class="cart_text">{{item.title}}</text></view>
 								<view class="cart_desc">{{item.desc}}</view>
 								<view class="cart_bottom">
 									<view class="cart_price price">{{item.price}}<text class="market_name prices">59.9</text></view>
@@ -506,6 +506,5 @@ onReachBottom(()=>{
 		margin-bottom: 20rpx !important;
 		border-radius: 25rpx !important;
 		background-color: #fff !important;
-		box-shadow: 0 4rpx 8rpx rgba(0,0,0,.05) !important;
 	}
 </style>

pages/cart/style.scss

@@ -31,7 +31,7 @@ page{
 			height: 21px;
 			background-image: url('../../static/location.png');
 			background-size: cover;
-			margin: 0px 2px 0px 10px;
+			margin: 0px 1px 0px 10px;
 		}
 		.head_location::after{
 			vertical-align: middle;
@@ -42,8 +42,8 @@ page{
 			border-left: 10rpx solid transparent;
 			border-right: 10rpx solid transparent;
 			border-top: 11rpx solid #FFFFFF;
-			margin-left: 3px;
+			margin-left: 1.5px;
-			margin-top: 1.5px;
+			margin-top: 0.8px;
 		}
 		.head_location_active{
 			.location_title{
@@ -74,7 +74,7 @@ page{
 				}
 				.head_w{
 					color: #333333;
-					font-size: 30rpx;
+					font-size: 28rpx;
 					padding-left: 15px;
 					padding-right: 15px;
 				}
@@ -116,6 +116,7 @@ page{
 				// box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);
 				display: flex;
 				justify-content: space-between;
+				align-items: center;
 				padding: 20rpx 0rpx 20rpx 0rpx;
 				.cart_selected{
 					width: 50rpx;
@@ -161,12 +162,21 @@ page{
 					}
 				}
 				.cart_shop_cont{
-					width: 410rpx;
+					width: 390rpx;
+					padding-right: 20rpx;
 					.cart_title{
-						font-size: 28rpx;
+						font-size: 27rpx;
 						color: #333333;
 						font-weight: 500;
-						min-height: 85rpx;
+						.cart_text{
+							min-height: 65rpx;
+							overflow: hidden;
+							text-overflow: ellipsis;
+							display: -webkit-box;
+							-webkit-box-orient: vertical;
+							-webkit-line-clamp: 2;
+							word-break: break-all;
+						}
 					}
 					.cart_desc{
 						font-size: 24rpx;
@@ -617,7 +627,6 @@ page{
 		font-weight: 400;
 	}
 	.cart_bottom{
-		margin-top: 20rpx;
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
@@ -629,7 +638,6 @@ page{
 		.cart_counter{
 			display: flex;
 			align-items: center;
-			margin-right: 20rpx;
 			.cart_counter_btn{
 				width: 55rpx;
 				height: 50rpx;

pages/index/index.vue

@@ -1,11 +1,11 @@
 <template>
   <view class="main">
 	  <!-- 头部区域 -->
-		<view class="head" :style="{'padding-top':headerHeight+'px'}" @click="location()">
+		<view class="head" :style="{'padding-top':headerHeight+'px'}" >
-			<view class="head_location head_location_active"><text class="location_title">东方体育中心</text></view>
+			<view class="head_location head_location_active" @click="location()"><text class="location_title">人间都汇·汤泉养生</text></view>
-			<view class="head_search" :style="{'height':statusHeight+8+'px'}">	
+			<view class="head_search" :style="{'height':statusHeight+8+'px'}" @click="onSearch">	
 				<image class="head_search_img" src="../../static/search_img.png" mode="widthFix"></image>
-				<input class="head_search_input" type="text" placeholder="请输入搜索内容" v-model="searchtext"/>
+				<input class="head_search_input" disabled="true" type="text" placeholder="请输入搜索内容" v-model="searchtext"/>
 				<view class="head_search_btn">搜索</view>
 			</view>
 		</view>
@@ -350,6 +350,11 @@ const location=()=>{
 		url:`/userserve/location/location`
 	})
 }
+const onSearch=()=>{
+	uni.navigateTo({
+		url:`/userserve/SearchProduct/SearchProduct`
+	})
+}
 onLoad((options) => {
 
 });

pages/index/style.scss

@@ -37,7 +37,7 @@ page{
 			height: 21px;
 			background-image: url('../../static/location.png');
 			background-size: cover;
-			margin: 0px 2px 0px 10px;
+			margin: 0px 1px 0px 10px;
 		}
 		.head_location::after{
 			vertical-align: middle;
@@ -48,8 +48,8 @@ page{
 			border-left: 10rpx solid transparent;
 			border-right: 10rpx solid transparent;
 			border-top: 11rpx solid #FFFFFF;
-			margin-left: 3px;
+			margin-left: 1.5px;
-			margin-top: 1.5px;
+			margin-top: 0.8px;
 		}
 		.head_location_active{
 			.location_title{
@@ -227,7 +227,7 @@ page{
 				padding-bottom: 30rpx;
 				display: inline-block;
 				margin-left: 20rpx;
-				box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);
+				// box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);
 				.scroll_view_banner{
 					width: 100%;
 					height: 340rpx;

pages/user/style.scss

@@ -62,7 +62,7 @@ page{
 		background-color: #FFFFFF;
 		border-radius: 20rpx;
 		padding: 40rpx;
-		box-shadow: 0 4rpx 8rpx rgba(0,0,0,.05);
+		// box-shadow: 0 4rpx 8rpx rgba(0,0,0,.05);
 		position: relative;
 		.user_account_li{
 			display: flex;
@@ -129,7 +129,7 @@ page{
 		flex-wrap: wrap;
 		background-color: #FFFFFF;
 		border-radius: 20rpx;
-		box-shadow: 0 4rpx 8rpx rgba(0,0,0,.05);
+		// box-shadow: 0 4rpx 8rpx rgba(0,0,0,.05);
 		.user_cont_li{
 			width: 20%;
 			box-sizing: border-box;

userserve/SearchList/SearchList.vue

@@ -0,0 +1,194 @@
+<template>
+  <view class="main">
+	<view class="head" :style="{'padding-top':headerHeight+4+'px'}">
+		<view class="head_top">
+			<view class="head_back" @click="handleBack()" :style="{'width': statusHeight+'px','height':statusHeight+'px'}">
+				<image class="head_back_img" src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/newPD/zhBack.png" mode="widthFix"></image>
+			</view>
+			<view class="head_search" :style="{'width':searchWidth+'px','height':statusHeight+5+'px'}">
+				<image class="head_search_img" src="../../static/search_img.png" mode="widthFix"></image>
+				<input class="head_search_input"  type="text" v-model="searchtext" disabled="true" @click="handleBack()"/>
+			</view>
+		</view>
+	</view>
+	<view class="cont" :style="{'padding-top':statusHeight+headerHeight+19+'px'}">
+		<!-- 商品区域 -->
+		<view class="shop_view">
+			<view class="shop_view_ul">
+				<view class="shop_view_li" @click="goDetail()">
+					<view class="shop_view_img">
+						<view class="shop_view_tag"><text class="shop_view_tag_text">够辣</text></view>
+						<view class="shop_view_img_u">
+							<image class="shop_view_img_url" src="../../static/Mask.png"></image>
+						</view>
+					</view>
+					<view class="shop_view_cont">
+						<view class="shop_view_cont_title">糖醋排骨</view>
+						<view class="shop_view_cont_desc">乡下土猪</view>
+						<view class="shop_view_cont_tag">
+							<view class="shop_view_cont_tag_text">仅剩3份</view>
+							<view class="shop_view_cont_tag_text">劲辣胃浓</view>
+						</view>
+						<view class="shop_view_cont_bottom">
+							<view class="shop_view_cont_price price">43.9<text class="market_name prices">59.9</text></view>
+							<view class="shop_view_cont_cart">
+								<image class="shop_view_cont_cart_img" src="../../static/oncatr02.png" mode="widthFix"></image>
+							</view>
+						</view>
+					</view>
+				</view>
+				<view class="shop_view_li" @click="goDetail()">
+					<view class="shop_view_img">
+						<view class="shop_view_tag"><text class="shop_view_tag_text">够辣</text></view>
+						<view class="shop_view_img_u">
+							<image class="shop_view_img_url" src="../../static/Mask.png"></image>
+						</view>
+					</view>
+					<view class="shop_view_cont">
+						<view class="shop_view_cont_title">糖醋排骨</view>
+						<view class="shop_view_cont_desc">乡下土猪</view>
+						<view class="shop_view_cont_tag">
+							<view class="shop_view_cont_tag_text">仅剩3份</view>
+							<view class="shop_view_cont_tag_text">劲辣胃浓</view>
+						</view>
+						<view class="shop_view_cont_bottom">
+							<view class="shop_view_cont_price price">43.9<text class="market_name prices">59.9</text></view>
+							<view class="shop_view_cont_cart">
+								<image class="shop_view_cont_cart_img" src="../../static/oncatr02.png" mode="widthFix"></image>
+							</view>
+						</view>
+					</view>
+				</view>
+				<view class="shop_view_li" @click="goDetail()">
+					<view class="shop_view_img">
+						<view class="shop_view_tag"><text class="shop_view_tag_text">香甜</text></view>
+						<view class="shop_view_img_u">
+							<image class="shop_view_img_url" src="../../static/Mask.png"></image>
+						</view>
+					</view>
+					<view class="shop_view_cont">
+						<view class="shop_view_cont_title">泡椒田鸡</view>
+						<view class="shop_view_cont_desc">超大只田鸡</view>
+						<view class="shop_view_cont_tag">
+							<view class="shop_view_cont_tag_text">仅剩3份</view>
+							<view class="shop_view_cont_tag_text">劲辣胃浓</view>
+							<view class="shop_view_cont_tag_text">劲辣胃浓</view>
+						</view>
+						<view class="shop_view_cont_bottom">
+							<view class="shop_view_cont_price price">43.9<text class="market_name prices">59.9</text></view>
+							<view class="shop_view_cont_cart">
+								<image class="shop_view_cont_cart_img" src="../../static/oncatr02.png" mode="widthFix"></image>
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+			<view class="shop_view_ul">
+				<view class="shop_view_li" @click="goDetail()">
+					<view class="shop_view_img">
+						<view class="shop_view_tag"><text class="shop_view_tag_text">热销</text></view>
+						<view class="shop_view_img_u">
+							<image class="shop_view_img_url" src="../../static/Mask.png"></image>
+						</view>
+					</view>
+					<view class="shop_view_cont">
+						<view class="shop_view_cont_title">泡椒田鸡</view>
+						<view class="shop_view_cont_desc">超大只田鸡</view>
+						<view class="shop_view_cont_tag">
+							<view class="shop_view_cont_tag_text">仅剩3份</view>
+							<view class="shop_view_cont_tag_text">劲辣胃浓</view>
+						</view>
+						<view class="shop_view_cont_bottom">
+							<view class="shop_view_cont_price price">43.9<text class="market_name prices">59.9</text></view>
+							<view class="shop_view_cont_cart">
+								<image class="shop_view_cont_cart_img" src="../../static/oncatr02.png" mode="widthFix"></image>
+							</view>
+						</view>
+					</view>
+				</view>	
+				<view class="shop_view_li" @click="goDetail()">
+					<view class="shop_view_img">
+						<view class="shop_view_tag"><text class="shop_view_tag_text">新鲜</text></view>
+						<view class="shop_view_img_u">
+							<image class="shop_view_img_url" src="../../static/Mask.png"></image>
+						</view>
+					</view>
+					<view class="shop_view_cont">
+						<view class="shop_view_cont_title">泡椒田鸡</view>
+						<view class="shop_view_cont_desc">超大只田鸡</view>
+						<view class="shop_view_cont_tag">
+							<view class="shop_view_cont_tag_text">仅剩3份</view>
+							<view class="shop_view_cont_tag_text">劲辣胃浓</view>
+						</view>
+						<view class="shop_view_cont_bottom">
+							<view class="shop_view_cont_price price">43.9<text class="market_name prices">59.9</text></view>
+							<view class="shop_view_cont_cart">
+								<image class="shop_view_cont_cart_img" src="../../static/oncatr02.png" mode="widthFix"></image>
+							</view>
+						</view>
+					</view>
+				</view>			
+			</view>
+		</view>
+		
+	</view>
+  </view>
+</template>
+
+<script setup>
+import { computed,ref,onMounted,onUnmounted,getCurrentInstance,nextTick } from 'vue';
+import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store
+import { storeToRefs } from 'pinia';//实现解构付值
+import { onLoad,onShow,onPullDownRefresh,onPageScroll,onReachBottom,onReady } from "@dcloudio/uni-app"
+const counterStore = useCounterStore(); // 使用 Store
+const { proxy } = getCurrentInstance();
+//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
+const {statusHeight,headerHeight,statusBartop,ButtonWidth,ButtonHeight } = storeToRefs(counterStore);
+// 定义响应式数据，存储页面宽度
+const pageWidth = ref(0);
+const searchtext = ref('');
+const searchList= ref([]);
+// 获取页面宽度
+const updatePageWidth = () => {
+  const systemInfo = uni.getSystemInfoSync();
+  pageWidth.value = systemInfo.windowWidth;
+};
+
+const searchWidth = computed(() => {
+	return pageWidth.value - statusHeight.value - ButtonWidth.value - 35;
+});
+// 判断是否有上一页
+const getPages = () => {
+  const pages = getCurrentPages();
+  return pages.length > 1;
+};
+const handleBack = () => {
+  if (getPages()) {
+    // 如果有上一页，返回上一页
+    uni.navigateBack();
+  } else {
+    // 如果没有上一页，返回首页
+    uni.switchTab({
+      url: '/pages/index/index',
+    });
+  }
+};
+
+
+onLoad((options) => {
+	const { text } = options;
+	
+	if(searchtext){
+		searchtext.value = text;
+	}
+	updatePageWidth();
+});
+onShow(() => {});
+onReady(()=>{})
+onPullDownRefresh(()=>{})
+onReachBottom(()=>{})
+</script>
+
+<style lang="scss">
+	@import './style.scss';
+</style>

userserve/SearchList/style.scss

@@ -0,0 +1,194 @@
+page{
+	background-color: #f6f6f6;
+}
+.main{
+	.head{
+		position: fixed;
+		z-index: 100;
+		width: 100%;
+		top: 0;
+		left: 0;
+		background-color: #FFFFFF;
+		border-bottom: 1rpx solid #f6f6f6;
+		padding-bottom: 10px;
+		.head_top{
+			display: flex;
+			align-items: center;
+			.head_back{
+				display: flex;
+				align-items: center;
+				border-radius: 50rpx;
+				margin-left: 10px;
+				.head_back_img{
+					display: block;
+					width: 18px;
+					height: 18px;
+					margin-left: 7px;
+				}
+			}
+			.head_search{
+				width: 210px;
+				margin:0rpx 0px 0rpx 10px;;
+				display: flex;
+				align-items: center;
+				background-color: #F6F6F6;
+				height: 38px;
+				border-radius: 50rpx;
+				font-size: 28rpx;
+				color: #000000;
+				justify-content: space-between;
+				.head_search_img{
+					width: 28px;
+					height: 28px;
+					margin-right: 13rpx;
+					margin-left: 23rpx;
+				}
+				.head_search_input{
+					width: 500rpx;
+					height: 100%;
+					font-size: 27rpx;
+					display: flex;
+					align-items: center;
+				}
+			}
+		}
+	}
+	.cont{
+		// 商品区域样式
+		.shop_view{
+			margin-top: 10rpx;
+			padding: 13rpx 20rpx 0rpx 20rpx;
+			display: flex;
+			justify-content: space-between;
+			.shop_view_ul{
+				width: 346rpx;
+				.shop_view_li{
+					background-color: #FFFFFF;
+					border-radius: 20rpx;
+					width: 100%;
+					box-shadow: 0 4rpx 8rpx rgba(0,0,0,.05);
+					margin-bottom: 20rpx;
+					.shop_view_li_swiper{
+						width: 100%;
+						height: 504rpx;
+						.shop_view_li_swiper_item{
+							width: 100%;
+							.shop_view_li_swiper_img_url{
+								width: 100%;
+								height: 504rpx;
+								display: block;
+								border-radius: 20rpx;
+							}
+						}
+					}
+					.shop_view_img{
+						width: 100%;
+						position: relative;
+						height: 320rpx;
+						.shop_view_tag{
+							width: 66rpx;
+							height: 42rpx;
+							position: absolute;
+							z-index: 2;
+							right: -15rpx;
+							top: 20rpx;
+							background: url(../../static/tag_img.png);
+							background-repeat: no-repeat;
+							background-size: 100% 100%;
+							.shop_view_tag_text{
+								font-size: 20rpx;
+								color: #FFFFFF;
+								height: 30rpx;
+								display: flex;
+								align-items: center;
+								justify-content: center;
+							}
+						}
+						.shop_view_img_u{
+							width: 300rpx;
+							position: absolute;
+							z-index: 1;
+							left: 20rpx;
+							top: 20rpx;
+							.shop_view_img_url{
+								width: 100%;
+								height: 300rpx;
+								display: block;
+							}
+						}
+					}
+					.shop_view_cont{
+						padding: 20rpx;
+						.shop_view_cont_title{
+							font-size: 28rpx;
+							font-weight: 500;
+							color: #000000;
+							min-height: 80rpx;
+						}
+						.shop_view_cont_desc{
+							color: #666666;
+							font-size: 24rpx;
+						}
+						.shop_view_cont_tag{
+							display: flex;
+							flex-wrap: wrap;
+							.shop_view_cont_tag_text{
+								border-radius: 6rpx;
+								border: 1px solid #FF6868;
+								padding: 0rpx 10rpx;
+								border-radius: 10rpx;
+								color: #ff6868;
+								font-size: 18rpx;
+								margin-top: 10rpx;
+								margin-right: 10rpx;
+							}
+						}
+					}
+					.shop_view_cont_bottom{
+						display: flex;
+						align-items: center;
+						justify-content: space-between;
+						.shop_view_cont_price{
+							font-size: 32rpx;
+							color: red;
+							font-weight: 500;
+						}
+						.shop_view_cont_cart{
+							width: 65rpx;
+							height: 65rpx;
+							display: flex;
+							align-items: center;
+							justify-content: flex-end;
+							.shop_view_cont_cart_img{
+								width: 40rpx;
+								height: 40rpx;
+								display: block;
+							}
+						}
+					}
+				}
+				.shop_view_bcg{
+					background-color: inherit;
+				}
+			}
+		}
+	}
+	.price::before {
+		content: '¥';
+		font-size: 24rpx;
+		margin-right: 5rpx;
+	}
+	.prices::before {
+		content: '¥';
+		font-size: 20rpx;
+		margin-right: 5rpx;
+		margin-left: 5rpx;
+	}
+	.market_name{
+		color: #999999;
+		font-size: 23rpx;
+		text-decoration: line-through;
+		margin-left: 5rpx;
+		font-weight: 400;
+	}
+}

userserve/SearchProduct/SearchProduct.vue

@@ -0,0 +1,135 @@
+<template>
+  <view class="main">
+	<view class="head" :style="{'padding-top':headerHeight+4+'px'}">
+		<view class="head_top">
+			<view class="head_back" @click="handleBack()" :style="{'width': statusHeight+'px','height':statusHeight+'px'}">
+				<image class="head_back_img" src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/newPD/zhBack.png" mode="widthFix"></image>
+			</view>
+			<view class="head_search" :style="{'width':searchWidth+'px','height':statusHeight+5+'px'}">
+				<image class="head_search_img" src="../../static/search_img.png" mode="widthFix"></image>
+				<input class="head_search_input" :focus="focus" type="text" confirm-type="search" placeholder="请输入搜索内容" v-model="searchtext" @input="onKeyInput" @confirm="confirm"/>
+			</view>
+		</view>
+	</view>
+	<view class="cont" :style="{'padding-top':statusHeight+headerHeight+19+'px'}">
+		<block v-if="searchList.length">
+			<view class="cont_ul">
+				<view class="cont_li" v-for="(item,index) in searchList" :key="index" @click="onList(item.title)">{{item.title}}</view>
+			</view>
+		</block>
+		<block v-else>
+			<view class="cont_title">历史搜索</view>
+			<view class="cont_keyword">
+				<view class="cont_keyword_item">排骨</view>
+				<view class="cont_keyword_item">猪肉炖粉条</view>
+				<view class="cont_keyword_item">蚂蚁上树</view>
+			</view>
+			
+			<view class="cont_title">搜索发现</view>
+			<view class="cont_keyword">
+				<view class="cont_keyword_item">买1赠1起</view>
+				<view class="cont_keyword_item">水果半价日</view>
+				<view class="cont_keyword_item">海鲜5折抢</view>
+				<view class="cont_keyword_item">春菜</view>
+				<view class="cont_keyword_item">青团</view>
+				<view class="cont_keyword_item">虾</view>
+				<view class="cont_keyword_item">牛奶</view>
+				<view class="cont_keyword_item">矿泉水</view>
+			</view>
+		</block>
+		
+	</view>
+  </view>
+</template>
+
+<script setup>
+import { computed,ref,onMounted,onUnmounted,getCurrentInstance,nextTick } from 'vue';
+import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store
+import { storeToRefs } from 'pinia';//实现解构付值
+import { onLoad,onShow,onPullDownRefresh,onPageScroll,onReachBottom,onReady } from "@dcloudio/uni-app"
+const counterStore = useCounterStore(); // 使用 Store
+const { proxy } = getCurrentInstance();
+//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
+const {statusHeight,headerHeight,statusBartop,ButtonWidth,ButtonHeight } = storeToRefs(counterStore);
+// 定义响应式数据，存储页面宽度
+const pageWidth = ref(0);
+const focus = ref(false);
+const searchtext = ref('');
+const searchList= ref([]);
+// 获取页面宽度
+const updatePageWidth = () => {
+  const systemInfo = uni.getSystemInfoSync();
+  pageWidth.value = systemInfo.windowWidth;
+};
+
+const searchWidth = computed(() => {
+	return pageWidth.value - statusHeight.value - ButtonWidth.value - 35;
+});
+// 判断是否有上一页
+const getPages = () => {
+  const pages = getCurrentPages();
+  return pages.length > 1;
+};
+const handleBack = () => {
+  if (getPages()) {
+    // 如果有上一页，返回上一页
+    uni.navigateBack();
+  } else {
+    // 如果没有上一页，返回首页
+    uni.switchTab({
+      url: '/pages/index/index',
+    });
+  }
+};
+
+const onKeyInput=()=>{
+	if(searchtext.value){
+		const list = [{
+			title:'啤酒'
+		},
+		{
+			title:'雪花啤酒'
+		},
+		{
+			title:'青岛啤酒装罐'
+		},
+		{
+			title:'百威啤酒'
+		},
+		{
+			title:'原浆啤酒'
+		},
+		{
+			title:'进口啤酒'
+		},
+		{
+			title:'燕京啤酒'
+		}]
+		searchList.value = list;
+	}else{
+		searchList.value = [];
+	}
+};
+const onList=(name)=>{
+	uni.navigateTo({
+		url:`/userserve/SearchList/SearchList?text=${name}`
+	})
+};
+const confirm=(e)=>{
+	uni.navigateTo({
+		url:`/userserve/SearchList/SearchList?text=${searchtext.value}`
+	})
+};
+onLoad((options) => {
+	focus.value = true;
+	updatePageWidth();
+});
+onShow(() => {});
+onReady(()=>{})
+onPullDownRefresh(()=>{})
+onReachBottom(()=>{})
+</script>
+
+<style lang="scss">
+	@import './style.scss';
+</style>

userserve/SearchProduct/style.scss

@@ -0,0 +1,86 @@
+page{
+	background-color: #FFFFFF;
+}
+.main{
+	.head{
+		position: fixed;
+		z-index: 100;
+		width: 100%;
+		top: 0;
+		left: 0;
+		background-color: #FFFFFF;
+		border-bottom: 1rpx solid #f6f6f6;
+		padding-bottom: 10px;
+		.head_top{
+			display: flex;
+			align-items: center;
+			.head_back{
+				display: flex;
+				align-items: center;
+				border-radius: 50rpx;
+				margin-left: 10px;
+				.head_back_img{
+					display: block;
+					width: 18px;
+					height: 18px;
+					margin-left: 7px;
+				}
+			}
+			.head_search{
+				width: 210px;
+				margin:0rpx 0px 0rpx 10px;;
+				display: flex;
+				align-items: center;
+				background-color: #F6F6F6;
+				height: 38px;
+				border-radius: 50rpx;
+				font-size: 28rpx;
+				color: #000000;
+				justify-content: space-between;
+				.head_search_img{
+					width: 28px;
+					height: 28px;
+					margin-right: 13rpx;
+					margin-left: 23rpx;
+				}
+				.head_search_input{
+					width: 500rpx;
+					height: 100%;
+					font-size: 27rpx;
+					display: flex;
+					align-items: center;
+				}
+			}
+		}
+	}
+	.cont{
+		.cont_title{
+			font-size: 30rpx;
+			font-weight: 500;
+			color: #333333;
+			margin: 40rpx 20rpx 0rpx 20rpx;
+		}
+		.cont_keyword{
+			display: flex;
+			overflow: hidden;
+			flex-wrap: wrap;
+			.cont_keyword_item{
+				font-size: 26rpx;
+				color: #333333;
+				padding: 10rpx 30rpx 10rpx 30rpx;
+				background-color: #f6f6f6;
+				border-radius: 50rpx;
+				margin-left: 20rpx;
+				margin-top: 20rpx;
+			}
+		}
+		.cont_ul{
+			.cont_li{
+				border-bottom:1rpx solid #D9D9D9;
+				padding: 30rpx 0;
+				margin: 0rpx 30rpx 0rpx 30rpx;
+			}
+		}
+		
+	}
+}

userserve/addressEdit/style.scss

@@ -12,7 +12,7 @@ page{
 			// padding: 25rpx 0rpx 25rpx 0rpx;
 			display: flex;
 			justify-content: space-between;
-			border-bottom: 1rpx solid #f6f6f6;
+			border-bottom: 1rpx solid #D9D9D9;
 			.adderss_name{
 				font-size: 28rpx;
 				color: #333333;

userserve/addressList/style.scss

@@ -11,14 +11,14 @@ page{
 		.location_list{
 			padding-top: 30rpx;
 			padding-bottom: 30rpx;
-			border-bottom: 1rpx solid #f6f6f6;
+			border-bottom: 1rpx solid #D9D9D9;
 			.location_l{
 				.location_address{
 					.location_default{
 						font-size: 20rpx;
-						background-color: #fff4cd;
+						background-color: rgba(249, 212, 72, 0.2);
 						border-radius: 10rpx;
-						color: #f9d448;
+						color: #F9D448;
 						margin-right: 10rpx;
 						padding: 2rpx 10rpx;
 						vertical-align: middle;

userserve/location/style.scss

@@ -47,14 +47,14 @@ page{
 		.location_list{
 			padding-top: 30rpx;
 			padding-bottom: 30rpx;
-			border-bottom: 1rpx solid #f6f6f6;
+			border-bottom: 1rpx solid #D9D9D9;
 			.location_l{
 				.location_address{
 					.location_default{
 						font-size: 20rpx;
-						background-color: #fff4cd;
+						background-color: rgba(249, 212, 72, 0.2);
 						border-radius: 10rpx;
-						color: #f9d448;
+						color: #F9D448;
 						margin-right: 10rpx;
 						padding: 2rpx 10rpx;
 						vertical-align: middle;
@@ -101,7 +101,7 @@ page{
 			font-weight: 500;
 			color: #333333;
 			padding: 30rpx 0 30rpx 0;
-			border-bottom: 1rpx solid #f6f6f6;
+			border-bottom: 1rpx solid #D9D9D9;
 		}
 	}
 	.flex{