ParkApp/pages/auth/auth.vue

<template>
	<view class="padding-20">
		<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  placeholder="请输入姓名" v-model="model.name" type="text"></u-input>
					</u-form-item>
					<u-form-item  :label-width="labelWidth"   label="性别" >
						<u-input  type="select" :select-open="sexSelectShow" v-model="model.sex" placeholder="请选择性别" @click="sexSelectShow = true"></u-input>
					</u-form-item>
					<u-form-item   label="身份证号"  :label-width="labelWidth">
						<u-input  placeholder="请输入身份证号" v-model="model.idcard" type="idcard"></u-input>
					</u-form-item>
					<u-form-item   label="手机号码"  :label-width="labelWidth">
						<u-input  placeholder="请输入手机号" v-model="model.phone" type="number"></u-input>
					</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(face_url)?350:560"
						   :height="$isEmpty(face_url)?350:420"
						  :currentImage="face_url"
						  bgsrc="http://139.9.103.171:1888/miniofile/xlyq/face1.png"
						  >
						</upload-img>
						<view class="text-center padding-top-20" style="color: #59a5f0;">
						 <text class="cuIcon-camera padding-right-sm" style="font-size: 30rpx;"></text>
						 <text v-if="$isEmpty(face_url)">点击上传人脸</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  type="select" :select-open="ganderSelectShow" v-model="model.gander" placeholder="请选择工作园区" @click="ganderSelectShow = true"></u-input>
					</u-form-item>
					<u-form-item  :label-width="labelWidth"   label="所属企业" >
						<u-input  type="select" :select-open="companySelectShow" v-model="model.company" placeholder="请选择所属企业" @click="companySelectShow = true"></u-input>
					</u-form-item>
				</u-form>
			</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 :border-bottom="false" :label-width="labelWidth"   label="备注(可选)" ></u-form-item>
					<textarea value="" v-model="model.remark" placeholder="填写备注信息" />
				</u-form>
			</view>
		</view>
		
		
		<view class="cu-btn bg-blue round flex" style="padding: 40rpx 0;margin-top: 40rpx;">
			提交
		</view>
		<u-action-sheet :list="sexSelectList" v-model="sexSelectShow" @click="sexSelectCallback"></u-action-sheet>
		<u-action-sheet :list="ganderSelectList" v-model="ganderSelectShow" @click="ganderSelectCallback"></u-action-sheet>
		<u-action-sheet :list="companySelectList" v-model="companySelectShow" @click="companySelectCallback"></u-action-sheet>
		<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 = this;
	export default {
		components:{
		   uploadImg
		},
		data() {
			return {
				labelWidth:'200',
				model: {
					name: '',
					sex: '',
					phone: '',
					idcard:'',
					gander:'',
					company:'',
					face_image:''
				},
				//图片回显
				face_url:'',
				//性别
				sexSelectList: [{text: '男'},{text: '女'}],
				sexSelectShow: false,
				//园区
				ganderSelectList: [],
				ganderSelectShow: false,
				//企业
				companySelectList: [],
				companySelectShow: false,
				//上传人脸的方式
				faceSelectList: [{
					text: '相册上传',
				}, {
					text: '拍照上传'
				}],
				faceSelectShow:false,
				//验证码
				codeTips: '',
				
			}
		},
		onLoad() {
			this.fetchStaticData()
			this.initData()
		},
		methods: {
			initData(){
				if (!this.$isEmpty(this.$cache.get('phone'))) {
					this.model.phone=this.$cache.get('phone')
				}
			},
			//性别
			sexSelectCallback(index) {
				uni.hideKeyboard();
				this.model.sex = this.sexSelectList[index].text;
			},
			//园区
			ganderSelectCallback(index) {
				uni.hideKeyboard();
				this.model.gander = this.ganderSelectList[index].text;
			},
			//公司
			companySelectCallback(index) {
				uni.hideKeyboard();
				this.model.company = this.companySelectList[index].text;
			},
			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.handelImg(res.tempFilePaths[0])
			    }
			  });
			},
			//处理照片，拍照上传和相册上传的共同处理方法
			handelImg(imgUrl){
				that.face_url=imgUrl
				uni.getFileSystemManager().readFile({
				  filePath: imgUrl,
				  //选择图片返回的相对路径
				  encoding: 'base64',
				  //编码格式
				  success: res => {
					  //图片的base64字符串
					  that.face_image='data:image/jpeg;base64,' + res.data
				  }
				});
			},
			fetchStaticData(){
				this.ganderSelectList=[
					{
						text: '新邻园区1'
					},
					{
						text: '新邻园区2'
					}
				]
				this.companySelectList=[
					{
						text: '新邻企业1'
					},
					{
						text: '新邻企业2'
					}
				]
			}
		}
	}
</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>