<view class="form-title">照片</view>
<text class="img-text">(最多上传5张照片)</text>
<view class="form-content imageList">
<view class="imageItem" wx:for="{{imageList}}" wx:key="index">
<image class="image" mode="aspectFill" bindtap="chooseImage" data-type="pictures" data-index="{{index}}" src="{{item}}" alt="" />
<icon class="icon-small delImage" type="cancel" size="20" catchtap="delImage" data-idnex="{{index}}"></icon>
</view>
<view class="imageItem addImage" bindtap="chooseImage" data-type="pictures" wx:if="{{imageList.length<5}}"></view>
</view>
//选择图片
chooseImage(e:any) {
let index=e.currentTarget.dataset.index;
let self = this
wx.chooseMedia({
count: 5-self.data.imageList.length,//图片选择个数
sizeType: ['original', 'compressed'], //原图 ,压缩图
sourceType: ['album', 'camera'], //从相处选择 ,使用相机
success(res) {
console.log("res___________",res);
res.tempFiles.forEach((file) => {
if(index === undefined){ //添加图片
self.setData({
// @ts-ignore
imageList: [...self.data.imageList, file.tempFilePath]
})
}else{ //替换当前索引下的图片
// @ts-ignore
self.data.imageList[index]=file.tempFilePath;
self.setData({
imageList:self.data.imageList
})
}
})
}
})
},
//删除图片
delImage(e:any) {
let {imageList} = this.data;
let index = e.currentTarget.dataset.index;
imageList.splice(index, 1);
this.setData({imageList});
},
//样式有点丑
.imageList {
display: grid;
grid-template-columns: repeat(3,1fr);
grid-gap: 20rpx;
}
/* 照片容器的样式 */
.imageList .imageItem {
background: #F7F9FD;
border-radius: 8rpx;
border: 5rpx dotted #D0D0D0;
height: 0;
padding-bottom:100%;/*高度设置为0,使用内间距100%,将匡高设置为一致*/
position: relative;
box-sizing: border-box;
}
/* 图片的样式 */
.imageList .imageItem .image {
display: block;
width: 100%;
height: 100%;
position: absolute;
object-fit: cover;
}
/* 删除按钮的样式 */
.imageList .imageItem .delImage {
position: absolute;
top: -8rpx;
right: -8rpx;
}
/* 可以使用背景图 */
.imageList .addImage::before {
display: block;
content: "+";
color: #cccccc;
font-size: 80rpx;
text-align: center;
line-height: 180rpx;
}
.img-text{
color: #a1a1a1;
font-size: 32rpx;
}