From 4fe3719f37e8ec8fe41f0a4d070a0c841d89a3a1 Mon Sep 17 00:00:00 2001
From: gxwebsoft <Websoft5386339>
Date: Thu, 30 Nov 2023 23:12:19 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B4=AD=E4=B9=B0=E5=A2=9E=E5=80=BC=E6=9C=8D?=
 =?UTF-8?q?=E5=8A=A1=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/user/components/added.vue | 639 +++++++++++++++++---------------
 1 file changed, 350 insertions(+), 289 deletions(-)

diff --git a/pages/user/components/added.vue b/pages/user/components/added.vue
index f4ca612..d01a21f 100644
--- a/pages/user/components/added.vue
+++ b/pages/user/components/added.vue
@@ -1,317 +1,378 @@
-<template>
-	<el-card>
-		<div slot="header" class="clearfix">
-			<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-box">
-            <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>
-        </div>
+ <template>
+  <el-card>
+    <div slot="header" class="clearfix">
+      <span>购买增值服务</span>
+    </div>
+    <div class="grade-list">
+      <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="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>
+    <div class="payment">
+      <div class="sub-title">支付方式</div>
+      <div class="content">
+        <el-radio-group v-model="paymentIndex" class="ml-4">
+          <el-radio v-for="(item,index) in payment" :key="index" :label="index"
+                    size="large">{{ item }}</el-radio>
+        </el-radio-group>
+      </div>
+    </div>
+    <div class="pay-price">
+      <div class="sub-title">支付金额：￥{{ money }}元</div>
     </div>
-		<div class="payment">
-			<div class="sub-title">支付方式</div>
-			<div class="content">
-				<el-radio-group v-model="paymentIndex" class="ml-4">
-					<el-radio v-for="(item,index) in payment" :key="index" :label="index"
-						size="large">{{ item }}</el-radio>
-				</el-radio-group>
-			</div>
-		</div>
-		<div class="pay-price">
-			<div class="sub-title">支付金额：￥{{ money }}元</div>
-		</div>
     <div class="pay-price">
       <div class="sub-desc">购买即代表同意<text>《用户购买协议》</text></div>
     </div>
-		<div class="pay-price" v-if="billQRCode">
-			<uv-qrcode ref="qrcode" size="240px" :value="billQRCode"></uv-qrcode>
-			<div class="pay-desc">请打开手机微信，扫一扫完成支付</div>
-			<el-button type="success" @click="onPayStatus">已完成支付</el-button>
-		</div>
-		<el-button v-else type="danger" @click="onPay">立即支付</el-button>
-	</el-card>
+    <div class="pay-price" v-if="billQRCode">
+      <uv-qrcode ref="qrcode" size="240px" :value="billQRCode"></uv-qrcode>
+      <div class="pay-desc">请打开手机微信，扫一扫完成支付</div>
+      <el-button type="success" @click="onPayStatus">已完成支付</el-button>
+    </div>
+    <el-button v-else type="danger" @click="onPay">立即支付</el-button>
+  </el-card>
 </template>
 
 <script>
-	import UQRCode from 'uqrcodejs';
-	const OpenSdk = require('../lib/base').default;
-	// const OpenSdk = require('ums-sdk-nodejs').default;
+import UQRCode from 'uqrcodejs';
+const OpenSdk = require('../lib/base').default;
+// const OpenSdk = require('ums-sdk-nodejs').default;
 
-	const sdk = new OpenSdk({
-		appId: '10037e6f6823b20801682b6a5e5a0006',
-		appKey: '1c4e3b16066244ae9b236a09e5b312e8'
-	})
-	export default {
-		components: {},
-		data() {
-			return {
-				paymentIndex: 0,
-				payment: ["银联支付"],
-				money: 5000,
-				showQrcode: false,
-				billQRCode: '',
-        gradeIndex: 0,
-        gradeList: [
-          {
-            id: 1,
-            name: '黄金vip',
-            price: 669,
-            comments: ''
-          },
-          {
-            id: 2,
-            name: '铂金vip',
-            price: 1999,
-            comments: ''
-          },
-          {
-            id: 3,
-            name: '钻石vip',
-            price: 2999,
-            comments: ''
-          },
-          {
-            id: 4,
-            name: '实力厂家',
-            price: 20000,
-            comments: ''
-          },
-          {
-            id: 5,
-            name: '实力加工厂',
-            price: 1999,
-            comments: ''
-          },
-          {
-            id: 6,
-            name: '实力采购商',
-            price: 1999,
-            comments: ''
+const sdk = new OpenSdk({
+  appId: '10037e6f6823b20801682b6a5e5a0006',
+  appKey: '1c4e3b16066244ae9b236a09e5b312e8'
+})
+export default {
+  components: {},
+  data() {
+    return {
+      paymentIndex: 0,
+      payment: ["银联支付"],
+      money: 5000,
+      showQrcode: false,
+      billQRCode: '',
+      gradeIndex: 0,
+      gradeList: [
+        {
+          id: 1,
+          code: 'JJX001',
+          name: '供应商实力考查',
+          type: '元/次',
+          price: 150,
+          company: '金久信',
+          select: 1,
+          comments: '实现视频并记录存档，收集相关纸质文件'
+        },
+        {
+          id: 2,
+          code: 'JJX002',
+          name: '供应商实力考查',
+          type: '元/次',
+          price: 150,
+          company: '金久信',
+          select: 0,
+          comments: '实现视频并记录存档，收集相关纸质文件'
+        },
+        {
+          id: 3,
+          code: 'JJX003',
+          name: '供应商实力考查',
+          type: '元/次',
+          price: 150,
+          company: '金久信',
+          select: 0,
+          comments: '实现视频并记录存档，收集相关纸质文件'
+        },
+        {
+          id: 4,
+          code: 'JJX004',
+          name: '供应商实力考查',
+          type: '元/次',
+          price: 150,
+          company: '金久信',
+          select: 0,
+          comments: '实现视频并记录存档，收集相关纸质文件'
+        },
+        {
+          id: 5,
+          code: 'JJX005',
+          name: '供应商实力考查',
+          type: '元/次',
+          price: 150,
+          company: '金久信',
+          select: 1,
+          comments: '实现视频并记录存档，收集相关纸质文件'
+        },
+        {
+          id: 6,
+          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: '实现视频并记录存档，收集相关纸质文件'
+        }
+      ]
+    }
+  },
+  created() {},
+  methods: {
+    getUserInfo() {
+      vk.userCenter.getCurrentUserInfo({
+        success: (data) => {
+          if (data.userInfo.businessCard) {
+            this.form1.data = data.userInfo.businessCard
           }
-        ]
-			}
-		},
-		created() {},
-		methods: {
-			getUserInfo() {
-				vk.userCenter.getCurrentUserInfo({
-					success: (data) => {
-						if (data.userInfo.businessCard) {
-							this.form1.data = data.userInfo.businessCard
-						}
-						// 成功后的逻辑
-						console.log('用户信息: ', data);
-					}
-				});
+          // 成功后的逻辑
+          console.log('用户信息: ', data);
+        }
+      });
 
-			},
-			onChange(index) {
-				this.gradeIndex = index
-			},
-			onPay() {
-				const date = new Date()
-				const requestTimestamp = this.dateFormat('YYYY-mm-dd HH:MM:SS', date)
-				const timestamp = this.dateFormat('YYYYmmddHHMMSS', date)
-				console.log(timestamp)
-				console.log(requestTimestamp)
-				let data = {
-					queryUrl: 'https://test-api-open.chinaums.com/v1/netpay/bills/get-qrcode',
-					timestamp,
-					nonce: 'rp84ufhfn20yneo3tp',
-					content: {
-						requestTimestamp,
-						mid: '898201612345678',
-						tid: '88880001',
-						instMid: 'QRPAYDEFAULT',
-						totalAmount: 1,
-						notifyUrl: 'https://static-mp-0737e52b-fffa-4223-bcdf-d4ad3d9968a5.next.bspapp.com/#/'
-					}
-				}
-				/**
-				 * 调用函数
-				 */
-				sdk.exec(data).then(res => {
-					const h = this.$createElement;
-					const result = JSON.parse(res);
-					if (result.errCode === 'SUCCESS') {
-						this.showQrcode = true
-						this.billQRCode = result.billQRCode
-						// this.$alert('', '请打开手机微信，扫一扫完成支付', {
-						//   confirmButtonText: '确定',
-						//   callback: action => {
-						//     this.$message({
-						//       type: 'success',
-						//       message: `已完成支付`
-						//     });
-						//   }
-						// });
-					}
-				})
-			},
-			dateFormat(fmt, date) {
-				const opt = {
-					"Y+": date.getFullYear().toString(), // 年
-					"m+": (date.getMonth() + 1).toString(), // 月
-					"d+": date.getDate().toString(), // 日
-					"H+": date.getHours().toString(), // 时
-					"M+": date.getMinutes().toString(), // 分
-					"S+": date.getSeconds().toString() // 秒
-					// 有其他格式化字符需求可以继续添加，必须转化成字符串
-				};
-				let ret
-				for (let k in opt) {
-					ret = new RegExp("(" + k + ")").exec(fmt)
-					if (ret) {
-						fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
-					};
-				};
-				return fmt
-			}
-		}
-	}
+    },
+    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)
+      const timestamp = this.dateFormat('YYYYmmddHHMMSS', date)
+      console.log(timestamp)
+      console.log(requestTimestamp)
+      let data = {
+        queryUrl: 'https://test-api-open.chinaums.com/v1/netpay/bills/get-qrcode',
+        timestamp,
+        nonce: 'rp84ufhfn20yneo3tp',
+        content: {
+          requestTimestamp,
+          mid: '898201612345678',
+          tid: '88880001',
+          instMid: 'QRPAYDEFAULT',
+          totalAmount: 1,
+          notifyUrl: 'https://static-mp-0737e52b-fffa-4223-bcdf-d4ad3d9968a5.next.bspapp.com/#/'
+        }
+      }
+      /**
+       * 调用函数
+       */
+      sdk.exec(data).then(res => {
+        const h = this.$createElement;
+        const result = JSON.parse(res);
+        if (result.errCode === 'SUCCESS') {
+          this.showQrcode = true
+          this.billQRCode = result.billQRCode
+          // this.$alert('', '请打开手机微信，扫一扫完成支付', {
+          //   confirmButtonText: '确定',
+          //   callback: action => {
+          //     this.$message({
+          //       type: 'success',
+          //       message: `已完成支付`
+          //     });
+          //   }
+          // });
+        }
+      })
+    },
+    dateFormat(fmt, date) {
+      const opt = {
+        "Y+": date.getFullYear().toString(), // 年
+        "m+": (date.getMonth() + 1).toString(), // 月
+        "d+": date.getDate().toString(), // 日
+        "H+": date.getHours().toString(), // 时
+        "M+": date.getMinutes().toString(), // 分
+        "S+": date.getSeconds().toString() // 秒
+        // 有其他格式化字符需求可以继续添加，必须转化成字符串
+      };
+      let ret
+      for (let k in opt) {
+        ret = new RegExp("(" + k + ")").exec(fmt)
+        if (ret) {
+          fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
+        };
+      };
+      return fmt
+    }
+  }
+}
 </script>
 
 <style lang="scss" scoped>
-	.clearfix {
-		font-weight: bold;
-		font-size: 18px;
-	}
+.clearfix {
+  font-weight: bold;
+  font-size: 18px;
+}
 
-	.grade-list {
-		display: flex;
-		flex-direction: column;
+.grade-list {
+  display: flex;
+  flex-direction: column;
+  font-size: 12px;
 
-		.item {
-			position: relative;
-			border: 1px solid #eee;
+  .item {
+    position: relative;
+    border: 1px solid #eee;
 
-			.item-box {
-				display: flex;
-        font-size: 16px;
+    .item-box {
+      display: flex;
+      font-size: 16px;
 
-				.title {
-					padding: 10px;
-					border-right: 1px solid #eee;
-					display: flex;
-					align-items: center;
-					flex: 1;
-					justify-content: center;
-					text-align: center;
-				}
+      .title {
+        padding: 10px;
+        border-right: 1px solid #eee;
+        display: flex;
+        align-items: center;
+        flex: 1;
+        justify-content: center;
+        text-align: center;
+      }
 
-				.info {
-          padding: 10px;
-					display: flex;
-					flex: 1;
-					flex-direction: column;
-					align-items: center;
-					justify-content: center;
-					width: 230px;
+      .info {
+        padding: 10px;
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        width: 230px;
 
-					.price {
-					}
+        .price {
+        }
 
-					.desc {
-						color: #ccc;
-					}
-				}
-			}
+        .desc {
+          color: #ccc;
+        }
+      }
+    }
 
-			.select {
-				display: none;
-			}
-		}
-
-		.active {
-			border: 2px solid #bf2b28 !important;
-
-			.item-box {
-				.title {
-					color: #bf2b28;
-				}
-
-				.info {
-					.price {
-						color: #bf2b28;
-					}
-
-					.desc {
-						color: #ccc;
-					}
-				}
-			}
-
-			.select {
-				position: absolute;
-				right: 0;
-				bottom: 0;
-				border-top: 20px solid transparent;
-				border-right: 20px solid #bf2b28;
-				border-left: 20px solid transparent;
-				border-bottom: 20px solid #bf2b28;
-				display: flex;
-
-				.icon {
-					position: relative;
-
-					.el-icon-check {
-						position: absolute;
-						left: 0;
-						top: 0;
-						color: #fff;
-					}
-				}
-			}
-		}
-	}
-
-	.box-card {
-		margin-top: 20px;
-		border: none;
-	}
-
-	.sub-title {
-		color: #bf2b28;
-		font-size: 18px;
-		font-weight: bold;
-		border-left: 5px solid #bf2b28;
-		padding-left: 10px;
-		height: 20px;
-		line-height: 20px;
-		margin: 20px auto;
-	}
-  .sub-desc{
-    color: #808080;
-    margin-bottom: 20px;
-    text{
-      color: #bf2b28;
+    .select {
+      display: none;
     }
   }
 
-	.bzj-readme {
-		margin-top: 20px;
-	}
+  .active {
+    border: 2px solid #bf2b28 !important;
 
-	.payment {
-		margin-top: 20px;
-	}
+    .item-box {
+      .title {
+        color: #bf2b28;
+      }
 
-	.pay-price {
-		margin-top: 20px;
-	}
+      .info {
+        .price {
+          color: #bf2b28;
+        }
 
-	.pay-desc {
-		font-size: 16px;
-		line-height: 2em;
-	}
+        .desc {
+          color: #ccc;
+        }
+      }
+    }
+
+    .select {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      border-top: 20px solid transparent;
+      border-right: 20px solid #bf2b28;
+      border-left: 20px solid transparent;
+      border-bottom: 20px solid #bf2b28;
+      display: flex;
+
+      .icon {
+        position: relative;
+
+        .el-icon-check {
+          position: absolute;
+          left: 0;
+          top: 0;
+          color: #fff;
+        }
+      }
+    }
+  }
+}
+
+.box-card {
+  margin-top: 20px;
+  border: none;
+}
+
+.sub-title {
+  color: #bf2b28;
+  font-size: 18px;
+  font-weight: bold;
+  border-left: 5px solid #bf2b28;
+  padding-left: 10px;
+  height: 20px;
+  line-height: 20px;
+  margin: 20px auto;
+}
+.sub-desc{
+  color: #808080;
+  margin-bottom: 20px;
+  text{
+    color: #bf2b28;
+  }
+}
+
+.bzj-readme {
+  margin-top: 20px;
+}
+
+.payment {
+  margin-top: 20px;
+}
+
+.pay-price {
+  margin-top: 20px;
+}
+
+.pay-desc {
+  font-size: 16px;
+  line-height: 2em;
+}
 </style>