网页html优化,去掉冗余代码。封装分类页面的翻页组件
This commit is contained in:
晚风拂柳颜
parent
3fd2f26fa4
commit
6388214be8
@ -1 +1 @@
|
||||
3.9.42beta1
|
||||
3.9.42beta2
|
||||
File diff suppressed because one or more lines are too long
@ -204,7 +204,6 @@ const app = createApp({
|
||||
data:[]
|
||||
});
|
||||
|
||||
|
||||
const vod_desc = computed(() => {
|
||||
console.log('计算vod_desc');
|
||||
return dinfo.value.vod_content?dinfo.value.vod_content.slice(0,100)+'...':'';
|
||||
@ -380,25 +379,25 @@ const app = createApp({
|
||||
}
|
||||
return {
|
||||
...methods,
|
||||
ctx:ctx,
|
||||
items:items,
|
||||
is_home:is_home,
|
||||
hotsuggs:hotsuggs,
|
||||
web_name:web_name,
|
||||
tid:tid,
|
||||
vod_id:vod_id,
|
||||
vod_name:vod_name,
|
||||
details:details,
|
||||
dinfo:dinfo,
|
||||
vod_desc:vod_desc,
|
||||
vod_tabs:vod_tabs,
|
||||
vod_urls:vod_urls,
|
||||
fast_play:fast_play,
|
||||
iframeSrc:iframeSrc,
|
||||
iframeShow:iframeShow,
|
||||
photoVisible:photoVisible,
|
||||
iframeRef:iframeRef,
|
||||
sniffer:sniffer,
|
||||
ctx,
|
||||
items,
|
||||
is_home,
|
||||
hotsuggs,
|
||||
web_name,
|
||||
tid,
|
||||
vod_id,
|
||||
vod_name,
|
||||
details,
|
||||
dinfo,
|
||||
vod_desc,
|
||||
vod_tabs,
|
||||
vod_urls,
|
||||
fast_play,
|
||||
iframeSrc,
|
||||
iframeShow,
|
||||
photoVisible,
|
||||
iframeRef,
|
||||
sniffer,
|
||||
isVideo,getRealUrl
|
||||
}
|
||||
},
|
||||
|
||||
@ -149,7 +149,7 @@ const app = createApp({
|
||||
|
||||
console.log('---setup---');
|
||||
//获取当前实例
|
||||
const {self, proxy} = getCurrentInstance();
|
||||
// const {self, proxy} = getCurrentInstance();
|
||||
const web_name = '{{ctx.web_name}}';
|
||||
const pwd = '{{ctx.pwd}}';
|
||||
console.log(web_name);
|
||||
@ -179,12 +179,12 @@ const app = createApp({
|
||||
console.log(e.message)
|
||||
}
|
||||
return {
|
||||
ctx:ctx,
|
||||
items:items,
|
||||
links:links,
|
||||
hotsuggs:hotsuggs,
|
||||
web_name:web_name,
|
||||
is_home:is_home,
|
||||
ctx,
|
||||
items,
|
||||
links,
|
||||
hotsuggs,
|
||||
web_name,
|
||||
is_home,
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
@ -355,7 +355,56 @@ const StuImageComponent = {
|
||||
},//配置需要传入的属性
|
||||
emits :['close_image'],
|
||||
delimiters: ['{[', ']}'],//delimiters：改变默认的插值符号
|
||||
}
|
||||
};
|
||||
|
||||
const StuPagerComponent = {
|
||||
template:`
|
||||
<div class="stui-pannel__ft">
|
||||
<ul class="stui-page__item text-center clearfix">
|
||||
<li><a :href="ctx.path+'?tid='+ctx.tid+'&tname='+ctx.tname+'&pg=1'">首页</a></li>
|
||||
<li><a :href="ctx.path+'?tid='+ctx.tid+'&tname='+ctx.tname+'&pg='+last_page">上一页</a></li>
|
||||
<!-- <span v-for="n in 10">{{ n }}</span>-->
|
||||
<li class="hidden-xs" :class="{ active: n == ctx.pg }" v-for="n in now_pages">
|
||||
<a :href="ctx.path+'?tid='+ctx.tid+'&tname='+ctx.tname+'&pg='+n">{[n]}</a>
|
||||
</li>
|
||||
|
||||
<li class="active num"><a>{[pg]}/{[pagecount]}</a></li>
|
||||
<li><a :href="ctx.path+'?tid='+ctx.tid+'&tname='+ctx.tname+'&pg='+next_page">下一页</a></li>
|
||||
<li><a :href="ctx.path+'?tid='+ctx.tid+'&tname='+ctx.tname+'&pg=99'">尾页</a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
`,
|
||||
setup(props, context) {
|
||||
console.log('StuPager组件加载完毕');
|
||||
let pg = props.pg; //pg非ref变量,直接就可以拿到，不需要.value
|
||||
// console.log('pg:',pg);
|
||||
const last_page = ref(Number(pg)-1>0?Number(pg)-1:1);
|
||||
const next_page = ref(Number(pg)+1>0?Number(pg)+1:1);
|
||||
const now_pages = computed(() => {
|
||||
// console.log('计算now_pages：',(Number(pg)+10));
|
||||
let start = (Number(pg)-5)>0?(Number(pg)-5):1;
|
||||
let end = (Number(pg)+5) > start+10?start+10:(Number(pg)+5);
|
||||
let rangeArr = Array.from({ length: end - start + 1 }, (_, i) => start + i);
|
||||
// console.log(rangeArr);
|
||||
return rangeArr
|
||||
});
|
||||
|
||||
const methods = {
|
||||
// closeImage(e) {
|
||||
// context.emit('close_image');
|
||||
// },
|
||||
};
|
||||
return {
|
||||
...methods,
|
||||
last_page,
|
||||
next_page,
|
||||
now_pages,
|
||||
}
|
||||
},
|
||||
props: ['ctx','pg','pagecount'],
|
||||
delimiters: ['{[', ']}'],//delimiters：改变默认的插值符号
|
||||
};
|
||||
|
||||
//下面的注册组件方法无法使用,需要在app里去注册
|
||||
// Vue.component('copy-right', copyRightComponent);
|
||||
|
||||
@ -141,7 +141,7 @@ const app = createApp({
|
||||
|
||||
console.log('---setup---');
|
||||
//获取当前实例
|
||||
const {self, proxy} = getCurrentInstance();
|
||||
// const {self, proxy} = getCurrentInstance();
|
||||
const web_name = '{{ctx.web_name}}';
|
||||
const pwd = '{{ctx.pwd}}';
|
||||
const wd = '{{ctx.wd}}';
|
||||
@ -151,7 +151,6 @@ const app = createApp({
|
||||
const vod_id = '{{ctx.vod_id}}';
|
||||
const vod_name = '{{ctx.vod_name}}';
|
||||
console.log(web_name);
|
||||
|
||||
const ctx_str = "ctxObj={{ctx|safe}}";
|
||||
eval(ctx_str);
|
||||
// console.log(ctxObj)
|
||||
@ -168,72 +167,28 @@ const app = createApp({
|
||||
list:[]
|
||||
});
|
||||
|
||||
const details = ref({
|
||||
list:[],
|
||||
});
|
||||
|
||||
const dinfo = ref({
|
||||
vod_content:''
|
||||
});
|
||||
|
||||
// const hotsuggs = ref({"code":200,"count":50,"data":[{"title":"漫长的季节","url":""},{"title":"你给我的喜欢","url":""},{"title":"奔跑吧 第7季","url":""},{"title":"斗破苍穹年番","url":""},{"title":"完美世界","url":""},{"title":"平凡之路","url":""},{"title":"斗罗大陆","url":""},{"title":"画江湖之不良人 第6季","url":""},{"title":"云襄传","url":""},{"title":"满江红","url":""},{"title":"遮天","url":""},{"title":"只是结婚的关系","url":""},{"title":"哈哈哈哈哈 第3季","url":""},{"title":"星辰变 第5季","url":""},{"title":"吞噬星空","url":""},{"title":"极限挑战 第9季","url":""},{"title":"月升沧海","url":""},{"title":"听说你喜欢我","url":""},{"title":"雪中悍刀行","url":""},{"title":"无间","url":""},{"title":"小猪佩奇第9季","url":""},{"title":"流浪地球2","url":""},{"title":"迪迦奥特曼 普通话版","url":""},{"title":"宝贝赳赳 第五季","url":""},{"title":"天赐的声音 第4季","url":""},{"title":"银河护卫队","url":""},{"title":"一人之下 第5季","url":""},{"title":"我们的婚姻","url":""},{"title":"全职法师 第6季","url":""},{"title":"汪汪队立大功第八季","url":""},{"title":"青春环游记 第4季","url":""},{"title":"欢乐颂4","url":""},{"title":"新三国","url":""},{"title":"扫黑风暴","url":""},{"title":"黑豹2","url":""},{"title":"《人生路不熟》主创漫谈","url":""},{"title":"爱情而已","url":""},{"title":"长月烬明","url":""},{"title":"王牌对王牌 第8季","url":""},{"title":"你是我的荣耀","url":""},{"title":"大话西游之大圣娶亲·加长纪念版","url":""},{"title":"陈情令","url":""},{"title":"熊出没之冬日乐翻天","url":""},{"title":"新僵尸先生","url":""},{"title":"沸腾人生","url":""},{"title":"银河护卫队2","url":""},{"title":"那年花开月正圆","url":""},{"title":"名侦探柯南 普通话版","url":""},{"title":"云顶天宫","url":""},{"title":"欢乐颂","url":""}],"msg":"获取成功"});
|
||||
const hotsuggs = ref({
|
||||
data:[]
|
||||
});
|
||||
|
||||
|
||||
const vod_desc = computed(() => {
|
||||
console.log('计算vod_desc');
|
||||
return dinfo.value.vod_content?dinfo.value.vod_content.slice(0,100)+'...':'';
|
||||
});
|
||||
|
||||
const vod_tabs = computed(() => {
|
||||
console.log('计算vod_tabs');
|
||||
return dinfo.value.vod_play_from?dinfo.value.vod_play_from.split('$$$'):[];
|
||||
});
|
||||
|
||||
const vod_urls = computed(() => {
|
||||
console.log('计算vod_urls');
|
||||
let urls = [];
|
||||
if(dinfo.value.vod_play_url){
|
||||
let tab_urls = dinfo.value.vod_play_url.split('$$$');
|
||||
tab_urls.forEach(((tab_url,index)=>{
|
||||
let vurls = tab_url.split('#').map(it=>{return {name:it.split('$')[0],url:it.split('$')[1]}});
|
||||
urls.push(vurls);
|
||||
}));
|
||||
}
|
||||
console.log(urls);
|
||||
return urls
|
||||
});
|
||||
|
||||
const fast_play = computed(() => {
|
||||
console.log('fast_play');
|
||||
return vod_urls.value&&vod_urls.value.length>0?vod_urls.value[0][0].url:'';
|
||||
});
|
||||
|
||||
try {
|
||||
items.value = JSON.parse(sessionStorage.getItem('items'))||items.value;
|
||||
hotsuggs.value = JSON.parse(sessionStorage.getItem('hotsuggs'))||hotsuggs.value;
|
||||
}catch (e) {}
|
||||
return {
|
||||
ctx:ctx,
|
||||
is_home:is_home,
|
||||
items:items,
|
||||
hotsuggs:hotsuggs,
|
||||
web_name:web_name,
|
||||
sitems:sitems,
|
||||
wd:wd,
|
||||
pg:pg,
|
||||
last_page:last_page,
|
||||
next_page:next_page,
|
||||
vod_id:vod_id,
|
||||
vod_name:vod_name,
|
||||
details:details,
|
||||
dinfo:dinfo,
|
||||
vod_desc:vod_desc,
|
||||
vod_tabs:vod_tabs,
|
||||
vod_urls:vod_urls,
|
||||
fast_play:fast_play,
|
||||
ctx,
|
||||
is_home,
|
||||
items,
|
||||
hotsuggs,
|
||||
web_name,
|
||||
sitems,
|
||||
wd,
|
||||
pg,
|
||||
last_page,
|
||||
next_page,
|
||||
vod_id,
|
||||
vod_name,
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user