update

src/pages/merchant/components/Alipay.vue

@@ -0,0 +1,77 @@
+<script setup>
+import {ref} from "vue";
+
+const visible = ref(false);
+</script>
+
+<template>
+    <a-button type="primary" @click="visible=true">立即充值</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))]">200元</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>