MiniScmV3/pages/my/my.vue

<template>
	<view class="title">
		<text>个人中心</text>
	</view>
	<view class="top">
		<view class="user-info">
			<view class="avatar-outer">
				<view class="avatar-inner">
					<image src="@/static/user.png"></image>
				</view>
			</view>
			<view class="user-info-text">
				<text>{{encryptedName}}</text>
				<text>{{encryptedPhone}}</text>
			</view>
		</view>
	</view>

	<view class="business">
		<view class="business-item" v-for="(item,index) in businessItemList" :key="index">
			<image :src="item.src" @click="handleBusiness(item.name)"></image>
			<text>{{item.text}}</text>
		</view>
	</view>
	<view class="logout-button">
		<button @click="logout">退出登录</button>
	</view>
</template>

<script setup>
	import {
		computed
	} from 'vue';
	import {
		useUserStore
	} from '../../store/userStore';
	import {
		useHotelStore
	} from '@/store/hotelStore'
	const user = useUserStore()
	let encryptedName = computed(() => {
		let name = user.userInfo.name.slice()
		let res
		if (name.length == 2) {
			res = name[0] + '*'
		} else {
			res = name[0] + '*' + name[name.length - 1]
		}
		return res
	})
	let encryptedPhone = computed(() => {
		let phone = user.userInfo.phone
		let res
		if (user.userInfo.phone) {
			res = phone.slice(0, 3) + '****' + phone.slice(7)
		} else {
			res = ''
		}
		return res
	})

	let businessItemList = [{
			src: "/static/my_order.png",
			text: "我的订单",
			name: 'order',
		},
		{
			src: "/static/receipt.png",
			text: "预约开票",
			name: 'receipt',
		},
		{
			src: "/static/front_desk.png",
			text: "联系前台",
			name: 'front_desk',
		},
		{
			src: "/static/user_info.png",
			text: "实名认证",
			name: 'myAccount',
		}
	]

	let hotel = useHotelStore().hotel

	function handleBusiness(name) {
		if (name === 'order') {
			uni.switchTab({
				url: '/pages/order/order'
			})
		} else if (name === 'receipt') {
			uni.showToast({
				icon: 'none',
				title: '该酒店不支持该服务，请至前台办理'
			})
		} else if (name === 'front_desk') {
			uni.showModal({
				title: "联系前台",
				content: `将要拨打前台电话：${hotel.phone}`,
				success: (res) => {
					if (res.confirm) {
						uni.makePhoneCall({
							phoneNumber: hotel.phone,
						});
					}
				},
			});
		} else if (name === 'myAccount') {
			uni.navigateTo({
				url: '/subpkg/myAccount/myAccount'
			})
		}
	}

	function logout() {
		uni.request({
			url: '/user/logout',
			method: 'POST'
		})
		user.updateToken('')
		user.updateUserInfo({})
		uni.redirectTo({
			url: '/pages/login/login'
		})
	}
</script>

<style lang="scss">
	.title {
		z-index: 999;
		display: block;
		position: fixed;
		top: 80rpx;
		left: 30rpx;
		right: 30rpx;
		color: #ffffff;
		text-align: center;
		font-size: 40rpx;
	}

	.top {
		width: 100%;
		height: 40vh;
		background-image: url("/static/mine-top.png");
		background-size: cover;
		background-repeat: no-repeat;
		box-sizing: border-box;

		.user-info {
			width: 100%;
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 200rpx 40rpx 0 40rpx;
			overflow: hidden;

			.avatar-outer {
				width: 130rpx;
				height: 130rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 50%;
				background-color: #6c70a1;

				.avatar-inner {
					width: 110rpx;
					height: 110rpx;
					border-radius: 50%;
					background-color: #FFFFFF;
					display: flex;
					justify-content: center;
					align-items: center;

					image {
						width: 52rpx;
						height: 52rpx;
					}
				}
			}

			.user-info-text {
				padding-left: 20rpx;
				display: flex;
				flex-direction: column;

				text {
					margin: 5rpx;
					color: #ffffff;
					font-size: 32rpx;
				}
			}
		}
	}

	.business {
		display: flex;
		flex-direction: row;
		background-color: #FFFFFF;
		margin: 0 20rpx;
		justify-content: space-between;
		padding: 30rpx;
		border-radius: 40rpx;
		transform: translateY(-110rpx);

		.business-item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			image {
				width: 60rpx;
				height: 60rpx;
			}
		}
	}

	.logout-button {
		padding-top: 36vh;
		margin: 20rpx;

		button {
			color: #ffffff;
			background-color: #a09cc4;
			border-radius: 800rpx;
		}
	}
</style>