huasheng-erp-order-system-applet/pages/mine/mine.vue

<template>
	<view class="mine-page">
		<scroll-view class="mine-scroll" scroll-y enable-back-to-top :show-scrollbar="false" :enhanced="true">
			<!-- 顶部大气定制背景 (带柔和渐变与底部圆角弧度) -->
			<view class="header-bg-shape">
				<view class="header-bg-gradient"></view>
			</view>

			<!-- 整体内容下移 -->
			<view class="content-wrapper">
				<!-- 1. 登录状态卡片 -->
				<view class="user-card" v-if="isLogin">
					<view class="avatar-box">
						<image class="avatar-img" src="https://img.icons8.com/color/144/user.png" mode="aspectFill"></image>
					</view>
					<view class="info-box">
						<text class="nickname">张经理</text>
						<view class="tags-row">
							<text class="customer-tag">授权客户: 广东铝材实业</text>
						</view>
						<text class="phone-text">138-8888-8888</text>
					</view>
					<!-- 新增：右侧设置图标 -->
					<view class="settings-btn" @click="goToSettings">
						<image class="settings-icon" :src="assets.mineSettings" mode="aspectFit"></image>
					</view>
				</view>

				<!-- 1. 未登录状态卡片 -->
				<view class="user-card unlogged" v-else @click="goToLogin">
					<view class="avatar-box gray-avatar">
						<image class="avatar-img" src="https://img.icons8.com/material-outlined/100/cccccc/user.png" mode="aspectFit"></image>
					</view>
					<view class="info-box">
						<text class="nickname login-hint">未登录</text>
						<text class="phone-text">点击此处登录，体验完整功能</text>
					</view>
					<image class="arrow-icon-right" :src="assets.mineArrow"></image>
				</view>

				<!-- 2. 我的订单 (线性图标) -->
				<view class="section-card">
					<view class="section-header">
						<text class="section-title">我的订单</text>
						<view class="more-link" @click="goToOrderList(0)">
							<text>全部</text>
							<image class="arrow-icon" :src="assets.mineArrow"></image>
						</view>
					</view>
					<view class="stat-grid">
						<view class="stat-item" v-for="(item, index) in orderStates" :key="index" @click="goToOrderList(index + 1)">
							<image class="stat-icon" :src="item.icon" mode="aspectFit"></image>
							<text class="stat-label">{{ item.label }}</text>
						</view>
					</view>
				</view>

				<!-- 3. 功能菜单列表 (线性图标) -->
				<view class="section-card menu-card">
					<view class="menu-item" v-for="(menu, index) in menuList" :key="index" @click="handleMenuClick(menu)">
						<view class="menu-left">
							<image class="menu-icon" :src="menu.icon" mode="aspectFit"></image>
							<text class="menu-label">{{ menu.label }}</text>
						</view>
						<image class="arrow-icon-right" :src="assets.mineArrow"></image>
					</view>
				</view>

				<!-- 4. 退出登录按钮 (仅登录后显示) -->
				<view class="logout-section" v-if="isLogin">
					<button class="logout-btn" @click="handleLogout">退出登录</button>
				</view>
				
				<view class="bottom-placeholder"></view>
			</view>
		</scroll-view>

		<erp-tab-bar active="mine"></erp-tab-bar>
	</view>
</template>

<script>
	import ErpTabBar from '@/components/erp-tab-bar/erp-tab-bar.vue';
	import assets from '@/utils/assets.js';

	export default {
		components: {
			ErpTabBar
		},
		data() {
			return {
				assets,
				isLogin: false, // 控制登录状态
				orderStates: [
					{ label: '待审核', icon: assets.minePendingReview },
					{ label: '待签批', icon: assets.minePendingSign },
					{ label: '生产中', icon: assets.mineProducing },
					{ label: '已完成', icon: assets.mineCompleted }
				],
				menuList: [
					{ label: '用户协议', icon: assets.mineProtocol, id: 'agreement' },
					{ label: '隐私政策', icon: assets.minePrivacy, id: 'privacy' },
					{ label: '投诉与建议', icon: assets.mineComplaint, id: 'complaint' },
					{ label: '联系客服', icon: assets.mineService, id: 'service' }
				]
			}
		},
		onShow() {
			// 页面显示时检查登录状态
			this.isLogin = !!uni.getStorageSync('isLogin');
		},
		methods: {
			goToLogin() {
				uni.navigateTo({ url: '/pages/login/login?redirect=' + encodeURIComponent('/pages/mine/mine') });
			},
			// 跳转至设置页面
			goToSettings() {
				if(this.isLogin) {
					uni.navigateTo({
						url: '/pages/mine/settings'
					});
				}
			},
			// 新增：跳转至订单列表
			goToOrderList(status) {
				if(!this.isLogin) {
					return this.goToLogin();
				}
				uni.navigateTo({
					url: `/pages/order/list?tab=${status}`
				});
			},
			handleLogout() {
				uni.showModal({
					title: '退出提示',
					content: '确认退出当前账号吗？',
					confirmColor: '#C1001C',
					success: (res) => {
						if (res.confirm) {
							uni.removeStorageSync('isLogin');
							this.isLogin = false;
						}
					}
				});
			},
			// 新增：菜单点击处理
			handleMenuClick(menu) {
				if (menu.id === 'agreement') {
					uni.navigateTo({ url: '/pages/mine/agreement' });
				} else if (menu.id === 'privacy') {
					uni.navigateTo({ url: '/pages/mine/privacy' });
				} else if (menu.id === 'complaint') {
					uni.navigateTo({ url: '/pages/mine/complaint' });
				} else if (menu.id === 'service') {
					uni.showModal({
						title: '联系客服',
						content: '客服电话：138-8888-8888',
						confirmText: '立即拨打',
						confirmColor: '#C1001C',
						cancelColor: '#999999',
						success: (res) => {
							if (res.confirm) {
								uni.makePhoneCall({
									phoneNumber: '13888888888'
								});
							}
						}
					});
				}
			}
		}
	}
</script>

<style scoped>
	.mine-page { width: 100%; height: 100vh; background: #f7f8fa; position: relative; display: flex; flex-direction: column; overflow: hidden; }
	
	.mine-scroll { width: 100%; height: 100%; }
	/* 隐藏滚动条 */
	.mine-scroll ::-webkit-scrollbar { width: 0 !important; height: 0 !important; color: transparent !important; display: none !important; }

	/* 顶部定制背景：高级渐变蓝 + 柔和弧度 */
	.header-bg-shape {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 380rpx;
		background: linear-gradient(135deg, #C1001C 0%, #FF4D4F 100%);
		border-bottom-left-radius: 60rpx;
		border-bottom-right-radius: 60rpx;
		z-index: 1;
		box-shadow: 0 10rpx 30rpx rgba(193, 0, 28, 0.15);
	}
	.header-bg-gradient {
		width: 100%;
		height: 100%;
		background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.1) 100%);
		border-bottom-left-radius: 60rpx;
		border-bottom-right-radius: 60rpx;
	}

	/* 标题栏已恢复为原生，此处仅需正常的容器内边距即可 */
	.content-wrapper { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; padding: 40rpx 30rpx 0; box-sizing: border-box; }

	/* 用户信息卡片 */
	.user-card { background: #fff; border-radius: 32rpx; padding: 50rpx 40rpx; display: flex; align-items: center; margin-bottom: 30rpx; margin-top: 20rpx; box-shadow: 0 16rpx 40rpx rgba(0, 0, 0, 0.05); }
	.user-card.unlogged { cursor: pointer; }
	.avatar-box { width: 130rpx; height: 130rpx; border-radius: 65rpx; background: #f5f6f7; margin-right: 30rpx; overflow: hidden; border: 4rpx solid #fff; box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05); }
	.gray-avatar { background: #f0f0f0; display: flex; align-items: center; justify-content: center; }
	.avatar-img { width: 100%; height: 100%; }
	.info-box { flex: 1; display: flex; flex-direction: column; justify-content: center; }
	.nickname { font-size: 40rpx; font-weight: bold; color: #1a1a1a; margin-bottom: 12rpx; }
	.login-hint { color: #333; }
	.tags-row { display: flex; align-items: center; margin-bottom: 12rpx; }
	.customer-tag { font-size: 24rpx; color: #C1001C; background: rgba(193, 0, 28, 0.1); padding: 6rpx 16rpx; border-radius: 8rpx; font-weight: 500; }
	.phone-text { font-size: 26rpx; color: #999; }
	
	/* 设置图标 & 右侧箭头 */
	.settings-btn { width: 60rpx; height: 60rpx; display: flex; align-items: center; justify-content: center; }
	.settings-icon { width: 44rpx; height: 44rpx; opacity: 0.6; }
	.arrow-icon-right { width: 24rpx; height: 24rpx; opacity: 0.4; }

	/* 通用卡片样式 */
	.section-card { background: #fff; border-radius: 24rpx; padding: 40rpx 30rpx; margin-bottom: 30rpx; box-shadow: 0 8rpx 30rpx rgba(0,0,0,0.02); }
	
	/* 订单统计区块 */
	.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40rpx; }
	.section-title { font-size: 32rpx; font-weight: bold; color: #333; }
	.more-link { display: flex; align-items: center; font-size: 26rpx; color: #999; }
	.arrow-icon { width: 20rpx; height: 20rpx; opacity: 0.5; margin-left: 6rpx; position: relative; top: 2rpx; }
	
	.stat-grid { display: flex; justify-content: space-around; }
	.stat-item { display: flex; flex-direction: column; align-items: center; }
	.stat-icon { width: 56rpx; height: 56rpx; margin-bottom: 16rpx; opacity: 0.8; }
	.stat-label { font-size: 26rpx; color: #666; }

	/* 菜单列表区块 */
	.menu-card { padding: 10rpx 30rpx; }
	.menu-item { display: flex; justify-content: space-between; align-items: center; padding: 36rpx 0; border-bottom: 1rpx solid #f5f6f7; }
	.menu-item:last-child { border-bottom: none; }
	.menu-left { display: flex; align-items: center; }
	.menu-icon { width: 44rpx; height: 44rpx; margin-right: 20rpx; opacity: 0.7; }
	.menu-label { font-size: 30rpx; color: #333; }

	/* 退出登录 */
	.logout-section { margin-top: 40rpx; }
	.logout-btn { width: 100%; height: 96rpx; background: #fff; color: #ff5e5e; border-radius: 24rpx; display: flex; align-items: center; justify-content: center; font-size: 32rpx; font-weight: bold; border: none; box-shadow: 0 4rpx 20rpx rgba(255, 94, 94, 0.05); transition: all 0.2s; }
	.logout-btn:active { background: #fff0f0; }
	
	button::after { border: none; }
	.bottom-placeholder { height: 180rpx; }
</style>