gas-cylinder-h5/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.principalPhone}}</view>
				<view class="mine_phone">{{userInfo.principalName}}</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="changePassword">
			<view class="option_title">修改密码</view>
			<u-icon name="arrow-right" size="20"></u-icon>
		</view>
		<view class="space_between card_mine_option" @click="goAddress">
			<view class="option_title">地址管理</view>
			<u-icon name="arrow-right" size="20"></u-icon>
		</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: {},
			}
		},
		created() {
			var token = this.$cache.getToken()
			this.token = token
			var userInfo = this.$cache.getCache('userInfo')
			this.userInfo = userInfo
		},
		mounted() {},
		methods: {
			// 刷新token
			refreshTokenil() {
				var token = this.$cache.getToken()
				this.token = token
				var userInfo = this.$cache.getCache('userInfo')
				this.userInfo = userInfo
				this.$forceUpdate()
			},
			// 登录注册
			login() {
				uni.navigateTo({
					url: '/pages/login'
				});
			},
			// 个人资料
			goPersonal() {
				if (this.token) {
					uni.navigateTo({
						url: '/pages/mine/personal'
					});
				} else {
					uni.$u.toast('请先登录')
				}
			},
			// 修改密码
			changePassword() {
				if (this.token) {
					uni.navigateTo({
						url: '/pages/mine/password'
					});
				} else {
					uni.$u.toast('请先登录')
				}
			},
			// 地址管理
			goAddress() {
				if (this.token) {
					uni.navigateTo({
						url: '/pages/mine/address'
					});
				} else {
					uni.$u.toast('请先登录')
				}
			},
			// 系统设置
			goSet() {
				if (this.token) {
					uni.navigateTo({
						url: '/pages/mine/system'
					});
				} else {
					uni.$u.toast('请先登录')
				}
			}
		}
	}
</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 transparent;
		border-image: linear-gradient(to bottom, transparent 50%, #e7e6e4 50%) 0 0 100% 0;
	}

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