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