MiniScm/pages/my/my.vue

<template>
	<view class="page">
		<view class="top">
			<NavigateBar title="个人中心"></NavigateBar>

			<view class="top--desc">
				<view class="top--desc__icon">
					<view class="top--desc__icon-outer">
						<view class="top--desc__icon-inner">
							<u-image :src="userPicPath" width="52rpx" height="52rpx"></u-image>
						</view>
					</view>
				</view>
				<view class="top--desc__word">
					<view class="top--desc__word-name">
						<u-text size="20" :text="userInfo.name" mode="name" format="encrypt" color="#FFFFFF"></u-text>
					</view>
					<view class="top--desc__word-phone">
						<u-text size="16" :text="renderPhoneNumber(userInfo.phone)" mode="name"color="#FFFFFF"></u-text>
					</view>
				</view>
			</view>
		</view>

		<view class="middle">
			<view class="middle--item" v-for="(item, index) in itemList">
				<view class="middle--item__content" @click="navigateTo(item.url)">
					<view class="middle--item__img">
						<u-image :src="item.src" :width="item.width" :height="item.height" mode="aspectFit"></u-image>
					</view>
					<view class="middle--item__word">{{ item.text }}</view>
				</view>
			</view>
		</view>

		<view class="bottom">
			<u-button text="退出登录" @click="logout" shape="circle" color="#9e97c3"></u-button>
		</view>
	</view>
</template>

<script>
	import { stringHasText } from '../../utils/commonUtils.js'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import NavigateBar from '../../components/navigateBar/navigate-bar.vue';
	export default {
		components: {
			NavigateBar
		},
		data() {
			return {
				userPicPath: '/static/user.png',
				itemList:[
					{
						src: "/static/my_order.png",
						text: "我的订单",
						url: '/pages/order/order',
						width: "50rpx",
						height: "60rpx"
					},
					{
						src: "/static/receipt.png",
						text: "预约开票",
						url: '',
						width: "58rpx",
						height: "55rpx"
					},
					{
						src: "/static/front_desk.png",
						text: "联系前台",
						url: '',
						width: "65rpx",
						height: "48rpx"
					},
					{
						src: "/static/user_info.png",
						text: "实名认证",
						url: '/subpkg/myAccount/myAccount',
						width: "73rpx",
						height: "48rpx"
					}
				]
			};
		},
		computed: {
			...mapState('m_user', ['userInfo', 'token']),
			listDebug() {
				return [{
					src: "/static/change_hotel.png",
					text: "选择酒店",
					url: '/subpkg/changeHotel/changeHotel'
				}]
			}
		},
		methods: {
			...mapMutations('m_user', ['updateUserInfo', 'updateToken']),
			...mapMutations('m_business', ['updateCurrentHotel']),
			navigateTo(url) {
				if (url !== '' && url !== null && url !== undefined) {
					if (url === '/pages/order/order') {
						uni.switchTab({
							url: url
						})
					} else {
						uni.navigateTo({
							url: url
						})
					}
				} else {
					uni.$showMsg('功能开发中，敬请期待')
				}
			},
			async logout() {
				console.log(this.token)
				let res = await uni.$http.post('/logout')
				console.log(res)
				uni.redirectTo({
					url: '/pages/login/login'
				})
				this.updateUserInfo({name:''})
				this.updateToken('')
				this.updateCurrentHotel({})
			},
			renderPhoneNumber(str) {
				if(!stringHasText(this.userInfo.phone)) return ""
				let strArray = str.split("")
				for(let i = 3; i < 7; i++) {
					strArray[i] = "*"
				}
				let string = strArray.join("")
				// console.log("string", string);
				return string
			}
		},
		onLoad() {
			if (!this.token) {
				uni.redirectTo({
					url: '/pages/login/login'
				})
			}
		},
		// #ifdef MP-WEIXIN
		onShareAppMessage(info) {
			return {
				title: '源享住',
				path: 'pages/login/login',
				imageUrl: "/static/logo.png"
			}
		}
		// #endif
	}
</script>
<style>
	.u-button__text {
		color: #FFFFFF;
	}

	page {
		width: 100%;
		height: 100%;
		background-color: #f4f4f4;
	}
</style>

<style lang="scss" scoped>
	.page {
		.top {
			width: 100%;
			height: 580rpx;
			background-image: url("/static/mine-top.png");
			background-size: cover;
			background-repeat: no-repeat;
			box-sizing: border-box;

			.top--desc {
				width: 100%;
				display: flex;
				flex-direction: row;
				align-items: center;
				padding: 100rpx 40rpx 0 40rpx;

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

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

				.top--desc__word {
					padding-left: 20rpx;

					.top--desc__word-name {
						height: 50rpx;
						display: flex;
						align-items: center;
					}

					.top--desc__word-phone {
						height: 50rpx;
						display: flex;
						align-items: center;
					}
				}	
			}
		}

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

			.middle--item__content {
				width: 140rpx;
				height: 120rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;

				.middle--item__img {
					height: 60rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}

		.my-middle {
			margin-top: 40rpx;
			background-color: white;

			.info-item {
				display: flex;
				justify-content: space-between;
				height: 120rpx;
				line-height: 160rpx;
				border-bottom: 1px solid #F0EFF5;
				margin: 0 40rpx;

				.info-item-left {
					display: flex;
					align-items: center;

					.left-img {
						padding-right: 20rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}

				.info-item-right {
					display: flex;
					align-items: center;
					color: #AFB2BA;
				}
			}
		}

		.bottom {
			margin: 20rpx;
			transform: translateY(100rpx);
		}
	}
</style>