znyc.dispatching.wx/pages/myInfo/myInfo.vue

<template>
	<view class="warp_input_list">
		<view class="t_login_passList bor_bot">
			<view class="input_icon">头像</view>
			<view class="input_img" @tap="upLoadAvatar">
				<image :src="userInfo.avatarUrl?userInfo.avatarUrl:'/static/images/common/logo.png'"></image>
			</view>
		</view>
		<view class="t_login_passList bor_bot">
			<view class="input_icon">姓名</view>
			<input
				class="input_css"
				v-model="userInfo.userName"
				maxlength="6"
				border="none"
				placeholder="请输入姓名"
			></input>
		</view>
		<view class="t_login_passList bor_bot">
			<view class="input_icon">角色</view>
			<input class="input_css" v-model="userInfo.roleName" disabled border="none"></input>
		</view>
		<view class="t_login_passList bor_bot">
			<view class="input_icon">手机号</view>
			<input class="input_css" v-model="userInfo.phone"  border="none"></input>
		</view>
		<view class="btn_css" >
			<button class="btn" @tap="nextHandle">提交</button>
		</view>
	</view>
</template>

<script>
	const {urlList,https,uploadImg} = require('@/static/api');
	const COS = require('@/static/cos-wx-sdk-v5');
	export default {
		data() {
			return {
				userInfo:null,
			};
		},
		onLoad() {
			this.getUserInfo();
		},
		methods:{
			nextHandle(){
				if(this.userInfo.userName == ''){
					uni.showToast({
						title: '姓名不能为空',
						icon: 'none'
					})
					return;
				}
				if (!/^1[3456789]\d{9}$/.test(this.userInfo.phone)) {
					uni.showToast({
						title: "请输入正确的手机号",
						icon: "none",
					});
					return;
				}
				https(urlList.setUserInfo,'PUT',this.userInfo,'提交中...').then(data => {
					this.getUserInfo();
					uni.showToast({
						title:'修改成功',
						icon:'none',
						duration:1500
					})
					setTimeout(()=>{
						 wx.navigateBack()
					},1500)
				}).catch(err => {
					uni.showToast({
						title:err,
						icon:'none',
						duration:1500
					})
				})
			},
			upLoadAvatar(){
				const that = this;
				uni.chooseImage({
					count: 1, // 默认9
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: res => {
						uni.showLoading({
							title:'正在上传'
						});
						let imgPath = res.tempFilePaths[0];
						// 压缩图片
						uni.compressImage({
							src: imgPath,
							quality: 10,
							success: ress => {
								let img = ress.tempFilePath;
								let Key = 'dispatching/wx/upload/avatar/'+imgPath.substr(imgPath.lastIndexOf('/') + 1);
								uploadImg(Key,img).then(data => {
									uni.showToast({
										title:'上传成功',
										duration:1200
									});
									that.userInfo.avatarUrl = data;
								}).catch(err => {
									uni.showToast({
										title:err,
										icon:'none',
										duration:1500
									})
								});
							}
						})
					}
				});
			},
			getUserInfo(){
				uni.showNavigationBarLoading();
				const _that = this;
				https(urlList.getUserInfo,'GET','','').then(data => {
					// console.log('个人中心',data)
					_that.userInfo = data.data;
					uni.setStorage({
						key:"userinfo",
						data:data.data,
					});
				}).catch(err => {
					uni.showToast({
						title:err,
						icon:'none',
						duration:1500
					})
				})
				uni.hideNavigationBarLoading();
			}
		}
		
	}
</script>

<style lang="scss" scoped>
.bor_bot{
	border-bottom: 1rpx solid #f0f0f0;
}
.warp_input_list{
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: white;
	.t_login_passList{
		width:700rpx;
		padding: 25rpx 0rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		.input_icon{
			width: 200rpx;
			display: flex;
			align-items: center;
		}
		.input_img{
			width:500rpx;
			display: flex;
			justify-content: flex-end;
			image{
				width: 80rpx;
				height: 80rpx;
			}
		}
		.input_css{
			width:500rpx;
			text-align: right;
			display: inline-block;
		}
	}
	.btn_css{
		width: 700rpx;
		position: fixed;
		bottom: 48rpx;
		left: 25rpx;
		display: block;
		.btn{
			background-color:#1B64F8FF;
			color: white;
		}
	}
}
</style>