购买增值服务页面

pages/user/components/added.vue

@@ -1,20 +1,29 @@
  <template>
   <el-card>
     <div slot="header" class="clearfix">
-			<span>会员等级</span>
+      <span>购买增值服务</span>
     </div>
     <div class="grade-list">
-        <div class="item"  v-for="(item, index) in gradeList" :key="index" :class="index === gradeIndex ? 'active' : ''" @click="onChange(index)">
+      <div class="item">
+        <div class="item-box" style="background-color: #f7f7f7">
+          <div class="title">业务编号</div>
+          <div class="title">服务项目</div>
+          <div class="title">计价方式</div>
+          <div class="title">收费标准</div>
+          <div class="title">检查单位</div>
+          <div class="title">选择服务</div>
+          <div class="title">备注</div>
+        </div>
+      </div>
+      <div class="item" v-for="(item, index) in gradeList" :key="index" @click="onChange(index)">
         <div class="item-box">
+          <div class="title">{{ item.code }}</div>
           <div class="title">{{ item.name }}</div>
-            <div class="info">
-              <text class="price" v-if="item.price">￥{{ item.price }}</text>
-            </div>
-          </div>
-          <div class="select">
-            <div class="icon">
-              <i class="el-icon-check"></i>
-            </div>
+          <div class="title">{{ item.type }}</div>
+          <div class="title">{{ item.price }}</div>
+          <div class="title">{{ item.company }}</div>
+          <div class="title"><el-radio v-model="item.select" :label="1" @click.stop="onSelect(index)">{{ item.select === 1 ? '已选' : ''}}</el-radio></div>
+          <div class="title">{{ item.comments }}</div>
         </div>
       </div>
     </div>
@@ -64,39 +73,83 @@
       gradeList: [
         {
           id: 1,
-            name: '黄金vip',
-            price: 669,
-            comments: ''
+          code: 'JJX001',
+          name: '供应商实力考查',
+          type: '元/次',
+          price: 150,
+          company: '金久信',
+          select: 1,
+          comments: '实现视频并记录存档，收集相关纸质文件'
         },
         {
           id: 2,
-            name: '铂金vip',
-            price: 1999,
-            comments: ''
+          code: 'JJX002',
+          name: '供应商实力考查',
+          type: '元/次',
+          price: 150,
+          company: '金久信',
+          select: 0,
+          comments: '实现视频并记录存档，收集相关纸质文件'
         },
         {
           id: 3,
-            name: '钻石vip',
-            price: 2999,
-            comments: ''
+          code: 'JJX003',
+          name: '供应商实力考查',
+          type: '元/次',
+          price: 150,
+          company: '金久信',
+          select: 0,
+          comments: '实现视频并记录存档，收集相关纸质文件'
         },
         {
           id: 4,
-            name: '实力厂家',
-            price: 20000,
-            comments: ''
+          code: 'JJX004',
+          name: '供应商实力考查',
+          type: '元/次',
+          price: 150,
+          company: '金久信',
+          select: 0,
+          comments: '实现视频并记录存档，收集相关纸质文件'
         },
         {
           id: 5,
-            name: '实力加工厂',
-            price: 1999,
-            comments: ''
+          code: 'JJX005',
+          name: '供应商实力考查',
+          type: '元/次',
+          price: 150,
+          company: '金久信',
+          select: 1,
+          comments: '实现视频并记录存档，收集相关纸质文件'
         },
         {
           id: 6,
-            name: '实力采购商',
-            price: 1999,
-            comments: ''
+          code: 'JJX006',
+          name: '供应商实力考查',
+          type: '元/次',
+          price: 150,
+          company: '金久信',
+          select: 0,
+          comments: '实现视频并记录存档，收集相关纸质文件'
+        },
+        {
+          id: 7,
+          code: 'JJX007',
+          name: '供应商实力考查',
+          type: '元/次',
+          price: 150,
+          company: '金久信',
+          select: 0,
+          comments: '实现视频并记录存档，收集相关纸质文件'
+        },
+        {
+          id: 8,
+          code: 'JJX008',
+          name: '供应商实力考查',
+          type: '元/次',
+          price: 150,
+          company: '金久信',
+          select: 0,
+          comments: '实现视频并记录存档，收集相关纸质文件'
         }
       ]
     }
@@ -118,6 +171,13 @@
     onChange(index) {
       this.gradeIndex = index
     },
+    onSelect(index){
+      if(this.gradeList[index].select === 1){
+        this.gradeList[index].select = 0
+      }else{
+        this.gradeList[index].select = 1
+      }
+    },
     onPay() {
       const date = new Date()
       const requestTimestamp = this.dateFormat('YYYY-mm-dd HH:MM:SS', date)
@@ -190,6 +250,7 @@
 .grade-list {
   display: flex;
   flex-direction: column;
+  font-size: 12px;
 
   .item {
     position: relative;