realty/virgo.wzfrontend/yui_wx/pages/myDetail/myDetail.vue

<template>
	<view class="detail-content">
		<view class="detail-box">
			<view class="detail-item">
				<view class="detail-label">头像</view>
				<image class="detail-avatar" :src="user.portrait" mode="aspectFill"></image>
			</view>
			<view class="detail-item">
				<view class="detail-label">姓名</view>
				<view class="detail-value">{{user.userName}}</view>
			</view>
			<view class="detail-item">
				<view class="detail-label">所属组织</view>
				<view class="detail-value">{{user.organizedName || '-'}}</view>
			</view>
			<view class="detail-item">
				<view class="detail-label">手机号</view>
				<view class="detail-value">{{user.phone}}</view>
			</view>
			<view class="detail-item">
				<view class="detail-label">性别</view>
				<view class="detail-value">{{user.sex === 'W'?'女':'男'}}</view>
			</view>
		</view>
		<view class="logout" @click="logout">退出登录</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: {}
			}
		},
		onShow() {
			this.user = this.$store.getters.user;
			this.user.organizedName = this.$store.getters.organization && this.$store.getters.organization.name;
		},
		methods: {
			logout() {
				uni.showModal({
					title: '有极提示',
					content: '是否退出登录',
					success: res => {
						if (res.confirm) {
							this.$chat.disConnect();
							uni.removeStorageSync('token');
							uni.removeStorageSync('chatToken');
							uni.removeStorageSync('vuex_state');
							this.$store.dispatch('app/changeOrganization', {});
							this.$store.dispatch('app/changeProject', {});
							this.$store.dispatch('app/changeUser', {});
							this.$store.dispatch('app/changeIdentity', {});
							this.$toast('退出成功');
							setTimeout(() => {
								this.$navigateBack();
							}, 400)
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.detail-content {
		padding: 30rpx;

		.detail-avatar {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
		}

		.detail-box {
			background: #fff;
			border-radius: 16rpx;
			padding: 30rpx;
			box-shadow: 0px 1px 12px rgba(3, 3, 3, 0.08);
		}

		.detail-label {
			color: $uni-secondary-color;
			font-weight: 300;
			margin-bottom: 10rpx;
		}

		.detail-value {
			font-size: 32rpx;
			color: $uni-base-color;
		}

		.detail-item {
			margin-bottom: 20rpx;
		}

		.logout {
			margin-top: 40rpx;
			background: $uni-error;
			color: #fff;
			height: 68rpx;
			line-height: 68rpx;
			border-radius: 68rpx;
			text-align: center;
		}
	}
</style>