订单列表

pages.json

@@ -93,6 +93,30 @@
             }
             
         }
+        ,{
+            "path" : "pages/mang/shops",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "商家详情",
+                "enablePullDownRefresh": false,
+				"backgroundColor": "#92B99C",
+				"navigationBarBackgroundColor": "#92B99C",
+				"navigationBarTextStyle": "white"
+            }
+            
+        }
+        ,{
+            "path" : "pages/order/order",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "订单",
+                "enablePullDownRefresh": false,
+				"backgroundColor": "#92B99C",
+				"navigationBarBackgroundColor": "#92B99C",
+				"navigationBarTextStyle": "white"
+            }
+            
+        }
     ],
 	"tabBar": {
 		"color": "#999999",
@@ -111,12 +135,12 @@
 			  "selectedIconPath": "static/tab/mang-full.png",
 			  "text": "盲盒"
 			},
-			// {
-			//   "pagePath": "pages/order/order",
-			//   "iconPath": "static/tab/order.png",
-			//   "selectedIconPath": "static/tab/order-full.png",
-			//   "text": "订单"
-			// },
+			{
+			  "pagePath": "pages/order/order",
+			  "iconPath": "static/tab/order.png",
+			  "selectedIconPath": "static/tab/order-full.png",
+			  "text": "订单"
+			},
 			{
 			  "pagePath": "pages/mine/mine",
 			  "iconPath": "static/tab/mine.png",

pages/address/address.vue

@@ -30,6 +30,7 @@
 		</singleList>
 		-->
 		<button class="add-btn" @click="addAddress('add')">新增地址</button>
+		<safe-area bgColor="#f8f8f8"/>
 	</view>
 </template>
 
@@ -57,6 +58,60 @@
 						mobile:'15263970923',
 						checked:false,
 					},
+					{
+						id:1,
+						is_default:true,
+						addr:'山东省临沂市河东区',
+						desc:'山东省临沂市河东区山东省临沂市河东区山东省临沂市河东区山东省临沂市河东区山东省临沂市河东区',
+						name:'mork',
+						mobile:'15263970923',
+						checked:true,
+					},
+					{
+						id:1,
+						is_default:false,
+						addr:'山东省临沂市河东区',
+						desc:'山东省临沂市河东区山东省临沂市河东区山东省临沂市河东区山东省临沂市河东区山东省临沂市河东区',
+						name:'mork',
+						mobile:'15263970923',
+						checked:false,
+					},
+					{
+						id:1,
+						is_default:true,
+						addr:'山东省临沂市河东区',
+						desc:'山东省临沂市河东区山东省临沂市河东区山东省临沂市河东区山东省临沂市河东区山东省临沂市河东区',
+						name:'mork',
+						mobile:'15263970923',
+						checked:true,
+					},
+					{
+						id:1,
+						is_default:false,
+						addr:'山东省临沂市河东区',
+						desc:'山东省临沂市河东区山东省临沂市河东区山东省临沂市河东区山东省临沂市河东区山东省临沂市河东区',
+						name:'mork',
+						mobile:'15263970923',
+						checked:false,
+					},
+					{
+						id:1,
+						is_default:true,
+						addr:'山东省临沂市河东区',
+						desc:'山东省临沂市河东区山东省临沂市河东区山东省临沂市河东区山东省临沂市河东区山东省临沂市河东区',
+						name:'mork',
+						mobile:'15263970923',
+						checked:true,
+					},
+					{
+						id:1,
+						is_default:false,
+						addr:'山东省临沂市河东区',
+						desc:'山东省临沂市河东区山东省临沂市河东区山东省临沂市河东区山东省临沂市河东区山东省临沂市河东区',
+						name:'mork',
+						mobile:'15263970923',
+						checked:false,
+					},
 				],
 				reqData:{}, //请求数据
 				sRes:'', //搜索结果 empty,noMore
@@ -135,9 +190,9 @@
 		background: #f8f8f8;
 	}
 	.page{
-		padding: 30rpx 20rpx 0;
-		min-height: 100vh;
-		padding-bottom: calc(var(--safe-area-inset-bottom) / 2);
+		padding: 30rpx 20rpx;
+		/* min-height: 100vh;
+		padding-bottom: calc(var(--safe-area-inset-bottom) / 2); */
 		position: relative;
 	}
     .list {

pages/mang/components/eva-item.vue

@@ -0,0 +1,126 @@
+<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>
+	</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;
+		}	
+	}
+	
+}
+</style>

pages/mang/confirm.vue

@@ -61,7 +61,7 @@
 			  </view>
 			  <view class="flex-row justify-between group_13">
 				<text class="text_12">优惠券</text>
-				<view class="flex-row group_16">
+				<view class="flex-row group_16" @tap="showCoupons">
 				  <text class="text_14">请选择</text>
 				  <image
 					src="/static/confirm-rarrow.png"
@@ -91,6 +91,27 @@
 			</template>
 		</safeArea>
 		<datetime @rundata="getTime" ref="timeRef" :end='enddate' :start='startdate' default='start'></datetime>
+		<popup ref="couponRef" type="bottom">
+			<view class="coupon-panel">
+				<view class="cancel-wrap align-center justify-center">
+					<text class="zicon zicon-quxiao ic" @tap="hideCoupons"></text>
+				</view>
+				<view class="title-wrap">
+					选择优惠券
+				</view>
+				<view class="content-wrap">
+					<scroll-view scroll-y="true" class="scroll">
+						<view class="item flex-col justify-center" v-for="(item,idx) in 10" :key="idx">
+							<view class="name clamp">店铺优惠1</view>
+							<view class="tips">
+								<text class="stxt">消费金额</text>
+								<text class="mtxt">满30减5</text>
+							</view>	
+						</view>	
+					</scroll-view>
+				</view>
+			</view>
+		</popup>
 	</view>
 </template>
 
@@ -104,7 +125,7 @@ export default {
 	},
 	data() {
 		return {
-			stock: 1000,
+			stock: 10000,
 			number: 1,
 			show_time:'', //自提时间
 			couponList: [], //优惠券列表
@@ -169,6 +190,13 @@ export default {
 	    openTime(){
 	    	this.$refs.timeRef.open();
 	    },
+		showCoupons(){
+			this.$refs.couponRef.show();
+		},
+		hideCoupons(){
+			this.$refs.couponRef.hide();
+		},
+		
 	}
 };
 </script>
@@ -433,4 +461,65 @@ page {
 	  font-family: PingFang;
 	}
 }
+.coupon-panel{
+	width: 750rpx;
+	// height: 441rpx;
+	background: #FFFFFF;
+	border-radius: 20rpx 20rpx 0rpx 0rpx;
+	position: relative;
+	.cancel-wrap{
+		width: 68rpx;
+		height: 68rpx;
+		position: absolute;
+		right: 0;
+		top: 0;
+		z-index: 2;
+		.ic{
+			font-size: 24rpx;
+			color: #999;
+		}
+	}
+	.title-wrap{
+		height: 92rpx;
+		line-height: 92rpx;
+		text-align: center;
+		font-size: 34rpx;
+		font-family: PingFang SC;
+		font-weight: bold;
+		color: #333333;
+	}
+	.content-wrap{
+		padding: 30rpx;
+		// padding-bottom:  30rpx + calc( var(--safe-area-inset-bottom) / 2);
+		.scroll{
+			min-height: 350rpx;
+			max-height: 600rpx;
+		}
+		.item{
+			width: 690rpx;
+			height: 133rpx;
+			background: #F5F5F5;
+			border-radius: 10rpx;
+			margin-bottom: 20rpx;
+			padding: 0 30rpx;
+		}
+		.name{
+			font-size: 32rpx;
+			font-family: PingFang SC;
+			font-weight: bold;
+			color: #333333;
+		}
+		.tips{
+			margin-top: 24rpx;
+			font-size: 26rpx;
+			font-family: PingFang SC;
+			font-weight: 500;
+			color: #666666;
+			.mtxt{
+				color:$base-color;
+			}
+		}
+	}
+	
+}
 </style>

pages/mang/detail.vue

@@ -92,45 +92,8 @@
 						mode="aspectFill"
 			 	    />
 				</view>
-			</view>
-			<view class="item-wrap flex-col" v-for="(item, idx) in 3" :key="idx">
-				<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 3"
-						  :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>
-			</view>
+			</view>		
+			<evaItem v-for="(item,idx) in 3" :key="idx" />
 		</view>
 		<view class="line-wrap"></view>
 		<view class="rich-wrap">
@@ -147,12 +110,16 @@
 			  <view class="flex-col items-center text-wrapper_1"><text class="text_30">下单</text></view>
 			</view>
 		</view>
-		
+		<safe-area />
 	</view>
 </template>
 
 <script>
+import evaItem from './components/eva-item.vue';
 export default {
+	components: {
+		evaItem,
+	},
 	data() {
 		return {
 			richTxt:'<p>你知道吗，盲go good</p>', //	this.richTxt = this.$tools.replaceDetail(this.info.content || '');
@@ -396,69 +363,7 @@ export default {
 		flex-shrink: 0;
 	}
 }
-.item-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;
-		}	
-	}
-	
-}
+
 .rich-wrap{
 	background-color: #fff;
 	.rich {
@@ -466,10 +371,16 @@ export default {
 	}
 }
 .btn-wrap{
-	   margin-top: 67rpx;
+	   // margin-top: 67rpx;
 	   padding: 0 20rpx;
 	   position: fixed;
-	   bottom: 10rpx;
+	   /* #ifdef H5 */
+	   bottom: calc(var(--window-bottom) / 2);
+	   /* #endif */
+	   /* #ifdef MP */
+	   bottom: calc(var(--safe-area-inset-bottom) / 2);
+	   /* #endif */
+	   
 	   z-index: 10;
 	   left: 20rpx;
 	   right: 20rpx;

pages/mang/shops.vue

@@ -0,0 +1,492 @@
+<template>
+	<view class="page">
+		<view class="header-sec"></view>
+		<view class="name-sec flex-col">
+			<image src="/static/temp/pro.png" class="img" mode="aspectFill" />
+			<view class="flex-row group_5">
+				<view class="flex-row group_6">
+					<text class="name clamp">幸福西饼万达店</text>
+					<image src="/static/love.png" class="ic" mode="aspectFill" />
+				</view>
+				<text class="loc-txt">距您518m</text>
+			</view>
+			<view class="stars align-center"><image src="/static/mang_star.png" class="starImg" v-for="(item, idx) in 3" :key="idx" /></view>
+			<text class="group_5 text_4 clamp2">
+				主营业务介绍内容主营业务介绍内容主营业务介绍内容主营业务介绍内容主营业务介绍内容主营业务介绍内容主营业务介绍内容主营业务介绍内容
+			</text>
+			<view class="flex-row group_5 loc-wrap">
+				<view class="flex-row group_7">
+					<image src="/static/mangd-loc.png" class="image_7" mode="aspectFill" />
+					<view class="group_8"><text class="text_5 clamp2">北京市朝阳街区朝阳社区朝阳小区朝阳路万达广场商场内负一楼B1008铺位</text></view>
+				</view>
+				<image src="/static/shop-dire.png" class="image_8" />
+			</view>
+		</view>
+		<view class="pro-sec flex-col">
+			<text class="title">盲盒</text>
+			<view class="flex-col">
+				<view class="flex-row items-start list-item" :key="i" v-for="(item, i) in 6">
+					<image src="/static/temp/pro.png" class="image" mode="aspectFill" />
+					<view class="flex-col group_10">
+						<view class="flex-col items-start group_11 view_7">
+							<text class="name clamp">幸福西饼Rice盲盒</text>
+							<view class="stars align-center"><image src="/static/mang_star.png" class="starImg" v-for="(item, idx) in 3" :key="idx" /></view>
+							<text class="text_10">随机搭配</text>
+						</view>
+						<view class="flex-row group_12">
+							<view class="group_13">
+								<text class="text_11">￥</text>
+								<text class="text_12">18.8</text>
+							</view>
+							<text class="text_13">￥24~33</text>
+						</view>
+					</view>
+					<view class="flex-col items-center btn-wrap"><text class="txt">立即下单</text></view>
+				</view>
+			</view>
+		</view>
+		<view class="tab-sec flex-col">
+			<view class="flex-row tab-wrap">
+				<text class="tab active">用户评价</text>
+				<text class="tab">商家故事</text>
+			</view>
+		</view>
+		<view class="eva-sec" v-if="false">
+			<view class="e-top justify-between">
+				<view class="flex-row">
+					<view class="flex-row group_21">
+						<text class="text_23">4.5分</text>
+						<view class="flex-col items-start group_22">
+							<text class="text_24">总评分</text>
+							<view class="stars align-center"><image src="/static/mang_star.png" class="starImg" v-for="(item, idx) in 5" :key="idx" /></view>
+						</view>
+						<view class="section_8"></view>
+					</view>
+					<view class="flex-col items-center group_23">
+						<text class="text_25">评价</text>
+						<text class="text_26">70条</text>
+					</view>
+					<view class="section_8"></view>
+					<view class="flex-col group_24">
+						<text class="text_27">好评率</text>
+						<text class="text_28">85%</text>
+					</view>
+				</view>
+			</view>
+			<view class="division-wrap"></view>
+			<evaItem v-for="(item,idx) in 6" :key="idx" />
+		</view>
+		<view class="story-sec" v-else>
+			<view class="s-top">
+				<view class="line-wrap flex-row">
+					<text class="key">
+						商家名称：
+					</text>
+					<text class="val">幸福西饼</text>
+				</view>
+				<view class="line-wrap flex-row">
+					<text class="key">
+						商家地址：
+					</text>
+					<text class="val">万达广场商场内负一楼</text>
+				</view>	
+			</view>
+			<view class="division-wrap"></view>
+			<!-- 
+			<view class="rich-wrap">
+				<rich-text :nodes="richTxt" class="rich"></rich-text>
+			</view>
+			 -->
+			<view class="promise-wrap">
+				<view class="name">商家承诺:</view>
+				<view class="content">
+					本店所售盲盒保证品质完好，请放心购买！感谢您为粮食节约助力！一起实现零浪费、环保绿色的低碳生活。
+				</view>
+			</view>
+		</view>
+	    <safe-area />
+	</view>
+</template>
+
+<script>
+import evaItem from './components/eva-item.vue';
+export default {
+	components: {
+		evaItem,
+	},
+	data() {
+		return {
+			richTxt:'<p>你知道吗，盲go good</p>', //	this.richTxt = this.$tools.replaceDetail(this.info.content || '');
+		};
+	}
+};
+</script>
+
+<style lang="scss">
+page{
+	background-color: #fff;
+}
+.header-sec {
+	background-color: $base-color;
+	height: 240rpx;
+}
+.name-sec {
+	padding: 30rpx 14rpx 31.5rpx 30rpx;
+	background-color: #ffffff;
+	box-shadow: 0px 4rpx 18.4rpx 1.6rpx #2a2a2a1a;
+	border-radius: 20rpx;
+	position: relative;
+	width: 690rpx;
+	margin: -196rpx auto 0;
+	.img {
+		width: 154rpx;
+		height: 154rpx;
+		position: absolute;
+		left: 24rpx;
+		top: 24rpx;
+	}
+	.group_5 {
+		position: relative;
+	}
+	.loc-txt {
+		position: absolute;
+		top: 0;
+		right: 0;
+		z-index: 2;
+		color: #999999;
+		font-size: 24rpx;
+		font-family: PingFang;
+	}
+	.group_6 {
+		margin-right: 93rpx;
+		margin-left: 172rpx;
+		.name {
+			color: #333333;
+			font-size: 30rpx;
+			font-family: PingFang;
+			max-width: 300rpx;
+			font-weight: bold;
+		}
+		.ic {
+			margin-left: 18rpx;
+			flex-shrink: 0;
+			width: 31rpx;
+			height: 27rpx;
+		}
+	}
+	.stars {
+		margin-top: 13rpx;
+		margin-left: 172rpx;
+		.starImg {
+			width: 28rpx;
+			height: 28rpx;
+			margin-right: 4rpx;
+		}
+	}
+	.text_4 {
+		margin-left: 172rpx;
+		margin-top: 12rpx;
+		align-self: flex-start;
+		color: #666666;
+		font-size: 24rpx;
+		font-family: PingFang;
+		line-height: 32rpx;
+	}
+	.loc-wrap {
+		margin-top: 18rpx;
+	}
+	.group_7 {
+		flex: 1 1 auto;
+	}
+	.image_7 {
+		margin-top: 10.5rpx;
+		flex-shrink: 0;
+		width: 18rpx;
+		height: 22rpx;
+	}
+	.group_8 {
+		margin-left: 16rpx;
+		flex: 1 1 auto;
+		line-height: 37rpx;
+		height: 74rpx;
+	}
+	.text_5 {
+		color: #666666;
+		font-size: 24rpx;
+		font-family: PingFang;
+		line-height: 37rpx;
+	}
+	.image_8 {
+		margin-left: 40rpx;
+		margin-right: 28rpx;
+		align-self: center;
+		width: 30rpx;
+		height: 30rpx;
+		flex-shrink: 0;
+	}
+}
+.pro-sec {
+	padding: 29rpx 20rpx 0;
+	background-color: #ffffff;
+	box-shadow: 0px 4rpx 18.4rpx 1.6rpx #2a2a2a1a;
+	border-radius: 20rpx;
+	width: 690rpx;
+	margin: 24rpx auto 0;
+	.title {
+		margin-left: 6rpx;
+		align-self: flex-start;
+		color: #333333;
+		font-size: 34rpx;
+		font-family: PingFang;
+		font-weight: bold;
+	}
+	.list-item {
+		padding: 29rpx 4rpx 25rpx;
+		border-bottom: solid 1rpx #0000000f;
+		position: relative;
+		&:last-child {
+			border: none;
+		}
+	}
+	.image {
+		flex-shrink: 0;
+		width: 200rpx;
+		height: 200rpx;
+	}
+	.group_10 {
+		margin-left: 20rpx;
+		flex: 1 1 auto;
+	}
+	.group_11 {
+		flex: 1 1 auto;
+	}
+	.view_7 {
+		flex: initial;
+	}
+	.name {
+		color: #333333;
+		font-size: 30rpx;
+		font-family: PingFang;
+		max-width: 400rpx;
+		font-weight: bold;
+	}
+	.stars {
+		margin-top: 11rpx;
+		.starImg {
+			width: 28rpx;
+			height: 28rpx;
+			margin-right: 4rpx;
+		}
+	}
+	.text_10 {
+		margin-top: 21rpx;
+		color: #999999;
+		font-size: 24rpx;
+		font-family: PingFang;
+		line-height: 23rpx;
+	}
+	.group_12 {
+		margin-top: 57rpx;
+	}
+	.group_13 {
+		line-height: 28rpx;
+		height: 29rpx;
+	}
+	.text_11 {
+		color: #ff3e3e;
+		font-size: 24rpx;
+		font-family: PingFang;
+		line-height: 19rpx;
+	}
+	.text_12 {
+		color: #ff3e3e;
+		font-size: 36rpx;
+		font-family: PingFang;
+		line-height: 28rpx;
+	}
+	.text_13 {
+		margin-left: 10rpx;
+		margin-top: 9rpx;
+		color: #999999;
+		font-size: 24rpx;
+		font-family: PingFang;
+		line-height: 20rpx;
+		text-decoration: line-through;
+	}
+	.btn-wrap {
+		padding: 18rpx 0 17rpx;
+		flex-shrink: 0;
+		background-color: #92b99c;
+		border-radius: 32rpx;
+		width: 168rpx;
+		height: 64rpx;
+		position: absolute;
+		bottom: 26rpx;
+		right: 10rpx;
+		z-index: 2;
+		.txt {
+			color: #ffffff;
+			font-size: 30rpx;
+			font-family: PingFang;
+			line-height: 29rpx;
+		}
+	}
+}
+.tab-sec {
+	margin-top: 43rpx;
+	padding: 0 54rpx;
+	.tab-wrap {
+		padding-bottom: 20rpx;
+		border-bottom: 2rpx solid #eee;
+	}
+	.tab {
+		margin-right: 65rpx;
+		color: #999999;
+		font-size: 34rpx;
+		font-family: PingFang;
+		position: relative;
+		&.active {
+			color: #333333;
+			font-weight: bold;
+			&::after {
+				content: '';
+				background-color: #92b99c;
+				width: 41rpx;
+				height: 4rpx;
+				position: absolute;
+				left: 50%;
+				transform: translateX(-50%);
+				bottom: -18rpx;
+			}
+		}
+	}
+}
+.division-wrap {
+		width: 750rpx;
+		height: 17rpx;
+		background: #000000;
+		opacity: 0.06;
+	}
+.eva-sec {
+	.e-top {
+		padding: 17rpx 3rpx 19rpx;
+		.group_21 {
+			margin: 5rpx 0 8rpx;
+			padding: 0 30rpx;
+		}
+		.text_23 {
+			align-self: center;
+			color: #ff3e3e;
+			font-size: 36rpx;
+			font-family: PingFang;
+			margin-right: 10rpx;
+		}
+		.group_22 {
+			flex-shrink: 0;
+		}
+		.text_24 {
+			color: #999999;
+			font-size: 24rpx;
+			font-family: PingFang;
+		}
+		.stars {
+			margin-top: 6rpx;
+			.starImg {
+				width: 28rpx;
+				height: 28rpx;
+				margin-right: 4rpx;
+			}
+		}
+
+		.section_8 {
+			background-color: #0000000f;
+			width: 1rpx;
+			height: 70rpx;
+		}
+		.group_23 {
+			margin: 4rpx 0 8rpx;
+		}
+		.text_25 {
+			color: #999999;
+			font-size: 24rpx;
+			font-family: PingFang;
+		}
+		.text_26 {
+		 margin-top: 13rpx;
+			color: #333333;
+			font-size: 24rpx;
+			font-family: PingFang;
+		}
+		.group_24 {
+			margin: 4rpx 30rpx 10rpx 0;
+			width: 98rpx;
+		}
+		.text_27 {
+			align-self: flex-start;
+			color: #999999;
+			font-size: 24rpx;
+			font-family: PingFang;
+		}
+		.text_28 {
+			margin-top: 15rpx;
+			align-self: center;
+			color: #333333;
+			font-size: 24rpx;
+			font-family: PingFang;
+		}
+	}
+}
+.story-sec{
+	padding-top: 30rpx;
+	.s-top{
+		padding-bottom: 30rpx;
+	}
+	.line-wrap{
+		padding: 0 30rpx;
+		margin-bottom: 20rpx;
+		&:last-child{
+			margin-bottom: 0;
+		}
+		.key{
+			margin-right: 38rpx;
+			font-size: 30rpx;
+			font-family: PingFang SC;
+			font-weight: 500;
+			color: #999999;
+			line-height: 36rpx;
+		}
+		.val{
+			font-size: 30rpx;
+			font-family: PingFang SC;
+			font-weight: 500;
+			color: #333333;
+			line-height: 36rpx;
+			max-width: 500rpx;
+		}
+	}
+    .rich-wrap{
+    	background-color: #fff;
+    	.rich {
+    		line-height: normal;
+    	}
+    }
+	.promise-wrap{
+		padding: 40rpx 30rpx 30rpx;
+		.name{
+			font-size: 30rpx;
+			font-family: PingFang SC;
+			font-weight: bold;
+			color: #333333;
+		}
+		.content{
+			width: 696rpx;
+			font-size: 24rpx;
+			font-family: PingFang SC;
+			font-weight: 500;
+			color: #666666;
+			line-height: 42rpx;
+			margin: 30rpx auto 0;
+		}
+	}
+}
+</style>

pages/order/order.vue

@@ -0,0 +1,213 @@
+<template>
+	<view class="page">
+		<view class="tab-sec align-center justify-around">
+			<view class="tab-wrap" :class="{active:tabCurrentIndex === idx}" v-for="(item,idx) in tabs" :key="idx">
+				{{item.name}}
+			</view>
+		</view>
+		<view class="content-sec">
+			<view class="item-wrap flex-col" v-for="(item,idx) in 3">
+				  <view class="flex-row justify-between group_3">
+				    <text class="text_5">订单号：M1569878</text>
+				    <text class="text_7">进行中</text>
+				  </view>
+				  <view class="flex-row group_4">
+				    <image
+				      src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/62a039a05a7e3f0310646cb4/62a0461551588f0011f85200/16615024873807471335.png"
+				      class="image"
+				    />
+				    <view class="flex-col group_5">
+				      <text class="text_9">幸福西饼Rice盲盒</text>
+				      <view class="group_6">
+				        <text class="text_11">随机获得四拼蛋糕，奶油慕斯蛋</text>
+				        <text class="text_13">糕二选一</text>
+				      </view>
+				      <text class="text_15">精致蛋挞、南瓜蛋糕二选一</text>
+				    </view>
+				    <view class="flex-col items-end group_7">
+				      <text class="text_17">￥80.40</text>
+				      <text class="text_19">×1</text>
+				    </view>
+				  </view>
+				  <view class="flex-row justify-end group_8">
+				    <view class="flex-col items-center text-wrapper_1"><text class="text_21">申请退款</text></view>
+				    <view class="flex-col items-center text-wrapper_2"><text class="text_23">确认取货</text></view>
+				  </view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				tabs:[
+					{name:'全部',type:-1,loadingType: 'more', list: [], page: 1,loaded:false,},
+					{name:'进行中',type:-1,loadingType: 'more', list: [], page: 1,loaded:false,},
+					{name:'已完成',type:-1,loadingType: 'more', list: [], page: 1,loaded:false,},
+					{name:'已取消',type:-1,loadingType: 'more', list: [], page: 1,loaded:false,},
+				],
+				reqData:{type:''},
+				pageSize: 20,
+				tabCurrentIndex: 0,
+			};
+		}
+	}
+</script>
+
+<style lang="scss">
+page{
+	background-color: #f8f8f8;
+}
+.tab-sec{
+	position: relative;
+	height: 89rpx;
+}
+.tab-wrap{
+	height: 89rpx;
+	line-height: 89rpx;
+	font-size: 26rpx;
+	font-family: PingFang SC;
+	font-weight: 500;
+	color: #333333;
+	&.active{
+		color:$base-color;
+		&::after{
+			content: '';
+			left: 50%;
+			transform: translateX(-50%);
+			bottom: 24rpx;
+			width: 27rpx;
+			height: 3rpx;
+			background: #92B99C;
+		}
+	}
+}
+.content-sec{
+	.item-wrap{
+		width: 690rpx;
+		margin:0 auto 24rpx;
+	  padding-bottom: 24rpx;
+	  background-color: #ffffff;
+	  box-shadow: 0px 6rpx 10rpx #2a2a2a14;
+	  border-radius: 20rpx;
+	}
+	.item-wrap:not(:first-of-type) {
+	  margin-top: 24rpx;
+	}
+	.group_3 {
+	  padding: 24rpx 20rpx 24rpx 25rpx;
+	  border-bottom: solid 1rpx #0000000f;
+	}
+	.text_5 {
+	  margin-top: 9rpx;
+	  color: #333333;
+	  font-size: 30rpx;
+	  font-family: PingFang;
+	  line-height: 28rpx;
+	}
+	.text_7 {
+	  margin-bottom: 10rpx;
+	  color: #92b99c;
+	  font-size: 28rpx;
+	  font-family: PingFang;
+	  line-height: 27rpx;
+	}
+	.group_4 {
+	  margin-top: 23rpx;
+	  padding-left: 24rpx;
+	  padding-right: 17rpx;
+	}
+	.image {
+	  flex-shrink: 0;
+	  width: 154rpx;
+	  height: 154rpx;
+	}
+	.group_5 {
+	  margin-left: 23rpx;
+	  margin-bottom: 5rpx;
+	  flex: 1 1 auto;
+	}
+	.text_9 {
+	  align-self: flex-start;
+	  color: #333333;
+	  font-size: 30rpx;
+	  font-family: PingFang;
+	  line-height: 29rpx;
+	}
+	.group_6 {
+	  margin-top: 15.5rpx;
+	  line-height: 37rpx;
+	}
+	.text_11 {
+	  color: #999999;
+	  font-size: 24rpx;
+	  font-family: PingFang;
+	  line-height: 37rpx;
+	}
+	.text_13 {
+	  color: #999999;
+	  font-size: 24rpx;
+	  font-family: PingFang;
+	  line-height: 37rpx;
+	}
+	.text_15 {
+	  margin-top: 8.5rpx;
+	  align-self: flex-start;
+	  color: #999999;
+	  font-size: 24rpx;
+	  font-family: PingFang;
+	  line-height: 23rpx;
+	}
+	.group_7 {
+	  margin-left: 3rpx;
+	  flex-shrink: 0;
+	}
+	.text_17 {
+	  color: #ff3e3e;
+	  font-size: 30rpx;
+	  font-family: PingFang;
+	  line-height: 23rpx;
+	}
+	.text_19 {
+	  margin-right: 14rpx;
+	  margin-top: 16rpx;
+	  color: #999999;
+	  font-size: 24rpx;
+	  font-family: PingFang;
+	  line-height: 18rpx;
+	}
+	.group_8 {
+	  margin-top: 32rpx;
+	  padding: 0 20rpx;
+	}
+	.text-wrapper_1 {
+	  margin-right: 23rpx;
+	  padding: 16rpx 0 19rpx;
+	  border-radius: 10rpx;
+	  width: 154rpx;
+	  height: 64rpx;
+	  border: solid 1rpx #92b99c;
+	}
+	.text_21 {
+	  color: #92b99c;
+	  font-size: 28rpx;
+	  font-family: PingFang;
+	  line-height: 27rpx;
+	}
+	.text-wrapper_2 {
+	  padding: 16rpx 0 19rpx;
+	  border-radius: 10rpx;
+	  width: 154rpx;
+	  height: 64rpx;
+	  border: solid 1rpx #92b99c;
+	}
+	.text_23 {
+	  color: #92b99c;
+	  font-size: 28rpx;
+	  font-family: PingFang;
+	  line-height: 27rpx;
+	}
+}
+</style>