赵忠林
25177d724e
- 优化导入路径，修复 PageParam 类型引用 - 新增 DeliverConfirmMode 类型定义，支持拍照完成和等待客户确认两种模式 - 实现配送确认的双模式功能，支持直接完成和等待确认流程 - 重构订单状态判断逻辑，完善配送流程状态管理 - 新增用户端确认收货功能，支持手动确认收货操作 - 优化订单列表展示，增加票号、取货点、门店电话等详细信息 - 添加地址复制和联系门店功能按钮 - 实现补传照片完成订单功能 - 更新订单流程状态显示，提供更准确的状态标识 - 添加配送确认模式切换的单选框界面 - 优化下单成功后的页面跳转逻辑 - 新增水票配送订单后端接口设计文档
607 lines
22 KiB
TypeScript
607 lines
22 KiB
TypeScript
import { 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 { 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 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 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">
|
||
{/*<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-400">下单时间：{formatDateTime(item.createTime)}</Text>
|
||
</View>
|
||
<View className="mt-1">
|
||
<Text className="text-xs text-gray-400">配送时间：{formatDateTime(item.sendTime)}</Text>
|
||
</View>
|
||
<View className="mt-1">
|
||
<Text className="text-xs text-gray-500">送水数量：{item.totalNum ?? 0}</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>
|
||
{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;
|