feat(registration): 优化经销商注册流程并增加地址定位功能

- 修改导航栏标题从“邀请注册”为“注册成为会员”
- 修复重复提交问题并移除不必要的submitting状态
- 增加昵称和头像的必填验证提示
- 添加用户角色缺失时的默认角色写入机制
- 集成地图选点功能,支持经纬度获取和地址解析
- 实现微信地址导入功能,自动填充基本信息
- 增加定位权限检查和错误处理机制
- 添加.gitignore规则忽略备份文件夹src__bak
- 移除已废弃的银行卡和客户管理页面代码
- 优化表单验证规则和错误提示信息
- 实现经销商注册成功后自动跳转到“我的”页面
- 添加用户信息缓存刷新机制确保角色信息同步
```
This commit is contained in:
2026-03-01 12:35:41 +08:00
parent 945351be91
commit eee4644d06
296 changed files with 28845 additions and 6664 deletions

View File

@@ -9,15 +9,14 @@ import {listCmsNavigation} from "@/api/cms/cmsNavigation";
import {View, RichText} from '@tarojs/components'
import {listCmsDesign} from "@/api/cms/cmsDesign";
import {CmsDesign} from "@/api/cms/cmsDesign/model";
import {type Config} from "@/api/cms/cmsWebsiteField/model";
import {configWebsiteField} from "@/api/cms/cmsWebsiteField";
import { useConfig } from "@/hooks/useConfig"; // 使用新的自定义Hook
const Helper = () => {
const [nav, setNav] = useState<CmsNavigation>()
const [design, setDesign] = useState<CmsDesign>()
const [category, setCategory] = useState<CmsNavigation[]>([])
const [config, setConfig] = useState<Config>()
const { config } = useConfig(); // 使用新的Hook
const reload = async () => {
const navs = await listCmsNavigation({model: 'page', parentId: 0});
@@ -33,9 +32,7 @@ const Helper = () => {
category[index].articles = await listCmsArticle({categoryId: item.navigationId});
})
setCategory(category)
// 查询字段
const configInfo = await configWebsiteField({})
setConfig(configInfo)
// 注意config 现在通过 useConfig Hook 获取,不再在这里调用 configWebsiteField
}
}

View File

@@ -1,6 +1,6 @@
import {useEffect, useState, useRef} from "react";
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 Taro from '@tarojs/taro'
import {View} from '@tarojs/components'
@@ -9,6 +9,34 @@ import {ShopUserAddress} from "@/api/shop/shopUserAddress/model";
import {getShopUserAddress, listShopUserAddress, updateShopUserAddress, addShopUserAddress} from "@/api/shop/shopUserAddress";
import RegionData from '@/api/json/regions-data.json';
import FixedButton from "@/components/FixedButton";
import { parseLngLatFromText } from "@/utils/geofence";
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 hasValidLngLat = (addr?: Partial<ShopUserAddress> | null) => {
if (!addr) return false
const p = parseLngLatFromText(`${(addr as any)?.lng ?? ''},${(addr as any)?.lat ?? ''}`)
if (!p) return false
// Treat "0,0" as missing in this app (typically used as placeholder by backends).
if (p.lng === 0 && p.lat === 0) return false
return true
}
const AddUserAddress = () => {
const {params} = useRouter();
@@ -18,16 +46,72 @@ const AddUserAddress = () => {
const [visible, setVisible] = useState(false)
const [FormData, setFormData] = useState<ShopUserAddress>({})
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 () => {
// 整理地区数据
setRegionData()
// 新增模式:若存在“默认地址”但缺少经纬度,则强制引导到编辑页完善定位
// 目的:确保业务依赖默认地址坐标(选店/配送范围)时不会因为缺失坐标而失败
if (!isEditMode && !skipDefaultCheck) {
try {
const defaultList = await listShopUserAddress({ isDefault: true })
const defaultAddr = defaultList?.[0]
if (defaultAddr && !hasValidLngLat(defaultAddr)) {
await Taro.showModal({
title: '需要完善定位',
content: '默认收货地址缺少定位信息,请先进入编辑页面选择定位并保存后再继续。',
confirmText: '去完善',
showCancel: false
})
if (defaultAddr.id) {
Taro.navigateTo({ url: `/user/address/add?id=${defaultAddr.id}` })
} else {
Taro.navigateTo({ url: '/user/address/index' })
}
return
}
} catch (_e) {
// ignore: 新增页不阻塞渲染
}
}
// 微信地址导入:先用微信返回的字段预填表单,让用户手动选择定位后再保存
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 {
@@ -35,6 +119,8 @@ const AddUserAddress = () => {
setFormData(address)
// 设置所在地区
setText(`${address.province} ${address.city} ${address.region}`)
// 回显已保存的经纬度(编辑模式)
if (hasValidLngLat(address)) setSelectedLocation({ lng: String(address.lng), lat: String(address.lat) })
} catch (error) {
console.error('加载地址失败:', error)
Taro.showToast({
@@ -210,15 +296,137 @@ const AddUserAddress = () => {
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)
// 尝试从地图返回的 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 || ''))
// 将地图选点的地址同步到“收货地址”(不额外拼接省市区字段,省市区由独立字段保存)
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,
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 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,
longitude
})
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 loc =
selectedLocation ||
(hasValidLngLat(FormData) ? { lng: String(FormData.lng), lat: String(FormData.lat) } : null)
if (!loc) {
Taro.showToast({ title: '请选择定位', icon: 'none' })
return
}
try {
// 准备提交的数据
const submitData = {
...values,
country: FormData.country,
province: FormData.province,
city: FormData.city,
region: FormData.region,
lng: loc.lng,
lat: loc.lat,
isDefault: true // 新增或编辑的地址都设为默认地址
};
@@ -271,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>
@@ -324,10 +553,25 @@ const AddUserAddress = () => {
</CellGroup>
<View className={'bg-gray-100 h-3'}></View>
<CellGroup style={{padding: '4px 0'}}>
<Form.Item name="name" label="收货人" initialValue={FormData.name} required>
<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} required>
<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
@@ -346,6 +590,27 @@ const AddUserAddress = () => {
<TextArea maxLength={50} placeholder="请输入详细收货地址"/>
</Form.Item>
</CellGroup>
<CellGroup>
<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>
</Form>
<Address
@@ -365,7 +630,15 @@ const AddUserAddress = () => {
/>
{/* 底部浮动按钮 */}
<FixedButton text={isEditMode ? '更新地址' : '保存并使用'} onClick={() => submitSucceed} />
<FixedButton
text={isEditMode ? '更新地址' : '保存并使用'}
onClick={() => {
// 触发表单提交
if (formRef.current) {
formRef.current.submit();
}
}}
/>
</>
);
};

View File

@@ -1,4 +1,4 @@
export default definePageConfig({
navigationBarTitleText: '地址管理',
navigationBarTitleText: '配送管理',
navigationBarTextStyle: 'black'
})

View File

@@ -1,16 +1,58 @@
import {useState} from "react";
import Taro, {useDidShow} from '@tarojs/taro'
import {Button, Cell, CellGroup, Space, Empty, ConfigProvider, Divider} from '@nutui/nutui-react-taro'
import {Dongdong, ArrowRight, CheckNormal, Checked} from '@nutui/icons-react-taro'
import {Button, Cell, Space, Empty, ConfigProvider, Divider} from '@nutui/nutui-react-taro'
import {CheckNormal, Checked} from '@nutui/icons-react-taro'
import {View} from '@tarojs/components'
import {ShopUserAddress} from "@/api/shop/shopUserAddress/model";
import {listShopUserAddress, removeShopUserAddress, updateShopUserAddress} from "@/api/shop/shopUserAddress";
import FixedButton from "@/components/FixedButton";
import dayjs from "dayjs";
const Address = () => {
const [list, setList] = useState<ShopUserAddress[]>([])
const [address, setAddress] = useState<ShopUserAddress>()
const safeNavigateBack = async () => {
try {
const pages = (Taro as any).getCurrentPages?.() || []
if (Array.isArray(pages) && pages.length > 1) {
await Taro.navigateBack()
return true
}
} catch (_e) {
// ignore
}
return false
}
const parseTime = (raw?: unknown) => {
if (raw === undefined || raw === null || raw === '') return null;
// 兼容秒/毫秒时间戳
if (typeof raw === 'number' || (typeof raw === 'string' && /^\d+$/.test(raw))) {
const n = Number(raw);
return dayjs(Number.isFinite(n) ? (n < 1e12 ? n * 1000 : n) : raw as any);
}
return dayjs(raw as any);
}
const canModifyOncePerMonth = (item: ShopUserAddress) => {
const lastUpdate = parseTime(item.updateTime);
if (!lastUpdate || !lastUpdate.isValid()) return { ok: true as const };
// 若 updateTime 与 createTime 基本一致,则视为“未修改过”,不做限制
const createdAt = parseTime(item.createTime);
if (createdAt && createdAt.isValid() && Math.abs(lastUpdate.diff(createdAt, 'minute')) < 1) {
return { ok: true as const };
}
const nextAllowed = lastUpdate.add(1, 'month');
const now = dayjs();
if (now.isBefore(nextAllowed)) {
return { ok: false as const, nextAllowed: nextAllowed.format('YYYY-MM-DD HH:mm') };
}
return { ok: true as const };
}
const reload = () => {
listShopUserAddress({
userId: Taro.getStorageSync('UserId')
@@ -29,6 +71,8 @@ const Address = () => {
}
const onDefault = async (item: ShopUserAddress) => {
if (item.isDefault) return
if (address) {
await updateShopUserAddress({
...address,
@@ -36,14 +80,18 @@ const Address = () => {
})
}
await updateShopUserAddress({
id: item.id,
isDefault: true
...item,
isDefault: true,
})
Taro.showToast({
title: '设置成功',
icon: 'success'
});
reload();
// 设置默认地址通常是“选择地址”的动作:成功后返回上一页,体验更顺滑
setTimeout(async () => {
const backed = await safeNavigateBack()
if (!backed) reload()
}, 400)
}
const onDel = async (id?: number) => {
@@ -56,6 +104,12 @@ const Address = () => {
}
const selectAddress = async (item: ShopUserAddress) => {
if (item.isDefault) {
const backed = await safeNavigateBack()
if (!backed) reload()
return
}
if (address) {
await updateShopUserAddress({
...address,
@@ -63,11 +117,12 @@ const Address = () => {
})
}
await updateShopUserAddress({
id: item.id,
isDefault: true
...item,
isDefault: true,
})
setTimeout(() => {
Taro.navigateBack()
setTimeout(async () => {
const backed = await safeNavigateBack()
if (!backed) reload()
}, 500)
}
@@ -89,8 +144,8 @@ const Address = () => {
/>
<Space>
<Button onClick={() => Taro.navigateTo({url: '/user/address/add'})}></Button>
<Button type="success" fill="dashed"
onClick={() => Taro.navigateTo({url: '/user/address/wxAddress'})}></Button>
{/*<Button type="success" fill="dashed"*/}
{/* onClick={() => Taro.navigateTo({url: '/user/address/wxAddress'})}>获取微信地址</Button>*/}
</Space>
</div>
</ConfigProvider>
@@ -99,19 +154,19 @@ const Address = () => {
return (
<>
<CellGroup>
<Cell
onClick={() => Taro.navigateTo({url: '/user/address/wxAddress'})}
>
<div className={'flex justify-between items-center w-full'}>
<div className={'flex items-center gap-3'}>
<Dongdong className={'text-green-600'}/>
<div></div>
</div>
<ArrowRight className={'text-gray-400'}/>
</div>
</Cell>
</CellGroup>
{/*<CellGroup>*/}
{/* <Cell*/}
{/* onClick={() => Taro.navigateTo({url: '/user/address/wxAddress'})}*/}
{/* >*/}
{/* <div className={'flex justify-between items-center w-full'}>*/}
{/* <div className={'flex items-center gap-3'}>*/}
{/* <Dongdong className={'text-green-600'}/>*/}
{/* <div>获取微信地址</div>*/}
{/* </div>*/}
{/* <ArrowRight className={'text-gray-400'}/>*/}
{/* </div>*/}
{/* </Cell>*/}
{/*</CellGroup>*/}
{list.map((item, _) => (
<Cell.Group>
<Cell className={'flex flex-col gap-1'} onClick={() => selectAddress(item)}>
@@ -137,7 +192,17 @@ const Address = () => {
</View>
<Divider direction={'vertical'}/>
<View className={'text-gray-400'}
onClick={() => Taro.navigateTo({url: '/user/address/add?id=' + item.id})}>
onClick={() => {
const { ok, nextAllowed } = canModifyOncePerMonth(item);
if (!ok) {
Taro.showToast({
title: `一个月只能修改一次${nextAllowed ? '' + nextAllowed + ' 后可再次修改' : ''}`,
icon: 'none',
});
return;
}
Taro.navigateTo({url: '/user/address/add?id=' + item.id})
}}>
</View>
</>

View File

@@ -1,17 +1,17 @@
import {useEffect} from "react";
import Taro from '@tarojs/taro'
import {addShopUserAddress} from "@/api/shop/shopUserAddress";
const WxAddress = () => {
/**
* 从微信API获取用户收货地址
* 调用微信原生地址选择界面,获取成功后保存到服务器并刷新列表
* 调用微信原生地址选择界面,获取成功后跳转到“新增收货地址”页面,让用户选择定位后再保存
*/
const getWeChatAddress = () => {
Taro.chooseAddress()
.then(res => {
// 格式化微信返回的地址数据为后端所需格式
const addressData = {
.then(async res => {
// 仅填充微信地址信息,不要用“当前定位”覆盖经纬度(会造成经纬度与地址不匹配)。
// 选择后跳转到“新增/编辑收货地址”页面,让用户手动选择地图定位后再保存。
const addressDraft = {
name: res.userName,
phone: res.telNumber,
country: res.nationalCode || '中国',
@@ -19,38 +19,32 @@ const WxAddress = () => {
city: res.cityName,
region: res.countyName,
address: res.detailInfo,
postalCode: res.postalCode,
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

@@ -43,10 +43,10 @@ const GiftCardDetail = () => {
// 获取礼品卡类型文本
const getGiftTypeText = (type?: number) => {
switch (type) {
case 10: return '实物礼品'
case 10: return '礼品'
case 20: return '虚拟礼品卡'
case 30: return '服务礼品卡'
default: return '礼品卡'
default: return '水票'
}
}

View File

@@ -1,5 +1,5 @@
export default definePageConfig({
navigationBarTitleText: '我的礼品卡',
navigationBarTitleText: '我的水票',
navigationBarTextStyle: 'black',
navigationBarBackgroundColor: '#ffffff'
})

View File

@@ -1,7 +1,7 @@
import {useState} from "react";
import Taro, {useDidShow} from '@tarojs/taro'
import {Button, Empty, ConfigProvider,SearchBar, InfiniteLoading, Loading, PullToRefresh, Tabs, TabPane} from '@nutui/nutui-react-taro'
import {Gift, Retweet, Board, QrCode} from '@nutui/icons-react-taro'
import {Gift, Retweet, QrCode} from '@nutui/icons-react-taro'
import {View} from '@tarojs/components'
import {ShopGift} from "@/api/shop/shopGift/model";
import {getUserGifts} from "@/api/shop/shopGift";
@@ -24,7 +24,7 @@ const GiftCardManage = () => {
// sortOrder: 'desc' as 'asc' | 'desc'
// })
// 获取礼品卡状态过滤条件
// 获取水票状态过滤条件
const getStatusFilter = () => {
switch (String(activeTab)) {
case '0': // 未使用
@@ -52,7 +52,7 @@ const GiftCardManage = () => {
}
}
// 根据状态过滤条件加载礼品卡
// 根据状态过滤条件加载水票
const loadGiftsByStatus = async (statusFilter: any) => {
setLoading(true)
try {
@@ -72,9 +72,9 @@ const GiftCardManage = () => {
setHasMore(false)
}
} catch (error) {
console.error('获取礼品卡失败:', error)
console.error('获取水票失败:', error)
Taro.showToast({
title: '获取礼品卡失败',
title: '获取水票失败',
icon: 'error'
})
} finally {
@@ -125,9 +125,9 @@ const GiftCardManage = () => {
// setTotal(0)
}
} catch (error) {
console.error('获取礼品卡失败:', error)
console.error('获取水票失败:', error)
Taro.showToast({
title: '获取礼品卡失败',
title: '获取水票失败',
icon: 'error'
});
} finally {
@@ -162,11 +162,11 @@ const GiftCardManage = () => {
loadGiftsByStatus(statusFilter)
}
// 转换礼品卡数据为GiftCard组件所需格式
// 转换水票数据为GiftCard组件所需格式
const transformGiftData = (gift: ShopGift): GiftCardProps => {
return {
id: gift.id || 0,
name: gift.name || '礼品卡', // 礼品卡名称
name: gift.name || '水票', // 水票名称
goodsName: gift.goodsName, // 商品名称(新增字段)
description: gift.description || gift.instructions, // 使用说明作为描述
code: gift.code,
@@ -180,23 +180,23 @@ const GiftCardManage = () => {
contactInfo: gift.contactInfo,
// 添加商品信息
goodsInfo: {
// 如果有商品名称或商品ID说明是关联商品的礼品卡
// 如果有商品名称或商品ID说明是关联商品的水票
...((gift.goodsName || gift.goodsId) && {
specification: `礼品卡面值:¥${gift.faceValue}`,
specification: `水票面值:¥${gift.faceValue}`,
category: getTypeText(gift.type),
tags: [
getTypeText(gift.type),
gift.status === 0 ? '未使用' : gift.status === 1 ? '已使用' : '失效',
...(gift.goodsName ? ['商品礼品卡'] : [])
...(gift.goodsName ? ['商品水票'] : [])
].filter(Boolean),
instructions: gift.instructions ? [gift.instructions] : [
'请在有效期内使用',
'出示兑换码即可使用',
'不可兑换现金',
...(gift.goodsName ? ['此礼品卡关联具体商品'] : [])
...(gift.goodsName ? ['此水票关联具体商品'] : [])
],
notices: [
'礼品卡一经使用不可退换',
'水票一经使用不可退换',
'请妥善保管兑换码',
'如有疑问请联系客服',
...(gift.goodsName ? ['商品以实际为准'] : [])
@@ -213,34 +213,34 @@ const GiftCardManage = () => {
}
}
// 获取礼品卡类型文本
// 获取水票类型文本
const getTypeText = (type?: number): string => {
switch (type) {
case 10: return '实物礼品卡'
case 20: return '虚拟礼品卡'
case 30: return '服务礼品卡'
default: return '礼品卡'
case 10: return '实物水票'
case 20: return '虚拟水票'
case 30: return '服务水票'
default: return '水票'
}
}
// 根据礼品卡类型获取主题色
// 根据水票类型获取主题色
const getThemeByType = (type?: number): 'gold' | 'silver' | 'bronze' | 'blue' | 'green' | 'purple' => {
switch (type) {
case 10: return 'gold' // 实物礼品卡 - 金色
case 20: return 'blue' // 虚拟礼品卡 - 蓝色
case 30: return 'green' // 服务礼品卡 - 绿色
case 10: return 'gold' // 实物水票 - 金色
case 20: return 'blue' // 虚拟水票 - 蓝色
case 30: return 'green' // 服务水票 - 绿色
default: return 'purple' // 默认使用紫色主题,更美观
}
}
// 使用礼品卡
// 使用水票
const handleUseGift = (gift: ShopGift) => {
Taro.showModal({
title: '使用礼品卡',
title: '使用水票',
content: `确定要使用"${gift.name}"吗?`,
success: (res) => {
if (res.confirm) {
// 跳转到礼品卡使用页面
// 跳转到水票使用页面
Taro.navigateTo({
url: `/user/gift/use?id=${gift.id}`
})
@@ -249,35 +249,35 @@ const GiftCardManage = () => {
})
}
// 礼品卡点击事件
// 水票点击事件
const handleGiftClick = (gift: GiftCardProps, index: number) => {
console.log(gift.code)
const originalGift = list[index]
if (originalGift) {
// 显示礼品卡详情
// 显示水票详情
handleGiftDetail(originalGift)
}
}
// 显示礼品卡详情
// 显示水票详情
const handleGiftDetail = (gift: ShopGift) => {
// 跳转到礼品卡详情页
// 跳转到水票详情页
Taro.navigateTo({
url: `/user/gift/detail?id=${gift.id}`
})
}
// 加载礼品卡统计数据
// 加载水票统计数据
// const loadGiftStats = async () => {
// try {
// // 并行获取各状态的礼品卡数量
// // 并行获取各状态的水票数量
// const [availableRes, usedRes, expiredRes] = await Promise.all([
// getUserGifts({ page: 1, limit: 1, useStatus: 0 }),
// getUserGifts({ page: 1, limit: 1, useStatus: 1 }),
// getUserGifts({ page: 1, limit: 1, useStatus: 2 })
// ])
//
// // 计算总价值(仅可用礼品卡
// // 计算总价值(仅可用水票
// const availableGifts = await getUserGifts({ page: 1, limit: 100, useStatus: 0 })
// const totalValue = availableGifts?.list?.reduce((sum, gift) => {
// return sum + parseFloat(gift.faceValue || '0')
@@ -290,7 +290,7 @@ const GiftCardManage = () => {
// totalValue
// })
// } catch (error) {
// console.error('获取礼品卡统计失败:', error)
// console.error('获取水票统计失败:', error)
// }
// }
@@ -300,21 +300,21 @@ const GiftCardManage = () => {
// available: '0',
// used: '1',
// expired: '2',
// total: '0' // 总价值点击跳转到可用礼品卡
// total: '0' // 总价值点击跳转到可用水票
// }
// if (tabMap[type]) {
// handleTabChange(tabMap[type])
// }
// }
// 兑换礼品卡
// 兑换水票
const handleRedeemGift = () => {
Taro.navigateTo({
url: '/user/gift/redeem'
})
}
// 扫码兑换礼品卡
// 扫码兑换水票
const handleScanRedeem = () => {
Taro.scanCode({
success: (res) => {
@@ -377,14 +377,14 @@ const GiftCardManage = () => {
>
</Button>
<Button
size="small"
fill="outline"
icon={<Board />}
onClick={() => setShowGuide(true)}
>
</Button>
{/*<Button*/}
{/* size="small"*/}
{/* fill="outline"*/}
{/* icon={<Board />}*/}
{/* onClick={() => setShowGuide(true)}*/}
{/*>*/}
{/* 帮助*/}
{/*</Button>*/}
</View>
</View>
@@ -400,7 +400,7 @@ const GiftCardManage = () => {
</Tabs>
</View>
{/* 礼品卡列表 */}
{/* 水票列表 */}
<PullToRefresh
onRefresh={handleRefresh}
headHeight={60}
@@ -410,9 +410,9 @@ const GiftCardManage = () => {
<View className="flex flex-col justify-center items-center" style={{height: '500px'}}>
<Empty
description={
activeTab === '0' ? "暂无未使用礼品卡" :
activeTab === '1' ? "暂无已使用礼品卡" :
"暂无失效礼品卡"
activeTab === '0' ? "暂无未使用水票" :
activeTab === '1' ? "暂无已使用水票" :
"暂无失效水票"
}
style={{backgroundColor: 'transparent'}}
/>
@@ -450,14 +450,14 @@ const GiftCardManage = () => {
<View className="text-gray-400 mb-4">
<Gift size="48" />
</View>
<View className="text-gray-500 mb-2">使</View>
<View className="text-gray-500 mb-2">使</View>
<View className="flex gap-2 justify-center">
<Button
size="small"
type="primary"
onClick={handleRedeemGift}
>
</Button>
<Button
size="small"

View File

@@ -130,7 +130,7 @@ const GiftCardRedeem = () => {
const transformGiftData = (gift: ShopGift) => {
return {
id: gift.id || 0,
name: gift.name || '礼品卡',
name: gift.name || '水票',
description: gift.description,
code: gift.code,
goodsImage: gift.goodsImage,

View File

@@ -121,7 +121,7 @@ const GiftCardUse = () => {
const transformGiftData = (gift: ShopGift) => {
return {
id: gift.id || 0,
name: gift.name || '礼品卡',
name: gift.name || '水票',
description: gift.description,
code: gift.code,
goodsImage: gift.goodsImage,

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,3 @@
export default definePageConfig({
navigationBarTitleText: ''
})

View File

@@ -0,0 +1,191 @@
.evaluate-page {
min-height: 100vh;
background-color: #f5f5f5;
padding-bottom: 80px;
.loading-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 50vh;
.loading-text {
margin-top: 16px;
color: #666;
}
}
.order-info {
background: white;
padding: 16px 20px;
margin-bottom: 12px;
.order-no {
display: block;
color: #666;
margin-bottom: 4px;
}
.order-tip {
display: block;
font-weight: 500;
color: #333;
}
}
.goods-list {
.goods-item {
background: white;
margin-bottom: 12px;
padding: 20px;
.goods-info {
display: flex;
margin-bottom: 20px;
padding-bottom: 16px;
border-bottom: 1px solid #f0f0f0;
.goods-image {
width: 80px;
height: 80px;
border-radius: 8px;
margin-right: 12px;
flex-shrink: 0;
}
.goods-detail {
flex: 1;
.goods-name {
display: block;
font-weight: 500;
color: #333;
line-height: 1.4;
margin-bottom: 8px;
}
.goods-sku {
display: block;
color: #999;
margin-bottom: 8px;
}
.goods-price {
display: block;
font-weight: 600;
color: #ff6b35;
}
}
}
.rating-section {
margin-bottom: 20px;
.rating-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
.rating-label {
font-weight: 500;
color: #333;
}
.rating-text {
color: #ff6b35;
font-weight: 500;
}
}
}
.content-section {
margin-bottom: 20px;
.content-label {
display: block;
font-weight: 500;
color: #333;
margin-bottom: 12px;
}
}
.image-section {
.image-label {
display: block;
font-weight: 500;
color: #333;
margin-bottom: 12px;
}
}
}
}
.submit-section {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: white;
padding: 12px 16px;
border-top: 1px solid #f0f0f0;
z-index: 100;
}
}
/* NutUI 组件样式覆盖 */
.evaluate-page {
.nut-rate {
.nut-rate-item {
margin-right: 8px;
}
}
.nut-textarea {
border: 1px solid #e8e8e8;
border-radius: 8px;
padding: 12px;
background: #fafafa;
&:focus {
border-color: #1890ff;
background: white;
}
}
.nut-uploader {
.nut-uploader-slot {
border: 2px dashed #e8e8e8;
border-radius: 8px;
background: #fafafa;
&:hover {
border-color: #1890ff;
}
}
.nut-uploader-preview {
border-radius: 8px;
overflow: hidden;
}
}
}
/* 适配不同屏幕尺寸 */
@media (max-width: 375px) {
.evaluate-page {
.goods-list {
.goods-item {
padding: 16px;
.goods-info {
.goods-image {
width: 70px;
height: 70px;
}
}
}
}
}
}

View File

@@ -0,0 +1,304 @@
import React, { useState, useEffect } from 'react'
import Taro, { useRouter } from '@tarojs/taro'
import { View, Text, Image } from '@tarojs/components'
import {
Rate,
TextArea,
Button,
Uploader,
Loading,
Empty
} from '@nutui/nutui-react-taro'
import './index.scss'
// 订单商品信息
interface OrderGoods {
goodsId: string
goodsName: string
goodsImage: string
goodsPrice: number
goodsNum: number
skuInfo?: string
}
// 评价信息
interface EvaluateInfo {
goodsId: string
rating: number // 评分 1-5
content: string // 评价内容
images: string[] // 评价图片
isAnonymous: boolean // 是否匿名
}
const EvaluatePage: React.FC = () => {
const router = useRouter()
const { orderId, orderNo } = router.params
const [loading, setLoading] = useState(true)
const [submitting, setSubmitting] = useState(false)
const [orderGoods, setOrderGoods] = useState<OrderGoods[]>([])
const [evaluates, setEvaluates] = useState<Map<string, EvaluateInfo>>(new Map())
useEffect(() => {
if (orderId) {
loadOrderGoods()
}
}, [orderId])
// 加载订单商品信息
const loadOrderGoods = async () => {
try {
setLoading(true)
// 模拟API调用 - 实际项目中替换为真实API
const mockOrderGoods: OrderGoods[] = [
{
goodsId: '1',
goodsName: 'iPhone 15 Pro Max 256GB 深空黑色',
goodsImage: 'https://via.placeholder.com/100x100',
goodsPrice: 9999,
goodsNum: 1,
skuInfo: '颜色深空黑色容量256GB'
},
{
goodsId: '2',
goodsName: 'AirPods Pro 第三代',
goodsImage: 'https://via.placeholder.com/100x100',
goodsPrice: 1999,
goodsNum: 1,
skuInfo: '颜色:白色'
}
]
// 模拟网络延迟
await new Promise(resolve => setTimeout(resolve, 1000))
setOrderGoods(mockOrderGoods)
// 初始化评价信息
const initialEvaluates = new Map<string, EvaluateInfo>()
mockOrderGoods.forEach(goods => {
initialEvaluates.set(goods.goodsId, {
goodsId: goods.goodsId,
rating: 5,
content: '',
images: [],
isAnonymous: false
})
})
setEvaluates(initialEvaluates)
} catch (error) {
console.error('加载订单商品失败:', error)
Taro.showToast({
title: '加载失败,请重试',
icon: 'none'
})
} finally {
setLoading(false)
}
}
// 更新评价信息
const updateEvaluate = (goodsId: string, field: keyof EvaluateInfo, value: any) => {
setEvaluates(prev => {
const newEvaluates = new Map(prev)
const evaluate = newEvaluates.get(goodsId)
if (evaluate) {
newEvaluates.set(goodsId, {
...evaluate,
[field]: value
})
}
return newEvaluates
})
}
// 处理图片上传
const handleImageUpload = async (goodsId: string, files: any) => {
try {
// 模拟图片上传
const uploadedImages: string[] = []
for (const file of files) {
if (file.url) {
uploadedImages.push(file.url)
}
}
updateEvaluate(goodsId, 'images', uploadedImages)
} catch (error) {
console.error('图片上传失败:', error)
Taro.showToast({
title: '图片上传失败',
icon: 'none'
})
}
}
// 提交评价
const submitEvaluate = async () => {
try {
// 验证评价内容
const evaluateList = Array.from(evaluates.values())
const invalidEvaluate = evaluateList.find(evaluate =>
evaluate.rating < 1 || evaluate.rating > 5
)
if (invalidEvaluate) {
Taro.showToast({
title: '请为所有商品评分',
icon: 'none'
})
return
}
setSubmitting(true)
// 模拟API调用
await new Promise(resolve => setTimeout(resolve, 2000))
Taro.showToast({
title: '评价提交成功',
icon: 'success'
})
// 延迟返回上一页
setTimeout(() => {
Taro.navigateBack()
}, 1500)
} catch (error) {
console.error('提交评价失败:', error)
Taro.showToast({
title: '提交失败,请重试',
icon: 'none'
})
} finally {
setSubmitting(false)
}
}
// 获取评分文字描述
const getRatingText = (rating: number) => {
const texts = ['', '很差', '一般', '满意', '很好', '非常满意']
return texts[rating] || ''
}
if (loading) {
return (
<View className="evaluate-page">
<View className="loading-container">
<Loading type="spinner" />
<Text className="loading-text">...</Text>
</View>
</View>
)
}
if (orderGoods.length === 0) {
return (
<View className="evaluate-page">
<Empty
description="暂无商品信息"
imageSize={80}
>
<Button type="primary" size="small" onClick={() => Taro.navigateBack()}>
</Button>
</Empty>
</View>
)
}
return (
<View className="evaluate-page">
{/* 订单信息 */}
<View className="order-info">
<Text className="order-no">{orderNo}</Text>
<Text className="order-tip"></Text>
</View>
{/* 商品评价列表 */}
<View className="goods-list">
{orderGoods.map(goods => {
const evaluate = evaluates.get(goods.goodsId)
if (!evaluate) return null
return (
<View key={goods.goodsId} className="goods-item">
{/* 商品信息 */}
<View className="goods-info">
<Image
className="goods-image"
src={goods.goodsImage}
mode="aspectFill"
/>
<View className="goods-detail">
<Text className="goods-name">{goods.goodsName}</Text>
{goods.skuInfo && (
<Text className="goods-sku">{goods.skuInfo}</Text>
)}
<Text className="goods-price">¥{goods.goodsPrice}</Text>
</View>
</View>
{/* 评分 */}
<View className="rating-section">
<View className="rating-header">
<Text className="rating-label"></Text>
<Text className="rating-text">{getRatingText(evaluate.rating)}</Text>
</View>
<Rate
value={evaluate.rating}
onChange={(value) => updateEvaluate(goods.goodsId, 'rating', value)}
allowHalf={false}
/>
</View>
{/* 评价内容 */}
<View className="content-section">
<Text className="content-label"></Text>
<TextArea
placeholder="请描述您对商品的使用感受..."
value={evaluate.content}
onChange={(value) => updateEvaluate(goods.goodsId, 'content', value)}
maxLength={500}
showCount
rows={6}
/>
</View>
{/* 图片上传 */}
<View className="image-section">
<Text className="image-label"></Text>
<Uploader
value={evaluate.images.map(url => ({ url }))}
onChange={(files) => handleImageUpload(goods.goodsId, files)}
multiple
maxCount={6}
previewType="picture"
deletable
/>
</View>
</View>
)
})}
</View>
{/* 提交按钮 */}
<View className="submit-section">
<Button
type="primary"
block
loading={submitting}
onClick={submitEvaluate}
>
{submitting ? '提交中...' : '提交评价'}
</Button>
</View>
</View>
)
}
export default EvaluatePage

View File

@@ -0,0 +1,3 @@
export default definePageConfig({
navigationBarTitleText: '查看物流'
})

View File

@@ -0,0 +1,186 @@
.logistics-page {
min-height: 100vh;
background-color: #f5f5f5;
padding-bottom: 80px;
.loading-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 50vh;
.loading-text {
margin-top: 16px;
color: #666;
}
}
.logistics-header {
background: white;
padding: 20px;
margin-bottom: 12px;
border-radius: 8px;
margin: 12px;
.express-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
padding-bottom: 16px;
border-bottom: 1px solid #f0f0f0;
.company-name {
font-weight: 600;
color: #333;
}
.express-no {
color: #666;
background: #f5f5f5;
padding: 4px 8px;
border-radius: 4px;
}
}
.status-info {
.status {
display: block;
font-weight: 500;
color: #1890ff;
margin-bottom: 8px;
}
.location {
display: block;
color: #666;
margin-bottom: 4px;
}
.estimated-time {
display: block;
color: #999;
}
}
}
.logistics-track {
background: white;
margin: 12px;
border-radius: 8px;
overflow: hidden;
.track-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 20px;
border-bottom: 1px solid #f0f0f0;
.track-title {
font-weight: 500;
color: #333;
}
}
.track-list {
padding: 0 20px;
.track-item {
position: relative;
display: flex;
padding: 16px 0;
border-left: 2px solid #e8e8e8;
margin-left: 8px;
&.current {
border-left-color: #1890ff;
.track-dot {
background: #1890ff;
border-color: #1890ff;
}
.track-status {
color: #1890ff;
font-weight: 500;
}
}
&:last-child {
border-left-color: transparent;
}
.track-dot {
position: absolute;
left: -6px;
top: 20px;
width: 10px;
height: 10px;
border-radius: 50%;
background: #e8e8e8;
border: 2px solid #e8e8e8;
}
.track-content {
flex: 1;
margin-left: 20px;
.track-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 4px;
.track-status {
font-weight: 500;
color: #333;
}
.track-time {
color: #999;
}
}
.track-location {
display: block;
color: #666;
margin-bottom: 4px;
}
.track-description {
display: block;
color: #999;
line-height: 1.4;
}
}
}
}
}
.logistics-footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: white;
padding: 12px 16px;
border-top: 1px solid #f0f0f0;
z-index: 100;
}
}
/* 适配不同屏幕尺寸 */
@media (max-width: 375px) {
.logistics-page {
.logistics-header {
margin: 8px;
padding: 16px;
}
.logistics-track {
margin: 8px;
}
}
}

View File

@@ -0,0 +1,229 @@
import React, { useState, useEffect } from 'react'
import Taro, { useRouter } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import { Loading, Empty, Button } from '@nutui/nutui-react-taro'
import './index.scss'
// 物流信息接口
interface LogisticsInfo {
expressCompany: string // 快递公司
expressNo: string // 快递单号
status: string // 物流状态
updateTime: string // 更新时间
estimatedTime?: string // 预计送达时间
currentLocation?: string // 当前位置
}
// 物流跟踪记录
interface LogisticsTrack {
time: string
location: string
status: string
description: string
}
// 支持的快递公司
const EXPRESS_COMPANIES = {
'SF': '顺丰速运',
'YTO': '圆通速递',
'ZTO': '中通快递',
'STO': '申通快递',
'YD': '韵达速递',
'HTKY': '百世快递',
'JD': '京东物流',
'EMS': '中国邮政'
}
const LogisticsPage: React.FC = () => {
const router = useRouter()
const { orderId, expressNo, expressCompany } = router.params
const [loading, setLoading] = useState(true)
const [logisticsInfo, setLogisticsInfo] = useState<LogisticsInfo | null>(null)
const [trackList, setTrackList] = useState<LogisticsTrack[]>([])
const [error, setError] = useState<string>('')
useEffect(() => {
if (orderId) {
loadLogisticsInfo()
}
}, [orderId])
// 加载物流信息
const loadLogisticsInfo = async () => {
try {
setLoading(true)
setError('')
// 模拟API调用 - 实际项目中替换为真实API
const mockLogisticsInfo: LogisticsInfo = {
expressCompany: expressCompany || 'SF',
expressNo: expressNo || 'SF1234567890',
status: '运输中',
updateTime: new Date().toISOString(),
estimatedTime: new Date(Date.now() + 24 * 60 * 60 * 1000).toISOString(),
currentLocation: '北京市朝阳区'
}
const mockTrackList: LogisticsTrack[] = [
{
time: new Date().toISOString(),
location: '北京市朝阳区',
status: '运输中',
description: '快件正在运输途中,请耐心等待'
},
{
time: new Date(Date.now() - 2 * 60 * 60 * 1000).toISOString(),
location: '北京转运中心',
status: '已发出',
description: '快件已从北京转运中心发出'
},
{
time: new Date(Date.now() - 6 * 60 * 60 * 1000).toISOString(),
location: '北京转运中心',
status: '已到达',
description: '快件已到达北京转运中心'
},
{
time: new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString(),
location: '上海市浦东新区',
status: '已发货',
description: '商家已发货,快件已交给快递公司'
}
]
// 模拟网络延迟
await new Promise(resolve => setTimeout(resolve, 1000))
setLogisticsInfo(mockLogisticsInfo)
setTrackList(mockTrackList)
} catch (error) {
console.error('加载物流信息失败:', error)
setError('加载物流信息失败,请重试')
} finally {
setLoading(false)
}
}
// 刷新物流信息
const refreshLogistics = () => {
loadLogisticsInfo()
}
// 联系客服
const contactService = () => {
Taro.showModal({
title: '联系客服',
content: '客服电话400-123-4567\n工作时间9:00-18:00',
showCancel: false
})
}
// 格式化时间
const formatTime = (timeStr: string) => {
const date = new Date(timeStr)
return `${date.getMonth() + 1}-${date.getDate()} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`
}
if (loading) {
return (
<View className="logistics-page">
<View className="loading-container">
<Loading type="spinner" />
<Text className="loading-text">...</Text>
</View>
</View>
)
}
if (error) {
return (
<View className="logistics-page">
<Empty
description={error}
imageSize={80}
>
<Button type="primary" size="small" onClick={refreshLogistics}>
</Button>
</Empty>
</View>
)
}
if (!logisticsInfo) {
return (
<View className="logistics-page">
<Empty
description="暂无物流信息"
imageSize={80}
>
<Button type="primary" size="small" onClick={() => Taro.navigateBack()}>
</Button>
</Empty>
</View>
)
}
return (
<View className="logistics-page">
{/* 物流基本信息 */}
<View className="logistics-header">
<View className="express-info">
<Text className="company-name">
{EXPRESS_COMPANIES[logisticsInfo.expressCompany as keyof typeof EXPRESS_COMPANIES] || logisticsInfo.expressCompany}
</Text>
<Text className="express-no">{logisticsInfo.expressNo}</Text>
</View>
<View className="status-info">
<Text className="status">{logisticsInfo.status}</Text>
{logisticsInfo.currentLocation && (
<Text className="location">{logisticsInfo.currentLocation}</Text>
)}
{logisticsInfo.estimatedTime && (
<Text className="estimated-time">
{formatTime(logisticsInfo.estimatedTime)}
</Text>
)}
</View>
</View>
{/* 物流跟踪 */}
<View className="logistics-track">
<View className="track-header">
<Text className="track-title"></Text>
<Button size="small" fill="outline" onClick={refreshLogistics}>
</Button>
</View>
<View className="track-list">
{trackList.map((track, index) => (
<View key={index} className={`track-item ${index === 0 ? 'current' : ''}`}>
<View className="track-dot" />
<View className="track-content">
<View className="track-info">
<Text className="track-status">{track.status}</Text>
<Text className="track-time">{formatTime(track.time)}</Text>
</View>
<Text className="track-location">{track.location}</Text>
<Text className="track-description">{track.description}</Text>
</View>
</View>
))}
</View>
</View>
{/* 底部操作 */}
<View className="logistics-footer">
<Button block onClick={contactService}>
</Button>
</View>
</View>
)
}
export default LogisticsPage

View File

@@ -4,7 +4,7 @@ import {Space, NavBar, Button, Input} from '@nutui/nutui-react-taro'
import {Search, Filter, ArrowLeft} from '@nutui/icons-react-taro'
import {View} from '@tarojs/components';
import OrderList from "./components/OrderList";
import {useRouter} from '@tarojs/taro'
import {useDidShow, useRouter} from '@tarojs/taro'
import {ShopOrderParam} from "@/api/shop/shopOrder/model";
import './order.scss'
@@ -72,6 +72,17 @@ function Order() {
reload().then()
}, []);
// 页面从其它页面返回/重新展示时,刷新一次列表数据
// 典型场景:微信支付取消后返回到待支付列表,需要重新拉取订单/商品信息,避免使用旧数据再次支付失败
useDidShow(() => {
const statusFilter =
params.statusFilter != undefined && params.statusFilter !== ''
? parseInt(params.statusFilter)
: -1;
// 同步路由上的statusFilter并触发子组件重新拉取列表
setSearchParams(prev => ({ ...prev, statusFilter }));
});
return (
<View className="bg-gray-50 min-h-screen">
<View style={{height: `${statusBarHeight || 0}px`, backgroundColor: '#ffffff'}}></View>
@@ -93,10 +104,10 @@ function Order() {
</>
}
>
<span></span>
<span></span>
</NavBar>
{/* 搜索和筛选工具栏 */}
<View className="bg-white px-4 py-3 flex justify-between items-center border-b border-gray-100">
<View className="bg-white px-4 py-3 flex justify-between items-center border-gray-100">
<View className="flex items-center">
<Filter
size={18}
@@ -153,6 +164,10 @@ function Order() {
onReload={() => reload(searchParams)}
searchParams={searchParams}
showSearch={showSearch}
onSearchParamsChange={(newParams) => {
console.log('父组件接收到searchParams变化:', newParams);
setSearchParams(newParams);
}}
/>
</View>
);

View File

@@ -0,0 +1,3 @@
export default definePageConfig({
navigationBarTitleText: '查看进度'
})

View File

@@ -0,0 +1,292 @@
.progress-page {
min-height: 100vh;
background-color: #f5f5f5;
padding-bottom: 80px;
.loading-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 50vh;
.loading-text {
margin-top: 16px;
color: #666;
}
}
.after-sale-header {
background: white;
padding: 20px;
margin-bottom: 12px;
.header-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
.type-status {
display: flex;
align-items: center;
gap: 12px;
.type-text {
font-weight: 600;
color: #333;
}
.status-tag {
padding: 2px 8px;
border-radius: 12px;
}
}
}
.header-info {
.order-no,
.apply-time,
.amount {
display: block;
color: #666;
margin-bottom: 4px;
&:last-child {
margin-bottom: 0;
}
}
.amount {
color: #ff6b35;
font-weight: 500;
}
}
}
.progress-timeline {
background: white;
margin-bottom: 12px;
.timeline-header {
padding: 16px 20px 0;
border-bottom: 1px solid #f0f0f0;
.timeline-title {
font-weight: 500;
color: #333;
}
}
.timeline-list {
padding: 0 20px;
.timeline-item {
position: relative;
display: flex;
padding: 16px 0;
border-left: 2px solid #e8e8e8;
margin-left: 8px;
&.current {
border-left-color: #1890ff;
.timeline-dot {
background: #1890ff;
border-color: #1890ff;
}
.timeline-status {
color: #1890ff;
font-weight: 500;
}
}
&:last-child {
border-left-color: transparent;
}
.timeline-dot {
position: absolute;
left: -6px;
top: 20px;
width: 10px;
height: 10px;
border-radius: 50%;
background: #e8e8e8;
border: 2px solid #e8e8e8;
}
.timeline-content {
flex: 1;
margin-left: 20px;
.timeline-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 4px;
.timeline-status {
font-weight: 500;
color: #333;
}
.timeline-time {
color: #999;
}
}
.timeline-description {
display: block;
color: #666;
line-height: 1.4;
margin-bottom: 4px;
}
.timeline-operator {
display: block;
color: #999;
margin-bottom: 2px;
}
.timeline-remark {
display: block;
color: #1890ff;
background: #f0f8ff;
padding: 4px 8px;
border-radius: 4px;
margin-top: 4px;
}
}
}
}
}
.evidence-section {
background: white;
margin-bottom: 12px;
padding: 16px 20px;
.section-title {
font-weight: 500;
color: #333;
margin-bottom: 12px;
}
.image-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
.image-item {
width: 80px;
height: 80px;
border-radius: 8px;
overflow: hidden;
border: 1px solid #e8e8e8;
.evidence-image {
width: 100%;
height: 100%;
object-fit: cover;
}
}
}
}
.progress-footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: white;
padding: 12px 16px;
border-top: 1px solid #f0f0f0;
z-index: 100;
.footer-buttons {
display: flex;
gap: 12px;
.nut-button {
flex: 1;
}
}
}
}
/* NutUI 组件样式覆盖 */
.progress-page {
.nut-cell-group {
margin-bottom: 12px;
.nut-cell-group__title {
padding: 12px 20px 6px;
font-weight: 500;
color: #333;
}
.nut-cell {
padding: 12px 20px;
.nut-cell__title {
color: #333;
}
.nut-cell__value {
color: #666;
text-align: right;
word-break: break-all;
line-height: 1.4;
}
}
}
.nut-tag {
border: none;
color: white;
font-weight: 500;
}
}
/* 适配不同屏幕尺寸 */
@media (max-width: 375px) {
.progress-page {
.after-sale-header {
padding: 16px;
.header-top {
.type-status {
gap: 8px;
.type-text {
}
}
}
}
.progress-timeline {
.timeline-list {
padding: 0 16px;
.timeline-item {
.timeline-content {
margin-left: 16px;
}
}
}
}
.evidence-section {
padding: 12px 16px;
.image-list {
.image-item {
width: 70px;
height: 70px;
}
}
}
}
}

View File

@@ -0,0 +1,388 @@
import React, { useState, useEffect } from 'react'
import Taro, { useRouter } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import {
Cell,
CellGroup,
Loading,
Empty,
Button,
Steps,
Step,
Tag,
Divider
} from '@nutui/nutui-react-taro'
import './index.scss'
// 售后类型
type AfterSaleType = 'refund' | 'return' | 'exchange' | 'repair'
// 售后状态
type AfterSaleStatus =
| 'pending' // 待审核
| 'approved' // 已同意
| 'rejected' // 已拒绝
| 'processing' // 处理中
| 'completed' // 已完成
| 'cancelled' // 已取消
// 售后进度记录
interface ProgressRecord {
id: string
time: string
status: string
description: string
operator?: string
remark?: string
images?: string[]
}
// 售后详情
interface AfterSaleDetail {
id: string
orderId: string
orderNo: string
type: AfterSaleType
status: AfterSaleStatus
reason: string
description: string
amount: number
applyTime: string
processTime?: string
completeTime?: string
rejectReason?: string
contactPhone?: string
evidenceImages: string[]
progressRecords: ProgressRecord[]
}
// 售后类型映射
const AFTER_SALE_TYPE_MAP = {
'refund': '退款',
'return': '退货',
'exchange': '换货',
'repair': '维修'
}
// 售后状态映射
const AFTER_SALE_STATUS_MAP = {
'pending': '待审核',
'approved': '已同意',
'rejected': '已拒绝',
'processing': '处理中',
'completed': '已完成',
'cancelled': '已取消'
}
// 状态颜色映射
const STATUS_COLOR_MAP = {
'pending': '#faad14',
'approved': '#52c41a',
'rejected': '#ff4d4f',
'processing': '#1890ff',
'completed': '#52c41a',
'cancelled': '#999'
}
const AfterSaleProgressPage: React.FC = () => {
const router = useRouter()
const { orderId, orderNo, type = 'refund' } = router.params
const [loading, setLoading] = useState(true)
const [afterSaleDetail, setAfterSaleDetail] = useState<AfterSaleDetail | null>(null)
const [error, setError] = useState<string>('')
useEffect(() => {
if (orderId) {
loadAfterSaleDetail()
}
}, [orderId])
// 加载售后详情
const loadAfterSaleDetail = async () => {
try {
setLoading(true)
setError('')
// 模拟API调用 - 实际项目中替换为真实API
const mockAfterSaleDetail: AfterSaleDetail = {
id: 'AS' + Date.now(),
orderId: orderId || '',
orderNo: orderNo || '',
type: type as AfterSaleType,
status: 'processing',
reason: '商品质量问题',
description: '收到的商品有明显瑕疵,希望申请退款',
amount: 9999,
applyTime: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString(),
processTime: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000).toISOString(),
contactPhone: '138****5678',
evidenceImages: [
'https://via.placeholder.com/200x200',
'https://via.placeholder.com/200x200'
],
progressRecords: [
{
id: '1',
time: new Date().toISOString(),
status: '处理中',
description: '客服正在处理您的申请,请耐心等待',
operator: '客服小王',
remark: '预计1-2个工作日内完成处理'
},
{
id: '2',
time: new Date(Date.now() - 4 * 60 * 60 * 1000).toISOString(),
status: '已审核',
description: '您的申请已通过审核,正在安排处理',
operator: '审核员张三'
},
{
id: '3',
time: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000).toISOString(),
status: '已受理',
description: '我们已收到您的申请,正在进行审核',
operator: '系统'
},
{
id: '4',
time: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString(),
status: '已提交',
description: '您已成功提交售后申请',
operator: '用户'
}
]
}
// 模拟网络延迟
await new Promise(resolve => setTimeout(resolve, 1000))
setAfterSaleDetail(mockAfterSaleDetail)
} catch (error) {
console.error('加载售后详情失败:', error)
setError('加载售后详情失败,请重试')
} finally {
setLoading(false)
}
}
// 刷新进度
const refreshProgress = () => {
loadAfterSaleDetail()
}
// 撤销申请
const cancelApplication = async () => {
try {
const result = await Taro.showModal({
title: '撤销申请',
content: '确定要撤销售后申请吗?撤销后无法恢复',
confirmText: '确定撤销',
cancelText: '取消'
})
if (!result.confirm) {
return
}
Taro.showLoading({
title: '撤销中...'
})
// 模拟API调用
await new Promise(resolve => setTimeout(resolve, 1500))
Taro.hideLoading()
Taro.showToast({
title: '撤销成功',
icon: 'success'
})
// 延迟返回上一页
setTimeout(() => {
Taro.navigateBack()
}, 1500)
} catch (error) {
Taro.hideLoading()
console.error('撤销申请失败:', error)
Taro.showToast({
title: '撤销失败,请重试',
icon: 'none'
})
}
}
// 联系客服
const contactService = () => {
Taro.showModal({
title: '联系客服',
content: '客服电话400-123-4567\n工作时间9:00-18:00\n\n您也可以通过在线客服获得帮助',
showCancel: false
})
}
// 格式化时间
const formatTime = (timeStr: string) => {
const date = new Date(timeStr)
return `${date.getMonth() + 1}-${date.getDate()} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`
}
// 格式化完整时间
const formatFullTime = (timeStr: string) => {
const date = new Date(timeStr)
return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`
}
if (loading) {
return (
<View className="progress-page">
<View className="loading-container">
<Loading type="spinner" />
<Text className="loading-text">...</Text>
</View>
</View>
)
}
if (error) {
return (
<View className="progress-page">
<Empty
description={error}
imageSize={80}
>
<Button type="primary" size="small" onClick={refreshProgress}>
</Button>
</Empty>
</View>
)
}
if (!afterSaleDetail) {
return (
<View className="progress-page">
<Empty
description="暂无售后信息"
imageSize={80}
>
<Button type="primary" size="small" onClick={() => Taro.navigateBack()}>
</Button>
</Empty>
</View>
)
}
return (
<View className="progress-page">
{/* 售后基本信息 */}
<View className="after-sale-header">
<View className="header-top">
<View className="type-status">
<Text className="type-text">
{AFTER_SALE_TYPE_MAP[afterSaleDetail.type]}
</Text>
<Tag
color={STATUS_COLOR_MAP[afterSaleDetail.status]}
className="status-tag"
>
{AFTER_SALE_STATUS_MAP[afterSaleDetail.status]}
</Tag>
</View>
<Button size="small" fill="outline" onClick={refreshProgress}>
</Button>
</View>
<View className="header-info">
<Text className="order-no">{afterSaleDetail.orderNo}</Text>
<Text className="apply-time">
{formatFullTime(afterSaleDetail.applyTime)}
</Text>
<Text className="amount">¥{afterSaleDetail.amount}</Text>
</View>
</View>
{/* 进度时间线 */}
<View className="progress-timeline">
<View className="timeline-header">
<Text className="timeline-title"></Text>
</View>
<View className="timeline-list">
{afterSaleDetail.progressRecords.map((record, index) => (
<View key={record.id} className={`timeline-item ${index === 0 ? 'current' : ''}`}>
<View className="timeline-dot" />
<View className="timeline-content">
<View className="timeline-info">
<Text className="timeline-status">{record.status}</Text>
<Text className="timeline-time">{formatTime(record.time)}</Text>
</View>
<Text className="timeline-description">{record.description}</Text>
{record.operator && (
<Text className="timeline-operator">{record.operator}</Text>
)}
{record.remark && (
<Text className="timeline-remark">{record.remark}</Text>
)}
</View>
</View>
))}
</View>
</View>
{/* 申请详情 */}
<CellGroup title="申请详情">
<Cell title="申请原因" value={afterSaleDetail.reason} />
<Cell title="问题描述" value={afterSaleDetail.description} />
{afterSaleDetail.contactPhone && (
<Cell title="联系电话" value={afterSaleDetail.contactPhone} />
)}
</CellGroup>
{/* 凭证图片 */}
{afterSaleDetail.evidenceImages.length > 0 && (
<View className="evidence-section">
<View className="section-title"></View>
<View className="image-list">
{afterSaleDetail.evidenceImages.map((image, index) => (
<View key={index} className="image-item">
<image
src={image}
mode="aspectFill"
className="evidence-image"
onClick={() => {
Taro.previewImage({
urls: afterSaleDetail.evidenceImages,
current: image
})
}}
/>
</View>
))}
</View>
</View>
)}
{/* 底部操作 */}
<View className="progress-footer">
<View className="footer-buttons">
<Button onClick={contactService}>
</Button>
{(afterSaleDetail.status === 'pending' || afterSaleDetail.status === 'approved') && (
<Button type="primary" onClick={cancelApplication}>
</Button>
)}
</View>
</View>
</View>
)
}
export default AfterSaleProgressPage

View File

@@ -0,0 +1,3 @@
export default definePageConfig({
navigationBarTitleText: '申请退款'
})

View File

@@ -0,0 +1,244 @@
.refund-page {
min-height: 100vh;
background-color: #f5f5f5;
padding-bottom: 80px;
.loading-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 50vh;
.loading-text {
margin-top: 16px;
color: #666;
}
}
.order-info {
background: white;
padding: 16px 20px;
margin-bottom: 12px;
.order-no {
display: block;
color: #666;
margin-bottom: 4px;
}
.order-amount {
display: block;
font-weight: 600;
color: #ff6b35;
}
}
.goods-section {
background: white;
margin-bottom: 12px;
.section-title {
padding: 16px 20px 0;
font-weight: 500;
color: #333;
}
.goods-item {
padding: 16px 20px;
border-bottom: 1px solid #f0f0f0;
&:last-child {
border-bottom: none;
}
.goods-info {
display: flex;
margin-bottom: 12px;
.goods-image {
width: 60px;
height: 60px;
border-radius: 6px;
margin-right: 12px;
flex-shrink: 0;
}
.goods-detail {
flex: 1;
.goods-name {
display: block;
font-weight: 500;
color: #333;
line-height: 1.4;
margin-bottom: 4px;
}
.goods-sku {
display: block;
color: #999;
margin-bottom: 4px;
}
.goods-price {
display: block;
font-weight: 600;
color: #ff6b35;
}
}
}
.refund-control {
display: flex;
align-items: center;
justify-content: space-between;
.control-label {
color: #333;
}
.max-num {
color: #999;
}
}
}
}
.description-section,
.evidence-section {
background: white;
margin-bottom: 8px;
padding: 12px 20px;
.section-title {
font-weight: 500;
color: #333;
margin-bottom: 10px;
}
}
.refund-amount {
font-weight: 600;
color: #ff6b35;
}
.submit-section {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: white;
padding: 12px 16px;
border-top: 1px solid #f0f0f0;
z-index: 100;
}
}
/* NutUI 组件样式覆盖 */
.refund-page {
.nut-cell-group {
margin-bottom: 8px;
.nut-cell-group__title {
padding: 12px 20px 6px;
font-weight: 500;
color: #333;
}
.nut-cell {
padding: 6px 20px;
min-height: 40px;
}
// 退款原因选项特殊样式
.reason-cell {
padding: 4px 20px !important;
min-height: 36px !important;
}
// 其他选项样式
.option-cell {
padding: 8px 20px !important;
min-height: 44px !important;
}
}
.nut-radio {
.nut-radio__label {
color: #333;
}
}
.nut-checkbox {
.nut-checkbox__label {
color: #333;
}
}
.nut-textarea {
border: 1px solid #e8e8e8;
border-radius: 8px;
padding: 12px;
background: #fafafa;
min-height: 80px;
&:focus {
border-color: #1890ff;
background: white;
}
}
.nut-uploader {
.nut-uploader-slot {
border: 2px dashed #e8e8e8;
border-radius: 8px;
background: #fafafa;
&:hover {
border-color: #1890ff;
}
}
.nut-uploader-preview {
border-radius: 8px;
overflow: hidden;
}
}
.nut-inputnumber {
.nut-inputnumber-input {
width: 60px;
text-align: center;
}
}
}
/* 适配不同屏幕尺寸 */
@media (max-width: 375px) {
.refund-page {
.goods-section {
.goods-item {
padding: 12px 16px;
.goods-info {
.goods-image {
width: 50px;
height: 50px;
}
}
.refund-control {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
}
}
.description-section,
.evidence-section {
padding: 12px 16px;
}
}
}

View File

@@ -0,0 +1,472 @@
import React, { useState, useEffect } from 'react'
import Taro, { useRouter } from '@tarojs/taro'
import { View, Text, Image } from '@tarojs/components'
import {
Cell,
CellGroup,
Radio,
RadioGroup,
TextArea,
Button,
Loading,
InputNumber
} from '@nutui/nutui-react-taro'
import { applyAfterSale } from '@/api/afterSale'
import { getShopOrder, updateShopOrder } from '@/api/shop/shopOrder'
import { listShopOrderGoods } from '@/api/shop/shopOrderGoods'
import './index.scss'
// 订单商品信息
interface OrderGoods {
goodsId: string
goodsName: string
goodsImage: string
goodsPrice: number
goodsNum: number
skuInfo?: string
canRefundNum: number // 可退款数量
}
// 退款原因选项
const REFUND_REASONS = [
'不想要了',
'商品质量问题',
'商品与描述不符',
'收到商品破损',
'发错商品',
'商品缺件',
'其他原因'
]
// 退款申请信息
interface RefundApplication {
refundType: 'full' | 'partial' // 退款类型:全额退款 | 部分退款
refundReason: string // 退款原因
refundDescription: string // 退款说明
refundAmount: number // 退款金额
refundGoods: Array<{
goodsId: string
refundNum: number
}> // 退款商品
evidenceImages: string[] // 凭证图片
contactPhone?: string // 联系电话
isUrgent: boolean // 是否加急处理
}
const RefundPage: React.FC = () => {
const router = useRouter()
const { orderId, orderNo } = router.params
const [loading, setLoading] = useState(true)
const [submitting, setSubmitting] = useState(false)
const [markedClientRefund, setMarkedClientRefund] = useState(false)
const [orderGoods, setOrderGoods] = useState<OrderGoods[]>([])
const [orderAmount, setOrderAmount] = useState(0)
const [refundApp, setRefundApp] = useState<RefundApplication>({
refundType: 'full',
refundReason: '',
refundDescription: '',
refundAmount: 0,
refundGoods: [],
evidenceImages: [],
contactPhone: '',
isUrgent: false
})
const toMoneyNumber = (value: unknown, defaultValue: number = 0): number => {
if (typeof value === 'number') return Number.isFinite(value) ? value : defaultValue
if (typeof value === 'string') {
// Be tolerant of API strings like "¥12.34" or "1,234.56".
const cleaned = value.trim().replace(/,/g, '').replace(/[^\d.-]/g, '')
const n = Number.parseFloat(cleaned)
return Number.isFinite(n) ? n : defaultValue
}
return defaultValue
}
const formatMoney = (value: unknown): string => {
const n = toMoneyNumber(value, 0)
return n.toFixed(2)
}
const markOrderClientRefund = async () => {
if (markedClientRefund) return
if (!orderId) return
const orderIdNum = Number.parseInt(String(orderId), 10)
if (!Number.isFinite(orderIdNum)) return
try {
await updateShopOrder({
orderId: orderIdNum,
orderStatus: 7 // 客户端申请退款
})
setMarkedClientRefund(true)
} catch (e) {
console.error('更新订单状态为客户端申请退款失败:', e)
// 不阻塞用户填写表单;提交时仍会再次尝试更新一次
}
}
useEffect(() => {
if (orderId) {
loadOrderInfo()
}
}, [orderId])
// 加载订单信息
const loadOrderInfo = async () => {
try {
setLoading(true)
if (!orderId) {
throw new Error('缺少订单ID')
}
const orderIdNum = Number.parseInt(String(orderId), 10)
if (!Number.isFinite(orderIdNum)) {
throw new Error('订单ID不合法')
}
// 以订单实付金额为准(避免商品单价合计与优惠/运费等不一致)
const order = await getShopOrder(orderIdNum)
const payAmount = toMoneyNumber(order?.payPrice ?? order?.totalPrice, 0)
// 商品信息加载失败时,不阻塞退款申请(全额退款不依赖商品明细)
let mappedGoods: OrderGoods[] = []
try {
const goods = (await listShopOrderGoods({ orderId: orderIdNum })) || []
mappedGoods = goods.map((g, idx) => {
const goodsNum = Number(g.totalNum ?? 0) || 0
return {
goodsId: String(g.goodsId ?? idx),
goodsName: g.goodsName || '订单商品',
goodsImage: g.image || '/default-goods.png',
goodsPrice: toMoneyNumber(g.price, 0),
goodsNum,
canRefundNum: goodsNum,
skuInfo: g.spec
}
})
} catch (e) {
console.warn('加载订单商品失败(不阻塞退款申请):', e)
}
setOrderGoods(mappedGoods)
setOrderAmount(payAmount)
// 初始化退款申请信息:默认全额退款
setRefundApp(prev => ({
...prev,
refundType: 'full',
refundAmount: payAmount,
refundGoods: mappedGoods.map(g => ({
goodsId: g.goodsId,
refundNum: g.goodsNum
})),
evidenceImages: []
}))
} catch (error) {
console.error('加载订单信息失败:', error)
Taro.showToast({
title: '加载失败,请重试',
icon: 'none'
})
} finally {
setLoading(false)
}
}
// 更新退款申请信息
const updateRefundApp = (field: keyof RefundApplication, value: any) => {
setRefundApp(prev => ({
...prev,
[field]: value
}))
}
// 切换退款类型
// const handleRefundTypeChange = (type: 'full' | 'partial') => {
// updateRefundApp('refundType', type)
//
// if (type === 'full') {
// // 全额退款
// updateRefundApp('refundAmount', orderAmount)
// updateRefundApp('refundGoods', orderGoods.map(goods => ({
// goodsId: goods.goodsId,
// refundNum: goods.goodsNum
// })))
// } else {
// // 部分退款
// updateRefundApp('refundAmount', 0)
// updateRefundApp('refundGoods', orderGoods.map(goods => ({
// goodsId: goods.goodsId,
// refundNum: 0
// })))
// }
// }
// 更新商品退款数量
const updateGoodsRefundNum = (goodsId: string, refundNum: number) => {
const newRefundGoods = refundApp.refundGoods.map(item =>
item.goodsId === goodsId ? { ...item, refundNum } : item
)
updateRefundApp('refundGoods', newRefundGoods)
// 重新计算退款金额
const newRefundAmount = newRefundGoods.reduce((sum, item) => {
const goods = orderGoods.find(g => g.goodsId === item.goodsId)
return sum + (goods ? goods.goodsPrice * item.refundNum : 0)
}, 0)
updateRefundApp('refundAmount', newRefundAmount)
}
// 提交退款申请
const submitRefund = async () => {
try {
// 验证必填信息
if (!refundApp.refundReason) {
Taro.showToast({
title: '请选择退款原因',
icon: 'none'
})
return
}
if (refundApp.refundAmount <= 0) {
Taro.showToast({
title: '退款金额必须大于0',
icon: 'none'
})
return
}
if (refundApp.refundType === 'partial') {
const hasRefundGoods = refundApp.refundGoods.some(item => item.refundNum > 0)
if (!hasRefundGoods) {
Taro.showToast({
title: '请选择要退款的商品',
icon: 'none'
})
return
}
}
setSubmitting(true)
// 构造请求参数
const params = {
orderId: orderId || '',
type: 'refund' as const,
reason: refundApp.refundReason,
description: refundApp.refundDescription,
amount: refundApp.refundAmount,
contactPhone: refundApp.contactPhone,
evidenceImages: refundApp.evidenceImages,
...(refundApp.refundGoods.some(item => item.refundNum > 0)
? {
goodsItems: refundApp.refundGoods
.filter(item => item.refundNum > 0)
.map(item => ({
goodsId: item.goodsId,
quantity: item.refundNum
}))
}
: {})
}
// 调用API提交退款申请
const result = await applyAfterSale(params)
if (result.success) {
// 更新订单状态为"客户端申请退款"
if (orderId) {
try {
await updateShopOrder({
orderId: parseInt(orderId),
orderStatus: 7 // 客户端申请退款
})
setMarkedClientRefund(true)
} catch (updateError) {
console.error('更新订单状态失败:', updateError)
// 即使更新订单状态失败,也继续执行后续操作
}
}
Taro.showToast({
title: '退款申请提交成功',
icon: 'success'
})
// 延迟返回上一页
setTimeout(() => {
Taro.navigateBack()
}, 1500)
} else {
throw new Error(result.message || '提交失败')
}
} catch (error) {
console.error('提交退款申请失败:', error)
Taro.showToast({
title: error instanceof Error ? error.message : '提交失败,请重试',
icon: 'none'
})
} finally {
setSubmitting(false)
}
}
if (loading) {
return (
<View className="refund-page">
<View className="loading-container">
<Loading type="spinner" />
<Text className="loading-text">...</Text>
</View>
</View>
)
}
return (
<View className="refund-page">
{/* 订单信息 */}
<View className="order-info">
<Text className="order-no">{orderNo}</Text>
<Text className="order-amount">¥{formatMoney(orderAmount)}</Text>
</View>
{/* 退款类型选择 */}
{/*<CellGroup title="退款类型">*/}
{/* <RadioGroup */}
{/* value={refundApp.refundType}*/}
{/* onChange={(value) => handleRefundTypeChange(value as 'full' | 'partial')}*/}
{/* >*/}
{/* <Cell>*/}
{/* <Radio value="full">全额退款</Radio>*/}
{/* </Cell>*/}
{/* <Cell>*/}
{/* <Radio value="partial">部分退款</Radio>*/}
{/* </Cell>*/}
{/* </RadioGroup>*/}
{/*</CellGroup>*/}
{/* 商品列表 */}
{refundApp.refundType === 'partial' && (
<View className="goods-section">
<View className="section-title">退</View>
{orderGoods.map(goods => {
const refundGoods = refundApp.refundGoods.find(item => item.goodsId === goods.goodsId)
const refundNum = refundGoods?.refundNum || 0
return (
<View key={goods.goodsId} className="goods-item">
<View className="goods-info">
<Image
className="goods-image"
src={goods.goodsImage}
mode="aspectFill"
/>
<View className="goods-detail">
<Text className="goods-name">{goods.goodsName}</Text>
{goods.skuInfo && (
<Text className="goods-sku">{goods.skuInfo}</Text>
)}
<Text className="goods-price">¥{goods.goodsPrice}</Text>
</View>
</View>
<View className="refund-control">
<Text className="control-label">退</Text>
<InputNumber
value={refundNum}
min={0}
max={goods.canRefundNum}
onChange={(value) => updateGoodsRefundNum(goods.goodsId, Number(value) || 0)}
/>
<Text className="max-num">{goods.canRefundNum}</Text>
</View>
</View>
)
})}
</View>
)}
{/* 退款金额 */}
<CellGroup title="退款金额">
<Cell>
<Text className="refund-amount">¥{formatMoney(refundApp.refundAmount)}</Text>
</Cell>
</CellGroup>
{/* 退款原因 */}
<CellGroup title="退款原因">
<RadioGroup
value={refundApp.refundReason}
onChange={(value) => {
updateRefundApp('refundReason', value)
void markOrderClientRefund()
}}
>
{REFUND_REASONS.map(reason => (
<Cell key={reason} className="reason-cell">
<Radio value={reason}>{reason}</Radio>
</Cell>
))}
</RadioGroup>
</CellGroup>
{/* 退款说明 */}
<View className="description-section">
<View className="section-title">退</View>
<TextArea
placeholder="请详细说明退款原因..."
value={refundApp.refundDescription}
onChange={(value) => updateRefundApp('refundDescription', value)}
maxLength={500}
showCount
rows={4}
autoHeight
/>
</View>
{/* 凭证图片:当前上传链路不可用,先隐藏(保留数据结构,后续可恢复) */}
{/*<View className="evidence-section">*/}
{/* <View className="section-title">上传凭证(可选)</View>*/}
{/* <Uploader*/}
{/* value={refundApp.evidenceImages.map(url => ({ url }))}*/}
{/* onChange={handleImageUpload}*/}
{/* multiple*/}
{/* maxCount={6}*/}
{/* previewType="picture"*/}
{/* deletable*/}
{/* />*/}
{/*</View>*/}
{/* 其他选项 */}
{/*<CellGroup>*/}
{/* <Cell className="option-cell">*/}
{/* <Checkbox*/}
{/* checked={refundApp.isUrgent}*/}
{/* onChange={(checked) => updateRefundApp('isUrgent', checked)}*/}
{/* >*/}
{/* 加急处理(可能产生额外费用)*/}
{/* </Checkbox>*/}
{/* </Cell>*/}
{/*</CellGroup>*/}
{/* 提交按钮 */}
<View className="submit-section">
<Button
type="primary"
block
loading={submitting}
onClick={submitRefund}
>
{submitting ? '提交中...' : '提交退款申请'}
</Button>
</View>
</View>
)
}
export default RefundPage

View File

@@ -0,0 +1,4 @@
export default definePageConfig({
navigationBarTitleText: '企业采购',
navigationBarTextStyle: 'black'
})

115
src/user/poster/poster.tsx Normal file
View File

@@ -0,0 +1,115 @@
import { useEffect, useState, useRef } from 'react'
import { Image } from '@nutui/nutui-react-taro'
import { CmsAd } from "@/api/cms/cmsAd/model";
import { getCmsAd } from "@/api/cms/cmsAd";
import navTo from "@/utils/common";
const NaturalFullscreenBanner = () => {
const [bannerData, setBannerData] = useState<CmsAd | null>(null)
const [isLoading, setIsLoading] = useState(true)
const containerRef = useRef<HTMLDivElement>(null)
const imageRef = useRef<HTMLImageElement>(null)
// 加载图片数据
const loadBannerData = () => {
setIsLoading(true)
getCmsAd(447)
.then(data => {
setBannerData(data)
setIsLoading(false)
})
.catch(error => {
console.error('图片数据加载失败:', error)
setIsLoading(false)
})
}
// 处理图片加载完成后调整显示方式
const handleImageLoad = () => {
if (imageRef.current && containerRef.current) {
// 获取图片原始宽高比
const imgRatio = imageRef.current.naturalWidth / imageRef.current.naturalHeight;
// 获取容器宽高比
const containerRatio = containerRef.current.offsetWidth / containerRef.current.offsetHeight;
// 根据比例差异微调显示方式
if (imgRatio > containerRatio) {
// 图片更宽,适当调整以显示更多垂直内容
imageRef.current.style.objectPosition = 'center';
} else {
// 图片更高,适当调整以显示更多水平内容
imageRef.current.style.objectPosition = 'center';
}
}
}
// 设置全屏尺寸
useEffect(() => {
const setFullscreenSize = () => {
if (containerRef.current) {
// 减去可能存在的导航栏高度,使显示更自然
const windowHeight = window.innerHeight - 48; // 假设导航栏高度为48px
const windowWidth = window.innerWidth;
containerRef.current.style.height = `${windowHeight}px`;
containerRef.current.style.width = `${windowWidth}px`;
}
};
// 初始化尺寸
setFullscreenSize();
// 监听窗口大小变化
const resizeHandler = () => setFullscreenSize();
window.addEventListener('resize', resizeHandler);
return () => window.removeEventListener('resize', resizeHandler);
}, []);
useEffect(() => {
loadBannerData()
}, [])
if (isLoading) {
return (
<div ref={containerRef} className="flex items-center justify-center bg-gray-100">
<span className="text-gray-500 text-sm">...</span>
</div>
)
}
// 获取第一张图片,如果有
const firstImage = bannerData?.imageList?.[0];
if (!firstImage) {
return (
<div ref={containerRef} className="flex items-center justify-center bg-gray-100">
<span className="text-gray-500 text-sm"></span>
</div>
)
}
return (
<div ref={containerRef} className="relative overflow-hidden bg-black">
<Image
ref={imageRef}
className="absolute inset-0"
src={firstImage.url}
mode={'scaleToFill'}
onClick={() => firstImage.path && navTo(firstImage.path)}
lazyLoad={false}
alt="全屏 banner 图"
onLoad={handleImageLoad}
style={{
width: '100%',
height: '100%',
// 优先保持比例,只裁剪必要部分
objectFit: 'cover',
// 默认居中显示,保留图片主体内容
objectPosition: 'center center'
}}
/>
</div>
)
}
export default NaturalFullscreenBanner

View File

@@ -3,7 +3,7 @@ import {ArrowRight} from '@nutui/icons-react-taro'
import {useEffect, useState} from "react";
import {ConfigProvider} from '@nutui/nutui-react-taro'
import Taro, {getCurrentInstance} from '@tarojs/taro'
import {getUserInfo} from "@/api/layout";
import {getUserInfo, updateUserInfo} from "@/api/layout";
import {TenantId} from "@/config/app";
import { TextArea } from '@nutui/nutui-react-taro'
import './profile.scss'
@@ -18,23 +18,8 @@ import {
import {DictData} from "@/api/system/dict-data/model";
import {pageDictData} from "@/api/system/dict-data";
import {User} from "@/api/system/user/model";
import {useUser} from "@/hooks/useUser";
// 类型定义
interface ChooseAvatarEvent {
detail: {
avatarUrl: string;
};
}
interface InputEvent {
detail: {
value: string;
};
}
function Profile() {
const formId = Number(router?.params.id)
const {user, updateUser} = useUser()
const [sex, setSex] = useState<DictData[]>()
const [FormData, setFormData] = useState<User>(
@@ -63,32 +48,30 @@ function Profile() {
}
// 提交表单
const submitSucceed = async (values: User) => {
const submitSucceed = (values: any) => {
console.log(values, 'values')
console.log(formId, 'formId>>')
try {
// 使用 useUser hook 的 updateUser 方法,它会自动更新状态和本地存储
await updateUser(values)
// 由于 useEffect 监听了 user 变化FormData 会自动同步更新
updateUserInfo(values).then(() => {
Taro.showToast({title: `保存成功`, icon: 'success'})
setTimeout(() => {
return Taro.navigateBack()
}, 1000)
} catch (error) {
// updateUser 方法已经处理了错误提示,这里不需要重复显示
console.error('提交表单失败:', error)
}
}).catch(() => {
Taro.showToast({
title: '保存失败',
icon: 'error'
});
})
}
const submitFailed = (error: unknown) => {
const submitFailed = (error: any) => {
console.log(error, 'err...')
}
const uploadAvatar = ({detail}: ChooseAvatarEvent) => {
// 先更新本地显示的头像
const uploadAvatar = ({detail}) => {
setFormData({
...FormData,
avatar: `${detail.avatarUrl}`,
})
Taro.uploadFile({
url: 'https://server.websoft.top/api/oss/upload',
filePath: detail.avatarUrl,
@@ -97,36 +80,18 @@ function Profile() {
'content-type': 'application/json',
TenantId
},
success: async (res) => {
success: (res) => {
const data = JSON.parse(res.data);
if (data.code === 0) {
try {
// 使用 useUser hook 的 updateUser 方法更新头像
await updateUser({
avatar: `${data.data.thumbnail}`
updateUserInfo({
userId: FormData?.userId,
avatar: `${data.data.thumbnail}`
}).then(() => {
Taro.showToast({
title: '上传成功',
})
// 由于 useEffect 监听了 user 变化FormData 会自动同步更新
} catch (error) {
console.error('更新头像失败:', error)
// 如果更新失败,恢复原来的头像
setFormData({
...FormData,
avatar: user?.avatar || ''
})
}
})
}
},
fail: (error) => {
console.error('上传头像失败:', error)
Taro.showToast({
title: '上传失败',
icon: 'error'
})
// 恢复原来的头像
setFormData({
...FormData,
avatar: user?.avatar || ''
})
}
})
}
@@ -144,13 +109,6 @@ function Profile() {
reload()
}, []);
// 监听 useUser hook 中的用户信息变化,同步更新表单数据
useEffect(() => {
if (user) {
setFormData(user)
}
}, [user]);
return (
<>
<div className={'p-4'}>
@@ -198,7 +156,7 @@ function Profile() {
className="info-content__input"
placeholder="请输入昵称"
value={FormData?.nickname}
onInput={(e: InputEvent) => getWxNickname(e.detail.value)}
onInput={(e) => getWxNickname(e.detail.value)}
/>
</Form.Item>
<Form.Item

View File

@@ -0,0 +1,4 @@
export default {
navigationBarTitleText: '门店订单',
navigationBarTextStyle: 'black'
}

View File

@@ -0,0 +1,73 @@
import {useEffect, useMemo, useState} from 'react'
import Taro from '@tarojs/taro'
import {NavBar, Button} from '@nutui/nutui-react-taro'
import {ArrowLeft} from '@nutui/icons-react-taro'
import {View, Text} from '@tarojs/components'
import OrderList from '@/user/order/components/OrderList'
import {getSelectedStoreFromStorage} from '@/utils/storeSelection'
import {listShopStoreUser} from '@/api/shop/shopStoreUser'
export default function StoreOrders() {
const [statusBarHeight, setStatusBarHeight] = useState<number>(0)
const [boundStoreId, setBoundStoreId] = useState<number | undefined>(undefined)
const store = useMemo(() => getSelectedStoreFromStorage(), [])
const storeId = boundStoreId || store?.id
useEffect(() => {
Taro.getSystemInfo({
success: (res) => setStatusBarHeight(res.statusBarHeight ?? 0)
})
}, [])
useEffect(() => {
// 优先按“店员绑定关系”确定门店归属:门店看到的是自己的订单
const userId = Number(Taro.getStorageSync('UserId'))
if (!Number.isFinite(userId) || userId <= 0) return
listShopStoreUser({userId}).then(list => {
const first = (list || []).find(i => i?.isDelete !== 1 && i?.storeId)
if (first?.storeId) setBoundStoreId(first.storeId)
}).catch(() => {
// fallback to SelectedStore
})
}, [])
return (
<View className="bg-gray-50 min-h-screen">
<View style={{height: `${statusBarHeight || 0}px`, backgroundColor: '#ffffff'}}></View>
<NavBar
fixed
style={{marginTop: `${statusBarHeight || 0}px`, backgroundColor: '#ffffff'}}
left={<ArrowLeft onClick={() => Taro.navigateBack()}/>}
>
<span></span>
</NavBar>
<View className="pt-14 px-3">
<View className="bg-white rounded-lg p-3 mb-3">
<Text className="text-sm text-gray-600"></Text>
<Text className="text-base font-medium">{store?.name || (boundStoreId ? `门店ID: ${boundStoreId}` : '未选择门店')}</Text>
</View>
{!storeId ? (
<View className="bg-white rounded-lg p-4">
<Text className="text-sm text-gray-600">
</Text>
<View className="mt-3">
<Button
type="primary"
size="small"
onClick={() => Taro.switchTab({url: '/pages/index/index'})}
>
</Button>
</View>
</View>
) : (
<OrderList mode="store" baseParams={{storeId}} readOnly />
)}
</View>
</View>
)
}

View File

@@ -161,13 +161,13 @@ const StoreVerification: React.FC = () => {
const getTypeText = (type: number) => {
switch (type) {
case 10:
return '实物礼品'
return '礼品'
case 20:
return '虚拟礼品卡'
case 30:
return '服务礼品卡'
default:
return '礼品卡'
return '水票'
}
}

View File

@@ -11,13 +11,13 @@ const ThemeSelector: React.FC = () => {
// 获取当前主题
useEffect(() => {
const savedTheme = Taro.getStorageSync('user_theme') || 'auto'
const savedTheme = Taro.getStorageSync('user_theme') || 'nature'
setSelectedTheme(savedTheme)
if (savedTheme === 'auto') {
// 自动主题根据用户ID生成
const userId = Taro.getStorageSync('userId') || '1'
const theme = gradientUtils.getThemeByUserId(userId)
const userId = Taro.getStorageSync('UserId') ?? Taro.getStorageSync('userId') ?? '1'
const theme = gradientUtils.getThemeByUserId(typeof userId === 'number' ? userId : parseInt(String(userId), 10))
setCurrentTheme(theme)
} else {
// 手动选择的主题
@@ -33,8 +33,8 @@ const ThemeSelector: React.FC = () => {
setSelectedTheme(themeName)
if (themeName === 'auto') {
const userId = Taro.getStorageSync('userId') || '1'
const theme = gradientUtils.getThemeByUserId(userId)
const userId = Taro.getStorageSync('UserId') ?? Taro.getStorageSync('userId') ?? '1'
const theme = gradientUtils.getThemeByUserId(typeof userId === 'number' ? userId : parseInt(String(userId), 10))
setCurrentTheme(theme)
} else {
const theme = gradientThemes.find(t => t.name === themeName)
@@ -61,8 +61,8 @@ const ThemeSelector: React.FC = () => {
// 预览主题
const previewTheme = (themeName: string) => {
if (themeName === 'auto') {
const userId = Taro.getStorageSync('userId') || '1'
const theme = gradientUtils.getThemeByUserId(userId)
const userId = Taro.getStorageSync('UserId') ?? Taro.getStorageSync('userId') ?? '1'
const theme = gradientUtils.getThemeByUserId(typeof userId === 'number' ? userId : parseInt(String(userId), 10))
setCurrentTheme(theme)
} else {
const theme = gradientThemes.find(t => t.name === themeName)

View File

@@ -0,0 +1,5 @@
export default definePageConfig({
navigationBarTitleText: '我的水票',
navigationBarTextStyle: 'black',
navigationBarBackgroundColor: '#ffffff'
})

716
src/user/ticket/index.tsx Normal file
View File

@@ -0,0 +1,716 @@
import { useRef, useState } from 'react';
import Taro, { useDidShow } from '@tarojs/taro';
import {
Button,
ConfigProvider,
Empty,
InfiniteLoading,
Loading,
Popup,
PullToRefresh,
SearchBar,
Tabs,
TabPane,
Tag
} from '@nutui/nutui-react-taro';
import { View, Text, Image } from '@tarojs/components';
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";
const PAGE_SIZE = 10;
const UserTicketList = () => {
const [ticketList, setTicketList] = useState<GltUserTicket[]>([]);
const [ticketLoading, setTicketLoading] = useState(false);
const [ticketHasMore, setTicketHasMore] = useState(true);
const [searchValue, setSearchValue] = useState('');
const [ticketPage, setTicketPage] = useState(1);
const [ticketTotal, setTicketTotal] = useState(0);
const [orderList, setOrderList] = useState<GltTicketOrder[]>([]);
const [orderLoading, setOrderLoading] = useState(false);
const [orderHasMore, setOrderHasMore] = useState(true);
const [orderPage, setOrderPage] = useState(1);
const [orderTotal, setOrderTotal] = useState(0);
const [activeTab, setActiveTab] = useState<'ticket' | 'order'>(() => {
const tab = Taro.getCurrentInstance().router?.params?.tab
return tab === 'order' ? 'order' : 'ticket'
});
const [qrVisible, setQrVisible] = useState(false);
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);
return Number.isFinite(id) && id > 0 ? id : undefined;
};
const buildTicketQrContent = (ticket: GltUserTicket) => {
// QR will be encrypted by `/qr-code/create-encrypted-qr-image`,
// and decrypted on verifier side to get this payload.
return JSON.stringify({
userTicketId: ticket.id,
qty: 1,
userId: ticket.userId,
t: Date.now()
});
};
const buildEncryptedQrImageUrl = (businessType: string, data: string) => {
const size = '300x300';
const expireMinutes = 30;
const base = BaseUrl?.replace(/\/+$/, '');
return `${base}/qr-code/create-encrypted-qr-image?size=${encodeURIComponent(
size
)}&expireMinutes=${encodeURIComponent(String(expireMinutes))}&businessType=${encodeURIComponent(
businessType
)}&data=${encodeURIComponent(data)}`;
};
const openTicketQr = (ticket: GltUserTicket) => {
if (!ticket?.id) {
Taro.showToast({ title: '水票信息不完整', icon: 'none' });
return;
}
if (ticket.status === 1) {
Taro.showToast({ title: '该水票已冻结,无法核销', icon: 'none' });
return;
}
if ((ticket.availableQty ?? 0) <= 0) {
Taro.showToast({ title: '可用次数不足', icon: 'none' });
return;
}
const content = buildTicketQrContent(ticket);
setQrTicket(ticket);
setQrImageUrl(buildEncryptedQrImageUrl('ticket', content));
setQrVisible(true);
};
const showTicketDetail = (ticket: GltUserTicket) => {
const lines: string[] = [];
if (ticket.templateName) lines.push(`水票:${ticket.templateName}`);
lines.push(`可用:${ticket.availableQty ?? 0}`);
lines.push(`总量:${ticket.totalQty ?? 0}`);
lines.push(`已用:${ticket.usedQty ?? 0}`);
lines.push(`冻结:${ticket.frozenQty ?? 0}`);
lines.push(`已释放:${ticket.releasedQty ?? 0}`);
if (ticket.orderNo) lines.push(`订单号:${ticket.orderNo}`);
// Taro.showModal({
// title: '水票详情',
// content: lines.join('\n'),
// showCancel: false
// });
};
const reloadTickets = async (isRefresh = true, keywords?: string) => {
if (ticketLoading) return;
const userId = getUserId();
if (!userId) {
setTicketList([]);
setTicketTotal(0);
setTicketHasMore(false);
return;
}
if (isRefresh) {
setTicketPage(1);
setTicketList([]);
setTicketHasMore(true);
}
setTicketLoading(true);
try {
const currentPage = isRefresh ? 1 : ticketPage;
const res = await pageGltUserTicket({
page: currentPage,
limit: PAGE_SIZE,
userId,
keywords: (keywords ?? searchValue) || undefined
});
const nextList = isRefresh ? res.list : [...ticketList, ...res.list];
setTicketList(nextList);
const count = typeof res.count === 'number' ? res.count : nextList.length;
setTicketTotal(count);
setTicketHasMore(nextList.length < count);
if (res.list.length > 0) {
setTicketPage(currentPage + 1);
} else {
setTicketHasMore(false);
}
} catch (error) {
console.error('获取水票列表失败:', error);
Taro.showToast({ title: '获取水票失败', icon: 'error' });
setTicketHasMore(false);
} finally {
setTicketLoading(false);
}
};
const reloadOrders = async (isRefresh = true, keywords?: string) => {
if (orderLoading) return;
const userId = getUserId();
if (!userId) {
setOrderList([]);
setOrderTotal(0);
setOrderHasMore(false);
return;
}
if (isRefresh) {
setOrderPage(1);
setOrderList([]);
setOrderHasMore(true);
}
setOrderLoading(true);
try {
const currentPage = isRefresh ? 1 : orderPage;
const res = await pageGltTicketOrder({
page: currentPage,
limit: PAGE_SIZE,
userId,
keywords: (keywords ?? searchValue) || undefined
});
const resList = res?.list || [];
const nextList = isRefresh ? resList : [...orderList, ...resList];
setOrderList(nextList);
const count = typeof res?.count === 'number' ? res.count : nextList.length;
setOrderTotal(count);
setOrderHasMore(nextList.length < count);
if (resList.length > 0) {
setOrderPage(currentPage + 1);
} else {
setOrderHasMore(false);
}
} catch (error) {
console.error('获取送水订单失败:', error);
Taro.showToast({ title: '获取送水订单失败', icon: 'error' });
setOrderHasMore(false);
} finally {
setOrderLoading(false);
}
};
const handleSearch = (value: string) => {
setSearchValue(value);
if (activeTab === 'ticket') {
reloadTickets(true, value);
} else {
reloadOrders(true, value);
}
};
const handleRefresh = async () => {
if (activeTab === 'ticket') {
await reloadTickets(true);
} else {
await reloadOrders(true);
}
};
const handleTabChange = (value: string | number) => {
const tab = String(value) as 'ticket' | 'order';
setActiveTab(tab);
if (tab === 'ticket') {
setTicketPage(1);
setTicketList([]);
setTicketHasMore(true);
reloadTickets(true);
} else {
setOrderPage(1);
setOrderList([]);
setOrderHasMore(true);
reloadOrders(true);
}
};
const loadMoreTickets = async () => {
if (!ticketLoading && ticketHasMore) {
await reloadTickets(false);
}
};
const loadMoreOrders = async () => {
if (!orderLoading && orderHasMore) {
await reloadOrders(false);
}
};
const formatDateTime = (v?: string) => {
if (!v) return '-';
const d = dayjs(v);
return d.isValid() ? d.format('YYYY年MM月DD日 HH:mm:ss') : v;
};
const formatDate = (v?: string) => {
if (!v) return '-';
const d = dayjs(v);
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 };
const ds = order.deliveryStatus
if (ds === 40 || order.receiveConfirmTime) return { text: '已完成', type: 'success' as const };
if (ds === 30 || order.sendEndTime) return { text: '待确认收货', type: 'primary' as const };
if (ds === 20 || order.sendStartTime) return { text: '配送中', type: 'primary' as const };
if (ds === 10 || order.riderId) return { text: '待配送', type: 'warning' as const };
return { text: '待派单', type: 'primary' as const };
};
const canUserConfirmReceive = (order: GltTicketOrder) => {
if (!order?.id) return false
if (order.status === 1) return false
if (order.deliveryStatus === 40) return false
if (order.receiveConfirmTime) return false
// 必须是“已送达”后才能确认收货
return !!order.sendEndTime || order.deliveryStatus === 30
}
const handleUserConfirmReceive = async (order: GltTicketOrder) => {
if (!order?.id) return
if (!canUserConfirmReceive(order)) return
const modal = await Taro.showModal({
title: '确认收货',
content: '请确认已收到本次送水,确认后将无法撤销。',
confirmText: '确认收货'
})
if (!modal.confirm) return
try {
Taro.showLoading({ title: '提交中...' })
const now = dayjs().format('YYYY-MM-DD HH:mm:ss')
await updateGltTicketOrder({
id: order.id,
deliveryStatus: 40,
receiveConfirmTime: now,
receiveConfirmType: 10
})
Taro.showToast({ title: '已确认收货', icon: 'success' })
await reloadOrders(true)
} catch (e) {
console.error('确认收货失败:', e)
Taro.showToast({ title: '确认失败,请重试', icon: 'none' })
} finally {
Taro.hideLoading()
}
}
useDidShow(() => {
if (activeTab === 'ticket') {
reloadTickets(true).then();
} else {
reloadOrders(true).then();
}
});
return (
<ConfigProvider>
{/* 搜索栏 */}
<View className="bg-white px-4 py-3 hidden">
<SearchBar
placeholder="搜索水票"
value={searchValue}
onChange={setSearchValue}
onSearch={handleSearch}
/>
</View>
{/* Tab切换 */}
<View className="bg-white">
<Tabs value={activeTab} onChange={handleTabChange}>
<TabPane title="我的水票" value="ticket"></TabPane>
<TabPane title="送水订单" value="order"></TabPane>
</Tabs>
</View>
{activeTab === 'ticket' && ticketTotal > 0 && (
<View className="px-4 py-2 text-sm text-gray-500 bg-gray-50 hidden">
{ticketTotal}
</View>
)}
{activeTab === 'order' && orderTotal > 0 && (
<View className="px-4 py-2 text-sm text-gray-500 bg-gray-50 hidden">
{orderTotal}
</View>
)}
{/* 列表 */}
<PullToRefresh onRefresh={handleRefresh} headHeight={60}>
<View style={{ height: 'calc(100vh)', overflowY: 'auto' }} id="ticket-scroll">
{activeTab === 'ticket' && ticketList.length === 0 && !ticketLoading ? (
<View
className="flex flex-col justify-center items-center"
style={{ height: 'calc(100vh - 160px)' }}
>
<Empty
description="暂无水票"
style={{ backgroundColor: 'transparent' }}
/>
</View>
) : activeTab === 'order' && orderList.length === 0 && !orderLoading ? (
<View
className="flex flex-col justify-center items-center"
style={{ height: 'calc(100vh - 160px)' }}
>
<Empty description="暂无送水订单" style={{ backgroundColor: 'transparent' }} />
</View>
) : activeTab === 'ticket' ? (
<InfiniteLoading
target="ticket-scroll"
hasMore={ticketHasMore}
onLoadMore={loadMoreTickets}
loadingText={
<View className="flex justify-center items-center py-4">
<Loading />
<View className="ml-2">...</View>
</View>
}
loadMoreText={
<View className="text-center py-4 text-gray-500">
{ticketList.length === 0 ? '暂无数据' : '没有更多了'}
</View>
}
>
<View className="px-4 py-3">
{ticketList.map((item, index) => (
<View
key={String(item.id ?? `${item.templateId ?? 't'}-${index}`)}
className="bg-white rounded-xl p-4 mb-3"
onClick={() => showTicketDetail(item)}
>
<View className="flex items-start justify-between">
<View className="flex-1 pr-3">
<Text className="text-base font-semibold text-gray-900">
{item.id}
</Text>
{item.orderNo && (
<View className="mt-1">
<Text className="text-xs text-gray-500">{item.orderNo}</Text>
</View>
)}
{item.createTime && (
<View className="mt-1">
<Text className="text-xs text-gray-400">{dayjs(item.createTime).format('YYYY年MM月DD日 HH:mm:ss')}</Text>
</View>
)}
</View>
<View className="flex flex-col items-end gap-2 hidden">
{/*<Tag type={item.status === 1 ? 'danger' : 'success'}>*/}
{/* {item.status === 1 ? '冻结' : '正常'}*/}
{/*</Tag>*/}
<Button
size="small"
type="primary"
disabled={(item.availableQty ?? 0) <= 0 || item.status === 1}
onClick={(e) => {
// Avoid triggering card click.
e.stopPropagation();
openTicketQr(item);
}}
>
</Button>
</View>
</View>
<View className="mt-3 flex justify-between">
<View className="flex flex-col items-center">
<Text className="text-lg font-bold text-blue-600 text-center">{item.availableQty ?? 0}</Text>
<Text className="text-xs text-gray-500"></Text>
</View>
<View className="flex flex-col items-center">
<Text className="text-lg text-gray-900 text-center">{item.usedQty ?? 0}</Text>
<Text className="text-xs text-gray-500"></Text>
</View>
<View className="flex flex-col items-center">
<Text className="text-lg text-gray-900 text-center">{item.frozenQty ?? 0}</Text>
<Text className="text-xs text-gray-500"></Text>
</View>
</View>
</View>
))}
</View>
</InfiniteLoading>
) : (
<InfiniteLoading
target="ticket-scroll"
hasMore={orderHasMore}
onLoadMore={loadMoreOrders}
loadingText={
<View className="flex justify-center items-center py-4">
<Loading />
<View className="ml-2">...</View>
</View>
}
loadMoreText={
<View className="text-center py-4 text-gray-500">
{orderList.length === 0 ? '暂无数据' : '没有更多了'}
</View>
}
>
<View className="px-4 py-3">
{orderList.map((item, index) => (
<View
key={String(item.id ?? `order-${index}`)}
className="bg-white rounded-xl p-4 mb-3"
>
<View className="flex items-start justify-between">
<View className="flex-1 pr-3">
<Text className="text-base font-semibold text-gray-900">
{item.userTicketId ?? '-'}
</Text>
<View className="mt-1">
<Text className="text-xs text-gray-500">{item.totalNum ?? 0}</Text>
</View>
<View className="mt-1">
<Text className="text-xs text-gray-500">{formatDate(item.sendTime)}</Text>
</View>
</View>
{(() => {
const meta = getTicketOrderStatusMeta(item);
return <Tag type={meta.type}>{meta.text}</Tag>;
})()}
</View>
<View className="mt-2 text-xs text-gray-500">
<Text>{item.id ?? '-'}</Text>
</View>
<View className="mt-1 text-xs text-gray-500">
<Text>{item.address || '-'}</Text>
</View>
<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>*/}
{/* </View>*/}
{/*) : null}*/}
{item.sendStartTime ? (
<View className="mt-1 text-xs text-gray-500">
<Text>{formatDateTime(item.sendStartTime)}</Text>
</View>
) : null}
{item.sendEndTime ? (
<View className="mt-1 text-xs text-gray-500">
<Text>{formatDateTime(item.sendEndTime)}</Text>
</View>
) : null}
{item.receiveConfirmTime ? (
<View className="mt-1 text-xs text-gray-500">
<Text>{formatDateTime(item.receiveConfirmTime)}</Text>
</View>
) : null}
{item.sendEndImg ? (
<View className="mt-3">
<Image src={item.sendEndImg} mode="aspectFill" style={{ width: '100%', height: '160px', borderRadius: '8px' }} />
</View>
) : null}
{canUserConfirmReceive(item) ? (
<View className="mt-3 flex justify-end">
<Button
type="primary"
size="small"
onClick={() => handleUserConfirmReceive(item)}
>
</Button>
</View>
) : null}
</View>
))}
</View>
</InfiniteLoading>
)}
</View>
</PullToRefresh>
{/* 核销二维码 */}
<Popup
visible={qrVisible}
position="center"
closeable
onClose={() => setQrVisible(false)}
style={{ width: '90%' }}
>
<View className="p-6">
<View className="mb-4">
<Text className="text-lg font-bold"></Text>
</View>
{qrTicket && (
<View className="bg-gray-50 rounded-lg p-3 mb-4">
<View className="flex justify-between mb-2">
<Text className="text-sm text-gray-600"></Text>
<Text className="text-sm text-gray-900">{qrTicket.id}</Text>
</View>
<View className="flex justify-between">
<Text className="text-sm text-gray-600"></Text>
<Text className="text-sm text-gray-900">{qrTicket.availableQty ?? 0}</Text>
</View>
</View>
)}
<View className="text-center mb-4">
<View className="p-4 bg-white border border-gray-200 rounded-lg">
{qrImageUrl ? (
<View className="flex flex-col justify-center items-center">
<Image
src={qrImageUrl}
mode="aspectFit"
style={{ width: '200px', height: '200px' }}
/>
<Text className="text-sm text-gray-400 mt-2 px-2">
</Text>
</View>
) : (
<View
className="bg-gray-100 rounded flex items-center justify-center mx-auto"
style={{ width: '200px', height: '200px' }}
>
<Text className="text-gray-500 text-sm">...</Text>
</View>
)}
</View>
</View>
<Button
type="primary"
block
onClick={() => {
if (!qrTicket) return;
const content = buildTicketQrContent(qrTicket);
setQrImageUrl(buildEncryptedQrImageUrl('ticket', content));
}}
>
</Button>
</View>
</Popup>
</ConfigProvider>
);
};
export default UserTicketList;

View File

@@ -0,0 +1,5 @@
export default definePageConfig({
navigationBarTitleText: '送水订单',
navigationBarTextStyle: 'black',
navigationBarBackgroundColor: '#ffffff'
})

View File

@@ -0,0 +1,636 @@
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import Taro, { useDidShow } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import {
Tabs,
TabPane,
Cell,
Space,
Button,
Dialog,
Radio,
RadioGroup,
Image,
Empty,
InfiniteLoading,
PullToRefresh,
Loading
} from '@nutui/nutui-react-taro'
import dayjs from 'dayjs'
import { pageGltTicketOrder, updateGltTicketOrder } from '@/api/glt/gltTicketOrder'
import type { GltTicketOrder, GltTicketOrderParam } from '@/api/glt/gltTicketOrder/model'
import { uploadFile } from '@/api/system/file'
import { listShopStoreRider, updateShopStoreRider } from '@/api/shop/shopStoreRider'
import { getCurrentLngLat } from '@/utils/location'
const PAGE_SIZE = 10
type DeliverConfirmMode = 'photoComplete' | 'waitCustomerConfirm'
export default function TicketOrdersPage() {
const riderId = useMemo(() => {
const raw = Taro.getStorageSync('UserId')
const id = Number(raw)
return Number.isFinite(id) && id > 0 ? id : undefined
}, [])
const pageRef = useRef(1)
const listRef = useRef<GltTicketOrder[]>([])
const [tabIndex, setTabIndex] = useState(0)
const [list, setList] = useState<GltTicketOrder[]>([])
const [hasMore, setHasMore] = useState(true)
const [loading, setLoading] = useState(false)
const [error, setError] = useState<string | null>(null)
const [deliverDialogVisible, setDeliverDialogVisible] = useState(false)
const [deliverSubmitting, setDeliverSubmitting] = useState(false)
const [deliverOrder, setDeliverOrder] = useState<GltTicketOrder | null>(null)
const [deliverImg, setDeliverImg] = useState<string | undefined>(undefined)
const [deliverConfirmMode, setDeliverConfirmMode] = useState<DeliverConfirmMode>('photoComplete')
const riderTabs = useMemo(
() => [
{ index: 0, title: '全部' },
{ index: 1, title: '待配送', deliveryStatus: 10 },
{ index: 2, title: '配送中', deliveryStatus: 20 },
{ index: 3, title: '待确认', deliveryStatus: 30 },
{ index: 4, title: '已完成', deliveryStatus: 40 }
],
[]
)
const getOrderStatusText = (order: GltTicketOrder) => {
if (order.status === 1) return '已冻结'
const deliveryStatus = order.deliveryStatus
if (deliveryStatus === 40) return '已完成'
if (deliveryStatus === 30) return '待客户确认'
if (deliveryStatus === 20) return '配送中'
if (deliveryStatus === 10) return '待配送'
// 兼容:如果后端暂未下发 deliveryStatus就用时间字段推断
if (order.receiveConfirmTime) return '已完成'
if (order.sendEndTime) return '待客户确认'
if (order.sendStartTime) return '配送中'
if (order.riderId) return '待配送'
return '待派单'
}
const getOrderStatusColor = (order: GltTicketOrder) => {
const text = getOrderStatusText(order)
if (text === '已完成') return 'text-green-600'
if (text === '待客户确认') return 'text-purple-600'
if (text === '配送中') return 'text-blue-600'
if (text === '待配送') return 'text-amber-600'
if (text === '已冻结') return 'text-orange-600'
return 'text-gray-500'
}
const canStartDeliver = (order: GltTicketOrder) => {
if (!order.id) return false
if (order.status === 1) return false
if (!riderId || order.riderId !== riderId) return false
if (order.deliveryStatus && order.deliveryStatus !== 10) return false
return !order.sendStartTime && !order.sendEndTime
}
const canConfirmDelivered = (order: GltTicketOrder) => {
if (!order.id) return false
if (order.status === 1) return false
if (!riderId || order.riderId !== riderId) return false
if (order.receiveConfirmTime) return false
if (order.deliveryStatus === 40) return false
if (order.sendEndTime) return false
// 只允许在“配送中”阶段确认送达
if (typeof order.deliveryStatus === 'number') return order.deliveryStatus === 20
return !!order.sendStartTime
}
const canCompleteByPhoto = (order: GltTicketOrder) => {
if (!order.id) return false
if (order.status === 1) return false
if (!riderId || order.riderId !== riderId) return false
if (order.receiveConfirmTime) return false
if (order.deliveryStatus === 40) return false
// 已送达但未完成:允许补传照片并直接完成
return !!order.sendEndTime
}
const filterByTab = useCallback(
(orders: GltTicketOrder[]) => {
if (tabIndex === 0) return orders
const current = riderTabs.find(t => t.index === tabIndex)
const status = current?.deliveryStatus
if (!status) return orders
// 如果后端已实现 deliveryStatus 筛选,这里基本不会再过滤;否则用兼容逻辑兜底。
return orders.filter(o => {
const ds = o.deliveryStatus
if (typeof ds === 'number') return ds === status
if (status === 10) return !!o.riderId && !o.sendStartTime && !o.sendEndTime
if (status === 20) return !!o.sendStartTime && !o.sendEndTime
if (status === 30) return !!o.sendEndTime && !o.receiveConfirmTime
if (status === 40) return !!o.receiveConfirmTime
return true
})
},
[riderTabs, tabIndex]
)
const reload = useCallback(
async (resetPage = false) => {
if (!riderId) return
if (loading) return
setLoading(true)
setError(null)
const currentPage = resetPage ? 1 : pageRef.current
const currentTab = riderTabs.find(t => t.index === tabIndex)
const params: GltTicketOrderParam = {
page: currentPage,
limit: PAGE_SIZE,
riderId,
deliveryStatus: currentTab?.deliveryStatus
}
try {
const res = await pageGltTicketOrder(params as any)
const incomingAll = (res?.list || []) as GltTicketOrder[]
// 兼容:后端若暂未实现 riderId 过滤,前端兜底过滤掉非本人的订单
const incoming = incomingAll.filter(o => o?.deleted !== 1 && o?.riderId === riderId)
const prev = resetPage ? [] : listRef.current
const next = resetPage ? incoming : prev.concat(incoming)
listRef.current = next
setList(next)
const total = typeof res?.count === 'number' ? res.count : undefined
const filteredOut = incomingAll.length - incoming.length
if (typeof total === 'number' && filteredOut === 0) {
setHasMore(next.length < total)
} else {
setHasMore(incomingAll.length >= PAGE_SIZE)
}
pageRef.current = currentPage + 1
} catch (e) {
console.error('加载配送订单失败:', e)
setError('加载失败,请重试')
setHasMore(false)
} finally {
setLoading(false)
}
},
[loading, riderId, riderTabs, tabIndex]
)
const reloadMore = useCallback(async () => {
if (loading || !hasMore) return
await reload(false)
}, [hasMore, loading, reload])
const openDeliverDialog = (order: GltTicketOrder, opts?: { mode?: DeliverConfirmMode }) => {
setDeliverOrder(order)
setDeliverImg(order.sendEndImg)
setDeliverConfirmMode(opts?.mode || (order.sendEndImg ? 'photoComplete' : 'waitCustomerConfirm'))
setDeliverDialogVisible(true)
}
const handleChooseDeliverImg = async () => {
try {
const file = await uploadFile()
setDeliverImg(file?.url)
} catch (e) {
console.error('上传送达照片失败:', e)
Taro.showToast({ title: '上传失败,请重试', icon: 'none' })
}
}
const handleStartDeliver = async (order: GltTicketOrder) => {
if (!order?.id) return
if (!canStartDeliver(order)) return
try {
await updateGltTicketOrder({
id: order.id,
deliveryStatus: 20,
sendStartTime: dayjs().format('YYYY-MM-DD HH:mm:ss')
})
Taro.showToast({ title: '已开始配送', icon: 'success' })
pageRef.current = 1
await reload(true)
} catch (e) {
console.error('开始配送失败:', e)
Taro.showToast({ title: '开始配送失败', icon: 'none' })
}
}
const handleConfirmDelivered = async () => {
if (!deliverOrder?.id) return
if (deliverSubmitting) return
if (deliverConfirmMode === 'photoComplete' && !deliverImg) {
Taro.showToast({ title: '请先拍照/上传送达照片', icon: 'none' })
return
}
setDeliverSubmitting(true)
try {
// 送达时同步记录配送员当前位置(用于门店/后台跟踪骑手位置)
const loc = await getCurrentLngLat('确认送达需要记录您的当前位置,请在设置中开启定位权限后重试。')
if (!loc) return
try {
// 优先按 userId 精确查找;后端若未支持该字段,会自动忽略,我们再做兜底。
let riderRow =
(await listShopStoreRider({ userId: riderId, storeId: deliverOrder.storeId, status: 1 } as any))
?.find(r => String(r?.userId || '') === String(riderId || '')) ||
null
// 兜底:按门店筛选后再匹配 userId
if (!riderRow && deliverOrder.storeId) {
const list = await listShopStoreRider({ storeId: deliverOrder.storeId, status: 1 } as any)
riderRow = list?.find(r => String(r?.userId || '') === String(riderId || '')) || null
}
if (riderRow?.id) {
await updateShopStoreRider({
id: riderRow.id,
longitude: loc.lng,
latitude: loc.lat
} as any)
} else {
console.warn('未找到 ShopStoreRider 记录,无法更新骑手经纬度:', { riderId, storeId: deliverOrder.storeId })
}
} catch (e) {
// 不阻塞送达流程,但记录日志便于排查。
console.warn('更新 ShopStoreRider 经纬度失败:', e)
}
const now = dayjs().format('YYYY-MM-DD HH:mm:ss')
// 送达时间:首次“确认送达”写入;补传照片时不要覆盖原送达时间
const deliveredAt = deliverOrder.sendEndTime || now
// 说明:
// - waitCustomerConfirm只标记“已送达”进入待客户确认客户点击确认收货后完成
// - photoComplete拍照留档后可直接完成由后端策略决定是否允许
const payload: GltTicketOrder =
deliverConfirmMode === 'photoComplete'
? {
id: deliverOrder.id,
deliveryStatus: 40,
sendEndTime: deliveredAt,
sendEndImg: deliverImg,
receiveConfirmTime: now,
receiveConfirmType: 20
}
: {
id: deliverOrder.id,
deliveryStatus: 30,
sendEndTime: deliveredAt,
sendEndImg: deliverImg
}
await updateGltTicketOrder(payload)
Taro.showToast({ title: '已确认送达', icon: 'success' })
setDeliverDialogVisible(false)
setDeliverOrder(null)
setDeliverImg(undefined)
setDeliverConfirmMode('photoComplete')
pageRef.current = 1
await reload(true)
} catch (e) {
console.error('确认送达失败:', e)
Taro.showToast({ title: '确认送达失败', icon: 'none' })
} finally {
setDeliverSubmitting(false)
}
}
useEffect(() => {
listRef.current = list
}, [list])
useDidShow(() => {
pageRef.current = 1
listRef.current = []
setList([])
setHasMore(true)
void reload(true)
// eslint-disable-next-line react-hooks/exhaustive-deps
})
useEffect(() => {
pageRef.current = 1
listRef.current = []
setList([])
setHasMore(true)
void reload(true)
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [tabIndex, riderId])
if (!riderId) {
return (
<View className="bg-gray-50 min-h-screen p-4">
<Text></Text>
</View>
)
}
const displayList = filterByTab(list)
return (
<View className="bg-gray-50 min-h-screen">
<Tabs value={tabIndex} onChange={paneKey => setTabIndex(Number(paneKey))} align="left">
{riderTabs.map(t => (
<TabPane key={t.index} title={loading && tabIndex === t.index ? `${t.title}...` : t.title} />
))}
</Tabs>
<View className="px-3 pb-4">
<PullToRefresh
onRefresh={async () => {
pageRef.current = 1
listRef.current = []
setList([])
setHasMore(true)
await reload(true)
}}
>
{error ? (
<View className="bg-white rounded-lg p-6">
<View className="flex flex-col items-center justify-center">
<Text className="text-gray-500 mb-3">{error}</Text>
<Button size="small" type="primary" onClick={() => reload(true)}>
</Button>
</View>
</View>
) : (
<InfiniteLoading
hasMore={hasMore}
onLoadMore={reloadMore}
loadingText={
<View className="flex justify-center items-center py-4">
<Loading />
<View className="ml-2">...</View>
</View>
}
loadMoreText={
displayList.length === 0 ? (
<View className="bg-white rounded-lg p-6">
<Empty description="暂无配送订单" />
</View>
) : (
<View className="text-center py-4 text-gray-500"></View>
)
}
>
{displayList.map(o => {
const qty = Number(o.totalNum || 0)
const timeText = o.createTime ? dayjs(o.createTime).format('YYYY-MM-DD HH:mm') : '-'
const addr = o.address || (o.addressId ? `地址ID${o.addressId}` : '-')
const remark = o.buyerRemarks || o.comments || ''
const ticketNo = o.userTicketId || '-'
const flow1Done = !!o.riderId
const flow2Done =
!!o.sendStartTime || (typeof o.deliveryStatus === 'number' && o.deliveryStatus >= 20)
const flow3Done =
!!o.sendEndTime || (typeof o.deliveryStatus === 'number' && o.deliveryStatus >= 30)
const flow4Done = !!o.receiveConfirmTime || o.deliveryStatus === 40
const phoneToCall = o.phone
const storePhone = o.storePhone
const pickupName = o.warehouseName || o.storeName
const pickupAddr = o.warehouseAddress || o.storeAddress
return (
<Cell key={String(o.id)} style={{ padding: '16px' }}>
<View className="w-full">
<View className="flex justify-between items-center">
<Text className="text-gray-800 font-bold text-sm">{`订单#${o.id}`}</Text>
<Text className={`${getOrderStatusColor(o)} text-sm font-medium`}>{getOrderStatusText(o)}</Text>
</View>
<View className="text-gray-400 text-xs mt-1">{timeText}</View>
<View className="text-gray-400 text-xs mt-1">{ticketNo}</View>
<View className="mt-3 bg-white rounded-lg">
<View className="text-sm text-gray-700">
<Text className="text-gray-500"></Text>
<Text>{addr}</Text>
</View>
<View className="text-sm text-gray-700 mt-1">
<Text className="text-gray-500"></Text>
<Text>
{o.nickname || '-'} {o.phone ? `(${o.phone})` : ''}
</Text>
</View>
<View className="text-sm text-gray-700 mt-1">
<Text className="text-gray-500"></Text>
<Text>{pickupName || '-'}</Text>
</View>
{pickupAddr ? (
<View className="text-sm text-gray-700 mt-1">
<Text className="text-gray-500"></Text>
<Text>{pickupAddr}</Text>
</View>
) : null}
<View className="text-sm text-gray-700 mt-1">
<Text className="text-gray-500"></Text>
<Text>{o.sendTime ? dayjs(o.sendTime).format('YYYY-MM-DD HH:mm') : '-'}</Text>
</View>
<View className="text-sm text-gray-700 mt-1">
<Text className="text-gray-500"></Text>
<Text>{qty || '-'}</Text>
<Text className="text-gray-500 ml-3"></Text>
<Text>{o.storeName || '-'}</Text>
</View>
{o.storePhone ? (
<View className="text-sm text-gray-700 mt-1">
<Text className="text-gray-500"></Text>
<Text>{o.storePhone}</Text>
</View>
) : null}
{remark ? (
<View className="text-sm text-gray-700 mt-1">
<Text className="text-gray-500"></Text>
<Text>{remark}</Text>
</View>
) : null}
{o.sendStartTime ? (
<View className="text-sm text-gray-700 mt-1">
<Text className="text-gray-500"></Text>
<Text>{dayjs(o.sendStartTime).format('YYYY-MM-DD HH:mm')}</Text>
</View>
) : null}
{o.sendEndTime ? (
<View className="text-sm text-gray-700 mt-1">
<Text className="text-gray-500"></Text>
<Text>{dayjs(o.sendEndTime).format('YYYY-MM-DD HH:mm')}</Text>
</View>
) : null}
{o.receiveConfirmTime ? (
<View className="text-sm text-gray-700 mt-1">
<Text className="text-gray-500"></Text>
<Text>{dayjs(o.receiveConfirmTime).format('YYYY-MM-DD HH:mm')}</Text>
</View>
) : null}
{o.sendEndImg ? (
<View className="text-sm text-gray-700 mt-2">
<Text className="text-gray-500"></Text>
<View className="mt-2">
<Image src={o.sendEndImg} width="100%" height="120" />
</View>
</View>
) : null}
</View>
{/* 配送流程 */}
<View className="mt-3 bg-gray-50 rounded-lg p-2 text-xs">
<Text className="text-gray-600"></Text>
<Text className={flow1Done ? 'text-green-600 font-medium' : 'text-gray-400'}>1 </Text>
<Text className="mx-1 text-gray-400">{'>'}</Text>
<Text className={flow2Done ? 'text-blue-600 font-medium' : 'text-gray-400'}>2 </Text>
<Text className="mx-1 text-gray-400">{'>'}</Text>
<Text className={flow3Done ? 'text-purple-600 font-medium' : 'text-gray-400'}>3 </Text>
<Text className="mx-1 text-gray-400">{'>'}</Text>
<Text className={flow4Done ? 'text-green-600 font-medium' : 'text-gray-400'}>4 </Text>
</View>
<View className="mt-3 flex justify-end">
<Space>
{!!phoneToCall && (
<Button
size="small"
onClick={e => {
e.stopPropagation()
Taro.makePhoneCall({ phoneNumber: phoneToCall })
}}
>
</Button>
)}
{!!addr && addr !== '-' && (
<Button
size="small"
onClick={e => {
e.stopPropagation()
void Taro.setClipboardData({ data: addr })
Taro.showToast({ title: '地址已复制', icon: 'none' })
}}
>
</Button>
)}
{!!storePhone && (
<Button
size="small"
onClick={e => {
e.stopPropagation()
Taro.makePhoneCall({ phoneNumber: storePhone })
}}
>
</Button>
)}
{canStartDeliver(o) && (
<Button
size="small"
onClick={e => {
e.stopPropagation()
void handleStartDeliver(o)
}}
>
</Button>
)}
{canConfirmDelivered(o) && (
<Button
size="small"
type="primary"
onClick={e => {
e.stopPropagation()
openDeliverDialog(o, { mode: 'waitCustomerConfirm' })
}}
>
</Button>
)}
{canCompleteByPhoto(o) && (
<Button
size="small"
type="primary"
onClick={e => {
e.stopPropagation()
openDeliverDialog(o, { mode: 'photoComplete' })
}}
>
</Button>
)}
</Space>
</View>
</View>
</Cell>
)
})}
</InfiniteLoading>
)}
</PullToRefresh>
</View>
<Dialog
title="确认送达"
visible={deliverDialogVisible}
confirmText={
deliverSubmitting
? '提交中...'
: deliverConfirmMode === 'photoComplete'
? '拍照完成'
: '确认送达'
}
cancelText="取消"
onConfirm={handleConfirmDelivered}
onCancel={() => {
if (deliverSubmitting) return
setDeliverDialogVisible(false)
setDeliverOrder(null)
setDeliverImg(undefined)
setDeliverConfirmMode('photoComplete')
}}
>
<View className="text-sm text-gray-700">
<View></View>
<View className="mt-3">
<RadioGroup value={deliverConfirmMode} onChange={v => setDeliverConfirmMode(v as DeliverConfirmMode)}>
<Radio value="photoComplete"></Radio>
<Radio value="waitCustomerConfirm"></Radio>
</RadioGroup>
</View>
<View className="mt-3">
<Button size="small" onClick={handleChooseDeliverImg}>
{deliverImg ? '重新拍照/上传' : '拍照/上传'}
</Button>
</View>
{deliverImg && (
<View className="mt-3">
<Image src={deliverImg} width="100%" height="120" />
<View className="mt-2 flex justify-end">
<Button size="small" onClick={() => setDeliverImg(undefined)}>
</Button>
</View>
</View>
)}
<View className="mt-3 text-xs text-gray-500">
</View>
</View>
</Dialog>
</View>
)
}

View File

@@ -0,0 +1,5 @@
export default definePageConfig({
navigationBarTitleText: '立即送水',
navigationBarTextStyle: 'black',
navigationBarBackgroundColor: '#ffffff'
})

116
src/user/ticket/use.scss Normal file
View File

@@ -0,0 +1,116 @@
.order-confirm-page {
padding-bottom: 100px; // 留出底部固定按钮的空间
.error-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 20px;
text-align: center;
.error-text {
color: #999;
margin-bottom: 20px;
font-size: 14px;
}
}
.fixed-bottom {
position: fixed;
bottom: 0;
left: 0;
right: 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
background-color: #fff;
border-top: 1px solid #eee;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
.total-price {
display: flex;
align-items: center;
}
.submit-btn {
width: 150px;
}
}
}
.address-bottom-line{
width: 100%;
border-radius: 12rpx 12rpx 0 0;
background: #fff;
padding: 26rpx 49rpx 0 34rpx;
position: relative;
&:before {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 5px;
background: repeating-linear-gradient(-45deg, #ff6c6c, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0,
#1989fa 45%, transparent 0, transparent 50%);
background-size: 120px;
content: "";
}
}
// 优惠券弹窗样式
.coupon-popup {
height: 100%;
display: flex;
flex-direction: column;
&__header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px;
border-bottom: 1px solid #f0f0f0;
}
&__title {
font-size: 16px;
font-weight: 600;
color: #333;
}
&__content {
flex: 1;
overflow-y: auto;
}
&__loading {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
color: #999;
font-size: 14px;
}
&__current {
padding: 16px;
background: #f8f9fa;
border-bottom: 1px solid #f0f0f0;
&-title {
font-size: 28rpx;
color: #666;
margin-bottom: 8px;
}
&-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8rpx 12rpx;
background: #fff;
border-radius: 6rpx;
font-size: 28rpx;
}
}
}

1296
src/user/ticket/use.tsx Normal file

File diff suppressed because it is too large Load Diff

View File

@@ -12,7 +12,6 @@ import {
import {UserVerify} from "@/api/system/userVerify/model";
import {addUserVerify, myUserVerify, updateUserVerify} from "@/api/system/userVerify";
import {uploadFile} from "@/api/system/file";
import {pushReviewReminder} from "@/api/sdy/sdyTemplateMessage";
function Index() {
const [isUpdate, setIsUpdate] = useState<boolean>(false)
@@ -54,17 +53,17 @@ function Index() {
const submitSucceed = (values: any) => {
console.log('提交表单', values);
if (FormData.status != 2 && FormData.status != undefined) return false;
if (FormData.type == 0) {
if (!FormData.sfz1 || !FormData.sfz2) {
if (FormData.type == 0 || FormData.type == 1) {
if (!FormData.realName || !FormData.idCard) {
Taro.showToast({
title: '请上传身份证正反面',
title: '请填写真实姓名和身份证号码',
icon: 'none'
});
return false;
}
if (!FormData.realName || !FormData.idCard) {
if (!FormData.sfz1 || !FormData.sfz2) {
Taro.showToast({
title: '请填写真实姓名和身份证号码',
title: '请上传身份证正反面',
icon: 'none'
});
return false;
@@ -86,22 +85,9 @@ function Index() {
return false;
}
}
if(!FormData.realName){
Taro.showToast({
title: '请填写真实姓名',
icon: 'none'
});
return false;
}
const saveOrUpdate = isUpdate ? updateUserVerify : addUserVerify;
saveOrUpdate({...FormData, status: 0}).then(() => {
Taro.showToast({title: `提交成功`, icon: 'success'})
if(!isUpdate){
// 发送派单成功提醒 0FBKFCWXe8WyjReYXwSDEXf1-pxYKQXE0quZre3GYIM
pushReviewReminder({
realName: FormData.realName,
}).then()
}
setTimeout(() => {
return Taro.navigateBack()
}, 1000)
@@ -192,9 +178,9 @@ function Index() {
<Radio key={0} value={0}>
</Radio>
{/*<Radio key={1} value={1}>*/}
{/* 企业*/}
{/*</Radio>*/}
<Radio key={1} value={1}>
</Radio>
</Radio.Group>
</Form.Item>
{
@@ -256,6 +242,54 @@ function Index() {
// 企业类型
FormData.type == 1 && (
<>
<Form.Item
label={'真实姓名'}
name="realName"
required
initialValue={FormData.realName}
rules={[{message: '请输入真实姓名'}]}
>
<Input
placeholder={'请输入真实姓名'}
type="text"
disabled={FormData.status != 2 && FormData.status != undefined}
value={FormData?.realName}
onChange={(value) => setFormData({...FormData, realName: value})}
/>
</Form.Item>
<Form.Item
label={'身份证号码'}
name="idCard"
required
initialValue={FormData.idCard}
rules={[{message: '请输入身份证号码'}]}
>
<Input
placeholder="请输入身份证号码"
type="text"
value={FormData?.idCard}
disabled={FormData.status != 2 && FormData.status != undefined}
maxLength={18}
onChange={(value) => setFormData({...FormData, idCard: value})}
/>
</Form.Item>
<Form.Item
label={'上传证件'}
name="image"
required
rules={[{message: '请上传身份证正反面'}]}
>
<div className={'flex gap-2'}>
<div onClick={uploadSfz1}>
<Image src={FormData.sfz1} lazyLoad={false}
radius="10%" width="80" height="80"/>
</div>
<div onClick={uploadSfz2}>
<Image src={FormData.sfz2} mode={'scaleToFill'} lazyLoad={false}
radius="10%" width="80" height="80"/>
</div>
</div>
</Form.Item>
<Form.Item
label={'主体名称'}
name="name"
@@ -267,6 +301,7 @@ function Index() {
placeholder={'请输入主体名称'}
type="text"
value={FormData?.name}
disabled={FormData.status != 2 && FormData.status != undefined}
onChange={(value) => setFormData({...FormData, name: value})}
/>
</Form.Item>
@@ -281,6 +316,7 @@ function Index() {
placeholder="请输入营业执照号码"
type="text"
value={FormData?.zzCode}
disabled={FormData.status != 2 && FormData.status != undefined}
maxLength={18}
onChange={(value) => setFormData({...FormData, zzCode: value})}
/>