mteacher/src/components/MPayment.vue

<template>
    <div class="mpayment">
        <van-popup v-model="isShow" :close-on-click-overlay="false" close-icon-position="top-left" position="bottom" round :closeOnPopstate="true" :safe-area-inset-bottom="true" :style="{ minHeight: '30%' }" >
            <i @click="onClose" class="van-icon van-icon-cross van-popup__close-icon van-popup__close-icon--top-left"></i>
            <div class="title van-hairline--bottom">选择支付方式</div>
            <div class="payAmount">
                <p>应付金额</p>
                <div class="amount">{{ payAmount }}<span>元</span></div>
            </div>

            <van-radio-group v-model="payType">
                <div class="payment-item van-hairline--bottom" @click="payType = 'zfb'">
                    <div class="logo-section">
                        <img class="logo" src="@/assets/images/zfb.png" alt="">
                    </div>
                    <div class="title-section">支付宝支付</div>
                    <div class="value-section"><van-radio name="zfb"></van-radio></div>
                </div>
                <div class="payment-item" @click="payType = 'wx'">
                    <div class="logo-section">
                        <img class="logo" src="@/assets/images/wx_icon.png" alt="">
                    </div>
                    <div class="title-section">微信支付</div>
                    <div class="value-section"><van-radio name="wx"></van-radio></div>
                </div>
            </van-radio-group>

            <div class="blank"></div>
            <van-button type="primary" block @click="onSubmit">确认支付</van-button>
        </van-popup>
    </div>
</template>

<script>
import { changeTwoDecimal, validStudentUrl } from '@/common/common'
// import { executePayment } from '@/api/student'
// const axios = require('@/common/axios').default
export default {
    name: "mheader",
    props: {
        closeStatus: { // 弹窗关闭状态
            type: Boolean,
            default: false
        },
        amount: { // 支付金额
            type: Number,
            default: 0
        },
        payment: { // 支付对象
            type: Object
        }
    },
    data() {
        return {
            isShow: this.closeStatus,
            payAmount: this.amount,
            paymentObject: this.payment, // 支付对象
            payType: 'zfb'
        };
    },
    methods: {
        onClose() {
            this.$dialog.confirm({
                message: '是否放弃本次付款',
                confirmButtonText: '继续付款',
                cancelButtonText: '放弃'
            }).then(() => {
                // on confirm
            }).catch(() => {
                // on cancel
                this.isShow = false
                this.$emit("onChangeStatus", this.isShow);
            })
        },
        onSubmit() { // 提交支付
            // 支付...
            const pt = this.payType,
                ua = window.navigator.userAgent.toLowerCase()
            // 判断当前浏览器
            if (ua.match(/MicroMessenger/i) == 'micromessenger') {
                // 微信浏览器
                if (pt == 'zfb') {
                    this.pay_channel = 'alipay_qr'
                    this.getCodePay('qrCode')
                } else if (pt == 'wx') {
                    this.pay_channel = 'wx_pub'
                    this.getCodePay('pay')
                }
            } else if (ua.match(/AlipayClient/i) == 'alipayclient') {
                // 支付宝浏览器
                if (pt == 'zfb') {
                    this.pay_channel = 'alipay_wap'
                    // 支付宝 H5 支付
                    this.getCodePay('pay')
                } else if (pt == 'wx') {
                    this.pay_channel = 'wx_pub'
                    this.getCodePay('qrCode')
                }
            } else {
                if (pt == 'zfb') {
                    this.pay_channel = 'alipay_qr'
                } else if (pt == 'wx') {
                    this.pay_channel = 'wx_pub'
                }
                this.getCodePay('qrCode')
            }
        },
        getCodePay(code) {
            // 二维码页面， 唤起支付页面
            let url = validStudentUrl()
            if(code == 'qrCode') {
                url += `/#/payQRCode`
            } else {
                url += `/#/payResult`
            }
            url += `?payType=${this.pay_channel}&payment=${JSON.stringify(this.paymentObject)}&platform=teacher`
            this.$emit("onChangeStatus", false); // 初始化弹窗状态
            window.location.href = url
        },
    },
    watch: {
        closeStatus(val) {
            this.isShow = val
        },
        amount(val) {
            // 强制转换金额，显示两们小数
            this.payAmount = changeTwoDecimal(val)
        },
        payment(val) { // 监听数据
            this.paymentObject = val
        }
    }
};
</script>

<style lang="less" scoped>
@import url("../assets/commonLess/variable");
/deep/.van-popup__close-icon {
    color: #cccccc;
    font-size: .22rem;
}
// /deep/.van-popup--bottom.van-popup--round {
//     border-radius: .06rem .06rem 0 0;
//     // background-color: rgba(0, 0, 0, 0.06);
// }
/deep/.van-hairline--bottom::after {
    border-bottom-color: #F0F0F0;
}
.title {
    background-color: #ffffff;
    font-size: .16rem;
    font-weight: 400;
    color: #1A1A1A;
    padding: .14rem 0 .12rem;
    text-align: center;
}
.payAmount {
    background-color: #ffffff;
    padding: .2rem 0;
    text-align: center;
    p {
        font-size: .14rem;
        color: #666666;
        padding-bottom: .1rem;
    }
    .amount {
        font-size: .28rem;
        color: #000000;
        span {
            font-size: .18rem;
            padding-left: .03rem;
        }
    }
}

/deep/.van-cell {
    padding: .12rem .16rem;
}

.payment-item {
    background-color: #ffffff;
    display: flex;
    padding: .12rem 0;
    margin: 0 .16rem;
    align-items: center;

    .logo-section {
        width: .22rem;
        height: .22rem;
        .logo {
            width: .22rem;
            height: .22rem;
        }
    }
    .title-section {
        font-size: .16rem;
        padding-left: .1rem;
        flex: 1;
    }
    .value-section {
        flex: 1;
        .van-radio {
            float: right;
        }
    }
}
.blank {
    height: .65rem;
    background-color: #F0F0F0;
}

/deep/.van-button--primary {
    background-color:  @mColor;
    color: #ffffff;
    font-size: .16rem;
    height: .52rem;
    line-height: .50rem;
    border-radius: 0;
    border-color:  @mColor;
}
</style>