ParkApp/pages/index/myinfo/myinfo.vue

<template>
	<view style="padding: 0 20rpx 20rpx;">
		<u-top-tips type="info" ref="uTips"></u-top-tips>
		
		<view class="auth">
			<text class="cuIcon-titles text-blue padding-right-10"></text>
			<text>个人信息</text>
			<view class="card">
				<u-form :model="model"  ref="uForm" >
					<u-form-item  :label-width="labelWidth"  label="姓名" >
						<u-input disabled  :value="model.realName" type="text"></u-input>
					</u-form-item>
					<u-form-item  :label-width="labelWidth"   label="性别" >
						<u-input disabled :value="model.sex==2?'女':'男'"  @click="sexSelectShow = true"></u-input>
					</u-form-item>
					<u-form-item   label="身份证号"  :label-width="labelWidth">
						<u-input disabled maxlength="18"   :value="model.idcard" type="idcard"></u-input>
					</u-form-item>
					<u-form-item   label="手机号码"  :label-width="labelWidth">
						<u-input disabled maxlength="11"  :value="model.phone" type="number"></u-input>
						<view class="text-blue"   @click="changePhone" slot="right" >
							<text style="text-decoration: underline;" class="textblue">换绑</text>
						</view>
					</u-form-item>
					<u-form-item :border-bottom="false"  label="脸部信息"  :label-width="labelWidth"></u-form-item>
				</u-form>
				<view @click="faceSelectShow=true" class="flex justify-center padding-bottom-50">
					<view class=" ">
						<upload-img
						   :width="$isEmpty(model.face)?350:560"
						   :height="$isEmpty(model.face)?350:420"
						  :currentImage="model.face"
						  bgsrc="http://139.9.103.171:1888/miniofile/xlyq/face1.png"
						  >
						</upload-img>
						<view class="text-center padding-top-20" style="color: #0081ff;">
							 <text class="cuIcon-camera padding-right-sm" style="font-size: 30rpx;"></text>
							 <text v-if="$isEmpty(model.face)">点击上传人脸</text>
							 <text style="margin-top: 40rpx;display: inline-block;" v-else>重新上传人脸</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="auth">
			<text class="cuIcon-titles text-blue padding-right-10"></text>
			<text>企业信息</text>
			<view class="card">
				<u-form :model="model"  ref="uForm" >
					<u-form-item  :label-width="labelWidth"   label="公司园区" >
						<u-input disabled  :value="model.agencyName" ></u-input>
					</u-form-item>
					<u-form-item  :label-width="labelWidth"   label="园区区域" >
						<u-input disabled  :value="model.residentialName"  ></u-input>
					</u-form-item>
					<u-form-item  :label-width="labelWidth"   label="所属企业" >
						<u-input disabled  :value="model.enterpriseName" ></u-input>
					</u-form-item>
				</u-form>
			</view>
		</view>
		
		<view  v-if="!$isEmpty(newFace)">
			<view class="bg-white" style="height: 100rpx;"></view>
			<view   @click="submit"  class="footer-fixed cu-btn  bg-blue flex" style="padding: 45rpx;">
				确认修改
			</view>
		</view>
		
		<u-action-sheet @click="faceSelectCallback"  z-index="999999" :list="faceSelectList" v-model="faceSelectShow"></u-action-sheet>
	</view>
</template>

<script>
	import uploadImg from '@/components/uploadimg/uploadImg.vue'
	let that;
	export default {
		components:{
		   uploadImg
		},
		data() {
			return {
				labelWidth:'200',
				model:{},
				//上传人脸的方式
				faceSelectList: [{
					text: '相册上传',
				}, {
					text: '拍照上传'
				}],
				faceSelectShow:false,
				//新的人脸信息
				newFace:''
			}
		},
		onShow() {
			let currPage=this.getPageCtx()
			if (!this.$isEmpty(currPage.data.image)) {
				this.uploadFile(currPage.data.image)
			}
		},
		onLoad(options) {
			that=this
			this.fetchUserInfo()
		},
		methods: {
			/**
			 * 换绑手机号
			 */
			changePhone(){
				this.$Router.push({name:'editPhone'})
			},
			/**
			 * 编辑操作时，加载用户的认证信息
			 */
			async fetchUserInfo(){
				if (this.$isEmpty(getApp().globalData.userInfo)) {
					let phone=this.$cache.get('phone')
					let res=await this.$api.enterprisestaff.detail({phone:phone})
					this.model=res.data
				}else{
					this.model=getApp().globalData.userInfo
				}
			},
			/**
			 * 确认修改
			 */
			submit(){
				this.$api.enterprisestaff.submit(this.model).then(res=>{
					if (res.success) {
						this.$u.toast('修改成功')
						this.newFace=''
						this.fetchUserInfo()
					}
				})
			},
			/**
			 * 获取页面对象
			 */
			getPageCtx(idx = 0){
			  let pages = getCurrentPages()
			  if (pages.length > 0) {
			    return pages[pages.length - 1 - idx] || {}
			  }
			  return {}
			},
			faceSelectCallback(index){
				if (index==0) {
					//图片上传
					this.chooseImage()
				} else if(index==1){
					//拍照上传
					uni.navigateTo({
						url:'/pages/my-camera/my-camera'
					})
				}
			},
			//点击上传图片事件
			chooseImage: function () {
			  uni.chooseImage({
			    count: 1,
			    //最多可以选择的图片张数，默认9
			    sourceType: ['album', 'camera'],
			    sizeType: ['compressed'],
			    //可选择原图或压缩后的图片
			    success: res => {
			      that.uploadFile(res.tempFilePaths[0])
			    }
			  });
			},
			//处理照片，拍照上传和相册上传的共同处理方法
			uploadFile(imgUrl){
				this.$api.uploadFile.submit(imgUrl).then(res=>{
					that.model.face=res.data
					that.newFace=res.data
				})
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #FFFFFF;
	}
	.auth{
		padding: 40rpx 10rpx;
		.card{
			margin-top: 20rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			border-radius: 12rpx;
			box-shadow: 0 -10rpx rgba(248, 248, 248,.9) ,0 10rpx rgba(248, 248, 248,.9) , -10rpx 0rpx rgba(248, 248, 248,.9) ,10rpx 0rpx rgba(248, 248, 248,.9);
			.item{
				padding:30rpx 0;
				display: flex;
				justify-content: space-between;
			}
		}
	}
</style>