feat(credit): 重构小程序端客户管理功能

- 优化代码结构，使用函数组件和Hooks替代类组件
- 实现表单验证和错误处理机制
- 添加加载状态和提交防抖保护
- 增加城市选择和文件上传功能
- 实现推荐状态切换和长按删除功能
- 统一错误提示和用户反馈机制
- 优化页面标题和导航体验

src/credit/creditMpCustomer/add.tsx

@@ -1,98 +1,136 @@
-import {useEffect, useState, useRef} from "react";
-import {useRouter} from '@tarojs/taro'
-import {Button, Loading, CellGroup, Input, TextArea, Form} from '@nutui/nutui-react-taro'
-import Taro from '@tarojs/taro'
-import {View} from '@tarojs/components'
-import {CreditMpCustomer} from "@/api/credit/creditMpCustomer/model";
-import {getCreditMpCustomer, listCreditMpCustomer, updateCreditMpCustomer, addCreditMpCustomer} from "@/api/credit/creditMpCustomer";
+import { useEffect, useMemo, useRef, useState } from 'react'
+import Taro, { useRouter } from '@tarojs/taro'
+import { View } from '@tarojs/components'
+import { Button, CellGroup, Form, Input, Loading, TextArea } from '@nutui/nutui-react-taro'
+
+import type { CreditMpCustomer } from '@/api/credit/creditMpCustomer/model'
+import { addCreditMpCustomer, getCreditMpCustomer, updateCreditMpCustomer } from '@/api/credit/creditMpCustomer'
+
+export default function CreditMpCustomerAddPage() {
+  const { params } = useRouter()
+  const id = useMemo(() => {
+    const n = Number(params?.id)
+    return Number.isFinite(n) && n > 0 ? n : undefined
+  }, [params?.id])
 
-const AddCreditMpCustomer = () => {
-  const {params} = useRouter();
-  const [loading, setLoading] = useState<boolean>(true)
-  const [FormData, setFormData] = useState<CreditMpCustomer>({})
   const formRef = useRef<any>(null)
-
-  const reload = async () => {
-    if (params.id) {
-      const data = await getCreditMpCustomer(Number(params.id))
-      setFormData(data)
-    } else {
-      setFormData({})
-    }
-  }
-
-  // 提交表单
-  const submitSucceed = async (values: any) => {
-    try {
-      if (params.id) {
-        // 编辑模式
-        await updateCreditMpCustomer({
-          ...values,
-          id: Number(params.id)
-        })
-      } else {
-        // 新增模式
-        await addCreditMpCustomer(values)
-      }
-
-      Taro.showToast({
-        title: `操作成功`,
-        icon: 'success'
-      })
-
-      setTimeout(() => {
-        return Taro.navigateBack()
-      }, 1000)
-    } catch (error) {
-      Taro.showToast({
-        title: `操作失败`,
-        icon: 'error'
-      });
-    }
-  }
-
-  const submitFailed = (error: any) => {
-    console.log(error, 'err...')
-  }
+  const [loading, setLoading] = useState(true)
+  const [initialValues, setInitialValues] = useState<Partial<CreditMpCustomer>>({})
+  const [submitting, setSubmitting] = useState(false)
 
   useEffect(() => {
-    reload().then(() => {
-      setLoading(false)
-    })
-  }, []);
+    Taro.setNavigationBarTitle({ title: id ? '编辑小程序端客户' : '新增小程序端客户' })
+  }, [id])
+
+  useEffect(() => {
+    const run = async () => {
+      setLoading(true)
+      try {
+        if (id) {
+          const data = await getCreditMpCustomer(id)
+          setInitialValues(data || {})
+        } else {
+          setInitialValues({})
+        }
+      } catch (e) {
+        console.error('加载失败:', e)
+        Taro.showToast({ title: (e as any)?.message || '加载失败', icon: 'none' })
+      } finally {
+        setLoading(false)
+      }
+    }
+    run()
+  }, [id])
+
+  const onFinish = async (values: any) => {
+    if (submitting) return
+    setSubmitting(true)
+    try {
+      if (id) {
+        await updateCreditMpCustomer({ ...values, id })
+      } else {
+        await addCreditMpCustomer(values)
+      }
+      Taro.showToast({ title: '操作成功', icon: 'success' })
+      setTimeout(() => Taro.navigateBack(), 800)
+    } catch (e) {
+      console.error('保存失败:', e)
+      Taro.showToast({ title: (e as any)?.message || '操作失败', icon: 'none' })
+    } finally {
+      setSubmitting(false)
+    }
+  }
 
   if (loading) {
-    return <Loading className={'px-2'}>加载中</Loading>
+    return <Loading className="px-2">加载中</Loading>
   }
 
   return (
-    <>
+    <View className="bg-gray-50 min-h-screen px-3 pt-3 pb-6">
       <Form
         ref={formRef}
         divider
-        initialValues={FormData}
+        initialValues={initialValues}
         labelPosition="left"
-        onFinish={(values) => submitSucceed(values)}
-        onFinishFailed={(errors) => submitFailed(errors)}
+        onFinish={onFinish}
         footer={
-          <div
-            style={{
-              display: 'flex',
-              justifyContent: 'center',
-              width: '100%'
-            }}
-          >
-            <Button
-              nativeType="submit"
-              type="success"
-              size="large"
-              className={'w-full'}
-              block
-            >
-              {params.id ? '更新' : '保存'}
-            </Button>
-          </div>
+          <Button nativeType="submit" type="primary" size="large" loading={submitting} block>
+            {id ? '更新' : '保存'}
+          </Button>
         }
       >
-        <CellGroup style={{padding: '4px 0'}}>
-          <Form.Item name="toUser" label="拖欠方" initialValue={FormData.toUser} required>
+        <CellGroup>
+          <Form.Item
+            name="toUser"
+            label="拖欠方"
+            required
+            rules={[{ required: true, message: '请输入拖欠方' }]}
+          >
+            <Input placeholder="请输入拖欠方/付款方名称" maxLength={50} />
+          </Form.Item>
+
+          <Form.Item
+            name="price"
+            label="拖欠金额"
+            required
+            rules={[{ required: true, message: '请输入拖欠金额' }]}
+          >
+            <Input placeholder="请输入拖欠金额" type="number" />
+          </Form.Item>
+
+          <Form.Item
+            name="years"
+            label="拖欠年数"
+            required
+            rules={[{ required: true, message: '请输入拖欠年数' }]}
+          >
+            <Input placeholder="请输入拖欠年数" type="number" />
+          </Form.Item>
+
+          <Form.Item name="province" label="省份">
+            <Input placeholder="可选" maxLength={20} />
+          </Form.Item>
+          <Form.Item name="city" label="城市">
+            <Input placeholder="可选" maxLength={20} />
+          </Form.Item>
+          <Form.Item name="region" label="辖区">
+            <Input placeholder="可选" maxLength={20} />
+          </Form.Item>
+
+          <Form.Item name="url" label="链接">
+            <Input placeholder="可选" maxLength={200} />
+          </Form.Item>
+
+          <Form.Item name="files" label="文件">
+            <TextArea placeholder="可选（可填文件URL或JSON）" maxLength={1000} rows={3} />
+          </Form.Item>
+
+          <Form.Item name="comments" label="备注">
+            <TextArea placeholder="可选" maxLength={200} showCount rows={3} />
+          </Form.Item>
+        </CellGroup>
+      </Form>
+    </View>
+  )
+}
+