CommunityApp/pages/myFamily/editFamily/editFamily.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 :disabled="true" :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="room_name" label-width="150">
						<u-input :disabled="true" :border="true"  placeholder="请输入房间号" v-model="room_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="住户类型是业主时,必填" :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" :default-value="defaultType" :list="typeArry" v-model="typeShow" @confirm="typeConfirm"></u-select>
	  <u-select z-index="999999" mode="single-column" :default-value="nationality" :list="nationalityArry" v-model="nationalityShow" @confirm="nationalityConfirm"></u-select>
	  <view  @click="editUser" 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,
			
			//修改的住户id
			  user_id: null,
			  //姓名
			  name: null,
			  //电话号码
			  tel: null,
			  //住户类型
			  defaultType:[0],
			  typeLabel:'业主',
			  typeShow: false,
			  type: 0,
			  typeArry: [
			  	{
			  		value: '0',
			  		label: '业主'
			  	},
			  	{
			  		value: '1',
			  		label: '成员'
			  	},
			  	{
			  		value: '2',
			  		label: '租户'
			  	}
			  ],
			  //国籍
			  defaultNationality:[0],
			  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,
			  //图片的md5
			  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
			  }],
			  room_name: ""
		};
	},
	onShow() {
		//获取当前页面的对象
		let currPage=this.$util.getPageCtx()
		if(!this.$isEmpty(currPage.data.image)){
			this.uploadImage(currPage.data.image)
		} 
	},
	onLoad: function (options) {
		let that=this
		
		let user_id = options.user_id;
		let name = options.name;
		let tel = options.tel;
		let room_name = options.room_name;
		let type = options.type;
		let nationality = options.nationality;
		
		if (!nationality) {
		  nationality = 0;
		}
		
		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 ||null;
		let entry_img_uri = options.entry_img_uri || null;
		let image_uri = options.image_uri || null; //选中性别
		this.setData({
		  user_id: 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,
		 
		}); 
		this.defaultType=[]
		this.defaultType.push(type)
		this.typeLabel=that.typeArry[type].label,
		this.defaultNationality=[]
		this.defaultNationality.push(nationality)
		this.nationalityLabel=that.nationalityArry[nationality].label
		
	},
	methods: {
		//点击模态框选项触发
		photoChecked(index){
			if (index==0) {
				//图片上传
				this.chooseImage()
			} else if(index==1){
				//拍照上传
				uni.navigateTo({
					url:"../../my-camera/my-camera"
				})
			}
		},
		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
			        });
			      }
			    });
			  }
			});
		},
		//添加家人
		editUser: function () {
		  let that = this;
		  let params = {};
		  let user_id = that.user_id;
		  params['user_id'] = user_id;
		  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 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 && !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';
		  console.log(params)
		  let operation = 'user/editUser';
		  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>