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['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';
	  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);
		  }
	  });
      // app.globalData.postRequest(params, operation, function (res) {
        
      // });
    },

    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['checkState'] = 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 样式 */

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>