140 lines
4.2 KiB
Vue
140 lines
4.2 KiB
Vue
<template>
|
|
<view style="display:flex;">
|
|
<view v-if="picarr.length > 0 && label" style="width: 1em;margin-right: 0.5em;line-height: 1.2em;color: #999999;">{{label}}</view>
|
|
<view v-if="type == 'thumb'" style="flex:1;">
|
|
<video :id="'video' + index" v-for="(item,index) in videoarr" :key="index" :src="file_stor(item)" controls @tap="fullvideo('video' + index)" :show-fullscreen-btn="false" :style="{width:width,height:height,margin:'0 0.5em 0 0'}"></video>
|
|
<image lazy-load :lazy-load-margin="0" @tap.stop="preview(index)" :src="item" v-for="(item,index) in picarr" :key="index" :mode="mode" :style="{width:width,height:height,margin:'0 0.5em 0 0'}" style="border-radius:0.3em;" />
|
|
<view @tap.stop="openfile(index)" v-for="(item,index) in pdfarr" :key="index" :style="{width:width,height:height,lineHeight: height}" style="margin:0 0.5em 0 0;border-radius:0.3em;display:inline-block;vertical-align: top;border: 1px solid #cccccc;text-align: center;color:#000000;background: #ffffff;">{{lang('showimgs.att')}}{{index+1}}</view>
|
|
</view>
|
|
<view v-else style="flex:1;">
|
|
<video :id="'video' + index" v-for="(item,index) in videoarr" :key="index" :src="file_stor(item)" controls @tap="fullvideo('video' + index)" :show-fullscreen-btn="false" :style="{width:width,margin:'0 0 -2px 0;'}"></video>
|
|
<image lazy-load :lazy-load-margin="0" @tap.stop="preview(index)" :src="item" v-for="(item,index) in picarr" :key="index" :mode="mode" :style="{width:width}" style="margin:0 0 -2px 0;" />
|
|
<view @tap.stop="openfile(index)" v-for="(item,index) in pdfarr" :key="index" :style="{width:width,height:height,lineHeight: height,margin:index==0?'0':'0 0.5em 0 0'}" style="border-radius:0.3em;display:inline-block;vertical-align: top;border: 1px solid #cccccc;text-align: center;color:#000000;background: #ffffff;">{{lang('showimgs.att')}}{{index+1}}</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
src: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
label: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
width: {
|
|
type: String,
|
|
default: '5em'
|
|
},
|
|
height: {
|
|
type: String,
|
|
default: '5em'
|
|
},
|
|
type: {
|
|
type: String,
|
|
default: 'thumb'
|
|
},
|
|
mode: {
|
|
type: String,
|
|
default: 'aspectFill'
|
|
},
|
|
whpre: {
|
|
type: String,
|
|
default: '?50'
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
picarr: [],
|
|
picoriarr: [],
|
|
pdfarr: [],
|
|
videoarr: [],
|
|
};
|
|
},
|
|
watch: {
|
|
src(newD, oldD) {
|
|
this.fill();
|
|
}
|
|
},
|
|
created() {
|
|
this.fill();
|
|
},
|
|
methods: {
|
|
fill() {
|
|
this.picarr = [];
|
|
this.picoriarr = [];
|
|
var ps = this.src.split('~');
|
|
var images = [];
|
|
for (var i = 0; i < ps.length; i++) {
|
|
if (ps[i].length == 0)
|
|
continue;
|
|
var ind = ps[i].lastIndexOf('.');
|
|
var ext = ps[i].substring(ind + 1).toUpperCase();
|
|
if (ext == 'JPG' || ext == 'JPEG' || ext == 'GIF' || ext == 'PNG')
|
|
images.push(ps[i]);
|
|
else if (ext == 'MP4')
|
|
this.videoarr.push(ps[i]);
|
|
else
|
|
this.pdfarr.push(ps[i]);
|
|
}
|
|
for (var i in images) {
|
|
var ind = images[i].indexOf('|');
|
|
var psm = '';
|
|
var pbig = '';
|
|
if (ind > -1) {
|
|
psm = images[i].substr(0, ind);
|
|
pbig = images[i].substr(ind + 1);
|
|
} else {
|
|
pbig = images[i];
|
|
}
|
|
if (psm == '')
|
|
psm = pbig;
|
|
this.picarr.push(this.file_stor(psm));
|
|
this.picoriarr.push(this.file_stor(pbig));
|
|
}
|
|
},
|
|
preview(idx) {
|
|
uni.previewImage({
|
|
current: idx,
|
|
indicator: 'default',
|
|
urls: this.picoriarr
|
|
});
|
|
},
|
|
openfile(idx) {
|
|
var app = getApp();
|
|
app.toast('Downloading...');
|
|
var url = this.pdfarr[idx];
|
|
if (url.substr(0, 1) == '/')
|
|
url = app.globalData.jsnurl[this.srv] + url;
|
|
uni.downloadFile({
|
|
url: url,
|
|
success: res => {
|
|
uni.openDocument({
|
|
filePath: res.tempFilePath,
|
|
showMenu: true,
|
|
fail: res => {
|
|
app.toast('Open Document Fail:' + res.errMsg + '\n' + url);
|
|
}
|
|
});
|
|
},
|
|
fail: res => {
|
|
app.toast('Down Document Fail:' + res.errMsg + '\n' + url);
|
|
}
|
|
});
|
|
},
|
|
fullvideo(id) {
|
|
const videoContext = uni.createVideoContext(id, this);
|
|
videoContext.requestFullScreen({
|
|
direction: 0
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style> |