CommunityApp/pages/myFamily/editApplyFamily/editApplyFamily.vue

<template>
	<view class="container edit_wrap">
		<u-toast ref="uToast" />
		<form :style="'pointer-events:' + (waitAudit?'none':'auto')">
			<view class="form_group">
				<text class="red">*</text>
				<text class="sex">姓名：</text>
				<input disabled="true" placeholder-class="placeholder_style" type="text" :value="name"
					class="placeholder_style">
				</input>
			</view>
			<view class="form_group">
				<text class="red">*</text>
				<text class="sex">手机号：</text>
				<input name="data_name" @input="telFun" placeholder="请输入11位手机号码" placeholder-class="placeholder_style"
					type="text" :value="tel" class="placeholder_style">
				</input>
			</view>
			<view class="form_group">
				<text class="red">*</text>
				<text class="sex">房间号：</text>
				<input disabled="true" name="data_name" placeholder-class="placeholder_style" type="text"
					:value="room_name" class="placeholder_style">
				</input>
			</view>
			<view class="form_group">
				<text class="red">*</text>
				<text class="sex">住户类型：</text>
				<view class="ar_picker" style="background:#fff">
					<view class="ar_picker_wrap">
						<picker @change="typeChange" :value="type" :range="typeArray">
							<view>
								<text>{{typeArray[type]}}</text>
							</view>
						</picker>
					</view>
				</view>
			</view>
			<view class="form_group">
				<text class="red">*</text>
				<text class="sex">国籍：</text>
				<view class="ar_picker" style="background:#fff">
					<view class="ar_picker_wrap">
						<picker @change="nationalityChange" :value="nationality" :range="nationalityArray">
							<view>
								<text>{{nationalityArray[nationality]}}</text>
							</view>
						</picker>
					</view>
				</view>
			</view>
			<view class="form_group">
				<text class="sex">证件类型：</text>
				<input :value="nationalityName" disabled="true" placeholder-class="placeholder_style" type="text"
					class="placeholder_style">
				</input>
			</view>
			<view class="form_group">
				<text class="sex">证件号码：</text>
				<input @input="id_cardFun" name="data_name" placeholder="住户类型是业主时，必填"
					placeholder-class="placeholder_style" type="text" :value="id_card" class="placeholder_style">
				</input>
			</view>
			<view class="form_group">
				<text class="sex">性别：</text>
				<!--     <radio-group class="item-right radio-group" @change="sexChange">
        <label v-for="(item, index) in sexArray" :key="index" class="radio">
          <radio :class="item.checked?'red checked':''" color="#2e7eff" :value="item.sex" :checked="item.checked"></radio>{{item.name}}
        </label>
      </radio-group> -->
				<u-radio-group class="item-right radio-group" v-model="sex">
					<u-radio shape="circle" name="1">男</u-radio>
					<u-radio shape="circle" name="2">女</u-radio>
				</u-radio-group>
			</view>
			<view v-if="waitAudit" class="form_group" :style="'pointer-events:' + (waitAudit?'auto':'none')">
				<text class="sex">审核原因：</text>
				<input @input="checkOpinionFun" placeholder="请填写审核原因" placeholder-class="placeholder_style" type="text"
					:value="checkOpinion" class="placeholder_style"></input>
			</view>
			<view v-if="nationality==3">
				<view class="form_group mb0">
					<view>
						<text class="red">*</text>
						<text class="sex">护照图片：</text>
						<text class="tips">（基本身份信息页）</text>
					</view>
				</view>
				<view @click="operaType=1;chooseImage()"
					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">
				<view class="form_group mb0">
					<view>
						<text class="red">*</text>
						<text class="sex">入境证明：</text>
						<text class="tips">（入镜盖章页）</text>
					</view>
				</view>

				<view @click="operaType=2;chooseImage()"
					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>



			<view v-if="appletType==1">
				<view class="form_group mb0">
					<view>
						<text class="red">*</text>
						<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">
					<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>
		</form>
		<view @click="editApplyUser" class=" footer-fixed">
			<view class="cu-btn  flex  text-lg bg-red-btn" style="padding: 46rpx 0;">
				提交修改
			</view>
		</view>

		<view v-if="waitAudit" class=" footer-fixed">
			<view class="flex">
				<view @click="auditBtn" data-id="1" class="cu-btn  flex-sub  text-lg bg-blue"
					style="padding: 46rpx 0rpx;">
					审核通过
				</view>
				<view @click="auditBtn" data-id="2" class="cu-btn  flex-sub light text-lg bg-orange "
					style="padding: 46rpx 0;">
					审核不通过
				</view>
			</view>
		</view>
		<u-action-sheet @click="photoChecked" z-index="999999" :list="list" v-model="show"></u-action-sheet>
	</view>
</template>

<script>
	import uploadImg from '@/comps/uploadimg/uploadImg.vue'
	//获取app实例
	var app = getApp();

	export default {
		components: {
			uploadImg
		},
		data() {
			return {
				//操作类型,业主操作 0 其他
				operUserType: '',

				// 小程序的审核状态
				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,

				user_id: null,
				//修改的住户id
				name: null,
				//姓名
				tel: null,
				//电话号码
				room_name: null,
				//房间名字
				typeArray: ['业主', '家属', '租户'],
				type: 0,
				nationalityArray: ['中国大陆', '中国香港/澳门', '中国台湾', '海外'],
				nationality: 0,
				nationalityName: '身份证',
				id_card: null,
				//身份证
				sexArray: null,
				sex: null,
				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,
				//人脸回显
				face_code: 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
				}],
				waitAudit: false,
				//判断是否从审核跳过来
				checkOpinion: '' //审核原因
					,
				apply_user_id: "",
				own_room_list_index: ""
			};
		},

		components: {},
		props: {},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {

			this.operUserType = options.operUserType

			let apply_user_id = options.apply_user_id;
			let name = options.name;
			let tel = options.tel;
			let room_name = options.room_name;
			let type = options.type;
			this.user_id = options.user_id;
			let nationality = options.nationality;
			let nationalityName = '';

			if (nationality == 0) {
				nationalityName = '身份证';
			} else if (nationality == 1) {
				nationalityName = '港澳居民往来内地通行证';
			} else if (nationality == 2) {
				nationalityName = '台湾居民往来大陆通行证';
			} else if (nationality == 3) {
				nationalityName = '护照';
			}

			this.setData({
				nationality: nationality,
				nationalityName: nationalityName
			});
			let id_card = options.id_card;
			let sex = options.sex;
			let passport_img_uri = options.passport_img_uri;
			let entry_img_uri = options.entry_img_uri;
			let image_uri = options.image_uri; //选中性别

			let sexArray = [{
				name: '男',
				checked: false,
				sex: "1"
			}, {
				name: '女',
				checked: false,
				sex: "2"
			}];

			for (let i in sexArray) {
				if (sexArray[i].sex == sex) {
					sexArray[i].checked = true;
				}
			}

			if (options.waitAudit || options.waitAudit != undefined || options.waitAudit != null) {
				uni.setNavigationBarTitle({
					title: '住户审核'
				});
				this.setData({
					waitAudit: options.waitAudit
				});
			}

			this.setData({
				apply_user_id: apply_user_id,
				name: name,
				tel: tel,
				room_name: room_name,
				type: type,
				nationality: nationality,
				id_card: id_card,
				sex: sex,
				show_image_uri: image_uri,
				show_passport_img_uri: passport_img_uri,
				show_entry_img_uri: entry_img_uri,
				sexArray: sexArray
			});
		},
		onShow() {
			this.appletType = uni.getStorageSync("appletType")

			//获取当前页面的对象
			let currPage = this.$util.getPageCtx()
			if (!this.$isEmpty(currPage.data.image)) {
				this.uploadImage(currPage.data.image)
			}
		},
		methods: {
			//点击模态框选项触发
			photoChecked(index) {
				if (index == 0) {
					//图片上传
					this.chooseImage()
				} else if (index == 1) {
					//拍照上传
					uni.navigateTo({
						url: "../../my-camera/my-camera"
					})
				}
			},
			/**
			 * 点击上传图片事件
			 */
			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;
				}
				that.$http.uploadFile(imgUrl).then(res => {
					if (that.operaType == 1) {
						that.setData({
							passport_img_uri: res.data.name,
			 			show_passport_img_uri: imgUrl
						});
					} else if (that.operaType == 2) {
						that.setData({
							entry_img_uri: res.data.name,
							show_entry_img_uri: imgUrl
						});
					} else if (that.operaType == 3) {
			 		that.setData({
							image_uri: res.data.name,
							show_image_uri: imgUrl,
							face_code: res.data.imgMd5
						});
					}
				})

			},


			//获取input的标签值
			nameFun: function(e) {
				this.setData({
					name: e.detail.value
				});
			},
			telFun: function(e) {
				this.setData({
					tel: e.detail.value
				});
			},
			id_cardFun: function(e) {
				this.setData({
					id_card: e.detail.value
				});
			},
			checkOpinionFun: function(e) {
				this.setData({
					checkOpinion: e.detail.value
				});
			},
			// 住户类型
			typeChange: function(e) {
				this.setData({
					type: e.detail.value
				});
			},
			// 类别选择
			roomIdChange: function(e) {
				this.setData({
					own_room_list_index: e.detail.value
				});
			},
			//性别
			sexChange: function(enent) {
				this.setData({
					sex: enent.detail.value
				});
			},
			// 国籍
			nationalityChange: function(e) {
				let nationality = e.detail.value;
				let nationalityName = '';

				if (nationality == 0) {
					nationalityName = '身份证';
				} else if (nationality == 1) {
					nationalityName = '港澳居民往来内地通行证';
				} else if (nationality == 2) {
					nationalityName = '台湾居民往来大陆通行证';
				} else if (nationality == 3) {
					nationalityName = '护照';
				}

				this.setData({
					nationality: nationality,
					nationalityName: nationalityName
				});
			},
			//编辑
			editApplyUser: function() {
				let that = this;
				let params = {};
				let apply_user_id = that.apply_user_id;
				params['apply_user_id'] = apply_user_id;
				let tel = that.tel;

				if (!tel) {
					app.globalData.autoFailHint("请填写手机");
					return;
				} //手机号码正则校验
				if (!this.$u.test.mobile(tel)) {
					app.globalData.autoFailHint("请填写正确手机号");
					return;
				}

				params['tel'] = tel;
				let type = that.type;
				params['type'] = type;
				let id_card = that.id_card;
				params['id_card'] = id_card; //业主身份时，身份证必填

				if (type == 0 && !id_card) {
					app.globalData.autoFailHint("住户类型是业主时，身份证必填");
					return;
				} //0 中国大陆 1 中国香港/澳门 2 中国台湾 3 海外
				if (!this.$isEmpty(id_card)) {
					//如果身份证号不为空，就校验身份证号
					if (!this.$u.test.idCard(id_card)) {
						app.globalData.autoFailHint("请输入正确的身份证号");
						return;
					}
				}

				let nationality = that.nationality;
				params['nationality'] = nationality;
				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 && !that.show_passport_img_uri) {
							app.globalData.autoFailHint("请上传护照图片");
							return;
						}

						if (!entry_img_uri && !that.show_entry_img_uri) {
							app.globalData.autoFailHint("请上传入境证明");
							return;
						}
					}
				}

				let image_uri = that.image_uri;
				let face_code = that.face_code;

				if (image_uri && face_code) {
					params['image_uri'] = that.image_uri;
					params['face_code'] = that.face_code;
				} //性别


				params['sex'] = that.sex; //添加了人脸

				params['member_id'] = app.globalData.member.id; //申请来源0-小程序添加 1-后台添加  2-后台导入 3-app添加

				params['create_type'] = '0';
				params['user_id'] = that.user_id;
				params['oper_user_type'] = that.operUserType;
				params['operatorName'] = app.globalData.member.name;
				params['name'] = that.name;
				let operation = 'applyUser/editApplyUser';
				this.$http.editFamily(params)
					.then(res => {
						//添加成功
						if (res.data.result_code == 1) {
							app.globalData.oneFailHint(res.data.result_msg, function() {
								uni.navigateBack({
									delta: 1 // 返回上一级页面。

								});
							});
						} else {
							app.globalData.oneFailHint(res.data.result_msg);
						}
					});
			},

			auditBtn(e) {
				let that = this;
				let params = {};

				if (e.currentTarget.dataset.id == 2 && that.checkOpinion == '') {
					app.globalData.autoFailHint("请先填写审核意见");
					return;
				}

				params['id'] = that.apply_user_id;
				params['auditStatus'] = e.currentTarget.dataset.id;
				params['checkOpinion'] = that.checkOpinion;
				params['name'] = that.name;
				params['idCard'] = that.id_card;
				params['operatorId'] = that.vuex_member.id;
				params['operatorName'] = that.vuex_member.name;
				// let operation = 'applyUser/updateCheckState';
				that.$http.updateCheckState(params).then(res => {
					if (res.data.result_code == 1) {
						that.$refs.uToast.show({
							title: '审核成功',
							type: 'success',
							url: '/pages/myFamily/myFamily',
							position: 'top'
						})
					} else {
						app.globalData.autoFailHint(res.data.msg);
					}

				});
			}

		}
	};
</script>
<style lang="scss">
	page {
		overflow-y: scroll;
		background: #fff;
	}

	.edit_wrap {
		background-color: #FFFFFF;
		font-size: 30rpx;
		padding: 0rpx 20rpx 120rpx;
		color: #333;
	}

	.form_group {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin: 20rpx 20rpx;
		line-height: 80rpx;
		position: relative;
		font-size: 26rpx;
	}

	.form_group .red {
		color: red;
		position: absolute;
		left: 0;
	}

	.form_group text.sex {
		margin-left: 15px;
		text-align: left;
	}

	.form_group .radio-group {
		text-align: left;
		width: 500rpx;
		margin-top: 16rpx;
	}

	.form_group .radio-group .radio {
		margin-right: 60rpx;
	}

	.form_group input,
	.form_group picker {
		border: 1px solid #ddd;
		border-radius: 8rpx;
		height: 80rpx;
		line-height: 80rpx;
		padding: 0rpx 20rpx;
		color: #333;
		width: 460rpx;
	}

	.form_group button {
		font-size: 30rpx;
		height: 80rpx;
		line-height: 80rpx;
		border: 1px dotted #fff;
		background: white;
		padding: 0rpx;
		margin: 0rpx;
		outline: none;
		color: #000;
	}

	.placeholder_style {
		font-family: '微软雅黑';
		color: #adadad;
	}

	.save_btn {
		width: 600rpx;
		background: #d24a58;
		font-size: 32rpx;
		color: #fff;
		border-radius: 0rpx;
		margin: 40rpx 0rpx 10rpx;
	}


	radio {
		width: 38rpx;
	}

	radio .wx-radio-input {
		border-radius: 50%;
		width: 28rpx;
		height: 28rpx;
	}


	radio .wx-radio-input.wx-radio-input-checked::before {
		border-radius: 50%;
		width: 44rpx;
		height: 44rpx;
		line-height: 44rpx;
		text-align: center;
		font-size: 26rpx;
		/* 对勾大小 26rpx */
		color: #fff;
		/* 对勾颜色 */
		background: $base-btn-color;
		border-color: $base-btn-color;
	}

	.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 {
		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;
		text-align: center;
	}

	.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 .upload_bgImg {

		display: inline-block;
	}

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

	.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;
	}

	.bottom_btn {
		width: 100%;
		background: $base-btn-color;
		font-size: 32rpx;
		color: #fff;
		border-radius: 10rpx;
		margin: 20rpx 10rpx;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
	}
</style>