CommunityApp/pages/myFamily/addFamily/addFamily.vue

<template>
<view class="container edit_wrap">
  <form>
    <view class="form_group">
      <text class="red">*</text>
      <text class="sex">姓名：</text>
      <input name="data_name" @input="nameFun" placeholder="请与身份证保持一致" placeholder-class="placeholder_style" type="text" value 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 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="bindRoomIdChange" :value="own_room_list_index" :range="own_room_list" :range-key="'name'">
            <view>
              <text>{{own_room_list[own_room_list_index].name}}</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="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 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 :value="item.sex" :checked="item.checked"></radio>{{item.name}}
        </label>
      </radio-group>
    </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 class>
        <view class="upload_bg img_content">
          <image :src="show_passport_img_uri==null?'http://139.9.103.171:1888/img/image/face_bg.png':show_passport_img_uri" class="upload_bgImg" mode="aspectFit"></image>
          <view v-if="show_passport_img_uri==null" @tap="chooseImage" data-index="1">
            <view class="upload_btn">
              <image src="http://139.9.103.171:1888/img/image/upload_btn.png"></image>
            </view>
            <view class="upload_text">
              <text>点击上传照片</text>
            </view>
          </view>
          <view v-if="show_passport_img_uri!=null" @tap="chooseImage" class="reUpload" data-index="1">
            <image src="http://139.9.103.171:1888/img/image/picture.png" class="img_icon"></image>
            <text>重新上传</text>
          </view>
        </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 class>
        <view class="upload_bg img_content">
          <image :src="show_entry_img_uri==null?'../../../image/face_bg.png':show_entry_img_uri" class="upload_bgImg" mode="aspectFit"></image>
          <view v-if="show_entry_img_uri==null" @tap="chooseImage" data-index="2">
            <view class="upload_btn">
              <image src="http://139.9.103.171:1888/img/image/upload_btn.png"></image>
            </view>
            <view class="upload_text">
              <text>点击上传照片</text>
            </view>
          </view>
          <view v-if="show_entry_img_uri!=null" @tap="chooseImage" class="reUpload" data-index="2">
            <image src="http://139.9.103.171:1888/img/image/picture.png" class="img_icon"></image>
            <text>重新上传</text>
          </view>
        </view>
      </view>
    </view>
	<view class="" 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 class >
		  <view class="upload_bg img_content">
		    <image :src="show_image_uri==null?'../../../image/face_bg.png':show_image_uri" class="upload_bgImg" mode="aspectFit"></image>
		    <view v-if="show_image_uri==null" @tap="chooseImage" data-index="3">
		      <view class="upload_btn">
		        <image src="http://139.9.103.171:1888/img/image/upload_btn.png"></image>
		      </view>
		      <view class="upload_text">
		        <text>点击上传人脸</text>
		      </view>
		    </view>
		    <view v-if="show_image_uri!=null" @tap="chooseImage" class="reUpload" data-index="3">
		      <image src="http://139.9.103.171:1888/img/image/picture.png" class="img_icon"></image>
		      <text>重新上传</text>
		    </view>
		  </view>
		  <view class="category">
		    <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>
	</view>
    

  </form>

  <view class="submit_btn">
    <button class="ar_btn" @tap="addApplyUser">提交添加</button>
  </view>

</view>
</template>

<script>
//获取app实例
var app = getApp();

export default {
  data() {
    return {
	  appletType:0,
	  
      name: null,
      //姓名
      tel: null,
      //电话号码
      own_room_list: null,
      //房间列表下标
      own_room_list_index: 0,
      typeArray: ['业主', '家属', '租户'],
      type: 0,
      nationalityArray: ['中国大陆', '中国香港/澳门', '中国台湾', '海外'],
      nationality: 0,
      nationalityName: '身份证',
      id_card: null,
      //身份证
      sexArray: [{
        name: '男',
        checked: true,
        sex: "1"
      }, {
        name: '女',
        checked: false,
        sex: "2"
      }],
      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
      }]
    };
  },

  components: {},
  props: {},
  
  onShow() {
  	this.appletType=uni.getStorageSync("appletType")
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    that.setData({
      own_room_list: app.globalData.own_room_list
    });
  },
  methods: {
    //获取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
      });
    },
    // 住户类型
    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
      });
    },
    //点击上传图片事件
    chooseImage: function (event) {
      var that = this;
      let index = event.currentTarget.dataset.index;
      let is_need_md5 = false;

      if (index == 3) {
        is_need_md5 = true;
      }

      uni.chooseImage({
        count: 1,
        //最多可以选择的图片张数，默认9
        sourceType: ['album', 'camera'],
        sizeType: ['compressed'],
        //可选择原图或压缩后的图片
        success: res => {
          let tempFilePaths = res.tempFilePaths;
          uni.getFileSystemManager().readFile({
            filePath: res.tempFilePaths[0],
            //选择图片返回的相对路径
            encoding: 'base64',
            //编码格式
            success: res => {
              //成功的回调
              app.globalData.uploadBase64('data:image/jpeg;base64,' + res.data, is_need_md5, function (result) {
                if (index == 1) {
                  that.setData({
                    passport_img_uri: result.data.uri,
                    show_passport_img_uri: tempFilePaths[0]
                  });
                } else if (index == 2) {
                  that.setData({
                    entry_img_uri: result.data.uri,
                    show_entry_img_uri: tempFilePaths[0]
                  });
                } else if (index == 3) {
                  that.setData({
                    image_uri: result.data.uri,
                    show_image_uri: tempFilePaths[0],
                    face_code: result.data.md5Hex
                  });
                }
              });
            }
          });
        }
      });
    },
    //添加家人
    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;
      } //手机号码正则校验

      if (!this.$u.test.mobile(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; //业主身份时，身份证必填

	  console.log(params)
	  return
      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';
      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 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;
}

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