feat(user): 新增收货地址管理及售后申请页面
- 新增地址类型定义，增强前端地址数据结构 - 新增地址编辑页面，支持地址智能识别和定位选点功能 - 地址编辑支持省市区选择及默认地址设置 - 新增地址列表页面，支持地址展示、删除、编辑和选择功能 - 实现售后申请页面，支持选择售后类型和退款原因 - 售后申请支持商品选择、退款金额计算和凭证上传 - 新增售后详情页面，支持售后状态展示及申请取消 - 优化页面加载和用户交互体验，增加错误提示和权限处理
This commit is contained in:
3
src_bak/pages/user/commission/index.config.ts
Normal file
3
src_bak/pages/user/commission/index.config.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
export default {
|
||||
navigationBarTitleText: '佣金明细',
|
||||
}
|
||||
159
src_bak/pages/user/commission/index.scss
Normal file
159
src_bak/pages/user/commission/index.scss
Normal file
@@ -0,0 +1,159 @@
|
||||
.commission-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.stats-card {
|
||||
margin: 24rpx 24rpx 0;
|
||||
padding: 32rpx;
|
||||
background: linear-gradient(135deg, #ff6b35 0%, #ff9a56 100%);
|
||||
border-radius: 16rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.stats-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.stats-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.stats-label {
|
||||
font-size: 24rpx;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.stats-value {
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.stats-value.pending {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.stats-value.settled {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.withdraw-btn {
|
||||
position: absolute;
|
||||
right: 32rpx;
|
||||
top: 32rpx;
|
||||
padding: 12rpx 32rpx;
|
||||
background: #fff;
|
||||
color: #ff6b35;
|
||||
font-size: 26rpx;
|
||||
font-weight: bold;
|
||||
border-radius: 32rpx;
|
||||
}
|
||||
|
||||
.tab-bar {
|
||||
display: flex;
|
||||
background: #fff;
|
||||
margin-top: 24rpx;
|
||||
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;
|
||||
}
|
||||
|
||||
.commission-list {
|
||||
flex: 1;
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.commission-item {
|
||||
background: #fff;
|
||||
border-radius: 12rpx;
|
||||
padding: 24rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.commission-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.commission-order {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.commission-amount {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #ff6b35;
|
||||
}
|
||||
|
||||
.commission-meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.meta-text {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
font-size: 22rpx;
|
||||
padding: 4rpx 12rpx;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
|
||||
.status-0 {
|
||||
color: #ff9a56;
|
||||
background: rgba(255, 154, 86, 0.1);
|
||||
}
|
||||
|
||||
.status-1 {
|
||||
color: #07c160;
|
||||
background: rgba(7, 193, 96, 0.1);
|
||||
}
|
||||
|
||||
.status-2 {
|
||||
color: #999;
|
||||
background: rgba(153, 153, 153, 0.1);
|
||||
}
|
||||
|
||||
.settle-time {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
margin-top: 8rpx;
|
||||
display: block;
|
||||
}
|
||||
151
src_bak/pages/user/commission/index.tsx
Normal file
151
src_bak/pages/user/commission/index.tsx
Normal file
@@ -0,0 +1,151 @@
|
||||
import { View, Text, ScrollView } from '@tarojs/components';
|
||||
import Taro from '@tarojs/taro';
|
||||
import { useState, useEffect } from 'react';
|
||||
import { getCommissionStats, getMyCommissionList } from '@/api/shop/shopCommissionRecord';
|
||||
import EmptyState from '@/components/common/EmptyState';
|
||||
import { Loading } from '@nutui/nutui-react-taro';
|
||||
|
||||
import './index.scss';
|
||||
|
||||
definePageConfig({
|
||||
navigationBarTitleText: '我的佣金',
|
||||
});
|
||||
|
||||
export default function CommissionPage() {
|
||||
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(0); // 0待结算/1已结算
|
||||
|
||||
useEffect(() => {
|
||||
loadStats();
|
||||
loadList(true);
|
||||
}, []);
|
||||
|
||||
const loadStats = async () => {
|
||||
try {
|
||||
const res = await getCommissionStats();
|
||||
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 res = await getMyCommissionList({
|
||||
status: activeTab,
|
||||
page: currentPage,
|
||||
limit: 20
|
||||
});
|
||||
|
||||
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 handleWithdraw = () => {
|
||||
Taro.navigateTo({ url: '/pages/user/withdraw/index' });
|
||||
};
|
||||
|
||||
const getStatusText = (status: number) => {
|
||||
const map: Record<number, string> = {
|
||||
0: '待结算',
|
||||
1: '已结算',
|
||||
2: '已失效'
|
||||
};
|
||||
return map[status] || '未知';
|
||||
};
|
||||
|
||||
return (
|
||||
<View className="commission-page">
|
||||
{/* 统计区域 */}
|
||||
<View className="stats-card">
|
||||
<View className="stats-row">
|
||||
<View className="stats-item">
|
||||
<Text className="stats-label">待结算佣金(元)</Text>
|
||||
<Text className="stats-value pending">{stats.pendingTotal || '0.00'}</Text>
|
||||
</View>
|
||||
<View className="stats-item">
|
||||
<Text className="stats-label">已结算佣金(元)</Text>
|
||||
<Text className="stats-value settled">{stats.settledTotal || '0.00'}</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View className="withdraw-btn" onClick={handleWithdraw}>
|
||||
去提现
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 标签页 */}
|
||||
<View className="tab-bar">
|
||||
<View
|
||||
className={`tab-item ${activeTab === 0 ? 'active' : ''}`}
|
||||
onClick={() => handleTabChange(0)}
|
||||
>
|
||||
待结算({stats.pendingCount || 0})
|
||||
</View>
|
||||
<View
|
||||
className={`tab-item ${activeTab === 1 ? 'active' : ''}`}
|
||||
onClick={() => handleTabChange(1)}
|
||||
>
|
||||
已结算({stats.settledCount || 0})
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 列表 */}
|
||||
<ScrollView
|
||||
className="commission-list"
|
||||
scrollY
|
||||
onScrollToLower={() => hasMore && loadList()}
|
||||
>
|
||||
{list.length === 0 && !loading ? (
|
||||
<EmptyState description="暂无佣金记录" />
|
||||
) : (
|
||||
list.map((item) => (
|
||||
<View key={item.id} className="commission-item">
|
||||
<View className="commission-info">
|
||||
<Text className="commission-order">订单号: {item.orderNo}</Text>
|
||||
<Text className="commission-amount">+{item.commissionAmount}</Text>
|
||||
</View>
|
||||
<View className="commission-meta">
|
||||
<Text className="meta-text">订单金额: ¥{item.orderAmount}</Text>
|
||||
<Text className={`status-tag status-${item.status}`}>
|
||||
{getStatusText(item.status)}
|
||||
</Text>
|
||||
</View>
|
||||
{item.settleTime && (
|
||||
<Text className="settle-time">
|
||||
结算时间: {item.settleTime}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
))
|
||||
)}
|
||||
{loading && <Loading>加载中...</Loading>}
|
||||
</ScrollView>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user