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 frame" @click="changePassword">
			<view class="option_title">修改密码</view>
			<u-icon name="arrow-right" size="20"></u-icon>
		</view>
		<view class="space_between card_mine_option frame" @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 frame" @click="goSet">
			<view class="option_title">系统设置</view>
			<u-icon name="arrow-right" size="20"></u-icon>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			token: {
				type: String,
				default: () => '',
			},
			userInfo: {
				type: Object,
				default: () => {},
			},
		},
		data() {
			return {}
		},
		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;
	}
	.frame {
		position: relative; //重要
	}

	.frame::after {
		position: absolute;
		content: '';
		border-bottom: 2rpx solid #e7e6e4;
		// border-radius: 16rpx;
		width: 200%;
		height: 200%;
		top: 0;
		left: 0;
		transform: scale(0.5);
		transform-origin: 0 0;
		pointer-events: none;
		/* 使伪元素不会阻止鼠标事件 */
	}

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