feat(user): 优化地址添加页面的地图定位功能
- 移除地图选点地址与收货地址的自动同步逻辑 - 改进地图选点地址解析,避免省市区字段重复显示 - 添加经纬度有效性校验,防止无效数值传递给位置选择器 - 将选择定位组件移至表单下方并重新排列布局 - 为收货人和手机号字段添加更严格的验证规则 - 保留地图定位功能的完整交互界面和错误处理
This commit is contained in:
@@ -250,16 +250,6 @@ const AddUserAddress = () => {
|
||||
}
|
||||
setSelectedLocation(next)
|
||||
|
||||
// 将地图选点的地址同步到“收货地址”,减少用户重复输入
|
||||
const nextDetailAddress = (() => {
|
||||
const addr = String(res.address || '').trim()
|
||||
const name = String(res.name || '').trim()
|
||||
if (!addr && !name) return ''
|
||||
if (!addr) return name
|
||||
if (!name) return addr
|
||||
return addr.includes(name) ? addr : `${addr} ${name}`
|
||||
})()
|
||||
|
||||
// 尝试从地图返回的 address 文本解析省市区(best-effort)
|
||||
const regionResult = res?.provinceName || res?.cityName || res?.adName
|
||||
? {
|
||||
@@ -269,6 +259,29 @@ const AddUserAddress = () => {
|
||||
}
|
||||
: parseRegion(String(res.address || ''))
|
||||
|
||||
// 将地图选点的地址同步到“收货地址”(不额外拼接省市区字段,省市区由独立字段保存)
|
||||
const nextDetailAddress = (() => {
|
||||
const rawAddr = String(res.address || '').trim()
|
||||
const name = String(res.name || '').trim()
|
||||
|
||||
const province = String(regionResult?.province || '').trim()
|
||||
const city = String(regionResult?.city || '').trim()
|
||||
const region = String(regionResult?.region || '').trim()
|
||||
|
||||
// 选择定位返回的 address 往往包含省市区,这里尽量剥离掉,避免和表单的省市区字段重复
|
||||
let detail = rawAddr
|
||||
for (const part of [province, city, region]) {
|
||||
if (part) detail = detail.replace(part, '')
|
||||
}
|
||||
detail = detail.replace(/[,,]+/g, ' ').replace(/\s+/g, ' ').trim()
|
||||
|
||||
const base = detail || rawAddr
|
||||
if (!base && !name) return ''
|
||||
if (!base) return name
|
||||
if (!name) return base
|
||||
return base.includes(name) ? base : `${base} ${name}`
|
||||
})()
|
||||
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
lng: next.lng,
|
||||
@@ -295,9 +308,11 @@ const AddUserAddress = () => {
|
||||
try {
|
||||
const initLat = selectedLocation?.lat ? Number(selectedLocation.lat) : undefined
|
||||
const initLng = selectedLocation?.lng ? Number(selectedLocation.lng) : undefined
|
||||
const latitude = typeof initLat === 'number' && Number.isFinite(initLat) ? initLat : undefined
|
||||
const longitude = typeof initLng === 'number' && Number.isFinite(initLng) ? initLng : undefined
|
||||
const res = await Taro.chooseLocation({
|
||||
latitude: Number.isFinite(initLat as number) ? (initLat as number) : undefined,
|
||||
longitude: Number.isFinite(initLng as number) ? (initLng as number) : undefined
|
||||
latitude,
|
||||
longitude
|
||||
})
|
||||
applyChosenLocation(res)
|
||||
} catch (e: any) {
|
||||
@@ -452,7 +467,43 @@ const AddUserAddress = () => {
|
||||
</div>
|
||||
</CellGroup>
|
||||
<View className={'bg-gray-100 h-3'}></View>
|
||||
<CellGroup className={'px-3'}>
|
||||
<CellGroup style={{padding: '4px 0'}}>
|
||||
<Form.Item
|
||||
name="name"
|
||||
label="收货人"
|
||||
initialValue={FormData.name}
|
||||
rules={[{ required: true, message: '请输入收货人姓名' }]}
|
||||
required
|
||||
>
|
||||
<Input placeholder="请输入收货人姓名" maxLength={10}/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="phone"
|
||||
label="手机号"
|
||||
initialValue={FormData.phone}
|
||||
rules={[
|
||||
{ required: true, message: '请输入手机号' },
|
||||
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号' }
|
||||
]}
|
||||
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>
|
||||
<Cell
|
||||
title="选择定位"
|
||||
description={
|
||||
@@ -473,30 +524,6 @@ const AddUserAddress = () => {
|
||||
onClick={chooseGeoLocation}
|
||||
/>
|
||||
</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
|
||||
|
||||
Reference in New Issue
Block a user