完善平台权益页面和修复链接

pages/user/components/grade.vue

@@ -4,41 +4,10 @@
 			<span>会员等级</span>
 		</div>
 		<div class="grade-list">
-			<div class="item" :class="money === 5000 ? 'active' : ''" @click="onChange(5000)">
+			<div class="item" v-for="(item,index) in gradeList" :key="index" :class="gradeIndex === index ? 'active' : ''" @click="onChange(index)">
 				<div class="item-box">
-					<div class="title">保证金</div>
-					<div class="info">
-						<text class="price">￥5000</text>
-						<text class="desc">文字信息后台编辑</text>
-					</div>
-				</div>
-				<div class="select">
-					<div class="icon">
-						<i class="el-icon-check"></i>
-					</div>
-				</div>
-			</div>
-			<div class="item" :class="money === 10000 ? 'active' : ''" @click="onChange(10000)">
-				<div class="item-box">
-					<div class="title">保证金</div>
-					<div class="info">
-						<text class="price">￥10000</text>
-						<text class="desc">文字信息后台编辑</text>
-					</div>
-				</div>
-				<div class="select">
-					<div class="icon">
-						<i class="el-icon-check"></i>
-					</div>
-				</div>
-			</div>
-			<div class="item" :class="money === 20000 ? 'active' : ''" @click="onChange(20000)">
-				<div class="item-box">
-					<div class="title">保证金</div>
-					<div class="info">
-						<text class="price">￥20000</text>
-						<text class="desc">文字信息后台编辑</text>
-					</div>
+					<div class="title">{{ item.name }}</div>
+          <div class="title">{{ item.price }}</div>
 				</div>
 				<div class="select">
 					<div class="icon">
@@ -91,7 +60,40 @@
 				payment: ["银联支付"],
 				money: 5000,
 				showQrcode: false,
-				billQRCode: ''
+				billQRCode: '',
+        gradeIndex: 1,
+        gradeList: [
+          {
+            id: 1,
+            name: '黄金VIP',
+            price: '699元/年'
+          },
+          {
+            id: 2,
+            name: '铂金VIP',
+            price: '1999元/年'
+          },
+          {
+            id: 3,
+            name: '钻石VIP',
+            price: '2999元/年'
+          },
+          {
+            id: 4,
+            name: '实力厂家',
+            price: '20000元/年+交易保证金'
+          },
+          {
+            id: 5,
+            name: '实力加工厂',
+            price: '20000元/年+交易保证金'
+          },
+          {
+            id: 6,
+            name: '实力采购商',
+            price: '20000元/年+交易保证金'
+          }
+        ]
 			}
 		},
 		created() {},
@@ -108,8 +110,8 @@
 				});
 
 			},
-			onChange(money) {
-				this.money = money
+			onChange(index) {
+				this.gradeIndex = index
 			},
 			onPay() {
 				const date = new Date()
@@ -182,6 +184,7 @@
 
 	.grade-list {
 		display: flex;
+    flex-direction: column;
 		justify-content: space-between;
 
 		.item {
@@ -193,10 +196,9 @@
 
 				.title {
 					padding: 10px;
-					border-right: 1px solid #eee;
 					display: flex;
 					align-items: center;
-					width: 40px;
+          flex: 1;
 					justify-content: center;
 					text-align: center;
 				}
@@ -229,7 +231,6 @@
 
 			.item-box {
 				.title {
-					border-right: 2px solid #bf2b28 !important;
 					color: #bf2b28;
 				}