feat(address): 添加用户地址管理页面的定位功能

- 集成 Taro 地图选点功能,支持用户手动选择精确位置
- 新增地理位置权限处理逻辑,包括授权失败和用户取消的情况
- 实现经纬度信息在地址表单中的存储和回显功能
- 添加定位选择界面,展示已选择的位置信息
- 移除原有的实时定位功能,改为手动选择模式
- 更新地址表单提交逻辑以支持新的定位数据结构
```
This commit is contained in:
2026-02-09 17:15:18 +08:00
parent a1e1487d42
commit 8d2188b928
4 changed files with 256 additions and 132 deletions

View File

@@ -14,10 +14,3 @@
position: absolute; position: absolute;
z-index: 0; z-index: 0;
} }
/* 吸顶状态下的样式 */
.nutui-sticky--fixed {
.header-bg {
height: 100%;
}
}

View File

@@ -1,6 +1,6 @@
import {useEffect, useState} from "react"; import {useEffect, useState} from "react";
import Taro from '@tarojs/taro'; import Taro from '@tarojs/taro';
import {Button, Sticky, Popup, Cell, CellGroup} from '@nutui/nutui-react-taro' import {Button, Popup, Cell, CellGroup} from '@nutui/nutui-react-taro'
// import {TriangleDown} from '@nutui/icons-react-taro' // import {TriangleDown} from '@nutui/icons-react-taro'
import { NavBar} from '@nutui/nutui-react-taro' import { NavBar} from '@nutui/nutui-react-taro'
import {getUserInfo, getWxOpenId} from "@/api/layout"; import {getUserInfo, getWxOpenId} from "@/api/layout";
@@ -25,7 +25,6 @@ const Header = (_: any) => {
const [IsLogin, setIsLogin] = useState<boolean>(true) const [IsLogin, setIsLogin] = useState<boolean>(true)
const [statusBarHeight, setStatusBarHeight] = useState<number>() const [statusBarHeight, setStatusBarHeight] = useState<number>()
const [stickyStatus, setStickyStatus] = useState<boolean>(false)
const [userInfo] = useState<User>() const [userInfo] = useState<User>()
// 门店选择:用于首页展示“最近门店”,并在下单时写入订单 storeId // 门店选择:用于首页展示“最近门店”,并在下单时写入订单 storeId
@@ -291,12 +290,6 @@ const Header = (_: any) => {
}) })
} }
// 处理粘性布局状态变化
const onStickyChange = (isSticky: boolean) => {
setStickyStatus(isSticky)
console.log('Header 粘性状态:', isSticky ? '已固定' : '取消固定')
}
// 获取小程序系统信息 // 获取小程序系统信息
// const getSystemInfo = () => { // const getSystemInfo = () => {
// const systemInfo = Taro.getSystemInfoSync() // const systemInfo = Taro.getSystemInfoSync()
@@ -311,22 +304,16 @@ const Header = (_: any) => {
return ( return (
<> <>
<Sticky <View
threshold={0} className={'header-bg'}
onChange={onStickyChange}
style={{ style={{
zIndex: 1000, height: '180px',
backgroundColor: stickyStatus ? '#03605c' : 'transparent', paddingBottom: '12px',
transition: 'background-color 0.3s ease',
}} }}
> >
<View className={'header-bg'} style={{ <MySearch statusBarHeight={statusBarHeight} />
height: !stickyStatus ? '180px' : `${(statusBarHeight || 0) + 44}px`,
paddingBottom: !stickyStatus ? '12px' : '0px'
}}>
{/* 只在非吸顶状态下显示搜索框 */}
{!stickyStatus && <MySearch statusBarHeight={statusBarHeight} />}
</View> </View>
<NavBar <NavBar
style={{ style={{
marginTop: `${statusBarHeight}px`, marginTop: `${statusBarHeight}px`,
@@ -425,7 +412,6 @@ const Header = (_: any) => {
</CellGroup> </CellGroup>
</View> </View>
</Popup> </Popup>
</Sticky>
</> </>
) )
} }

View File

@@ -234,7 +234,7 @@ function Home() {
return ( return (
<> <>
{/* Header区域 - 现在由Header组件内部处理吸顶逻辑 */} {/* Header区域 */}
<Header /> <Header />
<View className="home-page"> <View className="home-page">

View File

@@ -1,6 +1,6 @@
import {useEffect, useState, useRef} from "react"; import {useEffect, useState, useRef} from "react";
import {useRouter} from '@tarojs/taro' import {useRouter} from '@tarojs/taro'
import {Button, Loading, CellGroup, Input, TextArea, Form} from '@nutui/nutui-react-taro' import {Button, Loading, CellGroup, Cell, Input, TextArea, Form} from '@nutui/nutui-react-taro'
import {Scan, ArrowRight} from '@nutui/icons-react-taro' import {Scan, ArrowRight} from '@nutui/icons-react-taro'
import Taro from '@tarojs/taro' import Taro from '@tarojs/taro'
import {View} from '@tarojs/components' import {View} from '@tarojs/components'
@@ -9,7 +9,24 @@ import {ShopUserAddress} from "@/api/shop/shopUserAddress/model";
import {getShopUserAddress, listShopUserAddress, updateShopUserAddress, addShopUserAddress} from "@/api/shop/shopUserAddress"; import {getShopUserAddress, listShopUserAddress, updateShopUserAddress, addShopUserAddress} from "@/api/shop/shopUserAddress";
import RegionData from '@/api/json/regions-data.json'; import RegionData from '@/api/json/regions-data.json';
import FixedButton from "@/components/FixedButton"; import FixedButton from "@/components/FixedButton";
import { getCurrentLngLat } from "@/utils/location";
type SelectedLocation = { lng: string; lat: string; name?: string; address?: string }
const isLocationDenied = (e: any) => {
const msg = String(e?.errMsg || e?.message || e || '')
return (
msg.includes('auth deny') ||
msg.includes('authorize') ||
msg.includes('permission') ||
msg.includes('denied') ||
msg.includes('scope.userLocation')
)
}
const isUserCancel = (e: any) => {
const msg = String(e?.errMsg || e?.message || e || '')
return msg.includes('cancel')
}
const AddUserAddress = () => { const AddUserAddress = () => {
const {params} = useRouter(); const {params} = useRouter();
@@ -19,6 +36,7 @@ const AddUserAddress = () => {
const [visible, setVisible] = useState(false) const [visible, setVisible] = useState(false)
const [FormData, setFormData] = useState<ShopUserAddress>({}) const [FormData, setFormData] = useState<ShopUserAddress>({})
const [inputText, setInputText] = useState<string>('') const [inputText, setInputText] = useState<string>('')
const [selectedLocation, setSelectedLocation] = useState<SelectedLocation | null>(null)
const formRef = useRef<any>(null) const formRef = useRef<any>(null)
// 判断是编辑还是新增模式 // 判断是编辑还是新增模式
@@ -36,6 +54,10 @@ const AddUserAddress = () => {
setFormData(address) setFormData(address)
// 设置所在地区 // 设置所在地区
setText(`${address.province} ${address.city} ${address.region}`) setText(`${address.province} ${address.city} ${address.region}`)
// 回显已保存的经纬度(编辑模式)
if (address?.lng && address?.lat) {
setSelectedLocation({ lng: String(address.lng), lat: String(address.lat) })
}
} catch (error) { } catch (error) {
console.error('加载地址失败:', error) console.error('加载地址失败:', error)
Taro.showToast({ Taro.showToast({
@@ -211,10 +233,111 @@ const AddUserAddress = () => {
return null; return null;
}; };
// 选择定位:打开地图让用户选点,保存经纬度到表单数据
const chooseGeoLocation = async () => {
const applyChosenLocation = (res: any) => {
if (!res) return
if (res.latitude === undefined || res.longitude === undefined) {
Taro.showToast({ title: '定位信息获取失败', icon: 'none' })
return
}
const next: SelectedLocation = {
lng: String(res.longitude),
lat: String(res.latitude),
name: res.name,
address: res.address
}
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
? {
province: String(res.provinceName || ''),
city: String(res.cityName || ''),
region: String(res.adName || '')
}
: parseRegion(String(res.address || ''))
setFormData(prev => ({
...prev,
lng: next.lng,
lat: next.lat,
address: nextDetailAddress || prev.address,
province: regionResult?.province || prev.province,
city: regionResult?.city || prev.city,
region: regionResult?.region || prev.region
}))
if (regionResult?.province && regionResult?.city && regionResult?.region) {
setText(`${regionResult.province} ${regionResult.city} ${regionResult.region}`)
}
// 更新表单展示值Form initialValues 不会跟随 FormData 变化)
if (formRef.current) {
const patch: any = {}
if (nextDetailAddress) patch.address = nextDetailAddress
if (regionResult?.region) patch.region = regionResult.region
formRef.current.setFieldsValue(patch)
}
}
try {
const initLat = selectedLocation?.lat ? Number(selectedLocation.lat) : undefined
const initLng = selectedLocation?.lng ? Number(selectedLocation.lng) : 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
})
applyChosenLocation(res)
} catch (e: any) {
console.warn('选择定位失败:', e)
if (isUserCancel(e)) return
if (isLocationDenied(e)) {
try {
const modal = await Taro.showModal({
title: '需要定位权限',
content: '选择定位需要开启定位权限,请在设置中开启后重试。',
confirmText: '去设置'
})
if (modal.confirm) {
await Taro.openSetting()
// 权限可能刚被开启:重试一次
const res = await Taro.chooseLocation({})
applyChosenLocation(res)
}
} catch (_e) {
// ignore
}
return
}
try {
await Taro.showToast({ title: '打开地图失败,请重试', icon: 'none' })
} catch (_e) {
// ignore
}
}
}
// 提交表单 // 提交表单
const submitSucceed = async (values: any) => { const submitSucceed = async (values: any) => {
const loc = await getCurrentLngLat() const loc =
if (!loc) return selectedLocation ||
(FormData?.lng && FormData?.lat ? { lng: String(FormData.lng), lat: String(FormData.lat) } : null)
if (!loc) {
Taro.showToast({ title: '请选择定位', icon: 'none' })
return
}
try { try {
// 准备提交的数据 // 准备提交的数据
@@ -329,6 +452,28 @@ const AddUserAddress = () => {
</div> </div>
</CellGroup> </CellGroup>
<View className={'bg-gray-100 h-3'}></View> <View className={'bg-gray-100 h-3'}></View>
<CellGroup className={'px-3'}>
<Cell
title="选择定位"
description={
selectedLocation?.address ||
(selectedLocation ? `经纬度:${selectedLocation.lng}, ${selectedLocation.lat}` : '')
}
extra={(
<div className={'flex items-center gap-2'}>
<div
className={'text-gray-900 text-sm'}
style={{maxWidth: '200px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap'}}
>
{selectedLocation?.name || (selectedLocation ? '已选择' : '请选择')}
</div>
<ArrowRight className={'text-gray-400'}/>
</div>
)}
onClick={chooseGeoLocation}
/>
</CellGroup>
<View className={'bg-gray-100 h-3'}></View>
<CellGroup style={{padding: '4px 0'}}> <CellGroup style={{padding: '4px 0'}}>
<Form.Item name="name" label="收货人" initialValue={FormData.name} required> <Form.Item name="name" label="收货人" initialValue={FormData.name} required>
<Input placeholder="请输入收货人姓名" maxLength={10}/> <Input placeholder="请输入收货人姓名" maxLength={10}/>