1.wxml
<view class="ticket-shopping" bindtap="changeIsShow">
<view class="ticket-info">
<view class="ticket-titleInfo">采购小票</view>
<text>·请上传购物票据或截图,每张照片仅限一张票据,每次上传不超过9张\n ·上传的小票会人工审核,请保证票据和填写的内容一致</text>
<view class="ticket-img">
<view wx:for="{{ticketImgList}}" wx:key="index" >
<view class="ticket-boxUploadImg">
<image class="ticket-imgCover" src="{{item.tempFilePath}}" data-index="{{index}}"bindtap="previewBigImage"></image>
<!-- <image class="ticket-imgClose" src="{{base_img_url}}loading/icon_kv.png"></image> -->
<!-- <view data-index="{{index}}" class="ticket-imgClose" bindtap="delImg">X</view> -->
</view>
</view>
<view class="ticket-imgbox" bindtap="selectImg" wx:if="{{isSelect}}">
<view></view>
<view></view>
</view>
</view>
</view>
<view class="ticket-info">
<view class="ticket-titleInfo">物流单据</view>
<text>·请上传物流单据照片或截图,每张照片仅限一张票据,每次上传不超过9张</text>
</view>
<view class="ticket-img">
<view wx:for="{{ticketImg}}" wx:key="index" >
<view class="ticket-boxUploadImg">
<image class="ticket-imgCover" src="{{item.tempFilePath}}" data-index="{{index}}"bindtap="previewImage"></image>
<!-- <image class="ticket-imgClose" src="{{base_img_url}}loading/icon_kv.png"></image> -->
<!-- <view data-index="{{index}}" class="ticket-imgClose" bindtap="delImgs">X</view> -->
</view>
</view>
<view class="ticket-imgbox" bindtap="select" wx:if="{{isSelect}}">
<view></view>
<view></view>
</view>
</view>
</view>
2.wxss
.ticket-shopping {
width: 100%;
margin-top: 30rpx;
}
.ticket-info view {
font-size: 24rpx;
color: #404040;
font-family: 'FZZhunYuan-director';
}
.ticket-info text {
font-size: 20rpx;
color: #878787;
display: flex;
flex-direction: column;
margin-top: 12rpx;
box-sizing: border-box;
font-family: 'FZZhunYuan-director';
}
.ticket-img {
display: flex;
margin: 16rpx 0 40rpx 0;
}
.ticket-boxUploadImg{
margin-right: 16rpx;
position: relative;
}
.ticket-img .ticket-imgCover {
width: 112rpx;
height: 112rpx;
background: #FEFEFE;
border-radius: 10rpx;
border: 2px solid #E3E6E5;
}
.ticket-imgClose {
position: absolute;
top: -8rpx;
right: -8rpx;
width: 24rpx;
height: 24rpx;
line-height: 24rpx;
text-align: center;
border-radius: 50%;
opacity: 0.5;
background-color: #ccc;
}
.ticket-imgbox {
width: 112rpx;
height: 112rpx;
background: #FEFEFE;
border-radius: 10rpx;
border: 2rpx dashed #E3E6E5;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.ticket-imgbox view {
width: 70rpx;
height: 4rpx;
background: #E3E6E5;
margin: 0 auto;
}
.ticket-imgbox view:last-child {
transform: rotate(90deg);
}
.ticket-userName {
margin-top: 16rpx;
font-size: 20rpx;
height: 24rpx;
line-height: 24rpx;
}
.ticket-userName view {
color: #404040;
margin-bottom: 12rpx;
}
.ticket-userName text {
color: #878787;
}
.ticket-userName input {
width: 100%;
height: 64rpx;
border-radius: 8rpx;
border: 2rpx solid #E3E6E5;
margin-bottom: 16rpx;
padding: 0 16rpx;
}
.ticket-image {
width: 112rpx;
height: 112rpx;
background: #FEFEFE;
border-radius: 10rpx;
border: 2rpx solid #E3E6E5;
display: flex;
align-items: center;
margin-top:12rpx;
}
.ticket-image image {
width: 112rpx;
height: 80rpx;
}
.ticket-submit {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
/* height: 116rpx; */
background: #FFFFFF;
box-shadow: 0rpx -2rpx 8rpx 0rpx rgba(0, 0, 0, 0.1);
display: flex;
justify-content: space-between;
padding: 18rpx 32rpx;
}
.ticket-operate {
width: 50%;
display: flex;
justify-content: space-around;
}
.ticket-operator {
display: flex ;
flex-direction: column;
align-items: center;
width: 50%;
}
.ticket-operator:nth-child(1) {
border-right: 2rpx solid #E3E6E5;
}
.ticket-operator view {
font-size: 20rpx;
color: #878787;
margin-top: 8rpx;
font-family: 'FZZhunYuan-director';
}
.ticket-operator image {
width: 48rpx;
height: 48rpx;
}
.ticket-btn {
width: 270rpx;
height: 80rpx;
line-height: 84rpx;
background: #672074;
border-radius: 8rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 28rpx;
color: #FFFFFF;
font-family: 'FZZhunYuan-director';
}
3.js
data:{
ticketImg:[],
}
//物流单据选择照片
select(){
let that = this
// if(this.data.ticketImg.length>=3){
// wx.showToast({
// icon:'none',
// title: '最多上传3张图片',
// })
// return
// }
wx.chooseMedia({
count: 9,
mediaType: ['image','video'],
sourceType: ['album', 'camera'],
maxDuration: 30,
camera: 'back',
success(res) {
let ticketImg = that.data.ticketImg.concat(res.tempFiles)
if(ticketImg.length>9){
wx.showToast({
icon:'none',
title: '超出上传图片最大限制',
})
ticketImg = ticketImg.splice(0,9)
}
that.setData({
ticketImg : ticketImg,
isSelect: ticketImg.length >= 9 ? false : true
})
console.log(that.data.ticketImg,'333333');
console.log(res.tempFiles)
}
})
},
//移除照片
delImgs(e){
console.log(e.currentTarget.dataset.index);
let index = e.currentTarget.dataset.index
this.data.ticketImg.splice(index,1)
this.setData({
ticketImg: this.data.ticketImg,
isSelect: this.data.ticketImg.length > 9 ? false : true
})
},
// 预览图片
previewImage(e) {
let imgs = [];
this.data.ticketImg.forEach(item=>{
imgs.push(item.tempFilePath)
})
let {index} = e.currentTarget.dataset;
wx.previewImage({
//当前显示图片
current: imgs[index],
//所有图片
urls: imgs
})
},