school-shunt-app/pages/my/user-info/user-info.vue

<template>
	<view class="page-container">
		<u-nav-bar title="个人信息" color="#333" bg="white"></u-nav-bar>
		<view class="main-content">
			<u-panel>
				<u-des-row label="头像" border forward @click="editAvatar">
					<view slot="value" class="u-flex" style="justify-content: flex-end;">
						<image :style="{background: form.avatar?'':'#9FA5BA'}" :src="form.avatar" class="avatar"
							mode="aspectFill"></image>
					</view>
				</u-des-row>
				<u-des-row label="姓名" :value="form.studentName" border />
				<u-des-row label="性别" :value="form.genderName || '--'" border />
				<u-des-row label="专业群名称" :value="form.majorName || '--'" border />
				<u-des-row label="学号" :value="form.studentNO || '--'" border />
				<!-- <u-des-row label="年级" :value="form.test" border />s -->
				<u-des-row label="班级" :value="form.gradeName  || '--'" border />
				<u-des-row label="电子邮箱" :value="form.test" border @click="editEmail">
					<view slot="value" class="u-flex" style="justify-content: flex-end;">
						{{form.studentEmail}}
						<view class="u-right-icon">
							<image style="width:24rpx;height:24rpx;" src="/static/edit.png" />
						</view>
					</view>
				</u-des-row>
				<u-des-row label="手机" eye>
					<view slot="value" slot-scope="{isOpen}">{{isOpen ? userInfo.mobileNo : hideCode(userInfo.mobileNo, 3,4) }}</view>
				</u-des-row>
			</u-panel>
			<!-- <button  type="primary" class="button" @click="onSumbit">立即修改</button> -->
		</view>
		<u-drawer-input :visible.sync="visible" :config="inputConfig" @sumbit="setEmail" @cancel="visible=false" />
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		hideCode
	} from '@/common'
	export default {
		data() {
			return {
				genderNameOptions: [{
					label: '男',
					vlaue: '男'
				}, {
					label: '女',
					value: '女'
				}],
				form: {
					avatar: '',
					genderName: '',
					studentEmail: '',
				},
				inputConfig: {},
				visible: false //  抽屉
			}
		},
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo,
			})
		},
		watch: {
			userInfo: {
				handler(xy) {
					this.init()
				},
				deep: true,
				immediate: true
			},
		},
		methods: {
			hideCode,
			async init() {
				Object.assign(this.form, this.userInfo || {})
			},
			editAvatar() {
				const that = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success(res) {
						const filePath = res.tempFilePaths[0]
						console.log(111, res)
						uni.uploadFile({
							url: `/shunt/upload`,
							filePath: filePath,
							// fileType: 'image',
							name: 'file',
							header: {
								token: uni.getStorageSync('TOKEN')
							},
							formData: {
							// file: res.tempFiles[0],
								fileType: 'AVATAR',
							},
							success(uploadFileRes) {
								const data = JSON.parse(uploadFileRes.data)
								const filePath = data.data.filePath
								that.setAvatar(filePath)
							}
						});
					}
				});
			},
			setAvatar(avatar) {
				this.setUserInfo('/shunt/set-avatar', {
					avatar
				})
			},
			editEmail() {
				this.inputConfig = {
					title: '电子邮箱',
					value: this.form.studentEmail,
					placeholder: '请输入电子邮箱',
					rule: [{
						name: "value",
						checkType: "email",
						errorMsg: "请输入正确的邮箱"
					}]
				}
				this.visible = true
			},
			setEmail(email) {
				this.setUserInfo('/shunt/set-email', {
					email
				})
			},
			async setUserInfo(url, data) {
				try {
					uni.showLoading()
					await this.$ajax.post(url, data)
					await this.$store.dispatch('user/updateUserInfo')
					uni.showToast({
						title: '修改成功',
						icon: "success"
					});
					this.visible = false
				} catch (e) {
					console.log('setUserInfo', e)
					//TODO handle the exception
				} finally {
					uni.hideLoading()
				}
			},
		},
	}
</script>
<style lang="scss" scoped>
	.page-container {

		.main-content {
			padding: 32rpx 32rpx 32rpx 32rpx; // 188

			.avatar {
				width: 81rpx;
				height: 81rpx;
				// background: #9FA5BA;
				border-radius: 100%;
				//border: 1rpx solid  #9FA5BA;
			}

			.button {
				background: linear-gradient(90deg, #36ACFC 0%, #078EF7 100%);
				border-radius: 45rpx;
				font-size: 32rpx;
				font-weight: 400;
				color: #FFFFFF;
				padding: 28rpx;
				margin-top: 80rpx;
			}
		}
	}
</style>