完善支付宝提现收款码

apps/frontend/src/pages/worker/WorkerProfilePage.tsx

@@ -49,6 +49,7 @@ import {
   deleteWorkerSession,
   fetchWorkerWalletLedgers,
   logoutWorker,
+  saveWorkerAlipayWithdrawalQrCode,
 } from '@/services/worker'
 import type {
   UploadedFile,
@@ -80,9 +81,14 @@ type WithdrawalAccountFormValues = {
   accountChannel?: string
   accountName?: string
   accountNo?: string
+  alipayQrCodeImages?: UploadedFile[]
   wechatQrCodeImages?: UploadedFile[]
 }
 
+type AlipayQrCodeFormValues = {
+  alipayQrCodeImages?: UploadedFile[]
+}
+
 type PasswordFormValues = {
   currentPassword?: string
   newPassword?: string
@@ -106,6 +112,7 @@ export default function WorkerProfilePage() {
   const [rechargeOpen, setRechargeOpen] = useState(false)
   const [withdrawOpen, setWithdrawOpen] = useState(false)
   const [withdrawalAccountOpen, setWithdrawalAccountOpen] = useState(false)
+  const [alipayQrCodeOpen, setAlipayQrCodeOpen] = useState(false)
   const [passwordOpen, setPasswordOpen] = useState(false)
   const [contactOpen, setContactOpen] = useState(false)
   const [devicesOpen, setDevicesOpen] = useState(false)
@@ -116,6 +123,7 @@ export default function WorkerProfilePage() {
   const [rechargeForm] = Form.useForm<RechargeFormValues>()
   const [withdrawForm] = Form.useForm<WithdrawFormValues>()
   const [withdrawalAccountForm] = Form.useForm<WithdrawalAccountFormValues>()
+  const [alipayQrCodeForm] = Form.useForm<AlipayQrCodeFormValues>()
   const [passwordForm] = Form.useForm<PasswordFormValues>()
   const selectedWithdrawChannel = Form.useWatch('accountChannel', withdrawForm)
   const selectedWithdrawalAccountChannel = Form.useWatch('accountChannel', withdrawalAccountForm)
@@ -141,6 +149,9 @@ export default function WorkerProfilePage() {
   const selectedWithdrawalAccount = withdrawalAccounts.find(
     (account) => account.accountChannel === selectedWithdrawChannel,
   )
+  const alipayWithdrawalAccount = withdrawalAccounts.find(
+    (account) => account.accountChannel === 'alipay',
+  )
   const canUseFinanceActions = worker?.status === 'active'
 
   async function copyInviteCode() {
@@ -233,6 +244,11 @@ export default function WorkerProfilePage() {
       openWithdrawalAccountModal()
       return
     }
+    if (alipayWithdrawalAccount && !alipayWithdrawalAccount.alipayQrCodeImage) {
+      message.warning('请先补充支付宝收款二维码')
+      openAlipayQrCodeModal()
+      return
+    }
     withdrawForm.setFieldValue('accountChannel', withdrawalAccounts[0].accountChannel)
     setWithdrawOpen(true)
   }
@@ -249,6 +265,19 @@ export default function WorkerProfilePage() {
     setWithdrawalAccountOpen(true)
   }
 
+  function openAlipayQrCodeModal() {
+    if (!alipayWithdrawalAccount) {
+      openWithdrawalAccountModal()
+      return
+    }
+    alipayQrCodeForm.setFieldsValue({
+      alipayQrCodeImages: alipayWithdrawalAccount.alipayQrCodeImage
+        ? [alipayWithdrawalAccount.alipayQrCodeImage]
+        : [],
+    })
+    setAlipayQrCodeOpen(true)
+  }
+
   async function submitRecharge(values: RechargeFormValues) {
     setSubmittingRecharge(true)
     try {
@@ -301,6 +330,7 @@ export default function WorkerProfilePage() {
         accountChannel: String(values.accountChannel || ''),
         accountName: String(values.accountName || '').trim(),
         accountNo: String(values.accountNo || '').trim(),
+        alipayQrCodeImages: values.alipayQrCodeImages || [],
         wechatQrCodeImages: values.wechatQrCodeImages || [],
       })
       message.success('提现信息已添加，该方式后续修改请联系客服处理')
@@ -316,6 +346,20 @@ export default function WorkerProfilePage() {
     }
   }
 
+  async function submitAlipayQrCode(values: AlipayQrCodeFormValues) {
+    try {
+      await saveWorkerAlipayWithdrawalQrCode({
+        alipayQrCodeImages: values.alipayQrCodeImages || [],
+      })
+      message.success('支付宝收款二维码已保存')
+      setAlipayQrCodeOpen(false)
+      alipayQrCodeForm.resetFields()
+      await refreshAll()
+    } catch (error) {
+      message.error(error instanceof Error ? error.message : '保存支付宝收款二维码失败')
+    }
+  }
+
   async function submitPasswordChange(values: PasswordFormValues) {
     setSubmittingPassword(true)
     try {
@@ -673,6 +717,22 @@ export default function WorkerProfilePage() {
                   </div>
                   <span>邀请好友</span>
                 </button>
+                {alipayWithdrawalAccount && !alipayWithdrawalAccount.alipayQrCodeImage ? (
+                  <button
+                    type="button"
+                    className="worker-profile-mobile-tool-item"
+                    disabled={!canUseFinanceActions}
+                    onClick={openAlipayQrCodeModal}
+                  >
+                    <div
+                      className="worker-profile-mobile-tool-icon"
+                      style={{ background: '#f5f3ff', color: '#7c3aed' }}
+                    >
+                      <BankOutlined />
+                    </div>
+                    <span>补充支付宝收款码</span>
+                  </button>
+                ) : null}
                 <button
                   type="button"
                   className="worker-profile-mobile-tool-item"
@@ -1152,6 +1212,15 @@ export default function WorkerProfilePage() {
                       添加提现信息
                     </Button>
                   ) : null}
+                  {alipayWithdrawalAccount && !alipayWithdrawalAccount.alipayQrCodeImage ? (
+                    <Button
+                      icon={<BankOutlined />}
+                      disabled={!canUseFinanceActions}
+                      onClick={openAlipayQrCodeModal}
+                    >
+                      补充支付宝收款码
+                    </Button>
+                  ) : null}
                   <Button icon={<LockOutlined />} onClick={() => setPasswordOpen(true)}>
                     修改密码
                   </Button>
@@ -1234,10 +1303,14 @@ export default function WorkerProfilePage() {
                                     <Typography.Text type="secondary">
                                       {account.accountChannel === 'wechat'
                                         ? '已上传收款二维码'
-                                        : account.accountNoMasked}
+                                        : `${account.accountNoMasked} / ${
+                                            account.alipayQrCodeImage
+                                              ? '已上传收款二维码'
+                                              : '未上传收款二维码'
+                                          }`}
                                     </Typography.Text>
                                     <Typography.Text type="secondary">
-                                      已锁定，修改请联系客服
+                                      收款人姓名和账号已锁定
                                     </Typography.Text>
                                   </Space>
                                 ))}
@@ -1533,7 +1606,7 @@ export default function WorkerProfilePage() {
         <Alert
           showIcon
           type="warning"
-          message="支付宝和微信可分别添加一次；每种方式添加后均无法自行修改，如需修改请联系客服。"
+          message="支付宝和微信可分别添加一次；收款人姓名和账号添加后不可自行修改。历史支付宝账户缺少二维码时，仅可补充一次。"
           style={{ marginBottom: 16 }}
         />
         <Form form={withdrawalAccountForm} layout="vertical" onFinish={submitWithdrawalAccount}>
@@ -1570,17 +1643,54 @@ export default function WorkerProfilePage() {
               <ImageUpload scene="worker-withdrawal-wechat-qr" scope="worker" maxCount={1} />
             </Form.Item>
           ) : (
-            <Form.Item
-              label="支付宝账号"
-              name="accountNo"
-              rules={[{ required: true, message: '请输入支付宝账号' }]}
-            >
-              <Input placeholder="请输入支付宝账号" />
-            </Form.Item>
+            <>
+              <Form.Item
+                label="支付宝账号"
+                name="accountNo"
+                rules={[{ required: true, message: '请输入支付宝账号' }]}
+              >
+                <Input placeholder="请输入支付宝账号" />
+              </Form.Item>
+              <Form.Item
+                label="支付宝收款二维码"
+                name="alipayQrCodeImages"
+                rules={[{ required: true, message: '请上传支付宝收款二维码' }]}
+              >
+                <ImageUpload scene="worker-withdrawal-alipay-qr" scope="worker" maxCount={1} />
+              </Form.Item>
+            </>
           )}
         </Form>
       </Modal>
 
+      <Modal
+        title="补充支付宝收款二维码"
+        open={alipayQrCodeOpen}
+        width={isMobile ? '92%' : 500}
+        destroyOnHidden
+        onCancel={() => {
+          setAlipayQrCodeOpen(false)
+          alipayQrCodeForm.resetFields()
+        }}
+        onOk={() => alipayQrCodeForm.submit()}
+      >
+        <Alert
+          showIcon
+          type="info"
+          message="历史账户仅可补充一次支付宝收款二维码，保存后不可自行修改；已登记的收款人姓名和账号保持锁定。"
+          style={{ marginBottom: 16 }}
+        />
+        <Form form={alipayQrCodeForm} layout="vertical" onFinish={submitAlipayQrCode}>
+          <Form.Item
+            label="支付宝收款二维码"
+            name="alipayQrCodeImages"
+            rules={[{ required: true, message: '请上传支付宝收款二维码' }]}
+          >
+            <ImageUpload scene="worker-withdrawal-alipay-qr" scope="worker" maxCount={1} />
+          </Form.Item>
+        </Form>
+      </Modal>
+
       <Modal
         title="提现申请"
         open={withdrawOpen}