fix: add close button to withdrawal confirmation modal

web/src/mobile/styles.css

@@ -2715,9 +2715,29 @@ body {
   }
 }
 .m-withdraw-confirm {
+  position: relative;
   width: min(90vw, 420px);
   padding: 22px;
 }
+.m-withdraw-confirm .m-withdraw-close {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  display: grid;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  border: 0;
+  border-radius: 50%;
+  background: transparent;
+  color: var(--m-muted);
+  cursor: pointer;
+  font-size: 22px;
+}
+.m-withdraw-confirm .m-withdraw-close:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
 .m-withdraw-confirm h2 {
   margin: 0 0 12px;
   text-align: center;

web/src/mobile/views/WithdrawalView.vue

@@ -48,6 +48,9 @@
       @after-enter="focusTradePassword"
     >
       <form v-if="showTradePasswordSetup" class="m-withdraw-confirm m-card" @submit.prevent="setTradePassword">
+        <button class="m-withdraw-close" type="button" aria-label="关闭弹窗" :disabled="submitting" @click="closeConfirm">
+          <n-icon :component="CloseOutline" />
+        </button>
         <h2>设置支付密码</h2>
         <p class="m-withdraw-password-notice">设置完成后，请返回确认申请。</p>
         <label>
@@ -75,6 +78,9 @@
         <button class="m-outline-btn m-withdraw-back-btn" type="button" @click="showTradePasswordSetup = false">返回确认申请</button>
       </form>
       <form v-else class="m-withdraw-confirm m-card" @submit.prevent="submitWithdrawal">
+        <button class="m-withdraw-close" type="button" aria-label="关闭弹窗" :disabled="submitting" @click="closeConfirm">
+          <n-icon :component="CloseOutline" />
+        </button>
         <h2>确认取出</h2>
         <div><span>申请金额</span><b>{{ money(quote?.request_amount) }}</b></div>
         <div><span>手续费</span><b>{{ money(quote?.fee_amount) }}</b></div>
@@ -104,7 +110,7 @@
 <script setup lang="ts">
   import { computed, nextTick, onMounted, reactive, ref } from 'vue';
   import { useRouter } from 'vue-router';
-  import { ChevronForwardOutline } from '@vicons/ionicons5';
+  import { ChevronForwardOutline, CloseOutline } from '@vicons/ionicons5';
   import PageHeader from '../components/PageHeader.vue';
   import AsyncState from '../components/AsyncState.vue';
   import { MobileApiError, errorText, idempotencyKey, money, request } from '../api';
@@ -154,6 +160,16 @@
     setupForm.loginPassword = '';
     showTradePasswordSetup.value = true;
   }
+  function closeConfirm() {
+    if (submitting.value) return;
+    showConfirm.value = false;
+    showTradePasswordSetup.value = false;
+    actionError.value = '';
+    setupError.value = '';
+    form.tradePassword = '';
+    setupForm.newTradePassword = '';
+    setupForm.loginPassword = '';
+  }
   async function setTradePassword() {
     if (submitting.value) return;
     setupError.value = '';