fix: edit existing payment account in binding form

web/src/mobile/views/FormView.vue

@@ -50,20 +50,9 @@
       </div>
     </AsyncState>
 
-    <div v-else-if="formType === 'bank'">
-    <section v-if="paymentAccounts.length" class="m-bound-accounts">
-      <h2>已绑定的取出信息</h2>
-      <div v-for="account in paymentAccounts" :key="account.id" class="m-bound-account m-card">
-        <p v-if="account.masked" class="m-bound-account-hint">历史资料仅展示脱敏信息，重新绑定后可查看完整资料</p>
-        <div><span>姓名</span><strong>{{ account.holder_name }}</strong></div>
-        <div><span>身份证号</span><strong>{{ account.identity_no || '未填写' }}</strong></div>
-        <div><span>银行名</span><strong>{{ account.bank_name }}</strong></div>
-        <div><span>银行账户</span><strong>{{ account.account_no }}</strong></div>
-        <div v-if="account.digital_rmb_code"><span>人民币编码</span><strong>{{ account.digital_rmb_code }}</strong></div>
-      </div>
-    </section>
+    <AsyncState v-else-if="formType === 'bank'" :loading="bankLoading" :error="bankLoadError" @retry="loadPaymentAccounts">
     <form class="m-plain-form m-bank-form" @submit.prevent="saveBank">
-      <h2 v-if="paymentAccounts.length" class="m-bank-form-title">添加银行卡</h2>
+      <p v-if="existingAccount?.masked" class="m-bound-account-hint">历史资料无法完整读取，请重新填写姓名、身份证号和银行卡号后保存</p>
       <label
         ><span>姓名</span><input v-model.trim="bank.holder_name" placeholder="请输入姓名"
       /></label>
@@ -92,7 +81,7 @@
         <label class="m-qr-upload">
           <input type="file" accept="image/jpeg,image/png,image/webp" @change="uploadQRCode('wechat', $event)" />
           <img v-if="qr.wechat.url" :src="safeImage(qr.wechat.url)" alt="微信二维码" />
-          <span v-else><n-icon :component="CameraOutline" /><b>{{ qr.wechat.uploading ? '上传中...' : '点击上传' }}</b></span>
+          <span v-else><n-icon :component="CameraOutline" /><b>{{ qr.wechat.uploading ? '上传中...' : bank.wechat_qr_attachment_id ? '已上传，点击更换' : '点击上传' }}</b></span>
         </label>
       </section>
       <section class="m-qr-field">
@@ -100,15 +89,15 @@
         <label class="m-qr-upload">
           <input type="file" accept="image/jpeg,image/png,image/webp" @change="uploadQRCode('alipay', $event)" />
           <img v-if="qr.alipay.url" :src="safeImage(qr.alipay.url)" alt="支付宝二维码" />
-          <span v-else><n-icon :component="CameraOutline" /><b>{{ qr.alipay.uploading ? '上传中...' : '点击上传' }}</b></span>
+          <span v-else><n-icon :component="CameraOutline" /><b>{{ qr.alipay.uploading ? '上传中...' : bank.alipay_qr_attachment_id ? '已上传，点击更换' : '点击上传' }}</b></span>
         </label>
       </section>
       <p v-if="error" class="m-form-error">{{ error }}</p
-      ><button class="m-primary-btn" :disabled="submitting">{{
-        submitting ? '提交中...' : '确认绑定'
+      ><button class="m-primary-btn" :disabled="submitting || qr.wechat.uploading || qr.alipay.uploading">{{
+        submitting ? '提交中...' : existingAccount ? '保存修改' : '确认绑定'
       }}</button>
     </form>
-    </div>
+    </AsyncState>
 
     <form
       v-else-if="formType === 'tradePassword'"
@@ -265,6 +254,8 @@
       String(route.meta.title || '')
   );
   const loading = ref(false);
+  const bankLoading = ref(false);
+  const bankLoadError = ref('');
   const submitting = ref(false);
   const error = ref('');
   const avatarError = ref('');
@@ -279,9 +270,11 @@
     digital_rmb_code: string;
     wechat_qr_url: string;
     alipay_qr_url: string;
+    wechat_qr_attachment_id: number;
+    alipay_qr_attachment_id: number;
     masked: boolean;
   }
-  const paymentAccounts = ref<PaymentAccountDetail[]>([]);
+  const existingAccount = ref<PaymentAccountDetail | null>(null);
   let paymentAccountsLoadVersion = 0;
   const content = ref<any>();
   const resetPassword = ref('');
@@ -346,13 +339,33 @@
   }
   async function loadPaymentAccounts() {
     const version = ++paymentAccountsLoadVersion;
+    bankLoading.value = true;
+    bankLoadError.value = '';
     error.value = '';
-    paymentAccounts.value = [];
+    existingAccount.value = null;
+    Object.assign(bank, { bank_name: '', holder_name: '', identity_no: '', account_no: '', digital_rmb_code: '',
+      wechat_qr_attachment_id: 0, alipay_qr_attachment_id: 0 });
+    qr.wechat.url = '';
+    qr.alipay.url = '';
     try {
       const accounts = await request<PaymentAccountDetail[]>({ url: '/v1/payment-accounts/details' });
-      if (version === paymentAccountsLoadVersion && formType.value === 'bank') paymentAccounts.value = accounts;
+      if (version !== paymentAccountsLoadVersion || formType.value !== 'bank') return;
+      const account = accounts[0];
+      if (!account) return;
+      existingAccount.value = account;
+      bank.bank_name = account.bank_name;
+      bank.wechat_qr_attachment_id = account.wechat_qr_attachment_id;
+      bank.alipay_qr_attachment_id = account.alipay_qr_attachment_id;
+      if (!account.masked) {
+        bank.holder_name = account.holder_name;
+        bank.identity_no = account.identity_no;
+        bank.account_no = account.account_no;
+        bank.digital_rmb_code = account.digital_rmb_code;
+      }
     } catch (err) {
-      if (version === paymentAccountsLoadVersion && formType.value === 'bank') error.value = errorText(err);
+      if (version === paymentAccountsLoadVersion && formType.value === 'bank') bankLoadError.value = errorText(err);
+    } finally {
+      if (version === paymentAccountsLoadVersion) bankLoading.value = false;
     }
   }
   async function saveBank() {
@@ -381,8 +394,9 @@
     }
     submitting.value = true;
     try {
-      await request({ url: '/v1/payment-accounts', method: 'POST', data: bank });
-      window.$message?.success('银行卡绑定成功');
+      await request({ url: '/v1/payment-accounts', method: existingAccount.value ? 'PUT' : 'POST',
+        data: { ...bank, id: existingAccount.value?.id } });
+      window.$message?.success(existingAccount.value ? '绑定信息已更新' : '银行卡绑定成功');
       await router.replace(route.query.from === 'profile' ? '/app/profile/info' : '/app/profile/withdrawal');
     } catch (err) {
       error.value = errorText(err);