From 70ad1d030ff75880d7a2439b0ca310d80e0049a1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B5=B5=E5=BF=A0=E6=9E=97?= <170083662@qq.com> Date: Sun, 12 Jul 2026 23:19:18 +0800 Subject: [PATCH] =?UTF-8?q?feat(user):=20=E4=BD=BF=E7=94=A8=E5=BE=AE?= =?UTF-8?q?=E4=BF=A1=E5=8E=9F=E7=94=9F=20Picker=20=E6=9B=BF=E6=8D=A2?= =?UTF-8?q?=E6=89=80=E5=9C=A8=E5=9C=B0=E9=80=89=E6=8B=A9=E5=BC=B9=E5=B1=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 删除 NutUI Address 相关导入、状态及地区数据转换逻辑 - 新增派生 regionValue 用于绑定微信原生 Picker 的 value - 将 handleRegionChange 调整为处理微信 Picker 的事件 - 将所在地选择 UI 修改为微信原生 Picker 包裹的视图结构 - 地图定位失败使用弹窗提示，引导用户手动选择或重试 - 移除手动打开地区选择器的函数及 NutUI 组件 - 保留 RegionData 用于文本智能识别解析 - 编译通过，提升在无地图或无权限环境下的地区选择稳定性 --- .workbuddy/memory/2026-07-12.md | 16 ++++++ src/pages/user/address-edit.tsx | 93 +++++++++++++-------------------- 2 files changed, 51 insertions(+), 58 deletions(-) diff --git a/.workbuddy/memory/2026-07-12.md b/.workbuddy/memory/2026-07-12.md index 9cabd83..3f95401 100644 --- a/.workbuddy/memory/2026-07-12.md +++ b/.workbuddy/memory/2026-07-12.md @@ -24,3 +24,19 @@ - chooseGeoLocation 兜底：去掉 regionLocked 分支，地图失败「手动选择」始终打开地区选择器。 编译验证：`taro build --type weapp` 通过。 （未做：手动改地区时不自动清除旧经纬度，避免误删数据；如需坐标随地区失效可再加。） + +## 所在地区选择器：NutUI Address → 微信原生 Picker mode='region' + +参考 weiyu-taro 项目（同为 Taro 商城，`src/pages/user/address-edit.tsx` 用原生 `` 选省市区），将 xinlong 的所在地区从 NutUI `
` 弹层改为微信原生 Picker，与 weiyu-taro 对齐。 + +改动 `src/pages/user/address-edit.tsx`： +- 删除 `import {Address} from '@nutui/nutui-react-taro'`、状态 `regionPickerVisible`/`regionOptions`、以及把 regions-data.json 转 NutUI options 的 useEffect。 +- 新增派生 `regionValue = [province, city, region].map(v=>String(v||''))`（3 元素数组，供原生 Picker value 绑定）。 +- `handleRegionChange` 由 NutUI `(value:string[])` 改为原生 `(e:any)` 读 `e.detail.value`，手动改后 `setRegionLocked(false)`。 +- 「所在地区」行用 `` 包裹。 +- 删除底部 `
` 组件与 `openRegionPicker` 函数。 +- 地图失败兜底：原生 Picker 无法用代码调起，改为弹 modal 引导「重试」(chooseLocation({})) / 「手动填写」(toast 提示去下方手动选)；未获定位权限时 toast 引导手动选。 + +优势：零依赖、零数据准备、系统级选择器永远可用（不联网/不依赖权限/不依赖组件库），是地图不可用最稳的兜底。 +编译验证：`taro build --type weapp` 通过。 +注：RegionData 仍被 parseRegion/parseAddressText（文本智能识别）使用，import 保留。 diff --git a/src/pages/user/address-edit.tsx b/src/pages/user/address-edit.tsx index 90f5eca..e06ccbe 100644 --- a/src/pages/user/address-edit.tsx +++ b/src/pages/user/address-edit.tsx @@ -1,7 +1,6 @@ import React, {useState, useEffect, useRef} from 'react' -import {View, Text, Input, Textarea, ScrollView} from '@tarojs/components' +import {View, Text, Input, Textarea, ScrollView, Picker} from '@tarojs/components' import Taro, {useRouter} from '@tarojs/taro' -import {Address} from '@nutui/nutui-react-taro' import {getShopUserAddress, addShopUserAddress, updateShopUserAddress} from '@/api/shop/shopUserAddress' import type {ShopUserAddress} from '@/api/shop/shopUserAddress/model' import {parseLngLatFromText} from '@/utils/geofence' @@ -109,31 +108,15 @@ const AddressEditPage: React.FC = () => { isDefault: false, }) const [regionText, setRegionText] = useState('') + + /** 所在地区微信原生 Picker 的 value（由 formData 派生） */ + const regionValue = [formData.province, formData.city, formData.region].map(v => String(v || '')) const [inputText, setInputText] = useState('') const [selectedLocation, setSelectedLocation] = useState(null) const [regionLocked, setRegionLocked] = useState(false) - const [regionPickerVisible, setRegionPickerVisible] = useState(false) - const [regionOptions, setRegionOptions] = useState([]) const wxDraftRef = useRef | null>(null) const wxDraftPatchedRef = useRef(false) - /** 初始化省市区选择器数据 */ - useEffect(() => { - const options = (RegionData as any[]).map((province) => ({ - value: province.label, - text: province.label, - children: province.children?.map((city: any) => ({ - value: city.label, - text: city.label, - children: city.children?.map((region: any) => ({ - value: region.label, - text: region.label, - })) || [], - })) || [], - })) - setRegionOptions(options) - }, []) - /** 解析省市区 */ const parseRegion = (text: string) => { for (const province of RegionData as any[]) { @@ -302,8 +285,7 @@ const AddressEditPage: React.FC = () => { // 2. 定位权限预检 / 申请 const granted = await ensureLocationPermission() if (!granted) { - Taro.showToast({title: '未获得定位权限，可手动选择地区', icon: 'none'}) - if (!regionLocked) setRegionPickerVisible(true) + Taro.showToast({title: '未获得定位权限，请在下方手动选择所在地区', icon: 'none'}) return } @@ -320,34 +302,36 @@ const AddressEditPage: React.FC = () => { applyChosenLocation(res) } catch (e: any) { if (isUserCancel(e)) return - // 4. 地图失败兜底：引导手动选择地区或重试，避免用户被卡死 + // 4. 地图失败兜底：原生 Picker 无法用代码调起，提示用户去下方手动选择所在地区； + // 同时提供"重试"可再次尝试地图定位 Taro.showModal({ title: '地图打开失败', - content: '无法调起地图定位，您可以手动选择所在地区并填写详细地址，或稍后重试。', - confirmText: '手动选择', - cancelText: '再试一次', + content: '无法调起地图定位，您可以在下方手动选择所在地区并填写详细地址，或稍后重试。', + confirmText: '重试', + cancelText: '手动填写', }).then((modal) => { if (modal.confirm) { - setRegionPickerVisible(true) - } else { Taro.chooseLocation({}) .then((res: any) => applyChosenLocation(res)) - .catch(() => setRegionPickerVisible(true)) + .catch(() => { + Taro.showToast({title: '仍无法打开地图，请手动选择所在地区', icon: 'none'}) + }) + } else { + Taro.showToast({title: '请在下方手动选择所在地区', icon: 'none'}) } - }).catch(() => setRegionPickerVisible(true)) + }).catch(() => { + Taro.showToast({title: '请在下方手动选择所在地区', icon: 'none'}) + }) } } - /** 打开地区选择器 */ - const openRegionPicker = () => { - setRegionPickerVisible(true) - } - - /** 地区选择器确认 */ - const handleRegionChange = (value: string[]) => { - const [province, city, region] = value + /** 地区选择器确认（微信原生 Picker mode=region） */ + const handleRegionChange = (e: any) => { + const val = e?.detail?.value as string[] + if (!val || val.length < 3) return + const [province, city, region] = val setFormData(prev => ({...prev, province, city, region})) - setRegionText(value.join(' ')) + setRegionText(`${province} ${city} ${region}`) // 用户手动修改了所在地区，解除"由地图定位锁定"状态，后续可继续手动调整 setRegionLocked(false) } @@ -532,16 +516,18 @@ const AddressEditPage: React.FC = () => { {/* 表单区 */} - {/* 所在地区 */} - - 所在地区 - - - {regionText || '请选择省市区'} - - ▶ + {/* 所在地区（微信原生地区选择器，地图不可用时也可手动选择） */} + + + 所在地区 + + + {regionText || '请选择省市区'} + + ▶ + - + {/* 详细地址 */} @@ -613,15 +599,6 @@ const AddressEditPage: React.FC = () => { {isEditMode ? '更新地址' : '保存并使用'} - - {/* 省市区选择器 */} -
handleRegionChange(value as string[])} - onClose={() => setRegionPickerVisible(false)} - /> ) }