完成用户端

pages.json

@@ -203,6 +203,44 @@
             }
             
         }
+        ,{
+            "path" : "pages/mine/myEvaluate",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "我的评价",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+        ,{
+            "path" : "pages/mine/myKefu",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "我的客服",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+        ,{
+            "path" : "pages/mine/myCollection",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "我的收藏",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+        ,{
+            "path" : "pages/mang/search",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "搜索",
+                "enablePullDownRefresh": false,
+				"navigationBarBackgroundColor": "#f8f8f8",
+				"backgroundColor": "#f8f8f8"
+            }
+            
+        }
     ],
 	"tabBar": {
 		"color": "#999999",

pages/mang/components/eva-item.vue

@@ -34,7 +34,6 @@
 					@tap="previewImg(idx)"
 				/>	
 			</view>
-			
 		</view>
 	</view>
 </template>
@@ -122,5 +121,6 @@ export default {
 		}	
 	}
 	
+	
 }
 </style>

pages/mang/search.vue

@@ -0,0 +1,265 @@
+<template>
+	<view class="page">
+		<view class="p-bar flex-row">
+		  <view class="align-center justify-between bar">
+			<view class="align-center">
+			  <image
+				src="/static/mang-sear.png"
+				class="image_5"
+			  />
+			  <input type="text" placeholder="请输入商家或商品名称" class="inpt" v-model="keyword">
+			</view>
+			<image
+			  src="/static/mang-quxiao.png"
+			  class="image_6"
+			  v-if="hasKeyword"
+			/>
+		  </view>
+		  <!-- <text class="text_3" v-if="hasKeyword">取消</text> -->
+		  <text class="text_3" @tap="search">搜索</text>
+		</view>
+		<!-- v-if="!hasKeyword" -->
+		<view class="p-history" v-if="true && search_lishi.length>0">
+			<view class="title">
+				历史搜索
+			</view>
+			<view class="item-wrap align-center">
+				<view class="item" v-for="(item,i) in search_lishi" :key="i">
+					{{item}}
+				</view>	
+			</view>
+		</view>
+		<view class="p-content" v-else-if="false">
+			<view class="item-wrap flex-row justify-between" v-for="(item,i) in 3" :key="i">
+				  <view class="flex-row">
+				    <image
+				      src="/static/temp/pro.png"
+				      class="image_7"
+					  mode="aspectFill"
+				    />
+				    <view class="flex-col group_8">
+				      <view class="flex-col items-start">
+				        <text class="text_4 clamp">幸福西饼Rice盲盒</text>
+						<view class="stars align-center">
+							 <image
+							  src="/static/mang_star.png"
+							  class="image_8"
+							  v-for="(item,idx) in 3"
+							  :key="idx"
+							/>	
+						</view>
+				        <text class="text_5">随机搭配</text>
+				      </view>
+				      <view class="flex-row group_10">
+				        <view class="group_11">
+				          <text class="text_6">￥</text>
+				          <text class="text_7">18.8</text>
+				        </view>
+				        <text class="text_8">￥24~33</text>
+				      </view>
+				    </view>
+				  </view>
+				  <text class="text_9">1.5km</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				keyword:'',
+				search_lishi:[],
+			};
+		},
+		computed:{
+			hasKeyword(){
+				if(this.keyword){
+					return true;
+				}
+				return false;
+			}
+		},
+		onShow(){  //这里一进来就查询之前留下的搜索内容  别忘了退出登录的时候删掉
+			// console.log(uni.getStorageSync('history'))
+			this.search_lishi = uni.getStorageSync('history') || [] //存放历史记录的数组
+		},
+		methods:{
+			search(){
+				if(this.hasKeyword){
+					this.add_history(this.keyword)
+				}
+			},
+			//添加新的历史记录 当有搜索新的历史记录时就会进入这个方法
+			add_history(e){  
+				//存在，flag1==0
+				try{
+					let flag1= this.search_lishi.findIndex(item => item=== e) //判断数组里面有没有重复查询过的内容
+					if(flag1 != -1){  //有重复内容
+						// if(flag1 != 0){ //如果删除0会出错
+							this.search_lishi.splice(flag1,1) //删除重复重新添加一个
+							this.search_lishi.unshift(e)  //添加一个内容
+						// }
+					}else{
+			            if(this.search_lishi.length >= 16){
+							this.search_lishi.splice(15,1)  //删除最后一个新添加一个
+							this.search_lishi.unshift(e)  //添加一个内容
+						}else{
+							this.search_lishi.unshift(e)  //添加一个内容
+						}
+					}
+					uni.setStorageSync('history', this.search_lishi);//保存用户搜索历史
+					this.search_lishi = uni.getStorageSync('history') //存放历史记录的数组
+				}catch(e){
+					this.search_lishi.push(e)  //添加一个内容
+					//TODO handle the exception
+				}
+			},
+		},
+	}
+</script>
+
+<style lang="scss">
+page{
+	background-color: #f8f8f8;
+}
+.page{
+	padding: 30rpx;
+}
+.p-bar{
+	.bar {
+	  flex: 1 1 auto;
+	  border-radius: 32rpx;
+	  height: 64rpx;
+	  border: solid 2rpx #92b99c;
+	  padding: 0 20rpx;
+	}
+	.image_5 {
+	  flex-shrink: 0;
+	  width: 31rpx;
+	  height: 31rpx;
+	}
+	.inpt {
+	  margin-left: 17rpx;
+	  height: 60rpx;
+	  line-height: 60rpx;
+	  color: #333;
+	  font-size: 28rpx;
+	  font-family: PingFang;
+	  letter-spacing: 1.12rpx;
+	}
+	.image_6 {
+	  margin-bottom: 3rpx;
+	  width: 28rpx;
+	  height: 28rpx;
+	}
+	.text_3 {
+	  margin-left: 28rpx;
+	  margin-right: 4rpx;
+	  align-self: center;
+	  color: #92b99c;
+	  font-size: 28rpx;
+	  font-family: PingFang;
+	  line-height: 27rpx;
+	  letter-spacing: 1.12rpx;
+	}
+}
+.p-history{
+	padding-top: 10rpx;
+	.title{
+		height: 90rpx;
+		line-height: 90rpx;
+		font-size: 32rpx;
+		font-family: PingFang SC;
+		font-weight: bold;
+		color: #333333;
+	}
+	.item-wrap{
+		flex-wrap: wrap;
+	}
+	.item{
+		height: 54rpx;
+		line-height: 54rpx;
+		padding: 0 20rpx;
+		background: #ECEFED;
+		border-radius: 27px;
+		margin-right: 24rpx;
+		margin-bottom: 24rpx;
+		
+		font-size: 24rpx;
+		font-family: PingFang SC;
+		font-weight: 500;
+		color: #333333;
+	}
+}
+.p-content{
+	padding-top: 40rpx;
+	.item-wrap{
+		  padding: 24rpx 14rpx 24rpx 24rpx;
+		  background-color: #ffffff;
+		  box-shadow: 0px 6rpx 10rpx #2a2a2a14;
+		  border-radius: 20rpx;
+		  margin-bottom: 24rpx;
+		.image_7 {
+		  width: 200rpx;
+		  height: 200rpx;
+		}
+		.group_8 {
+		  margin-left: 18rpx;
+		  margin-bottom: 3rpx;
+		}
+		.text_4 {
+		  color: #333333;
+		  font-size: 30rpx;
+		  font-family: PingFang;
+		  max-width: 400rpx;
+		}
+		.image_8 {
+		  margin-top: 14rpx;
+		  width: 28rpx;
+		  height: 28rpx;
+		  margin-right: 4rpx;
+		}
+		.text_5 {
+		  margin-left: 3rpx;
+		  margin-top: 18rpx;
+		  color: #999999;
+		  font-size: 24rpx;
+		  font-family: PingFang;
+		}
+		.group_10 {
+		  margin-top: 57rpx;
+		  padding: 0 3rpx;
+		}
+		.group_11 {
+		  line-height: 28rpx;
+		  height: 29rpx;
+		}
+		.text_6 {
+		  color: #ff3e3e;
+		  font-size: 24rpx;
+		  font-family: PingFang;
+		}
+		.text_7 {
+		  color: #ff3e3e;
+		  font-size: 36rpx;
+		  font-family: PingFang;
+		}
+		.text_8 {
+		  margin-left: 10rpx;
+		  margin-top: 9rpx;
+		  color: #999999;
+		  font-size: 24rpx;
+		  font-family: PingFang;
+		  text-decoration: line-through;
+		}
+		.text_9 {
+		  align-self: center;
+		  color: #999999;
+		  font-size: 24rpx;
+		  font-family: PingFang;
+		}
+	}
+}
+</style>

pages/mine/components/eva-item.vue

@@ -0,0 +1,134 @@
+<template>
+	<view class="eva-wrap flex-col">
+		<view class="flex-row justify-between">
+			<view class="flex-row">
+				<image
+					src="/static/temp/pro.png"
+					class="image_16 image_22"
+					mode="aspectFill"
+				/>
+				<view class="flex-col items-start group_30">
+					<text class="text_20 clamp">甜品大师姐</text>
+					<text class="text_21">2022.07.13 10:56</text>
+				</view>
+			</view>
+			<view class="stars align-center">
+				 <image
+				  src="/static/mang_star.png"
+				  class="image_10"
+				  v-for="(item,idx) in 5"
+				  :key="idx"
+				/>	
+			</view>
+		</view>
+		<view class="flex-col group_31">
+			<view class="group_32">
+				<text class="text_22">这是我吃过的最好吃的一款，强烈推荐，口感细腻，想象不到的美味。太好吃了。</text>
+			</view>
+			<view class="imgs-wrap align-center">
+				<image
+					src="/static/temp/pro.png"
+					class="image_19 image_24"
+					mode="aspectFill"
+					v-for="(item,idx) in 6" :key="idx"
+					@tap="previewImg(idx)"
+				/>	
+			</view>
+			<view class="mark clamp">#四拼奶油慕斯蛋糕</view>
+			
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {};
+  },
+  props: {
+	//请求数据
+	info:{
+		type:Object,
+		default:()=>({})
+	},
+  },
+  methods: {
+	  previewImg(idx){
+	  	let url = [];
+	  	this.$tools.previewImg(url)
+	  }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.eva-wrap {
+	padding: 37rpx 33rpx 40rpx;
+	.image_16 {
+		width: 54rpx;
+		height: 54rpx;
+		border-radius: 54rpx;
+	}
+	.image_22 {
+		margin-top: 4rpx;
+	}
+	.group_30 {
+		margin-left: 20rpx;
+	}
+	.text_20 {
+		color: #333333;
+		font-size: 30rpx;
+		font-family: PingFang;
+		letter-spacing: 1.2rpx;
+		max-width: 300rpx;
+	}
+	.text_21 {
+		margin-top: 15rpx;
+		color: #999999;
+		font-size: 20rpx;
+		font-family: PingFang;
+	}
+	.image_10 {
+		width: 28rpx;
+		height: 28rpx;
+		margin-left: 4rpx;
+	}
+	.group_31 {
+		margin: 13.5rpx 24rpx 0 7rpx;
+	}
+	.group_32 {
+		line-height: 37rpx;
+	}
+	.text_22 {
+		color: #333333;
+		font-size: 26rpx;
+		font-family: PingFang;
+		line-height: 40rpx;
+		letter-spacing: 1.04rpx;
+	}
+	.imgs-wrap{
+		flex-wrap: wrap;
+		.image_19 {
+			width: 180rpx;
+			height: 180rpx;
+			margin-right: 20rpx;
+			border-radius: 10rpx;
+			margin-bottom: 20rpx;
+			// &:nth-child(4n){
+			// 	margin-right: 0;
+			// }
+		}
+		.image_24 {
+			margin-top: 16.5rpx;
+			align-self: flex-start;
+		}	
+	}
+	.mark{
+		max-width: 400rpx;
+		font-size: 26rpx;
+		font-family: PingFang SC;
+		font-weight: 500;
+		color: #92B99C;
+	}
+	
+}
+</style>

pages/mine/myCollection.vue

@@ -0,0 +1,104 @@
+<template>
+	<view class="page">
+		<view class="item-wrap" v-for="(item,idx) in 3" :key="idx">
+			<view class="ic-wrap align-center justify-center">
+				<!-- <image src="/static/love.png" mode="widthFix" class="ic"></image> -->
+				<image src="/static/c-lovefull.png" mode="widthFix" class="ic"></image>
+			</view>
+			<view class="t align-center">
+				<image src="/static/temp/pro.png" mode="aspectFill" class="img"></image>
+				<view class="info">
+					<view class="name clamp">
+						幸福西饼万达店
+					</view>
+					<view class="loc clamp">
+						河东区万达广场1F东门入口
+					</view>
+				</view>
+			</view>
+			<view class="b">
+				距离您 <text class="m">864m</text>
+			</view>
+		</view>
+		<safe-area bgColor="#f8f8f8" />
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			};
+		}
+	}
+</script>
+
+<style lang="scss">
+page{
+	background-color: #f8f8f8;
+}
+.page{
+	padding: 30rpx;
+}
+.item-wrap{
+	width: 690rpx;
+	// height: 186rpx;
+	background: #FFFFFF;
+	box-shadow: 0rpx 6rpx 10rpx 0rpx rgba(42,42,42,0.08);
+	border-radius: 20rpx;
+	position: relative;
+	margin-bottom: 24rpx;
+	padding-bottom: 30rpx;
+	.ic-wrap{
+		width: 70rpx;
+		height: 70rpx;
+		position: absolute;
+		z-index: 2;
+		top: 0;
+		right: 0;
+		.ic{
+			width: 30rpx;
+			height: 30rpx;
+		}
+	}
+	.t{
+		height: 133rpx;
+		padding: 0 24rpx;
+		.img{
+			width: 68rpx;
+			height: 68rpx;
+			border-radius: 68rpx;
+			margin-right: 16rpx;
+			flex-shrink: 0;
+		}
+		.name{
+			width: 500rpx;
+			font-size: 30rpx;
+			font-family: PingFang SC;
+			font-weight: bold;
+			color: #333333;
+		}
+		.loc{
+			width: 500px;
+			font-size: 24rpx;
+			font-family: PingFang SC;
+			font-weight: 500;
+			color: #999999;
+			margin-top: 20rpx;
+		}
+	}
+	.b{
+		font-size: 24rpx;
+		font-family: PingFang SC;
+		font-weight: 500;
+		color: #999999;
+		max-width: 500rpx;
+		padding: 0 27rpx;
+		.m{
+			color:#92B99C;
+		}
+	}
+	
+}
+</style>

pages/mine/myEvaluate.vue

@@ -0,0 +1,50 @@
+<template>
+	<view class="page">
+		<view class="p-eav" v-for="(item,idx) in 2" :key='idx'  >
+			<eavItem  />
+			<view class="ic-wrap align-center justify-center">
+			   <image src="/static/meva-del.png" mode="widthFix" class="ic"></image>	
+			</view>
+		</view>
+		<safe-area bgColor="#fff" />
+	</view>
+</template>
+
+<script>
+	import eavItem from './components/eva-item.vue'
+	export default {
+		components:{
+			eavItem
+		},
+		data() {
+			return {
+				
+			};
+		}
+	}
+</script>
+
+<style lang="scss">
+.p-eav{
+	border-bottom: 2rpx solid #eee;
+	position: relative;
+	&:last-child{
+		border: none;
+	}
+	.ic-wrap{
+			position: absolute;
+			right: 0;
+			bottom: 14rpx;
+			width: 80rpx;
+			height: 80rpx;
+			z-index: 2;
+			
+		.ic{
+			width: 32rpx;
+			height: 32rpx;
+		
+		}	
+	}
+	
+}
+</style>

pages/mine/myKefu.vue

@@ -0,0 +1,154 @@
+<template>
+	<view class="page">
+		<view class="p-header flex-col">
+			  <view class="flex-row justify-between group_4">
+			    <text class="text_2">客服热线</text>
+			    <view class="flex-col items-end">
+			      <text class="text_3">400-0538-888</text>
+			      <text class="text_4">周一至周日8:30-17:30</text>
+			    </view>
+			  </view>
+			  <view class="flex-row justify-between group_6">
+			    <text class="text_5">联系邮箱</text>
+			    <text class="text_6">manggo@email.com</text>
+			  </view>
+		</view>
+		<view class="p-content">
+			<view class="c-item">
+				<view class="top align-center justify-between">
+			    <text class="txt">常见问题</text>
+			    </view>
+			</view>
+			<view class="c-item">
+				<view class="top align-center justify-between">
+				  <text class="txt">账户余额充值问题</text>
+				  <image
+					src="/static/kefu-rarrow.png"
+					class="ic"
+				  />
+			    </view>
+			</view>
+			<view class=" c-item">
+			  <view class="top align-center justify-between">
+				  <text class="txt">账户余额充值问题</text>
+				  <image
+					src="/static/kefu-upic.png"
+					class="upic"
+				  />
+			  </view>
+			  <view class="bom">
+				  盲盒商品由商家自主上架，具体商品内容须收货后，客户自行打开发现，盲盒内商品价值高于售价，如有疑问，请根据具体内容请联系商家。
+			  </view>
+			</view>
+			
+		</view>
+		<safe-area bgColor="#fff" />
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			};
+		}
+	}
+</script>
+
+<style lang="scss">
+page{
+	background-color: #fff;
+}
+.page{
+	padding: 24rpx 30rpx;
+}
+.p-header{
+	  padding-bottom: 50rpx;
+	  background-color: #ffffff;
+	  box-shadow: 0px 0px 27rpx #2a2a2a1a;
+	  border-radius: 10rpx;
+	.list-item:last-of-type {
+	  margin-top: 24rpx;
+	}
+	.group_4 {
+	  padding: 35rpx 23rpx 35rpx 31rpx;
+	  border-bottom: solid 2rpx #0000000f;
+	}
+	.text_2 {
+	  align-self: center;
+	  color: #333333;
+	  font-size: 30rpx;
+	  font-family: PingFang;
+	  letter-spacing: 1.2rpx;
+	}
+	.text_3 {
+	  margin-right: 9rpx;
+	  color: #92b99c;
+	  font-size: 30rpx;
+	  font-family: PingFang;
+	  letter-spacing: 1.2rpx;
+	}
+	.text_4 {
+	  margin-top: 13rpx;
+	  color: #999999;
+	  font-size: 24rpx;
+	  font-family: PingFang;
+	}
+	.group_6 {
+	  padding: 51rpx 15rpx 0 31rpx;
+	}
+	.text_5 {
+	  color: #333333;
+	  font-size: 30rpx;
+	  font-family: PingFang;
+	  letter-spacing: 1.2rpx;
+	}
+	.text_6 {
+	  margin-top: 4rpx;
+	  color: #999999;
+	  font-size: 24rpx;
+	  font-family: PingFang;
+	}
+}
+.p-content{
+	margin-top: 24rpx;
+	width: 690rpx;
+	background: #FFFFFF;
+	box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(42,42,42,0.1);
+	border-radius: 10rpx;
+	.c-item{
+	
+		border-bottom: solid 2rpx #0000000f;
+		padding: 0 30rpx;
+		.top{
+			height: 108rpx;
+		}
+		.txt {
+		  color: #000;
+		  font-size: 30rpx;
+		  font-family: PingFang;
+		  letter-spacing: 1.2rpx;
+		}
+		.ic{
+		  margin: 5rpx 0 6rpx;
+		  width: 11rpx;
+		  height: 18rpx;
+		}
+		.upic{
+			  margin: 8rpx 0 10rpx;
+			width: 18rpx;
+			height: 11rpx;
+		}
+		.bom{
+			margin-top: -10rpx;
+			font-size: 26rpx;
+			font-family: PingFang SC;
+			font-weight: 500;
+			color: #333333;
+			line-height: 37rpx;
+			padding-bottom: 30rpx;
+		}
+	}
+}
+</style>