crm-app-vue3/pages/profile/index.vue

<template>
	<view class="personal_wrap">
		<u-navbar placeholder :autoBack="true" title="编辑个人资料" @rightClick="handleNavSaveClick">
			<view class="u-nav-slot" slot="right">
				保存
			</view>
		</u-navbar>
		<view class="personal_container_wrap" v-if="user.dept">
			<u-cell-group class="avater_cell">
				<u-upload @afterRead="afterRead" name="avatar" class="avatar_upload_wrap">
					<u-cell title="" size="large" value="修改头像" center isLink>
						<view slot="icon" class="u-slot-icon">
							<u-avatar :src="$avatar(user.avatar)" size="88rpx"></u-avatar>
						</view>
					</u-cell>
				</u-upload>
			</u-cell-group>
			<u-cell-group class="userInfo_wrap">
				<u-cell size="large">
					<text slot="title" class="required">姓名</text>
					<view slot="value" class="u-slot-value">
						<u--input v-model="user.nickName" disabledColor="#ffffff" border="none"></u--input>
					</view>
				</u-cell>
				<u-cell title="工号" size="large" :value='user.workNumber ? user.workNumber : "-"'></u-cell>
				<u-cell title="账号" size="large" :value="user.userName"></u-cell>
				<u-cell title="部门" size="large" :value="user.dept.deptName + '/' + postGroup"></u-cell>
				<u-cell title="系统-角色" size="large">
					<text slot="value" class="roleGroup_value">
						{{roleGroup}}
					</text>
				</u-cell>
			</u-cell-group>

			<u-cell-group class="form_wrap">
				<u-cell size="large" @click="showSex = true;" isLink>
					<text slot="title" class="required">性别</text>
					<view slot="value" class="u-slot-value">
						<u--input :value="userSexFormat(user.sex)" disabledColor="#ffffff" disabled border="none">
						</u--input>
					</view>
				</u-cell>
				<u-cell size="large">
					<text slot="title" class="required">邮箱</text>
					<view slot="value" class="u-slot-value">
						<u--input v-model="user.email" disabledColor="#ffffff" border="none"></u--input>
					</view>
				</u-cell>
				<u-cell size="large">
					<text slot="title" class="required">手机</text>
					<view slot="value" class="u-slot-value">
						<u--input v-model="user.phonenumber" disabledColor="#ffffff" border="none"></u--input>
					</view>
				</u-cell>
			</u-cell-group>
		</view>
		<u-action-sheet :show="showSex" :actions="sexActions" title="请确认关系" @close="showSex = false"
			@select="handleSexSelect">
		</u-action-sheet>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				postGroup: "",
				roleGroup: "",
				user: {},
				showSex: false,

				sexActions: [{
						name: "男",
						value: "0"
					},
					{
						name: "女",
						value: "1"
					}
				],
			};
		},
		methods: {
			afterRead(event) {
				uni.$u.api.uploadAvatar(event.file.url).then(()=>{
					this.getUser();
					uni.$u.toast("修改头像成功");
					this.$store.dispatch("user/getUserInfo");
				}).catch(()=>{
					uni.$u.toast("上传头像失败");
				})
			},
			onPullDownRefresh() {
				this.getUser().then(() => {
					uni.stopPullDownRefresh();
				})
			},
			userSexFormat(sex) {
				const sexDict = this.sexActions.find(v => v.value == sex);
				if(sexDict){
					return sexDict.name;
				}
			},
			handleSexSelect(e) {
				this.user.sex = e.value;
			},
		 	async handleNavSaveClick() {
				const {
					nickName,
					email,
					phonenumber,
					sex
				} = this.user;
				if (!nickName || !email || !phonenumber || !sex) {
					uni.$u.toast("请补充数据");
					return;
				};
				await uni.$u.api.updateUserProfile(this.user);
				this.$store.dispatch("user/getUserInfo");
				uni.$u.toast("保存成功");
			},
			async getUser() {
				const {
					data,
					postGroup,
					roleGroup
				} = await uni.$u.api.getUserProfile();
				Object.assign(this, {
					user: data,
					postGroup,
					roleGroup
				});
				Promise.resolve();
			},
		},
		created() {
			this.getUser();
		},
	}
</script>

<style lang="scss">
	.personal_wrap {
		.u-slot-value{
			width: 500rpx;
		}
		.personal_container_wrap {
			.avatar_upload_wrap {
				::v-deep .u-upload__wrap {
					&>uni-view {
						width: 100%;
					}
				}
			}

			::v-deep .uni-input-input {
				text-align: right !important;
				color: #999999;
			}

			.avater_cell {
				margin-top: 20rpx;
				margin-bottom: 20rpx;
			}

			.userInfo_wrap {
				margin-bottom: 20rpx;
			}

			.u-cell {
				background-color: #fff;
			}

			.u-slot-icon {
				image {
					width: 88rpx;
					height: 88rpx;
				}
			}

			.roleGroup_value {
				width: 500rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				color: #999999;
				text-align: right;
			}
		}
	}
</style>