gas-cylinder-app/pages/mine/index.vue

<template>
	<!-- 我的 -->
	<view class="card_mine">
		<view class="card_avatar" v-if="token != ''">
			<image class="mine_image" src="../../static/portrait.png" mode=""></image>
			<view class="card_user_title">
				<view class="mine_phone">{{userInfo.nickName}}</view>
				<view class="mine_phone">{{userInfo.username}}</view>
			</view>
		</view>
		<view class="card_avatar" v-else @click="login">
			<image class="mine_image" src="../../static/portrait.png" mode=""></image>
			<view class="mine_title">登录/注册</view>
		</view>
		<view class="space_between card_mine_option" @click="goPersonal">
			<view class="option_title">个人资料</view>
			<u-icon name="arrow-right" size="20"></u-icon>
		</view>
		<view class="space_between card_mine_option" @click="goSet">
			<view class="option_title">系统设置</view>
			<u-icon name="arrow-right" size="20"></u-icon>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				token: '',
				userInfo: {},
			}
		},
		mounted() {
			var token = this.$cache.getToken()
			this.token = token
			var userInfo = this.$cache.getCache('userInfo')
			this.userInfo = userInfo
		},
		methods: {
			//微信授权
			set_is_login(val) {
				let _this = this;
				uni.getUserProfile({
					'desc': '获取用户基本信息',
					'lang': 'zh_CN',
					success: function(infoRes) {
						console.log(infoRes, 8)
						uni.login({
							success: function(loginRes) {
								console.log(loginRes, 23)
							}
						});
					},
				});
			},
			// 登录注册
			login() {
				uni.navigateTo({
					url: '/pages/login'
				});
			},
			// 个人资料
			goPersonal() {
				uni.navigateTo({
					url: '/pages/mine/personal'
				});
			},
			// 系统设置
			goSet() {
				uni.navigateTo({
					url: '/pages/mine/system'
				});
			}
		}
	}
</script>

<style lang="scss">
	.card_user_title {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.card_mine {
		padding-top: var(--status-bar-height);
		padding: 0rpx 30rpx;
	}

	.mine_image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}

	.mine_phone {
		margin-left: 20rpx;
		font-size: 30rpx;
	}

	.mine_title {
		margin-left: 20rpx;
		font-size: 40rpx;
		font-weight: bold;
	}

	.card_avatar {
		display: flex;
		align-items: center;
		margin-bottom: 60rpx;
		padding-top: 60rpx;
	}

	.card_mine_option {
		margin: 40rpx 0rpx;
		padding-bottom: 30rpx;
		border-bottom: 2rpx solid #E4E7ED;
	}

	.option_title {
		font-size: 32rpx;
		font-weight: bold;
	}
</style>