shenze-sysMan/src/views/popPayment.vue

<template>
    <div>
        <van-nav-bar title="订单信息" />
        <van-card class="my-card" v-for="(orderDetail, index) in orderDetails" :key="index" :num="orderDetail.productNumber"
            :price="price" :title="orderDetail.productName" :thumb="showSugarPhoto(orderDetail.productNo)" />
        <van-submit-bar :price="amount" button-color="#07c160" button-text="支付"
            @click="wxPay()" />
    </div>
</template>
  
<script>
import { useRoute } from "vue-router";
import { Toast, Dialog } from 'vant';
import { getOrderBySn } from '@/service/popPayment';
import { onMounted, ref } from "vue";


export default {
    name: 'popPayment',

    setup() {
        const route = useRoute();
        const sn = route.query.sn;
        const status = route.query.status;
        const order = ref(null);
        const orderDetails = ref([]);
        const amount = ref();
        const price = ref();

        onMounted(async () => {
            if (status == 1) {
                Dialog.alert({
                    message: '订单已支付',
                    theme: 'round-button',
                    confirmButtonColor: '#07c160',
                }).then(() => {
                    if (typeof window.WeixinJSBridge !== 'undefined') {
                        window.WeixinJSBridge.call('closeWindow');
                    } else {
                        window.close();
                    }
                })
            } else {
                await getOrder();
            }
        });
        const getOrder = async () => {
            const { data } = await getOrderBySn({ sn: sn });
            if (data.code === '00000') {
                order.value = data.data;
                orderDetails.value = data.data.orderDetails;
                console.log("order", order.value);
                console.log("orderDetails", orderDetails.value[0]);
                amount.value = order.value.price * 100;
                // console.log(amount.value);
                price.value = order.value.price.toFixed(2);
            } else { Toast.fail(data.message); }

        };
        const showSugarPhoto = (no) => {
            return require(`../assets/order/spunSugar/goods/${no}.png`);
        };
        const wxPay = () => {
            WeixinJSBridge.invoke(
                'getBrandWCPayRequest', {
                "appId": "wxcd5b1b2636c9f611",     //公众号ID，由商户传入     
                "timeStamp": route.query.timeStamp,         //时间戳，自1970年以来的秒数     
                "nonceStr": route.query.nonceStr, //随机串     
                "package": route.query.package,
                "signType": "RSA",         //微信签名方式：     
                "paySign": route.query.paySign //微信签名 
            },
                function (res) {
                    if (res.err_msg == "get_brand_wcpay_request:ok") {
                        console.log("支付成功");
                        Toast.success('支付成功');
                    } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
                        console.log("取消支付");
                        Toast('取消支付');
                    } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
                        console.log("支付失败");
                        Toast.fail('支付失败');
                    }
                }
            )
        };
        return {
            wxPay,
            getOrder,
            orderDetails,
            showSugarPhoto,
            price,
            amount
        };
    }
};
</script>

<style>

.van-image__img{
    object-fit: contain !important;
}
</style>