小程序身份证上传

最新推荐文章于 2024-10-12 18:18:13 发布

猴子学编程

最新推荐文章于 2024-10-12 18:18:13 发布

阅读量3.7k

点赞数 1

分类专栏：小程序文章标签：身份证上传小程序身份证

本文链接：https://blog.csdn.net/houjunkang363/article/details/105947347

版权

小程序专栏收录该内容

13 篇文章 3 订阅

订阅专栏

效果自认很美，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
        })
      }
    })
  }