kxmall-ui/kxmall-rider-ui/pages/user/user.vue

<template>
	<view class="container">
		<!-- 顶部用户信息卡片（优化版） -->
		<view class="user-card">
			<image class="avatar" :src="userInfo.avatarUrl || '@/static/login/logo.png'" mode="aspectFill"></image>
			<view class="user-info">
				<view class="info-top">
					<view class="username">{{userInfo.name}}</view>
					<view class="phone">{{filterPhone(userInfo.phone)}}</view>
				</view>
				<!-- 配送时间 - 优化样式 -->
				<view class="delivery-time">
					<view class="time-item">
						<text class="time-text">配送时间 {{userInfo.deliveryStart}}~{{userInfo.deliveryEnd}}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 钱包余额卡片 -->
		<view class="wallet-card">
			<view class="wallet-header">
				<text class="title">我的钱包</text>
				<text class="subtitle">实时更新</text>
			</view>
			<view class="balance-container">
				<view class="balance-item">
					<text class="label">可用余额</text>
					<text class="value">¥{{formatMoney(walletBalance)}}</text>
				</view>
				<view class="balance-item">
					<text class="label">待提现</text>
					<text class="value">¥{{formatMoney(toBeWithdrawn)}}</text>
				</view>
			</view>
		</view>

		<!-- 快捷功能区 -->
		<view class="quick-actions">
			<view class="action-item" @click="navTo('income')">
				<image class="icon" src="@/static/icons/withdraw.png" mode="aspectFit"></image>
				<text class="text">收益明细</text>
			</view>
			<view class="action-item" @click="navTo('withdraw')">
				<image class="icon" src="@/static/icons/withdraw.png" mode="aspectFit"></image>
				<text class="text">提现</text>
			</view>
			<view class="action-item" @click="navTo('profile')">
				<image class="icon" src="@/static/icons/profile.png" mode="aspectFit"></image>
				<text class="text">资料填写</text>
			</view>
		</view>

		<!-- 交易记录列表 -->
		<view class="transaction-section">
			<view class="section-header">
				<text class="title">交易记录</text>
				<text class="more" @click="viewAllTransactions">查看全部</text>
			</view>

			<view class="transaction-list">
				<view class="transaction-item" v-for="item in transactions" :key="item.id" @click="viewDetail(item)">
					<view class="left">
						<view class="type">{{getTypeText(item.transactionType)}}</view>
						<view class="time">{{item.createTime}}</view>
					</view>
					<view class="right" :class="{'income': item.amount > 0, 'expense': item.amount < 0}">
						{{item.amount > 0 ? '+' : ''}}{{formatMoney(item.amount)}}
					</view>
				</view>

				<view class="load-more" @click="loadMore" v-if="hasMore">
					<text>{{loading ? '加载中...' : '加载更多'}}</text>
					<image v-if="!loading" class="arrow" src="" mode="aspectFit"></image>
				</view>
			</view>
		</view>

		<!-- 底部操作栏 -->
		<view class="bottom-bar">
			<button class="logout-btn" @click="onLogout">退出登录</button>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';

	export default {
		computed: {
			...mapState(['token', 'userInfo'])
		},
		data() {
			return {
				walletBalance: 0,
				toBeWithdrawn: 0,
				transactions: [],
				page: 1,
				pageSize: 10,
				total: 0,
				loading: false,
				hasMore: true
			};
		},
		onLoad() {
			this.initData();
		},
		onShow() {
			this.refreshData();
		},
		methods: {
			...mapMutations(['logout']),

			initData() {
				this.userInfo = uni.getStorageSync("usemall_userInfo") || {};
				this.loadMore();
			},

			refreshData() {
				this.page = 1;
				this.hasMore = true;
				this.getWalletInfo();
				this.getTransactions(true);
			},

			filterPhone(val) {
				return val ? val.toString().slice(0, 3) + '****' + val.toString().slice(-4) : '';
			},

			formatMoney(amount) {
				const num = Number(amount || 0);
				return num.toFixed(2);
			},



			navTo(url) {
				const pages = {
					income: '../income/income',
					withdraw: '../wallet/withdraw',
					transaction: '../wallet/transaction-list',
					profile: '../profile/edit' // 新增
				};
				uni.navigateTo({
					url: pages[url] || url
				});
			},

			viewAllTransactions() {
				this.navTo('transaction');
			},

			onLogout() {
				uni.showModal({
					title: '提示',
					content: '确定要退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							this.logout();
							uni.reLaunch({
								url: '/pages/login/login'
							});
						}
					}
				});
			},

			getWalletInfo() {
				this.request("get", "rider/wallet/info", this.token).then(res => {
					if (res.code === 200) {
						this.walletBalance = res.data.walletBalance || 0;
						this.toBeWithdrawn = res.data.toBeWithdrawn || 0;
					}
				});
			},

			getTransactions(refresh = false) {
				if (this.loading) return;
				this.loading = true;

				if (refresh) {
					this.page = 1;
				}

				this.request("get", "rider/wallet/transactions", this.token, {
					page: this.page,
					size: this.pageSize
				}).then(res => {
					if (res.code === 200) {
						const newData = res.rows || [];
						this.transactions = refresh ? newData : [...this.transactions, ...newData];
						this.total = res.total || 0;
						this.hasMore = this.transactions.length < this.total;
					}
				}).finally(() => {
					this.loading = false;
				});
			},

			loadMore() {
				if (this.hasMore && !this.loading) {
					this.page++;
					this.getTransactions();
				}
			},

			viewDetail(item) {
				uni.navigateTo({
					url: `/pages/wallet/detail?id=${item.id}`
				});
			},

			getTypeText(type) {
				const types = {
					1: '收入',
					2: '支出',
					3: '提现',
					4: '退款'
				};
				return types[type] || '交易';
			}
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		padding: 20rpx;
		background-color: #f7f7f7;
		min-height: 85vh;
		padding-bottom: 120rpx;
	}

	/* 用户信息卡片 - 优化版 */
	.user-card {
		display: flex;
		align-items: center;
		padding: 30rpx;
		background: linear-gradient(135deg, #437CE8, #437CE8);
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		color: #fff;
		box-shadow: 0 4rpx 12rpx rgba(74, 144, 226, 0.3);

		.avatar {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			border: 4rpx solid rgba(255, 255, 255, 0.3);
			flex-shrink: 0;
		}

		.user-info {
			margin-left: 24rpx;
			flex: 1;
			display: flex;
			flex-direction: column;

			.info-top {
				margin-bottom: 15rpx;

				.username {
					font-size: 36rpx;
					font-weight: bold;
					margin-bottom: 8rpx;
					line-height: 1.2;
				}

				.phone {
					font-size: 26rpx;
					opacity: 0.9;
				}
			}

			/* 配送时间 - 优化样式 */
			.delivery-time {
				background: rgba(255, 255, 255, 0.15);
				border-radius: 8rpx;
				padding: 12rpx 15rpx;
				backdrop-filter: blur(5px);

				.time-item {
					display: flex;
					align-items: center;

					.time-icon {
						width: 28rpx;
						height: 28rpx;
						margin-right: 10rpx;
						filter: brightness(0) invert(1);
					}

					.time-text {
						font-size: 26rpx;
						opacity: 0.95;
					}
				}
			}
		}
	}

	/* 钱包卡片 */
	.wallet-card {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

		.wallet-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 30rpx;

			.title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
			}

			.subtitle {
				font-size: 24rpx;
				color: #999;
			}
		}

		.balance-container {
			display: flex;
			justify-content: space-around;
			text-align: center;

			.balance-item {
				.label {
					display: block;
					font-size: 26rpx;
					color: #666;
					margin-bottom: 10rpx;
				}

				.value {
					font-size: 36rpx;
					font-weight: bold;
					color: #ff6b35;
				}
			}
		}
	}

	/* 快捷功能区 */
	.quick-actions {
		display: flex;
		justify-content: space-around;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx 0;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

		.action-item {
			display: flex;
			flex-direction: column;
			align-items: center;

			.icon {
				width: 60rpx;
				height: 60rpx;
				margin-bottom: 15rpx;
			}

			.text {
				font-size: 28rpx;
				color: #333;
			}
		}
	}

	/* 交易记录区域 */
	.transaction-section {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 20rpx 0;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

		.section-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 30rpx 20rpx;
			border-bottom: 1rpx solid #f0f0f0;

			.title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
			}

			.more {
				font-size: 26rpx;
				color: #437CE8;
			}
		}

		.transaction-list {
			.transaction-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 25rpx 30rpx;
				border-bottom: 1rpx solid #f0f0f0;

				&:last-child {
					border-bottom: none;
				}

				.left {
					.type {
						font-size: 30rpx;
						color: #333;
						margin-bottom: 8rpx;
					}

					.time {
						font-size: 24rpx;
						color: #999;
					}
				}

				.right {
					font-size: 32rpx;
					font-weight: bold;

					&.income {
						color: #4caf50;
					}

					&.expense {
						color: #f44336;
					}
				}
			}

			.load-more {
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 25rpx 0;
				color: #437CE8;
				font-size: 28rpx;

				.arrow {
					width: 24rpx;
					height: 24rpx;
					margin-left: 10rpx;
				}
			}
		}
	}

	/* 底部操作栏 */
	.bottom-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx;
		background-color: #fff;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);

		.logout-btn {
			background-color: #f8f8f8;
			color: #f44336;
			border: none;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 40rpx;
			font-size: 30rpx;

			&::after {
				border: none;
			}
		}
	}
</style>