<template>
<view class="adv_list">
<view class="adv_item" v-for="(item, index) in advInfo" :key="item.supplier_advertisement_id">
<image
:src="item.supplier_advertisement_pic"
mode="widthFix"
@click="previewAdvPic(item.supplier_advertisement_pic)"
@touchstart.prevent="touchstart(index)"
@touchend.prevent="touchend"
>
</image>
</view>
<uni-fab
:pattern="pattern"
:popMenu="false"
horizontal="right"
vertical="bottom"
@fabClick="fabClick"
>
</uni-fab>
</view>
</template>
<script>
export default {
data() {
return {
advInfo: [],
pattern: {
buttonColor: '#007AFF'
}
}
},
methods: {
async getAdv() {
const res = await this.$myRequest({
url: '/advertisement/getAdvertisementById',
method: 'POST',
data: JSON.stringify({
supplier_id :uni.getStorageSync('supplier_id')
})
})
this.advInfo = res.data.description
for (let i=0; i<this.advInfo.length; i++) {
this.advInfo[i].supplier_advertisement_pic = "data:image/png;base64," + this.advInfo[i].supplier_advertisement_pic
}
},
alertDelAdv() {
uni.showToast({
title: '长按可删除图片',
icon: 'none',
duration: 1500
});
},
onPullDownRefresh() {
setTimeout(()=>{
this.getAdv(()=>{
uni.stopPullDownRefresh()
})
}, 500)
},
previewAdvPic(current) {
const urls = this.advInfo.map(item=>{
return item.supplier_advertisement_pic
})
uni.previewImage({
current: current,
urls: urls
})
},
touchstart(index) {
clearInterval(this.Loop)
let that = this
this.Loop = setTimeout(function() {
uni.showModal({
title: '删除图片',
content: '确认删除图片?',
success: async function(res) {
if(res.confirm) {
await that.$myRequest({
url: '/advertisement/deleteAdvertisement',
method: 'POST',
data: JSON.stringify({
supplier_advertisement_id: that.advInfo[index].supplier_advertisement_id
})
})
uni.showToast({
title: '删除图片成功',
duration: 1500
})
that.getAdv()
}
}
})
}.bind(this), 500)
},
touchend() {
clearInterval(this.Loop);
},
fabClick() {
uni.showModal({
title: '添加图片',
content: '确认添加图片?',
success: (res) => {
if (res.confirm) {
uni.chooseImage({
count: 1,
success: (res) => {
const tempFilePaths = res.tempFilePaths;
uni.uploadFile({
url: this.BASEURL+'/advertisement/addAdvertisement',
filePath: tempFilePaths[0],
name: 'advertisementPic',
formData: {
supplier_id: uni.getStorageSync('supplier_id'),
},
success: (uploadFileRes) => {
uni.showToast({
title: '图片上传成功',
duration: 1500
})
this.getAdv()
}
})
}
})
}
},
})
},
},
onLoad() {
this.getAdv()
this.alertDelAdv()
}
}
</script>
<style lang="scss">
.adv_list {
padding-top: 6rpx; // 第一幅图片与最上边距间隔
.adv_item {
image {
width: 742rpx; // 图片宽度撑满
padding: 0 4rpx; // 图片距离左右间隔
}
}
}
</style>