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-locationfill text-blue 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="true" 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="vuex_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" :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: 'https://szsq.nxzhsq.cn/community/miniofile/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: '',
				residentialId: '',
				residential_name: "",
				//小区名字
				community_name: '',
				//楼栋名字
				buildingId: '',
				building_name: '',
				//单元名字
				unitId: '',
				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": "https://szsq.nxzhsq.cn/community/miniofile/image/zd.png",
					"iconText": '不要遮挡',
					"index": 1
				}, {
					"iconUrl": "https://szsq.nxzhsq.cn/community/miniofile/image/mj.png",
					"iconText": '不戴墨镜',
					"index": 2
				}, {
					"iconUrl": "https://szsq.nxzhsq.cn/community/miniofile/image/zl.png",
					"iconText": '不能仰头俯拍',
					"index": 3
				}, {
					"iconUrl": "https://szsq.nxzhsq.cn/community/miniofile/image/cz.png",
					"iconText": '光线充足',
					"index": 4
				}, {
					"iconUrl": "https://szsq.nxzhsq.cn/community/miniofile/image/bg.png",
					"iconText": '浅色背景',
					"index": 5
				}, {
					"iconUrl": "https://szsq.nxzhsq.cn/community/miniofile/image/sh.png",
					"iconText": '物业审核生效',
					"index": 6
				}],

			};
		},
		onLoad: function(options) {
			console.log(options, "options");
			//显示用户选择的小区+楼栋+房间名字
			this.residentialId = options.residentialId
			this.residential_name = options.residential_name;
			this.buildingId = options.building_id
			this.building_name = options.building_name
			this.unitId = options.unitId
			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() {
			this.getAppletType()
			//总步骤数
			//注册的流程总步骤数是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: {
			getAppletType: function() {
				var that = this;
				uni.login({
					success: res => {
						let params = {};
						params['js_code'] = res.code;
						params['name'] = 'community';
						params["app_type"] = 1;
						// let operation = 'miniprogram/getOpenid'; //发起请求
						this.$http.getOpenid(params).then(res => {
							//获取成功
							if (res.data.result_code == 1) {
								uni.setStorageSync("appletType", res.data.appletType);
								that.$u.vuex('vuex_appletType', res.data.appletType)
							}
						});
					}
				});
			},
			//点击模态框选项触发
			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'],
					sizeType: ['compressed'],
					//可选择原图或压缩后的图片
					success: res => {
						let tempFilePaths = res.tempFilePaths;
						that.uploadImage(tempFilePaths[0])
					}
				});
			},
			/**上传图片
			 * @param {Object} imgUrl 图片url
			 */
			uploadImage(imgUrl) {
				let that = this
				this.$http.uploadFile(imgUrl).then(res => {
					if (that.operaType == 1) {
						that.setData({
							passport_img_uri: res.data,
							show_passport_img_uri: imgUrl
						});
					} else if (that.operaType == 2) {
						that.setData({
							entry_img_uri: res.data,
							show_entry_img_uri: imgUrl
						});
					} else if (that.operaType == 3) {
						that.setData({
							image_uri: res.data,
							show_image_uri: imgUrl,
						});
					}
				})
			},
			//提交认证
			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['idCard'] = id_card; //业主身份证必填

				if (type == 0 && !id_card) {
					app.globalData.autoFailHint("住户类型是业主时，证件号码必填");
					return;
				}

				if (!this.$isEmpty(id_card)) {
					//如果身份证号不为空，就校验身份证号
					if (!this.$u.test.idCard(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['passportImgUri'] = that.passport_img_uri;
					params['entryImgUri'] = that.entry_img_uri;

					if (type == 0) {
						if (!passport_img_uri) {
							app.globalData.autoFailHint("请上传护照图片");
							return;
						}
						if (!entry_img_uri) {
							app.globalData.autoFailHint("请上传入境证明");
							return;
						}
					}
				}
				let image_uri = that.image_uri;
				if (this.$isEmpty(image_uri) && this.vuex_appletType == 1) {
					//微信小程序通过审核时，开放人脸模块
					this.$u.toast('请上传人脸')
					return
				}
				params['unitId'] = this.unitId
				params['buildingId'] = this.buildingId
				params['residentialId'] = this.residentialId
				params['faceUrl'] = that.image_uri.data.name;
				params['sex'] = that.sex;
				params['name'] = that.name;
				params['phone'] = app.globalData.member.phone
				params['roomId'] = that.room_id;
				params['createType'] = '0'; //申请来源0-小程序添加 1-后台添加  2-后台导入 3-app添加
				params['recordType'] = '0'; //申请的记录类型 0--认证类型 1--新增类型 2--编辑类型
				params['memberId'] = app.globalData.member.id; //会员id
				uni.showLoading({
					title:"提交中...",
					mask:"none"
				})
				that.$http.authentication(params).then(res => {
					uni.hideLoading()
					//提交成功
					if (res.data.success) {
						app.globalData.oneFailHint("提交成功", 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>