vue-pc微信支付

pc端支付

获取后台给的url生成二维码，用户扫码
扫码支付成功后，点击我已经支付按钮，查询支付状况

a页面
var code_url = await weixinPay(....)
let str = encodeURIComponent(data.data.code_url)
 this.$router.push(
      "/wechatPayment?id=" + str + "&arr=" + data.data.out_trade_no
);

b页面
// 生成二维码，用来扫码支付
let urlCode = decodeURIComponent(this.$route.query.id);
this.GenerateQRcode(urlCode);

b页面全部代码

<template>
    <div class="wechat-payment">
        <div class="container">
            <div class="wechat-payment-content">
                <!-- 待支付 -->
                <div v-if="isPay == 0" class="to-paid">
                    <div id="payQrcode"></div>
                    <p>请使用微信扫描二维码以完成支付</p>
                    <p @click="whetherPay"><span class="public-btn">我已完成支付</span></p>
                </div>
                <!-- 支付成功or失败 -->
                <div v-if="isPay != 0" class="payment">
                    <img :src="'~@/../static/images/'+(isPay == 1?'chenggong':'shibai')+'.png'" alt="">
                    <p>支付{{isPay == 1? '成功': '失败'}}</p>
                </div>
                <p class="landmark">您现在可以：<a v-if="isPay == 0" @click="$router.go(-1)">返回修改支付方式</a><span v-if="isPay == 0">|</span><router-link to="/personalData?navid=学习历史">进入学习中心</router-link>|<router-link to="/">返回首页</router-link><span v-if="isPay == 2">|</span><router-link v-if="isPay == 2" to="/myOrder">返回我的订单</router-link></p>
            </div>
        </div>
    </div>
</template>

<script>
import { home } from '../../api/index'; // 引入接口
import QRCode from "qrcodejs2"; // 生成二维码
export default {
    data() {
        return {
            isPay: 0, // 待支付0,1成功,2失败
        }
    },
    // 方法
    methods:{
        // 生成二维码
        GenerateQRcode(val){
            new QRCode("payQrcode", { // 此处的qrcode为上面div的id
                text: val,
                width: 200,
                height: 200,
                colorDark: "#000000",
                colorLight: "#ffffff",
                correctLevel: QRCode.CorrectLevel.H
            });
        },
        // 是否支付成功
        whetherPay(){
            let obj = this.$route.query.arr;
            this.$Spin.show(); // 加载
            home.validation(obj).then((data) => {
                if(data.status == 200){
                    this.isPay = data.data.states == 'success'? 1:2;
                }else{
                    this.$Message.info({content: data.msg, duration: 2, closable: true});
                }
                this.$Spin.hide(); // 加载
            }).catch((err) => {
                this.$Spin.hide(); // 加载
            })
        },
    },
    created() {
    },
    mounted() {
        let urlCode = decodeURIComponent(this.$route.query.id);
        this.GenerateQRcode(urlCode);
    },
}
</script>

<style lang="scss" scoped>
// 自定义颜色
color;
padding: 0 0 0.2rem;
}
}
// 最底下 -- p
.landmark{
padding-bottom: 1.2rem;
a{
color: #333;
margin:0 0.1rem;
text-decoration:underline;
&:nth-of-type(1){
margin-left: 0;
}
}
}
}
}
</style>