弹框上传图片

	 <view class='title red'>
    提示:可绑定非车主本人银行卡
  </view>
  <!-- 车主身份证 -->
  <view class='Xbox'>
    <view class='xian'></view>
    <view class="note-title">车主身份证</view>
  </view>
  <view class='id-card-example'>
    <view class='upload-item' bindtap='tan' data-type="idCardFace">
      <block wx:if="{{ idCardFace=='' }}">
        <image src='/image/touxiang.png' mode="widthFix" />
      </block>
      <block wx:else>
        <image src='{{idCardFace}}' mode="scaleToFill" />
      </block>
      <text class='ziliao-txt'>点击上传带头像一面</text>
    </view>
    <view class='upload-item' bindtap='tan' data-type="idCardBack">

      <block wx:if="{{ idCardBack=='' }}">
        <image src='/image/guohui.png' mode="widthFix" />
      </block>
      <block wx:else>
        <image src='{{idCardBack}}' mode="scaleToFill" />
      </block>
      <text class='ziliao-txt'>点击上传带国徽一面</text>
    </view>
  </view>
  <!-- 用到了一个自定义弹框组件 -->
  <middle_tan id="easyModal" bindgetSon="getSon">	
  <view class='yuanjiao'>
    <image src='{{cc}}' mode='widthFix' />	//弹框出来的图片 根据点击的正反面弹出正确图片示例
    
    <view class='upload' bindtap='chooseImage'>确定</view>
    <view class='w60'>
      <image bindtap='hid' src='http://etc-app.oss-cn-beijing.aliyuncs.com/image_201907261527404661.png' mode='widthFix' />
    </view>
  </view>
</middle_tan>

/* upload */
.id-card-example {
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap;
  padding-left: 48rpx; 
padding-right: 48rpx; 
box-sizing: border-box;
}
.upload-item {
  width: 307rpx;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.upload-item image {
  width:100%; 
  margin-bottom: 24rpx;
  height:200rpx;
  display: block;
}
.ziliao-txt {
  font-size: 24rpx;
	font-weight: normal;
	font-stretch: normal;
	/* letter-spacing: 1rpx; */
	color: #000000;
	opacity: 0.4;
}
.mt {
  margin-top: 36rpx; 
}

image {
  width: 100%;
  display: block;

}
.w60 {
  width:60rpx;
  height: 60rpx;
  position: absolute;
  top: -77rpx;
  right: 0;
}
/* ?/？ */
.Xbox {
  overflow: hidden;
  margin-top: 36rpx;
  margin-bottom: 35rpx;
}
.xian {
  width: 4rpx;
  height: 34rpx;
  background-color:#15bf5d; 
  margin-left: 24rpx;
  margin-right: 32rpx;
  float: left;
  margin-top:11rpx;

}
.note-title {
  display: inline-block;
  font-size: 36rpx;
	color: #000000;
	opacity: 0.7;
  font-family: PingFang-SC-Bold;
}
/* tankuang */
.yuanjiao {
  width: 654rpx;
	height: 864rpx;
	background-color: #ffffff;
	box-shadow: 0px 5rpx 16rpx 0px 
		rgba(197, 197, 197, 0.6);
	border-radius: 20rpx;
  padding-top: 38rpx;
  position: relative;
}
.yuanjiao> image {
    width: 654rpx;
    height: 603rpx;
    display: block;

}
.upload {
  width: 606rpx;
	height: 90rpx;
	background-image: linear-gradient(90deg, 
		#15bf69 0%, 
		#15bf5d 100%), 
	linear-gradient(
		#8d30ff, 
		#8d30ff);
	background-blend-mode: normal, 
		normal;
	box-shadow: 0px 5rpx 10rpx 0px 
		rgba(21, 191, 93, 0.6);
	border-radius: 45rpx;
  margin: 0 auto;
  	font-size: 42rpx;
	font-weight: normal;
	font-stretch: normal;
	line-height: 90rpx;
	letter-spacing: 2rpx;
	color: #ffffff;
  text-align: center;
  margin-top: 34rpx;
}

let tan;			//最外部声明
	data:{
		 idCardFace: '',
	   	 idCardFaceId: '',
	  	 idCardBack: '',
	     idCardBackId: '',
   		 cc: '',
	},
	onLoad: function(query) {
		tan = this.selectComponent("#easyModal");
	},
	getSon(e){
		console.log('子组件传给父组件值'+e)
	}
	hid() {
    tan.hide()
  },
   tan(e) {
    let type = e.currentTarget.dataset.type
    switch (type) {
      case 'idCardFace':
        this.setData({
          cc: 'http://etc-app.oss-cn-beijing.aliyuncs.com/image_201905201752398374.png'
        })
        tan.show()
        break;
      case 'idCardBack':
        this.setData({
          cc: 'http://etc-app.oss-cn-beijing.aliyuncs.com/image_201907261524206047.jpg'
        })
        tan.show()
        break;
    },
     chooseImage() {
    let that = this
    wx.chooseImage({
      success(res) {
        const tempFilePaths = res.tempFilePaths
        tan.hide()
        wx.showLoading({
          title: '上传中',
          mask: true
        })
        wx.uploadFile({
          url: getApp().globalData.serverHost + "api/upload",
          filePath: tempFilePaths[0],
          name: 'image',
          success(res) {
            wx.hideLoading()
            console.log(res)
            const data = JSON.parse(res.data)
            console.log(data)
            //do something
            switch (that.data.cc) {
              case 'http://etc-app.oss-cn-beijing.aliyuncs.com/image_201905201752398374.png':
                that.setData({
                  idCardFace: data.data.url,
                  idCardFaceId: data.data.id
                })
                break;
              case 'http://etc-app.oss-cn-beijing.aliyuncs.com/image_201907261524206047.jpg':
                that.setData({
                  idCardBack: data.data.url,
                  idCardBackId: data.data.id
                })
                break;
            }
          },
          fail(res1) {
            wx.hideLoading()
            wx.showModal({
              title: "提示",
              content: '上传失败：' + res1.errorMessage
            });
          }
        })
      }
    })
  },
  },

	自定义组件middle_tan

	<view bindtap='close' class='container' hidden='{{isShow}}'>
    <slot data-id="slo">
    </slot>
</view>

	.container {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 11;
    /* background-color:rgba(116,116,116,.7); */
    background-color:rgba(0,0,0,.6);
    display: flex;
    justify-content: center;
    align-items: center;
}

	// component/middle_tan/middle.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    isShow: true
  },

  /**
   * 组件的方法列表
   */
  methods: {
    show() {
      this.setData({
        isShow: false
      })
    },
    hide() {
      this.setData({
        isShow: true
      })
    },
    close(e){
      console.log(e)
      if(e.target.dataset.id !='slo') {
        this.setData({
          isShow:true
        })
        this.triggerEvent('getSon', false)
      }
    }
  }
})