OA/pages/users/myInformation/index.vue

<template>
	<!-- 个人中心-修改个人信息 -->
	<view class="all_box">
		<!-- 头像 -->
		<view class="header_box">
			<u--image v-if="changeAvatar!==''" :showLoading="true" :src="changeAvatar" width="182rpx" height="182rpx"
				shape="circle">
			</u--image>
			<u--image v-else :showLoading="true" :src="personInfo.img" width="182rpx" height="182rpx" shape="circle">
			</u--image>
			<text @click="seleckImage">修改头像</text>
		</view>
		<!-- 基本信息 -->
		<view class="bases_info">
			<view class="name">
				<text>姓名</text>
				<input type="text" value="" class="n_input" v-model="personInfo.name" placeholder="请输入姓名" />
			</view>
			<view class="name">
				<text>昵称</text>
				<input type="text" value="" class="n_input" v-model="personInfo.nickname" placeholder="请输入昵称" />
			</view>
			<view class="name">
				<text>电话</text>
				<input type="text" value="" class="n_input" v-model="personInfo.mobile" placeholder="请输入电话" />
			</view>
		</view>
		<view class="btn" @click="savePersonInfo">保存</view>
	</view>
</template>

<script>
	import {
		Toast
	} from '@/libs/uniApi.js'
	import {
		getPersonInfoApi
	} from '@/api/oa.js'
	import {
		PostUserPerSubmitAPI
	} from '@/api/oaApi.js'
	import {
		HTTP_REQUEST_URL
	} from '@/config/app.js'
	import {
		oaUploads,
		uploads
	} from '@/api/upload.js'
	export default {
		data() {
			return {
				fileList5: [],
				personInfo: {
					thumb: ''
				},
				changeAvatar: ''
			};
		},
		onShow() {
			this.getPersonInfo()
		},
		methods: {
			//获取个人信息
			async getPersonInfo() {
				const res = await getPersonInfoApi()
				this.personInfo = res.data
				this.personInfo.img = res.thumb
				console.log('个人信息', this.personInfo.thumb);
			},
			//保存个人信息
			async savePersonInfo() {
				// //判断thump
				let str1 = this.personInfo.thumb
				let str2 = str1.slice(0, 26)
				//判断上传得图片路径
				if (str2 == 'http://ceshi-oa.lihaink.cn') {
					this.personInfo.thumb = str1.substring(26)
				}
				console.log('提交', this.personInfo.thumb);
				try {
					//判断电话号码是否符合格式
					const reg_phone = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
					if (!reg_phone.test(this.personInfo.mobile)) {
						throw Error()
					}
					//判断名字是否符合格式
					const reg_name = /^[\u4e00-\u9fa5]{2,4}$/;
					if(!reg_name.test(this.personInfo.name)){
						throw Error()
					}
					const res = await PostUserPerSubmitAPI(this.personInfo)
					Toast('修改成功')
				} catch (e) {
					//TODO handle the exception
					Toast('修改失败，请重试')
				}
			},
			seleckImage(i) {
				let that = this
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: function(res) {
						oaUploads(res.tempFilePaths[0], 'img').then(res => {
							
							that.personInfo.thumb = res.filepath
							that.changeAvatar = HTTP_REQUEST_URL + res.filepath
							
							Toast('上传成功')
						}).catch(err => {
							console.log('err', err);
							Toast('上传失败')
						})
					},
					fail: function(err) {
						console.log('choose失败');
						Toast('添加失败')
					}
				});
			},
		}

	}
</script>

<style lang="scss" scoped>
	/deep/.u-upload__button {
		width: 182rpx !important;
		height: 182rpx !important;
		// background-color: pink;
		margin: 0;
	}

	/deep/.u-upload__wrap__preview__image {
		width: 182rpx !important;
		height: 182rpx !important;
	}

	.all_box {
		height: 1623rpx;
		background-color: #fff;
		padding: 0 28rpx;
		padding-top: 74rpx;
	}

	.header_box {
		color: $theme-oa-color;
		font-size: 28rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.bases_info {
		font-size: 32rpx;

		.name {
			margin-top: 42.11rpx;
		}

		.n_input {
			padding-left: 20rpx;
			margin-top: 17.5rpx;

			width: 694.74rpx;
			height: 94.74rpx;
			background: #F3F4F8;
			border-radius: 12px;
		}
	}

	.btn {
		margin: 0 auto;
		border-radius: 100px;
		width: 614.04rpx;
		height: 84.21rpx;
		text-align: center;
		line-height: 84.21rpx;
		color: #fff;
		background: #3274F9;
		box-shadow: 0px 9px 26px 1px #E9EFF5;
		margin-top: 84.21rpx
	}
</style>