594 lines
16 KiB
HTML
594 lines
16 KiB
HTML
<!--{template mobile/frame/header_simple_start}-->
|
|
<script src="{MOD_PATH}/js/mobile/pinchzoom.js?{VERHASH}" type="text/javascript" charset="utf-8"></script>
|
|
<link rel="stylesheet" type="text/css" href="{MOD_PATH}/css/mobile/details.css?{VERHASH}" />
|
|
<!--{template mobile/frame/header_simple_end}-->
|
|
<div id="dzzoffice">
|
|
<div
|
|
id="DetailPopup"
|
|
class="detail-popup"
|
|
:class="{'NotFooter':showdata[rid]&&!showdata[rid].data.footer,'full':full}"
|
|
@touchstart="DetailPageTouchStart"
|
|
@touchmove="DetailPageTouchMove"
|
|
@touchend="DetailPageTouchEnd">
|
|
<!--{template mobile/components/index/JsDetailMessage}-->
|
|
<van-nav-bar class="header-top" :title="rids.indexOf(rid)+1+'/'+rids.length">
|
|
<template #left>
|
|
<div style="width: 25px;text-align: center;height: 25px;line-height: 25px;" @click.stop="DetailNavbarLeftClick">
|
|
<van-icon name="arrow-left" size="18" />
|
|
</div>
|
|
|
|
</template>
|
|
<template #right>
|
|
<div style="width: 25px;text-align: center;height: 25px;line-height: 25px;" @click.stop="InformationPopup=true">
|
|
<van-icon name="warning-o" size="18" />
|
|
</div>
|
|
</template>
|
|
</van-nav-bar>
|
|
<div class="detail-popup-translate" ref="detail_popup_translate" @click="DetailImageFulloverlay">
|
|
<div
|
|
class="detail-popup-content"
|
|
v-for="item in showdata"
|
|
:class="{'prev':item.type=='left','next':item.type=='right','center':item.type=='center','opacity':item.loading}"
|
|
:key="item.data.opentype!='video'?item.data.rid:''"
|
|
:ref="'Detail_'+item.data.rid">
|
|
<template v-if="item.loading">
|
|
<van-loading class="custom-load" size="24px" type="spinner" color="var(--header-text)" vertical>加载中...</van-loading>
|
|
</template>
|
|
<template v-else>
|
|
<div class="detail-popup-img">
|
|
<template v-if="item.data.opentype=='video'">
|
|
<div class="video-box" :style="{'height':item.data.fheight+'px'}">
|
|
<iframe
|
|
style="border: 0px;"
|
|
:src="'index.php?mod=xgplayer&src='+item.data.realpath"
|
|
width="100%"
|
|
height="100%"></iframe>
|
|
</div>
|
|
</template>
|
|
<template v-else-if="item.data.opentype=='pdf'">
|
|
<iframe
|
|
style="border: 0px;"
|
|
:src="'index.php?mod=pdf&src='+item.data.realpath"
|
|
width="100%"
|
|
height="100%"></iframe>
|
|
</template>
|
|
<template v-else-if="item.data.opentype=='text'">
|
|
<div style="padding: 10px;height: 100%;">
|
|
<iframe
|
|
style="border: 0px;border-radius: 18px;"
|
|
:src="'index.php?mod=textviewer&src='+item.data.realpath"
|
|
width="100%"
|
|
height="100%"></iframe>
|
|
</div>
|
|
</template>
|
|
<template v-else-if="item.data.opentype=='other'">
|
|
<div class="img-box" :ref="'BoxImg_'+item.data.rid">
|
|
<img
|
|
@load="DetailImgload"
|
|
:src="item.data.icondata"
|
|
:data-rid="item.data.rid"
|
|
class="image-viewer__img" />
|
|
</div>
|
|
</template>
|
|
<template v-else>
|
|
<div class="img-box" :ref="'BoxImg_'+item.data.rid">
|
|
<img :src="item.data.icondata" class="image-viewer__img thumbnail" />
|
|
<img
|
|
@load="DetailImgload"
|
|
:data-rid="item.data.rid"
|
|
:src="item.data.realpath"
|
|
class="image-viewer__img opacity" />
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
<div class="footer-tabbar" v-if="showdata[rid] && showdata[rid].data.footer">
|
|
<div class="footer-tabbar-item" v-if="showdata[rid].data.link" @click="DetailFooterClick('link')">
|
|
<i class="ri-links-line"></i>
|
|
</div>
|
|
<div class="footer-tabbar-item" v-if="showdata[rid].data.download" @click="DetailFooterClick('download')">
|
|
<i class="ri-download-2-line"></i>
|
|
</div>
|
|
<div class="footer-tabbar-item" v-if="showdata[rid].data.share" @click="DetailFooterClick('share')">
|
|
<i class="ri-share-line"></i>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
<script type="text/javascript">
|
|
new Vue({
|
|
el: '#dzzoffice',
|
|
data: function() {
|
|
return {
|
|
rids:[],
|
|
rid:'',
|
|
ridIndex:0,
|
|
dataList:{},
|
|
showdata:{},
|
|
showdataIndex:[],
|
|
PinchZoom:{},
|
|
TouchPage:{
|
|
clickX:0,
|
|
distance:0,
|
|
move:true
|
|
},
|
|
TouchImg:{
|
|
move:false,
|
|
},
|
|
full:false,
|
|
InformationPopup:false
|
|
};
|
|
},
|
|
watch:{
|
|
full:{
|
|
handler(val){
|
|
var self = this;
|
|
for(var i in this.PinchZoom){
|
|
var item = this.PinchZoom[i];
|
|
if(val){
|
|
item.enable();
|
|
}else{
|
|
item.disable();
|
|
}
|
|
}
|
|
self.$nextTick(function(){
|
|
var boxH = $('.detail-popup-content').height();
|
|
$('.img-box').height(boxH);
|
|
|
|
|
|
})
|
|
|
|
},
|
|
deep:true
|
|
},
|
|
showdata:{
|
|
handler(val){
|
|
var self = this;
|
|
self.$nextTick(function(){
|
|
for(var i in val){
|
|
var item = val[i];
|
|
var rid = item.data.rid;
|
|
if(!item.loading && (item.data.opentype == 'image' || item.data.opentype == 'other')){
|
|
if(self.PinchZoom[rid]){
|
|
if(!self.full){
|
|
self.PinchZoom[rid].disable()
|
|
}
|
|
}else{
|
|
if(self.$refs['BoxImg_'+rid]){
|
|
var dom = $(self.$refs['BoxImg_'+rid][0]);
|
|
dom.height($('.detail-popup-content').height());
|
|
self.PinchZoom[rid] = new PinchZoom(self.$refs['BoxImg_'+rid][0]);
|
|
if(!self.full){
|
|
self.PinchZoom[rid].disable()
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
})
|
|
|
|
},
|
|
deep:true,
|
|
},
|
|
},
|
|
computed: {
|
|
|
|
},
|
|
created() {
|
|
var arr = (location.hash || "").replace(/^\?/,'').split("&");
|
|
if(arr.length){
|
|
rid=arr[0].replace("#","").split('=')[1];
|
|
this.rid = rid;
|
|
}
|
|
var rids = window.localStorage.getItem('imgs');
|
|
if(rids && rids.indexOf(this.rid)>-1){
|
|
this.rids = rids.split(',');
|
|
}
|
|
this.handleRidsOrder();
|
|
},
|
|
methods:{
|
|
DetailImgload(event){
|
|
var self = this;
|
|
$(event.target).removeClass('opacity').siblings('.thumbnail').remove();
|
|
},
|
|
DetailImageFulloverlay(){
|
|
if(this.full){
|
|
if(this.PinchZoom[this.rid]){
|
|
if(this.PinchZoom[this.rid].zoomFactor>1){
|
|
|
|
}else{
|
|
this.full = false;
|
|
}
|
|
}else{
|
|
this.full = false;
|
|
}
|
|
|
|
}else{
|
|
this.full = true;
|
|
}
|
|
},
|
|
DetailPageTouchStart(event){
|
|
var self = this;
|
|
if(self.showdata[self.rid].loading || self.TouchImg.move || self.InformationPopup){
|
|
self.TouchPage.move = false;
|
|
return false;
|
|
}
|
|
self.TouchPage.clickX = event.touches[0].pageX;
|
|
self.TouchPage.distance = 0;
|
|
self.TouchPage.move = true;
|
|
},
|
|
DetailPageTouchMove(event){
|
|
var self = this;
|
|
if(self.showdata[self.rid].loading || self.TouchImg.move || self.InformationPopup){
|
|
self.TouchPage.move = false;
|
|
return false;
|
|
}
|
|
event.preventDefault();
|
|
var sectouch = event.touches[0];
|
|
self.TouchPage.distance = sectouch.pageX - self.TouchPage.clickX;
|
|
var Index = self.showdataIndex.indexOf(self.rid);
|
|
if(self.TouchPage.distance>0){
|
|
if(self.ridIndex == 0){
|
|
self.$toast('已经是第一张');
|
|
self.TouchPage.move = false;
|
|
return false;
|
|
}
|
|
var firstrid = self.showdataIndex[Index-1];
|
|
if(self.showdata[firstrid] && self.showdata[firstrid].loading){
|
|
self.TouchPage.move = false;
|
|
return false;
|
|
}
|
|
}
|
|
if(self.TouchPage.distance<0){
|
|
if(self.ridIndex == self.rids.length-1){
|
|
self.$toast('已经是最后一张');
|
|
self.TouchPage.move = false;
|
|
return false;
|
|
}
|
|
|
|
var tworid = self.showdataIndex[Index+1];
|
|
if(self.showdata[tworid] && self.showdata[tworid].loading){
|
|
self.TouchPage.move = false;
|
|
return false;
|
|
}
|
|
|
|
}
|
|
self.TouchPage.move = true;
|
|
$(self.$refs['detail_popup_translate']).css("transform","translate3d("+self.TouchPage.distance+"px,0,0)");
|
|
},
|
|
DetailPageTouchEnd(event){
|
|
var self = this;
|
|
if(!self.TouchPage.move || self.InformationPopup){
|
|
return false;
|
|
}
|
|
var dom = self.$refs['detail_popup_translate'];
|
|
var screenWidth = document.body.clientWidth+10;
|
|
$(dom).css("transition","transform 0.2s cubic-bezier(0,0,0.4,1) 0s,-webkit-transform 0.2s");
|
|
if(Math.abs(self.TouchPage.distance)>100){
|
|
var Index = self.showdataIndex.indexOf(self.rid);
|
|
if(self.TouchPage.distance>0){
|
|
$(self.$refs['detail_popup_translate']).css("transform","translate3d("+(screenWidth)+"px,0,0)");
|
|
self.rid = self.showdataIndex[Index-1];
|
|
self.ridIndex -= 1;
|
|
}else{
|
|
self.rid = self.showdataIndex[Index+1];
|
|
self.ridIndex += 1;
|
|
$(dom).css("transform","translate3d("+(-screenWidth)+"px,0,0)");
|
|
}
|
|
setTimeout(function(){
|
|
$(dom).css({
|
|
transform:"none",
|
|
transition:''
|
|
});
|
|
self.handleRidsOrder();
|
|
},300);
|
|
}else{
|
|
$(dom).css("transform","translate3d(0,0,0)");
|
|
setTimeout(function(){
|
|
$(dom).css({
|
|
transform:"none",
|
|
transition:''
|
|
});
|
|
},300);
|
|
}
|
|
|
|
},
|
|
|
|
handleRidsOrder(){
|
|
var self = this;
|
|
var str = {};
|
|
var index = self.rids.indexOf(self.rid);
|
|
// var Oldshowdata = JSON.parse(JSON.stringify(self.showdata));
|
|
var NewShowData = {};
|
|
var showdataIndex = [];
|
|
self.ridIndex = index;
|
|
showdataIndex = [self.rid];
|
|
// self.showdata = {};
|
|
|
|
|
|
if(self.dataList[self.rid]){
|
|
NewShowData[self.rid] = {
|
|
type:'center',
|
|
loading:false,
|
|
data:self.dataList[self.rid]
|
|
};
|
|
}else{
|
|
NewShowData[self.rid] = {
|
|
type:'center',
|
|
loading:true,
|
|
data:{}
|
|
};
|
|
}
|
|
if(self.rids[index-1]){
|
|
var first = self.rids[index-1];
|
|
|
|
showdataIndex.unshift(first);
|
|
if(self.dataList[first]){
|
|
NewShowData[first] = {
|
|
type:'left',
|
|
loading:false,
|
|
data:self.dataList[first]
|
|
};
|
|
}else{
|
|
NewShowData[first] = {
|
|
type:'left',
|
|
loading:true,
|
|
data:{}
|
|
};
|
|
}
|
|
}
|
|
if(self.rids[index+1]){
|
|
var two = self.rids[index+1];
|
|
showdataIndex.push(two);
|
|
if(self.dataList[two]){
|
|
NewShowData[two] = {
|
|
type:'right',
|
|
loading:false,
|
|
data:self.dataList[two]
|
|
};
|
|
}else{
|
|
NewShowData[two] = {
|
|
type:'right',
|
|
loading:true,
|
|
data:{}
|
|
};
|
|
}
|
|
}
|
|
self.showdataIndex = showdataIndex;
|
|
self.showdata = NewShowData;
|
|
var dels = [];
|
|
for(var s in self.PinchZoom){
|
|
if(showdataIndex.indexOf(s)<0){
|
|
dels.push(s)
|
|
}
|
|
}
|
|
if(dels.length){
|
|
for(var h in dels){
|
|
if(self.PinchZoom[h]){
|
|
delete self.PinchZoom[h];
|
|
}
|
|
}
|
|
}
|
|
for(var i in NewShowData){
|
|
if(NewShowData[i].loading){
|
|
this.GetData(i);
|
|
}
|
|
}
|
|
|
|
},
|
|
GetData(rid){
|
|
var self = this;
|
|
$.post(MOD_URL+'&op=details&operation=fetch',{
|
|
rid:rid
|
|
},function(json){
|
|
var item = json.resourcesdata;
|
|
// document.title = item.name+'-$_G[setting][sitename]';
|
|
var colors = [];
|
|
|
|
if(item.colors){
|
|
for(var c in item.colors){
|
|
colors.push(item.colors[c]);
|
|
}
|
|
}
|
|
item.colors = colors;
|
|
var tags = [];
|
|
if(item.tag){
|
|
for(var t in item.tag){
|
|
var tstr = {
|
|
key:t,
|
|
val:item.tag[t]
|
|
};
|
|
tags.push(tstr);
|
|
}
|
|
}
|
|
item.tag = tags;
|
|
|
|
var foldernames = [];
|
|
if(item.foldernames){
|
|
for(var f in item.foldernames){
|
|
var fstr = {
|
|
key:f,
|
|
val:item.foldernames[f]
|
|
};
|
|
foldernames.push(fstr);
|
|
}
|
|
}
|
|
item.foldernames = foldernames;
|
|
item.download = parseInt(item.download);
|
|
item.share = parseInt(item.share);
|
|
if(item.link || item.share || item.download){
|
|
item['footer'] = true;
|
|
}else{
|
|
item['footer'] = false;
|
|
}
|
|
// if(item.opentype == 'other' || item.opentype == 'image'){
|
|
// var size = self.DetailImgSize(item);
|
|
// item['width'] = size['width'];
|
|
// item['height'] = size['height'];
|
|
// item['left'] = size['left'];
|
|
// item['top'] = size['top'];
|
|
// }
|
|
if(item.opentype == 'video'){
|
|
var boxW = document.body.clientWidth;
|
|
var ra = boxW/parseFloat(item['width'])
|
|
item['fwidth'] = boxW;
|
|
item['fheight'] = ra*parseFloat(item['height']);
|
|
}
|
|
self.showdata[rid].loading = false;
|
|
self.showdata[rid].data = item;
|
|
self.dataList[item.rid] = item;
|
|
self.$forceUpdate();
|
|
|
|
},'json');
|
|
},
|
|
DetailImgSize(item){
|
|
var str = {
|
|
width:0,
|
|
height:0,
|
|
left:0,
|
|
top:0
|
|
};
|
|
var boxW = document.body.clientWidth;
|
|
var boxH = document.body.clientHeight
|
|
if(!this.full){
|
|
if(item.footer){
|
|
boxH -= 106;
|
|
}
|
|
}
|
|
var imgW = parseFloat(item.width);
|
|
var imgH = parseFloat(item.height);
|
|
|
|
var ra1 = boxW/boxH;
|
|
var ra2 = imgW/imgH;
|
|
|
|
|
|
if(ra2 > ra1){
|
|
if(imgW>boxW){
|
|
str.width = boxW;
|
|
var ratio = boxW/imgW;
|
|
str.height = ratio*imgH;
|
|
}else{
|
|
str.width = imgW;
|
|
str.height = imgH;
|
|
}
|
|
|
|
}else{
|
|
if(imgH>boxH){
|
|
str.height = boxH;
|
|
var ratio = boxH/imgH;
|
|
str.width = ratio*imgW;
|
|
}else{
|
|
str.width = imgW;
|
|
str.height = imgH;
|
|
}
|
|
}
|
|
str.left = (boxW-str.width)/2;
|
|
str.top = (boxH-str.height)/2;
|
|
return str;
|
|
},
|
|
DetailFooterClick(type){
|
|
var self = this;
|
|
var rid = self.rid;
|
|
if(!self.showdata[rid]){
|
|
self.$toast({
|
|
message: '参数错误',
|
|
icon: 'cross',
|
|
});
|
|
return false;
|
|
}
|
|
if(type == 'link'){
|
|
window.open(self.showdata[rid].data.link);
|
|
return false;
|
|
}
|
|
if(type == 'download'){
|
|
if (self.showdata[rid].data.dpath) {
|
|
window.open(SITEURL + MOD_URL + '&op=download&dpath=' + self.showdata[rid].data.dpath)
|
|
} else {
|
|
self.$toast({
|
|
message: '数据错误',
|
|
icon: 'cross',
|
|
});
|
|
}
|
|
return false;
|
|
}
|
|
if(type == 'share'){
|
|
if (self.showdata[rid].data.rid) {
|
|
$.post('{MOD_URL}&op=ajax&operation=createshare', {
|
|
rid: rid
|
|
}, function(data) {
|
|
if (data.success) {
|
|
self.$dialog.confirm({
|
|
title: '分享成功',
|
|
message: data.success,
|
|
confirmButtonText:'复制地址',
|
|
cancelButtonText:'关闭'
|
|
}).then(function() {
|
|
self.CommonCopyTxt(data.success);
|
|
}).catch(function() {
|
|
// on cancel
|
|
});
|
|
} else {
|
|
self.$toast({
|
|
message: '分享失败',
|
|
icon: 'cross',
|
|
});
|
|
}
|
|
}, 'json')
|
|
} else {
|
|
self.$toast({
|
|
message: '数据错误',
|
|
icon: 'cross',
|
|
});
|
|
}
|
|
}
|
|
},
|
|
DetailMessageSearch(type,val){
|
|
var self = this;
|
|
var item = self.showdata[self.rid].data;
|
|
switch(type){
|
|
case 'color':
|
|
window.location.href = SITEURL+'#appid=' + item.appid + '&color=#' + val;
|
|
// window.location.reload();
|
|
break;
|
|
case 'tag':
|
|
window.location.href = SITEURL+'#appid=' + item.appid + '&tag=' + val;
|
|
// window.location.reload();
|
|
break;
|
|
case 'link':
|
|
window.open(val);
|
|
break;
|
|
case 'classify':
|
|
window.location.href = SITEURL+'#appid=' + item.appid + '&classify=' + val;
|
|
// window.location.reload();
|
|
break;
|
|
case 'copy':
|
|
self.CommonCopyTxt(val);
|
|
break;
|
|
}
|
|
|
|
},
|
|
DetailNavbarLeftClick(){
|
|
window.history.go(-1);
|
|
},
|
|
CommonCopyTxt(text){
|
|
var self = this;
|
|
var input = document.createElement('input'); input.setAttribute('id', 'copyInput');
|
|
input.setAttribute('value', text);
|
|
document.getElementsByTagName('body')[0].appendChild(input);
|
|
document.getElementById('copyInput').select();
|
|
document.execCommand('copy');
|
|
document.getElementById('copyInput').remove();
|
|
self.$toast.success('复制成功');
|
|
}
|
|
},
|
|
mounted() {
|
|
}
|
|
});
|
|
</script>
|
|
<!--{template mobile/frame/footer_simple}-->
|