feat(user): 新增收货地址管理及售后申请页面
- 新增地址类型定义，增强前端地址数据结构 - 新增地址编辑页面，支持地址智能识别和定位选点功能 - 地址编辑支持省市区选择及默认地址设置 - 新增地址列表页面，支持地址展示、删除、编辑和选择功能 - 实现售后申请页面，支持选择售后类型和退款原因 - 售后申请支持商品选择、退款金额计算和凭证上传 - 新增售后详情页面，支持售后状态展示及申请取消 - 优化页面加载和用户交互体验，增加错误提示和权限处理
This commit is contained in:
139
src_bak/pages/user/withdraw-list/index.scss
Normal file
139
src_bak/pages/user/withdraw-list/index.scss
Normal file
@@ -0,0 +1,139 @@
|
||||
.withdraw-list-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.stats-card {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin: 24rpx;
|
||||
padding: 32rpx;
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.stats-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.stats-label {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.stats-value {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.tab-bar {
|
||||
display: flex;
|
||||
background: #fff;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 24rpx 0;
|
||||
font-size: 28rpx;
|
||||
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: 48rpx;
|
||||
height: 4rpx;
|
||||
background: #ff6b35;
|
||||
border-radius: 2rpx;
|
||||
}
|
||||
|
||||
.withdraw-scroll {
|
||||
flex: 1;
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.withdraw-item {
|
||||
background: #fff;
|
||||
border-radius: 12rpx;
|
||||
padding: 24rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.withdraw-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.withdraw-amount {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
font-size: 22rpx;
|
||||
padding: 4rpx 12rpx;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
|
||||
.status-pending {
|
||||
color: #ff9a56;
|
||||
background: rgba(255, 154, 86, 0.1);
|
||||
}
|
||||
|
||||
.status-success {
|
||||
color: #07c160;
|
||||
background: rgba(7, 193, 96, 0.1);
|
||||
}
|
||||
|
||||
.status-fail {
|
||||
color: #999;
|
||||
background: rgba(153, 153, 153, 0.1);
|
||||
}
|
||||
|
||||
.withdraw-info {
|
||||
display: flex;
|
||||
gap: 24rpx;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.info-text {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.withdraw-time {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
display: block;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.audit-remark {
|
||||
font-size: 22rpx;
|
||||
color: #ff6b35;
|
||||
display: block;
|
||||
margin-top: 8rpx;
|
||||
padding: 8rpx;
|
||||
background: #f5f5f5;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
169
src_bak/pages/user/withdraw-list/index.tsx
Normal file
169
src_bak/pages/user/withdraw-list/index.tsx
Normal file
@@ -0,0 +1,169 @@
|
||||
import { View, Text, ScrollView } from '@tarojs/components';
|
||||
import Taro from '@tarojs/taro';
|
||||
import { useState, useEffect } from 'react';
|
||||
import { getWithdrawStats, getMyWithdrawList } from '@/api/shop/shopWithdrawRecord';
|
||||
import EmptyState from '@/components/common/EmptyState';
|
||||
import { Loading } from '@nutui/nutui-react-taro';
|
||||
|
||||
import './index.scss';
|
||||
|
||||
definePageConfig({
|
||||
navigationBarTitleText: '提现记录',
|
||||
});
|
||||
|
||||
export default function WithdrawListPage() {
|
||||
const [stats, setStats] = useState<any>({});
|
||||
const [list, setList] = useState<any[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [page, setPage] = useState(1);
|
||||
const [hasMore, setHasMore] = useState(true);
|
||||
const [activeTab, setActiveTab] = useState(-1); // -1全部/0待审核/1通过/4完成
|
||||
|
||||
useEffect(() => {
|
||||
loadStats();
|
||||
loadList(true);
|
||||
}, []);
|
||||
|
||||
const loadStats = async () => {
|
||||
try {
|
||||
const res = await getWithdrawStats();
|
||||
if (res.code === 200) {
|
||||
setStats(res.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载统计失败', error);
|
||||
}
|
||||
};
|
||||
|
||||
const loadList = async (isRefresh = false) => {
|
||||
if (loading) return;
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
const currentPage = isRefresh ? 1 : page;
|
||||
const params: any = {
|
||||
page: currentPage,
|
||||
limit: 20
|
||||
};
|
||||
|
||||
if (activeTab >= 0) {
|
||||
params.status = activeTab;
|
||||
}
|
||||
|
||||
const res = await getMyWithdrawList(params);
|
||||
|
||||
if (res.code === 200) {
|
||||
const newList = res.data.list || [];
|
||||
setList(isRefresh ? newList : [...list, ...newList]);
|
||||
setPage(currentPage + 1);
|
||||
setHasMore(newList.length >= 20);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载列表失败', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleTabChange = (tab: number) => {
|
||||
setActiveTab(tab);
|
||||
setPage(1);
|
||||
setHasMore(true);
|
||||
loadList(true);
|
||||
};
|
||||
|
||||
const getStatusText = (status: number) => {
|
||||
const map: Record<number, string> = {
|
||||
0: '待审核',
|
||||
1: '审核通过',
|
||||
2: '审核拒绝',
|
||||
3: '打款中',
|
||||
4: '已完成',
|
||||
5: '已取消'
|
||||
};
|
||||
return map[status] || '未知';
|
||||
};
|
||||
|
||||
const getStatusClass = (status: number) => {
|
||||
if (status === 4) return 'status-success';
|
||||
if (status === 2 || status === 5) return 'status-fail';
|
||||
return 'status-pending';
|
||||
};
|
||||
|
||||
return (
|
||||
<View className="withdraw-list-page">
|
||||
{/* 统计区域 */}
|
||||
<View className="stats-card">
|
||||
<View className="stats-item">
|
||||
<Text className="stats-label">提现中(元)</Text>
|
||||
<Text className="stats-value">{stats.withdrawingTotal || '0.00'}</Text>
|
||||
</View>
|
||||
<View className="stats-item">
|
||||
<Text className="stats-label">今日提现(元)</Text>
|
||||
<Text className="stats-value">{stats.todayTotal || '0.00'}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 标签页 */}
|
||||
<View className="tab-bar">
|
||||
<View
|
||||
className={`tab-item ${activeTab === -1 ? 'active' : ''}`}
|
||||
onClick={() => handleTabChange(-1)}
|
||||
>
|
||||
全部
|
||||
</View>
|
||||
<View
|
||||
className={`tab-item ${activeTab === 0 ? 'active' : ''}`}
|
||||
onClick={() => handleTabChange(0)}
|
||||
>
|
||||
待审核
|
||||
</View>
|
||||
<View
|
||||
className={`tab-item ${activeTab === 4 ? 'active' : ''}`}
|
||||
onClick={() => handleTabChange(4)}
|
||||
>
|
||||
已完成
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 列表 */}
|
||||
<ScrollView
|
||||
className="withdraw-scroll"
|
||||
scrollY
|
||||
onScrollToLower={() => hasMore && loadList()}
|
||||
>
|
||||
{list.length === 0 && !loading ? (
|
||||
<EmptyState description="暂无提现记录" />
|
||||
) : (
|
||||
list.map((item) => (
|
||||
<View key={item.id} className="withdraw-item">
|
||||
<View className="withdraw-header">
|
||||
<Text className="withdraw-amount">¥{item.withdrawAmount}</Text>
|
||||
<Text className={`status-tag ${getStatusClass(item.status)}`}>
|
||||
{getStatusText(item.status)}
|
||||
</Text>
|
||||
</View>
|
||||
<View className="withdraw-info">
|
||||
<Text className="info-text">
|
||||
实际到账: ¥{item.actualAmount}
|
||||
</Text>
|
||||
{item.fee > 0 && (
|
||||
<Text className="info-text">
|
||||
手续费: ¥{item.fee}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
<Text className="withdraw-time">{item.createTime}</Text>
|
||||
{item.auditRemark && (
|
||||
<Text className="audit-remark">
|
||||
备注: {item.auditRemark}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
))
|
||||
)}
|
||||
{loading && <Loading>加载中...</Loading>}
|
||||
</ScrollView>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user