template-10550/src/user/address/add.tsx

import {useEffect, useState, useRef} from "react";
import {useRouter} from '@tarojs/taro'
import {Button, Loading, CellGroup, Input, TextArea, Form} from '@nutui/nutui-react-taro'
import {Scan, ArrowRight} from '@nutui/icons-react-taro'
import Taro from '@tarojs/taro'
import {View} from '@tarojs/components'
import {Address} from '@nutui/nutui-react-taro'
import {ShopUserAddress} from "@/api/shop/shopUserAddress/model";
import {getShopUserAddress, listShopUserAddress, updateShopUserAddress, addShopUserAddress} from "@/api/shop/shopUserAddress";
import RegionData from '@/api/json/regions-data.json';
import FixedButton from "@/components/FixedButton";

const AddUserAddress = () => {
  const {params} = useRouter();
  const [loading, setLoading] = useState<boolean>(true)
  const [text, setText] = useState<string>('')
  const [optionsDemo1, setOptionsDemo1] = useState([])
  const [visible, setVisible] = useState(false)
  const [FormData, setFormData] = useState<ShopUserAddress>({})
  const [inputText, setInputText] = useState<string>('')
  const formRef = useRef<any>(null)

  // 判断是编辑还是新增模式
  const isEditMode = !!params.id
  const addressId = params.id ? Number(params.id) : undefined

  const reload = async () => {
    // 整理地区数据
    setRegionData()

    // 如果是编辑模式，加载地址数据
    if (isEditMode && addressId) {
      try {
        const address = await getShopUserAddress(addressId)
        setFormData(address)
        // 设置所在地区
        setText(`${address.province} ${address.city} ${address.region}`)
      } catch (error) {
        console.error('加载地址失败:', error)
        Taro.showToast({
          title: '加载地址失败',
          icon: 'error'
        });
      }
    }
  }

  /**
   * 处理地区数据
   */
  function setRegionData() {
    // @ts-ignore
    setOptionsDemo1(RegionData?.map((a) => {
      return {
        value: a.label,
        text: a.label,
        children: a.children?.map((b) => {
          return {
            value: b.label,
            text: b.label,
            children: b.children?.map((c) => {
              return {
                value: c.label,
                text: c.label
              }
            })
          }
        })
      }
    }))
  }

  /**
   * 地址识别功能
   */
  const recognizeAddress = () => {
    if (!inputText.trim()) {
      Taro.showToast({
        title: '请输入要识别的文本',
        icon: 'none'
      });
      return;
    }

    try {
      const result = parseAddressText(inputText);

      // 更新表单数据
      const newFormData = {
        ...FormData,
        name: result.name || FormData.name,
        phone: result.phone || FormData.phone,
        address: result.address || FormData.address,
        province: result.province || FormData.province,
        city: result.city || FormData.city,
        region: result.region || FormData.region
      };

      setFormData(newFormData);

      // 更新地区显示文本
      if (result.province && result.city && result.region) {
        setText(`${result.province} ${result.city} ${result.region}`);
      }

      // 更新表单字段值
      if (formRef.current) {
        formRef.current.setFieldsValue(newFormData);
      }

      Taro.showToast({
        title: '识别成功',
        icon: 'success'
      });

      // 清空输入框
      setInputText('');

    } catch (error) {
      Taro.showToast({
        title: '识别失败，请检查文本格式',
        icon: 'none'
      });
    }
  };

  /**
   * 解析地址文本
   */
  const parseAddressText = (text: string) => {
    const result: any = {};

    // 手机号正则 (11位数字)
    const phoneRegex = /1[3-9]\d{9}/;
    const phoneMatch = text.match(phoneRegex);
    if (phoneMatch) {
      result.phone = phoneMatch[0];
    }

    // 姓名正则 (2-4个中文字符，通常在开头)
    const nameRegex = /^[\u4e00-\u9fa5]{2,4}/;
    const nameMatch = text.match(nameRegex);
    if (nameMatch) {
      result.name = nameMatch[0];
    }

    // 省市区识别
    const regionResult = parseRegion(text);
    if (regionResult) {
      result.province = regionResult.province;
      result.city = regionResult.city;
      result.region = regionResult.region;
    }

    // 详细地址提取 (去除姓名、手机号、省市区后的剩余部分)
    let addressText = text;
    if (result.name) {
      addressText = addressText.replace(result.name, '');
    }
    if (result.phone) {
      addressText = addressText.replace(result.phone, '');
    }
    if (result.province) {
      addressText = addressText.replace(result.province, '');
    }
    if (result.city) {
      addressText = addressText.replace(result.city, '');
    }
    if (result.region) {
      addressText = addressText.replace(result.region, '');
    }

    // 清理地址文本
    result.address = addressText.replace(/[，,。\s]+/g, '').trim();

    return result;
  };

  /**
   * 解析省市区
   */
  const parseRegion = (text: string) => {
    // @ts-ignore
    for (const province of RegionData) {
      if (text.includes(province.label)) {
        const result: any = { province: province.label };

        // 查找城市
        if (province.children) {
          for (const city of province.children) {
            if (text.includes(city.label)) {
              result.city = city.label;

              // 查找区县
              if (city.children) {
                for (const region of city.children) {
                  if (text.includes(region.label)) {
                    result.region = region.label;
                    return result;
                  }
                }
              }
              return result;
            }
          }
        }
        return result;
      }
    }
    return null;
  };

  // 提交表单
  const submitSucceed = async (values: any) => {
    try {
      // 准备提交的数据
      const submitData = {
        ...values,
        province: FormData.province,
        city: FormData.city,
        region: FormData.region,
        isDefault: true // 新增或编辑的地址都设为默认地址
      };

      // 如果是编辑模式，添加id
      if (isEditMode && addressId) {
        submitData.id = addressId;
      }

      // 先处理默认地址逻辑
      const defaultAddress = await listShopUserAddress({isDefault: true});
      if (defaultAddress && defaultAddress.length > 0) {
        // 如果当前编辑的不是默认地址，或者是新增地址，需要取消其他默认地址
        if (!isEditMode || (isEditMode && defaultAddress[0].id !== addressId)) {
          await updateShopUserAddress({
            ...defaultAddress[0],
            isDefault: false
          });
        }
      }

      // 执行新增或更新操作
      if (isEditMode) {
        await updateShopUserAddress(submitData);
      } else {
        await addShopUserAddress(submitData);
      }

      Taro.showToast({
        title: `${isEditMode ? '更新' : '保存'}成功`,
        icon: 'success'
      });

      setTimeout(() => {
        Taro.navigateBack();
      }, 1000);

    } catch (error) {
      console.error('保存失败:', error);
      Taro.showToast({
        title: `${isEditMode ? '更新' : '保存'}失败`,
        icon: 'error'
      });
    }
  }

  const submitFailed = (error: any) => {
    console.log(error, 'err...')
  }

  useEffect(() => {
    // 动态设置页面标题
    Taro.setNavigationBarTitle({
      title: isEditMode ? '编辑收货地址' : '新增收货地址'
    });

    reload().then(() => {
      setLoading(false)
    })
  }, [isEditMode]);

  if (loading) {
    return <Loading className={'px-2'}>加载中</Loading>
  }

  return (
    <>
      <Form
        ref={formRef}
        divider
        initialValues={FormData}
        labelPosition="left"
        onFinish={(values) => submitSucceed(values)}
        onFinishFailed={(errors) => submitFailed(errors)}
      >
        <CellGroup className={'px-3'}>
          <div
            style={{
              border: '1px dashed #22c55e',
              display: 'flex',
              alignItems: 'flex-end',
              justifyContent: 'space-between',
              padding: '4px',
              position: 'relative'
            }}>

            <TextArea
              style={{height: '100px'}}
              value={inputText}
              onChange={(value) => setInputText(value)}
              placeholder={'请粘贴或输入文本，点击"识别"自动识别收货人姓名、地址、电话'}
            />
            <Button
              icon={<Scan/>}
              style={{position: 'absolute', right: '10px', bottom: '10px'}}
              type="success"
              size={'small'}
              fill="dashed"
              onClick={recognizeAddress}
            >
              识别
            </Button>
          </div>
        </CellGroup>
        <View className={'bg-gray-100 h-3'}></View>
        <CellGroup style={{padding: '4px 0'}}>
          <Form.Item name="name" label="收货人" initialValue={FormData.name} required>
            <Input placeholder="请输入收货人姓名" maxLength={10}/>
          </Form.Item>
          <Form.Item name="phone" label="手机号" initialValue={FormData.phone} required>
            <Input placeholder="请输入手机号" maxLength={11}/>
          </Form.Item>
          <Form.Item
            label="所在地区"
            name="region"
            initialValue={FormData.region}
            rules={[{message: '请输入您的所在地区'}]}
            required
          >
            <div className={'flex justify-between items-center'} onClick={() => setVisible(true)}>
              <Input placeholder="选择所在地区" value={text} disabled/>
              <ArrowRight className={'text-gray-400'}/>
            </div>
          </Form.Item>
          <Form.Item name="address" label="收货地址" initialValue={FormData.address} required>
            <TextArea maxLength={50} placeholder="请输入详细收货地址"/>
          </Form.Item>
        </CellGroup>
      </Form>

      <Address
        visible={visible}
        options={optionsDemo1}
        title="选择地址"
        onChange={(value, _) => {
          setFormData({
            ...FormData,
            province: `${value[0]}`,
            city: `${value[1]}`,
            region: `${value[2]}`
          })
          setText(value.join(' '))
        }}
        onClose={() => setVisible(false)}
      />

      {/* 底部浮动按钮 */}
      <FixedButton text={isEditMode ? '更新地址' : '保存并使用'} onClick={submitSucceed} />
    </>
  );
};

export default AddUserAddress;