新增卖家中心订单列表页面

pages/user/components/yaoqing.vue

@@ -25,8 +25,25 @@
 		</view>
 		<view class="btns">
 			<view class="btn">复制邀请码</view>
-			<view class="btn red">兑换会员</view>
+			<view class="btn red" @click="openDuihuan">兑换会员</view>
 		</view>
+		
+		<el-dialog
+		  title="请选择要兑换的会员"
+		  :visible.sync="dialogVisible"
+		  width="30%"
+		  :before-close="handleClose">
+		  <view class="p3">
+		  	<view class="item" v-for="(item,index) in huiyuan" :key="index" :class="index == current ? 'active' : ''" @click="onSelect(index)">
+		  		<view class="t">{{item.title}}</view>
+		  		<view class="b">{{item.subtitle}}</view>
+		  	</view>
+		  </view>
+		  <span slot="footer" class="dialog-footer">
+		    <el-button @click="dialogVisible = false">取 消</el-button>
+		    <el-button type="primary" @click="dialogVisible = false">确定兑换</el-button>
+		  </span>
+		</el-dialog>
 	</view>
 </template>
 
@@ -39,11 +56,21 @@
 					{title:'铂金vip LV1',subtitle:'邀请6人可兑换'},
 					{title:'钻石vip LV1',subtitle:'邀请9人可兑换'},
 				],
-				p:45
+				p:45,
+				current: 0,
+				dialogVisible: false
 			}
 		},
 		methods: {
-			
+			openDuihuan(){
+				this.dialogVisible = true
+			},
+			handleClose(){
+				this.dialogVisible = false
+			},
+			onSelect(index){
+				this.current = index
+			}
 		}
 	}
 </script>
@@ -82,22 +109,26 @@
 		.p3{
 			margin-top: 80upx;
 			display: flex;
+			justify-content: space-around;
 			.item{
 				width: 250upx;
 				height: 180upx;
 				border-radius: 10upx;
-				box-shadow: 1px 1px 15px 1px #A92924;
+				box-shadow: 1px 1px 5px 1px #A92924;
 				display: flex;
 				flex-direction: column;
 				align-items: center;
 				justify-content: center;
 				font-size: 24upx;
 				color: #A92924;
-				margin-right: 100upx;
 				.t{
 					font-size: 30upx;
 				}
 			}
+			.active{
+				background-color: #A92924;
+				color: #ffffff;
+			}
 		}
 		
 		.p4{
@@ -136,20 +167,23 @@
 			margin-top: 80upx;
 			display: flex;
 			.btn{
-				width: 400upx;
-				height: 120upx;
+				width: 360upx;
+				height: 80upx;
 				display: flex;
 				justify-content: center;
 				align-items: center;
-				font-size: 50upx;
+				font-size: 30upx;
 				border: 1px solid #A92924;
 			}
 			.btn.red{
-				margin-left: 100upx;
+				margin-left: 200upx;
 				color: #fff;
 				background-color: #A92924;
 			}
 		}
 	}
-
+	.dialog-select{
+		.item{
+		}
+	}
 </style>