xl-root/src/pages/merchant/components/Alipay.vue

<script setup>
import {reactive, ref} from "vue";
import {Message} from "@arco-design/web-vue";
import Api from "../../../api/index.js";

const {money} = defineProps({
    money: {
        type: Number,
        default: null
    }
});
const visible = ref(false);
const qrInfo = reactive({});
const open = () => {
    if (!money) {
        Message.warning('充值金额需大于0元');
        return;
    }
    visible.value = true;
    initQR();
}

const initQR = async () => {
    const {data} = await Api.merchant.rechargeOrderQR({
        money: money,
    });
    Object.assign(qrInfo, data);
}
</script>

<template>
    <a-button type="primary" @click="open">立即充值</a-button>

    <a-modal
        :footer="false"
        id="Alipay-Modal"
        title-align="start"
        title="支付宝支付"
        v-model:visible="visible">
        <template v-if="true">
            <a-alert>平台提示：支付后未出现成功提示，点击【我已支付】刷新充值状态</a-alert>

            <div class="py-[24px] px-[20px]">
                <div class="flex justify-center gap-[15px]">
                    支付金额: <span class="text-[rgb(var(--arcoblue-6))]">{{ money }}元</span>
                </div>
                <div class="text-center mt-[20px]">打开支付宝扫描下方二维码支付</div>
                <div class="w-[200px] aspect-square mx-auto mt-[5px]">
                    <img class="w-full h-full object-cover" src="" alt=""/>
                </div>
                <div class="flex justify-center mt-[5px] flex-col items-center">
                    <a-link :hoverable="false" style="color: var(--color-neutral-6)">
                        <icon-sync class="mr-[5px]"/>
                        点击刷新
                    </a-link>
                    <a-button class="mx-auto mt-[20px]" type="primary">我已支付</a-button>
                </div>

                <div class="mt-[20px] info mb-[40px]">
                    <div>支付遇到问题?</div>
                    <div>1、请先确认第三方支付网站是否交易完成。</div>
                    <div>2、第三方支付网站显示交易成功，但账户中没有充值流水，请私聊客服</div>
                </div>
            </div>
        </template>

        <template v-else>
            <div class="py-[24px] px-[20px]">
                <a-result status="success" title="充值成功">
                    <template #subtitle>
                        支付宝付款￥200.00
                    </template>
                    <template #extra>
                        <a-space>
                            <a-button type='primary'>确定</a-button>
                        </a-space>
                    </template>
                </a-result>
            </div>
        </template>
    </a-modal>
</template>

<style lang="scss" scoped>
.info {
    color: rgb(78, 89, 105);
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: 0;
    text-align: left;
}
</style>

<style lang="scss">
#Alipay-Modal {
    .arco-modal-body {
        padding: 0;
    }
}
</style>