小程序身份證上傳

效果自認很美，js邏輯不難，主要是各種狀態的控制，重點在於頁面代碼。

下面是身份證正面的代碼，反面代碼類似。

wxml代碼：

<view class="row">
    <view class="delete {{zhengShow?'show':'hidden'}}" bindtap="deleteZhengTap">
    <image src="../../imgs/delete.png" class="icon"></image>
    </view>
    <view class="zhong" bindtap="zhengTap">
     <image src="../../imgs/kuang.png" mode="widthFix" class="im1"></image>
     <image src="{{zhengimg}}" class="im2"></image>
    </view>
    <view class="add {{zhengShow?'show':'hidden'}}" bindtap="addZhengTap">
    <image src="../../imgs/add.png" class="icon"></image>
    </view>
  </view>

外層用relative，內層用absolute，從而實現圖片在框裏面。

wxss代碼：

.row{
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 40rpx;
}
.delete{
  flex: 1;
  text-align: center;
}
.show{
  visibility: visible;
}
.hidden{
  visibility: hidden;
}
.icon{
  width: 35rpx;
  height: 35rpx;
}
.zhong{
  flex: 5;
  position: relative;
}
.im1{
  position: absolute;
  width: 96%;
  margin-left: 2%;
}
.im2{
  width: 84%;
  height: 266rpx;
  margin-left: 8%;
  margin-top: 4%;
}
.add{
  flex: 1;
  text-align: center;
}

js代碼：

  data: {
    zhengimg: "../../imgs/zheng.png",
    zhengShow: false
  },
  deleteZhengTap() {
    this.setData({
      zhengimg: "../../imgs/zheng.png",
      zhengShow: false
    })
  },
  zhengTap() {
    if ("../../imgs/zheng.png" == this.data.zhengimg) {
      this.chooseImgZheng();
    }
  },
  addZhengTap() {
    this.chooseImgZheng();
  },
  chooseImgZheng() {
    let that = this;
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success(res) {
        // tempFilePath可以作爲img標籤的src屬性顯示圖片
        const tempFilePaths = res.tempFilePaths[0];
        that.setData({
          zhengimg: tempFilePaths,
          zhengShow: true
        })
      }
    })
  }