<template>
|
<view v-if="show" class="preview-container">
|
<swiper class="preview-swiper" :current="current" @change="onSwiperChange">
|
<swiper-item v-for="(item, index) in images" :key="index">
|
<view class="swiper-item">
|
<image class="preview-image" :src="item.file_path" mode="aspectFit" @click="handleClose"></image>
|
</view>
|
</swiper-item>
|
</swiper>
|
|
<!-- 顶部栏 -->
|
<view class="preview-header">
|
<text class="preview-index">{{ current + 1 }}/{{ images.length }}</text>
|
<view class="preview-actions">
|
<text class="close-btn" @click="handleClose">×</text>
|
</view>
|
</view>
|
|
<!-- 底部栏 -->
|
<view class="preview-footer d-c-c" v-if="IsOriginal == 1">
|
<view class="preview-actions">
|
<button class="download-btn" @click="handleDownload">下载原图</button>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import { ActivityFile } from '@/common/activityFile.js';
|
export default {
|
data() {
|
return {
|
current: 0,
|
setting: {}, // 下载消耗积分设置
|
};
|
},
|
props: {
|
show: {
|
type: Boolean,
|
default: false
|
},
|
images: {
|
type: Array,
|
default: () => []
|
}
|
},
|
computed: {
|
// 当前图片有没有缩略图
|
IsOriginal() {
|
if (this.images.length > 0) {
|
return this.images[this.current].is_original;
|
}
|
return 0;
|
}
|
},
|
created() {
|
this.getSetting();
|
},
|
methods: {
|
// 获取消耗积分设置
|
getSetting() {
|
let self = this;
|
self.loading = true;
|
self._get(
|
'branch.activity/pointsSetting', {}, function(res) {
|
self.loading = false;
|
self.setting = res.data.setting;
|
}
|
);
|
},
|
|
onSwiperChange(e) {
|
this.current = e.detail.current;
|
},
|
|
handleClose() {
|
if (this.loading) return;
|
this.$emit('close')
|
},
|
|
async handleDownload() {
|
let self = this;
|
let file_id = self.images[this.current].file_id;
|
let file_path = self.images[this.current].is_original ? '' : self.images[this.current].file_path;
|
const success = await ActivityFile.downloadFile(file_id, file_path, 'image', self.setting.download_image_points);
|
if (success) {
|
console.log('图片下载完成');
|
}
|
},
|
|
}
|
}
|
</script>
|
|
<style scoped>
|
.preview-container {
|
position: fixed;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
background-color: #000;
|
z-index: 130;
|
}
|
|
.preview-swiper {
|
height: 100%;
|
}
|
|
.swiper-item {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
height: 100%;
|
}
|
|
.preview-image {
|
width: 100%;
|
height: 100%;
|
}
|
|
.preview-header {
|
position: absolute;
|
top: 0;
|
left: 0;
|
right: 0;
|
height: 100rpx;
|
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent);
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 0 30rpx;
|
color: #fff;
|
}
|
|
.preview-index {
|
font-size: 28rpx;
|
}
|
|
.close-btn {
|
font-size: 50rpx;
|
width: 60rpx;
|
height: 60rpx;
|
text-align: center;
|
line-height: 60rpx;
|
}
|
|
.preview-footer {
|
position: absolute;
|
bottom: 0;
|
left: 0;
|
right: 0;
|
height: 200rpx;
|
padding: 0 30rpx;
|
background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
|
}
|
|
.download-btn {
|
background: rgba(255, 255, 255, 0.5);
|
color: #ffffff;
|
border-radius: 50rpx;
|
padding: 6rpx 50rpx;
|
font-size: 28rpx;
|
}
|
</style>
|
