temple-h5/src/pages/pay/index.vue

<template>
    <div class="pay">
        <div class="topbar" ref="topbar">
            <van-nav-bar left-arrow v-if="$route.meta.showNavBar" :title="$route.meta.title" @click-left="$router.back()" :style="{backgroundColor: $route.meta.navBarBackgroundColor}" />
        </div>
        <div class="adv" v-if="adv">
            <img :src="adv.cover"  alt="">
        </div>
        <div class="pay-info">
            <h1 class="amount"><b>￥</b>{{query.amount}}</h1>
            <div class="order-info">
                <h3 class="goods_title">{{query.title}}</h3>
                <div class="goods-lucky-to" >
                    <span>功德芳名：{{query.merit_name}}</span>
                    <span v-if="query.is_die == '1'">阳上人：{{query.live_name}}</span>
                    <span v-if="query.is_die == '1'">往生人：{{query.die_name}}</span>
                </div>
                <div class="desc">
                    <!-- subTitle: 规格名称 -->
                    <span>{{query.subTitle}}</span>
                    <span>数量：x{{query.quantity}}</span>
                </div>
            </div>

            <div class="pay-type">
                <p class="label">支付方式</p>
                <van-radio-group v-model="payType">
                    <van-cell-group>
                        <van-cell title="微信" clickable @click="radio = '1'" icon="wechat">
                            <template #icon>
                                <img style="width: 40px" src="@/assets/img/wechat.jpg" alt="">
                            </template>
                            <template #right-icon>
                                <van-radio name="1" />
                            </template>
                        </van-cell>
                    </van-cell-group>
                </van-radio-group>
            </div>

            <div class="pay-button-container">
                <van-button v-if="query.order_id" block type="primary" round class="pay-button" @click="onContinuePayOrder">确认支付到寺院对公账户</van-button>
                <van-button v-else block type="primary" round class="pay-button" @click="onCreatePayOrder">确认支付到寺院对公账户</van-button>
            </div>
        </div>
    </div>
</template>

<script>
import {
    createFriendlyDayOrder,
    createBrickDayOrder,
    createPay,
    createMeritBoxOrder,
    createCommonOrder,
    createLightOrder, getPayAdv
} from "@/api";
import { requestPayment } from '@/common/wechat-web';
import { mapState } from "vuex";

export default {
    components: {
    },
    data(){
        return {
            query: this.$route.query,
            payType: '1',
            adv: null,
        }
    },
    computed: {
        ...mapState(['temple_merit_id', 'launch']),
    },
    mounted(){
        this.wechatReady(() => {

        })
        getPayAdv().then(res => {
            if(res){
                this.adv = res;
            }
        })
    },
    methods: {
        onContinuePayOrder(){
            this.onPayment({ id: this.query.order_id })
        },
        async onCreatePayOrder(){
            // 创建日行一善支付订单
            if(this.query.goods_type == '1'){
                const request = { ...this.query }
                const order = await createFriendlyDayOrder(request)
                this.onPayment(order)
                return
            }
            // 创建填砖加瓦订单
            if(this.query.goods_type == '2'){
                const request = { ...this.query }
                const order = await createBrickDayOrder(request)
                await this.onPayment(order)
                return
            }

            // 创建功德箱订单
            if(this.query.from === 'meritBox'){
                const domain = this.launch?.agent_id ? '2': '3'
                const request = {
                    temple_id: this.temple_merit_id || this.query.temple_id,
                    price: this.query.amount,
                    domain
                }
                const order = await createMeritBoxOrder(request)
                this.onPayment(order)
                return
            }

            // 创建通用商品订单
            if(this.query.from === 'common_goods'){
                const request = {
                    ...this.query,
                    price: this.query.amount,
                    buy_quantity: this.query.quantity
                }

                const order = await createCommonOrder(request);
                await this.onPayment(order);
            }

            // 创建佛前供灯订单
            if(this.query.from === 'goods_light'){
                const request = {
                    ...this.query,
                    price: this.query.amount,
                    buy_quantity: this.query.quantity
                }

                const order = await createLightOrder(request);
                await this.onPayment(order);
            }
        },
        async onPayment(order){
            const result = await createPay(order.id);
            const payResult = await requestPayment(result)
            await this.$router.push({
                name: 'pay-result',
                query: {
                    ...this.query,
                    order_id: order.id,
                    ...result,
                    ...payResult
                }
            })
        }
    }
}
</script>

<style lang="scss">

.pay{
    .adv{
        img{
            height: 4rem;
            width: 100%;
            vertical-align: middle;
        }
    }
    .pay-info{
        padding-top: 1rem;
        .amount{
            b{
                font-size: .5rem;
                color: rgb(236, 188, 98);
                padding-right: .1rem;
            }
            text-align: center;
            font-size: 1.07rem;
            color: rgb(255, 140, 8);
            font-weight: bold;
        }
        .order-info{
            margin-top: 1rem;
            padding: .4rem;
            .goods_title{
                font-size: .4rem;
                font-weight: bold;
                line-height: 1.4;
            }
            .goods-lucky-to{
                font-size: .35rem;
                padding-top: .4rem;
                span ~ span{
                    padding-left: .2rem;
                    border-left: 1px solid #ddd;
                    margin-left: .2rem;
                }
            }
            .desc{
                padding-top: .5rem;
                color: #666;
                font-size: .35rem;
                display: flex;
                justify-content: space-between;
            }
        }
        .pay-type{
            padding: .4rem;
            margin-top: .6rem;
            .label{
                font-size: .4rem;
                font-weight: bold;
                margin-bottom: .3rem;
            }
        }
        .pay-button-container{
            padding: .4rem;
        }
    }
}
</style>