xl-root/src/components/Pay/PayTask.vue

<script setup>
import {ref} from "vue";
import GoPay from "./GoPay.vue";

const payInfo = ref(null);
const visible = ref(false);
const emits = defineEmits(['close']);
let successFun = () => {
};
const open = (options) => {
    const {props, success} = options;
    successFun = success;
    payInfo.value = props.payInfo;
    visible.value = true;
}
const close = () => {
    visible.value = false;
}

const success = () => {
    successFun && successFun.apply();
}

defineExpose({
    open,
    close
});
</script>

<template>
    <a-modal
        @ok="success"
        ok-text="确认支付"
        :ok-button-props="{
            disabled: payInfo?.user_money < payInfo?.total_money
        }"
        :width="600"
        id="PayTask-Modal"
        title-align="start"
        title="开始任务"
        v-model:visible="visible">
        <a-alert>平台提示：该款项不会直接打给达人，只有您对子任务确认结算后，才会打款给达人</a-alert>
        <div class="px-[30px] py-[16px] flex flex-col gap-[8px] justify-start items-start" v-if="payInfo && visible">
            <div class="text-[#4E5969]">支付详情</div>
            <div class="flex">
                <div class="w-[100px]">任务金额(元）：</div>
                <span class="text-[#4E5969]">￥{{ (payInfo.total_money - payInfo.serve_money).toFixed(2) }}</span>
            </div>
            <div class="flex">
                <div class="w-[100px]">服务费(元）：</div>
                <span class="text-[#4E5969]">￥{{ payInfo.serve_money.toFixed(2) }}</span>
            </div>
            <div class="flex">
                <div class="w-[100px]">合计(元）：</div>
                <span class="text-[#4E5969]">￥{{ payInfo.total_money.toFixed(2) }}</span>
            </div>
            <div class="text-[12px] text-[#86909C]">
                提示：①服务费按照实际消耗任务金额的百分比进行收取<br/>
                ②若任务未被领取或者未支付全部金额，则只收取实际支付部分的服务费<br/>
                ③剩余任务金额和服务费将退回钱包
            </div>
            <div>支付方式</div>
            <div class="mt-[5px]">
                <a-radio
                    :disabled="payInfo.user_money < payInfo?.total_money"
                    :default-checked="payInfo.user_money >= payInfo?.total_money">
                    钱包余额
                    (可用￥{{ payInfo?.user_money?.toFixed(2) }})
                </a-radio>
            </div>
            <div v-if="payInfo.user_money < payInfo?.total_money" class="text-[12px] text-[#86909C] pl-[20px]">
                *余额不足本次任务所需，请充值后再进行支付
            </div>
            <go-pay @success="">
                <a-button class="mt-[20px]" type="primary">去充值
                </a-button>
            </go-pay>
        </div>
    </a-modal>
</template>

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

<style scoped lang="scss">

</style>