uniAppXCX/pages/mine/mine.vue

<template>
	<view class="container">
		<view class="user">
			<view class="userInfo">
				<image class="userPhoto" :src="userInfo.avatarUrl"></image>
				<view class="info">
					<view class="name" v-if="hasLogin">
						{{userInfo.nickName}}
					</view>
					<view class="loginText" @click="toLogin" v-else>
						点击登录
					</view>
					<view class="id">
						ID: {{userId}}
					</view>
				</view>
				<view class="" @click="loginOut">
					退出登录
				</view>
			</view>
			<view class="row">
				<view class="box">
					<view class="value" style="color: #FF2C43;">
						1000
					</view>
					<view class="label">
						积分
					</view>
				</view>
				<view class="box">
					<view class="value">
						2
					</view>
					<view class="label">
						优惠卷
					</view>
				</view>
			</view>
		</view>
		<view class="menus">
			<view class="title">
				<image src="/static/img/mine/title.png" mode=""></image>
			</view>
			<view class="menuList">
				<view class="menu" @click="pageTo('/pages/addressManage/addressManage')">
					<image src="/static/img/mine/menu1.png"></image>
					<span>地址管理</span>
				</view>
				<view class="menu">
					<image src="/static/img/mine/menu2.png"></image>
					<span>消费记录</span>
				</view>
				<view class="menu">
					<image src="/static/img/mine/menu3.png"></image>
					<span>加群交流</span>
				</view>
				<view class="menu">
					<image src="/static/img/mine/menu4.png"></image>
					<span>游戏规则</span>
				</view>
				<view class="menu">
					<image src="/static/img/mine/menu5.png"></image>
					<span>用户协议</span>
				</view>
				<view class="menu">
					<image src="/static/img/mine/menu6.png"></image>
					<span>联系客服</span>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isLogin: false,
				userInfo: null,
				userId: '-',
				hasLogin: false,
			}
		},
		onShow() {
			//获取用户的登录信息
			if (wx.getStorageSync('token')) {
				this.userInfo = wx.getStorageSync('userInfo');
				this.userId = wx.getStorageSync('userId');
				this.hasLogin = true
			}
		},
		methods: {
			toLogin() {
				wx.navigateTo({url: '/pages/login/login'})
			},
			pageTo(url) {
				wx.navigateTo({url: url})
			},
			loginOut() {
				wx.removeStorageSync('userInfo')
				wx.removeStorageSync('userId')
				wx.removeStorageSync('token')
				getApp().globalData.hasLogin = false;
				this.hasLogin = false
			}
			
		}
	}
</script>

<style scoped lang="scss">
	.container {
		background: #9EC8F9;
		padding: 0 10px;
		overflow: scroll;
	}

	.user {
		background: #fff;
		border-radius: 10px;
		padding: 0 10px;
		position: relative;
		margin-top: 10vw;

		.userInfo {
			display: flex;

			.userPhoto {
				width: 74px;
				height: 74px;
				border-radius: 50%;
				border: solid 3px #6BAFFF;
				position: relative;
				top: -20px;
				background: #dedede;
			}

			.info {
				padding: 10px;

				.name {
					font-weight: 600;
				}

				.loginText {
					font-weight: 600;
				}

				.id {
					margin-top: 5px;
					font-size: 13px;
				}
			}
		}

		.row {
			display: flex;
			justify-content: space-around;

			.box {
				display: flex;
				flex-direction: column;
				text-align: center;
				padding: 20px 10px;

				.label {
					margin-top: 5px;
					font-size: 15px;
				}

				.value {
					font-size: 20px;
					font-weight: 600;
				}
			}
		}
	}

	.menus {
		margin-top: 20px;
		background: #fff;
		border-radius: 10px;

		// padding: 0 10px;
		.title {
			position: relative;
			left: -10px;
			top: -10px;
			width: calc(100% + 10px);
			height: 55px;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.menuList {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			padding: 20px 20px 0 20px;

			.menu {
				margin-bottom: 30px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				image {
					width: 36px;
					height: 36px;
				}

				span {
					margin-top: 10px;
					font-size: 14px;
				}
			}
		}
	}
</style>