ebike-ui/ebike-user/pages/user/mine/MePage.vue

<template>
	<view class="container">
		<!-- 用户信息区域 -->
		<view class="user-info padding">
			<view class="user-avatar">
				<image :src="wechat_user.avatar" mode="aspectFill"></image><!-- 头像 -->
			</view>
			<view class="user-details">
				<view class="nickname">{{wechat_user.nickname}}</view>
				<view class="phone-number">{{ hidePhoneNumber(wechat_user.mobile) }}</view>
			</view>
		</view>

		<!-- 账户明细区域 -->
		<view class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg radius">
			<view v-for="(item, index) in menuItems" :key="index" class="cu-item arrow" @click="navigateTo(item.link)">
				<view class="content flex">
					<view class="icon-container">
						<image class="icon-size" :src="item.icon"></image>
					</view>
					<text class="text-black">{{ item.label }}</text>
				</view>
			</view>
			<view class=" flex flex-direction">
				<button @click="logout" style="height: 45px;"
					class="cu-btn bg-white margin-tb-sm lg text-red text-bold">退出登录</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import config from '@/utils/config';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		showModelMessage,
		jkcBaseEncode,
		jkcBaseDecode
	} from '@/utils/tools.js';
	const imgPath = config.imgPath;
	const wechat_user = ref({
		url: `${imgPath}static/userui/wxtouxiang.png`,
		nickname: "",
		mobile: ""
	});
	onLoad((options) => {
		wechat_user.value = JSON.parse(jkcBaseDecode(uni.getStorageSync("wechat_user")));

	})
	// 隐藏电话号码中间部分
	const hidePhoneNumber = (phoneNumber) => {
		if (!phoneNumber || phoneNumber.length !== 11) {
			return phoneNumber; // 如果不是有效的手机号，直接返回原始手机号
		}
		const firstPart = phoneNumber.substring(0, 3); // 前三位
		const lastPart = phoneNumber.substring(7); // 后四位
		return `${firstPart}****${lastPart}`; // 拼接隐藏的手机号
	}


	const menuItems = ref([{
			icon: `${imgPath}static/userui/icon/zhhanghu.png`,
			label: '账户明细',
			link: '/pages/user/login/AccountDetails'
		},
		{
			icon: `${imgPath}static/userui/icon/baoxiujilu.png`,
			label: '故障反馈',
			link: '/pages/user/login/TroubleReportUser?bikeCode=250306001002&orderCode=12039219893712864'
		},
		{
			icon: `${imgPath}static/userui/icon/baoxiujilu.png`,
			label: '报修记录',
			link: '/pages/user/login/RepairReport'
		},
		{
			icon: `${imgPath}static/userui/icon/shiminrenzheng.png`,
			label: '微信登录',
			link: '/pages/user/login/wx_login'
		},
		{
			icon: `${imgPath}static/userui/icon/jilu.png`,
			label: '申请换车记录',
			link: '/pages/user/login/return-point-records'
		},
		{
			icon: `${imgPath}static/userui/icon/helpinfo.png`,
			label: '帮助中心',
			link: '/pages/user/HelpPage/HelpPage'
		},
		{
			icon: `${imgPath}static/userui/icon/helpinfo.png`,
			label: '微信支付反馈',
			link: '/pages/user/views/PaymentFeedback'
		},
		{
			icon: `${imgPath}static/userui/icon/loginout.png`,
			label: '账号注销',
			link: '/pages/user/login/userLogout'
		}
	]);
	// 退出登录的方法
	const logout = () => {
		uni.showModal({
			title: '退出登录',
			content: '是否确认退出并清除缓存？',
			success: function(res) {
				if (res.confirm) {
					// 清除缓存
					uni.clearStorage("wechat_user");

					// 弹出成功提示
					uni.showToast({
						title: '退出成功', // 提示内容
						icon: 'success', // 图标类型
						duration: 2000 // 持续时间（单位：毫秒）
					});

				} else if (res.cancel) {
					// 用户取消退出，做相应处理（可选）
					console.log('用户取消退出');
				}
			}
		});
	}



	const navigateTo = (link) => {

		if (link == "") return;
		uni.navigateTo({
			url: link
		});

	}
</script>

<style>
	/* 容器 */
	.container {
		background-color: rgb(248, 248, 248);
		height: 100vh;
		/* 给容器添加内边距 */
	}

	/* 用户信息部分 */
	.user-info {
		display: flex;
		margin-bottom: 20px;
		/* 用户信息区域底部间距 */
		align-items: center;
	}

	/* 用户头像 */
	.user-avatar {
		margin-right: 15px;
		/* 头像与其他信息之间的间距 */
	}

	.user-avatar image {
		width: 50px;
		height: 50px;
		border-radius: 50%;
	}

	/* 用户信息 */
	.user-details {
		display: flex;
		flex-direction: column;
	}

	.nickname {
		font-weight: bold;
		font-size: 16px;
	}

	.phone-number {
		color: #888;
		font-size: 14px;
	}

	/* 账户明细部分 */
	.account-details {
		background-color: #f5f5f5;
		padding: 15px;
		border-radius: 8px;
	}

	.account-details .flex {
		display: flex;
		align-items: center;
	}

	.icon {
		width: 30px;
		height: 30px;
		background-color: #ddd;
		border-radius: 50%;
		margin-right: 10px;
	}

	.account-info {
		font-size: 16px;
		font-weight: bold;
	}

	.icon-container {
		margin-right: 15px;
	}

	.icon-size {
		width: 15px;
		height: 15px;
	}
</style>