realty/virgo.wzfrontend/workark_wx/subPages/myPage/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" @click="updateAvatar"></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 class="detail-item">
				<view class="detail-label">版本</view>
				<view class="detail-value">02181000</view>
			</view>
		</view>
		<view class="logout" @click="logout">退出登录</view>
	</view>
</template>

<script>
	import config from "@/config";
	import {
		updateUserDetails,
		getUserInfoById
	} from '@/request/api/my.js'
	export default {
		data() {
			return {
				user: {}
			}
		},
		onShow() {
			this.user = this.$store.getters.user;
			this.user.organizedName = this.$store.getters.organization && this.$store.getters.organization.name;
			this.init();
		},
		methods: {
			updateAvatar() {
				uni.chooseImage({
					count: 1, //默认9
					success: file => {
						uni.showLoading();
						uni.uploadFile({
							url: config.baseUrl + '/file/filenode/-1', // 仅为示例，非真实的接口地址
							filePath: file.tempFilePaths[0],
							name: 'uploadFile',
							success: (res) => {
								if (res.statusCode != 200) {
									uni.hideLoading();
									return this.$toast('上传失败');
								}
								let data = JSON.parse(userInfo);
								if (data.code != 200) {
									uni.hideLoading();
									return this.$toast('上传失败');
								}
								let url = JSON.parse(userInfo).data.node.url;
								updateUserDetails({
									id: this.$store.getters.user.userId,
									portrait: url
								}).then(node => {
									uni.hideLoading();
									if (node.code == 200) {
										this.$toast('修改成功');
										this.init()
									} else {
										return this.$toast('修改失败');
									}
								})
							},
							fail: () => {
								uni.hideLoading();
								this.$toast('上传失败');
							}
						});
					}
				});
			},
			async init() {
				let userInfo = await getUserInfoById(this.user.userId);
				if (userInfo.state) {
					this.user = userInfo;
					this.user['userName'] = userInfo.name;
					this.user['userId'] = userInfo.id;
					this.user.organizedName = userInfo.mgrOrganization && userInfo.mgrOrganization.name;
					this.$store.dispatch('app/changeUser', userInfo);
				}
			},
			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/changeUser', {});
							uni.removeTabBarBadge({
								index: 1
							})
							this.$toast('退出成功');
							setTimeout(() => {
								uni.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: $uv-content-color;
			font-weight: 300;
			margin-bottom: 10rpx;
		}

		.detail-value {
			font-size: 32rpx;
		}

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

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