|
|
|
@ -26,9 +26,31 @@ |
|
|
|
<view style="height: 100rpx;"></view> |
|
|
|
<!-- 操作按钮 --> |
|
|
|
<view class="fixed-bottom"> |
|
|
|
<button class="btn btn1">上传凭证</button> |
|
|
|
<button class="btn btn1" @click="is_show_voucher = true">上传凭证</button> |
|
|
|
<button class="btn btn2">确认发货</button> |
|
|
|
</view> |
|
|
|
<!-- 弹出层-上传凭证 --> |
|
|
|
<u-popup v-model="is_show_voucher" mode="center" border-radius="20"> |
|
|
|
<view class="popup-box"> |
|
|
|
<view class="content"> |
|
|
|
<view class="popup-title">上传凭证信息</view> |
|
|
|
<view class="popup-desc">请在此处上传检验检疫凭证、售卖资质等证书</view> |
|
|
|
<view class="popup-images"> |
|
|
|
<view class="popup-image-item" v-for="(item, index) in voucher_list" :key="index" @click="lookImage(index)"> |
|
|
|
<image :src="item" mode="aspectFill"></image> |
|
|
|
<view class="remove-image" @click.stop="removeInage(index)"> |
|
|
|
<u-icon name="close-circle"></u-icon> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="popup-image-item popup-image-item-after" @click="uploadImage" v-if="voucher_list.length < 6"></view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="foot-btn"> |
|
|
|
<u-button class="popup-btn" @click="is_show_voucher = false">取消</u-button> |
|
|
|
<u-button class="popup-btn" @click="submitImage">确定</u-button> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</u-popup> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
@ -106,13 +128,17 @@ |
|
|
|
sex: '男', |
|
|
|
height: '192cm', |
|
|
|
info: '无敌叫是' |
|
|
|
}] |
|
|
|
}], |
|
|
|
is_show_voucher: false, // 是否显示凭证上传弹出层 |
|
|
|
voucher_list: [], // 已上传的凭证列表 |
|
|
|
voucher_count: 6 // 最多可以上传多少张凭证 |
|
|
|
} |
|
|
|
}, |
|
|
|
onLoad(){ |
|
|
|
|
|
|
|
}, |
|
|
|
methods: { |
|
|
|
// 监听table删除操作 |
|
|
|
onButtonClick(event){ |
|
|
|
uni.showModal({ |
|
|
|
title: '温馨提示', |
|
|
|
@ -125,6 +151,71 @@ |
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
// 上传凭证图片 |
|
|
|
uploadImage(){ |
|
|
|
let current_count = this.voucher_count - this.voucher_list.length; |
|
|
|
if(current_count == 0) return; |
|
|
|
uni.chooseImage({ |
|
|
|
count: current_count, |
|
|
|
complete: result => { |
|
|
|
this.voucher_list.push(...result.tempFilePaths); |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
// 预览图片 |
|
|
|
lookImage(current){ |
|
|
|
if(this.voucher_list.length <= 0) return; |
|
|
|
this.$u.throttle(() => { |
|
|
|
uni.previewImage({ |
|
|
|
urls: this.voucher_list, |
|
|
|
current: current |
|
|
|
}) |
|
|
|
}, 500); |
|
|
|
}, |
|
|
|
// 移除图片 |
|
|
|
removeInage(current){ |
|
|
|
this.voucher_list.splice(current, 1); |
|
|
|
}, |
|
|
|
// 用户点击确定，将图片上传至oss，并将url发送给后端 |
|
|
|
submitImage(){ |
|
|
|
let that = this; |
|
|
|
let voucher_list = that.voucher_list; |
|
|
|
if(voucher_list.length <= 0){ |
|
|
|
return that.$msg('您未上传图片哦'); |
|
|
|
}; |
|
|
|
that.is_show_voucher = false; |
|
|
|
uni.showLoading({ |
|
|
|
title: '正在上传中...' |
|
|
|
}) |
|
|
|
let http_list = []; |
|
|
|
voucher_list.map(item => { |
|
|
|
let itemP = new Promise((resolve, reject) => { |
|
|
|
that.$http(that.API.XXXX, {url: item}) |
|
|
|
.then(res => resolve(res)) |
|
|
|
.catch(err => reject(err)); |
|
|
|
}) |
|
|
|
http_list.push(itemP); |
|
|
|
}) |
|
|
|
// todo 上传对接 |
|
|
|
Promise.all(http_list).then(res => { |
|
|
|
console.log("上传完毕", res); |
|
|
|
|
|
|
|
// 此处res需要处理一下，有可能格式是这样的，res.data.images |
|
|
|
that.$http(that.API.XXXX, {urls: res}).then(result => { |
|
|
|
uni.hideLoading(); |
|
|
|
that.$msg('凭证已上传成功!') |
|
|
|
}).catch(err => uni.hideLoading()); |
|
|
|
|
|
|
|
}).catch(err => { |
|
|
|
uni.hideLoading(); |
|
|
|
uni.showModal({ |
|
|
|
title: '', |
|
|
|
content: JSON.stringify(err), |
|
|
|
showCancel: false, |
|
|
|
confirmColor: '#1833F2' |
|
|
|
}) |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
@ -193,4 +284,83 @@ |
|
|
|
margin-left: 20rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
.popup-box{ |
|
|
|
width: 686rpx; |
|
|
|
// height: 727rpx; |
|
|
|
height: max-content; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
flex-direction: column; |
|
|
|
.content{ |
|
|
|
.popup-title{ |
|
|
|
font-size: 32rpx; |
|
|
|
font-weight: bold; |
|
|
|
color: #222222; |
|
|
|
text-align: center; |
|
|
|
margin-top: 40rpx; |
|
|
|
} |
|
|
|
.popup-desc{ |
|
|
|
font-size: 28rpx; |
|
|
|
color: #555555; |
|
|
|
text-align: center; |
|
|
|
margin-top: 20rpx; |
|
|
|
margin-bottom: 18rpx; |
|
|
|
} |
|
|
|
.popup-images{ |
|
|
|
display: flex; |
|
|
|
flex-wrap: wrap; |
|
|
|
padding: 22rpx; |
|
|
|
margin-bottom: 18rpx; |
|
|
|
.popup-image-item{ |
|
|
|
width: 198rpx; |
|
|
|
height: 198rpx; |
|
|
|
margin: 8rpx; |
|
|
|
background: #F5F5F5; |
|
|
|
border-radius: 10rpx; |
|
|
|
position: relative; |
|
|
|
image{ |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
.remove-image{ |
|
|
|
position: absolute; |
|
|
|
right: -8rpx; |
|
|
|
top: -16rpx; |
|
|
|
color: #e74c3c; |
|
|
|
font-size: 40rpx; |
|
|
|
padding: 8rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
.popup-image-item-after::after{ |
|
|
|
content: '+'; |
|
|
|
position: absolute; |
|
|
|
left: 30%; |
|
|
|
top: 14%; |
|
|
|
font-size: 100rpx; |
|
|
|
color: #777777; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.foot-btn{ |
|
|
|
height: 90rpx; |
|
|
|
width: 100%; |
|
|
|
border-top: 1rpx solid #E5E5E5; |
|
|
|
display: flex; |
|
|
|
box-sizing: border-box; |
|
|
|
.popup-btn{ |
|
|
|
width: 50%; |
|
|
|
height: 100%; |
|
|
|
border: none; |
|
|
|
border-radius: initial; |
|
|
|
&:last-child{ |
|
|
|
border-left: 1rpx solid #E5E5E5; |
|
|
|
color: #1833F2; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
// 去掉u-button 外边框线 |
|
|
|
/deep/.u-hairline-border::after{ |
|
|
|
border: none; |
|
|
|
} |
|
|
|
</style> |
邓平艺
5 years ago