购买增值服务页面

pages/user/components/added.vue

@@ -1,20 +1,29 @@
-<template>
+ <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">
+          <div class="title">{{ item.type }}</div>
-              <text class="price" v-if="item.price">￥{{ item.price }}</text>
+          <div class="title">{{ item.price }}</div>
-            </div>
+          <div class="title">{{ item.company }}</div>
-          </div>
+          <div class="title"><el-radio v-model="item.select" :label="1" @click.stop="onSelect(index)">{{ item.select === 1 ? '已选' : ''}}</el-radio></div>
-          <div class="select">
+          <div class="title">{{ item.comments }}</div>
-            <div class="icon">
-              <i class="el-icon-check"></i>
-            </div>
         </div>
       </div>
     </div>
@@ -43,15 +52,15 @@
 </template>
 
 <script>
-	import UQRCode from 'uqrcodejs';
+import UQRCode from 'uqrcodejs';
-	const OpenSdk = require('../lib/base').default;
+const OpenSdk = require('../lib/base').default;
-	// const OpenSdk = require('ums-sdk-nodejs').default;
+// const OpenSdk = require('ums-sdk-nodejs').default;
 
-	const sdk = new OpenSdk({
+const sdk = new OpenSdk({
   appId: '10037e6f6823b20801682b6a5e5a0006',
   appKey: '1c4e3b16066244ae9b236a09e5b312e8'
-	})
+})
-	export default {
+export default {
   components: {},
   data() {
     return {
@@ -64,39 +73,83 @@
       gradeList: [
         {
           id: 1,
-            name: '黄金vip',
+          code: 'JJX001',
-            price: 669,
+          name: '供应商实力考查',
-            comments: ''
+          type: '元/次',
+          price: 150,
+          company: '金久信',
+          select: 1,
+          comments: '实现视频并记录存档，收集相关纸质文件'
         },
         {
           id: 2,
-            name: '铂金vip',
+          code: 'JJX002',
-            price: 1999,
+          name: '供应商实力考查',
-            comments: ''
+          type: '元/次',
+          price: 150,
+          company: '金久信',
+          select: 0,
+          comments: '实现视频并记录存档，收集相关纸质文件'
         },
         {
           id: 3,
-            name: '钻石vip',
+          code: 'JJX003',
-            price: 2999,
+          name: '供应商实力考查',
-            comments: ''
+          type: '元/次',
+          price: 150,
+          company: '金久信',
+          select: 0,
+          comments: '实现视频并记录存档，收集相关纸质文件'
         },
         {
           id: 4,
-            name: '实力厂家',
+          code: 'JJX004',
-            price: 20000,
+          name: '供应商实力考查',
-            comments: ''
+          type: '元/次',
+          price: 150,
+          company: '金久信',
+          select: 0,
+          comments: '实现视频并记录存档，收集相关纸质文件'
         },
         {
           id: 5,
-            name: '实力加工厂',
+          code: 'JJX005',
-            price: 1999,
+          name: '供应商实力考查',
-            comments: ''
+          type: '元/次',
+          price: 150,
+          company: '金久信',
+          select: 1,
+          comments: '实现视频并记录存档，收集相关纸质文件'
         },
         {
           id: 6,
-            name: '实力采购商',
+          code: 'JJX006',
-            price: 1999,
+          name: '供应商实力考查',
-            comments: ''
+          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)
@@ -178,18 +238,19 @@
       return fmt
     }
   }
-	}
+}
 </script>
 
 <style lang="scss" scoped>
-	.clearfix {
+.clearfix {
   font-weight: bold;
   font-size: 18px;
-	}
+}
 
-	.grade-list {
+.grade-list {
   display: flex;
   flex-direction: column;
+  font-size: 12px;
 
   .item {
     position: relative;
@@ -273,14 +334,14 @@
       }
     }
   }
-	}
+}
 
-	.box-card {
+.box-card {
   margin-top: 20px;
   border: none;
-	}
+}
 
-	.sub-title {
+.sub-title {
   color: #bf2b28;
   font-size: 18px;
   font-weight: bold;
@@ -289,29 +350,29 @@
   height: 20px;
   line-height: 20px;
   margin: 20px auto;
-	}
+}
-  .sub-desc{
+.sub-desc{
   color: #808080;
   margin-bottom: 20px;
   text{
     color: #bf2b28;
   }
-  }
+}
 
-	.bzj-readme {
+.bzj-readme {
   margin-top: 20px;
-	}
+}
 
-	.payment {
+.payment {
   margin-top: 20px;
-	}
+}
 
-	.pay-price {
+.pay-price {
   margin-top: 20px;
-	}
+}
 
-	.pay-desc {
+.pay-desc {
   font-size: 16px;
   line-height: 2em;
-	}
+}
 </style>