remove(feature): 删除经销商申请、用户地址管理和聊天消息功能模块
- 移除经销商申请相关页面配置和业务逻辑代码 - 删除用户地址管理功能的所有配置文件和实现组件 - 清理聊天消息发送功能的相关页面配置和业务代码 - 移除相关的API调用和数据模型引用 - 删除页面导航配置和相关的工具函数引用
This commit is contained in:
@@ -1,4 +0,0 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '新增收货地址',
|
||||
navigationBarTextStyle: 'black'
|
||||
})
|
||||
@@ -1,646 +0,0 @@
|
||||
import {useEffect, useState, useRef} from "react";
|
||||
import {useRouter} from '@tarojs/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'
|
||||
import {Address} from '@nutui/nutui-react-taro'
|
||||
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();
|
||||
const [loading, setLoading] = useState<boolean>(true)
|
||||
const [text, setText] = useState<string>('')
|
||||
const [optionsDemo1, setOptionsDemo1] = useState([])
|
||||
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 {
|
||||
const address = await getShopUserAddress(addressId)
|
||||
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({
|
||||
title: '加载地址失败',
|
||||
icon: 'error'
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理地区数据
|
||||
*/
|
||||
function setRegionData() {
|
||||
// @ts-ignore
|
||||
setOptionsDemo1(RegionData?.map((a) => {
|
||||
return {
|
||||
value: a.label,
|
||||
text: a.label,
|
||||
children: a.children?.map((b) => {
|
||||
return {
|
||||
value: b.label,
|
||||
text: b.label,
|
||||
children: b.children?.map((c) => {
|
||||
return {
|
||||
value: c.label,
|
||||
text: c.label
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}))
|
||||
}
|
||||
|
||||
/**
|
||||
* 地址识别功能
|
||||
*/
|
||||
const recognizeAddress = () => {
|
||||
if (!inputText.trim()) {
|
||||
Taro.showToast({
|
||||
title: '请输入要识别的文本',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const result = parseAddressText(inputText);
|
||||
|
||||
// 更新表单数据
|
||||
const newFormData = {
|
||||
...FormData,
|
||||
name: result.name || FormData.name,
|
||||
phone: result.phone || FormData.phone,
|
||||
address: result.address || FormData.address,
|
||||
province: result.province || FormData.province,
|
||||
city: result.city || FormData.city,
|
||||
region: result.region || FormData.region
|
||||
};
|
||||
|
||||
setFormData(newFormData);
|
||||
|
||||
// 更新地区显示文本
|
||||
if (result.province && result.city && result.region) {
|
||||
setText(`${result.province} ${result.city} ${result.region}`);
|
||||
}
|
||||
|
||||
// 更新表单字段值
|
||||
if (formRef.current) {
|
||||
formRef.current.setFieldsValue(newFormData);
|
||||
}
|
||||
|
||||
Taro.showToast({
|
||||
title: '识别成功',
|
||||
icon: 'success'
|
||||
});
|
||||
|
||||
// 清空输入框
|
||||
setInputText('');
|
||||
|
||||
} catch (error) {
|
||||
Taro.showToast({
|
||||
title: '识别失败，请检查文本格式',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 解析地址文本
|
||||
*/
|
||||
const parseAddressText = (text: string) => {
|
||||
const result: any = {};
|
||||
|
||||
// 手机号正则 (11位数字)
|
||||
const phoneRegex = /1[3-9]\d{9}/;
|
||||
const phoneMatch = text.match(phoneRegex);
|
||||
if (phoneMatch) {
|
||||
result.phone = phoneMatch[0];
|
||||
}
|
||||
|
||||
// 姓名正则 (2-4个中文字符，通常在开头)
|
||||
const nameRegex = /^[\u4e00-\u9fa5]{2,4}/;
|
||||
const nameMatch = text.match(nameRegex);
|
||||
if (nameMatch) {
|
||||
result.name = nameMatch[0];
|
||||
}
|
||||
|
||||
// 省市区识别
|
||||
const regionResult = parseRegion(text);
|
||||
if (regionResult) {
|
||||
result.province = regionResult.province;
|
||||
result.city = regionResult.city;
|
||||
result.region = regionResult.region;
|
||||
}
|
||||
|
||||
// 详细地址提取 (去除姓名、手机号、省市区后的剩余部分)
|
||||
let addressText = text;
|
||||
if (result.name) {
|
||||
addressText = addressText.replace(result.name, '');
|
||||
}
|
||||
if (result.phone) {
|
||||
addressText = addressText.replace(result.phone, '');
|
||||
}
|
||||
if (result.province) {
|
||||
addressText = addressText.replace(result.province, '');
|
||||
}
|
||||
if (result.city) {
|
||||
addressText = addressText.replace(result.city, '');
|
||||
}
|
||||
if (result.region) {
|
||||
addressText = addressText.replace(result.region, '');
|
||||
}
|
||||
|
||||
// 清理地址文本
|
||||
result.address = addressText.replace(/[，,。\s]+/g, '').trim();
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
/**
|
||||
* 解析省市区
|
||||
*/
|
||||
const parseRegion = (text: string) => {
|
||||
// @ts-ignore
|
||||
for (const province of RegionData) {
|
||||
if (text.includes(province.label)) {
|
||||
const result: any = { province: province.label };
|
||||
|
||||
// 查找城市
|
||||
if (province.children) {
|
||||
for (const city of province.children) {
|
||||
if (text.includes(city.label)) {
|
||||
result.city = city.label;
|
||||
|
||||
// 查找区县
|
||||
if (city.children) {
|
||||
for (const region of city.children) {
|
||||
if (text.includes(region.label)) {
|
||||
result.region = region.label;
|
||||
return result;
|
||||
}
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}
|
||||
}
|
||||
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 // 新增或编辑的地址都设为默认地址
|
||||
};
|
||||
|
||||
// 如果是编辑模式，添加id
|
||||
if (isEditMode && addressId) {
|
||||
submitData.id = addressId;
|
||||
}
|
||||
|
||||
// 先处理默认地址逻辑
|
||||
const defaultAddress = await listShopUserAddress({isDefault: true});
|
||||
if (defaultAddress && defaultAddress.length > 0) {
|
||||
// 如果当前编辑的不是默认地址，或者是新增地址，需要取消其他默认地址
|
||||
if (!isEditMode || (isEditMode && defaultAddress[0].id !== addressId)) {
|
||||
await updateShopUserAddress({
|
||||
...defaultAddress[0],
|
||||
isDefault: false
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 执行新增或更新操作
|
||||
if (isEditMode) {
|
||||
await updateShopUserAddress(submitData);
|
||||
} else {
|
||||
await addShopUserAddress(submitData);
|
||||
}
|
||||
|
||||
Taro.showToast({
|
||||
title: `${isEditMode ? '更新' : '保存'}成功`,
|
||||
icon: 'success'
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
Taro.navigateBack();
|
||||
}, 1000);
|
||||
|
||||
} catch (error) {
|
||||
console.error('保存失败:', error);
|
||||
Taro.showToast({
|
||||
title: `${isEditMode ? '更新' : '保存'}失败`,
|
||||
icon: 'error'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const submitFailed = (error: any) => {
|
||||
console.log(error, 'err...')
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
// 动态设置页面标题
|
||||
Taro.setNavigationBarTitle({
|
||||
title: isEditMode ? '编辑收货地址' : (fromWx ? '完善收货地址' : '新增收货地址')
|
||||
});
|
||||
|
||||
reload().then(() => {
|
||||
setLoading(false)
|
||||
})
|
||||
}, [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>
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Form
|
||||
ref={formRef}
|
||||
divider
|
||||
initialValues={FormData}
|
||||
labelPosition="left"
|
||||
onFinish={(values) => submitSucceed(values)}
|
||||
onFinishFailed={(errors) => submitFailed(errors)}
|
||||
>
|
||||
<CellGroup className={'px-3'}>
|
||||
<div
|
||||
style={{
|
||||
border: '1px dashed #22c55e',
|
||||
display: 'flex',
|
||||
alignItems: 'flex-end',
|
||||
justifyContent: 'space-between',
|
||||
padding: '4px',
|
||||
position: 'relative'
|
||||
}}>
|
||||
|
||||
<TextArea
|
||||
style={{height: '100px'}}
|
||||
value={inputText}
|
||||
onChange={(value) => setInputText(value)}
|
||||
placeholder={'请粘贴或输入文本，点击"识别"自动识别收货人姓名、地址、电话'}
|
||||
/>
|
||||
<Button
|
||||
icon={<Scan/>}
|
||||
style={{position: 'absolute', right: '10px', bottom: '10px'}}
|
||||
type="success"
|
||||
size={'small'}
|
||||
fill="dashed"
|
||||
onClick={recognizeAddress}
|
||||
>
|
||||
识别
|
||||
</Button>
|
||||
</div>
|
||||
</CellGroup>
|
||||
<View className={'bg-gray-100 h-3'}></View>
|
||||
<CellGroup style={{padding: '4px 0'}}>
|
||||
<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}
|
||||
rules={[
|
||||
{ required: true, message: '请输入手机号' },
|
||||
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号' }
|
||||
]}
|
||||
required
|
||||
>
|
||||
<Input placeholder="请输入手机号" maxLength={11}/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="所在地区"
|
||||
name="region"
|
||||
initialValue={FormData.region}
|
||||
rules={[{message: '请输入您的所在地区'}]}
|
||||
required
|
||||
>
|
||||
<div className={'flex justify-between items-center'} onClick={() => setVisible(true)}>
|
||||
<Input placeholder="选择所在地区" value={text} disabled/>
|
||||
<ArrowRight className={'text-gray-400'}/>
|
||||
</div>
|
||||
</Form.Item>
|
||||
<Form.Item name="address" label="收货地址" initialValue={FormData.address} required>
|
||||
<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
|
||||
visible={visible}
|
||||
options={optionsDemo1}
|
||||
title="选择地址"
|
||||
onChange={(value, _) => {
|
||||
setFormData({
|
||||
...FormData,
|
||||
province: `${value[0]}`,
|
||||
city: `${value[1]}`,
|
||||
region: `${value[2]}`
|
||||
})
|
||||
setText(value.join(' '))
|
||||
}}
|
||||
onClose={() => setVisible(false)}
|
||||
/>
|
||||
|
||||
{/* 底部浮动按钮 */}
|
||||
<FixedButton
|
||||
text={isEditMode ? '更新地址' : '保存并使用'}
|
||||
onClick={() => {
|
||||
// 触发表单提交
|
||||
if (formRef.current) {
|
||||
formRef.current.submit();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddUserAddress;
|
||||
@@ -1,4 +0,0 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '配送管理',
|
||||
navigationBarTextStyle: 'black'
|
||||
})
|
||||
@@ -1,3 +0,0 @@
|
||||
:root {
|
||||
|
||||
}
|
||||
@@ -1,219 +0,0 @@
|
||||
import {useState} from "react";
|
||||
import Taro, {useDidShow} from '@tarojs/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')
|
||||
})
|
||||
.then(data => {
|
||||
setList(data || [])
|
||||
// 默认地址
|
||||
setAddress(data.find(item => item.isDefault))
|
||||
})
|
||||
.catch(() => {
|
||||
Taro.showToast({
|
||||
title: '获取地址失败',
|
||||
icon: 'error'
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
const onDefault = async (item: ShopUserAddress) => {
|
||||
if (item.isDefault) return
|
||||
|
||||
if (address) {
|
||||
await updateShopUserAddress({
|
||||
...address,
|
||||
isDefault: false
|
||||
})
|
||||
}
|
||||
await updateShopUserAddress({
|
||||
...item,
|
||||
isDefault: true,
|
||||
})
|
||||
Taro.showToast({
|
||||
title: '设置成功',
|
||||
icon: 'success'
|
||||
});
|
||||
// 设置默认地址通常是“选择地址”的动作：成功后返回上一页，体验更顺滑
|
||||
setTimeout(async () => {
|
||||
const backed = await safeNavigateBack()
|
||||
if (!backed) reload()
|
||||
}, 400)
|
||||
}
|
||||
|
||||
const onDel = async (id?: number) => {
|
||||
await removeShopUserAddress(id)
|
||||
Taro.showToast({
|
||||
title: '删除成功',
|
||||
icon: 'success'
|
||||
});
|
||||
reload();
|
||||
}
|
||||
|
||||
const selectAddress = async (item: ShopUserAddress) => {
|
||||
if (item.isDefault) {
|
||||
const backed = await safeNavigateBack()
|
||||
if (!backed) reload()
|
||||
return
|
||||
}
|
||||
|
||||
if (address) {
|
||||
await updateShopUserAddress({
|
||||
...address,
|
||||
isDefault: false
|
||||
})
|
||||
}
|
||||
await updateShopUserAddress({
|
||||
...item,
|
||||
isDefault: true,
|
||||
})
|
||||
setTimeout(async () => {
|
||||
const backed = await safeNavigateBack()
|
||||
if (!backed) reload()
|
||||
}, 500)
|
||||
}
|
||||
|
||||
useDidShow(() => {
|
||||
reload()
|
||||
});
|
||||
|
||||
if (list.length == 0) {
|
||||
return (
|
||||
<ConfigProvider>
|
||||
<div className={'h-full flex flex-col justify-center items-center'} style={{
|
||||
height: 'calc(100vh - 300px)',
|
||||
}}>
|
||||
<Empty
|
||||
style={{
|
||||
backgroundColor: 'transparent'
|
||||
}}
|
||||
description="您还没有地址哦"
|
||||
/>
|
||||
<Space>
|
||||
<Button onClick={() => Taro.navigateTo({url: '/user/address/add'})}>新增地址</Button>
|
||||
{/*<Button type="success" fill="dashed"*/}
|
||||
{/* onClick={() => Taro.navigateTo({url: '/user/address/wxAddress'})}>获取微信地址</Button>*/}
|
||||
</Space>
|
||||
</div>
|
||||
</ConfigProvider>
|
||||
)
|
||||
}
|
||||
|
||||
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>*/}
|
||||
{list.map((item, _) => (
|
||||
<Cell.Group>
|
||||
<Cell className={'flex flex-col gap-1'} onClick={() => selectAddress(item)}>
|
||||
<View>
|
||||
<View className={'font-medium text-sm'}>{item.name} {item.phone}</View>
|
||||
</View>
|
||||
<View className={'text-xs'}>
|
||||
{item.province} {item.city} {item.region} {item.address}
|
||||
</View>
|
||||
</Cell>
|
||||
<Cell
|
||||
align="center"
|
||||
title={
|
||||
<View className={'flex items-center gap-1'} onClick={() => onDefault(item)}>
|
||||
{item.isDefault ? <Checked className={'text-green-600'} size={16}/> : <CheckNormal size={16}/>}
|
||||
<View className={'text-gray-400'}>默认地址</View>
|
||||
</View>
|
||||
}
|
||||
extra={
|
||||
<>
|
||||
<View className={'text-gray-400'} onClick={() => onDel(item.id)}>
|
||||
删除
|
||||
</View>
|
||||
<Divider direction={'vertical'}/>
|
||||
<View className={'text-gray-400'}
|
||||
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>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
</Cell.Group>
|
||||
))}
|
||||
{/* 底部浮动按钮 */}
|
||||
<FixedButton text={'新增地址'} onClick={() => Taro.navigateTo({url: '/user/address/add'})} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Address;
|
||||
@@ -1,4 +0,0 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '我的地址',
|
||||
navigationBarTextStyle: 'black'
|
||||
})
|
||||
@@ -1,61 +0,0 @@
|
||||
import {useEffect} from "react";
|
||||
import Taro from '@tarojs/taro'
|
||||
|
||||
const WxAddress = () => {
|
||||
/**
|
||||
* 从微信API获取用户收货地址
|
||||
* 调用微信原生地址选择界面，获取成功后跳转到“新增收货地址”页面，让用户选择定位后再保存
|
||||
*/
|
||||
const getWeChatAddress = () => {
|
||||
Taro.chooseAddress()
|
||||
.then(async res => {
|
||||
// 仅填充微信地址信息，不要用“当前定位”覆盖经纬度（会造成经纬度与地址不匹配）。
|
||||
// 选择后跳转到“新增/编辑收货地址”页面，让用户手动选择地图定位后再保存。
|
||||
const addressDraft = {
|
||||
name: res.userName,
|
||||
phone: res.telNumber,
|
||||
country: res.nationalCode || '中国',
|
||||
province: res.provinceName,
|
||||
city: res.cityName,
|
||||
region: res.countyName,
|
||||
address: res.detailInfo,
|
||||
isDefault: false,
|
||||
}
|
||||
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 (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)
|
||||
})
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
getWeChatAddress()
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default WxAddress;
|
||||
@@ -1,3 +0,0 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '站内消息'
|
||||
})
|
||||
@@ -1,167 +0,0 @@
|
||||
import {useState, useCallback, useEffect} from 'react'
|
||||
import {View, Text} from '@tarojs/components'
|
||||
import Taro from '@tarojs/taro'
|
||||
import {Loading, InfiniteLoading, Empty, Space, Tag} from '@nutui/nutui-react-taro'
|
||||
import {pageShopChatConversation} from "@/api/shop/shopChatConversation";
|
||||
import FixedButton from "@/components/FixedButton";
|
||||
|
||||
const Index = () => {
|
||||
const [list, setList] = useState<any[]>([])
|
||||
const [loading, setLoading] = useState<boolean>(false)
|
||||
const [page, setPage] = useState(1)
|
||||
const [hasMore, setHasMore] = useState(true)
|
||||
|
||||
// 获取消息数据
|
||||
const fetchMessageData = useCallback(async (resetPage = false, targetPage?: number, searchKeyword?: string) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const currentPage = resetPage ? 1 : (targetPage || page);
|
||||
|
||||
// 构建API参数，根据状态筛选
|
||||
const params: any = {
|
||||
page: currentPage
|
||||
};
|
||||
|
||||
// 添加搜索关键词
|
||||
if (searchKeyword && searchKeyword.trim()) {
|
||||
params.keywords = searchKeyword.trim();
|
||||
}
|
||||
|
||||
const res = await pageShopChatConversation(params);
|
||||
|
||||
if (res?.list && res.list.length > 0) {
|
||||
// 正确映射状态
|
||||
const mappedList = res.list.map(customer => ({
|
||||
...customer
|
||||
}));
|
||||
|
||||
// 如果是重置页面或第一页，直接设置新数据；否则追加数据
|
||||
if (resetPage || currentPage === 1) {
|
||||
setList(mappedList);
|
||||
} else {
|
||||
setList(prevList => prevList.concat(mappedList));
|
||||
}
|
||||
|
||||
// 正确判断是否还有更多数据
|
||||
const hasMoreData = res.list.length >= 10; // 假设每页10条数据
|
||||
setHasMore(hasMoreData);
|
||||
} else {
|
||||
if (resetPage || currentPage === 1) {
|
||||
setList([]);
|
||||
}
|
||||
setHasMore(false);
|
||||
}
|
||||
|
||||
setPage(currentPage);
|
||||
} catch (error) {
|
||||
console.error('获取消息数据失败:', error);
|
||||
Taro.showToast({
|
||||
title: '加载失败，请重试',
|
||||
icon: 'none'
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [page]);
|
||||
|
||||
const reloadMore = async () => {
|
||||
if (loading || !hasMore) return; // 防止重复加载
|
||||
const nextPage = page + 1;
|
||||
await fetchMessageData(false, nextPage);
|
||||
}
|
||||
|
||||
|
||||
// 获取列表数据（现在使用服务端搜索，不需要消息端过滤）
|
||||
const getFilteredList = () => {
|
||||
return list;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
// 初始化时加载数据
|
||||
fetchMessageData(true, 1, '');
|
||||
}, []);
|
||||
|
||||
// 渲染消息项
|
||||
const renderMessageItem = (customer: any) => (
|
||||
<View key={customer.userId} className="bg-white rounded-lg p-4 mb-3 shadow-sm">
|
||||
<View className="flex items-center">
|
||||
<View className="flex-1">
|
||||
<View className="flex items-center justify-between mb-1">
|
||||
<Text className="font-semibold text-gray-800 mr-2">
|
||||
关于XXXX的通知
|
||||
</Text>
|
||||
<Tag type={'warning'}>未读</Tag>
|
||||
{/*<Tag type={'success'}>已读</Tag>*/}
|
||||
</View>
|
||||
<Space direction={'vertical'}>
|
||||
{/*<Text className="text-xs text-gray-500">统一代码：{customer.dealerCode}</Text>*/}
|
||||
<Text className="text-xs text-gray-500">
|
||||
创建时间：{customer.createTime}
|
||||
</Text>
|
||||
</Space>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
|
||||
// 渲染消息列表
|
||||
const renderMessageList = () => {
|
||||
const filteredList = getFilteredList();
|
||||
|
||||
return (
|
||||
<View className="p-4" style={{
|
||||
height: '90vh',
|
||||
overflowY: 'auto',
|
||||
overflowX: 'hidden'
|
||||
}}>
|
||||
<InfiniteLoading
|
||||
target="scroll"
|
||||
hasMore={hasMore}
|
||||
onLoadMore={reloadMore}
|
||||
onScroll={() => {
|
||||
// 滚动事件处理
|
||||
}}
|
||||
onScrollToUpper={() => {
|
||||
// 滚动到顶部事件处理
|
||||
}}
|
||||
loadingText={
|
||||
<>
|
||||
加载中...
|
||||
</>
|
||||
}
|
||||
loadMoreText={
|
||||
filteredList.length === 0 ? (
|
||||
<Empty
|
||||
style={{backgroundColor: 'transparent'}}
|
||||
description={loading ? "加载中..." : "暂无消息数据"}
|
||||
/>
|
||||
) : (
|
||||
<View className={'h-12 flex items-center justify-center'}>
|
||||
<Text className="text-gray-500 text-sm">没有更多了</Text>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
>
|
||||
{loading && filteredList.length === 0 ? (
|
||||
<View className="flex items-center justify-center py-8">
|
||||
<Loading/>
|
||||
<Text className="text-gray-500 mt-2 ml-2">加载中...</Text>
|
||||
</View>
|
||||
) : (
|
||||
filteredList.map(renderMessageItem)
|
||||
)}
|
||||
</InfiniteLoading>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<View className="min-h-screen bg-gray-50">
|
||||
{/* 消息列表 */}
|
||||
{renderMessageList()}
|
||||
<FixedButton />
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
export default Index;
|
||||
@@ -1,4 +0,0 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '发送消息',
|
||||
navigationBarTextStyle: 'black'
|
||||
})
|
||||
@@ -1,135 +0,0 @@
|
||||
import {useEffect, useState, useRef} from "react";
|
||||
import {useRouter} from '@tarojs/taro'
|
||||
import {Loading, CellGroup, Input, Form, Cell, Avatar} from '@nutui/nutui-react-taro'
|
||||
import {ArrowRight} from '@nutui/icons-react-taro'
|
||||
import {View, Text} from '@tarojs/components'
|
||||
import Taro from '@tarojs/taro'
|
||||
import FixedButton from "@/components/FixedButton";
|
||||
import {addShopChatMessage} from "@/api/shop/shopChatMessage";
|
||||
import {ShopChatMessage} from "@/api/shop/shopChatMessage/model";
|
||||
import navTo from "@/utils/common";
|
||||
import {getUser} from "@/api/system/user";
|
||||
import {User} from "@/api/system/user/model";
|
||||
|
||||
const AddMessage = () => {
|
||||
const {params} = useRouter();
|
||||
const [toUser, setToUser] = useState<User>()
|
||||
const [loading, setLoading] = useState<boolean>(true)
|
||||
const [FormData, _] = useState<ShopChatMessage>()
|
||||
const formRef = useRef<any>(null)
|
||||
|
||||
// 判断是编辑还是新增模式
|
||||
const isEditMode = !!params.id
|
||||
const toUserId = params.id ? Number(params.id) : undefined
|
||||
|
||||
const reload = async () => {
|
||||
if(toUserId){
|
||||
getUser(Number(toUserId)).then(data => {
|
||||
setToUser(data)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 提交表单
|
||||
const submitSucceed = async (values: any) => {
|
||||
try {
|
||||
// 准备提交的数据
|
||||
const submitData = {
|
||||
...values
|
||||
};
|
||||
|
||||
console.log('提交数据:', submitData)
|
||||
|
||||
// 参数校验
|
||||
if(!toUser){
|
||||
Taro.showToast({
|
||||
title: `请选择发送对象`,
|
||||
icon: 'error'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
// 判断内容是否为空
|
||||
if (!values.content) {
|
||||
Taro.showToast({
|
||||
title: `请输入内容`,
|
||||
icon: 'error'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
// 执行新增或更新操作
|
||||
await addShopChatMessage({
|
||||
toUserId: toUserId,
|
||||
formUserId: Taro.getStorageSync('UserId'),
|
||||
type: 'text',
|
||||
content: values.content
|
||||
});
|
||||
|
||||
Taro.showToast({
|
||||
title: `发送成功`,
|
||||
icon: 'success'
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
Taro.navigateBack();
|
||||
}, 1000);
|
||||
|
||||
} catch (error) {
|
||||
console.error('发送失败:', error);
|
||||
Taro.showToast({
|
||||
title: `发送失败`,
|
||||
icon: 'error'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const submitFailed = (error: any) => {
|
||||
console.log(error, 'err...')
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
reload().then(() => {
|
||||
setLoading(false)
|
||||
})
|
||||
}, [isEditMode]);
|
||||
|
||||
if (loading) {
|
||||
return <Loading className={'px-2'}>加载中</Loading>
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Cell title={toUser ? (
|
||||
<View className={'flex items-center'}>
|
||||
<Avatar src={toUser.avatar}/>
|
||||
<View className={'ml-2 flex flex-col'}>
|
||||
<Text>{toUser.alias || toUser.nickname}</Text>
|
||||
<Text className={'text-gray-300'}>{toUser.mobile}</Text>
|
||||
</View>
|
||||
</View>
|
||||
) : '选择发送对象'} extra={(
|
||||
<ArrowRight color="#cccccc" className={toUser ? 'mt-2' : ''} size={toUser ? 20 : 18}/>
|
||||
)}
|
||||
onClick={() => navTo(`/dealer/team/index`, true)}/>
|
||||
<Form
|
||||
ref={formRef}
|
||||
divider
|
||||
initialValues={FormData}
|
||||
labelPosition="left"
|
||||
onFinish={(values) => submitSucceed(values)}
|
||||
onFinishFailed={(errors) => submitFailed(errors)}
|
||||
>
|
||||
<CellGroup style={{padding: '4px 0'}}>
|
||||
<Form.Item name="content" initialValue={FormData?.content} required>
|
||||
<Input placeholder="填写消息内容" maxLength={300}/>
|
||||
</Form.Item>
|
||||
</CellGroup>
|
||||
</Form>
|
||||
|
||||
{/* 底部浮动按钮 */}
|
||||
<FixedButton text={isEditMode ? '立即发送' : '立即发送'} onClick={() => formRef.current?.submit()}/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddMessage;
|
||||
@@ -1,4 +0,0 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '查看消息',
|
||||
navigationBarTextStyle: 'black'
|
||||
})
|
||||
@@ -1,77 +0,0 @@
|
||||
import {useEffect, useState} from "react";
|
||||
import {useRouter} from '@tarojs/taro'
|
||||
import {CellGroup, Cell, Loading, Avatar} from '@nutui/nutui-react-taro'
|
||||
import {View,Text} from '@tarojs/components'
|
||||
import {ArrowRight} from '@nutui/icons-react-taro'
|
||||
import {getShopChatMessage, updateShopChatMessage} from "@/api/shop/shopChatMessage";
|
||||
import {ShopChatMessage} from "@/api/shop/shopChatMessage/model";
|
||||
import navTo from "@/utils/common";
|
||||
|
||||
const AddMessageDetail = () => {
|
||||
const {params} = useRouter();
|
||||
const [loading, setLoading] = useState<boolean>(true)
|
||||
const [item, setItem] = useState<ShopChatMessage>()
|
||||
|
||||
const reload = () => {
|
||||
const id = params.id ? Number(params.id) : undefined
|
||||
if (id) {
|
||||
getShopChatMessage(id).then(data => {
|
||||
setItem(data)
|
||||
setLoading(false)
|
||||
updateShopChatMessage({
|
||||
...data,
|
||||
status: 1
|
||||
}).then(() => {
|
||||
console.log('设为已读')
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
reload()
|
||||
}, []);
|
||||
|
||||
if (loading) {
|
||||
return <Loading className={'px-2'}>加载中</Loading>
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Cell style={{
|
||||
display: 'none'
|
||||
}} title={item?.formUserId ? (
|
||||
<View className={'flex items-center'}>
|
||||
<Avatar src={item.formUserAvatar}/>
|
||||
<View className={'ml-2 flex flex-col'}>
|
||||
<Text>{item.formUserAlias || item.formUserName}</Text>
|
||||
<Text className={'text-gray-300'}>{item.formUserPhone}</Text>
|
||||
</View>
|
||||
</View>
|
||||
) : '选择发送对象'} extra={(
|
||||
<ArrowRight color="#cccccc" className={item ? 'mt-2' : ''} size={item ? 20 : 18}/>
|
||||
)}
|
||||
onClick={() => navTo(`/dealer/team/index`, true)}/>
|
||||
<CellGroup>
|
||||
<Cell title={'发布人'} extra={item?.formUserAlias || item?.formUserName}/>
|
||||
<Cell title={'创建时间'} extra={item?.createTime}/>
|
||||
<Cell title={'状态'} extra={
|
||||
item?.status === 0 ? '未读' : '已读'
|
||||
}/>
|
||||
{/*<Cell title={(*/}
|
||||
{/* <>*/}
|
||||
{/* <Text>{'消息内容：'}</Text>*/}
|
||||
{/* <Text>{item?.content}</Text>*/}
|
||||
{/* </>*/}
|
||||
{/*)} />*/}
|
||||
</CellGroup>
|
||||
<CellGroup>
|
||||
<Cell title={(
|
||||
<Text>{item?.content}</Text>
|
||||
)} />
|
||||
</CellGroup>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddMessageDetail;
|
||||
@@ -1,3 +0,0 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '我的消息'
|
||||
})
|
||||
@@ -1,179 +0,0 @@
|
||||
import {useState, useCallback, useEffect} from 'react'
|
||||
import {View, Text} from '@tarojs/components'
|
||||
import Taro from '@tarojs/taro'
|
||||
import {Loading, InfiniteLoading, Empty, Avatar, Badge} from '@nutui/nutui-react-taro'
|
||||
import FixedButton from "@/components/FixedButton";
|
||||
import {ShopChatMessage} from "@/api/shop/shopChatMessage/model";
|
||||
import {pageShopChatMessage} from "@/api/shop/shopChatMessage";
|
||||
import navTo from "@/utils/common";
|
||||
|
||||
const MessageIndex = () => {
|
||||
const [list, setList] = useState<ShopChatMessage[]>([])
|
||||
const [loading, setLoading] = useState<boolean>(false)
|
||||
const [page, setPage] = useState(1)
|
||||
const [hasMore, setHasMore] = useState(true)
|
||||
|
||||
// 获取消息数据
|
||||
const fetchMessageData = useCallback(async (resetPage = false, targetPage?: number, searchKeyword?: string) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const currentPage = resetPage ? 1 : (targetPage || page);
|
||||
|
||||
// 构建API参数，根据状态筛选
|
||||
const params: any = {
|
||||
type: 'text',
|
||||
page: currentPage,
|
||||
toUserId: Taro.getStorageSync('UserId')
|
||||
};
|
||||
|
||||
// 添加搜索关键词
|
||||
if (searchKeyword && searchKeyword.trim()) {
|
||||
params.keywords = searchKeyword.trim();
|
||||
}
|
||||
|
||||
const res = await pageShopChatMessage(params);
|
||||
|
||||
if (res?.list && res.list.length > 0) {
|
||||
// 正确映射状态
|
||||
const mappedList = res.list.map(customer => ({
|
||||
...customer
|
||||
}));
|
||||
|
||||
// 如果是重置页面或第一页，直接设置新数据；否则追加数据
|
||||
if (resetPage || currentPage === 1) {
|
||||
setList(mappedList);
|
||||
} else {
|
||||
setList(prevList => prevList.concat(mappedList));
|
||||
}
|
||||
|
||||
// 正确判断是否还有更多数据
|
||||
const hasMoreData = res.list.length >= 10; // 假设每页10条数据
|
||||
setHasMore(hasMoreData);
|
||||
} else {
|
||||
if (resetPage || currentPage === 1) {
|
||||
setList([]);
|
||||
}
|
||||
setHasMore(false);
|
||||
}
|
||||
|
||||
setPage(currentPage);
|
||||
} catch (error) {
|
||||
console.error('获取消息数据失败:', error);
|
||||
Taro.showToast({
|
||||
title: '加载失败，请重试',
|
||||
icon: 'none'
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [page]);
|
||||
|
||||
const reloadMore = async () => {
|
||||
if (loading || !hasMore) return; // 防止重复加载
|
||||
const nextPage = page + 1;
|
||||
await fetchMessageData(false, nextPage);
|
||||
}
|
||||
|
||||
|
||||
// 获取列表数据（现在使用服务端搜索，不需要消息端过滤）
|
||||
const getFilteredList = () => {
|
||||
return list;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
// 初始化时加载数据
|
||||
fetchMessageData(true, 1, '');
|
||||
}, []);
|
||||
|
||||
// 渲染消息项
|
||||
const renderMessageItem = (item: any) => (
|
||||
<View key={item.userId} className="bg-white rounded-lg p-4 mb-3 shadow-sm">
|
||||
<View className="flex items-center" onClick={() => navTo(`/user/chat/message/detail?id=${item.id}`,true)}>
|
||||
<View className="flex-1">
|
||||
<View className="flex items-center justify-between mb-1">
|
||||
<View className={'flex w-full'}>
|
||||
<Badge style={{marginInlineEnd: '10px'}} dot={item.status === 0} top="2" right="4">
|
||||
<Avatar
|
||||
size="40"
|
||||
src={item.formUserAvatar}
|
||||
/>
|
||||
</Badge>
|
||||
<View className="flex flex-col w-full">
|
||||
<View className="flex items-center w-full justify-between">
|
||||
<Text className="font-semibold text-gray-800 mr-2">{item.formUserAlias || item.formUserName}</Text>
|
||||
<Text className="text-xs text-gray-500">
|
||||
{item.createTime}
|
||||
</Text>
|
||||
</View>
|
||||
<Text className="text-gray-500 mt-2 mr-2">
|
||||
{item.content}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
|
||||
// 渲染消息列表
|
||||
const renderMessageList = () => {
|
||||
const filteredList = getFilteredList();
|
||||
|
||||
return (
|
||||
<View className="p-4" style={{
|
||||
height: '90vh',
|
||||
overflowY: 'auto',
|
||||
overflowX: 'hidden'
|
||||
}}>
|
||||
<InfiniteLoading
|
||||
target="scroll"
|
||||
hasMore={hasMore}
|
||||
onLoadMore={reloadMore}
|
||||
onScroll={() => {
|
||||
// 滚动事件处理
|
||||
}}
|
||||
onScrollToUpper={() => {
|
||||
// 滚动到顶部事件处理
|
||||
}}
|
||||
loadingText={
|
||||
<>
|
||||
加载中...
|
||||
</>
|
||||
}
|
||||
loadMoreText={
|
||||
filteredList.length === 0 ? (
|
||||
<Empty
|
||||
style={{backgroundColor: 'transparent'}}
|
||||
description={loading ? "加载中..." : "暂无消息数据"}
|
||||
/>
|
||||
) : (
|
||||
<View className={'h-12 flex items-center justify-center'}>
|
||||
<Text className="text-gray-500 text-sm">没有更多了</Text>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
>
|
||||
{loading && filteredList.length === 0 ? (
|
||||
<View className="flex items-center justify-center py-8">
|
||||
<Loading/>
|
||||
<Text className="text-gray-500 mt-2 ml-2">加载中...</Text>
|
||||
</View>
|
||||
) : (
|
||||
filteredList.map(renderMessageItem)
|
||||
)}
|
||||
</InfiniteLoading>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<View className="min-h-screen bg-gray-50">
|
||||
{/* 消息列表 */}
|
||||
{renderMessageList()}
|
||||
<FixedButton text={'发送消息'} onClick={() => navTo(`/user/chat/message/add`,true)}/>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
export default MessageIndex;
|
||||
@@ -1,3 +0,0 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '公司资料'
|
||||
})
|
||||
@@ -1,54 +0,0 @@
|
||||
import {Cell} from '@nutui/nutui-react-taro';
|
||||
import {ArrowRight} from '@nutui/icons-react-taro'
|
||||
|
||||
function Company() {
|
||||
return (
|
||||
<div className={'p-4'}>
|
||||
<Cell title={
|
||||
<div className={'flex'}>
|
||||
<div className={'title w-16 pr-4'}>企业名称</div>
|
||||
<div className={'extra'}>南宁市网宿信息科技有限公司</div>
|
||||
</div>
|
||||
} align={'center'}/>
|
||||
<div className={'py-2 text-red-100 text-sm'}>经营信息</div>
|
||||
<Cell.Group>
|
||||
{/*<Cell title={*/}
|
||||
{/* <div className={'flex'}>*/}
|
||||
{/* <div className={'title w-16 pr-4'}>商户号</div>*/}
|
||||
{/* <div className={'extra'}>1557418831</div>*/}
|
||||
{/* </div>*/}
|
||||
{/*} align={'center'}/>*/}
|
||||
<Cell title={
|
||||
<div className={'flex'}>
|
||||
<div className={'title w-16 pr-4'}>企业简称</div>
|
||||
<div className={'extra'}>网宿软件</div>
|
||||
</div>
|
||||
} align={'center'}/>
|
||||
<Cell title={
|
||||
<div className={'flex'}>
|
||||
<div className={'title w-16 pr-4'}>联系电话</div>
|
||||
<div className={'extra'}>137****8880</div>
|
||||
</div>
|
||||
} align={'center'}/>
|
||||
</Cell.Group>
|
||||
<div className={'py-2 text-red-100 text-sm'}>主体信息</div>
|
||||
<Cell title={
|
||||
<div className={'flex'}>
|
||||
<div className={'title w-16 pr-4'}>信息详情</div>
|
||||
<div className={'extra'}></div>
|
||||
</div>
|
||||
} align={'center'} extra={<ArrowRight color="#cccccc" size={16} />}/>
|
||||
<div className={'py-2 text-red-100 text-sm'}>企业负责人</div>
|
||||
<Cell.Group>
|
||||
<Cell title={
|
||||
<div className={'flex'}>
|
||||
<div className={'title w-16 pr-4'}>姓名</div>
|
||||
<div className={'extra'}>赵*林</div>
|
||||
</div>
|
||||
} align={'center'}/>
|
||||
</Cell.Group>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Company
|
||||
@@ -1,4 +0,0 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '我的优惠券',
|
||||
navigationBarTextStyle: 'black'
|
||||
})
|
||||
@@ -1,237 +0,0 @@
|
||||
import {useState, useEffect, CSSProperties} from 'react'
|
||||
import Taro from '@tarojs/taro'
|
||||
import {Cell, InfiniteLoading, Tabs, TabPane, Tag, Empty, ConfigProvider} from '@nutui/nutui-react-taro'
|
||||
import {pageShopUserCoupon as pageUserCoupon, getMyAvailableCoupons, getMyUsedCoupons, getMyExpiredCoupons} from "@/api/shop/shopUserCoupon";
|
||||
import {ShopUserCoupon as UserCouponType} from "@/api/shop/shopUserCoupon/model";
|
||||
import {View} from '@tarojs/components'
|
||||
|
||||
const InfiniteUlStyle: CSSProperties = {
|
||||
height: '100vh',
|
||||
width: '100%',
|
||||
padding: '0',
|
||||
overflowY: 'auto',
|
||||
overflowX: 'hidden',
|
||||
}
|
||||
|
||||
const UserCoupon = () => {
|
||||
const [list, setList] = useState<UserCouponType[]>([])
|
||||
const [page, setPage] = useState(1)
|
||||
const [hasMore, setHasMore] = useState(true)
|
||||
const [activeTab, setActiveTab] = useState('0')
|
||||
const [couponCount, setCouponCount] = useState({
|
||||
total: 0,
|
||||
unused: 0,
|
||||
used: 0,
|
||||
expired: 0
|
||||
})
|
||||
|
||||
const tabs = [
|
||||
{ key: '0', title: '全部', status: undefined },
|
||||
{ key: '1', title: '未使用', status: 0 },
|
||||
{ key: '2', title: '已使用', status: 1 },
|
||||
{ key: '3', title: '已过期', status: 2 }
|
||||
]
|
||||
|
||||
useEffect(() => {
|
||||
reload()
|
||||
loadCouponCount()
|
||||
}, [])
|
||||
|
||||
const loadMore = async () => {
|
||||
setPage(page + 1)
|
||||
reload();
|
||||
}
|
||||
|
||||
const reload = () => {
|
||||
const userId = Taro.getStorageSync('UserId')
|
||||
if (!userId) {
|
||||
Taro.showToast({
|
||||
title: '请先登录',
|
||||
icon: 'error'
|
||||
});
|
||||
return
|
||||
}
|
||||
|
||||
const tab = tabs.find(t => t.key === activeTab)
|
||||
pageUserCoupon({
|
||||
userId: parseInt(userId),
|
||||
status: tab?.status,
|
||||
page
|
||||
}).then(res => {
|
||||
console.log(res)
|
||||
const newList = res?.list || [];
|
||||
setList([...list, ...newList])
|
||||
setHasMore(newList.length > 0)
|
||||
}).catch(error => {
|
||||
console.error('Coupon error:', error)
|
||||
Taro.showToast({
|
||||
title: error?.message || '获取失败',
|
||||
icon: 'error'
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
const loadCouponCount = async () => {
|
||||
const userId = Taro.getStorageSync('UserId')
|
||||
if (!userId) return
|
||||
|
||||
try {
|
||||
// 并行获取各种状态的优惠券数量
|
||||
const [availableCoupons, usedCoupons, expiredCoupons] = await Promise.all([
|
||||
getMyAvailableCoupons().catch(() => []),
|
||||
getMyUsedCoupons().catch(() => []),
|
||||
getMyExpiredCoupons().catch(() => [])
|
||||
])
|
||||
|
||||
setCouponCount({
|
||||
unused: availableCoupons.length || 0,
|
||||
used: usedCoupons.length || 0,
|
||||
expired: expiredCoupons.length || 0
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('Coupon count error:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const onTabChange = (index: string) => {
|
||||
setActiveTab(index)
|
||||
setList([]) // 清空列表
|
||||
setPage(1) // 重置页码
|
||||
setHasMore(true) // 重置hasMore
|
||||
// 延迟执行reload，确保状态更新完成
|
||||
setTimeout(() => {
|
||||
reload()
|
||||
}, 0)
|
||||
}
|
||||
|
||||
const getCouponTypeText = (type?: number) => {
|
||||
switch (type) {
|
||||
case 10: return '满减券'
|
||||
case 20: return '折扣券'
|
||||
case 30: return '免费券'
|
||||
default: return '优惠券'
|
||||
}
|
||||
}
|
||||
|
||||
const getCouponStatusText = (status?: number) => {
|
||||
switch (status) {
|
||||
case 0: return '未使用'
|
||||
case 1: return '已使用'
|
||||
case 2: return '已过期'
|
||||
default: return '未知'
|
||||
}
|
||||
}
|
||||
|
||||
const getCouponStatusColor = (status?: number) => {
|
||||
switch (status) {
|
||||
case 0: return 'success'
|
||||
case 1: return 'default'
|
||||
case 2: return 'danger'
|
||||
default: return 'default'
|
||||
}
|
||||
}
|
||||
|
||||
const formatCouponValue = (type?: number, value?: string) => {
|
||||
if (!value) return '0'
|
||||
switch (type) {
|
||||
case 1: return `¥${value}`
|
||||
case 2: return `${parseFloat(value) * 10}折`
|
||||
case 3: return '免费'
|
||||
default: return value
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<ConfigProvider>
|
||||
<View className="h-screen">
|
||||
<Tabs value={activeTab} onChange={onTabChange}>
|
||||
{tabs.map(tab => (
|
||||
<TabPane key={tab.key} title={tab.title}>
|
||||
<ul style={InfiniteUlStyle} id="scroll">
|
||||
<InfiniteLoading
|
||||
target="scroll"
|
||||
hasMore={hasMore}
|
||||
onLoadMore={loadMore}
|
||||
onScroll={() => {
|
||||
console.log('onScroll')
|
||||
}}
|
||||
onScrollToUpper={() => {
|
||||
console.log('onScrollToUpper')
|
||||
}}
|
||||
loadingText={
|
||||
<>
|
||||
加载中
|
||||
</>
|
||||
}
|
||||
loadMoreText={
|
||||
<>
|
||||
没有更多了
|
||||
</>
|
||||
}
|
||||
>
|
||||
<View className="p-4">
|
||||
{list.length === 0 ? (
|
||||
<div className={'h-full flex flex-col justify-center items-center'} style={{
|
||||
height: 'calc(100vh - 400px)',
|
||||
}}>
|
||||
<Empty
|
||||
style={{
|
||||
backgroundColor: 'transparent'
|
||||
}}
|
||||
description="您还没有优惠券"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
list.map((item, index) => (
|
||||
<Cell.Group key={`${item.couponId}-${index}`} className="mb-4">
|
||||
<Cell className="coupon-item p-4">
|
||||
<View className="flex justify-between items-center">
|
||||
<View className="flex-1">
|
||||
<View className="flex items-center mb-2">
|
||||
<View className="coupon-value text-2xl font-bold text-red-500 mr-3">
|
||||
{formatCouponValue(item.type, item.value)}
|
||||
</View>
|
||||
<View className="flex flex-col">
|
||||
<View className="text-base font-medium text-gray-800">
|
||||
{item.name || getCouponTypeText(item.type)}
|
||||
</View>
|
||||
{item.minAmount && parseFloat(item.minAmount) > 0 && (
|
||||
<View className="text-sm text-gray-500">
|
||||
满¥{item.minAmount}可用
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View className="flex justify-between items-center text-xs text-gray-400">
|
||||
<View>
|
||||
有效期: {item.startTime ? new Date(item.startTime).toLocaleDateString() : ''} - {item.endTime ? new Date(item.endTime).toLocaleDateString() : ''}
|
||||
</View>
|
||||
<Tag type={getCouponStatusColor(item.status)} size="small">
|
||||
{getCouponStatusText(item.status)}
|
||||
</Tag>
|
||||
</View>
|
||||
|
||||
{item.comments && (
|
||||
<View className="text-xs text-gray-500 mt-2 p-2 bg-gray-50 rounded">
|
||||
{item.comments}
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
</Cell>
|
||||
</Cell.Group>
|
||||
))
|
||||
)}
|
||||
</View>
|
||||
</InfiniteLoading>
|
||||
</ul>
|
||||
</TabPane>
|
||||
))}
|
||||
</Tabs>
|
||||
</View>
|
||||
</ConfigProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export default UserCoupon;
|
||||
@@ -1,6 +0,0 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '优惠券详情',
|
||||
navigationBarTextStyle: 'black',
|
||||
navigationBarBackgroundColor: '#ffffff',
|
||||
navigationStyle: 'custom'
|
||||
})
|
||||
@@ -1,259 +0,0 @@
|
||||
import {useState, useEffect} from "react";
|
||||
import {useRouter} from '@tarojs/taro'
|
||||
import {Button, ConfigProvider, Tag, Divider} from '@nutui/nutui-react-taro'
|
||||
import {ArrowLeft, Gift, Clock, CartCheck, Share} from '@nutui/icons-react-taro'
|
||||
import Taro from '@tarojs/taro'
|
||||
import {View, Text} from '@tarojs/components'
|
||||
import {ShopCoupon} from "@/api/shop/shopCoupon/model";
|
||||
import {getShopCoupon} from "@/api/shop/shopCoupon";
|
||||
import CouponShare from "@/components/CouponShare";
|
||||
import dayjs from "dayjs";
|
||||
|
||||
const CouponDetail = () => {
|
||||
const router = useRouter()
|
||||
const [coupon, setCoupon] = useState<ShopCoupon | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [showShare, setShowShare] = useState(false)
|
||||
const couponId = router.params.id
|
||||
|
||||
useEffect(() => {
|
||||
if (couponId) {
|
||||
loadCouponDetail()
|
||||
}
|
||||
}, [couponId])
|
||||
|
||||
const loadCouponDetail = async () => {
|
||||
try {
|
||||
setLoading(true)
|
||||
const data = await getShopCoupon(Number(couponId))
|
||||
setCoupon(data)
|
||||
} catch (error) {
|
||||
console.error('获取优惠券详情失败:', error)
|
||||
Taro.showToast({
|
||||
title: '获取优惠券详情失败',
|
||||
icon: 'error'
|
||||
})
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
// 获取优惠券类型文本
|
||||
const getCouponTypeText = (type?: number) => {
|
||||
switch (type) {
|
||||
case 10: return '满减券'
|
||||
case 20: return '折扣券'
|
||||
case 30: return '免费券'
|
||||
default: return '优惠券'
|
||||
}
|
||||
}
|
||||
|
||||
// 获取优惠券金额显示
|
||||
const getCouponAmountDisplay = () => {
|
||||
if (!coupon) return ''
|
||||
|
||||
switch (coupon.type) {
|
||||
case 10: // 满减券
|
||||
return `¥${coupon.reducePrice}`
|
||||
case 20: // 折扣券
|
||||
return `${coupon.discount}折`
|
||||
case 30: // 免费券
|
||||
return '免费'
|
||||
default:
|
||||
return `¥${coupon.reducePrice || 0}`
|
||||
}
|
||||
}
|
||||
|
||||
// 获取使用条件文本
|
||||
const getConditionText = () => {
|
||||
if (!coupon) return ''
|
||||
|
||||
if (coupon.type === 30) return '无门槛使用'
|
||||
if (coupon.minPrice && parseFloat(coupon.minPrice) > 0) {
|
||||
return `满${coupon.minPrice}元可用`
|
||||
}
|
||||
return '无门槛使用'
|
||||
}
|
||||
|
||||
// 获取有效期文本
|
||||
const getValidityText = () => {
|
||||
if (!coupon) return ''
|
||||
|
||||
if (coupon.expireType === 10) {
|
||||
return `领取后${coupon.expireDay}天内有效`
|
||||
} else {
|
||||
return `${dayjs(coupon.startTime).format('YYYY年MM月DD日')} 至 ${dayjs(coupon.endTime).format('YYYY年MM月DD日')}`
|
||||
}
|
||||
}
|
||||
|
||||
// 获取适用范围文本
|
||||
const getApplyRangeText = () => {
|
||||
if (!coupon) return ''
|
||||
|
||||
switch (coupon.applyRange) {
|
||||
case 10: return '全部商品'
|
||||
case 20: return '指定商品'
|
||||
case 30: return '指定分类'
|
||||
default: return '全部商品'
|
||||
}
|
||||
}
|
||||
|
||||
// 获取优惠券状态
|
||||
const getCouponStatus = () => {
|
||||
if (!coupon) return { status: 0, text: '未知', color: 'default' }
|
||||
|
||||
if (coupon.isExpire === 1) {
|
||||
return { status: 2, text: '已过期', color: 'danger' }
|
||||
} else if (coupon.status === 1) {
|
||||
return { status: 1, text: '已使用', color: 'warning' }
|
||||
} else {
|
||||
return { status: 0, text: '可使用', color: 'success' }
|
||||
}
|
||||
}
|
||||
|
||||
// 使用优惠券
|
||||
const handleUseCoupon = () => {
|
||||
if (!coupon) return
|
||||
|
||||
Taro.showModal({
|
||||
title: '使用优惠券',
|
||||
content: `确定要使用"${coupon.name}"吗？`,
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
// 跳转到商品页面或购物车页面
|
||||
Taro.navigateTo({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 返回上一页
|
||||
const handleBack = () => {
|
||||
Taro.navigateBack()
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<ConfigProvider>
|
||||
<View className="flex justify-center items-center h-screen">
|
||||
<Text>加载中...</Text>
|
||||
</View>
|
||||
</ConfigProvider>
|
||||
)
|
||||
}
|
||||
|
||||
if (!coupon) {
|
||||
return (
|
||||
<ConfigProvider>
|
||||
<View className="flex flex-col justify-center items-center h-screen">
|
||||
<Text className="text-gray-500 mb-4">优惠券不存在</Text>
|
||||
<Button onClick={handleBack}>返回</Button>
|
||||
</View>
|
||||
</ConfigProvider>
|
||||
)
|
||||
}
|
||||
|
||||
const statusInfo = getCouponStatus()
|
||||
|
||||
return (
|
||||
<ConfigProvider>
|
||||
{/* 自定义导航栏 */}
|
||||
<View className="flex items-center justify-between p-4 bg-white border-b border-gray-100">
|
||||
<View className="flex items-center" onClick={handleBack}>
|
||||
<ArrowLeft size="20" />
|
||||
<Text className="ml-2 text-lg">优惠券详情</Text>
|
||||
</View>
|
||||
<View className="flex items-center gap-3">
|
||||
<View onClick={() => setShowShare(true)}>
|
||||
<Share size="20" className="text-gray-600" />
|
||||
</View>
|
||||
<Tag type={statusInfo.color as any}>{statusInfo.text}</Tag>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 优惠券卡片 */}
|
||||
<View className="m-4 p-6 bg-gradient-to-r from-red-400 to-red-500 rounded-2xl text-white">
|
||||
<View className="flex items-center justify-between mb-4">
|
||||
<View>
|
||||
<Text className="text-4xl font-bold">{getCouponAmountDisplay()}</Text>
|
||||
<Text className="text-lg opacity-90 mt-1">{getCouponTypeText(coupon.type)}</Text>
|
||||
</View>
|
||||
<Gift size="40" />
|
||||
</View>
|
||||
|
||||
<Text className="text-xl font-semibold mb-2">{coupon.name}</Text>
|
||||
<Text className="text-base opacity-90">{getConditionText()}</Text>
|
||||
</View>
|
||||
|
||||
{/* 详细信息 */}
|
||||
<View className="bg-white mx-4 rounded-xl p-4">
|
||||
<Text className="text-lg font-semibold mb-4">使用说明</Text>
|
||||
|
||||
<View className="gap-2">
|
||||
<View className="flex items-center">
|
||||
<Clock size="16" className="text-gray-400 mr-3" />
|
||||
<View>
|
||||
<Text className="text-gray-600 text-sm">有效期</Text>
|
||||
<Text className="text-gray-900">{getValidityText()}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<Divider />
|
||||
|
||||
<View className="flex items-center">
|
||||
<CartCheck size="16" className="text-gray-400 mr-3" />
|
||||
<View>
|
||||
<Text className="text-gray-600 text-sm">适用范围</Text>
|
||||
<Text className="text-gray-900">{getApplyRangeText()}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{coupon.description && (
|
||||
<>
|
||||
<Divider />
|
||||
<View>
|
||||
<Text className="text-gray-600 text-sm mb-2">使用说明</Text>
|
||||
<Text className="text-gray-900 leading-relaxed">{coupon.description}</Text>
|
||||
</View>
|
||||
</>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 底部操作按钮 */}
|
||||
{statusInfo.status === 0 && (
|
||||
<View className="fixed bottom-0 left-0 right-0 p-4 bg-white border-t border-gray-100">
|
||||
<Button
|
||||
type="primary"
|
||||
size="large"
|
||||
block
|
||||
onClick={handleUseCoupon}
|
||||
>
|
||||
立即使用
|
||||
</Button>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* 分享弹窗 */}
|
||||
{coupon && (
|
||||
<CouponShare
|
||||
visible={showShare}
|
||||
coupon={{
|
||||
id: coupon.id || 0,
|
||||
name: coupon.name || '',
|
||||
type: coupon.type || 10,
|
||||
amount: coupon.type === 10 ? coupon.reducePrice || '0' :
|
||||
coupon.type === 20 ? coupon.discount?.toString() || '0' : '0',
|
||||
minAmount: coupon.minPrice,
|
||||
description: coupon.description
|
||||
}}
|
||||
onClose={() => setShowShare(false)}
|
||||
/>
|
||||
)}
|
||||
</ConfigProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export default CouponDetail;
|
||||
@@ -1,5 +0,0 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '我的优惠券',
|
||||
navigationBarTextStyle: 'black',
|
||||
navigationBarBackgroundColor: '#ffffff'
|
||||
})
|
||||
@@ -1,466 +0,0 @@
|
||||
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 {Plus, Filter} from '@nutui/icons-react-taro'
|
||||
import {View} from '@tarojs/components'
|
||||
import {ShopUserCoupon} from "@/api/shop/shopUserCoupon/model";
|
||||
import {pageShopUserCoupon, getMyAvailableCoupons, getMyUsedCoupons, getMyExpiredCoupons} from "@/api/shop/shopUserCoupon";
|
||||
import CouponList from "@/components/CouponList";
|
||||
import CouponStats from "@/components/CouponStats";
|
||||
import CouponGuide from "@/components/CouponGuide";
|
||||
import CouponFilter from "@/components/CouponFilter";
|
||||
import CouponExpireNotice, {ExpiringSoon} from "@/components/CouponExpireNotice";
|
||||
import {CouponCardProps} from "@/components/CouponCard";
|
||||
import dayjs from "dayjs";
|
||||
import {transformCouponData} from "@/utils/couponUtils";
|
||||
|
||||
const CouponManage = () => {
|
||||
const [list, setList] = useState<ShopUserCoupon[]>([])
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [hasMore, setHasMore] = useState(true)
|
||||
const [searchValue, setSearchValue] = useState('')
|
||||
const [page, setPage] = useState(1)
|
||||
const [total, setTotal] = useState(0)
|
||||
console.log('total = ', total)
|
||||
const [activeTab, setActiveTab] = useState('0') // 0-可用 1-已使用 2-已过期
|
||||
const [stats, setStats] = useState({
|
||||
available: 0,
|
||||
used: 0,
|
||||
expired: 0
|
||||
})
|
||||
const [showGuide, setShowGuide] = useState(false)
|
||||
const [showFilter, setShowFilter] = useState(false)
|
||||
const [showExpireNotice, setShowExpireNotice] = useState(false)
|
||||
const [expiringSoonCoupons, setExpiringSoonCoupons] = useState<ExpiringSoon[]>([])
|
||||
const [filters, setFilters] = useState({
|
||||
type: [] as number[],
|
||||
minAmount: undefined as number | undefined,
|
||||
sortBy: 'createTime' as 'createTime' | 'amount' | 'expireTime',
|
||||
sortOrder: 'desc' as 'asc' | 'desc'
|
||||
})
|
||||
|
||||
// 获取优惠券状态过滤条件
|
||||
const reload = async (isRefresh = false) => {
|
||||
// 直接调用reloadWithTab，使用当前的activeTab
|
||||
await reloadWithTab(activeTab, isRefresh)
|
||||
}
|
||||
|
||||
// 搜索功能
|
||||
const handleSearch = (value: string) => {
|
||||
setSearchValue(value)
|
||||
reload(true)
|
||||
}
|
||||
|
||||
// 下拉刷新
|
||||
const handleRefresh = async () => {
|
||||
await reload(true)
|
||||
}
|
||||
|
||||
// Tab切换
|
||||
const handleTabChange = (value: string | number) => {
|
||||
const tabValue = String(value)
|
||||
console.log('Tab切换:', {from: activeTab, to: tabValue})
|
||||
setActiveTab(tabValue)
|
||||
setPage(1)
|
||||
setList([])
|
||||
setHasMore(true)
|
||||
|
||||
// 直接调用reload，传入新的tab值
|
||||
reloadWithTab(tabValue)
|
||||
}
|
||||
|
||||
// 根据指定tab加载数据
|
||||
const reloadWithTab = async (tab: string, isRefresh = true) => {
|
||||
if (isRefresh) {
|
||||
setPage(1)
|
||||
setList([])
|
||||
setHasMore(true)
|
||||
}
|
||||
|
||||
setLoading(true)
|
||||
try {
|
||||
let res: any = null
|
||||
|
||||
// 根据tab选择对应的API
|
||||
switch (tab) {
|
||||
case '0': // 可用优惠券
|
||||
res = await getMyAvailableCoupons()
|
||||
break
|
||||
case '1': // 已使用优惠券
|
||||
res = await getMyUsedCoupons()
|
||||
break
|
||||
case '2': // 已过期优惠券
|
||||
res = await getMyExpiredCoupons()
|
||||
break
|
||||
default:
|
||||
res = await getMyAvailableCoupons()
|
||||
}
|
||||
|
||||
console.log('使用Tab加载数据:', { tab, data: res })
|
||||
|
||||
if (res && res.length > 0) {
|
||||
// 应用搜索过滤
|
||||
let filteredList = res
|
||||
if (searchValue) {
|
||||
filteredList = res.filter((item: any) =>
|
||||
item.name?.includes(searchValue) ||
|
||||
item.description?.includes(searchValue)
|
||||
)
|
||||
}
|
||||
|
||||
// 应用其他筛选条件
|
||||
if (filters.type.length > 0) {
|
||||
filteredList = filteredList.filter((item: any) =>
|
||||
filters.type.includes(item.type)
|
||||
)
|
||||
}
|
||||
|
||||
if (filters.minAmount) {
|
||||
filteredList = filteredList.filter((item: any) =>
|
||||
parseFloat(item.minPrice || '0') >= filters.minAmount!
|
||||
)
|
||||
}
|
||||
|
||||
// 排序
|
||||
filteredList.sort((a: any, b: any) => {
|
||||
const aValue = getValueForSort(a, filters.sortBy)
|
||||
const bValue = getValueForSort(b, filters.sortBy)
|
||||
|
||||
if (filters.sortOrder === 'asc') {
|
||||
return aValue - bValue
|
||||
} else {
|
||||
return bValue - aValue
|
||||
}
|
||||
})
|
||||
|
||||
setList(filteredList)
|
||||
setTotal(filteredList.length)
|
||||
setHasMore(false) // 一次性加载所有数据，不需要分页
|
||||
} else {
|
||||
setList([])
|
||||
setTotal(0)
|
||||
setHasMore(false)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取优惠券失败:', error)
|
||||
Taro.showToast({
|
||||
title: '获取优惠券失败',
|
||||
icon: 'error'
|
||||
});
|
||||
setList([])
|
||||
setTotal(0)
|
||||
setHasMore(false)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
// 获取排序值的辅助函数
|
||||
const getValueForSort = (item: any, sortBy: string) => {
|
||||
switch (sortBy) {
|
||||
case 'amount':
|
||||
return parseFloat(item.reducePrice || item.discount || '0')
|
||||
case 'expireTime':
|
||||
return new Date(item.endTime || '').getTime()
|
||||
case 'createTime':
|
||||
default:
|
||||
return new Date(item.createTime || '').getTime()
|
||||
}
|
||||
}
|
||||
|
||||
// 转换优惠券数据并添加使用按钮
|
||||
const transformCouponDataWithAction = (coupon: ShopUserCoupon): CouponCardProps => {
|
||||
console.log('原始优惠券数据:', coupon)
|
||||
|
||||
// 使用统一的转换函数
|
||||
const transformedCoupon = transformCouponData(coupon)
|
||||
|
||||
console.log('转换后的优惠券数据:', transformedCoupon)
|
||||
|
||||
// 添加使用按钮和点击事件
|
||||
const result = {
|
||||
...transformedCoupon,
|
||||
showUseBtn: transformedCoupon.status === 0, // 只有未使用的券显示使用按钮
|
||||
onUse: () => handleUseCoupon(coupon)
|
||||
}
|
||||
|
||||
console.log('最终优惠券数据:', result)
|
||||
return result
|
||||
}
|
||||
|
||||
// 使用优惠券
|
||||
const handleUseCoupon = (_: ShopUserCoupon) => {
|
||||
// 这里可以跳转到商品页面或购物车页面
|
||||
Taro.navigateTo({
|
||||
url: '/shop/category/index?id=4326'
|
||||
})
|
||||
}
|
||||
|
||||
// 优惠券点击事件
|
||||
const handleCouponClick = (_coupon: CouponCardProps, index: number) => {
|
||||
const originalCoupon = list[index]
|
||||
if (originalCoupon) {
|
||||
// 显示优惠券详情
|
||||
showCouponDetail(originalCoupon)
|
||||
}
|
||||
}
|
||||
|
||||
// 显示优惠券详情
|
||||
const showCouponDetail = (coupon: ShopUserCoupon) => {
|
||||
// 跳转到优惠券详情页
|
||||
Taro.navigateTo({
|
||||
url: `/user/coupon/detail?id=${coupon.id}`
|
||||
})
|
||||
}
|
||||
|
||||
// 加载优惠券统计数据
|
||||
const loadCouponStats = async () => {
|
||||
try {
|
||||
// 并行获取各状态的优惠券数量
|
||||
const [availableRes, usedRes, expiredRes] = await Promise.all([
|
||||
getMyAvailableCoupons(),
|
||||
getMyUsedCoupons(),
|
||||
getMyExpiredCoupons()
|
||||
])
|
||||
|
||||
setStats({
|
||||
available: availableRes?.length || 0,
|
||||
used: usedRes?.length || 0,
|
||||
expired: expiredRes?.length || 0
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('获取优惠券统计失败:', error)
|
||||
// 设置默认值
|
||||
setStats({
|
||||
available: 0,
|
||||
used: 0,
|
||||
expired: 0
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 统计卡片点击事件
|
||||
const handleStatsClick = (type: 'available' | 'used' | 'expired') => {
|
||||
const tabMap = {
|
||||
available: '0',
|
||||
used: '1',
|
||||
expired: '2'
|
||||
}
|
||||
handleTabChange(tabMap[type])
|
||||
}
|
||||
|
||||
// 筛选条件变更
|
||||
const handleFiltersChange = (newFilters: any) => {
|
||||
setFilters(newFilters)
|
||||
reload(true).then()
|
||||
}
|
||||
|
||||
// 检查即将过期的优惠券
|
||||
const checkExpiringSoonCoupons = async () => {
|
||||
try {
|
||||
// 获取即将过期的优惠券（3天内过期）
|
||||
const res = await pageShopUserCoupon({
|
||||
page: page,
|
||||
limit: 50,
|
||||
status: 0, // 未使用
|
||||
isExpire: 0 // 未过期
|
||||
})
|
||||
|
||||
if (res && res.list) {
|
||||
const now = dayjs()
|
||||
const expiringSoon = res.list
|
||||
.map(coupon => {
|
||||
const endTime = dayjs(coupon.endTime)
|
||||
const daysLeft = endTime.diff(now, 'day')
|
||||
|
||||
return {
|
||||
id: coupon.id || 0,
|
||||
name: coupon.name || '',
|
||||
type: coupon.type || 10,
|
||||
amount: coupon.type === 10 ? coupon.reducePrice || '0' :
|
||||
coupon.type === 20 ? coupon.discount?.toString() || '0' : '0',
|
||||
minAmount: coupon.minPrice,
|
||||
endTime: coupon.endTime || '',
|
||||
daysLeft
|
||||
}
|
||||
})
|
||||
.filter(coupon => coupon.daysLeft >= 0 && coupon.daysLeft <= 3)
|
||||
.sort((a, b) => a.daysLeft - b.daysLeft)
|
||||
|
||||
if (expiringSoon.length > 0) {
|
||||
// @ts-ignore
|
||||
setExpiringSoonCoupons(expiringSoon)
|
||||
// 延迟显示提醒，避免与页面加载冲突
|
||||
setTimeout(() => {
|
||||
setShowExpireNotice(true)
|
||||
}, 1000)
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('检查即将过期优惠券失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 使用即将过期的优惠券
|
||||
const handleUseExpiringSoonCoupon = (coupon: ExpiringSoon) => {
|
||||
console.log(coupon, '使用即将过期优惠券')
|
||||
setShowExpireNotice(false)
|
||||
// 跳转到商品页面
|
||||
Taro.navigateTo({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
}
|
||||
|
||||
// 加载更多
|
||||
const loadMore = async () => {
|
||||
if (!loading && hasMore) {
|
||||
await reload(false) // 不刷新，追加数据
|
||||
}
|
||||
}
|
||||
|
||||
useDidShow(() => {
|
||||
reload(true).then()
|
||||
loadCouponStats().then()
|
||||
// 只在可用优惠券tab时检查即将过期的优惠券
|
||||
if (activeTab === '0') {
|
||||
checkExpiringSoonCoupons().then()
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<ConfigProvider>
|
||||
{/* 搜索栏和领取入口 */}
|
||||
<View className="bg-white px-4 py-3 hidden">
|
||||
<View className="flex items-center gap-3">
|
||||
<View className="flex-1">
|
||||
<SearchBar
|
||||
placeholder="搜索"
|
||||
value={searchValue}
|
||||
onChange={setSearchValue}
|
||||
onSearch={handleSearch}
|
||||
/>
|
||||
</View>
|
||||
<Button
|
||||
size="small"
|
||||
type="primary"
|
||||
icon={<Plus/>}
|
||||
onClick={() => Taro.navigateTo({url: '/user/coupon/receive'})}
|
||||
>
|
||||
领取
|
||||
</Button>
|
||||
<Button
|
||||
size="small"
|
||||
fill="outline"
|
||||
icon={<Filter/>}
|
||||
onClick={() => setShowFilter(true)}
|
||||
>
|
||||
筛选
|
||||
</Button>
|
||||
<Button
|
||||
size="small"
|
||||
fill="outline"
|
||||
onClick={() => setShowGuide(true)}
|
||||
>
|
||||
帮助
|
||||
</Button>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 优惠券统计 */}
|
||||
<CouponStats
|
||||
availableCount={stats.available}
|
||||
usedCount={stats.used}
|
||||
expiredCount={stats.expired}
|
||||
onStatsClick={handleStatsClick}
|
||||
/>
|
||||
|
||||
{/* Tab切换 */}
|
||||
<View className="bg-white">
|
||||
<Tabs value={activeTab} onChange={handleTabChange}>
|
||||
<TabPane title="可用" value="0"/>
|
||||
<TabPane title="已使用" value="1"/>
|
||||
<TabPane title="已过期" value="2"/>
|
||||
</Tabs>
|
||||
</View>
|
||||
|
||||
{/* 优惠券列表 */}
|
||||
<PullToRefresh
|
||||
onRefresh={handleRefresh}
|
||||
headHeight={60}
|
||||
>
|
||||
<View style={{height: 'calc(100vh - 200px)', overflowY: 'auto'}} id="coupon-scroll">
|
||||
{list.length === 0 && !loading ? (
|
||||
<View className="flex flex-col justify-center items-center" style={{height: 'calc(100vh - 300px)'}}>
|
||||
<Empty
|
||||
description={
|
||||
activeTab === '0' ? "暂无可用优惠券" :
|
||||
activeTab === '1' ? "暂无已使用优惠券" :
|
||||
"暂无已过期优惠券"
|
||||
}
|
||||
style={{backgroundColor: 'transparent'}}
|
||||
/>
|
||||
</View>
|
||||
) : (
|
||||
<InfiniteLoading
|
||||
target="coupon-scroll"
|
||||
hasMore={hasMore}
|
||||
onLoadMore={loadMore}
|
||||
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">
|
||||
{list.length === 0 ? "暂无数据" : "没有更多了"}
|
||||
</View>
|
||||
}
|
||||
>
|
||||
<CouponList
|
||||
coupons={list.map(transformCouponDataWithAction)}
|
||||
onCouponClick={handleCouponClick}
|
||||
showEmpty={false}
|
||||
/>
|
||||
</InfiniteLoading>
|
||||
)}
|
||||
</View>
|
||||
</PullToRefresh>
|
||||
|
||||
{/* 使用指南弹窗 */}
|
||||
<CouponGuide
|
||||
visible={showGuide}
|
||||
onClose={() => setShowGuide(false)}
|
||||
/>
|
||||
|
||||
{/*/!* 筛选弹窗 *!/*/}
|
||||
<CouponFilter
|
||||
visible={showFilter}
|
||||
filters={filters}
|
||||
onFiltersChange={handleFiltersChange}
|
||||
onClose={() => setShowFilter(false)}
|
||||
/>
|
||||
|
||||
{/*/!* 到期提醒弹窗 *!/*/}
|
||||
<CouponExpireNotice
|
||||
visible={showExpireNotice}
|
||||
expiringSoonCoupons={expiringSoonCoupons}
|
||||
onClose={() => setShowExpireNotice(false)}
|
||||
onUseCoupon={handleUseExpiringSoonCoupon}
|
||||
/>
|
||||
</ConfigProvider>
|
||||
);
|
||||
|
||||
};
|
||||
|
||||
export default CouponManage;
|
||||
@@ -1,5 +0,0 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '领取优惠券',
|
||||
navigationBarTextStyle: 'black',
|
||||
navigationBarBackgroundColor: '#ffffff'
|
||||
})
|
||||
@@ -1,247 +0,0 @@
|
||||
import {useState} from "react";
|
||||
import Taro, {useDidShow} from '@tarojs/taro'
|
||||
import {Button, Empty, ConfigProvider, SearchBar, InfiniteLoading, Loading, PullToRefresh} from '@nutui/nutui-react-taro'
|
||||
import {Gift} from '@nutui/icons-react-taro'
|
||||
import {View} from '@tarojs/components'
|
||||
import {ShopCoupon} from "@/api/shop/shopCoupon/model";
|
||||
import {pageShopCoupon} from "@/api/shop/shopCoupon";
|
||||
import CouponList from "@/components/CouponList";
|
||||
import {CouponCardProps} from "@/components/CouponCard";
|
||||
|
||||
const CouponReceive = () => {
|
||||
const [list, setList] = useState<ShopCoupon[]>([])
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [hasMore, setHasMore] = useState(true)
|
||||
const [searchValue, setSearchValue] = useState('')
|
||||
const [page, setPage] = useState(1)
|
||||
const [total, setTotal] = useState(0)
|
||||
|
||||
const reload = async (isRefresh = false) => {
|
||||
if (isRefresh) {
|
||||
setPage(1)
|
||||
setList([])
|
||||
setHasMore(true)
|
||||
}
|
||||
|
||||
setLoading(true)
|
||||
try {
|
||||
const currentPage = isRefresh ? 1 : page
|
||||
// 获取可领取的优惠券（启用状态且未过期）
|
||||
const res = await pageShopCoupon({
|
||||
page: currentPage,
|
||||
limit: 10,
|
||||
keywords: searchValue,
|
||||
enabled: 1, // 启用状态
|
||||
isExpire: 0 // 未过期
|
||||
})
|
||||
|
||||
if (res && res.list) {
|
||||
const newList = isRefresh ? res.list : [...list, ...res.list]
|
||||
setList(newList)
|
||||
setTotal(res.count || 0)
|
||||
|
||||
setHasMore(res.list.length === 10)
|
||||
|
||||
if (!isRefresh) {
|
||||
setPage(currentPage + 1)
|
||||
} else {
|
||||
setPage(2)
|
||||
}
|
||||
} else {
|
||||
setHasMore(false)
|
||||
setTotal(0)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取优惠券失败:', error)
|
||||
Taro.showToast({
|
||||
title: '获取优惠券失败',
|
||||
icon: 'error'
|
||||
});
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
// 搜索功能
|
||||
const handleSearch = (value: string) => {
|
||||
setSearchValue(value)
|
||||
reload(true)
|
||||
}
|
||||
|
||||
// 下拉刷新
|
||||
const handleRefresh = async () => {
|
||||
await reload(true)
|
||||
}
|
||||
|
||||
// 转换优惠券数据为CouponCard组件所需格式
|
||||
const transformCouponData = (coupon: ShopCoupon): CouponCardProps => {
|
||||
let amount = 0
|
||||
let type: 10 | 20 | 30 = 10 // 使用新的类型值
|
||||
|
||||
if (coupon.type === 10) { // 满减券
|
||||
type = 10
|
||||
amount = parseFloat(coupon.reducePrice || '0')
|
||||
} else if (coupon.type === 20) { // 折扣券
|
||||
type = 20
|
||||
amount = coupon.discount || 0
|
||||
} else if (coupon.type === 30) { // 免费券
|
||||
type = 30
|
||||
amount = 0
|
||||
}
|
||||
|
||||
return {
|
||||
amount,
|
||||
type,
|
||||
status: 0, // 可领取状态
|
||||
minAmount: parseFloat(coupon.minPrice || '0'),
|
||||
title: coupon.name || '优惠券',
|
||||
startTime: coupon.startTime,
|
||||
endTime: coupon.endTime,
|
||||
showReceiveBtn: true, // 显示领取按钮
|
||||
onReceive: () => handleReceiveCoupon(coupon),
|
||||
theme: getThemeByType(coupon.type)
|
||||
}
|
||||
}
|
||||
|
||||
// 根据优惠券类型获取主题色
|
||||
const getThemeByType = (type?: number): 'red' | 'orange' | 'blue' | 'purple' | 'green' => {
|
||||
switch (type) {
|
||||
case 10: return 'red' // 满减券
|
||||
case 20: return 'orange' // 折扣券
|
||||
case 30: return 'green' // 免费券
|
||||
default: return 'blue'
|
||||
}
|
||||
}
|
||||
|
||||
// 领取优惠券
|
||||
const handleReceiveCoupon = async (_coupon: ShopCoupon) => {
|
||||
try {
|
||||
// 这里应该调用领取优惠券的API
|
||||
// await receiveCoupon(coupon.id)
|
||||
|
||||
Taro.showToast({
|
||||
title: '领取成功',
|
||||
icon: 'success'
|
||||
})
|
||||
|
||||
// 刷新列表
|
||||
reload(true)
|
||||
} catch (error) {
|
||||
console.error('领取优惠券失败:', error)
|
||||
Taro.showToast({
|
||||
title: '领取失败',
|
||||
icon: 'error'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 优惠券点击事件
|
||||
const handleCouponClick = (_coupon: CouponCardProps, index: number) => {
|
||||
const originalCoupon = list[index]
|
||||
if (originalCoupon) {
|
||||
// 显示优惠券详情
|
||||
showCouponDetail(originalCoupon)
|
||||
}
|
||||
}
|
||||
|
||||
// 显示优惠券详情
|
||||
const showCouponDetail = (coupon: ShopCoupon) => {
|
||||
// 跳转到优惠券详情页
|
||||
Taro.navigateTo({
|
||||
url: `/user/coupon/detail?id=${coupon.id}`
|
||||
})
|
||||
}
|
||||
|
||||
// 加载更多
|
||||
const loadMore = async () => {
|
||||
if (!loading && hasMore) {
|
||||
await reload(false)
|
||||
}
|
||||
}
|
||||
|
||||
useDidShow(() => {
|
||||
reload(true).then()
|
||||
});
|
||||
|
||||
return (
|
||||
<ConfigProvider>
|
||||
{/* 搜索栏 */}
|
||||
<View className="bg-white px-4 py-3">
|
||||
<SearchBar
|
||||
placeholder="搜索"
|
||||
value={searchValue}
|
||||
onChange={setSearchValue}
|
||||
onSearch={handleSearch}
|
||||
/>
|
||||
</View>
|
||||
|
||||
{/* 统计信息 */}
|
||||
{total > 0 && (
|
||||
<View className="px-4 py-2 text-sm text-gray-500 bg-gray-50">
|
||||
共找到 {total} 张可领取优惠券
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* 优惠券列表 */}
|
||||
<PullToRefresh
|
||||
onRefresh={handleRefresh}
|
||||
headHeight={60}
|
||||
>
|
||||
<View style={{ height: 'calc(100vh - 160px)', overflowY: 'auto' }} id="coupon-scroll">
|
||||
{list.length === 0 && !loading ? (
|
||||
<View className="flex flex-col justify-center items-center" style={{height: 'calc(100vh - 250px)'}}>
|
||||
<Empty
|
||||
description="暂无可领取优惠券"
|
||||
style={{backgroundColor: 'transparent'}}
|
||||
/>
|
||||
<Button
|
||||
type="primary"
|
||||
size="small"
|
||||
className="mt-4"
|
||||
onClick={() => Taro.navigateTo({url: '/pages/index/index'})}
|
||||
>
|
||||
去逛逛
|
||||
</Button>
|
||||
</View>
|
||||
) : (
|
||||
<InfiniteLoading
|
||||
target="coupon-scroll"
|
||||
hasMore={hasMore}
|
||||
onLoadMore={loadMore}
|
||||
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">
|
||||
{list.length === 0 ? "暂无数据" : "没有更多了"}
|
||||
</View>
|
||||
}
|
||||
>
|
||||
<CouponList
|
||||
coupons={list.map(transformCouponData)}
|
||||
onCouponClick={handleCouponClick}
|
||||
showEmpty={false}
|
||||
/>
|
||||
</InfiniteLoading>
|
||||
)}
|
||||
</View>
|
||||
</PullToRefresh>
|
||||
|
||||
{/* 底部提示 */}
|
||||
{list.length === 0 && !loading && (
|
||||
<View className="text-center py-8">
|
||||
<View className="text-gray-400 mb-4">
|
||||
<Gift size="48" />
|
||||
</View>
|
||||
<View className="text-gray-500 mb-2">暂无可领取优惠券</View>
|
||||
<View className="text-gray-400 text-sm">请关注商家活动获取更多优惠券</View>
|
||||
</View>
|
||||
)}
|
||||
</ConfigProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export default CouponReceive;
|
||||
@@ -1,903 +0,0 @@
|
||||
import {Avatar, Cell, Space, Empty, Tabs, Button, TabPane, Image, Dialog, PullToRefresh, InfiniteLoading} from '@nutui/nutui-react-taro'
|
||||
import {useEffect, useState, useCallback, useRef, CSSProperties} from "react";
|
||||
import {View, Text} from '@tarojs/components'
|
||||
import Taro from '@tarojs/taro';
|
||||
import dayjs from "dayjs";
|
||||
import {
|
||||
pageShopOrder,
|
||||
updateShopOrder,
|
||||
createOrder,
|
||||
getShopOrder,
|
||||
prepayShopOrder
|
||||
} from "@/api/shop/shopOrder";
|
||||
import {OrderCreateRequest, ShopOrder, ShopOrderParam} from "@/api/shop/shopOrder/model";
|
||||
import {listShopOrderGoods} from "@/api/shop/shopOrderGoods";
|
||||
import {copyText} from "@/utils/common";
|
||||
import PaymentCountdown from "@/components/PaymentCountdown";
|
||||
import {PaymentType} from "@/utils/payment";
|
||||
import {ErrorType, RequestError} from "@/utils/request";
|
||||
|
||||
// 判断订单是否支付已过期
|
||||
const isPaymentExpired = (createTime: string, timeoutHours: number = 24): boolean => {
|
||||
if (!createTime) return false;
|
||||
const createTimeObj = dayjs(createTime);
|
||||
const expireTime = createTimeObj.add(timeoutHours, 'hour');
|
||||
const now = dayjs();
|
||||
return now.isAfter(expireTime);
|
||||
};
|
||||
|
||||
// 申请退款：支付成功后仅允许在指定时间窗内发起（前端展示层限制，后端仍应校验）
|
||||
const isWithinRefundWindow = (payTime?: string, windowMinutes: number = 60): boolean => {
|
||||
if (!payTime) return false;
|
||||
const raw = String(payTime).trim();
|
||||
const t = /^\d+$/.test(raw)
|
||||
? dayjs(Number(raw) < 1e12 ? Number(raw) * 1000 : Number(raw)) // 兼容秒/毫秒时间戳
|
||||
: dayjs(raw);
|
||||
if (!t.isValid()) return false;
|
||||
return dayjs().diff(t, 'minute') <= windowMinutes;
|
||||
};
|
||||
|
||||
const getInfiniteUlStyle = (showSearch: boolean = false): CSSProperties => ({
|
||||
marginTop: showSearch ? '0' : '0', // 如果显示搜索框，增加更多的上边距
|
||||
height: showSearch ? '75vh' : '84vh', // 相应调整高度
|
||||
width: '100%',
|
||||
padding: '0',
|
||||
overflowY: 'auto',
|
||||
overflowX: 'hidden'
|
||||
// 注意：小程序不支持 boxShadow
|
||||
})
|
||||
|
||||
// 统一的订单状态标签配置，与后端 statusFilter 保持一致
|
||||
const tabs = [
|
||||
{
|
||||
index: 0,
|
||||
key: '全部',
|
||||
title: '全部',
|
||||
description: '所有订单',
|
||||
statusFilter: -1 // 使用-1表示全部订单
|
||||
},
|
||||
{
|
||||
index: 1,
|
||||
key: '待付款',
|
||||
title: '待付款',
|
||||
description: '等待付款的订单',
|
||||
statusFilter: 0 // 对应后端：pay_status = false
|
||||
},
|
||||
{
|
||||
index: 2,
|
||||
key: '待发货',
|
||||
title: '待发货',
|
||||
description: '已付款待发货的订单',
|
||||
statusFilter: 1 // 对应后端：pay_status = true AND delivery_status = 10
|
||||
},
|
||||
{
|
||||
index: 3,
|
||||
key: '待收货',
|
||||
title: '待收货',
|
||||
description: '已发货待收货的订单',
|
||||
statusFilter: 3 // 对应后端：pay_status = true AND delivery_status = 20
|
||||
},
|
||||
{
|
||||
index: 4,
|
||||
key: '已完成',
|
||||
title: '已完成',
|
||||
description: '已完成的订单',
|
||||
statusFilter: 5 // 对应后端：order_status = 1
|
||||
},
|
||||
{
|
||||
index: 5,
|
||||
key: '退货/售后',
|
||||
title: '退货/售后',
|
||||
description: '退货/售后的订单',
|
||||
statusFilter: 6 // 对应后端：order_status = 6 (已退款)
|
||||
}
|
||||
]
|
||||
|
||||
interface OrderListProps {
|
||||
onReload?: () => void;
|
||||
searchParams?: ShopOrderParam;
|
||||
showSearch?: boolean;
|
||||
onSearchParamsChange?: (params: ShopOrderParam) => void; // 新增：通知父组件参数变化
|
||||
// 订单视图模式：用户/门店/骑手
|
||||
mode?: 'user' | 'store' | 'rider';
|
||||
// 固定过滤条件（例如 storeId / riderId），会合并到每次请求里
|
||||
baseParams?: ShopOrderParam;
|
||||
// 只读模式：隐藏“支付/取消/确认收货/退款”等用户操作按钮
|
||||
readOnly?: boolean;
|
||||
}
|
||||
|
||||
function OrderList(props: OrderListProps) {
|
||||
const [list, setList] = useState<ShopOrder[]>([])
|
||||
const pageRef = useRef(1)
|
||||
const [hasMore, setHasMore] = useState(true)
|
||||
const [payingOrderId, setPayingOrderId] = useState<number | null>(null)
|
||||
// 根据传入的statusFilter设置初始tab索引
|
||||
const getInitialTabIndex = () => {
|
||||
if (props.searchParams?.statusFilter !== undefined) {
|
||||
const tab = tabs.find(t => t.statusFilter === props.searchParams?.statusFilter);
|
||||
return tab ? tab.index : 0;
|
||||
}
|
||||
return 0;
|
||||
};
|
||||
const [tapIndex, setTapIndex] = useState<number>(() => {
|
||||
const initialIndex = getInitialTabIndex();
|
||||
console.log('初始化tapIndex:', initialIndex, '对应statusFilter:', props.searchParams?.statusFilter);
|
||||
return initialIndex;
|
||||
})
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [cancelDialogVisible, setCancelDialogVisible] = useState(false)
|
||||
const [orderToCancel, setOrderToCancel] = useState<ShopOrder | null>(null)
|
||||
const [confirmReceiveDialogVisible, setConfirmReceiveDialogVisible] = useState(false)
|
||||
const [orderToConfirmReceive, setOrderToConfirmReceive] = useState<ShopOrder | null>(null)
|
||||
const isReadOnly = props.readOnly || props.mode === 'store' || props.mode === 'rider'
|
||||
|
||||
const toNum = (v: any): number | undefined => {
|
||||
if (v === null || v === undefined || v === '') return undefined;
|
||||
const n = Number(v);
|
||||
return Number.isFinite(n) ? n : undefined;
|
||||
};
|
||||
|
||||
// “已完成”应以订单状态为准；不要用商品ID等字段推断完成态，否则会造成 Tab(待发货/待收货) 与状态文案不同步
|
||||
const isOrderCompleted = (order: ShopOrder) => toNum(order.orderStatus) === 1;
|
||||
|
||||
// 获取订单状态文本
|
||||
const getOrderStatusText = (order: ShopOrder) => {
|
||||
const orderStatus = toNum(order.orderStatus);
|
||||
const deliveryStatus = toNum(order.deliveryStatus);
|
||||
|
||||
// 优先检查订单状态
|
||||
if (orderStatus === 2) return '已取消';
|
||||
if (orderStatus === 4) return '退款申请中';
|
||||
if (orderStatus === 5) return '退款被拒绝';
|
||||
if (orderStatus === 6) return '退款成功';
|
||||
if (orderStatus === 7) return '客户端申请退款';
|
||||
if (isOrderCompleted(order)) return '已完成';
|
||||
|
||||
// 检查支付状态 (payStatus为boolean类型，false/0表示未付款，true/1表示已付款)
|
||||
if (!order.payStatus) return '等待买家付款';
|
||||
|
||||
// 已付款后检查发货状态
|
||||
if (deliveryStatus === 10) return '待发货';
|
||||
if (deliveryStatus === 20) {
|
||||
// 若订单没有配送员，沿用原“待收货”语义
|
||||
if (!order.riderId || Number(order.riderId) === 0) return '待收货';
|
||||
// 配送员确认送达后（sendEndTime有值），才进入“待确认收货”
|
||||
if (order.sendEndTime && !isOrderCompleted(order)) return '待确认收货';
|
||||
return '配送中';
|
||||
}
|
||||
if (deliveryStatus === 30) return '部分发货';
|
||||
|
||||
if (orderStatus === 0) return '未使用';
|
||||
|
||||
return '未知状态';
|
||||
};
|
||||
|
||||
// 获取订单状态颜色
|
||||
const getOrderStatusColor = (order: ShopOrder) => {
|
||||
const orderStatus = toNum(order.orderStatus);
|
||||
const deliveryStatus = toNum(order.deliveryStatus);
|
||||
// 优先检查订单状态
|
||||
if (orderStatus === 2) return 'text-gray-500'; // 已取消
|
||||
if (orderStatus === 4) return 'text-orange-500'; // 退款申请中
|
||||
if (orderStatus === 5) return 'text-red-500'; // 退款被拒绝
|
||||
if (orderStatus === 6) return 'text-green-500'; // 退款成功
|
||||
if (orderStatus === 7) return 'text-orange-500'; // 客户端申请退款
|
||||
if (isOrderCompleted(order)) return 'text-green-600'; // 已完成
|
||||
|
||||
// 检查支付状态
|
||||
if (!order.payStatus) return 'text-orange-500'; // 等待买家付款
|
||||
|
||||
// 已付款后检查发货状态
|
||||
if (deliveryStatus === 10) return 'text-blue-500'; // 待发货
|
||||
if (deliveryStatus === 20) {
|
||||
if (!order.riderId || Number(order.riderId) === 0) return 'text-purple-500'; // 待收货
|
||||
if (order.sendEndTime && !isOrderCompleted(order)) return 'text-purple-500'; // 待确认收货
|
||||
return 'text-blue-500'; // 配送中
|
||||
}
|
||||
if (deliveryStatus === 30) return 'text-blue-500'; // 部分发货
|
||||
|
||||
if (orderStatus === 0) return 'text-gray-500'; // 未使用
|
||||
|
||||
return 'text-gray-600'; // 默认颜色
|
||||
};
|
||||
|
||||
// 使用后端统一的 statusFilter 进行筛选
|
||||
const getOrderStatusParams = (index: string | number) => {
|
||||
let params: ShopOrderParam = {
|
||||
...(props.baseParams || {})
|
||||
};
|
||||
// 默认是用户视图：添加 userId 过滤；门店/骑手视图由 baseParams 控制
|
||||
if (!props.mode || props.mode === 'user') {
|
||||
params.userId = Taro.getStorageSync('UserId');
|
||||
}
|
||||
|
||||
// 获取当前tab的statusFilter配置
|
||||
const currentTab = tabs.find(tab => tab.index === Number(index));
|
||||
if (currentTab && currentTab.statusFilter !== undefined) {
|
||||
params.statusFilter = currentTab.statusFilter;
|
||||
}
|
||||
// 注意：当statusFilter为undefined时，不要添加到params中，这样API请求就不会包含这个参数
|
||||
|
||||
console.log(`Tab ${index} (${currentTab?.title}) 筛选参数:`, params);
|
||||
return params;
|
||||
};
|
||||
|
||||
const reload = useCallback(async (resetPage = false, targetPage?: number) => {
|
||||
setLoading(true);
|
||||
setError(null); // 清除之前的错误
|
||||
const currentPage = resetPage ? 1 : (targetPage || pageRef.current);
|
||||
const statusParams = getOrderStatusParams(tapIndex);
|
||||
// 合并搜索条件，tab的statusFilter优先级更高
|
||||
const searchConditions: any = {
|
||||
page: currentPage,
|
||||
...statusParams,
|
||||
...props.searchParams, // 搜索关键词等其他条件
|
||||
};
|
||||
|
||||
// Tabs 的 statusFilter 优先级最高；全部(-1)时不传该参数（后端按“无筛选”处理）
|
||||
if (statusParams.statusFilter === undefined || statusParams.statusFilter === -1) {
|
||||
delete searchConditions.statusFilter;
|
||||
} else {
|
||||
searchConditions.statusFilter = statusParams.statusFilter;
|
||||
}
|
||||
console.log('订单筛选条件:', {
|
||||
tapIndex,
|
||||
statusParams,
|
||||
searchConditions,
|
||||
finalStatusFilter: searchConditions.statusFilter
|
||||
});
|
||||
|
||||
try {
|
||||
const res = await pageShopOrder(searchConditions);
|
||||
|
||||
if (res?.list && res?.list.length > 0) {
|
||||
// 订单分页接口已返回 orderGoods：列表直接使用该字段
|
||||
const incoming = res.list as ShopOrder[];
|
||||
|
||||
// 使用函数式更新避免依赖 list
|
||||
setList(prevList => {
|
||||
const newList = resetPage ? incoming : (prevList || []).concat(incoming);
|
||||
return newList;
|
||||
});
|
||||
|
||||
// 正确判断是否还有更多数据
|
||||
const hasMoreData = incoming.length >= 10; // 假设每页10条数据
|
||||
setHasMore(hasMoreData);
|
||||
} else {
|
||||
setList(prevList => resetPage ? [] : prevList);
|
||||
setHasMore(false);
|
||||
}
|
||||
|
||||
pageRef.current = currentPage;
|
||||
setLoading(false);
|
||||
} catch (error) {
|
||||
console.error('加载订单失败:', error);
|
||||
setLoading(false);
|
||||
setError('加载订单失败，请重试');
|
||||
// 添加错误提示
|
||||
Taro.showToast({
|
||||
title: '加载失败，请重试',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
}, [tapIndex, props.searchParams]); // 移除 list/page 依赖，避免useEffect触发循环
|
||||
|
||||
const reloadMore = useCallback(async () => {
|
||||
if (loading || !hasMore) return; // 防止重复加载
|
||||
const nextPage = pageRef.current + 1;
|
||||
pageRef.current = nextPage;
|
||||
await reload(false, nextPage);
|
||||
}, [loading, hasMore, reload]);
|
||||
|
||||
// 确认收货 - 显示确认对话框
|
||||
const confirmReceive = (order: ShopOrder) => {
|
||||
setOrderToConfirmReceive(order);
|
||||
setConfirmReceiveDialogVisible(true);
|
||||
};
|
||||
|
||||
// 确认收货 - 执行收货操作
|
||||
const handleConfirmReceive = async () => {
|
||||
if (!orderToConfirmReceive) return;
|
||||
|
||||
try {
|
||||
setConfirmReceiveDialogVisible(false);
|
||||
|
||||
await updateShopOrder({
|
||||
...orderToConfirmReceive,
|
||||
deliveryStatus: orderToConfirmReceive.deliveryStatus, // 10未发货 20已发货 30部分发货（收货由orderStatus控制）
|
||||
orderStatus: 1 // 已完成
|
||||
});
|
||||
|
||||
Taro.showToast({
|
||||
title: '确认收货成功',
|
||||
icon: 'success'
|
||||
});
|
||||
|
||||
await reload(true); // 重新加载列表
|
||||
props.onReload?.(); // 通知父组件刷新
|
||||
|
||||
// 清空状态
|
||||
setOrderToConfirmReceive(null);
|
||||
} catch (error) {
|
||||
console.error('确认收货失败:', error);
|
||||
Taro.showToast({
|
||||
title: '确认收货失败',
|
||||
icon: 'none'
|
||||
});
|
||||
// 重新显示对话框
|
||||
setConfirmReceiveDialogVisible(true);
|
||||
}
|
||||
};
|
||||
|
||||
// 取消确认收货对话框
|
||||
const handleCancelReceiveDialog = () => {
|
||||
setConfirmReceiveDialogVisible(false);
|
||||
setOrderToConfirmReceive(null);
|
||||
};
|
||||
|
||||
// 申请退款 (待发货状态)
|
||||
const applyRefund = (order: ShopOrder) => {
|
||||
// 跳转到退款申请页面（订单状态在选择退款原因后再更新）
|
||||
Taro.navigateTo({
|
||||
url: `/user/order/refund/index?orderId=${order.orderId}&orderNo=${order.orderNo}`
|
||||
});
|
||||
};
|
||||
|
||||
// 查看物流 (待收货状态)
|
||||
// const viewLogistics = (order: ShopOrder) => {
|
||||
// // 跳转到物流查询页面
|
||||
// Taro.navigateTo({
|
||||
// url: `/user/order/logistics/index?orderId=${order.orderId}&orderNo=${order.orderNo}&expressNo=${order.transactionId || ''}&expressCompany=SF`
|
||||
// });
|
||||
// };
|
||||
|
||||
// 取消订单
|
||||
const cancelOrder = (order: ShopOrder) => {
|
||||
setOrderToCancel(order);
|
||||
setCancelDialogVisible(true);
|
||||
};
|
||||
|
||||
// 确认取消订单
|
||||
const handleConfirmCancel = async () => {
|
||||
if (!orderToCancel) return;
|
||||
if (!orderToCancel.orderId) {
|
||||
Taro.showToast({
|
||||
title: '订单信息错误',
|
||||
icon: 'error'
|
||||
});
|
||||
setOrderToCancel(null);
|
||||
setCancelDialogVisible(false);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setCancelDialogVisible(false);
|
||||
|
||||
// 更新订单状态为已取消，而不是删除订单
|
||||
await updateShopOrder({
|
||||
// 只传最小字段，避免误取消/误走售后流程
|
||||
orderId: orderToCancel.orderId,
|
||||
orderStatus: 2 // 已取消
|
||||
});
|
||||
|
||||
Taro.showToast({
|
||||
title: '订单已取消',
|
||||
icon: 'success'
|
||||
});
|
||||
void reload(true); // 重新加载列表
|
||||
props.onReload?.(); // 通知父组件刷新
|
||||
} catch (error) {
|
||||
console.error('取消订单失败:', error);
|
||||
Taro.showToast({
|
||||
title: '取消订单失败',
|
||||
icon: 'error'
|
||||
});
|
||||
} finally {
|
||||
setOrderToCancel(null);
|
||||
}
|
||||
};
|
||||
|
||||
// 取消对话框的取消操作
|
||||
const handleCancelDialog = () => {
|
||||
setCancelDialogVisible(false);
|
||||
setOrderToCancel(null);
|
||||
};
|
||||
|
||||
// 立即支付
|
||||
const payOrder = async (order: ShopOrder) => {
|
||||
try {
|
||||
if (!order.orderId) {
|
||||
Taro.showToast({
|
||||
title: '订单信息错误',
|
||||
icon: 'error'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (payingOrderId === order.orderId) {
|
||||
return;
|
||||
}
|
||||
setPayingOrderId(order.orderId);
|
||||
|
||||
// 尽量以服务端最新状态为准，避免“已取消/已支付”但列表未刷新导致误发起支付
|
||||
let latestOrder: ShopOrder | null = null;
|
||||
try {
|
||||
latestOrder = await getShopOrder(order.orderId);
|
||||
} catch (_e) {
|
||||
// 忽略：网络波动时继续使用列表数据兜底
|
||||
}
|
||||
const effectiveOrder = latestOrder ? { ...order, ...latestOrder } : order;
|
||||
|
||||
if (effectiveOrder.payStatus) {
|
||||
Taro.showToast({
|
||||
title: '订单已支付',
|
||||
icon: 'none'
|
||||
});
|
||||
// 同步刷新一次，避免列表显示旧状态
|
||||
void reload(true);
|
||||
return;
|
||||
}
|
||||
if (effectiveOrder.orderStatus === 2) {
|
||||
Taro.showToast({
|
||||
title: '订单已取消，无法支付',
|
||||
icon: 'error'
|
||||
});
|
||||
void reload(true);
|
||||
return;
|
||||
}
|
||||
|
||||
// 检查订单是否已过期（以最新 createTime 为准）
|
||||
if (effectiveOrder.createTime && isPaymentExpired(effectiveOrder.createTime)) {
|
||||
Taro.showToast({
|
||||
title: '订单已过期，无法支付',
|
||||
icon: 'error'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
Taro.showLoading({title: '发起支付...'});
|
||||
|
||||
// 构建商品数据：优先使用订单分页接口返回的 orderGoods；缺失时再补拉一次，避免goodsItems为空导致后端拒绝/再次支付失败
|
||||
let orderGoods = effectiveOrder.orderGoods || [];
|
||||
if (!orderGoods.length) {
|
||||
try {
|
||||
orderGoods = (await listShopOrderGoods({orderId: effectiveOrder.orderId})) || [];
|
||||
} catch (e) {
|
||||
// 继续走下面的校验提示
|
||||
console.error('补拉订单商品失败:', e);
|
||||
}
|
||||
}
|
||||
|
||||
const goodsItems = orderGoods
|
||||
.filter(g => !!(g as any).goodsId || !!(g as any).itemId)
|
||||
.map(goods => ({
|
||||
goodsId: (goods.goodsId ?? (goods as any).itemId) as number,
|
||||
quantity: ((goods as any).quantity ?? goods.totalNum ?? 1) as number,
|
||||
// 若后端按SKU计算价格/库存，补齐SKU/规格信息更安全
|
||||
skuId: (goods as any).skuId ?? (goods as any).sku_id,
|
||||
specInfo: (goods as any).specInfo ?? (goods as any).spec
|
||||
}));
|
||||
|
||||
if (!goodsItems.length) {
|
||||
Taro.showToast({
|
||||
title: '订单商品信息缺失，请稍后重试',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// 优先：对“已创建但未支付”的订单走“重新发起支付”接口（不应重复创建订单）
|
||||
// 若后端未提供该接口，则降级为重新创建订单（此时不传 orderNo，避免出现“相同订单号重复订单”）
|
||||
let result: any;
|
||||
let usedFallbackCreate = false;
|
||||
try {
|
||||
result = await prepayShopOrder({
|
||||
orderId: effectiveOrder.orderId!,
|
||||
payType: PaymentType.WECHAT
|
||||
});
|
||||
} catch (e) {
|
||||
// 订单状态等业务错误：直接提示，不要降级“重新创建订单”导致产生多笔订单
|
||||
if (e instanceof RequestError && e.type === ErrorType.BUSINESS_ERROR) {
|
||||
throw e;
|
||||
}
|
||||
usedFallbackCreate = true;
|
||||
const orderData: OrderCreateRequest = {
|
||||
goodsItems,
|
||||
addressId: effectiveOrder.addressId,
|
||||
payType: PaymentType.WECHAT,
|
||||
couponId: effectiveOrder.couponId,
|
||||
deliveryType: effectiveOrder.deliveryType,
|
||||
selfTakeMerchantId: effectiveOrder.selfTakeMerchantId,
|
||||
comments: effectiveOrder.comments,
|
||||
title: effectiveOrder.title,
|
||||
storeId: effectiveOrder.storeId,
|
||||
storeName: effectiveOrder.storeName,
|
||||
riderId: effectiveOrder.riderId,
|
||||
warehouseId: effectiveOrder.warehouseId
|
||||
};
|
||||
result = await createOrder(orderData);
|
||||
}
|
||||
|
||||
if (!result) {
|
||||
throw new Error('支付发起失败');
|
||||
}
|
||||
|
||||
// 验证微信支付必要参数
|
||||
if (!result.timeStamp || !result.nonceStr || !result.package || !result.paySign) {
|
||||
throw new Error('微信支付参数不完整');
|
||||
}
|
||||
|
||||
// 调用微信支付
|
||||
try {
|
||||
await Taro.requestPayment({
|
||||
timeStamp: result.timeStamp,
|
||||
nonceStr: result.nonceStr,
|
||||
package: result.package,
|
||||
signType: (result.signType || 'MD5') as 'MD5' | 'HMAC-SHA256',
|
||||
paySign: result.paySign,
|
||||
});
|
||||
} catch (payError: any) {
|
||||
const msg: string = payError?.errMsg || payError?.message || '';
|
||||
if (msg.includes('cancel')) {
|
||||
// 用户主动取消，不当作“失败”强提示
|
||||
Taro.showToast({
|
||||
title: '已取消支付',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
throw payError;
|
||||
}
|
||||
|
||||
// 支付成功
|
||||
Taro.showToast({
|
||||
title: '支付成功',
|
||||
icon: 'success'
|
||||
});
|
||||
|
||||
// 若因后端不支持“重新发起支付”而降级“重新创建订单”，则原订单会遗留为待支付，支付成功后自动将其标记为已取消，避免列表堆积
|
||||
if (usedFallbackCreate && effectiveOrder.orderId && !effectiveOrder.payStatus && effectiveOrder.orderStatus !== 2) {
|
||||
try {
|
||||
await updateShopOrder({
|
||||
orderId: effectiveOrder.orderId,
|
||||
orderStatus: 2
|
||||
});
|
||||
} catch (e) {
|
||||
console.warn('自动取消旧待支付订单失败:', e);
|
||||
}
|
||||
}
|
||||
|
||||
// 重新加载订单列表
|
||||
void reload(true);
|
||||
props.onReload?.();
|
||||
|
||||
// 跳转到订单页面
|
||||
setTimeout(() => {
|
||||
Taro.navigateTo({url: '/user/order/order'});
|
||||
}, 2000);
|
||||
|
||||
} catch (error: any) {
|
||||
console.error('支付失败:', error);
|
||||
|
||||
let errorMessage = '支付失败，请重试';
|
||||
const rawMsg: string = error?.errMsg || error?.message || '';
|
||||
if (rawMsg) {
|
||||
if (rawMsg.includes('cancel')) {
|
||||
errorMessage = '用户取消支付';
|
||||
} else if (rawMsg.includes('余额不足')) {
|
||||
errorMessage = '账户余额不足';
|
||||
} else {
|
||||
errorMessage = rawMsg;
|
||||
}
|
||||
}
|
||||
|
||||
Taro.showToast({
|
||||
title: errorMessage,
|
||||
icon: 'error'
|
||||
});
|
||||
} finally {
|
||||
Taro.hideLoading();
|
||||
setPayingOrderId(null);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
void reload(true); // 首次加载、tab切换或搜索条件变化时重置页码
|
||||
}, [reload]);
|
||||
|
||||
// 监听外部statusFilter变化，同步更新tab索引
|
||||
useEffect(() => {
|
||||
// 获取当前的statusFilter，如果未定义则默认为-1（全部）
|
||||
const currentStatusFilter = props.searchParams?.statusFilter !== undefined
|
||||
? props.searchParams.statusFilter
|
||||
: -1;
|
||||
|
||||
const tab = tabs.find(t => t.statusFilter === currentStatusFilter);
|
||||
const targetTabIndex = tab ? tab.index : 0;
|
||||
|
||||
console.log('外部statusFilter变化:', {
|
||||
statusFilter: currentStatusFilter,
|
||||
originalStatusFilter: props.searchParams?.statusFilter,
|
||||
currentTapIndex: tapIndex,
|
||||
targetTabIndex,
|
||||
shouldUpdate: targetTabIndex !== tapIndex
|
||||
});
|
||||
|
||||
if (targetTabIndex !== tapIndex) {
|
||||
setTapIndex(targetTabIndex);
|
||||
// 不需要调用reload，因为tapIndex变化会触发reload
|
||||
}
|
||||
}, [props.searchParams?.statusFilter, tapIndex]); // 监听statusFilter变化
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<Tabs
|
||||
align={'left'}
|
||||
className={'fixed left-0'}
|
||||
style={{
|
||||
zIndex: 998,
|
||||
borderBottom: '1px solid #e5e5e5'
|
||||
}}
|
||||
tabStyle={{
|
||||
backgroundColor: '#ffffff'
|
||||
// 注意：小程序不支持 boxShadow
|
||||
}}
|
||||
value={tapIndex}
|
||||
onChange={(paneKey) => {
|
||||
console.log('Tab切换:', paneKey, '类型:', typeof paneKey);
|
||||
const newTapIndex = Number(paneKey);
|
||||
setTapIndex(newTapIndex);
|
||||
|
||||
// 通知父组件更新 searchParams.statusFilter
|
||||
const currentTab = tabs.find(tab => tab.index === newTapIndex);
|
||||
if (currentTab && props.onSearchParamsChange) {
|
||||
const newSearchParams = {
|
||||
...props.searchParams,
|
||||
statusFilter: currentTab.statusFilter
|
||||
};
|
||||
console.log('通知父组件更新searchParams:', newSearchParams);
|
||||
props.onSearchParamsChange(newSearchParams);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{
|
||||
tabs?.map((item, _) => {
|
||||
return (
|
||||
<TabPane
|
||||
key={item.index}
|
||||
title={loading && tapIndex === item.index ? `${item.title}...` : item.title}
|
||||
></TabPane>
|
||||
)
|
||||
})
|
||||
}
|
||||
</Tabs>
|
||||
<PullToRefresh
|
||||
onRefresh={async () => {
|
||||
setHasMore(true)
|
||||
await reload(true)
|
||||
props.onReload?.()
|
||||
}}
|
||||
headHeight={60}
|
||||
>
|
||||
<View style={getInfiniteUlStyle(props.showSearch)} id="scroll">
|
||||
{error ? (
|
||||
<View className="flex flex-col items-center justify-center h-64">
|
||||
<View className="text-gray-500 mb-4">{error}</View>
|
||||
<Button
|
||||
size="small"
|
||||
type="primary"
|
||||
onClick={() => reload(true)}
|
||||
>
|
||||
重新加载
|
||||
</Button>
|
||||
</View>
|
||||
) : (
|
||||
<InfiniteLoading
|
||||
target="scroll"
|
||||
hasMore={hasMore}
|
||||
onLoadMore={reloadMore}
|
||||
onScroll={() => {
|
||||
|
||||
}}
|
||||
onScrollToUpper={() => {
|
||||
|
||||
}}
|
||||
loadingText={
|
||||
<>
|
||||
加载中
|
||||
</>
|
||||
}
|
||||
loadMoreText={
|
||||
list.length === 0 ? (
|
||||
<Empty style={{backgroundColor: 'transparent'}} description="您还没有订单哦"/>
|
||||
) : (
|
||||
<View className={'h-24'}>
|
||||
没有更多了
|
||||
</View>
|
||||
)
|
||||
}
|
||||
>
|
||||
|
||||
{/* 订单列表 */}
|
||||
{list.length > 0 && list
|
||||
?.filter((item) => {
|
||||
const orderStatus = toNum(item.orderStatus);
|
||||
// “待收货”不展示退款中的/已退款订单，这些订单统一放到“退货/售后”
|
||||
if (tapIndex === 3 && (orderStatus === 4 || orderStatus === 6)) {
|
||||
return false;
|
||||
}
|
||||
// “退货/售后”只展示售后相关状态
|
||||
if (tapIndex === 5) {
|
||||
return orderStatus === 4 || orderStatus === 5 || orderStatus === 6 || orderStatus === 7;
|
||||
}
|
||||
return true;
|
||||
})
|
||||
?.map((item, index) => {
|
||||
const orderStatus = toNum(item.orderStatus);
|
||||
const deliveryStatus = toNum(item.deliveryStatus);
|
||||
return (
|
||||
<Cell key={item.orderId ?? item.orderNo ?? index} style={{padding: '16px'}}
|
||||
onClick={() => Taro.navigateTo({url: `/shop/orderDetail/index?orderId=${item.orderId}`})}>
|
||||
<Space direction={'vertical'} className={'w-full flex flex-col'}>
|
||||
<View className={'order-no flex justify-between'}>
|
||||
<View className={'flex items-center'}>
|
||||
<Text className={'text-gray-600 font-bold text-sm'}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
copyText(`${item.orderNo}`)
|
||||
}}>{item.orderNo}</Text>
|
||||
</View>
|
||||
{/* 右侧显示合并的状态和倒计时 */}
|
||||
<View className={`${getOrderStatusColor(item)} font-medium`}>
|
||||
{!item.payStatus && orderStatus !== 2 ? (
|
||||
<PaymentCountdown
|
||||
expirationTime={item.expirationTime}
|
||||
createTime={item.createTime}
|
||||
payStatus={item.payStatus}
|
||||
realTime={false}
|
||||
showSeconds={false}
|
||||
timeoutHours={24}
|
||||
mode={'badge'}
|
||||
/>
|
||||
) : (
|
||||
getOrderStatusText(item)
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
<View
|
||||
className={'create-time text-gray-400 text-xs'}>{dayjs(item.createTime).format('YYYY年MM月DD日 HH:mm:ss')}</View>
|
||||
|
||||
{/* 商品信息 */}
|
||||
<View className={'goods-info'}>
|
||||
{item.orderGoods && item.orderGoods.length > 0 ? (
|
||||
item.orderGoods.map((goods, goodsIndex) => (
|
||||
<View key={goodsIndex} className={'flex items-center mb-2'}>
|
||||
<Image
|
||||
src={goods.image || '/default-goods.png'}
|
||||
width="50"
|
||||
height="50"
|
||||
lazyLoad={false}
|
||||
className={'rounded'}
|
||||
/>
|
||||
<View className={'ml-2 flex flex-col flex-1'}>
|
||||
<Text className={'text-sm font-bold'}>
|
||||
{goods.goodsName || (goods as any).goodsTitle || (goods as any).title || item.title || '订单商品'}
|
||||
</Text>
|
||||
{(goods.spec || (goods as any).specInfo) && (
|
||||
<Text className={'text-gray-500 text-xs'}>规格：{goods.spec || (goods as any).specInfo}</Text>
|
||||
)}
|
||||
<Text className={'text-gray-500 text-xs'}>数量：{(goods as any).quantity ?? goods.totalNum}</Text>
|
||||
</View>
|
||||
<Text className={'text-gray-400 text-xs'}>x</Text>
|
||||
<Text className={'text-sm'}>￥{goods.price || (goods as any).payPrice}</Text>
|
||||
</View>
|
||||
))
|
||||
) : (
|
||||
<View className={'flex items-center'}>
|
||||
<Avatar
|
||||
src='/default-goods.png'
|
||||
size={'50'}
|
||||
shape={'square'}
|
||||
/>
|
||||
<View className={'ml-2'}>
|
||||
<Text className={'text-sm'}>{item.title || '订单商品'}</Text>
|
||||
<Text className={'text-gray-400 text-xs'}>{item.totalNum}件商品</Text>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
<Text className={'w-full text-right'}>实付金额：￥{item.payPrice}</Text>
|
||||
|
||||
{/* 操作按钮 */}
|
||||
{!isReadOnly && (
|
||||
<Space className={'btn flex justify-end'}>
|
||||
{/* 待付款状态：显示取消订单和立即支付 */}
|
||||
{(!item.payStatus) && orderStatus !== 2 && (
|
||||
<Space>
|
||||
<Button size={'small'} onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
void cancelOrder(item);
|
||||
}}>取消订单</Button>
|
||||
{(!item.createTime || !isPaymentExpired(item.createTime, 24)) && (
|
||||
<Button size={'small'} type="primary" onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
void payOrder(item);
|
||||
}}>立即支付</Button>
|
||||
)}
|
||||
</Space>
|
||||
)}
|
||||
|
||||
{/* 待发货状态：显示申请退款 */}
|
||||
{item.payStatus && isWithinRefundWindow(item.payTime, 60) && deliveryStatus === 10 && orderStatus !== 2 && orderStatus !== 4 && orderStatus !== 6 && orderStatus !== 7 && !isOrderCompleted(item) && (
|
||||
<Button size={'small'} onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
applyRefund(item);
|
||||
}}>申请退款</Button>
|
||||
)}
|
||||
|
||||
{/* 待收货状态：显示查看物流和确认收货 */}
|
||||
{deliveryStatus === 20 && (!item.riderId || Number(item.riderId) === 0 || !!item.sendEndTime) && orderStatus !== 2 && orderStatus !== 6 && !isOrderCompleted(item) && (
|
||||
<Space>
|
||||
{/*<Button size={'small'} onClick={(e) => {*/}
|
||||
{/* e.stopPropagation();*/}
|
||||
{/* viewLogistics(item);*/}
|
||||
{/*}}>查看物流</Button>*/}
|
||||
<Button size={'small'} type="primary" onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
confirmReceive(item);
|
||||
}}>确认收货</Button>
|
||||
</Space>
|
||||
)}
|
||||
|
||||
{/* 退款/售后状态：显示查看进度和撤销申请 */}
|
||||
{(orderStatus === 4 || orderStatus === 7) && (
|
||||
<Space>
|
||||
{/*<Button size={'small'} onClick={(e) => {*/}
|
||||
{/* e.stopPropagation();*/}
|
||||
{/* viewProgress(item);*/}
|
||||
{/*}}>查看进度</Button>*/}
|
||||
</Space>
|
||||
)}
|
||||
|
||||
</Space>
|
||||
)}
|
||||
</Space>
|
||||
</Cell>
|
||||
)
|
||||
})}
|
||||
</InfiniteLoading>
|
||||
)}
|
||||
</View>
|
||||
</PullToRefresh>
|
||||
|
||||
{/* 取消订单确认对话框 */}
|
||||
<Dialog
|
||||
title="确认取消"
|
||||
visible={cancelDialogVisible}
|
||||
confirmText="确认取消"
|
||||
cancelText="我再想想"
|
||||
onConfirm={handleConfirmCancel}
|
||||
onCancel={handleCancelDialog}
|
||||
>
|
||||
确定要取消这个订单吗？
|
||||
</Dialog>
|
||||
|
||||
{/* 确认收货确认对话框 */}
|
||||
<Dialog
|
||||
title="确认收货"
|
||||
visible={confirmReceiveDialogVisible}
|
||||
confirmText="确认收货"
|
||||
cancelText="我再想想"
|
||||
onConfirm={handleConfirmReceive}
|
||||
onCancel={handleCancelReceiveDialog}
|
||||
>
|
||||
确定已经收到商品了吗？确认收货后订单将完成。
|
||||
</Dialog>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default OrderList
|
||||
@@ -1,3 +0,0 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: ''
|
||||
})
|
||||
@@ -1,191 +0,0 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,304 +0,0 @@
|
||||
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
|
||||
@@ -1,3 +0,0 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '查看物流'
|
||||
})
|
||||
@@ -1,186 +0,0 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,229 +0,0 @@
|
||||
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
|
||||
@@ -1,4 +0,0 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '订单列表',
|
||||
navigationStyle: 'custom'
|
||||
})
|
||||
@@ -1,72 +0,0 @@
|
||||
page {
|
||||
background: linear-gradient(to bottom, #f3f3f3, #f9fafb);
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
.search-container {
|
||||
transition: all 0.3s ease;
|
||||
|
||||
.nut-input {
|
||||
background-color: #f8f9fa !important;
|
||||
border: 1px solid #e5e5e5 !important;
|
||||
border-radius: 4px !important;
|
||||
|
||||
&:focus {
|
||||
border-color: #007bff !important;
|
||||
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.nut-button {
|
||||
border-radius: 4px !important;
|
||||
|
||||
&--primary {
|
||||
background: linear-gradient(135deg, #007bff, #0056b3) !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
&--small {
|
||||
padding: 6px 12px !important;
|
||||
font-size: 12px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Tabs样式优化
|
||||
.nut-tabs {
|
||||
.nut-tabs__titles {
|
||||
background: #ffffff !important;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
|
||||
|
||||
.nut-tabs__titles-item {
|
||||
font-size: 14px !important;
|
||||
font-weight: 500 !important;
|
||||
|
||||
&--active {
|
||||
color: #007bff !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.nut-tabs__line {
|
||||
background: #007bff !important;
|
||||
height: 3px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 筛选提示样式
|
||||
.filter-tip {
|
||||
animation: slideDown 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes slideDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@@ -1,176 +0,0 @@
|
||||
import {useState, useCallback, useRef, useEffect} from "react";
|
||||
import Taro from '@tarojs/taro'
|
||||
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 {useDidShow, useRouter} from '@tarojs/taro'
|
||||
import {ShopOrderParam} from "@/api/shop/shopOrder/model";
|
||||
import './order.scss'
|
||||
|
||||
function Order() {
|
||||
const {params} = useRouter();
|
||||
const [statusBarHeight, setStatusBarHeight] = useState<number>(0) // 默认值为0
|
||||
const [searchParams, setSearchParams] = useState<ShopOrderParam>({
|
||||
statusFilter: params.statusFilter != undefined && params.statusFilter != '' ? parseInt(params.statusFilter) : -1
|
||||
})
|
||||
const [showSearch, setShowSearch] = useState(false)
|
||||
const [searchKeyword, setSearchKeyword] = useState('')
|
||||
const searchTimeoutRef = useRef<NodeJS.Timeout>()
|
||||
|
||||
const reload = async (where?: ShopOrderParam) => {
|
||||
console.log(where,'where...')
|
||||
setSearchParams(prev => ({ ...prev, ...where }))
|
||||
}
|
||||
|
||||
// 防抖搜索函数
|
||||
const debouncedSearch = useCallback((keyword: string) => {
|
||||
if (searchTimeoutRef.current) {
|
||||
clearTimeout(searchTimeoutRef.current);
|
||||
}
|
||||
|
||||
searchTimeoutRef.current = setTimeout(() => {
|
||||
if (keyword.trim()) {
|
||||
handleSearch({keywords: keyword.trim()});
|
||||
} else {
|
||||
// 如果搜索关键词为空，清除keywords参数
|
||||
const newSearchParams = { ...searchParams };
|
||||
delete newSearchParams.keywords;
|
||||
setSearchParams(newSearchParams);
|
||||
reload(newSearchParams).then();
|
||||
}
|
||||
}, 500); // 500ms防抖延迟
|
||||
}, [searchParams]);
|
||||
|
||||
// 处理搜索
|
||||
const handleSearch = (where: ShopOrderParam) => {
|
||||
// 合并搜索参数，保留当前的statusFilter
|
||||
const newSearchParams = {
|
||||
...searchParams, // 保留当前的所有参数（包括statusFilter）
|
||||
...where // 应用新的搜索条件
|
||||
};
|
||||
setSearchParams(newSearchParams)
|
||||
reload(newSearchParams).then()
|
||||
}
|
||||
useEffect(() => {
|
||||
// 获取状态栏高度
|
||||
Taro.getSystemInfo({
|
||||
success: (res) => {
|
||||
setStatusBarHeight(res.statusBarHeight ?? 0)
|
||||
},
|
||||
})
|
||||
// 设置导航栏标题
|
||||
Taro.setNavigationBarTitle({
|
||||
title: '我的订单'
|
||||
});
|
||||
|
||||
Taro.setNavigationBarColor({
|
||||
backgroundColor: '#ffffff',
|
||||
frontColor: '#000000',
|
||||
});
|
||||
|
||||
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>
|
||||
<NavBar
|
||||
fixed={true}
|
||||
style={{marginTop: `${statusBarHeight || 0}px`, backgroundColor: '#ffffff'}}
|
||||
left={
|
||||
<>
|
||||
<div className={'flex justify-between items-center w-full'}>
|
||||
<Space>
|
||||
<ArrowLeft onClick={() => Taro.navigateBack()}/>
|
||||
<Search
|
||||
size={18}
|
||||
className={'mx-4'}
|
||||
onClick={() => setShowSearch(!showSearch)}
|
||||
/>
|
||||
</Space>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<span>商城订单</span>
|
||||
</NavBar>
|
||||
{/* 搜索和筛选工具栏 */}
|
||||
<View className="bg-white px-4 py-3 flex justify-between items-center border-gray-100">
|
||||
<View className="flex items-center">
|
||||
<Filter
|
||||
size={18}
|
||||
className="text-gray-600"
|
||||
onClick={() => setShowSearch(!showSearch)}
|
||||
/>
|
||||
<span className="ml-2 text-sm text-gray-600">筛选</span>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 搜索组件 */}
|
||||
{showSearch && (
|
||||
<View className="bg-white p-3 shadow-sm border-b border-gray-100">
|
||||
<View className="flex items-center">
|
||||
<View className="flex-1 mr-2">
|
||||
<Input
|
||||
placeholder="搜索订单号、商品名称"
|
||||
value={searchKeyword}
|
||||
onChange={(value) => {
|
||||
setSearchKeyword(value);
|
||||
debouncedSearch(value); // 使用防抖搜索
|
||||
}}
|
||||
onConfirm={() => {
|
||||
if (searchKeyword.trim()) {
|
||||
handleSearch({keywords: searchKeyword.trim()});
|
||||
}
|
||||
}}
|
||||
style={{
|
||||
padding: '8px 12px',
|
||||
border: '1px solid #e5e5e5',
|
||||
borderRadius: '4px',
|
||||
backgroundColor: '#f8f9fa'
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
<Space>
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={() => {
|
||||
if (searchKeyword.trim()) {
|
||||
handleSearch({keywords: searchKeyword.trim()});
|
||||
}
|
||||
}}
|
||||
>
|
||||
搜索
|
||||
</Button>
|
||||
</Space>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/*订单列表*/}
|
||||
<OrderList
|
||||
onReload={() => reload(searchParams)}
|
||||
searchParams={searchParams}
|
||||
showSearch={showSearch}
|
||||
onSearchParamsChange={(newParams) => {
|
||||
console.log('父组件接收到searchParams变化:', newParams);
|
||||
setSearchParams(newParams);
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
export default Order;
|
||||
@@ -1,3 +0,0 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '查看进度'
|
||||
})
|
||||
@@ -1,292 +0,0 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,388 +0,0 @@
|
||||
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
|
||||
@@ -1,3 +0,0 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '申请退款'
|
||||
})
|
||||
@@ -1,244 +0,0 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,472 +0,0 @@
|
||||
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
|
||||
@@ -1,4 +0,0 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '我的积分',
|
||||
navigationBarTextStyle: 'black'
|
||||
})
|
||||
@@ -1,213 +0,0 @@
|
||||
import {useState, useEffect, CSSProperties} from 'react'
|
||||
import Taro from '@tarojs/taro'
|
||||
import {Cell, InfiniteLoading, Card, Empty, ConfigProvider} from '@nutui/nutui-react-taro'
|
||||
import {pageUserPointsLog, getUserPointsStats} from "@/api/user/points";
|
||||
import {UserPointsLog as UserPointsLogType, UserPointsStats} from "@/api/user/points/model";
|
||||
import {View} from '@tarojs/components'
|
||||
|
||||
const InfiniteUlStyle: CSSProperties = {
|
||||
height: '100vh',
|
||||
width: '100%',
|
||||
padding: '0',
|
||||
overflowY: 'auto',
|
||||
overflowX: 'hidden',
|
||||
}
|
||||
|
||||
const UserPoints = () => {
|
||||
const [list, setList] = useState<UserPointsLogType[]>([])
|
||||
const [page, setPage] = useState(1)
|
||||
const [hasMore, setHasMore] = useState(true)
|
||||
const [stats, setStats] = useState<UserPointsStats>({})
|
||||
|
||||
useEffect(() => {
|
||||
reload()
|
||||
loadPointsStats()
|
||||
}, [])
|
||||
|
||||
const loadMore = async () => {
|
||||
setPage(page + 1)
|
||||
reload();
|
||||
}
|
||||
|
||||
const reload = () => {
|
||||
const userId = Taro.getStorageSync('UserId')
|
||||
if (!userId) {
|
||||
Taro.showToast({
|
||||
title: '请先登录',
|
||||
icon: 'error'
|
||||
});
|
||||
return
|
||||
}
|
||||
|
||||
pageUserPointsLog({
|
||||
userId: parseInt(userId),
|
||||
page
|
||||
}).then(res => {
|
||||
console.log(res)
|
||||
const newList = res?.list || [];
|
||||
setList([...list, ...newList])
|
||||
setHasMore(newList.length > 0)
|
||||
}).catch(error => {
|
||||
console.error('Points log error:', error)
|
||||
Taro.showToast({
|
||||
title: error?.message || '获取失败',
|
||||
icon: 'error'
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
const loadPointsStats = () => {
|
||||
const userId = Taro.getStorageSync('UserId')
|
||||
if (!userId) return
|
||||
|
||||
getUserPointsStats(parseInt(userId))
|
||||
.then((res: any) => {
|
||||
setStats(res)
|
||||
})
|
||||
.catch((error: any) => {
|
||||
console.error('Points stats error:', error)
|
||||
})
|
||||
}
|
||||
|
||||
const getPointsTypeText = (type?: number) => {
|
||||
switch (type) {
|
||||
case 1: return '获得积分'
|
||||
case 2: return '消费积分'
|
||||
case 3: return '积分过期'
|
||||
case 4: return '管理员调整'
|
||||
default: return '积分变动'
|
||||
}
|
||||
}
|
||||
|
||||
const getPointsTypeColor = (type?: number) => {
|
||||
switch (type) {
|
||||
case 1: return 'text-green-500'
|
||||
case 2: return 'text-red-500'
|
||||
case 3: return 'text-gray-500'
|
||||
case 4: return 'text-blue-500'
|
||||
default: return 'text-gray-500'
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<ConfigProvider>
|
||||
<View className="bg-gray-50 h-screen">
|
||||
{/* 积分统计卡片 */}
|
||||
<View className="p-4">
|
||||
<Card className="points-stats-card">
|
||||
<View className="text-center py-4">
|
||||
<View className="text-3xl font-bold text-orange-500 mb-2">
|
||||
{stats.currentPoints || 0}
|
||||
</View>
|
||||
<View className="text-sm text-gray-500 mb-4">当前积分</View>
|
||||
|
||||
<View className="flex justify-around text-center">
|
||||
<View>
|
||||
<View className="text-lg font-medium text-gray-800">
|
||||
{stats.totalEarned || 0}
|
||||
</View>
|
||||
<View className="text-xs text-gray-500">累计获得</View>
|
||||
</View>
|
||||
<View>
|
||||
<View className="text-lg font-medium text-gray-800">
|
||||
{stats.totalUsed || 0}
|
||||
</View>
|
||||
<View className="text-xs text-gray-500">累计消费</View>
|
||||
</View>
|
||||
<View>
|
||||
<View className="text-lg font-medium text-gray-800">
|
||||
{stats.expiringSoon || 0}
|
||||
</View>
|
||||
<View className="text-xs text-gray-500">即将过期</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</Card>
|
||||
</View>
|
||||
|
||||
{/* 积分记录 */}
|
||||
<View className="px-4 flex-1">
|
||||
|
||||
<ul style={{...InfiniteUlStyle, height: 'calc(100vh - 200px)'}} id="scroll">
|
||||
<InfiniteLoading
|
||||
target="scroll"
|
||||
hasMore={hasMore}
|
||||
onLoadMore={loadMore}
|
||||
onScroll={() => {
|
||||
console.log('onScroll')
|
||||
}}
|
||||
onScrollToUpper={() => {
|
||||
console.log('onScrollToUpper')
|
||||
}}
|
||||
loadingText={
|
||||
<>
|
||||
加载中
|
||||
</>
|
||||
}
|
||||
loadMoreText={
|
||||
<>
|
||||
没有更多了
|
||||
</>
|
||||
}
|
||||
>
|
||||
<View className="p-4">
|
||||
{list.length === 0 ? (
|
||||
<div className={'h-full flex flex-col justify-center items-center'} style={{
|
||||
height: 'calc(100vh - 500px)',
|
||||
}}>
|
||||
<Empty
|
||||
style={{
|
||||
backgroundColor: 'transparent'
|
||||
}}
|
||||
description="您还没有积分记录"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
list.map((item, index) => (
|
||||
<Cell.Group key={`${item.logId}-${index}`} className="mb-3">
|
||||
<Cell className="flex flex-col gap-2 p-4">
|
||||
<View className="flex justify-between items-start">
|
||||
<View className="flex-1">
|
||||
<View className="font-medium text-base text-gray-800 mb-1">
|
||||
{getPointsTypeText(item.type)}
|
||||
</View>
|
||||
<View className="text-sm text-gray-500">
|
||||
{item.reason || '无备注'}
|
||||
</View>
|
||||
</View>
|
||||
<View className={`text-lg font-bold ${getPointsTypeColor(item.type)}`}>
|
||||
{item.type === 1 ? '+' : item.type === 2 ? '-' : ''}
|
||||
{item.points || 0}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View className="flex justify-between items-center text-xs text-gray-400 mt-2">
|
||||
<View>
|
||||
{item.createTime ? new Date(item.createTime).toLocaleString() : ''}
|
||||
</View>
|
||||
{item.orderId && (
|
||||
<View>
|
||||
订单: {item.orderId}
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{item.comments && (
|
||||
<View className="text-xs text-gray-500 mt-1 p-2 bg-gray-50 rounded">
|
||||
备注: {item.comments}
|
||||
</View>
|
||||
)}
|
||||
</Cell>
|
||||
</Cell.Group>
|
||||
))
|
||||
)}
|
||||
</View>
|
||||
</InfiniteLoading>
|
||||
</ul>
|
||||
</View>
|
||||
</View>
|
||||
</ConfigProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export default UserPoints;
|
||||
@@ -1,4 +0,0 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '企业采购',
|
||||
navigationBarTextStyle: 'black'
|
||||
})
|
||||
@@ -1,115 +0,0 @@
|
||||
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
|
||||
@@ -1,4 +0,0 @@
|
||||
export default {
|
||||
navigationBarTitleText: '门店订单',
|
||||
navigationBarTextStyle: 'black'
|
||||
}
|
||||
@@ -1,73 +0,0 @@
|
||||
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>
|
||||
)
|
||||
}
|
||||
@@ -1,4 +0,0 @@
|
||||
export default {
|
||||
navigationBarTitleText: '门店核销',
|
||||
navigationBarTextStyle: 'black'
|
||||
}
|
||||
@@ -1,376 +0,0 @@
|
||||
import React, {useState} from 'react'
|
||||
import {View, Text, Image} from '@tarojs/components'
|
||||
import {Button, Input} from '@nutui/nutui-react-taro'
|
||||
import {Scan, Search} from '@nutui/icons-react-taro'
|
||||
import Taro from '@tarojs/taro'
|
||||
import dayjs from 'dayjs'
|
||||
import {getShopGiftByCode, updateShopGift, decryptQrData} from "@/api/shop/shopGift";
|
||||
import {useUser} from "@/hooks/useUser";
|
||||
import type {ShopGift} from "@/api/shop/shopGift/model";
|
||||
import {isValidJSON} from "@/utils/jsonUtils";
|
||||
|
||||
const StoreVerification: React.FC = () => {
|
||||
const {
|
||||
isAdmin
|
||||
} = useUser();
|
||||
const [scanResult, setScanResult] = useState<string>('')
|
||||
const [verificationCode, setVerificationCode] = useState<string>('')
|
||||
const [giftInfo, setGiftInfo] = useState<ShopGift | null>(null)
|
||||
const [loading, setLoading] = useState(false)
|
||||
|
||||
// 扫码功能
|
||||
const handleScan = () => {
|
||||
Taro.scanCode({
|
||||
success: (res) => {
|
||||
if (res.result) {
|
||||
console.log('扫码结果:', res.result)
|
||||
|
||||
// 判断是否为JSON格式
|
||||
if (isValidJSON(res.result)) {
|
||||
setLoading(true)
|
||||
const json = JSON.parse(res.result)
|
||||
console.log(json, 'json')
|
||||
if (json.businessType === 'gift') {
|
||||
// 调用解密接口
|
||||
handleDecryptAndVerify(json.token, json.data).then()
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('扫码失败:', err)
|
||||
Taro.showToast({
|
||||
title: '扫码失败',
|
||||
icon: 'error'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 调用解密接口
|
||||
const handleDecryptAndVerify = async (token: string, encryptedData: string) => {
|
||||
decryptQrData({token, encryptedData}).then(res => {
|
||||
const decryptedData = res;
|
||||
console.log('解密结果:', decryptedData)
|
||||
console.log('解密成功:', decryptedData)
|
||||
setScanResult(`${decryptedData}`)
|
||||
setVerificationCode(`${decryptedData}`)
|
||||
handleVerification(`${decryptedData}`)
|
||||
}).catch(() => {
|
||||
console.error('解密失败:')
|
||||
Taro.showToast({
|
||||
title: `token失效，请刷新二维码重试`,
|
||||
icon: 'none'
|
||||
})
|
||||
}).finally(() => {
|
||||
setLoading(false)
|
||||
})
|
||||
}
|
||||
|
||||
// 验证商品信息
|
||||
const handleVerification = async (code?: string) => {
|
||||
setGiftInfo(null)
|
||||
setVerificationCode(`${code}`)
|
||||
// 这里应该调用后端API验证核销码
|
||||
const gift = await getShopGiftByCode(`${code}`)
|
||||
if(gift){
|
||||
// 设置礼品信息用于显示
|
||||
setGiftInfo(gift)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// 手动输入核销码验证
|
||||
const handleManualVerification = async (code?: string) => {
|
||||
const codeToVerify = code || verificationCode.trim()
|
||||
if (!codeToVerify) {
|
||||
return false;
|
||||
}
|
||||
setLoading(true)
|
||||
try {
|
||||
// 这里应该调用后端API验证核销码
|
||||
const gift = await getShopGiftByCode(codeToVerify)
|
||||
|
||||
// 设置礼品信息用于显示
|
||||
setGiftInfo(gift)
|
||||
|
||||
if (!isAdmin()) {
|
||||
setLoading(false)
|
||||
return Taro.showToast({
|
||||
title: '您没有核销权限',
|
||||
icon: 'error'
|
||||
})
|
||||
}
|
||||
if (gift.status === 1) {
|
||||
setLoading(false)
|
||||
return Taro.showToast({
|
||||
title: '此礼品码已使用',
|
||||
icon: 'error'
|
||||
})
|
||||
}
|
||||
if (gift.status === 2) {
|
||||
setLoading(false)
|
||||
return Taro.showToast({
|
||||
title: '此礼品码已失效',
|
||||
icon: 'error'
|
||||
})
|
||||
}
|
||||
if (gift.userId === 0) {
|
||||
setLoading(false)
|
||||
return Taro.showToast({
|
||||
title: '此礼品码未认领',
|
||||
icon: 'error'
|
||||
})
|
||||
}
|
||||
|
||||
// 验证成功，设置状态
|
||||
await updateShopGift({
|
||||
...gift,
|
||||
status: 1,
|
||||
operatorUserId: Number(Taro.getStorageSync('UserId')) || 0,
|
||||
takeTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
|
||||
verificationTime: dayjs().format('YYYY-MM-DD HH:mm:ss')
|
||||
})
|
||||
Taro.showToast({
|
||||
title: '核销成功',
|
||||
icon: 'success'
|
||||
})
|
||||
// 重置状态
|
||||
setTimeout(() => {
|
||||
resetForm()
|
||||
}, 2000)
|
||||
} catch (error) {
|
||||
console.error('验证失败:', error)
|
||||
Taro.showToast({
|
||||
title: '验证失败',
|
||||
icon: 'error'
|
||||
})
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
// 重置表单
|
||||
const resetForm = () => {
|
||||
setScanResult('')
|
||||
setVerificationCode('')
|
||||
setGiftInfo(null)
|
||||
}
|
||||
|
||||
// 获取类型文本
|
||||
const getTypeText = (type: number) => {
|
||||
switch (type) {
|
||||
case 10:
|
||||
return '礼品劵'
|
||||
case 20:
|
||||
return '虚拟礼品卡'
|
||||
case 30:
|
||||
return '服务礼品卡'
|
||||
default:
|
||||
return '水票'
|
||||
}
|
||||
}
|
||||
|
||||
// useEffect(() => {
|
||||
// handleManualVerification().then()
|
||||
// },[verificationCode])
|
||||
|
||||
return (
|
||||
<View className="bg-gray-50 min-h-screen">
|
||||
{/* 页面标题 */}
|
||||
<View className="bg-white px-4 py-3 border-b border-gray-100">
|
||||
<Text className="text-lg font-bold text-center">
|
||||
礼品卡核销
|
||||
</Text>
|
||||
<Text className="text-sm text-gray-600 text-center mt-1 px-2">
|
||||
门店工作人员核销页面
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{/* 扫码区域 */}
|
||||
<View className="bg-white mx-4 mt-4 p-4 rounded-lg">
|
||||
<View className={'mb-3'}>
|
||||
<Text className="font-bold">扫码核销</Text>
|
||||
</View>
|
||||
<Button
|
||||
size="large"
|
||||
type="primary"
|
||||
icon={<Scan/>}
|
||||
onClick={handleScan}
|
||||
block
|
||||
>
|
||||
扫描二维码
|
||||
</Button>
|
||||
|
||||
|
||||
{/* 手动输入区域 */}
|
||||
<View className="mt-8"></View>
|
||||
<View className="font-bold mb-3">手动输入核销码</View>
|
||||
<View className="flex items-center justify-between">
|
||||
<Input
|
||||
placeholder="请输入6位核销码"
|
||||
value={verificationCode}
|
||||
onChange={setVerificationCode}
|
||||
maxLength={6}
|
||||
className="flex-1 mr-8"
|
||||
style={{
|
||||
backgroundColor: '#f3f3f3',
|
||||
borderRadius: '8px'
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<Search/>}
|
||||
loading={loading}
|
||||
onClick={() => handleVerification(verificationCode)}
|
||||
>
|
||||
验证
|
||||
</Button>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
|
||||
{/*在扫码结果显示区域添加解密状态提示*/}
|
||||
{scanResult && !giftInfo && (
|
||||
<View className="mt-4 p-4 bg-gray-50 rounded-lg">
|
||||
<Text className="text-sm text-gray-600">
|
||||
{loading ? '正在解密验证...' : '扫码结果:'}
|
||||
</Text>
|
||||
<Text className="text-xs text-gray-500 break-all mt-1">
|
||||
{scanResult}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* 商品信息展示 */}
|
||||
{giftInfo && (
|
||||
<View className="mt-4 mx-4 p-4 bg-white rounded-lg shadow-sm border border-gray-100">
|
||||
<View className="flex items-center mb-3">
|
||||
<Text className="text-lg font-semibold text-gray-800">商品信息</Text>
|
||||
<View className={`ml-2 px-2 py-1 rounded text-xs ${
|
||||
giftInfo.status === 0 ? 'bg-green-100 text-green-600' :
|
||||
giftInfo.status === 1 ? 'bg-gray-100 text-gray-600' :
|
||||
'bg-red-100 text-red-600'
|
||||
}`}>
|
||||
{giftInfo.status === 0 ? '未使用' :
|
||||
giftInfo.status === 1 ? '已使用' : '已过期'}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View className="mt-3 pt-3 border-t border-gray-100 flex justify-between">
|
||||
{/* 商品图片 */}
|
||||
{giftInfo.goodsImage && (
|
||||
<View className="w-20 h-20 mr-3 flex-shrink-0">
|
||||
<Image
|
||||
src={giftInfo.goodsImage}
|
||||
className="w-full h-full rounded-lg object-cover border border-gray-200"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* 商品详情 */}
|
||||
<View className="flex-1">
|
||||
<View className="text-base font-medium text-gray-900 mb-1">
|
||||
{giftInfo.goodsName || giftInfo.name}
|
||||
</View>
|
||||
<View className="text-sm text-gray-400">
|
||||
使用门店：{giftInfo.useLocation || '123123'}
|
||||
</View>
|
||||
{giftInfo.description && (
|
||||
<>
|
||||
<View className="text-sm text-gray-600 mb-2" style={{
|
||||
overflow: 'hidden'
|
||||
// 注意：小程序不支持 WebKit 文本截断属性
|
||||
}}>
|
||||
{giftInfo.description}
|
||||
</View>
|
||||
</>
|
||||
)}
|
||||
|
||||
<View className="flex items-center justify-between">
|
||||
<Text className="text-lg font-bold text-red-500">
|
||||
¥{giftInfo.faceValue}
|
||||
</Text>
|
||||
<Text className="text-xs text-gray-500">
|
||||
{giftInfo.type === 10 ? '实物礼品' :
|
||||
giftInfo.type === 20 ? '虚拟礼品' : '服务礼品'}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 附加信息 */}
|
||||
<View className="mt-3 pt-3 border-t border-gray-100">
|
||||
|
||||
{giftInfo.expireTime && (
|
||||
<View className="flex items-center mb-2">
|
||||
<Text className="text-sm text-gray-600">有效期至:</Text>
|
||||
<Text className="text-sm text-gray-800">
|
||||
{dayjs(giftInfo.expireTime).format('YYYY-MM-DD HH:mm')}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{giftInfo.contactInfo && (
|
||||
<View className="flex items-center">
|
||||
<Text className="text-sm text-gray-600">客服电话:</Text>
|
||||
<Text className="text-sm text-blue-600">{giftInfo.contactInfo}</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
<View className="flex justify-between mb-3">
|
||||
<Text className="text-gray-600">类型</Text>
|
||||
<Text>{getTypeText(giftInfo.type as number)}</Text>
|
||||
</View>
|
||||
|
||||
<View className="flex justify-between mb-3">
|
||||
<Text className="text-gray-600">兑换码</Text>
|
||||
<Text className="font-mono text-sm">{giftInfo.code}</Text>
|
||||
</View>
|
||||
|
||||
{giftInfo.operatorUserName && (
|
||||
<View className="flex justify-between mb-3">
|
||||
<Text className="text-gray-600">核销人员</Text>
|
||||
<Text className="font-mono text-sm">{giftInfo.operatorUserName}</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{giftInfo.takeTime && (
|
||||
<View className="flex justify-between mb-3">
|
||||
<Text className="text-gray-600">核销时间</Text>
|
||||
<Text className="font-mono text-sm">{giftInfo.takeTime}</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{giftInfo && giftInfo.status === 0 && (
|
||||
<Button
|
||||
size="large"
|
||||
type="info"
|
||||
loading={loading}
|
||||
onClick={() => handleManualVerification()}
|
||||
block
|
||||
>
|
||||
确认核销
|
||||
</Button>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* 使用说明 */}
|
||||
<View className="bg-blue-50 mx-4 my-4 p-4 rounded-lg">
|
||||
<Text className="font-bold mb-2 text-gray-500">操作说明：</Text>
|
||||
<View>
|
||||
<Text className="text-sm text-gray-500 mb-1">1. 用户出示礼品卡二维码</Text>
|
||||
<Text className="text-sm text-gray-500 mb-1">2. 点击"扫描二维码"进行扫码</Text>
|
||||
<Text className="text-sm text-gray-500 mb-1">3. 或手动输入用户提供的核销码</Text>
|
||||
<Text className="text-sm text-gray-500">4. 验证成功后点击"确认核销"完成</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View className={'h-10'}></View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export default StoreVerification
|
||||
@@ -1,4 +0,0 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '主题设置',
|
||||
navigationBarTextStyle: 'black'
|
||||
})
|
||||
@@ -1,179 +0,0 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { View, Text } from '@tarojs/components'
|
||||
import { Cell, CellGroup, Radio } from '@nutui/nutui-react-taro'
|
||||
import { gradientThemes, GradientTheme, gradientUtils } from '@/styles/gradients'
|
||||
import Taro from '@tarojs/taro'
|
||||
import FixedButton from "@/components/FixedButton";
|
||||
|
||||
const ThemeSelector: React.FC = () => {
|
||||
const [selectedTheme, setSelectedTheme] = useState<string>('')
|
||||
const [currentTheme, setCurrentTheme] = useState<GradientTheme | null>(null)
|
||||
|
||||
// 获取当前主题
|
||||
useEffect(() => {
|
||||
const savedTheme = Taro.getStorageSync('user_theme') || 'nature'
|
||||
setSelectedTheme(savedTheme)
|
||||
|
||||
if (savedTheme === 'auto') {
|
||||
// 自动主题：根据用户ID生成
|
||||
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 === savedTheme)
|
||||
setCurrentTheme(theme || gradientThemes[0])
|
||||
}
|
||||
}, [])
|
||||
|
||||
// 保存主题设置
|
||||
const saveTheme = (themeName: string) => {
|
||||
try {
|
||||
Taro.setStorageSync('user_theme', themeName)
|
||||
setSelectedTheme(themeName)
|
||||
|
||||
if (themeName === 'auto') {
|
||||
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)
|
||||
setCurrentTheme(theme || gradientThemes[0])
|
||||
}
|
||||
|
||||
Taro.showToast({
|
||||
title: '主题已保存',
|
||||
icon: 'success',
|
||||
})
|
||||
|
||||
// 延迟返回，让用户看到效果
|
||||
setTimeout(() => {
|
||||
Taro.navigateBack()
|
||||
}, 1000)
|
||||
} catch (error) {
|
||||
Taro.showToast({
|
||||
title: '保存失败',
|
||||
icon: 'error',
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 预览主题
|
||||
const previewTheme = (themeName: string) => {
|
||||
if (themeName === 'auto') {
|
||||
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)
|
||||
setCurrentTheme(theme || gradientThemes[0])
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<View className="min-h-screen bg-gray-50">
|
||||
{/* 当前主题预览 */}
|
||||
{currentTheme && (
|
||||
<View
|
||||
className="mx-4 mt-4 rounded-xl p-6 text-center"
|
||||
style={{
|
||||
background: currentTheme.background,
|
||||
color: currentTheme.textColor
|
||||
}}
|
||||
>
|
||||
<Text className="text-lg font-bold mb-2">当前主题预览</Text>
|
||||
<Text className="text-sm opacity-90 px-2">{currentTheme.description}</Text>
|
||||
<View className="mt-4 flex justify-center space-x-4">
|
||||
<View
|
||||
className="w-8 h-8 rounded-full"
|
||||
style={{ backgroundColor: currentTheme.primary }}
|
||||
></View>
|
||||
{currentTheme.secondary && (
|
||||
<View
|
||||
className="w-8 h-8 rounded-full"
|
||||
style={{ backgroundColor: currentTheme.secondary }}
|
||||
></View>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* 主题选择 */}
|
||||
<View className="mt-4">
|
||||
<CellGroup>
|
||||
<Cell
|
||||
className="px-4 py-2"
|
||||
title={
|
||||
<View className="flex items-center justify-between w-full">
|
||||
<View>
|
||||
<Text className="font-medium">智能主题</Text>
|
||||
<Text className="text-sm text-gray-500 mt-1">
|
||||
根据您的用户ID自动选择个性化主题
|
||||
</Text>
|
||||
</View>
|
||||
<Radio
|
||||
checked={selectedTheme === 'auto'}
|
||||
onChange={() => {
|
||||
setSelectedTheme('auto')
|
||||
previewTheme('auto')
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
}
|
||||
onClick={() => {
|
||||
setSelectedTheme('auto')
|
||||
previewTheme('auto')
|
||||
}}
|
||||
/>
|
||||
</CellGroup>
|
||||
|
||||
<View className="mt-4">
|
||||
<Text className="text-sm text-gray-600 px-4 mb-2">手动选择主题</Text>
|
||||
<CellGroup>
|
||||
{gradientThemes.map((theme) => (
|
||||
<Cell
|
||||
key={theme.name}
|
||||
className="px-4 py-3"
|
||||
title={
|
||||
<View className="flex items-center justify-between w-full">
|
||||
<View className="flex items-center">
|
||||
<View
|
||||
className="w-6 h-6 rounded-full mr-3"
|
||||
style={{ background: theme.background }}
|
||||
></View>
|
||||
<View>
|
||||
<Text className="font-medium">{theme.description.split(' - ')[0]}</Text>
|
||||
<Text className="text-sm text-gray-500 mt-1">
|
||||
{theme.description.split(' - ')[1]}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
<Radio
|
||||
checked={selectedTheme === theme.name}
|
||||
onChange={() => {
|
||||
setSelectedTheme(theme.name)
|
||||
previewTheme(theme.name)
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
}
|
||||
onClick={() => {
|
||||
setSelectedTheme(theme.name)
|
||||
previewTheme(theme.name)
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</CellGroup>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 保存按钮 */}
|
||||
<FixedButton text={'保存主题设置'} background={currentTheme?.background || '#1890ff'} onClick={() => saveTheme(selectedTheme)} />
|
||||
|
||||
{/* 底部安全区域 */}
|
||||
<View className="h-20"></View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export default ThemeSelector
|
||||
@@ -1,5 +0,0 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '我的水票',
|
||||
navigationBarTextStyle: 'black',
|
||||
navigationBarBackgroundColor: '#ffffff'
|
||||
})
|
||||
@@ -1,716 +0,0 @@
|
||||
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;
|
||||
@@ -1,5 +0,0 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '送水订单',
|
||||
navigationBarTextStyle: 'black',
|
||||
navigationBarBackgroundColor: '#ffffff'
|
||||
})
|
||||
@@ -1,636 +0,0 @@
|
||||
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>
|
||||
)
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '立即送水',
|
||||
navigationBarTextStyle: 'black',
|
||||
navigationBarBackgroundColor: '#ffffff'
|
||||
})
|
||||
@@ -1,116 +0,0 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,4 +0,0 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '余额明细',
|
||||
navigationBarTextStyle: 'black'
|
||||
})
|
||||
@@ -1,105 +0,0 @@
|
||||
import {useState, useEffect, CSSProperties} from 'react'
|
||||
import {Cell, InfiniteLoading} from '@nutui/nutui-react-taro'
|
||||
import {pageUserBalanceLog} from "@/api/user/balance-log";
|
||||
import {UserBalanceLog} from "@/api/user/balance-log/model";
|
||||
import {formatCurrency} from "@/utils/common";
|
||||
import {View} from '@tarojs/components'
|
||||
|
||||
const InfiniteUlStyle: CSSProperties = {
|
||||
height: '100vh',
|
||||
width: '100%',
|
||||
padding: '0',
|
||||
overflowY: 'auto',
|
||||
overflowX: 'hidden',
|
||||
}
|
||||
|
||||
const Wallet = () => {
|
||||
const [list, setList] = useState<UserBalanceLog[]>([])
|
||||
const [page, setPage] = useState(1)
|
||||
const [hasMore, setHasMore] = useState(true)
|
||||
|
||||
useEffect(() => {
|
||||
reload()
|
||||
}, [])
|
||||
|
||||
const loadMore = async () => {
|
||||
setPage(page + 1)
|
||||
reload();
|
||||
}
|
||||
|
||||
const reload = () => {
|
||||
pageUserBalanceLog({page}).then(res => {
|
||||
console.log(res)
|
||||
const newList = res?.list || [];
|
||||
setList([...list, ...newList])
|
||||
setHasMore(newList.length > 0)
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<ul style={InfiniteUlStyle} id="scroll">
|
||||
<InfiniteLoading
|
||||
target="scroll"
|
||||
hasMore={hasMore}
|
||||
onLoadMore={loadMore}
|
||||
onScroll={() => {
|
||||
console.log('onScroll')
|
||||
}}
|
||||
onScrollToUpper={() => {
|
||||
console.log('onScrollToUpper')
|
||||
}}
|
||||
loadingText={
|
||||
<>
|
||||
加载中
|
||||
</>
|
||||
}
|
||||
loadMoreText={
|
||||
<>
|
||||
没有更多了
|
||||
</>
|
||||
}
|
||||
>
|
||||
<View className="p-4">
|
||||
{list.map((item, index) => (
|
||||
<Cell.Group key={`${item.logId}-${index}`} className="mb-4">
|
||||
<Cell className="flex flex-col gap-2 p-4">
|
||||
<View className="flex justify-between items-start w-full">
|
||||
<View className="flex-1">
|
||||
<View className="font-medium text-base text-gray-800 mb-1">
|
||||
{item.scene === 10 ? '会员充值' : item.scene === 20 ? '用户消费' : item.scene === 30 ? '管理员操作' : '订单退款'}
|
||||
</View>
|
||||
<View className="text-sm text-gray-500">
|
||||
{item.comments}
|
||||
</View>
|
||||
</View>
|
||||
<View className={`text-lg font-bold ${
|
||||
item.scene === 10 ? 'text-orange-500' : ''
|
||||
}`}>
|
||||
{item.scene === 10 ? '+' : '-'}
|
||||
{formatCurrency(Number(item.money), 'CNY') || '0.00'}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View className="flex justify-between w-full items-center text-xs text-gray-400 mt-2">
|
||||
<View>
|
||||
{item.createTime}
|
||||
</View>
|
||||
<View>余额：{item?.balance}</View>
|
||||
</View>
|
||||
|
||||
{item.remark && (
|
||||
<View className="text-xs text-gray-500 mt-1 p-2 bg-gray-50 rounded">
|
||||
备注: {item.remark}
|
||||
</View>
|
||||
)}
|
||||
</Cell>
|
||||
</Cell.Group>
|
||||
))}
|
||||
</View>
|
||||
</InfiniteLoading>
|
||||
</ul>
|
||||
</>
|
||||
)
|
||||
}
|
||||
export default Wallet
|
||||
Reference in New Issue
Block a user