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

<template>
    <el-card>
        <div slot="header" class="clearfix">
            <span>会员等级</span>
        </div>
        <div class="grade-list">
            <div class="item pointer" v-for="(item,index) in gradeList" :key="index"
                 :class="gradeIndex === index ? 'active' : ''" @click="onChange(index)">
                <div class="item-box">
                    <div class="title">{{ item.name }}</div>
                    <div class="title">
                        <span>{{ item.amount }}元/年</span>
                        <span v-if="parseFloat(item.ensureAmount) > 0">+交易保证金</span>
                    </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">支付金额：￥{{ amount }}元</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: ["银联支付"],
            showQrcode: false,
            billQRCode: '',
            gradeIndex: 1,
            gradeList: []
        }
    },
    created() {
        this.getUserLevelList()
    },
    methods: {
        getUserInfo() {
            vk.userCenter.getCurrentUserInfo({
                success: (data) => {
                    if (data.userInfo.businessCard) {
                        this.form1.data = data.userInfo.businessCard
                    }
                    // 成功后的逻辑
                    console.log('用户信息: ', data);
                }
            });

        },
        onChange(index) {
            this.gradeIndex = index
        },
        async onPay() {

            const res = await vk.callFunction({
                url: 'client/order/kh/add',
                data: {
                    goods: {
                        name: '会员升级',
                        amount: this.amount,
                        cover: null
                    },
                    type: 3,
                    goodsId: parseInt(this.gradeList[this.gradeIndex].level),
                    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/#/'
                }
            }
            /**
             * 调用函数
             */
            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: `已完成支付`
                    //     });
                    //   }
                    // });
                }
            })
        },
        getUserLevelList() {
            vk.callFunction({
                url: 'client/userLevel/pub/getList',
                data: {
                    pageIndex: 1,
                    pageSize: 200
                },
                success: (data) => {
                    this.gradeList = data.rows.filter(item => parseFloat(item.amount) > 0)
                }
            });
        }
    },
    computed: {
        amount() {
            return parseFloat(this.gradeList[this.gradeIndex].amount) + parseFloat(this.gradeList[this.gradeIndex].ensureAmount)
        }
    },
}
</script>

<style lang="scss" scoped>
.clearfix {
    font-weight: bold;
    font-size: 18px;
}

.grade-list {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

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

        .item-box {
            display: flex;

            .title {
                padding: 10px;
                display: flex;
                align-items: center;
                flex: 1;
                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 {
                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>