优化移动端收款账号管理

frontend/src/features/wallet/components/PaymentAccountDialog.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { ElMessage } from 'element-plus'
 import { Upload, Delete, Loading } from '@element-plus/icons-vue'
+import alipayReceiveQrExample from '@/assets/alipay-receive-qr-example.png'
 import wechatReceiveQrExample from '@/assets/wechat-receive-qr-example.png'
 
 import {
@@ -33,6 +34,39 @@ const form = ref<CreatePaymentAccountRequest>({
   bank_branch: '',
   certificate_urls: [],
 })
+const receiveQrTip = computed(() => {
+  if (form.value.account_type === 'alipay') {
+    return {
+      title: '支付宝收款二维码上传提醒',
+      lines: [
+        '请在支付宝收钱码页面保存收钱码，上传保存后的二维码图片。',
+        '不要上传收钱码截图、聊天截图或带页面背景的整屏截图。',
+      ],
+      image: alipayReceiveQrExample,
+      alt: '支付宝收款二维码示例',
+      label: '支付宝收款二维码',
+      hint: '请上传保存后的支付宝收款二维码图片（可选，最多3张）',
+    }
+  }
+  if (form.value.account_type === 'wechat') {
+    return {
+      title: '微信收款二维码上传提醒',
+      lines: [
+        '请在微信收款码页面点击保存收款码，上传保存后的二维码图片。',
+        '不要上传收款码截图、聊天截图或带页面背景的整屏截图。',
+      ],
+      image: wechatReceiveQrExample,
+      alt: '微信收款二维码示例',
+      label: '微信收款二维码',
+      hint: '请上传保存后的微信收款二维码图片（可选，最多3张）',
+    }
+  }
+  return null
+})
+const certificateLabel = computed(() => receiveQrTip.value?.label || '凭证截图')
+const certificateHint = computed(
+  () => receiveQrTip.value?.hint || '可上传收款码截图等凭证（可选，最多3张）'
+)
 
 watch(
   () => props.modelValue,
@@ -196,21 +230,16 @@ function removeImage(index: number) {
         </el-form-item>
       </template>
 
-      <el-form-item :label="form.account_type === 'wechat' ? '收款二维码' : '凭证截图'">
-        <div v-if="form.account_type === 'wechat'" class="wechat-qr-tip">
+      <el-form-item :label="certificateLabel">
+        <div v-if="receiveQrTip" class="receive-qr-tip">
           <div>
-            <strong>微信收款二维码上传提醒</strong>
-            <p>请在微信收款码页面点击保存收款码，上传保存后的二维码图片。</p>
-            <p>不要上传收款码截图、聊天截图或带页面背景的整屏截图。</p>
+            <strong>{{ receiveQrTip.title }}</strong>
+            <p v-for="line in receiveQrTip.lines" :key="line">{{ line }}</p>
           </div>
-          <img :src="wechatReceiveQrExample" alt="微信收款二维码示例" />
+          <img :src="receiveQrTip.image" :alt="receiveQrTip.alt" />
         </div>
         <div style="font-size: 12px; color: #999; margin-bottom: 8px">
-          {{
-            form.account_type === 'wechat'
-              ? '请上传保存后的微信收款二维码图片（可选，最多3张）'
-              : '可上传收款码截图等凭证（可选，最多3张）'
-          }}
+          {{ certificateHint }}
         </div>
         <div class="certificate-upload">
           <div v-for="(url, index) in form.certificate_urls" :key="url" class="certificate-item">
@@ -284,7 +313,7 @@ function removeImage(index: number) {
   gap: 12px;
 }
 
-.wechat-qr-tip {
+.receive-qr-tip {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 128px;
   gap: 12px;
@@ -298,20 +327,20 @@ function removeImage(index: number) {
   color: #92400e;
 }
 
-.wechat-qr-tip strong {
+.receive-qr-tip strong {
   display: block;
   margin-bottom: 6px;
   color: #c2410c;
   font-size: 13px;
 }
 
-.wechat-qr-tip p {
+.receive-qr-tip p {
   margin: 0;
   font-size: 12px;
   line-height: 1.6;
 }
 
-.wechat-qr-tip img {
+.receive-qr-tip img {
   display: block;
   width: 128px;
   border-radius: 8px;