hhrs/pages/mine/mine.vue

<template>
	<view class="page">
		<!-- 未登录 -->
		<view class="user-section" v-if="!isLogin" @click="goLogin">
			<view class="user-info">
				<image class="user-avatar" src="https://aliyunoss.hn12301.net/hhrs/hhrs_wd_tx.png" mode="aspectFill" />
				<text class="login-hint">点击登录</text>
			</view>
		</view>

		<!-- 已登录 -->
		<view class="user-section" v-else>
			<view class="user-info">
				<image class="user-avatar" src="https://aliyunoss.hn12301.net/hhrs/hhrs_wd_tx.png" mode="aspectFill" />
				<view class="user-detail">
					<text class="user-phone">{{ maskPhone }}</text>
				</view>
			</view>
			<view class="logout-btn" @click="onLogout">退出登录</view>
		</view>

		<!-- 菜单列表 -->
		<view class="menu-list">
			<view class="menu-item" @click="goWinners">
				<image class="menu-icon" src="https://aliyunoss.hn12301.net/hhrs/hhrs_wd_zjcx.png" mode="aspectFit" />
				<text class="menu-label">用户中奖查询</text>
				<u-icon name="arrow-right" color="#cccccc" size="28"></u-icon>
			</view>
			<view class="menu-item" @click="goGuide">
				<image class="menu-icon" src="https://aliyunoss.hn12301.net/hhrs/hhrs_wd_syzn.png" mode="aspectFit" />
				<text class="menu-label">使用指南</text>
				<u-icon name="arrow-right" color="#cccccc" size="28"></u-icon>
			</view>
			<view class="menu-item" @click="goService">
				<image class="menu-icon" src="https://aliyunoss.hn12301.net/hhrs/hhrs_wd_lxkf.png" mode="aspectFit" />
				<text class="menu-label">联系客服</text>
				<u-icon name="arrow-right" color="#cccccc" size="28"></u-icon>
			</view>
		</view>

		<!-- 底部 TabBar -->
	<!-- 	<tab-bar :current="1" /> -->
	</view>
</template>

<script>
import tabBar from '@/components/TabBar/TabBar.vue'

export default {
	components: { tabBar },
	data() {
		return {
			isLogin: false,
			phone: ''
		}
	},
	computed: {
		maskPhone() {
			if (!this.phone || this.phone.length < 7) return this.phone
			return this.phone.substring(0, 3) + '****' + this.phone.substring(7)
		}
	},
	onShow() {
		this.phone = uni.getStorageSync('phone') || ''
		this.isLogin = !!this.phone
	},
	methods: {
		goLogin() {
			uni.navigateTo({ url: '/pages/index/login' })
		},
		onLogout() {
			uni.showModal({
				title: '提示',
				content: '确定要退出登录吗？',
				success: (res) => {
					if (res.confirm) {
						uni.removeStorageSync('token')
						uni.removeStorageSync('phone')
						this.isLogin = false
						this.phone = ''
						uni.showToast({ title: '已退出登录', icon: 'success' })
					}
				}
			})
		},
		goWinners() {
			uni.navigateTo({ url: '/pages/winners/winners' })
		},
		goGuide() {
			uni.navigateTo({ url: '/pages/guide/use' })
		},
		goService() {
			// TODO: 联系客服
		}
	}
}
</script>
<style>
	page {
	background-color: #f2f2f7;
	}
</style>
<style>


/* 用户信息 */
.user-section {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: linear-gradient(to bottom, #0066cc, #f2f2f7);
	padding: 40px 16px 130px;
}

.login-hint {
	font-size: 16px;
	color: #ffffff;
	font-weight: 500;
	margin-left: 12px;
}

.user-info {
	display: flex;
	align-items: center;
	gap: 12px;
}

.user-avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background-color: #ffffff;
}

.user-detail {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.user-name {
	font-size: 16px;
	font-weight: 500;
	color: #ffffff;
}

.user-phone {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.8);
}

.logout-btn {
	background-color: rgba(255, 255, 255, 0.2);
	color: #ffffff;
	font-size: 13px;
	padding: 6px 16px;
	border-radius: 4px;
}

/* 菜单列表 */
.menu-list {
	margin: -88px 12px 0;
	background-color: #ffffff;
	border-radius: 8px;
}

.menu-item {
	display: flex;
	align-items: center;
	height: 64px;
	padding: 0 16px;
	border-bottom: 1px solid #f5f5f5;
}

.menu-item:last-child {
	border-bottom: none;
}

.menu-icon {
	width: 36rpx;
	height: 36rpx;
}

.menu-label {
	flex: 1;
	font-size: 15px;
	color: #333333;
	margin-left: 12px;
}


</style>