106 lines
3.2 KiB
Vue
106 lines
3.2 KiB
Vue
<script setup>
|
||
import {reactive, ref} from "vue";
|
||
import {Message} from "@arco-design/web-vue";
|
||
import Api from "../../api/index.ts";
|
||
import {QrcodeCanvas} from "qrcode.vue";
|
||
|
||
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: {data}} = await Api.merchant.rechargeOrderQR({
|
||
money: money,
|
||
});
|
||
Object.assign(qrInfo, data);
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<a-button v-if="!$slots.default" type="primary" @click="open">立即充值</a-button>
|
||
<div @click="open">
|
||
<slot></slot>
|
||
</div>
|
||
|
||
<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]">
|
||
<qrcode-canvas size="200" :value="qrInfo.qr_code"></qrcode-canvas>
|
||
</div>
|
||
<div class="flex justify-center mt-[5px] flex-col items-center">
|
||
<a-link :hoverable="false" style="color: var(--color-neutral-6)" @click="initQR">
|
||
<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>
|