feat(user): 新增收货地址管理及售后申请页面
- 新增地址类型定义，增强前端地址数据结构 - 新增地址编辑页面，支持地址智能识别和定位选点功能 - 地址编辑支持省市区选择及默认地址设置 - 新增地址列表页面，支持地址展示、删除、编辑和选择功能 - 实现售后申请页面，支持选择售后类型和退款原因 - 售后申请支持商品选择、退款金额计算和凭证上传 - 新增售后详情页面，支持售后状态展示及申请取消 - 优化页面加载和用户交互体验，增加错误提示和权限处理
This commit is contained in:
158
src_bak/pages/user/benefit-exchange-list/index.scss
Normal file
158
src_bak/pages/user/benefit-exchange-list/index.scss
Normal file
@@ -0,0 +1,158 @@
|
||||
.exchange-list-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.tab-bar {
|
||||
display: flex;
|
||||
background: #fff;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 24rpx 0;
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tab-item.active {
|
||||
color: #ff6b35;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.tab-item.active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 40rpx;
|
||||
height: 4rpx;
|
||||
background: #ff6b35;
|
||||
border-radius: 2rpx;
|
||||
}
|
||||
|
||||
.list-scroll {
|
||||
flex: 1;
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.exchange-card {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.pkg-name {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
font-size: 22rpx;
|
||||
padding: 4rpx 12rpx;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
|
||||
.pending { color: #fa8c16; background: rgba(250,140,22,.1); }
|
||||
.shipped { color: #1890ff; background: rgba(24,144,255,.1); }
|
||||
.done { color: #07c160; background: rgba(7,193,96,.1); }
|
||||
.cancelled { color: #999; background: rgba(153,153,153,.1); }
|
||||
|
||||
.cost-row {
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.cost-text {
|
||||
font-size: 24rpx;
|
||||
color: #ff6b35;
|
||||
}
|
||||
|
||||
.address-row {
|
||||
display: flex;
|
||||
margin-bottom: 10rpx;
|
||||
font-size: 22rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.addr-label {
|
||||
flex-shrink: 0;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.addr-val {
|
||||
flex: 1;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.express-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10rpx;
|
||||
font-size: 22rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.express-label {
|
||||
flex-shrink: 0;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.express-val {
|
||||
flex: 1;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.copy-btn {
|
||||
color: #1890ff;
|
||||
font-size: 22rpx;
|
||||
padding: 4rpx 12rpx;
|
||||
border: 1rpx solid #1890ff;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 12rpx;
|
||||
padding-top: 12rpx;
|
||||
border-top: 1rpx solid #f5f5f5;
|
||||
}
|
||||
|
||||
.create-time {
|
||||
font-size: 22rpx;
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
padding: 6rpx 20rpx;
|
||||
border: 1rpx solid #ddd;
|
||||
border-radius: 24rpx;
|
||||
}
|
||||
|
||||
.loading-tip {
|
||||
text-align: center;
|
||||
padding: 24rpx;
|
||||
font-size: 24rpx;
|
||||
color: #bbb;
|
||||
}
|
||||
170
src_bak/pages/user/benefit-exchange-list/index.tsx
Normal file
170
src_bak/pages/user/benefit-exchange-list/index.tsx
Normal file
@@ -0,0 +1,170 @@
|
||||
import { View, Text, ScrollView } from '@tarojs/components';
|
||||
import Taro from '@tarojs/taro';
|
||||
import { useState, useEffect } from 'react';
|
||||
import { getMyExchangeList, cancelExchange } from '@/api/shop/shopMemberBenefit';
|
||||
import EmptyState from '@/components/common/EmptyState';
|
||||
import './index.scss';
|
||||
|
||||
definePageConfig({
|
||||
navigationBarTitleText: '兑换记录',
|
||||
});
|
||||
|
||||
const TABS = [
|
||||
{ label: '全部', value: -1 },
|
||||
{ label: '待处理', value: 0 },
|
||||
{ label: '已发货', value: 1 },
|
||||
{ label: '已完成', value: 2 },
|
||||
];
|
||||
|
||||
const STATUS_TEXT: Record<number, string> = {
|
||||
0: '待处理',
|
||||
1: '已发货',
|
||||
2: '已完成',
|
||||
3: '已取消',
|
||||
};
|
||||
|
||||
const STATUS_CLASS: Record<number, string> = {
|
||||
0: 'pending',
|
||||
1: 'shipped',
|
||||
2: 'done',
|
||||
3: 'cancelled',
|
||||
};
|
||||
|
||||
export default function BenefitExchangeListPage() {
|
||||
const [activeTab, setActiveTab] = useState(-1);
|
||||
const [list, setList] = useState<any[]>([]);
|
||||
const [page, setPage] = useState(1);
|
||||
const [hasMore, setHasMore] = useState(true);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
loadList(true);
|
||||
}, [activeTab]);
|
||||
|
||||
const loadList = async (isRefresh = false) => {
|
||||
if (loading) return;
|
||||
setLoading(true);
|
||||
const currentPage = isRefresh ? 1 : page;
|
||||
try {
|
||||
const params: any = { page: currentPage, limit: 20 };
|
||||
if (activeTab >= 0) params.status = activeTab;
|
||||
const res = await getMyExchangeList(params);
|
||||
if (res.code === 200) {
|
||||
const newList = res.data.list || [];
|
||||
setList(isRefresh ? newList : [...list, ...newList]);
|
||||
setPage(currentPage + 1);
|
||||
setHasMore(newList.length >= 20);
|
||||
}
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancel = (item: any) => {
|
||||
Taro.showModal({
|
||||
title: '取消兑换',
|
||||
content: '确认取消该兑换申请吗？',
|
||||
success: async (res) => {
|
||||
if (!res.confirm) return;
|
||||
const res2 = await cancelExchange(item.id);
|
||||
if (res2.code === 200) {
|
||||
Taro.showToast({ title: '已取消', icon: 'success' });
|
||||
loadList(true);
|
||||
}
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const handleTrack = (item: any) => {
|
||||
if (item.expressNo) {
|
||||
Taro.setClipboardData({ data: item.expressNo });
|
||||
Taro.showToast({ title: '快递单号已复制', icon: 'none' });
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<View className="exchange-list-page">
|
||||
{/* 标签栏 */}
|
||||
<View className="tab-bar">
|
||||
{TABS.map((tab) => (
|
||||
<View
|
||||
key={tab.value}
|
||||
className={`tab-item ${activeTab === tab.value ? 'active' : ''}`}
|
||||
onClick={() => setActiveTab(tab.value)}
|
||||
>
|
||||
{tab.label}
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
|
||||
<ScrollView
|
||||
className="list-scroll"
|
||||
scrollY
|
||||
onScrollToLower={() => hasMore && loadList()}
|
||||
>
|
||||
{!loading && list.length === 0 && (
|
||||
<EmptyState description="暂无兑换记录" />
|
||||
)}
|
||||
|
||||
{list.map((item) => (
|
||||
<View key={item.id} className="exchange-card">
|
||||
<View className="card-header">
|
||||
<Text className="pkg-name">{item.packageName}</Text>
|
||||
<Text className={`status-tag ${STATUS_CLASS[item.status]}`}>
|
||||
{STATUS_TEXT[item.status]}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<View className="cost-row">
|
||||
{item.pointsCost > 0 && (
|
||||
<Text className="cost-text">消耗 {item.pointsCost} 积分</Text>
|
||||
)}
|
||||
{item.balanceCost > 0 && (
|
||||
<Text className="cost-text">消耗 ¥{item.balanceCost}</Text>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{item.addressSnapshot && (
|
||||
<View className="address-row">
|
||||
<Text className="addr-label">收货地址：</Text>
|
||||
<Text className="addr-val">
|
||||
{(() => {
|
||||
try {
|
||||
const addr = JSON.parse(item.addressSnapshot);
|
||||
return `${addr.name} ${addr.phone} ${addr.province}${addr.city}${addr.district}${addr.detail}`;
|
||||
} catch {
|
||||
return item.addressSnapshot;
|
||||
}
|
||||
})()}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{item.status === 1 && item.expressNo && (
|
||||
<View className="express-row" onClick={() => handleTrack(item)}>
|
||||
<Text className="express-label">快递：</Text>
|
||||
<Text className="express-val">
|
||||
{item.expressCompany} {item.expressNo}
|
||||
</Text>
|
||||
<Text className="copy-btn">复制</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
<View className="card-footer">
|
||||
<Text className="create-time">{item.createTime}</Text>
|
||||
{item.status === 0 && (
|
||||
<View className="cancel-btn" onClick={() => handleCancel(item)}>
|
||||
取消兑换
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
))}
|
||||
|
||||
{loading && (
|
||||
<View className="loading-tip">加载中...</View>
|
||||
)}
|
||||
</ScrollView>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user