ajy/code/ajyApp/pages/my/my.nvue

<template>
	<view class="page">
		<view class="status-bar" :style="{height: statusBarHeight + 'px'}"></view>
		<!-- 用户信息区 -->
		<view class="user-header">
			<view class="user-info">
				<text class="user-name">{{name || '未登录'}}</text>
				<text class="user-detail">AppId：{{appid}}</text>
				<text class="user-detail">手机号：{{phone}}</text>
			</view>
			<image class="avatar" src="/static/my/avator.png" mode="aspectFill" @click="toInfo"></image>
		</view>

		<!-- 菜单列表 -->
		<view class="menu-list">
			<view class="menu-item" @click="goPage('/pages/device/mycases/mycases')">
				<image class="menu-icon" src="/static/my/icon3.png" mode="aspectFill"></image>
				<text class="menu-text">个性化方案</text>
				<image class="menu-arrow" src="/static/my/arrowright.png" mode="aspectFill"></image>
			</view>
			<view class="menu-item" @click="goPage('/pages/my/msg/msg')">
				<image class="menu-icon" src="/static/my/icon6.png" mode="aspectFill"></image>
				<view class="menu-text-wrap">
					<text class="menu-text" style="margin-left:0;">系统消息</text>
					<view class="msg-dot" v-if="msgNum > 0"></view>
				</view>
				<image class="menu-arrow" src="/static/my/arrowright.png" mode="aspectFill"></image>
			</view>
			<view class="menu-item" @click="goPage('/pages/my/version/version')">
				<image class="menu-icon" src="/static/my/icon2.png" mode="aspectFill"></image>
				<text class="menu-text">版本升级</text>
				<image class="menu-arrow" src="/static/my/arrowright.png" mode="aspectFill"></image>
			</view>
			<view class="menu-item" @click="goPage('/pages/my/questions/questions')">
				<image class="menu-icon" src="/static/my/icon5.png" mode="aspectFill"></image>
				<text class="menu-text">帮助</text>
				<image class="menu-arrow" src="/static/my/arrowright.png" mode="aspectFill"></image>
			</view>
			<view class="menu-item" @click="goPage('/pages/my/history/history')">
				<image class="menu-icon" src="/static/my/icon1.png" mode="aspectFill"></image>
				<text class="menu-text">使用记录</text>
				<image class="menu-arrow" src="/static/my/arrowright.png" mode="aspectFill"></image>
			</view>
			<view class="menu-item" @click="onLogout">
				<image class="menu-icon" src="/static/my/icon4.png" mode="aspectFill"></image>
				<text class="menu-text">退出登录</text>
				<image class="menu-arrow" src="/static/my/arrowright.png" mode="aspectFill"></image>
			</view>
		</view>

		<!-- 退出确认弹窗 -->
		<customPopup :isShow="isShowDrawer" @closePop="isShowDrawer=false">
			<view class="popup-content">
				<text class="popup-title">确定退出登录？</text>
				<view class="popup-btns">
					<text class="btn-cancel" @click="isShowDrawer=false">取消</text>
					<text class="btn-confirm" @click="logoutConfirm">退出登录</text>
				</view>
			</view>
		</customPopup>
	</view>
</template>

<script>
import customPopup from '@/components/customPopup/customPopup.nvue'

export default {
	components: {
		customPopup
	},
	data() {
		return {
			statusBarHeight: 44,
			isShowDrawer: false,
			name: '用户',
			phone: '138****8888',
			appid: '',
			msgNum: 0
		}
	},
	onShow() {
		const sysInfo = uni.getSystemInfoSync()
		this.statusBarHeight = sysInfo.statusBarHeight || 44
		this.init()
	},
	methods: {
		init() {
			// TODO: 获取用户信息接口
			// 暂用本地存储数据
			const phone = uni.getStorageSync('phone') || ''
			if (phone) {
				this.phone = phone
			}
		},
		toInfo() {
			uni.navigateTo({ url: '/pages/my/info/info' })
		},
		goPage(url) {
			uni.navigateTo({ url })
		},
		onLogout() {
			this.isShowDrawer = true
		},
		logoutConfirm() {
			uni.setStorageSync('token', '')
			uni.setStorageSync('phone', '')
			this.isShowDrawer = false
			uni.reLaunch({ url: '/pages/login/login' })
		}
	}
}
</script>

<style>
.page {
	flex: 1;
	background-image: linear-gradient(to bottom, #389588, #38958800);
}
.status-bar {
	background-color: rgba(0,0,0,0);
}
/* 用户头部 */
.user-header {
	flex-direction: row;
	justify-content: space-between;
	padding-left: 38rpx;
	padding-right: 38rpx;
	padding-top: 62rpx;
	padding-bottom: 62rpx;
}
.user-info {
	flex: 1;
}
.user-name {
	font-size: 48rpx;
	color: #FFFFFF;
	margin-bottom: 8rpx;
}
.user-detail {
	font-size: 32rpx;
	color: #FFFFFF;
	padding-left: 30rpx;
	line-height: 66rpx;
}
.avatar {
	width: 150rpx;
	height: 150rpx;
	border-radius: 150rpx;
}
/* 菜单列表 */
.menu-list {
	background-color: #FFFFFF;
	border-top-left-radius: 30rpx;
	border-top-right-radius: 30rpx;
	padding-top: 40rpx;
	flex: 1;
}
.menu-item {
	flex-direction: row;
	align-items: center;
	height: 104rpx;
	margin-left: 38rpx;
	margin-right: 38rpx;
	border-bottom-width: 1px;
	border-bottom-color: #EEF1F4;
	border-bottom-style: solid;
}
.menu-icon {
	width: 48rpx;
	height: 48rpx;
	margin-left: 32rpx;
}
.menu-text {
	flex: 1;
	font-size: 32rpx;
	color: #545F71;
	margin-left: 40rpx;
}
.menu-text-wrap {
	flex: 1;
	flex-direction: row;
	align-items: center;
	margin-left: 40rpx;
}
.msg-dot {
	width: 16rpx;
	height: 16rpx;
	background-color: #F65252;
	border-radius: 16rpx;
	margin-left: 10rpx;
}
.menu-arrow {
	width: 40rpx;
	height: 40rpx;
	margin-right: 16rpx;
}
/* 弹窗 */
.popup-content {
	align-items: center;
}
.popup-title {
	font-size: 32rpx;
	color: #545F71;
	text-align: center;
	margin-top: 80rpx;
	margin-bottom: 80rpx;
}
.popup-btns {
	flex-direction: row;
	justify-content: space-around;
	width: 680rpx;
}
.btn-cancel {
	width: 306rpx;
	height: 88rpx;
	background-color: #F3F3F3;
	border-radius: 20rpx;
	font-size: 32rpx;
	color: #545F71;
	text-align: center;
	line-height: 88rpx;
}
.btn-confirm {
	width: 306rpx;
	height: 88rpx;
	background-color: #F65252;
	border-radius: 20rpx;
	font-size: 32rpx;
	color: #FFFFFF;
	text-align: center;
	line-height: 88rpx;
}
</style>