baiyuApp/pages_mall/my.vue

<template>
	<view class="my-page">
		<view class="user-section">
			<!-- 自定义头部 -->
			<view class="custom-header" :style="{paddingTop: statusBarHeight + 'px'}">
				<view class="header-content">
					<view class="back-btn" @click="goBack">
						<u-icon name="arrow-left" color="#fff" size="20"></u-icon>
					</view>
					<text class="title">个人中心</text>
					<view class="placeholder"></view>
				</view>
			</view>

			<image class="bg" src="https://zkzh-2025.oss-cn-beijing.aliyuncs.com/shop/images/my_bg.png"
				mode="aspectFill"></image>
			<view class="user-info-box" :style="{marginTop: (statusBarHeight + 44) + 'px'}">
				<view class="portrait-box" @click="checkLogin">
					<image class="portrait" :src="userInfo.avatar || defaultAvatar" mode="aspectFill"></image>
				</view>
				<view class="info-box" @click="checkLogin">
					<text class="username">{{isLogin ? (userInfo.nickName || '用户' + userInfo.userId) : '请登录'}}</text>
					<text class="user-id" v-if="isLogin">ID: {{userInfo.userId}}</text>
				</view>
			</view>
		</view>

		<view class="cover-container">
			<!-- 我的订单 -->
			<view class="order-section">
				<view class="sec-header" @click="navTo('/pages_user/user/storeOrder?status=')">
					<text class="sec-title">我的订单</text>
					<view class="more">
						<text>全部订单</text>
						<u-icon name="arrow-right" size="12" color="#999"></u-icon>
					</view>
				</view>
				<view class="order-grid">
					<view class="order-item" v-for="(item, index) in orderMenu" :key="index" @click="handleMenu(item)">
						<image :src="item.icon" mode="aspectFit" class="order-icon"></image>
						<text>{{item.name}}</text>
					</view>
				</view>
			</view>

			<!-- 常用功能 -->
			<view class="history-section icon">
				<view class="list-item" @click="navTo('/pages/user/address')">
					<image class="es-icon-48" src="/static/image/my/address_management_icon.png" mode=""></image>
					<text>地址管理</text>
					<u-icon name="arrow-right" size="14" color="#999" class="arrow"></u-icon>
				</view>
				<view class="list-item" @click="navTo('/pages_shopping/shopping/myCoupon')">
					<image class="es-icon-48" src="/static/image/my/coupon_collection.png" mode=""></image>
					<text>优惠券</text>
					<u-icon name="arrow-right" size="14" color="#999" class="arrow"></u-icon>
				</view>
				<view class="list-item" @click="navTo('/pages/user/about')">
					<image class="es-icon-48" src="/static/image/my/feedback_icon.png" mode=""></image>
					<text>关于我们</text>
					<u-icon name="arrow-right" size="14" color="#999" class="arrow"></u-icon>
				</view>
				<!-- <view class="list-item" @click="navTo('/pages/user/wallet/wallet')">
					<u-icon name="wallet" size="20" color="#e07472"></u-icon>
					<text>我的钱包</text>
					<u-icon name="arrow-right" size="14" color="#999" class="arrow"></u-icon>
				</view> -->
				<!-- <view class="list-item">
					<u-icon name="server-fill" size="20" color="#5fcda2"></u-icon>
					<text>联系客服</text>
					<u-icon name="arrow-right" size="14" color="#999" class="arrow"></u-icon>
				</view> -->
				<!-- <view class="list-item">
					<u-icon name="setting" size="20" color="#9789f7"></u-icon>
					<text>设置</text>
					<u-icon name="arrow-right" size="14" color="#999" class="arrow"></u-icon>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getUserInfo
	} from '@/api/user'

	export default {
		data() {
			return {
				statusBarHeight: 20,
				defaultAvatar: '/static/image/hall/my_heads_icon.png',
				isLogin: false,
				userInfo: {},
				orderMenu: [{
						name: '待付款',
						icon: '/static/image/mall/payment.png',
						state: 0
					},
					{
						name: '待发货',
						icon: '/static/image/mall/send_goods.png',
						state: 1
					},
					{
						name: '待收货',
						icon: '/static/image/mall/sou_goods.png',
						state: 2
					},
					{
						name: '已完成',
						icon: '/static/image/mall/completed.png',
						state: 3
					},
					{
						name: '售后/退款',
						icon: '/static/image/mall/after_sales.png',
						url: '/pages_user/user/refundOrderList'
					}
				]
			}
		},
		created() {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			this.checkLoginStatus();
		},
		methods: {
			goBack() {
				uni.showTabBar()
				uni.switchTab({
					url: '/pages_im/pages/conversation/conversationList/index'
				})
			},
			checkLoginStatus() {
				const token = uni.getStorageSync('AppToken');
				if (token) {
					this.isLogin = true;
					this.getUserInfo();
				} else {
					this.isLogin = false;
					this.userInfo = {};
				}
			},
			checkLogin() {
				if (!this.isLogin) {
					uni.navigateTo({
						url: '/pages/auth/loginIndex'
					});
				}
			},
			getUserInfo() {
				getUserInfo().then(res => {
					if (res.code == 200 && res.user) {
						this.userInfo = res.user;
					}
				});
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			handleMenu(item) {
				if (!this.isLogin) {
					uni.navigateTo({
						url: '/pages/auth/loginIndex'
					});
					return;
				}

				if (item.url) {
					return uni.navigateTo({
						url: item.url
					});
				}
				uni.navigateTo({
					url: `/pages_user/user/storeOrder?status=${item.state}`
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.my-page {
		height: 100%;
		background-color: #F5F7FA;
	}

	.custom-header {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 10;

		.header-content {
			height: 44px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx;

			.title {
				color: #fff;
				font-size: 36rpx;
				font-weight: bold;
			}

			.back-btn,
			.placeholder {
				width: 40rpx;
				height: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}

	.user-section {
		height: 420rpx;
		position: relative;
		overflow: hidden;

		.bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background: linear-gradient(to bottom, #2583EB, #4FACFE);
		}

		.user-info-box {
			display: flex;
			align-items: center;
			position: relative;
			z-index: 1;
			padding: 0 30rpx;

			.portrait-box {
				width: 130rpx;
				height: 130rpx;
				border: 5rpx solid rgba(255, 255, 255, 0.5);
				border-radius: 50%;
				overflow: hidden;
				box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
				background: #fff;

				.portrait {
					width: 100%;
					height: 100%;
				}
			}

			.info-box {
				display: flex;
				flex-direction: column;
				margin-left: 24rpx;
				color: #fff;

				.username {
					font-size: 38rpx;
					font-weight: bold;
					text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
				}

				.user-id {
					font-size: 24rpx;
					margin-top: 10rpx;
					opacity: 0.9;
				}
			}
		}
	}

	.cover-container {
		margin-top: -100rpx;
		padding: 0 30rpx;
		position: relative;
		padding-bottom: 120rpx;

		.order-section {
			background: #fff;
			border-radius: 20rpx;
			padding: 20rpx 0;
			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);

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

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

				.more {
					display: flex;
					align-items: center;

					text {
						font-size: 24rpx;
						color: #999;
						margin-right: 6rpx;
					}
				}
			}

			.order-grid {
				display: flex;
				justify-content: space-around;
				padding: 30rpx 0 10rpx;

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

					.order-icon {
						width: 56rpx;
						height: 56rpx;
						margin-bottom: 12rpx;
					}

					text {
						font-size: 24rpx;
						color: #666;
					}
				}
			}
		}

		.history-section {
			background: #fff;
			border-radius: 20rpx;
			margin-top: 24rpx;
			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
			padding: 10rpx 0;

			.list-item {
				display: flex;
				align-items: center;
				padding: 30rpx 30rpx;
				border-bottom: 1rpx solid #f5f5f5;
				position: relative;

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

				text {
					flex: 1;
					font-size: 30rpx;
					color: #333;
					margin-left: 24rpx;
					font-weight: 500;
				}

				.arrow {
					margin-left: auto;
					opacity: 0.5;
				}
			}
		}
	}
</style>