feat(store): 添加门店管理功能和订单配送功能
- 在app.config.ts中添加门店相关路由配置 - 在config/app.ts中添加租户名称常量 - 在Header.tsx中实现门店选择功能,包括定位、距离计算和门店切换 - 更新ShopOrder模型,添加门店ID、门店名称、配送员ID和仓库ID字段 - 新增ShopStore相关API和服务,支持门店的增删改查 - 新增ShopStoreRider相关API和服务,支持配送员管理 - 新增ShopStoreUser相关API和服务,支持店员管理 - 新增ShopWarehouse相关API和服务,支持仓库管理 - 添加配送订单页面,支持订单状态管理和送达确认功能 - 优化经销商页面的样式布局
This commit is contained in:
@@ -1,10 +1,10 @@
|
||||
import {useEffect, useState} from "react";
|
||||
import Taro from '@tarojs/taro';
|
||||
import {Button, Space, Sticky} from '@nutui/nutui-react-taro'
|
||||
import {Button, Sticky, Popup, Cell, CellGroup} from '@nutui/nutui-react-taro'
|
||||
import {TriangleDown} from '@nutui/icons-react-taro'
|
||||
import {Avatar, NavBar} from '@nutui/nutui-react-taro'
|
||||
import {getUserInfo, getWxOpenId} from "@/api/layout";
|
||||
import {TenantId} from "@/config/app";
|
||||
import {TenantId, TenantName} from "@/config/app";
|
||||
import {getOrganization} from "@/api/system/organization";
|
||||
import {myUserVerify} from "@/api/system/userVerify";
|
||||
import { useShopInfo } from '@/hooks/useShopInfo';
|
||||
@@ -13,6 +13,9 @@ import {View,Text} from '@tarojs/components'
|
||||
import MySearch from "./MySearch";
|
||||
import './Header.scss';
|
||||
import {User} from "@/api/system/user/model";
|
||||
import {getShopStore, listShopStore} from "@/api/shop/shopStore";
|
||||
import type {ShopStore} from "@/api/shop/shopStore/model";
|
||||
import {getSelectedStoreFromStorage, saveSelectedStoreToStorage} from "@/utils/storeSelection";
|
||||
|
||||
const Header = (_: any) => {
|
||||
// 使用新的useShopInfo Hook
|
||||
@@ -25,8 +28,124 @@ const Header = (_: any) => {
|
||||
const [stickyStatus, setStickyStatus] = useState<boolean>(false)
|
||||
const [userInfo] = useState<User>()
|
||||
|
||||
// 门店选择:用于首页展示“最近门店”,并在下单时写入订单 storeId
|
||||
const [storePopupVisible, setStorePopupVisible] = useState(false)
|
||||
const [stores, setStores] = useState<ShopStore[]>([])
|
||||
const [selectedStore, setSelectedStore] = useState<ShopStore | null>(getSelectedStoreFromStorage())
|
||||
const [userLocation, setUserLocation] = useState<{lng: number; lat: number} | null>(null)
|
||||
|
||||
const getTenantName = () => {
|
||||
return userInfo?.tenantName || '商城名称'
|
||||
return userInfo?.tenantName || TenantName
|
||||
}
|
||||
|
||||
const parseStoreCoords = (s: ShopStore): {lng: number; lat: number} | null => {
|
||||
const raw = (s.lngAndLat || s.location || '').trim()
|
||||
if (!raw) return null
|
||||
|
||||
const parts = raw.split(/[,\s]+/).filter(Boolean)
|
||||
if (parts.length < 2) return null
|
||||
|
||||
const a = parseFloat(parts[0])
|
||||
const b = parseFloat(parts[1])
|
||||
if (Number.isNaN(a) || Number.isNaN(b)) return null
|
||||
|
||||
// 常见格式是 "lng,lat";这里做一个简单兜底(经度范围更宽)
|
||||
const looksLikeLngLat = Math.abs(a) <= 180 && Math.abs(b) <= 90
|
||||
const looksLikeLatLng = Math.abs(a) <= 90 && Math.abs(b) <= 180
|
||||
if (looksLikeLngLat) return {lng: a, lat: b}
|
||||
if (looksLikeLatLng) return {lng: b, lat: a}
|
||||
return null
|
||||
}
|
||||
|
||||
const distanceMeters = (a: {lng: number; lat: number}, b: {lng: number; lat: number}) => {
|
||||
const toRad = (x: number) => (x * Math.PI) / 180
|
||||
const R = 6371000 // meters
|
||||
const dLat = toRad(b.lat - a.lat)
|
||||
const dLng = toRad(b.lng - a.lng)
|
||||
const lat1 = toRad(a.lat)
|
||||
const lat2 = toRad(b.lat)
|
||||
const sin1 = Math.sin(dLat / 2)
|
||||
const sin2 = Math.sin(dLng / 2)
|
||||
const h = sin1 * sin1 + Math.cos(lat1) * Math.cos(lat2) * sin2 * sin2
|
||||
return 2 * R * Math.asin(Math.min(1, Math.sqrt(h)))
|
||||
}
|
||||
|
||||
const formatDistance = (meters?: number) => {
|
||||
if (meters === undefined || Number.isNaN(meters)) return ''
|
||||
if (meters < 1000) return `${Math.round(meters)}m`
|
||||
return `${(meters / 1000).toFixed(1)}km`
|
||||
}
|
||||
|
||||
const getStoreDistance = (s: ShopStore) => {
|
||||
if (!userLocation) return undefined
|
||||
const coords = parseStoreCoords(s)
|
||||
if (!coords) return undefined
|
||||
return distanceMeters(userLocation, coords)
|
||||
}
|
||||
|
||||
const initStoreSelection = async () => {
|
||||
// 先读取本地已选门店,避免页面首屏抖动
|
||||
const stored = getSelectedStoreFromStorage()
|
||||
if (stored?.id) {
|
||||
setSelectedStore(stored)
|
||||
}
|
||||
|
||||
// 拉取门店列表(失败时允许用户手动重试/继续使用本地门店)
|
||||
let list: ShopStore[] = []
|
||||
try {
|
||||
list = await listShopStore()
|
||||
} catch (e) {
|
||||
console.error('获取门店列表失败:', e)
|
||||
list = []
|
||||
}
|
||||
const usable = (list || []).filter(s => s?.isDelete !== 1)
|
||||
setStores(usable)
|
||||
|
||||
// 尝试获取定位,用于计算最近门店
|
||||
let loc: {lng: number; lat: number} | null = null
|
||||
try {
|
||||
const r = await Taro.getLocation({type: 'gcj02'})
|
||||
loc = {lng: r.longitude, lat: r.latitude}
|
||||
} catch (e) {
|
||||
// 不强制定位授权;无定位时仍允许用户手动选择
|
||||
console.warn('获取定位失败,将不显示最近门店距离:', e)
|
||||
}
|
||||
setUserLocation(loc)
|
||||
|
||||
const ensureStoreDetail = async (s: ShopStore) => {
|
||||
if (!s?.id) return s
|
||||
// 如果后端已经返回默认仓库等字段,就不额外请求
|
||||
if (s.warehouseId) return s
|
||||
try {
|
||||
const full = await getShopStore(s.id)
|
||||
return full || s
|
||||
} catch (_e) {
|
||||
return s
|
||||
}
|
||||
}
|
||||
|
||||
// 若用户没有选过门店,则自动选择最近门店(或第一个)
|
||||
const alreadySelected = stored?.id
|
||||
if (alreadySelected || usable.length === 0) return
|
||||
|
||||
let autoPick: ShopStore | undefined
|
||||
if (loc) {
|
||||
autoPick = [...usable]
|
||||
.map(s => {
|
||||
const coords = parseStoreCoords(s)
|
||||
const d = coords ? distanceMeters(loc, coords) : undefined
|
||||
return {s, d}
|
||||
})
|
||||
.sort((x, y) => (x.d ?? Number.POSITIVE_INFINITY) - (y.d ?? Number.POSITIVE_INFINITY))[0]?.s
|
||||
} else {
|
||||
autoPick = usable[0]
|
||||
}
|
||||
|
||||
if (autoPick?.id) {
|
||||
const full = await ensureStoreDetail(autoPick)
|
||||
setSelectedStore(full)
|
||||
saveSelectedStoreToStorage(full)
|
||||
}
|
||||
}
|
||||
|
||||
const reload = async () => {
|
||||
@@ -187,6 +306,7 @@ const Header = (_: any) => {
|
||||
|
||||
useEffect(() => {
|
||||
reload().then()
|
||||
initStoreSelection().then()
|
||||
}, [])
|
||||
|
||||
return (
|
||||
@@ -216,31 +336,95 @@ const Header = (_: any) => {
|
||||
onBackClick={() => {
|
||||
}}
|
||||
left={
|
||||
<View
|
||||
style={{display: 'flex', alignItems: 'center', gap: '8px'}}
|
||||
onClick={() => setStorePopupVisible(true)}
|
||||
>
|
||||
<Avatar
|
||||
size="22"
|
||||
src={getWebsiteLogo()}
|
||||
/>
|
||||
<Text className={'text-white'}>
|
||||
{selectedStore?.name || '请选择门店'}
|
||||
</Text>
|
||||
<TriangleDown className={'text-white'} size={9}/>
|
||||
</View>
|
||||
}
|
||||
right={
|
||||
!IsLogin ? (
|
||||
<View style={{display: 'flex', alignItems: 'center'}}>
|
||||
<Button style={{color: '#ffffff'}} open-type="getPhoneNumber" onGetPhoneNumber={handleGetPhoneNumber}>
|
||||
<Space>
|
||||
<Avatar
|
||||
size="22"
|
||||
src={getWebsiteLogo()}
|
||||
/>
|
||||
<Text style={{color: '#ffffff'}}>{getTenantName()}</Text>
|
||||
<TriangleDown size={9} className={'text-white'}/>
|
||||
</Space>
|
||||
</Button>
|
||||
</View>
|
||||
) : (
|
||||
<View style={{display: 'flex', alignItems: 'center', gap: '8px'}}>
|
||||
<Avatar
|
||||
size="22"
|
||||
src={getWebsiteLogo()}
|
||||
/>
|
||||
<Text className={'text-white'}>{getTenantName()}</Text>
|
||||
<TriangleDown className={'text-white'} size={9}/>
|
||||
</View>
|
||||
)}>
|
||||
<Button
|
||||
size="small"
|
||||
fill="none"
|
||||
style={{color: '#ffffff'}}
|
||||
open-type="getPhoneNumber"
|
||||
onGetPhoneNumber={handleGetPhoneNumber}
|
||||
>
|
||||
登录
|
||||
</Button>
|
||||
) : null
|
||||
}
|
||||
>
|
||||
<Text className={'text-white'}>{getTenantName()}</Text>
|
||||
</NavBar>
|
||||
|
||||
<Popup
|
||||
visible={storePopupVisible}
|
||||
position="bottom"
|
||||
style={{height: '70vh'}}
|
||||
onClose={() => setStorePopupVisible(false)}
|
||||
>
|
||||
<View className="p-4">
|
||||
<View className="flex justify-between items-center mb-3">
|
||||
<Text className="text-base font-medium">选择门店</Text>
|
||||
<Text
|
||||
className="text-sm text-gray-500"
|
||||
onClick={() => setStorePopupVisible(false)}
|
||||
>
|
||||
关闭
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<View className="text-xs text-gray-500 mb-2">
|
||||
{userLocation ? '已获取定位,按距离排序' : '未获取定位,可手动选择门店'}
|
||||
</View>
|
||||
|
||||
<CellGroup>
|
||||
{[...stores]
|
||||
.sort((a, b) => (getStoreDistance(a) ?? Number.POSITIVE_INFINITY) - (getStoreDistance(b) ?? Number.POSITIVE_INFINITY))
|
||||
.map((s) => {
|
||||
const d = getStoreDistance(s)
|
||||
const isActive = !!selectedStore?.id && selectedStore.id === s.id
|
||||
return (
|
||||
<Cell
|
||||
key={s.id}
|
||||
title={
|
||||
<View className="flex items-center justify-between">
|
||||
<Text className={isActive ? 'text-green-600' : ''}>{s.name || `门店${s.id}`}</Text>
|
||||
{d !== undefined && <Text className="text-xs text-gray-500">{formatDistance(d)}</Text>}
|
||||
</View>
|
||||
}
|
||||
description={s.address || ''}
|
||||
onClick={async () => {
|
||||
let storeToSave = s
|
||||
if (s?.id) {
|
||||
try {
|
||||
const full = await getShopStore(s.id)
|
||||
if (full) storeToSave = full
|
||||
} catch (_e) {
|
||||
// keep base item
|
||||
}
|
||||
}
|
||||
setSelectedStore(storeToSave)
|
||||
saveSelectedStoreToStorage(storeToSave)
|
||||
setStorePopupVisible(false)
|
||||
Taro.showToast({title: '门店已切换', icon: 'success'})
|
||||
}}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</CellGroup>
|
||||
</View>
|
||||
</Popup>
|
||||
</Sticky>
|
||||
</>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user