update

src/components/Pay/Alipay.vue

@@ -0,0 +1,101 @@
+<script setup>
+import {reactive, ref} from "vue";
+import {Message} from "@arco-design/web-vue";
+import Api from "../../api/index.ts";
+
+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>

src/components/Pay/PayTask.vue

@@ -0,0 +1,89 @@
+<script setup>
+import {ref} from "vue";
+
+const payInfo = ref(null);
+const visible = ref(false);
+const emits = defineEmits(['close']);
+let successFun = () => {
+};
+const open = (options) => {
+    const {props, success} = options;
+    successFun = success;
+    console.log('?????', options)
+    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">
+            <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 class="text-[12px] text-[#86909C] pl-[20px]">
+                *余额不足本次任务所需，请充值后再进行支付
+            </div>
+            <a-button class="mt-[20px]" type="primary">去充值</a-button>
+        </div>
+    </a-modal>
+</template>
+
+<style lang="scss">
+#PayTask-Modal {
+    .arco-modal-body {
+        padding: 0;
+    }
+}
+</style>
+
+<style scoped lang="scss">
+
+</style>