factory_mp_old/pages/my/myInfoChange.vue

<template>
	<view class="my-data">
		<uni-nav-bar  class="nav-bar" height="110rpx" leftWidth="200rpx" leftText="个人信息"
			leftIcon="left" border backgroundColor="#2cade8" color="#fff" fixed statusBar shadow></uni-nav-bar>
		<view class="wrap-view" style="box-shadow: 0 0 15px 5px #eeeeee;padding-bottom: 20upx;">
			<view class="item">
				<view class="title">信息修改：</view>
				<view class="content"></view>
			</view>
			<view class="item item_bottom_border">
				<view class="title">手机号</view>
				<view class="content">
					<input type="text" v-model="userInfo.phone" maxlength="20" placeholder="请输入" disabled/>
				</view>
			</view>
			<view class="item item_bottom_border">
				<view class="title">身份证号</view>
				<view class="content">
					<input type="text" v-model="userInfo.id_number" maxlength="20" placeholder="请输入" />
				</view>
			</view>
			<view class="item item_bottom_border" style="height: fit-content;" v-if="!hasPhoto">
				<view class="title">人员照片</view>
				<view style="flex: 3;">
					<u-upload :action="vuex_apifile" :header="header" ref="uUpload"
						:file-list="fileList"  max-count="1" @on-success="imgUpSuccess" ></u-upload>
				</view>
			</view>
		</view>
		 <view class="btn">
			<button type="default" class="save-btn" @click="saveInfo">保存</button>
			<button plain="true" class="back-btn" @click="backLogin">返回登陆页</button>
		</view> 
	</view>
</template>

<script>
		import nonNullCheck from '../../utils/nonNullCheck.js';
	export default {
		data() {
			return {
				userInfo: {},
				fileList:[],
				fileListS:[],
				hasPhoto:false,
				header:'',
			}
		},
		onShow() {
			this.getHeader();
			this.getUserInfo();
		},
		methods: {
			getHeader() {
				this.header = {
					Authorization: "Bearer " + this.vuex_token
				}
			},
			getUserInfo() {
				let that = this;
				that.$u.api.hrmUserInfo().then(res => {
					that.userInfo = res;
					if(res.photo===null){
						that.hasPhoto = false;
					}
				})
			},
			
			genderChange(e) {
				const idx = e.detail.value;
				this.selectedGender = this.genderRange[idx].name;
			},
			deptChange(e) {
				const idx = e.detail.value;
				this.deptGender = this.deptRange[idx].name;
			},
			imgUpSuccess(data){
				debugger;
				console.log(data)
				this.userInfo.photo =data.path;
			},
			imgUpSuccessS(data){
				this.userInfo.signature =data.path;
			},
			/* 参数验证 */
			paramsCheck() {
				if (!nonNullCheck(this.userInfo.phone)) {
					uni.showToast({
						title: '请填写手机号码',
						icon: "none"
					})
					return false;
				}
				if (!nonNullCheck(this.userInfo.id_number)) {
					uni.showToast({
						title: '请填写身份证号',
						icon: "none"
					})
					return false;
				}
				if (!nonNullCheck(this.userInfo.photo)) {
					uni.showToast({
						title: '请选择人员照片',
						icon: "none"
					})
					return false;
				}
				return true;
			},
			
			saveInfo(){
					let that = this;
					if (!that.paramsCheck()) {
						return;
					} else {
						uni.showLoading({
							title: '保存中...',
							mask: true
						})
						this.$u.api.hrmUpdateInfo(this.userInfo).then(res=>{
							uni.hideLoading()
							uni.showToast({
								title: '保存成功',
								icon: 'none'
							})
							uni.reLaunch({
								url: '/pages/workSpace/workSpace'
							})
						}).catch(e=>{
							uni.hideLoading()
						})
					}
			},
			backLogin(){
				uni.reLaunch({
					url:'/pages/login/login_'
				})
			},
		}
	}
</script>

<style scoped>
	>>>.uni-navbar__header,
	>>>.uni-status-bar {
		background-image: linear-gradient(254deg,
				#0ca7ee 0%,
				#005aff 100%,
				#2a8cff 100%,
				#54bdff 100%),
			linear-gradient(#e60012,
				#e60012);
	}
>>>uni-image{
	height: 200upx;
	width: 200upx;
}
	.my-data {
		background-color: #f3fbff;
		padding-bottom: 227rpx;
	}

	.nav-bar>>>.uni-navbar-btn-text text {
		font-size: 32rpx !important;
	}

	.wrap-view {
		width: 720rpx;
		margin: 0 auto;
		background-color: #ffffff;
		border-radius: 10rpx;
		line-height: 94rpx;
		font-family: PingFang-SC-Medium;
		font-size: 30rpx;
	}
	.wrap-top{
		padding: 20upx 0;
		line-height: 60upx;
	}
	.item {
		margin: 0rpx 32rpx;
		display: flex;
		margin-top: 20rpx;
	}
	
	.item_bottom_border{
		border-bottom: 1rpx solid #eeeeee;
	}
	
	.title {
		color: #212121;
		flex: 1;
	}

	.content {
		flex: 3;
		color: #414141;

	}

	.content input {
		height: 100%;
	}

	.save-btn {
		width: 400rpx;
		height: 80rpx;
		background-color: #2c6fd9;
		border-radius: 40rpx;
		font-size: 30rpx;
		line-height: 80rpx;
		color: #f3fbff;
		margin-top: 21rpx;
	}
	.back-btn{
		width: 400rpx;
		height: 80rpx;
		border-radius: 40rpx;
		font-size: 30rpx;
		line-height: 80rpx;
		margin-top: 21rpx;
	}
</style>