CommunityApp/pages/choosePlot/householdCert/householdCert.vue

<template>
	<view class="bg-white" style="min-height: 100vh;">
		<view class="" >
			<view class="flex justify-between " style="padding: 30rpx;box-sizing: border-box;">
					<view class="" style="font-size: 38rpx;">
						<text class="text-bold text-black">您的申请信息</text>
					</view>
					<view class="text-red"  style="padding-top: 12rpx;">
						<text style="font-size: 38rpx;">{{totalStep}}</text>
						<text class="text-df">/{{totalStep}}</text>
					</view>
				</view>
				<view class="">
					<view style="padding: 50rpx 0 20rpx 48rpx;">
						<text class="cuIcon-location padding-right-sm"></text>
						<text class="local_city_info">{{residential_name}},{{building_name}},{{unit_name}},{{room_name}}</text>
					</view>
				</view>
				<view class="form">
						<u-form :border="true" ref="uForm" >
							<u-form-item :required="true"  label="住户姓名:" prop="name" label-width="150">
								<u-input :border="true"  placeholder="住户姓名,必填" v-model="name" type="text"></u-input>
							</u-form-item>
							<u-form-item :required="true"  label="住户类型:" prop="type" label-width="150">
								<u-input :border="true"  type="select" :select-open="typeShow" v-model="typeLabel" placeholder="请选择住户类型" @click="typeShow = true"></u-input>
							</u-form-item>
							<u-form-item :required="true"  label="国籍:" prop="nationality" label-width="150">
								<u-input :border="true" type="select" :select-open="nationalityShow" v-model="nationalityLabel"  @click="nationalityShow = true"></u-input>
							</u-form-item>
							<u-form-item   label="证件类型:" prop="nationalityName" label-width="150">
								<u-input :disabled="true" :border="true" type="text" v-model="nationalityName"></u-input>
							</u-form-item>
							<u-form-item :required="type==0?true:false"  label="证件号码" prop="id_card" label-width="150">
								<u-input :border="true" placeholder="住户类型是业主时,必填" type="text" :trim="true"  maxlength="18" v-model="id_card"></u-input>
							</u-form-item>
							<u-form-item :required="true" label="性别" prop="sex" label-width="150">
								<u-radio-group v-model="sex" >
									<u-radio shape="circle"  name="1">男</u-radio>
									<u-radio shape="circle"  name="2">女</u-radio>
								</u-radio-group>
							</u-form-item>
						</u-form>
				</view>
				<view v-if="nationality==3" style="background-color: #FFFFFF;">
				  <view class="form_group mb0" style="padding-left: 60rpx;">
				    <view>
				      <text class="sex">护照图片：</text>
				      <text class="tips">（基本身份信息页）</text>
				    </view>
				  </view>
				  <view @click="show=true;operaType=1" style="margin: 30rpx 0 10rpx 0;display: flex;align-items: center;flex-direction: column;">
				    <upload-img
				  	  :width="$isEmpty(show_passport_img_uri)?bgWidth:imgWidth"
				  	  :height="$isEmpty(show_passport_img_uri)?bgHeight:imgHeight"
				  	  :currentImage="show_passport_img_uri"
				  	  :bgsrc="bgsrc"
				  	  >
				    </upload-img>
				    <view class="" style="color: #59a5f0;">
				  	 <text class="cuIcon-camera padding-right-sm" style="font-size: 30rpx;"></text>
				  	 <text v-if="$isEmpty(show_passport_img_uri)">点击上传护照</text>
				  	 <text style="margin-top: 40rpx;display: inline-block;" v-else>点击重新上传</text>
				    </view>
				  </view>
				</view>
				
				<view v-if="nationality==3" style="background-color: #FFFFFF;">
				  <view class="form_group mb0" style="padding-left: 60rpx;">
				    <view>
				      <text class="sex">入境证明：</text>
				      <text class="tips">（入镜盖章页）</text>
				    </view>
				  </view>
				  <view  @click="show=true;operaType=2" style="margin: 30rpx 0 10rpx 0;display: flex;align-items: center;flex-direction: column;">
				    <upload-img
				  	  :width="$isEmpty(show_entry_img_uri)?bgWidth:imgWidth"
				  	  :height="$isEmpty(show_entry_img_uri)?bgHeight:imgHeight"
				  	  :currentImage="show_entry_img_uri"
				  	  :bgsrc="bgsrc"
				  	  >
				    </upload-img>
				    <view class="" style="color: #59a5f0;">
				  	 <text class="cuIcon-camera padding-right-sm" style="font-size: 30rpx;"></text>
				  	 <text v-if="$isEmpty(show_entry_img_uri)">点击上传入境证明</text>
				  	 <text style="margin-top: 40rpx;display: inline-block;" v-else>点击重新上传</text>
				    </view>
				  </view>
				</view>
				<!-- 人脸 begin ，微信小程序审核时，隐藏该模块 -->
				<view style="background-color: #FFFFFF;" v-if="appletType==1">
							<view class="form_group mb0" style="padding-left: 60rpx;">
								 <view>
									<text class="sex">人脸：</text>
									<text class="tips">（人脸用于开门，请上传正脸图片）</text>
								  </view>
							</view>
							<view @click="show=true;operaType=3" style="margin: 30rpx 0 10rpx 0;display: flex;align-items: center;flex-direction: column;">
							  <upload-img
								  :width="$isEmpty(show_image_uri)?bgWidth:imgWidth"
								  :height="$isEmpty(show_image_uri)?bgHeight:imgHeight"
								  :currentImage="show_image_uri"
								  :bgsrc="bgsrc"
								  >
							  </upload-img>
							  <view class="" style="color: #59a5f0;">
								 <text class="cuIcon-camera padding-right-sm" style="font-size: 30rpx;"></text>
								 <text v-if="$isEmpty(show_image_uri)">点击上传人脸</text>
								 <text style="margin-top: 40rpx;display: inline-block;" v-else>点击重新上传</text>
							  </view>
							</view>
							<view class="category" style="padding-bottom: 140rpx;">
								<view v-for="(item, index) in iconArray" :key="index" class="category_item">
								  <view class="category_item_wrap" @tap="top" :data-index="item.index">
									<view class="icon_wrap">
									  <image :src="item.iconUrl" class="index_icon"></image>
									</view>
									<view class="category_item_text">
									  <text>{{item.iconText}}</text>
									</view>
								  </view>
							</view>
					</view>
				</view>
				<!-- 人脸 end -->
				
			  <u-action-sheet @click="photoChecked"  z-index="999999" :list="list" v-model="show"></u-action-sheet>
			  <u-select z-index="999999" mode="single-column" :list="typeArry" v-model="typeShow" @confirm="typeConfirm"></u-select>
			  <u-select z-index="999999" mode="single-column" :list="nationalityArry" v-model="nationalityShow" @confirm="nationalityConfirm"></u-select>
			  <view  @click="showDialogBtn"  class=" footer-fixed" >
			  	<view class="cu-btn  flex  text-lg bg-red-btn" style="padding: 46rpx 0;">
			  		提交认证
			  	</view>
			  </view>
		</view>
 </view>
</template>

<script>
import uploadImg from '@/comps/uploadimg/uploadImg.vue'
//获取app实例
var app = getApp();
export default {
	components:{
		uploadImg
	},
	data() {
		return {
			//小程序审核状态
			appletType:0,
			
			//默认点击弹出拍照模态框的是人脸上传操作，1：护照，2：入境，3：人脸
			operaType:3,
			//人脸上传模态框，上传照片或拍照
			list: [{
				text: '相册上传',
			}, {
				text: '拍照上传'
			}],
			show: false,
			
			//背景图
			bgsrc:'http://139.9.103.171:1888/img/image/camera1.png',
			bgWidth:350,
			bgHeight:320,
			//显示图
			imgWidth:540,
			imgHeight:400,
			
			//总步骤数
			totalStep:2,
			sex: "1",
			//住户类型
			typeLabel:'业主',
			typeShow: false,
			type: 0,
			typeArry: [
				{
					value: '0',
					label: '业主'
				},
				{
					value: '1',
					label: '家属'
				},
				{
					value: '2',
					label: '租户'
				}
			],
			
			//国籍
			nationalityLabel:'中国大陆',
			nationalityShow: false,
			nationality: 0,
			nationalityName:'身份证',
			nationalityArry: [
				{
					value: '0',
					label: '中国大陆'
				},
				{
					value: '1',
					label: '中国香港/澳门'
				},
				{
					value: '2',
					label: '中国台湾'
				},
				{
					value: '3',
					label: '海外'
				}
			],
			
			//住户名字
			name: '',
			residential_name: "",
			//小区名字
			community_name: '',
			//楼栋名字
			building_name:'',
			//单元名字
			unit_name: '',
			//房间名字
			room_name: '',
			//房间id
			room_id: '',
			
			//护照照片
			passport_img_uri: null,
			//护照照片回显
			show_passport_img_uri: null,
			//入境证明
			entry_img_uri: null,
			//入境证明回显
			show_entry_img_uri: null,
			//人脸图片地址
			image_uri: null,
			//人脸回显
			show_image_uri: null,
			//图片的md5
			face_code: null,
			
			//身份证
			id_card: null,
			iconArray: [{
			  "iconUrl": "http://139.9.103.171:1888/img/image/zd.png",
			  "iconText": '不要遮挡',
			  "index": 1
			}, {
			  "iconUrl": "http://139.9.103.171:1888/img/image/mj.png",
			  "iconText": '不戴墨镜',
			  "index": 2
			}, {
			  "iconUrl": "http://139.9.103.171:1888/img/image/zl.png",
			  "iconText": '不能仰头俯拍',
			  "index": 3
			}, {
			  "iconUrl": "http://139.9.103.171:1888/img/image/cz.png",
			  "iconText": '光线充足',
			  "index": 4
			}, {
			  "iconUrl": "http://139.9.103.171:1888/img/image/bg.png",
			  "iconText": '浅色背景',
			  "index": 5
			}, {
			  "iconUrl": "http://139.9.103.171:1888/img/image/sh.png",
			  "iconText": '物业审核生效',
			  "index": 6
			}],
			
		};
	},
	onLoad: function (options) {
		  this.appletType=uni.getStorageSync('appletType')
		  //显示用户选择的小区+楼栋+房间名字
		  this.residential_name = options.residential_name;
		  this.building_name=options.building_name
		  this.unit_name = options.unit_name;
		  this.room_name = options.room_name;
		  this.room_id = options.room_id;
		  this.name=app.globalData.member.name
	},
	onShow() {
		//总步骤数
		//注册的流程总步骤数是3，其他流程总步骤数是2
		if(this.$isEmpty(app.globalData.totalStep)){
			this.totalStep=2
		}else{
			this.totalStep=app.globalData.totalStep
		}
		
		//获取当前页面的对象,获取拍照回显照片
		let currPage=this.$util.getPageCtx()
		if(!this.$isEmpty(currPage.data.image)){
			this.uploadImage(currPage.data.image)
		} 
		
		
	},
	computed: {
		
	},
	methods: {
		//点击模态框选项触发
		photoChecked(index){
			if (index==0) {
				//图片上传
				this.chooseImage()
			} else if(index==1){
				if(this.operaType==3){
					//拍照上传，拍照人脸
					uni.navigateTo({
						url:"../../my-camera/my-camera?type=0"
					})
				}else{
					//拍照上传，拍照证件
					uni.navigateTo({
						url:"../../my-camera/my-camera?type=1"
					})
				}
			}
		},
		
		
		typeConfirm(e) {
			this.type = 0;
			e.map((val, index) => {
				this.type=val.value
				this.typeLabel=val.label
			})
		},
		nationalityConfirm(e) {
			this.nationality = 0;
			e.map((val, index) => {
				this.nationality=val.value
				this.nationalityLabel=val.label
				
				if (this.nationality == 0) {
				  this.nationalityName = '身份证';
				} else if (this.nationality == 1) {
				  this.nationalityName = '港澳居民往来内地通行证';
				} else if (this.nationality == 2) {
				  this.nationalityName = '台湾居民往来大陆通行证';
				} else if (this.nationality == 3) {
				  this.nationalityName = '护照';
				}
			})
		},
		//点击上传图片事件
		chooseImage: function () {
		  var that = this;
		  uni.chooseImage({
		    count: 1,
		    //最多可以选择的图片张数，默认9
		    sourceType: ['album', 'camera'],
		    sizeType: ['compressed'],
		    //可选择原图或压缩后的图片
		    success: res => {
		      let tempFilePaths = res.tempFilePaths;
			  that.uploadImage(tempFilePaths[0])
		    }
		  });
		},
		/**上传图片
		 * @param {Object} imgUrl 图片url
		 */
		uploadImage(imgUrl){
			console.log("operatype: ",this.operaType);
			console.log("imgUrl",imgUrl)
			var that = this;
			//是否需要md5加密上传人脸照
			let is_need_md5 = false;
			if (this.operaType == 3) {
			  is_need_md5 = true;
			}
			uni.getFileSystemManager().readFile({
			  filePath: imgUrl,
			  //选择图片返回的相对路径
			  encoding: 'base64',
			  //编码格式
			  success: res => {
			    //成功的回调
			    app.globalData.uploadBase64('data:image/jpeg;base64,' + res.data, is_need_md5, function (result) {
			      if (that.operaType == 1) {
			        that.setData({
			          passport_img_uri: result.data.uri,
			          show_passport_img_uri: imgUrl
			        });
			      } else if (that.operaType == 2) {
			        that.setData({
			          entry_img_uri: result.data.uri,
			          show_entry_img_uri: imgUrl
			        });
			      } else if (that.operaType == 3) {
			        that.setData({
			          image_uri: result.data.uri,
			          show_image_uri: imgUrl,
			          face_code: result.data.md5Hex
			        });
			      }
			    });
			  }
			});
		},
		//提交认证
		showDialogBtn: function () {
		  let params = {};
		  let that = this;
		
		  if (that.name == "") {
		    app.globalData.autoFailHint("请填写住户姓名");
		    return;
		  } 
		  //用户类型
		  let type = that.type; //['业主','家属','租户'],
		  params['type'] = type; //0 中国大陆 1 中国香港/澳门 2 中国台湾 3 海外
		  //国籍
		  let nationality = that.nationality;
		  params['nationality'] = nationality;
		  //身份证
		  var id_card = this.id_card;
		  params['id_card'] = id_card; //业主身份证必填
		
		  if (type == 0 && !id_card) {
		    app.globalData.autoFailHint("住户类型是业主时，证件号码必填");
		    return;
		  }
		
		  let passport_img_uri = that.passport_img_uri;
		  let entry_img_uri = that.entry_img_uri;
		
		  if (nationality == 3) {
		    params['passport_img_uri'] = that.passport_img_uri;
		    params['entry_img_uri'] = that.entry_img_uri;
		
		    if (type == 0) {
		      if (!passport_img_uri) {
		        app.globalData.autoFailHint("请上传护照图片");
		        return;
		      }
		      if (!entry_img_uri) {
		        app.globalData.autoFailHint("请上传入境证明");
		        return;
		      }
		    }
		  }
		  console.log(that.image_uri);
		  let image_uri = that.image_uri;
		  params['image_uri'] = that.image_uri;
		  let face_code = that.face_code;
		  params['face_code'] = that.face_code; //性别
		  params['sex'] = that.sex;
		  params['name'] = that.name;
		  params['tel'] = app.globalData.member.tel;
		  params['room_id'] = that.room_id; 
		  params['create_type'] = '0'; //申请来源0-小程序添加 1-后台添加  2-后台导入 3-app添加
		  params['record_type'] = '0'; //申请的记录类型 0--认证类型 1--新增类型 2--编辑类型
		  params['member_id'] = app.globalData.member.id;//会员id
	
		  let operation = 'member/authentication';
			app.globalData.postRequest(params, operation, function (res) {
		    //提交成功
		    if (res.data.result_code == 1) {
		      app.globalData.oneFailHint(res.data.result_msg, function () {
		        //跳转到首页
		        uni.reLaunch({
		          url: '/pages/index/index?isFlush=true'
		        });
		      });
		    } else {
		      app.globalData.oneFailHint(res.data.result_msg);
		    }
		  });
		}
		
	}
};
</script>

<style scoped lang="scss">
page{
	background-color: #FFFFFF;
}
	
.form {
	padding:0 60rpx;
	background-color: #FFFFFF;
}

.local_city{
    padding: 30rpx 0;
    position:relative;
    background: #fff;
}
.local_city .changeCity{
    padding: 20rpx;
    position: absolute;
    right: 0rpx;
    top: 0;
}
.local_city .icon{
    padding: 20rpx;
    position: absolute;
    left: -0;
    top: 50%;
    transform: translate(0,-50%);
    font-size: 40rpx;
}
.local_city .local_city_info{
    padding-left: 40rpx;
    display:inline-block;
}

.form_group .upload {
  padding: 0 28rpx;
  font-size: 26rpx;
  background: $base-btn-color;
  color: #fff;
  border: none;
}

.upload_tips {
  font-size: 24rpx;
}

.upload_bg {
  position: relative;
  text-align: center;
}

.mb0 {
  padding-top: 40rpx;
  font-size: 28rpx;
  margin-bottom: 0;
}

.form_group .tips {
  margin-left: 50rpx;
}

.upload_bg .upload_bgImg {
  width: 540rpx;
  height: 400rpx;
}

.upload_bg .upload_btn {
  width: 120rpx;
  height: 120rpx;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -65rpx;
  margin-top: -60rpx;
}

.upload_bg .upload_btn image {
  width: 100%;
  height: 100%;
}

.upload_text {
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, 0);
  color: $base-btn-color;
}

upload_bg {
  position: relative;
}

.upload_bg .upload_btn {
  width: 120rpx;
  height: 120rpx;
  position: absolute;
  left: 50%;
  top: 40%;
  margin-left: -65rpx;
  margin-top: -60rpx;
}

.upload_bg .upload_btn image {
  width: 100%;
  height: 100%;
}

.upload_text {
  position: absolute;
  top: 55%;
  width: 100%;
  color: $base-btn-color;
}

.img_content {
  margin-top: 20rpx;
  position: relative;
  text-align: center;
}

.img_content .upload_bgImg {
  width: 560rpx;
  height: 420rpx;
  max-height: 1;
  display: inline-block;
  border-radius: 20rpx;
}

.reUpload {
  height: 60rpx;
  line-height: 60rpx;
  text-align: right;
  color: #333;
  padding-right: 100rpx;
  font-size: 26rpx;
}

.img_content .img_icon {
  width: 40rpx;
  height: 40rpx;
  vertical-align: text-top;
  margin-right: 6rpx;
  border-radius: 20rpx;
}

.category {
  padding:20px 20rpx 0;
  overflow: auto;
  background-color: #FFF;
text-align:center;

}
.category_item {
  width: 33.3%;
  float: left;
  margin-bottom: 40rpx;
}
.icon_wrap {
  width: 120rpx;
  margin: 0 auto;
  margin-bottom: 5px;
}
.index_icon {
  width: 60rpx;
  height: 60rpx;
}
.category_item_text {
  text-align: center;
  font-size: 24rpx;
  color: #999;
}

</style>