feat(address): 添加微信地址导入功能和一键导航呼叫功能

- 新增微信地址导入流程,支持从微信原生地址选择后跳转到编辑页面完善定位
- 添加WxAddressDraft缓存机制用于存储微信返回的地址草稿数据
- 实现一键导航功能,支持通过订单地址ID或地址信息进行地图导航
- 添加一键呼叫功能,支持直接拨打电话联系骑手或门店
- 优化地址编辑页面支持微信导入模式和默认地址检查
This commit is contained in:
2026-02-25 18:06:45 +08:00
parent 3d94125c5e
commit d86cdad470
3 changed files with 179 additions and 39 deletions

View File

@@ -48,10 +48,15 @@ const AddUserAddress = () => {
const [inputText, setInputText] = useState<string>('')
const [selectedLocation, setSelectedLocation] = useState<SelectedLocation | null>(null)
const formRef = useRef<any>(null)
const wxDraftRef = useRef<Partial<ShopUserAddress> | null>(null)
const wxDraftPatchedRef = useRef(false)
// 判断是编辑还是新增模式
const isEditMode = !!params.id
const addressId = params.id ? Number(params.id) : undefined
const fromWx = params.fromWx === '1' || params.fromWx === 'true'
const skipDefaultCheck =
fromWx || params.skipDefaultCheck === '1' || params.skipDefaultCheck === 'true'
const reload = async () => {
// 整理地区数据
@@ -59,7 +64,7 @@ const AddUserAddress = () => {
// 新增模式:若存在“默认地址”但缺少经纬度,则强制引导到编辑页完善定位
// 目的:确保业务依赖默认地址坐标(选店/配送范围)时不会因为缺失坐标而失败
if (!isEditMode) {
if (!isEditMode && !skipDefaultCheck) {
try {
const defaultList = await listShopUserAddress({ isDefault: true })
const defaultAddr = defaultList?.[0]
@@ -82,6 +87,31 @@ const AddUserAddress = () => {
}
}
// 微信地址导入:先用微信返回的字段预填表单,让用户手动选择定位后再保存
if (!isEditMode && fromWx && !wxDraftPatchedRef.current) {
try {
const draft = Taro.getStorageSync('WxAddressDraft')
if (draft) {
wxDraftPatchedRef.current = true
wxDraftRef.current = draft as any
Taro.removeStorageSync('WxAddressDraft')
setFormData(prev => ({
...prev,
...(draft as any)
}))
const p = String((draft as any)?.province || '').trim()
const c = String((draft as any)?.city || '').trim()
const r = String((draft as any)?.region || '').trim()
const regionText = [p, c, r].filter(Boolean).join(' ')
if (regionText) setText(regionText)
}
} catch (_e) {
// ignore
}
}
// 如果是编辑模式,加载地址数据
if (isEditMode && addressId) {
try {
@@ -391,6 +421,7 @@ const AddUserAddress = () => {
// 准备提交的数据
const submitData = {
...values,
country: FormData.country,
province: FormData.province,
city: FormData.city,
region: FormData.region,
@@ -448,13 +479,34 @@ const AddUserAddress = () => {
useEffect(() => {
// 动态设置页面标题
Taro.setNavigationBarTitle({
title: isEditMode ? '编辑收货地址' : '新增收货地址'
title: isEditMode ? '编辑收货地址' : (fromWx ? '完善收货地址' : '新增收货地址')
});
reload().then(() => {
setLoading(false)
})
}, [isEditMode]);
}, [fromWx, isEditMode]);
// NutUI Form 的 initialValues 在首次渲染后不再响应更新;微信导入时做一次 setFieldsValue 兜底回填。
useEffect(() => {
if (loading) return
if (isEditMode) return
const draft = wxDraftRef.current
if (!draft) return
if (!formRef.current?.setFieldsValue) return
try {
formRef.current.setFieldsValue({
name: (draft as any)?.name,
phone: (draft as any)?.phone,
address: (draft as any)?.address,
region: (draft as any)?.region
})
} catch (_e) {
// ignore
} finally {
wxDraftRef.current = null
}
}, [fromWx, isEditMode, loading])
if (loading) {
return <Loading className={'px-2'}></Loading>

View File

@@ -1,25 +1,17 @@
import {useEffect} from "react";
import Taro from '@tarojs/taro'
import {addShopUserAddress} from "@/api/shop/shopUserAddress";
import { getCurrentLngLat } from "@/utils/location";
const WxAddress = () => {
/**
* 从微信API获取用户收货地址
* 调用微信原生地址选择界面,获取成功后保存到服务器并刷新列表
* 调用微信原生地址选择界面,获取成功后跳转到“新增收货地址”页面,让用户选择定位后再保存
*/
const getWeChatAddress = () => {
Taro.chooseAddress()
.then(async res => {
const loc = await getCurrentLngLat()
if (!loc) {
// Avoid leaving the user on an empty page.
setTimeout(() => Taro.navigateBack(), 300)
return
}
// 格式化微信返回的地址数据为后端所需格式
const addressData = {
// 仅填充微信地址信息,不要用“当前定位”覆盖经纬度(会造成经纬度与地址不匹配)。
// 选择后跳转到“新增/编辑收货地址”页面,让用户手动选择地图定位后再保存。
const addressDraft = {
name: res.userName,
phone: res.telNumber,
country: res.nationalCode || '中国',
@@ -27,40 +19,32 @@ const WxAddress = () => {
city: res.cityName,
region: res.countyName,
address: res.detailInfo,
postalCode: res.postalCode,
lng: loc.lng,
lat: loc.lat,
isDefault: false
isDefault: false,
}
console.log(res, 'addrs..')
// 调用保存地址的API假设存在该接口
addShopUserAddress(addressData)
.then((msg) => {
console.log(msg)
Taro.showToast({
title: `${msg}`,
icon: 'none'
})
setTimeout(() => {
// 保存成功后返回
Taro.navigateBack()
}, 1000)
})
.catch(error => {
console.error('保存地址失败:', error)
Taro.showToast({title: '保存地址失败', icon: 'error'})
})
Taro.setStorageSync('WxAddressDraft', addressDraft)
// 用 redirectTo 替换当前页面,避免保存后 navigateBack 回到空白的 wxAddress 页面。
await Taro.redirectTo({ url: '/user/address/add?fromWx=1&skipDefaultCheck=1' })
})
.catch(err => {
console.error('获取微信地址失败:', err)
// 用户取消选择地址:直接返回上一页
if (String(err?.errMsg || '').includes('cancel')) {
setTimeout(() => Taro.navigateBack(), 200)
return
}
// 处理用户拒绝授权的情况
if (err.errMsg.includes('auth deny')) {
if (String(err?.errMsg || '').includes('auth deny')) {
Taro.showModal({
title: '授权失败',
content: '请在设置中允许获取地址权限',
showCancel: false
})
setTimeout(() => Taro.navigateBack(), 300)
return
}
Taro.showToast({ title: '获取微信地址失败', icon: 'none' })
setTimeout(() => Taro.navigateBack(), 300)
})
}

View File

@@ -1,4 +1,4 @@
import { useState } from 'react';
import { useRef, useState } from 'react';
import Taro, { useDidShow } from '@tarojs/taro';
import {
Button,
@@ -18,6 +18,7 @@ import { pageGltUserTicket } from '@/api/glt/gltUserTicket';
import type { GltUserTicket } from '@/api/glt/gltUserTicket/model';
import { pageGltTicketOrder, updateGltTicketOrder } from '@/api/glt/gltTicketOrder';
import type { GltTicketOrder } from '@/api/glt/gltTicketOrder/model';
import { getShopUserAddress } from '@/api/shop/shopUserAddress';
import { BaseUrl } from '@/config/app';
import dayjs from "dayjs";
@@ -46,6 +47,8 @@ const UserTicketList = () => {
const [qrTicket, setQrTicket] = useState<GltUserTicket | null>(null);
const [qrImageUrl, setQrImageUrl] = useState('');
const addressCacheRef = useRef<Record<number, { lng: number; lat: number; fullAddress?: string } | null>>({});
const getUserId = () => {
const raw = Taro.getStorageSync('UserId');
const id = Number(raw);
@@ -262,6 +265,81 @@ const UserTicketList = () => {
return d.isValid() ? d.format('YYYY年MM月DD日') : v;
};
const parseLatLng = (latRaw?: unknown, lngRaw?: unknown) => {
const lat = typeof latRaw === 'number' ? latRaw : parseFloat(String(latRaw ?? ''));
const lng = typeof lngRaw === 'number' ? lngRaw : parseFloat(String(lngRaw ?? ''));
if (!Number.isFinite(lat) || !Number.isFinite(lng)) return null;
if (Math.abs(lat) > 90 || Math.abs(lng) > 180) return null;
return { lat, lng };
};
const handleNavigateToAddress = async (order: GltTicketOrder) => {
try {
// Prefer coordinates from backend if present (non-typed fields), otherwise fetch by addressId.
const anyOrder = order as any;
const direct =
parseLatLng(anyOrder?.addressLat ?? anyOrder?.lat, anyOrder?.addressLng ?? anyOrder?.lng) ||
parseLatLng(anyOrder?.receiverLat, anyOrder?.receiverLng);
let coords = direct;
let fullAddress: string | undefined = order.address || undefined;
if (!coords && order.addressId) {
const cached = addressCacheRef.current[order.addressId];
if (cached) {
coords = { lat: cached.lat, lng: cached.lng };
fullAddress = fullAddress || cached.fullAddress;
} else if (cached === null) {
coords = null;
} else {
const addr = await getShopUserAddress(order.addressId);
const parsed = parseLatLng(addr?.lat, addr?.lng);
if (parsed) {
coords = parsed;
fullAddress = fullAddress || addr?.fullAddress || addr?.address || undefined;
addressCacheRef.current[order.addressId] = { ...parsed, fullAddress };
} else {
addressCacheRef.current[order.addressId] = null;
}
}
}
if (!coords) {
if (fullAddress) {
await Taro.setClipboardData({ data: fullAddress });
Taro.showToast({ title: '未配置定位,地址已复制', icon: 'none' });
} else {
Taro.showToast({ title: '暂无可导航的地址', icon: 'none' });
}
return;
}
Taro.openLocation({
latitude: coords.lat,
longitude: coords.lng,
name: '收货地址',
address: fullAddress || ''
});
} catch (e) {
console.error('一键导航失败:', e);
Taro.showToast({ title: '导航失败,请重试', icon: 'none' });
}
};
const handleOneClickCall = async (order: GltTicketOrder) => {
const phone = (order.riderPhone || order.storePhone || '').trim();
if (!phone) {
Taro.showToast({ title: '暂无可呼叫的电话', icon: 'none' });
return;
}
try {
await Taro.makePhoneCall({ phoneNumber: phone });
} catch (e) {
console.error('一键呼叫失败:', e);
Taro.showToast({ title: '呼叫失败,请手动拨打', icon: 'none' });
}
};
const getTicketOrderStatusMeta = (order: GltTicketOrder) => {
if (order.status === 1) return { text: '已冻结', type: 'warning' as const };
@@ -498,6 +576,32 @@ const UserTicketList = () => {
<View className="mt-1">
<Text className="text-xs text-gray-500">{formatDateTime(item.createTime)}</Text>
</View>
{(!!item.addressId || !!item.address || !!item.riderPhone || !!item.storePhone) ? (
<View className="mt-3 flex justify-end gap-2">
{(!!item.addressId || !!item.address) ? (
<Button
size="small"
onClick={(e) => {
e.stopPropagation();
void handleNavigateToAddress(item);
}}
>
</Button>
) : null}
{(!!item.riderPhone || !!item.storePhone) ? (
<Button
size="small"
onClick={(e) => {
e.stopPropagation();
void handleOneClickCall(item);
}}
>
</Button>
) : null}
</View>
) : null}
{/*{item.storeName ? (*/}
{/* <View className="mt-1 text-xs text-gray-500">*/}
{/* <Text>门店:{item.storeName}</Text>*/}