jjx-web/pages/user/components/payment.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="onPayStatus">已完成支付</el-button>
        </div>
        <el-button v-else type="danger" @click="onPay">立即支付</el-button>
    </el-card>
</template>

<script>
import UQRCode from 'uqrcodejs';
import dayjs from "dayjs";

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
        },
        async onPay() {
            const res = await vk.callFunction({
                url: 'client/order/kh/add',
                data:{
                    goods: {
                        name: '缴纳保证金',
                        amount: this.money,
                        cover: null
                    },
                    type: 2,
                    goodsId: null,
                    num: 1,
                }
            })
            const requestTimestamp = dayjs().format('YYYY-MM-DD HH:mm:ss')
            const timestamp = dayjs().format('YYYYMMDDHHmmss')
            let data = {
                queryUrl: 'https://test-api-open.chinaums.com/v1/netpay/bills/get-qrcode',
                timestamp,
                nonce: 'rp84ufhfn20yneo3tp',
                content: {
                    billNo: res.data,
                    requestTimestamp,
                    mid: '898201612345678',
                    tid: '88880001',
                    instMid: 'QRPAYDEFAULT',
                    totalAmount: 1,
                    // notifyUrl: 'https://static-mp-0737e52b-fffa-4223-bcdf-d4ad3d9968a5.next.bspapp.com/#/'
                    notifyUrl: 'https://tcb-n44byxi8bmrfrki-d4bn1c4a206d.service.tcloudbase.com/pay_notify'
                }
            }
            /**
             * 调用函数
             */
            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>