zhapp/pages/my/userInfo.vue

<template>
	<view class="page">
		<uni-Cell :celllist="celllist" :leftStyle="{fontSize:'30rpx'}">
			<template #customContent="{ item }">
				<image v-if="item.title=='头像'" class="avatar"
					:src="userInfo.sysUser.headSculpture? userInfo.sysUser.headSculpture :'/static/image/avatar.png'"
					mode=""></image>
				<view class="" v-if="item.title=='实名认证'">
					<view class="authtag">
						{{userInfo.sysUser.authStatus==0?'未认证':userInfo.sysUser.authStatus==1?'已认证':'认证驳回'}}
					</view>
				</view>
			</template>
		</uni-Cell>
		<uni-Cell :celllist="celllist1" class="mt-2" :leftStyle="{fontSize:'30rpx'}">
			<template #customContent="{ item }">
				<view v-if="item.title=='身份'" class="dis a-c">
					<view class="authtag" v-for="item in identityType() " :key="item">
						{{item}}
					</view>

				</view>
			</template>
		</uni-Cell>
		<uni-Popup :show="userupShow" @close='userupShow=false' headerTitle="修改姓名" mode="center" width="80%">
			<template #content>
				<view class="p-4">
					<u--input class="mb-4" placeholder="请输入姓名" v-model="userName"></u--input>
					<view class="savebtn dis a-c j-c" @click="upName">
						确定
					</view>
				</view>

			</template>
		</uni-Popup>
		<u-action-sheet :actions="list" title="性别" :show="sexshow" round="20rpx" @close="sexshow=false"
			@select="sexselect" :closeOnClickOverlay="true"></u-action-sheet>
		<!-- 租户机构选择 -->
		<uni-Popup :show="deptSelectShow" @close='deptSelectShow=false' headerTitle="选择出单机构" overflow="auto"
			maxHeight="580rpx">
			<template #content>
				<view class="overflow">
					<view class="deptselect dis f-c ">
						<u-radio-group v-model="deptradioValue" placement="column" iconPlacement="right"
							@change="deptchange">
							<view class="item dis a-c " v-for="(item, index) in tenantOrglist" :key="index">
								<u-radio activeColor="#FDE935" iconColor='#333' :name="item.systemCode"
									style="width: 100%;">
									<view class="textregion dis f-c ">
										<text>{{item.sysName}}</text>
										<text>{{item.deptName}}</text>
									</view>
									<image :src="item.iconAddress" mode=""></image>
								</u-radio>
							</view>
						</u-radio-group>
					</view>
				</view>

			</template>
		</uni-Popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex"
	import store from '@/store';
	export default {
		data() {
			return {
				deptradioValue: "", //选中租户code
				deptradioName: "", //选中租户名称
				tenantOrglist: [], //租户机构列表
				userName: "",
				namevalue: '',
				userupShow: false, //姓名弹窗
				sexshow: false, //性别弹窗
				deptSelectShow: false, //选择企业
				list: [{
						name: '男',
						value: 1,

					},
					{
						name: '女',
						value: 2,

					},
				],
			}
		},
		onShow() {
			this.getuser();
		},
		onLoad() {
			this.userName = this.userInfo.sysUser.name;
			this.deptradioValue = store.state.system_code;
			this.getOrganization(); //获取机构列表，人员信息回显
			this.getuser();
		},
		computed: {
			...mapState(['userInfo']),
			celllist() {
				return [{
						title: "头像",
						useSlot: true, //是否插槽，
						handler: () => this.updateAvatar()
					},
					{
						title: "姓名",
						value: this.userInfo.sysUser.name || "未知",
						handler: () => this.userupShow = true,

					}, {
						title: "手机号",
						useSlot: true,
						url: "/pages/my/replacePhone",
						clickType: 'navigate',
						value: this.userInfo.sysUser.mobile || "未知",
					},
					{
						title: "性别",
						value: this.userInfo.sysUser.sex != null ?
							(this.userInfo.sysUser.sex == 1 ? '男' : '女') : '未知',
						handler: () => this.sexshow = true
					},
					{
						title: "实名认证",
						useSlot: true,
						clickType: 'auth',
					}
				]
			},
			celllist1() {
				return [{
						title: "推荐人",
						url: "/pages/set/set",
						rightIcon: false,
						value: this.userInfo.sysUser.referrerName + '-' + this.userInfo.sysUser.referrerMobile,
					},
					{
						title: "所在企业",
						value: store.state.system_Name,
						handler: () => this.deptSelectShow = true
					},
					{
						title: "所在机构",
						url: "/pages/quote/quoteInfo",
						rightIcon: false,
						value: this.userInfo.sysUser.deptName || '无',

					}, {
						title: "身份",
						useSlot: true,
						rightIcon: false,
					}
				]
			}
		},
		methods: {
			identityType() {
				const Map = {
					1: '前线人员',
					2: '后线人员',
					3: '合伙人',
					4: '工作室管理员',
					5: '团队',
					6: '个代',
					7: '渠道',
					8: '电销',
				}
				return this.userInfo.sysUser.typeNames.map(id => Map[id]);
			},
			//获取机构列表
			async getOrganization() {
				let res = await this.$http.post('/userInfo/getTenantList'); //获取机构列表
				if (res.code == '200') {
					this.tenantOrglist = res.data;
				}
			},
			//
			async deptchange(name) {
				let info = this.tenantOrglist.find(val => val.systemCode == name);
				this.deptradioValue = info.systemCode;
				await store.commit('setUserModules', {
					title: 'system_code',
					data: info.systemCode,
				})
				await store.commit('setUserModules', {
					title: 'system_Name',
					data: info.sysName,
				})
				this.deptSelectShow = false;
			},
			//切换性别
			async sexselect(e) {
				// 接口
				let res = await this.$http.post('/appUser/userInfoEdit', {
					id: this.userInfo.sysUser.id,
					sex: e.value,
				}); //获取机构列表
				if (res.code == '200') {
					uni.showToast({
						title: res.msg,
						icon: "none",
					})
					this.sexshow = false; //关闭弹窗
					this.getuser(); //更新用户信息
				};
			},
			//修改头像
			async updateAvatar() {
				let [chooseImageErr, chooseImageRes] = await uni.chooseImage({
					count: 1,
					sizeType: ['compressed']
				});
				if (chooseImageRes) {
					this.chooseAvatar(chooseImageRes.tempFilePaths[0]);

				} else {}
			},
			//裁剪组件
			chooseAvatar(src) {
				uni.navigateTo({
					url: '/pages/my/avatarCropper?src=' + src,

				})
			},
			//修改姓名
			async upName() {
				let res = await this.$http.post('/appUser/userInfoEdit', {
					id: this.userInfo.sysUser.id,
					name: this.userName,
				}); //获取机构列表
				if (res.code == '200') {
					uni.showToast({
						title: res.msg,
						icon: "none",
					})
					this.userupShow = false; //关闭弹窗
					this.getuser(); //更新用户信息
				};
			},

			async getuser() {
				let userInfoRes = await this.$http.get('/appUser/userInfoGet'); //用户信息
				store.commit('setUserModules', { //用户信息
					title: 'userInfo',
					data: {
						sysUser: {
							...userInfoRes.data
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #F8F8F8;
		height: 100vh;
	}

	.customContent {
		image {
			width: 46rpx;
			height: 46rpx;
		}
	}

	//身份标签
	.authtag {
		padding: 2rpx 8rpx;
		box-sizing: border-box;
		background: linear-gradient(270deg, #FDE935 0%, #F1FF91 100%);
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		font-size: 22rpx;
		color: #333;
		margin-left: 16rpx;
	}

	//头像
	.avatar {
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
	}

	.savebtn {
		width: 100%;
		height: 80rpx;
		background: #FDE935;
		border-radius: 50rpx 50rpx 50rpx 50rpx;
		font-size: 30rpx;
		color: #1F1F1F;
		font-weight: bold;

	}

	//出单机构选择
	.overflow {
		padding: 30rpx;
		box-sizing: border-box;

		.deptselect {
			.item {
				border-radius: 10rpx;
				border: 1px solid #EEEEEE;
				padding: 24rpx 25rpx;
				margin-bottom: 30rpx;
				width: 100%;
				box-sizing: border-box;

				image {
					width: 72rpx;
					height: 72rpx;
					margin-right: 20rpx;
				}

				.textregion {
					margin-right: auto;

					text:first-child {
						font-size: 32rpx;
						color: #333;
						font-weight: bold;
					}

					text:last-child {
						font-size: 30rpx;
						color: #666;
					}
				}
			}
		}
	}
</style>