106 lines
3.4 KiB
Vue
106 lines
3.4 KiB
Vue
<script setup>
|
||
import {computed, ref} from "vue";
|
||
import GoPay from "./GoPay.vue";
|
||
import Api from "../../api/index.js";
|
||
|
||
const id = ref(null);
|
||
const payInfo = ref(null);
|
||
const refreshKey = ref(0);
|
||
const visible = ref(false);
|
||
const emits = defineEmits(['close']);
|
||
let successFun = () => {
|
||
};
|
||
const open = (options) => {
|
||
const {props, success} = options;
|
||
successFun = success;
|
||
id.value = props.id;
|
||
payInfo.value = props.payInfo;
|
||
visible.value = true;
|
||
}
|
||
const close = () => {
|
||
visible.value = false;
|
||
}
|
||
|
||
const success = () => {
|
||
successFun && successFun.apply();
|
||
}
|
||
|
||
const update = async () => {
|
||
const {data} = await Api.merchant.startTask({id: id.value});
|
||
Object.assign(payInfo.value, data);
|
||
refreshKey.value++;
|
||
}
|
||
|
||
const isDis = computed(() => payInfo.value.user_money >= payInfo.value.total_money);
|
||
|
||
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
|
||
:key="refreshKey"
|
||
:disabled="payInfo.user_money < payInfo?.total_money"
|
||
:default-checked="isDis">
|
||
钱包余额
|
||
(可用￥{{ 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="update">
|
||
<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>
|