CommunityApp/pages/uploadFace/uploadFace.vue

<template>
<view>
	<view class="" v-if="appletType==1">
		<view>
		<!--  <picker class="cybm_pic_1" :value="index" :range="list" :range-key="'roomName'" @change="roomChange">
		    <view class="picker form_group">
		      <view class="my-item">
		        <text class="info">我的房屋</text>
		        <text class="status">{{list[index].roomName}}</text>
		        <text class="iconfont icon-arrow-left arrow"></text>
		      </view>
		    </view>
		  </picker> -->
		  <view class="cu-list menu" @click="locationShow=true">
		  	<view class="cu-item" >
		  		<view class="content">
		  			<text >我的房屋</text>
		  		</view>
		  		<view class="action">
		  			<text >{{selectLabel?selectLabel:list[0].roomName}}</text>
		  			<text class="cuIcon-right padding-left-10"></text>
		  		</view>
		  	</view>
		  </view>
		</view>
		
		<view class="upload_container">
		  <view>
			  <view @click="show=true"  style="margin: 30rpx 0 10rpx 0;display: flex;align-items: center;flex-direction: column;">
			    <upload-img
			  	  :width="$isEmpty(face_url)?300:560"
			  	  :height="$isEmpty(face_url)?300:420"
			  	  :currentImage="face_url"
				  bgsrc="http://139.9.103.171:1888/img/image/camera1.png"
			  	  >
			    </upload-img>
			    <view class="" style="color: #59a5f0;">
			  	 <text class="cuIcon-camera padding-right-sm" style="font-size: 30rpx;"></text>
			  	 <text v-if="$isEmpty(face_url)">点击上传人脸</text>
			  	 <text style="margin-top: 40rpx;display: inline-block;" v-else>点击重新上传</text>
			    </view>
			  </view>
		  </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>
		<canvas canvas-id="photo_canvas" :style="'width:' + canvasWidth + 'px;height:' + canvasHeight + 'px;position: absolute;left:-300px;top:-300px;'"></canvas>
		<view @tap="uploadFace" class=" footer-fixed" >
			<view class="cu-btn  flex  text-lg bg-red-btn" style="padding: 46rpx 0;">
				提交人脸信息
			</view>
		</view>
		<u-select z-index="9999999"  mode="single-column" value-name="id"  label-name="roomName" v-model="locationShow" :list="list" @confirm="roomChange"></u-select>
		<u-action-sheet @click="photoChecked"  z-index="999999" :list="actionList" v-model="show"></u-action-sheet>
	</view>
	
	<view v-else >
		
	</view>
</view>
</template>

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

export default {
  components:{
	  uploadImg
  },
  data() {
    return {
	  appletType:0,
		
	  //显示模态框
	  locationShow:false,
	  selectLabel:'',
		
	  //上传人面
	  actionList: [{
	  	text: '相册上传',
	  }, {
	  	text: '拍照上传'
	  }],
	  show: false,
		
      face_url: null,
      //人脸图片地址
      face_image: null,
      //人脸图片的base64字符串
      list: null,
      //住户信息列表
      index: 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
      }]

    };
  },
  onShow() {
	 if (this.appletType==0) {
	 	uni.setNavigationBarTitle({
	 		title:"功能待开发"
	 	})
	 }else{
	 	uni.setNavigationBarTitle({
	 		title:"人脸录入"
	 	})
	 }
  	//获取当前页面的对象
  	let currPage=this.$util.getPageCtx()
  	if(!this.$isEmpty(currPage.data.image)){
  		this.handelImg(currPage.data.image)
  	} 
  },
  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
	this.appletType=uni.getStorageSync('appletType')
	
    this.getFaceImg();
  },

  methods: {
	  //点击模态框选项触发
	  photoChecked(index){
		if (index==0) {
			//图片上传
			this.chooseImage()
		} else if(index==1){
			//拍照上传
			uni.navigateTo({
				url:"../my-camera/my-camera"
			})
		}
	  },
    //选择房间
    roomChange: function (e) {
	   // 选中的房屋 id
	   let id=e[0].value
	   //选中的房屋名字
	   this.selectLabel=e[0].label
	   //选中的房屋列表的下标
	   let index= this.list.findIndex(value => value.id===id)
      let list = this.list;
      // let index = e.detail.value;
      let url = list[index].imageUri;
      console.log(url);
      this.setData({
        index: index,
        face_url: list[index].imageUri
      });
    },
    //获取住户人脸
    getFaceImg: function () {
      let that = this;
      let params = {};
      params['member_id'] = app.globalData.member.id;
      let operation = 'user/getMyUserByMemberId';
      app.globalData.postRequest(params, operation, function (res) {
        console.info("查询结果:" + res.data.result_msg); //获取成功

        if (res.data.result_code == 1) {
          // let list = res.data.list;
          console.log(res.data.list);
          let list = [];
          if (uni.getStorageSync('plotName')) {
            res.data.list.map(item => {
              if (item.residentialName == uni.getStorageSync('plotName')) {
                list.push(item);
              }
            });
          } else {
            list = res.data.list;
          }


          that.setData({
            face_url: list[0].imageUri,
            list: list,
            index: 0
          });
        }
      });
    },
    //点击上传图片事件
    chooseImage: function () {
      var that = this;
      uni.chooseImage({
        count: 1,
        //最多可以选择的图片张数，默认9
        sourceType: ['album', 'camera'],
        sizeType: ['compressed'],
        //可选择原图或压缩后的图片
        success: res => {
          that.handelImg(res.tempFilePaths[0])
        }
      });
    },
	//处理照片，拍照上传和相册上传的共同处理方法
	handelImg(imgUrl){
		var that = this;
		that.setData({
		  //图片回显
		  face_url: imgUrl
		});
		uni.getFileSystemManager().readFile({
		  filePath: imgUrl,
		  //选择图片返回的相对路径
		  encoding: 'base64',
		  //编码格式
		  success: res => {
		    //成功的回调
		    console.log(res);
		    that.setData({
		      //图片的base64字符串
		      face_image: 'data:image/jpeg;base64,' + res.data
		    });
		  }
		});
	},
	
    //上传用户faceImg
    uploadFace: function () {
      let that = this;
      let params = {};
      let index = that.index; //let index = 0;

      let user = that.list[index];
      let user_id = user.id;
      params['user_id'] = user_id;
      let tel = user.tel;
      params['tel'] = tel;
      let type = user.type;
      params['type'] = type;
      let id_card = user.idCard;
      params['id_card'] = id_card;
      let sex = user.sex; //性别

      params['sex'] = sex;
      let nationality = user.nationality;
      params['nationality'] = nationality;
      let face_image = this.face_image;

      if (face_image) {
        params['face_image_base64'] = that.face_image;
      }else{
		  if(!this.$isEmpty(this.face_url)){
			  app.globalData.autoFailHint("请重新上传人脸图片");
			  return;
		  }else{
			  app.globalData.autoFailHint("请上传人脸图片");
			  return;
		  }
	  }
      params['member_id'] = app.globalData.member.id; //申请来源0-小程序添加 1-后台添加  2-后台导入 3-app添加

      params['create_type'] = '0';
      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.redirectTo({
              url: '/pages/uploadFace/uploadFace'
            });
          });
        } else {
          app.globalData.oneFailHint(res.data.result_msg);
        }
      });
    }
  }
};
</script>
<style lang="scss">
/* pages/ uploadFace/uploadFace.wxss */
page{
   background: #fff;
}
.upload_container {
  text-align: center;
  color: #333;
  background: #fff;
  border-radius: 10rpx;
}

.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 {
display: flex;
justify-content: flex-end;
align-items: center;
  height: 60rpx;
  line-height: 60rpx;
  color: #333;
  padding-right: 40rpx;
}

.img_content .img_icon {
  width: 40rpx;
  height: 40rpx;
  vertical-align: text-top;
  margin-right: 6rpx;
  border-radius: 20rpx;
}
.tips{
  height: 80rpx;
  line-height: 80rpx;
  padding-left:30rpx;
  background-color: #f5f5f5;
  color:#777;
}
.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;
}
.form_group {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 20rpx 20rpx;
  line-height: 100rpx;
  position: relative;
  font-size: 26rpx;
  border-bottom: 2rpx solid #ddd;
  
}
.my-item .iconfont.arrow {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(0, -50%);
  font-size: 32rpx;
  vertical-align: top;
 
}
.my-item {
  width: 100%;
  position: relative;
  background: #fff;
  font-size: 28rpx;
  box-sizing: border-box;
}

.my-item .status {
  position: absolute;
  right: 35rpx;
  top: 50%;
  transform: translate(0, -50%);
  font-size: 28rpx;
}
</style>