vue-insagent-app/pages/user/userInfo.vue

<template>
	<view class="page">
		<!-- 公共组件-每个页面必须引入 -->
		<service-widget @btnClick="btn_click"></service-widget>
		<public-module></public-module>
		<view class="basicInfo">
			<view class="user-set-userinfo-list d-flex a-center j-sb" @tap="popupShow = true">
				<view>头像</view>
				<view class="dis a-c">
					<image :src="avatar" mode="" style="width: 32px;height: 32px;"></image>
					<u-icon name="arrow-right" color="#C7C6CA" size="28"></u-icon>
				</view>
			</view>
			<view class="user-set-userinfo-list d-flex a-center j-sb">
				<view>姓名</view>
				<text class="d-flex a-center  ">{{sysUser.name}}</text>
			</view>
			<view class="user-set-userinfo-list d-flex a-center j-sb">
				<view>会员号</view>
				<text class="d-flex a-center  ">{{sysUser.id}}</text>
			</view>
			<view class="user-set-userinfo-list d-flex a-center j-sb">
				<view>性别</view>
				<text class="d-flex a-center  ">{{sysUser.sex}}</text>
			</view>
			<view class="user-set-userinfo-list d-flex a-center j-sb">
				<view>职级</view>
				<text class="d-flex a-center  ">{{sysUser.jobCode}}</text>
			</view>
			<view class="user-set-userinfo-list d-flex a-center j-sb">
				<view>电话</view>
				<text class="d-flex a-center  ">{{sysUser.mobile}}</text>
			</view>
			<view class="user-set-userinfo-list d-flex a-center j-sb">
				<view>身份证号</view>
				<text class="d-flex a-center  ">{{esmUserInternal.identity}}</text>
			</view>
			<view class="user-set-userinfo-list d-flex a-center j-sb">
				<view>出生日期</view>
				<text class="d-flex a-center  ">{{esmUserInternal.birthday}}</text>
			</view>
			<view class="user-set-userinfo-list d-flex a-center j-sb">
				<view>居住地址</view>
				<text class="d-flex a-center  ">{{esmUserInternal.addressnow}}</text>
			</view>
			<view class="user-set-userinfo-list d-flex a-center j-sb">
				<view>注册时间</view>
				<text class="d-flex a-center  ">{{sysUser.createTime}}</text>
			</view>
		</view>
		<view class="videoInfo">
			<view class="user-set-userinfo-list d-flex a-center j-sb">
				<view>影像</view>
				<text class="d-flex a-center   main-text-color" @tap="toAddImageData">查看</text>
			</view>
		</view>
		<view class="businessInfo" v-if="this.userInfo.sysUser.status=='1'">
			<view class="user-set-userinfo-list dis j-s a-c">
				<view style="width: 100px;">推荐人</view>
				<text>
					{{this.userInfo.sysUser.referrerId}}({{this.userInfo.sysUser.referrerName}})
				</text>
			</view>
			<view class="user-set-userinfo-list d-flex a-center j-sb">
				<view>所属机构</view>
				<text class="d-flex a-center  ">{{this.userInfo.sysUser.deptName}}</text>
			</view>
			<view class="user-set-userinfo-list d-flex a-center j-sb">
				<view>所属团队</view>
				<text class="d-flex a-center  ">{{this.userInfo.sysUser.roleName}}</text>
			</view>
		</view>
		<!-- 头像预览Start -->
		<z-popup v-model="popupShow" :hideOnBlur="false" type="center" width="600upx" radius="12upx">
			<view class="popup_title">
				<text @click="popupShow = false">取消</text>
				<view>头像预览</view>
				<text @click="changeAvatar">更换</text>
			</view>
			<view class="popup_content">
				<view class="body d-flex a-center j-center">
					<image :src="avatar" mode="aspectFill" @longtap="saveAvatar"></image>
				</view>
			</view>
		</z-popup>

	</view>
</template>

<script>
	import zPopup from '@/components/common/z-popup.vue'
	import store from '@/store';
	import {
		mapState
	} from "vuex"
	export default {
		components: {
			zPopup,
		},
		data() {
			return {
				popupShow: false, //头像是否展示
				sysUser: {},
				esmUserInternal: {},
				esmUserAgent: {},
				// 推荐人信息
				showRecommend: false,
				recommenderId: "",
				recommenderName: "",
				recommenderComname: "",
				recommenderTeam: "",
				avatar: "",
			}
		},
		onShow() {
			if (this.userInfo.sysUser.headSculpture) {
				this.avatar = this.$base.baseUrl + this.userInfo.sysUser.headSculpture;
			} else {
				this.avatar = "/static/image/my/avatar1.png"
			}

		},
		async onLoad() {
			var sysUser = {};
			Object.assign(this.sysUser, this.userInfo.sysUser);
			// // 查询推荐人信息
			// if (!!this.userCheckInfo.esmUserAgent.recommenderid) {
			// 	let res = await this.$http.get('/user/findById?id=' + this.userCheckInfo.esmUserAgent.recommenderid);
			// 	if ((res.code == '200') && (res.data != null)) {
			// 		this.showRecommend = true;
			// 		this.recommenderId = res.data.id;
			// 		this.recommenderName = res.data.name;
			// 		this.recommenderComname = res.data.comname;
			// 		this.recommenderTeam = res.data.deptname;
			// 	}
			// }

		},
		computed: {
			...mapState(['userInfo', 'userCheckInfo']),
		},
		methods: {
			btn_click() {
				uni.navigateTo({
					url: '/pages/chat/chat'
				})
			},
			//保存头像
			saveAvatar() {
				var that = this;
				uni.saveImageToPhotosAlbum({ //保存图片
					filePath: that.avatar,
					success: (res) => {
						uni.showToast({
							title: '保存成功',
						})
					}
				})
			},
			//修改头像
			async changeAvatar() {
				let [err, chooseImageRes] = await uni.chooseImage({
					count: 1,
					sizeType: ['compressed']
				});
				if (!chooseImageRes) return;
				const isLt2M = chooseImageRes.tempFiles[0].size / 1024 / 1024 < 2;
				if (!isLt2M) {
					return uni.showToast({
						title: '上传图片大小不能超过 2MB!',
						icon: "none"
					});
				}
				uni.uploadFile({
					url: this.$base.baseUrl + '/ins/taskImage/uploadFile',
					filePath: chooseImageRes.tempFilePaths[0],
					name: "multipartFile",
					formData: {
						'type': 'avatar',
					},
					header: {
						Authorization: store.state.token,
					},
					success: async (imgRes) => {
						let data = JSON.parse(imgRes.data);
						let res = await this.$http.post('/user/modifyingTheAvatar', {
							imagesId: data.data.id
						});
						if (res.code == '200') {
							this.popupShow = false;
							let userInfoRes = await this.$http.get('/user/loginUser', {
								header: {
									Authorization: store.state.token,
								}
							});
							this.avatar = this.$base.baseUrl + userInfoRes.data.headSculpture;
							store.commit('setUserModules', {
								title: 'userInfo',
								data: {
									sysUser: {
										...userInfoRes.data
									}
								}
							})
						}
					}
				});
			},
			//影像信息
			toAddImageData() {
				this.navigate({
					url: "/pages/user/userInfoImage"
				}, "navigateTo", true);
			}
		}
	}
</script>

<style scoped>
	/* 头像预览Start */
	.popup_box {
		width: 100%;
	}

	.popup_title {
		display: flex;
		justify-content: space-between;
		height: 88upx;
		line-height: 88upx;
		border-bottom: 2upx solid #ebebeb;
		padding: 0 20upx;
		background-color: #FFF;
	}

	.popup_title view {
		font-size: 32upx;
		display: flex;
		align-items: center;
	}

	.popup_title text {
		width: 80upx;
		flex-shrink: 0;
		text-align: center;
	}

	.popup_title text {
		font-size: 28upx;
		color: #999;
	}

	.popup_title text:last-child {
		color: $themeColor;
	}

	.popup_content {
		padding: 40rpx 30rpx;
		background-color: #FFFFFF;
		text-align: center;
	}

	.popup_content .body image {
		width: 300upx;
		height: 300upx;
	}

	/* 头像预览End */
	.page {
		width: 100%;
		height: 100vh;
		padding: 16px;
		background: #F8FAFE;
	}

	.basicInfo,
	.videoInfo,
	.businessInfo {
		width: 100%;
		height: auto;
		background: #FFFFFF;
		box-shadow: 0px 4px 10px 0px #DAE3F4;
		border-radius: 6px;
		margin-bottom: 10px;

	}

	.infoTitle {
		padding: 20upx;
		font-weight: bold;
		background-color: #F3F3F3;
	}

	.user-set-userinfo-list {
		background: #FFF;
		padding: 15upx 30upx;
		border-bottom: 1upx solid #F4F4F4;

		text {
			font-size: 14px;
			color: rgba(51, 51, 51, 0.8);
		}

		image {
			width: 32px;
			height: 32px;
			margin-right: 10px;
			border-radius: 50%;
		}

	}

	.user-set-userinfo-list:first-child {
		border-radius: 6px 6px 0 0;
	}

	.user-set-userinfo-list:last-child {
		border: none;
		border-radius: 0 0 6px 6px;
	}
</style>