Files
template-10584/src/user/ticket/index.tsx
赵忠林 8751be5fb4 feat(dealer): 更新分销中心为桂乐淘分享中心
- 将导航栏标题从"分销中心"和"推广二维码"统一改为"桂乐淘分享中心"
- 修改分享页面文案从"我的邀请小程序码"为"我的分享码"
- 更新分享描述文案为"与好友共享福利 一起省、一起赚"
- 将团队邀请文案改为"桂乐淘伙伴计划"
- 自购省 | 分享赚 | 好友惠
- 在用户票据页面添加日期格式化函数
- 调整票据详情显示顺序和字段内容
- 移除门店名称显示并注释相关代码
- 统一用户组件中的中心名称为"桂乐淘分享中心"
- 更新水票列表标题显示格式
2026-02-07 12:22:43 +08:00

613 lines
22 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

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 formatDate = (v?: string) => {
if (!v) return '-';
const d = dayjs(v);
return d.isValid() ? d.format('YYYY年MM月DD日') : 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-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.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;