qimall/backend/modules/mall/views/addons/confirm-pay.php

<style>
    #app{
        background-color: #ffffff;
    }
    .order_steps{
        padding: 30px;
        width: 35%;
        margin: 0 auto;
    }
    .order_steps .el-step__title{
        font-size: small;
        font-weight: initial;
    }
    .line_title{
        line-height: 40px;
        color: #333;
        padding-left: 60px;
        border: 1px solid #ede5e5;
        padding-bottom: 90px;
    }
    .line_title raw{
        padding-left: 20px;
    }
    .el-table__header thead tr th{
        background-color: rgb(242 242 242);
        height: 40px;
        line-height: 40px;
    }
    .line_title img{
        padding: 20px 0 0 0;
    }
    .line_clue{
        width: 35%;
        margin: 0 auto;
        height: 3px;
        background-color: rgb(46 143 244);
        clear: both;
    }
    .submit{
        float: right;
        padding-left: 20px;
        padding-right: 20px;
        margin-top: 10px;
    }
    .pay-msg{
        margin-top: 23px;
        padding-left: 47px;
        color: #999;
    }
    .topay{
        margin-top: 50px;
    }
    .line_5{
        width: 100%;
        height: 2px;
        clear: both;
        background-color: #f2f2f2;
        margin-bottom: 21px;
    }
</style>
<div id="app" v-cloak>
    <template>
        <div class="order_steps">
            <el-steps :active="active" finish-status="success">
                <el-step title="提交订单"></el-step>
                <el-step title="支付订单"></el-step>
                <el-step title="订单结果"></el-step>
            </el-steps>
        </div>
        <div class="line_5"></div>
        <div class="line_clue"></div>
        <div class="order_steps line_title" >
            <div >应用名称：<samp>{{title}}</samp></div>
            <div v-if="addons.duration == -1">应用周期：<samp>{{unit[addons.unit]}}</samp></div>
            <div v-else>应用周期：<samp>{{addons.duration}}{{unit[addons.unit]}}</samp></div>
            <div >订购店铺：<samp>{{addons.mall_name}}</samp></div>
            <div >支付金额：<samp style="font-size: 26px; color: red;">{{addons.pay_money}}元</samp></div>
            <div >支付方式：
                <span >
                    <el-radio-group v-model="payment_type" v-if = "payment_arr">
                        <el-radio :label="index" v-for="(item,index) in payment_arr" :key="index" @change="qrcode(item)" border>{{item.payment_name}}</el-radio>
                    </el-radio-group>
                </span>
            </div>
            <div style="margin-left: 67px;" v-show = "is_scan">
                <!-- 二维码 -->
                <div id="qrcode-info">
                    <div id="qrcode">

                    </div>
                </div>
                <div class="pay-msg">请使用微信扫码支付</div>
            </div>
            <div v-show = "!is_scan" style="margin-left: 60px;height: 315px;">
                <el-button class="topay" type="primary" :loading="btnLoading" @click="topay()">跳转到支付宝支付</el-button>
            </div>
            <el-button v-show = "is_scan" class="submit" type="primary" :loading="btnLoading" @click="entrysuccess">已完成支付</el-button>
        </div>
    </template>
</div>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                unit:['永久','月','年'],
                loading: false,
                btnLoading:false,
                is_scan:true,
                payment_type: 0,
                payment_arr:[],
                title:'',
                pay_data:[],
                active: 2,
                name:'',
                checked:0,
                addons:{
                    price_setting:[{unit: 1, money: 10, duration: 1}],
                },
                setting_index:'',
            };
        },
        created() {
            this.order_id = getQuery('order_id');
            this.getList();
        },
        methods: {
            getList() {
                request({
                    params: {
                        r: 'mall/addons/confirm-pay',
                        order_id:this.order_id,
                    },
                    method: 'get',
                }).then(e => {
                    this.loading = false;
                    if (e.data.code === 0) {
                        this.addons = e.data.data
                        this.title = e.data.data.addons.title;
                        this.payment_arr = this.addons.extra_info.payment_arr;
                        if(this.payment_arr[0].payment_way == 'scan'){
                            this.is_scan = true;
                            this.createQrcode(this.payment_arr[0].payment_url);
                        }else{
                            this.pay_data = this.payment_arr[0];
                            this.is_scan = false;
                        }
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {

                });
            },
            qrcode(data){
                this.pay_data = data;
                if(data.payment_way =='scan'){
                    this.is_scan = true;
                    this.createQrcode(data.payment_url);
                }else {
                    this.is_scan = false;
                }
            },
            topay(){
                if(this.pay_data.payment_way =='navigate'){
                    window.open(this.pay_data.payment_url, '_self')
                }
            },
            createQrcode(url){
                let qrcodeInfo = document.getElementById("qrcode-info");
                document.getElementById("qrcode").remove(); //删除生成的二维码
                let addCodeDom = document.createElement("div");
                addCodeDom.setAttribute("id", "qrcode");
                addCodeDom.setAttribute("style", "width:200px; height:200px;");
                qrcodeInfo.appendChild(addCodeDom) //添加标签
                let qrCodeDom = document.getElementById("qrcode");
                var qrcode = new QRCode(qrCodeDom, {
                    width: 200,
                    height: 200,
                });
                qrcode.makeCode(url);
                // 获取二维码生成的图片信息
                return new Promise((req, rej) => {
                    setTimeout(() => {
                        src = qrCodeDom.getElementsByTagName("img")[0].src;
                        req(src);
                    }, 200);
                })
            },
            saveAddForm(){
            },
            entrysuccess() {
                navigateTo({r: 'mall/addons/confirm-success',order_id:this.order_id});
            }
        }
    });
</script>