完成订单部分，余退款

pages.json

@@ -117,6 +117,33 @@
             }
             
         }
+        ,{
+            "path" : "pages/order/detail",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "订单详情",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+        ,{
+            "path" : "pages/order/evaluate",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "评价页面",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+        ,{
+            "path" : "pages/order/refund",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "申请退款",
+                "enablePullDownRefresh": false
+            }
+            
+        }
     ],
 	"tabBar": {
 		"color": "#999999",

pages/order/components/pro.vue

@@ -0,0 +1,88 @@
+<template>
+       <view class="flex-row pro-item">
+       	<image src="/static/temp/pro.png" class="image" mode="aspectFill" />
+       	<view class="flex-col group_5">
+       		<text class="text_9 clamp">幸福西饼Rice盲盒</text>
+       		<view class="group_6"><text class="text_11">随机获得四拼蛋糕，奶油慕斯蛋糕二选一精致蛋挞、南瓜蛋糕二选一</text></view>
+       	</view>
+       	<view class="flex-col items-end group_7">
+       		<text class="text_17">￥80.40</text>
+       		<text class="text_19">×1</text>
+       	</view>
+       </view>
+</template>
+
+<script>
+	export default {
+		props: {
+			//请求数据
+			sendData:{
+				type:Object,
+				default:()=>({})
+			},
+			//请求地址
+			url:{
+				type:String,
+				default:''
+			}
+		},
+		data() {
+			return {
+			}
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+.pro-item{
+	margin-top: 23rpx;
+	padding-left: 24rpx;
+	padding-right: 17rpx;
+	.image {
+		flex-shrink: 0;
+		width: 154rpx;
+		height: 154rpx;
+		border-radius: 10rpx;
+	}
+	.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;
+		max-width: 360rpx;
+	}
+	.group_6 {
+		margin-top: 15.5rpx;
+		line-height: 37rpx;
+	}
+	.text_11 {
+		color: #999999;
+		font-size: 24rpx;
+		font-family: PingFang;
+		line-height: 37rpx;
+	}
+	.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;
+	}
+}
+</style>

pages/order/detail.vue

@@ -0,0 +1,320 @@
+<template>
+	<view class="page">
+		<view class="p-header flex-col items-center">
+			<image src="/static/odetail-status.png" class="image_4" />
+			<!-- 进行中 
+			<text class="text_2">待取货</text>
+			<view class="flex-col items-center text-wrapper"><text class="text_3">3154</text></view>
+			-->
+			<!-- 已完成 -->
+			<text class="text_2">已完成</text>
+			<text class="tips">
+				感谢您的支持，欢迎下次光临
+			</text>
+		</view>
+		<view class="p-division"></view>
+		<!-- 进行中 待取货 -->
+		<view class="p-time flex-col">
+			<text class="text_4">取货时间：今天15:00~22:00</text>
+			<view class="group_8"><text class="text_5">请您在有效时间内来取货，超时将订单失效，且无法退款哦，具体请联系商家</text></view>
+		</view>
+		<view class="p-division"></view>
+		<view class="p-shop flex-col">
+			<view class="flex-row justify-between items-start">
+				<view class="flex-row">
+					<image src="/static/temp/pro.png" class="image_12" mode="aspectFill" />
+					<view class="flex-col items-start group_15">
+						<text class="text_7 clamp">幸福西饼万达店</text>
+						<text class="text_8 clamp2">河东区万达广场1F东门入口</text>
+					</view>
+				</view>
+				<view class="flex-row group_16">
+					<view class="flex-col items-center image-wrapper"><image src="/static/mangd-loc.png" class="image_13" mode="aspectFill" /></view>
+					<view class="section_5"><!--*--></view>
+					<view class="flex-col items-center image-wrapper view_3"><image src="/static/mang-phone.png" class="image_14" mode="aspectFill" /></view>
+				</view>
+			</view>
+			<view class="group_17">
+				<text class="text_9">距离您</text>
+				<text class="text_10">864m</text>
+			</view>
+		</view>
+		<view class="p-pro ">
+			<pro />
+			<view class="p-border"></view>
+		</view>
+		<view class="p-price">
+			<view class="price-wrap align-center justify-between">
+				 <text class="text_16">商品总价</text>
+				  <text class="text_17">￥80.40</text>	
+			</view>
+		</view>
+		<view class="p-total align-center justify-end">
+			共1件商品，合计￥80.40
+		</view>
+		<view class="p-division"></view>
+		<view class="p-info flex-col">
+			  <text class="text_20">订单信息</text>
+			  <view class="flex-row group view_8">
+			    <text class="text_21">下单时间</text>
+			    <text class="text_22">07/25 14:35</text>
+			  </view>
+			  
+			  <view class="flex-row group view_8">
+			    <text class="text_21">取货码</text>
+			    <text class="text_22">3154</text>
+			  </view>
+			  <view class="flex-row group view_8">
+			    <text class="text_21">订单编号</text>
+			    <text class="text_22">0021215481102131202</text>
+			  </view>
+			  <view class="flex-row group view_8">
+			    <text class="text_21">备注信息</text>
+			    <text class="text_22">无</text>
+			  </view>
+		</view>
+		<!-- 进行中 -->
+		<safe-area height="128rpx">
+			<template v-slot:btn>
+				<view class="btn-wrap align-center justify-end">
+					<view class="btn">
+						申请退款
+					</view>
+					<view class="btn full">
+						确认收货
+					</view>
+				</view>
+			</template>
+		</safe-area>
+	</view>
+</template>
+
+<script>
+import pro from './components/pro.vue'
+export default {
+	components:{
+		pro
+	},
+	data() {
+		return {};
+	}
+};
+</script>
+
+<style lang="scss">
+.p-header {
+	padding: 94rpx 0 51rpx;
+	.image_4 {
+		width: 86rpx;
+		height: 95rpx;
+	}
+	.text_2 {
+		margin-top: 23rpx;
+		color: #333333;
+		font-size: 34rpx;
+		font-family: PingFang;
+	}
+	.text-wrapper {
+		margin-top: 23rpx;
+		padding: 23rpx 20rpx 22rpx;
+		background-color: #92b99c;
+		border-radius: 10rpx;
+		min-width: 180rpx;
+	}
+	.text_3 {
+		color: #ffffff;
+		font-size: 48rpx;
+		font-family: PingFang;
+	}
+	.tips{
+		margin-top: 23rpx;
+		font-size: 24rpx;
+		font-family: PingFang SC;
+		font-weight: 500;
+		color: #999999;
+		line-height: 37rpx;
+		text-align: center;
+		height: 82rpx;
+	}
+}
+.p-division {
+	background-color: #0000000a;
+	height: 16rpx;
+}
+.p-time {
+	padding: 29rpx 41rpx 21.5rpx 42rpx;
+	.text_4 {
+		align-self: flex-start;
+		color: #333333;
+		font-size: 30rpx;
+		font-family: PingFang;
+	}
+	.group_8 {
+		margin-top: 12.5rpx;
+		line-height: 37rpx;
+	}
+	.text_5 {
+		color: #999999;
+		font-size: 24rpx;
+		font-family: PingFang;
+		line-height: 37rpx;
+	}
+}
+.p-shop {
+	padding: 40rpx 30rpx 41rpx;
+	border-bottom: 2rpx solid #eee;
+	.image_12 {
+		margin-top: 5rpx;
+		width: 68rpx;
+		height: 68rpx;
+		border-radius: 68rpx;
+	}
+	.group_15 {
+		margin-left: 16rpx;
+	}
+	.text_7 {
+		color: #333333;
+		font-size: 30rpx;
+		font-family: PingFang;
+		max-width: 420rpx;
+	}
+	.text_8 {
+		margin-top: 20rpx;
+		color: #999999;
+		font-size: 24rpx;
+		font-family: PingFang;
+		max-width: 420rpx;
+		line-height: 36rpx;
+	}
+	.group_16 {
+		margin-right: 20rpx;
+		margin-top: 37rpx;
+	}
+	.image-wrapper {
+		align-self: center;
+		width: 28rpx;
+	}
+	.image_13 {
+		width: 28rpx;
+		height: 33rpx;
+	}
+	.section_5 {
+		margin-left: 41rpx;
+		background-color: #0000001a;
+		width: 1rpx;
+		height: 65rpx;
+	}
+	.view_3 {
+		margin-left: 40rpx;
+	}
+	.image_14 {
+		width: 28rpx;
+		height: 28rpx;
+	}
+	.group_17 {
+		margin-left: 3rpx;
+		align-self: flex-start;
+		line-height: 23rpx;
+		margin-top: 10rpx;
+	}
+	.text_9 {
+		color: #999999;
+		font-size: 24rpx;
+		font-family: PingFang;
+		line-height: 23rpx;
+	}
+	.text_10 {
+		color: #92b99c;
+		font-size: 24rpx;
+		font-family: PingFang;
+		line-height: 19rpx;
+	}
+}
+.p-border{
+	margin-top: 40rpx;
+	border-bottom: 2rpx solid #eee;
+}
+.p-price {
+  padding: 0 30rpx;
+  .price-wrap{
+	  height: 109rpx;
+	  border-bottom: solid 2rpx #0000000a;
+  }
+	.text_16 {
+	  color: #333333;
+	  font-size: 30rpx;
+	  font-family: PingFang;
+	}
+	.text_17 {
+	  margin: 3rpx 0;
+	  color: #333333;
+	  font-size: 30rpx;
+	  font-family: PingFang;
+	}  
+}
+.p-total{
+	height: 100rpx;
+	font-size: 30rpx;
+	font-family: PingFang SC;
+	font-weight: 500;
+	color: #333333;
+	padding: 0 30rpx;
+}
+.p-info{
+	padding: 40rpx 42rpx 47rpx;
+	.text_20 {
+	  align-self: flex-start;
+	  color: #333333;
+	  font-size: 30rpx;
+	  font-family: PingFang;
+	}
+	.group {
+	  padding: 0 29rpx;
+	}
+	.view_8 {
+	  margin-top: 34rpx;
+	}
+	.text_21 {
+	  color: #999999;
+	  font-size: 28rpx;
+	  font-family: PingFang;
+	  width: 187rpx;
+	  flex-shrink: 0;
+	   line-height: 36rpx;
+	}
+	.text_22 {
+	  color: #999999;
+	  font-size: 28rpx;
+	  line-height: 36rpx;
+	  font-family: PingFang;
+	}
+}
+.btn-wrap{
+	height: 128rpx;
+	background: #FFFFFF;
+	box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(0,0,0,0.1);
+	padding: 0 20rpx;
+	.btn{
+		width: 228rpx;
+		height: 76rpx;
+		border: 2rpx solid $base-color;
+		border-radius: 38rpx;
+		text-align: center;
+		line-height: 72rpx;
+		
+		font-size: 30rpx;
+		font-family: PingFang SC;
+		font-weight: 500;
+		color: $base-color;
+		margin-left: 12rpx;
+		
+		
+		&.full{
+			color:#fff;
+			border: none;
+			background: $base-color;
+		}
+	}
+	
+}
+</style>

pages/order/evaluate.vue

@@ -0,0 +1,180 @@
+<template>
+	<view class="page">
+		<view class="p-num align-center justify-center">
+			<text class="k">我的评分</text>
+			<text class="v">7.5分</text>
+		</view>
+		<view class="p-star flex-col">
+			  <view class="flex-row justify-between">
+			    <image
+			      src="/static/mang_star.png"
+			      class="image_7"
+			    />
+			    <image
+			      src="/static/mang_star.png"
+			      class="image_7"
+			    />
+			    <image
+			      src="/static/mang_star.png"
+			      class="image_7"
+			    />
+			    <image
+			      src="/static/mang_star.png"
+			      class="image_7"
+			    />
+			    <image
+			      src="/static/mang_starun.png"
+			      class="image_7"
+			    />
+			  </view>
+			  <view class="flex-row justify-center group_8">
+			    <text class="text_4">极差</text>
+			    <text class="text_4">较差</text>
+			    <text class="text_4">一般</text>
+			    <text class="text_4">不错</text>
+			    <text class="text_4">很棒</text>
+			  </view>
+		</view>
+	    <view class="p-content flex-col items-start">
+			<textarea placeholder="写几句评价" class="area"></textarea>
+			<view class="img-wrap flex-row">
+				<view class="img-item" v-for="(item,idx) in 10" :key="idx">
+					<image src="/static/temp/pro.png" mode="aspectFill" class="img" ></image>
+					<view class="cancel">
+						取消
+					</view>
+				</view>  
+				<image
+					src="/static/addimg.png"
+					class="img"
+				/>	
+			</view>
+		</view>
+		<safe-area height="94rpx">
+			<template v-slot:btn>
+				<view class="btn-wrap">
+						申请退款
+				</view>
+			</template>
+		</safe-area>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			};
+		}
+	}
+</script>
+
+<style lang="scss">
+page{
+	background-color: #fff;
+}
+.page{
+	padding-top: 108rpx;
+}
+.p-num{
+	text-align: center;
+		font-size: 30rpx;
+		font-family: PingFang SC;
+		font-weight: 500;	
+	.k{
+		color: #333333;
+	}
+	.v{
+		color:#FD9534;
+	}
+	
+}
+.p-star{
+	  margin-top: 50rpx;
+	  padding: 0 174rpx;
+	.image_7 {
+	  border-radius: 8rpx;
+	  width: 48rpx;
+	  height: 48rpx;
+	}
+	.group_8 {
+	  margin-top: 24rpx;
+	}
+	.text_4 {
+	  color: #999999;
+	  font-size: 24rpx;
+	  font-family: PingFang;
+	  margin-right: 39rpx;
+	  &:last-child{
+		  margin-right: 0;
+	  }
+	}
+	
+}
+.p-content{
+	width: 690rpx;
+	background: #F7F7F7;
+	border-radius: 10rpx;
+	  padding: 27rpx 20rpx 24rpx;
+	  background-color: #f7f7f7;
+	  border-radius: 10rpx;
+	  margin: 57rpx 30rpx 0;
+	.area {
+	  color: #333;
+	  font-size: 24rpx;
+	  font-family: PingFang;
+	  line-height: 36rpx;
+	  height: 204rpx;
+	  width: 100%;
+	}
+	.img-wrap{
+		flex-wrap: wrap;
+		.img-item{
+			position: relative;
+			margin-right: 10rpx;
+		    margin-bottom: 10rpx;
+			border-radius: 20rpx;
+			overflow: hidden;
+		}
+		.cancel{
+			position: absolute;
+			bottom: 0;
+			left: 0;
+			background: rgba(0,0,0,.4);
+			height: 40rpx;
+			line-height: 40rpx;
+			text-align: center;
+			width: 100%;
+			color:#fff;
+			font-size: 24rpx;
+		}
+		.img {
+		 
+		  width: 118rpx;
+		  height: 118rpx;
+		  
+		  &:nth-child(5n){
+			  margin-right: 0;
+		  }
+		}
+	}
+	
+}
+.btn-wrap{
+	width: 690rpx;
+	height: 94rpx;
+	background: $base-color;
+	border-radius: 47rpx;
+	margin: 0  auto;
+
+
+	font-size: 34rpx;
+	font-family: PingFang SC;
+	font-weight: bold;
+	color: #FFFFFF;
+	line-height: 94rpx;
+	text-align: center;
+	
+}
+</style>

pages/order/order.vue

@@ -1,213 +1,154 @@
 <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 class="tab-sec">
+			<view class="tab-wrap align-center justify-around">
+				<view class="tab" :class="{ active: tabCurrentIndex === idx }" v-for="(item, idx) in tabs" :key="idx">{{ item.name }}</view>
 			</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="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>
+				<pro />
+				<!-- 进行中 
 				  <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 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,
-			};
-		}
-	}
+import pro from './components/pro.vue'
+export default {
+	components:{
+		pro
+	},
+	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{
+page {
 	background-color: #f8f8f8;
 }
-.tab-sec{
+.tab-sec {
 	position: relative;
 	height: 89rpx;
 }
-.tab-wrap{
+
+.tab-wrap {
+	position: fixed;
+	left: 0;
+	top: calc(var(--window-top));
+	z-index: 10;
+	right: 0;
 	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;
+	background-color: #f8f8f8;
+	.tab {
+		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{
+.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;
+		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;
+		margin-top: 24rpx;
 	}
 	.group_3 {
-	  padding: 24rpx 20rpx 24rpx 25rpx;
-	  border-bottom: solid 1rpx #0000000f;
+		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;
+		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;
+		margin-bottom: 10rpx;
+		color: #92b99c;
+		font-size: 28rpx;
+		font-family: PingFang;
+		line-height: 27rpx;
 	}
+
 	.group_8 {
-	  margin-top: 32rpx;
-	  padding: 0 20rpx;
+		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;
+		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;
+		color: #92b99c;
+		font-size: 28rpx;
+		font-family: PingFang;
 	}
 	.text-wrapper_2 {
-	  padding: 16rpx 0 19rpx;
-	  border-radius: 10rpx;
-	  width: 154rpx;
-	  height: 64rpx;
-	  border: solid 1rpx #92b99c;
+		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;
+		color: #92b99c;
+		font-size: 28rpx;
+		font-family: PingFang;
 	}
 }
 </style>

pages/order/refund.vue

@@ -0,0 +1,223 @@
+<template>
+	<view class="page">
+		<view class="p-pro flex-col">
+			<text class="title">退款盲盒</text>
+			<view class="flex-row group_7">
+				<image src="/static/temp/pro.png" class="img" mode="aspectFill" />
+				<view class="flex-col group_8">
+					<view class="flex-row justify-between group_9">
+						<text class="name clamp">幸福西饼Rice盲盒</text>
+						<text class="price">￥80.40</text>
+					</view>
+					<view class="flex-col group_10">
+						<view class="group_11">
+							<text class="text_5">配送方式：</text>
+							<text class="text_6">自提</text>
+						</view>
+						<text class="text_7">共1件</text>
+					</view>
+					<view class="group_12">
+						<text class="text_8">自提地址：</text>
+						<text class="text_9">河东区万达广场1F东门入口</text>
+					</view>
+				</view>
+			</view>
+		</view>
+	    <view class="p-info flex-col">
+			  <text class="text_10">退款信息</text>
+			  <view class="flex-row justify-between group_13">
+			    <text class="text_11">货物状态</text>
+			    <view class="flex-row">
+			      <text class="text_13">请选择</text>
+			      <image
+			        src="/static/refund-rarrow.png"
+			        class="image_6"
+			      />
+			    </view>
+			  </view>
+			  <view class="flex-row justify-between group_13">
+			    <text class="text_11">退款原因</text>
+			    <view class="flex-row">
+			      <text class="text_13">请选择</text>
+			      <image
+			        src="/static/refund-rarrow.png"
+			        class="image_6"
+			      />
+			    </view>
+			  </view>
+			  <view class="flex-col group_16">
+			    <view class="flex-row justify-between">
+			      <text class="text_17">退款金额</text>
+			      <text class="text_18">￥149.00</text>
+			    </view>
+			    <text class="text_19">可修改，请与商家协商一致后填写</text>
+			  </view>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {};
+	}
+};
+</script>
+
+<style lang="scss">
+page {
+	background-color: #f8f8f8;
+}
+.page {
+	padding: 30rpx;
+}
+.p-pro {
+	padding: 22rpx 18rpx 25rpx 20rpx;
+	background-color: #ffffff;
+	box-shadow: 0px 6rpx 10rpx #2a2a2a14;
+	border-radius: 20rpx;
+	.title {
+		align-self: flex-start;
+		color: #333333;
+		font-size: 32rpx;
+		font-family: PingFang;
+	}
+	.group_7 {
+		margin-top: 22rpx;
+		padding-left: 3rpx;
+	}
+	.img {
+		flex-shrink: 0;
+		width: 154rpx;
+		height: 154rpx;
+		border-radius: 10rpx;
+	}
+	.group_8 {
+		margin-left: 23rpx;
+		flex: 1 1 auto;
+	}
+	.group_9 {
+		padding-left: 2rpx;
+	}
+	.name {
+		color: #333333;
+		font-size: 30rpx;
+		font-family: PingFang;
+		max-width: 359rpx;
+	}
+	.price {
+		margin-bottom: 6rpx;
+		color: #ff3e3e;
+		font-size: 30rpx;
+		font-family: PingFang;
+	}
+	.group_10 {
+		margin-top: 7rpx;
+		height: 35rpx;
+	}
+	.group_11 {
+		margin-top: 12rpx;
+		align-self: flex-start;
+		line-height: 23rpx;
+	}
+	.text_5 {
+		color: #999999;
+		font-size: 24rpx;
+		font-family: PingFang;
+		line-height: 23rpx;
+	}
+	.text_6 {
+		color: #333333;
+		font-size: 24rpx;
+		font-family: PingFang;
+		line-height: 23rpx;
+	}
+	.text_7 {
+		margin-right: 25rpx;
+		margin-top: -35rpx;
+		align-self: flex-end;
+		color: #999999;
+		font-size: 24rpx;
+		font-family: PingFang;
+		line-height: 23rpx;
+	}
+	.group_12 {
+		margin-top: 19rpx;
+		align-self: flex-start;
+		line-height: 23rpx;
+	}
+	.text_8 {
+		color: #999999;
+		font-size: 24rpx;
+		font-family: PingFang;
+		line-height: 23rpx;
+	}
+	.text_9 {
+		color: #333333;
+		font-size: 24rpx;
+		font-family: PingFang;
+		line-height: 23rpx;
+	}
+}
+.p-info{
+	  margin-top: 24rpx;
+	  padding: 30rpx 18rpx 40rpx 20rpx;
+	  background-color: #ffffff;
+	  box-shadow: 0px 6rpx 10rpx #2a2a2a14;
+	  border-radius: 20rpx;
+	.text_10 {
+	  align-self: flex-start;
+	  color: #333333;
+	  font-size: 32rpx;
+	  font-family: PingFang;
+	  line-height: 31rpx;
+	}
+	.group_13 {
+	  margin-top: 49rpx;
+	  padding: 0 5rpx;
+	}
+	.text_11 {
+	  color: #333333;
+	  font-size: 30rpx;
+	  font-family: PingFang;
+	  letter-spacing: 1.2rpx;
+	}
+	.text_13 {
+	  color: #999999;
+	  font-size: 30rpx;
+	  font-family: PingFang;
+	  letter-spacing: 1.2rpx;
+	}
+	.image_6 {
+	  margin: 4rpx 0 4rpx 14rpx;
+	  flex-shrink: 0;
+	  width: 12rpx;
+	  height: 20rpx;
+	}
+	.group_16 {
+	  margin-top: 49rpx;
+	  padding-left: 5rpx;
+	}
+	.text_17 {
+	  color: #333333;
+	  font-size: 30rpx;
+	  font-family: PingFang;
+	  letter-spacing: 1.2rpx;
+	}
+	.text_18 {
+	  margin: 3rpx 0;
+	  color: #fc4d37;
+	  font-size: 30rpx;
+	  font-family: PingFang;
+	  letter-spacing: 1.2rpx;
+	}
+	.text_19 {
+	  margin-left: 30rpx;
+	  margin-top: 19rpx;
+	  align-self: flex-start;
+	  color: #999999;
+	  font-size: 24rpx;
+	  font-family: PingFang;
+	}
+}
+</style>