jjx-web-sign-only/pages/user/components/equity.vue

<template>
	<el-card>
		<div slot="header" class="clearfix">
			<span>交易保证金缴纳</span>
		</div>
		<div class="bzj-price">
			<div class="item" :class="money === 5000 ? 'active' : ''" @click="onChange(5000)">
				<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>
				<div class="select">
					<div class="icon">
						<i class="el-icon-check"></i>
					</div>
				</div>
			</div>
		</div>
		<div class="bzj-readme">
			<div class="sub-title">保证金说明</div>
			<div class="content">
				保证金说明内容...
			</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" v-if="billQRCode">
      <uv-qrcode ref="qrcode" size="240px" :value="billQRCode"></uv-qrcode>
      <div class="pay-desc">请打开手机微信，扫一扫完成支付</div>
	  <el-button type="success" @click="onPay">已完成支付</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;

	const sdk = new OpenSdk({
		appId: '10037e6f6823b20801682b6a5e5a0006',
		appKey: '1c4e3b16066244ae9b236a09e5b312e8'
	})
	export default {
		components: {},
		data() {
			return {
				paymentIndex: 0,
				payment: ["银联支付"],
				money: 5000,
				showQrcode: false,
        billQRCode: ''
			}
		},
		created() {
		},
		methods: {
			getUserInfo() {
				vk.userCenter.getCurrentUserInfo({
					success: (data) => {
						if (data.userInfo.businessCard) {
							this.form1.data = data.userInfo.businessCard
						}
						// 成功后的逻辑
						console.log('用户信息: ', data);
					}
				});

			},
			onChange(money) {
				this.money = money
			},
			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
					}
				}
        /**
         * 调用函数
         */
        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;
	}

	.bzj-price {
		display: flex;
		justify-content: space-between;

		.item {
			position: relative;
			border: 1px solid #eee;

			.item-box {
				display: flex;

				.title {
					padding: 10px;
					border-right: 1px solid #eee;
					display: flex;
					align-items: center;
					width: 40px;
					justify-content: center;
					text-align: center;
				}

				.info {
					padding: 10px;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					width: 230px;

					.price {
						font-size: 28px;
					}

					.desc {
						color: #ccc;
					}
				}
			}

			.select {
				display: none;
			}
		}

		.active {
			border: 2px solid #bf2b28 !important;

			.item-box {
				.title {
					border-right: 2px solid #bf2b28 !important;
					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;
	}

	.bzj-readme {
		margin-top: 20px;
	}

	.payment {
		margin-top: 20px;
	}

	.pay-price {
		margin-top: 20px;
	}
  .pay-desc{
    font-size: 16px;
    line-height: 2em;
  }
</style>