赵忠林
ec252beb4b
- 创建 .editorconfig 文件统一代码风格配置 - 配置 .eslintrc 使用 taro/react 规则集 - 完善 .gitignore 忽略编译产物和敏感文件 - 添加 admin/article/add 页面实现文章管理功能 - 添加 dealer/apply/add 页面实现经销商申请功能 - 添加 dealer/bank/add 页面实现银行卡管理功能 - 添加 dealer/customer/add 页面实现客户管理功能 - 添加 user/address/add 页面实现用户地址管理功能 - 添加 user/chat/message/add 页面实现消息功能 - 添加 user/gift/add 页面实现礼品管理功能 - 配置各页面导航栏标题和样式 - 实现表单验证和数据提交功能 - 集成图片上传和头像选择功能 - 添加日期选择和数据校验逻辑 - 实现编辑和新增模式切换 - 集成用户权限和角色管理功能
374 lines
10 KiB
TypeScript
374 lines
10 KiB
TypeScript
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;
|