CommunityApp/pages/myFamily/add/add.vue

<template>
	<view class="" style="background-color: #FFFFFF;">
		<view class="form" style="padding-top: 20rpx;">
				<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="tel" label-width="150">
						<u-input :border="true" maxlength="11"  placeholder="请输入11位手机号码" v-model="tel" type="number"></u-input>
					</u-form-item>
					<u-form-item :required="true"  label="房间号:" prop="roomLabel" label-width="150">
						<u-input :border="true"  type="select" :select-open="roomShow" v-model="roomLabel" placeholder="请选择房间号" @click="roomShow = true"></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="住户类型是业主时,必填" :trim="true"  maxlength="18" v-model="id_card" type="number"></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="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" 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="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 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=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>
	  <u-action-sheet @click="photoChecked"  z-index="999999" :list="list" v-model="show"></u-action-sheet>
	  <u-select z-index="999999" mode="single-column" value-name="id" label-name="name" :list="own_room_list" v-model="roomShow" @confirm="roomConfirm"></u-select>
	  <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="addApplyUser"  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 {
			//默认点击弹出拍照模态框的是人面上传操作，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,
			
			roomLabel:'',
			roomShow:false,
			room_id: 0,
			own_room_list: null,
			//房间列表下标
			own_room_list_index: 0,
			
			//姓名
			name: null,
			//电话号码
			tel: null,
			
			//住户类型
			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: '海外'
				}
			],
			//身份证
			id_card: null,
			sex: "1",
			
			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,
			//图片的md5
			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) {
		var that = this;
		that.setData({
		  own_room_list: app.globalData.own_room_list
		});
	},
	onShow() {
		//获取当前页面的对象
		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;
			}
			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
			        });
			      }
			    });
			  }
			});
		},
		roomConfirm(e) {
			this.room_id = 0;
			e.map((val, index) => {
				this.room_id=val.value
				this.roomLabel=val.label
			})
		},
		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 = '护照';
				}
			})
		},
		//添加家人
		addApplyUser: function () {
		  let that = this;
		  let params = {};
		  let name = that.name;
		
		  if (!name) {
		    app.globalData.autoFailHint("请填写名字");
		    return;
		  }
		
		  params['name'] = name;
		  let tel = that.tel;
		
		  if (!tel) {
		    app.globalData.autoFailHint("请填写手机");
		    return;
		  } //手机号码正则校验
		  var telReg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
		
		  if (!telReg.test(tel)) {
		    app.globalData.autoFailHint("请填写正确手机号");
		    return;
		  }
		  params['tel'] = tel;
		  let room_id = that.own_room_list[that.own_room_list_index].id;
		
		  if (!room_id) {
		    app.globalData.autoFailHint("请选择房间号");
		    return;
		  }
		  params['room_id'] = room_id;
		  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 海外
		
		
		  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['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;
		      }
		    }
		  }
		
		  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['member_id'] = app.globalData.member.id; //申请来源0-小程序添加 1-后台添加  2-后台导入 3-app添加
		
		  params['create_type'] = '0'; ///申请的记录类型 0--认证类型 1--新增类型 2--编辑类型
		
		  params['record_type'] = '1';
		  let operation = 'member/authentication';
		  console.log(params)
		  app.globalData.postRequest(params, operation, function (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);
		    }
		  });
		}
		
	}
};
</script>

<style scoped lang="scss">
.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>