网页html优化,去掉冗余代码。封装分类页面的翻页组件

js/version.txt

@@ -1 +1 @@
-3.9.42beta1
+3.9.42beta2

templates/cms/mxpro/detailContent.html

@@ -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,
+			ctx,
-			items:items,
+			items,
-			is_home:is_home,
+			is_home,
-			hotsuggs:hotsuggs,
+			hotsuggs,
-			web_name:web_name,
+			web_name,
-			tid:tid,
+			tid,
-			vod_id:vod_id,
+			vod_id,
-			vod_name:vod_name,
+			vod_name,
-			details:details,
+			details,
-			dinfo:dinfo,
+			dinfo,
-			vod_desc:vod_desc,
+			vod_desc,
-			vod_tabs:vod_tabs,
+			vod_tabs,
-			vod_urls:vod_urls,
+			vod_urls,
-			fast_play:fast_play,
+			fast_play,
-			iframeSrc:iframeSrc,
+			iframeSrc,
-			iframeShow:iframeShow,
+			iframeShow,
-			photoVisible:photoVisible,
+			photoVisible,
-			iframeRef:iframeRef,
+			iframeRef,
-			sniffer:sniffer,
+			sniffer,
 			isVideo,getRealUrl
 		}
 	},

templates/cms/mxpro/homeContent.html

@@ -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,
+			ctx,
-			items:items,
+			items,
-			links:links,
+			links,
-			hotsuggs:hotsuggs,
+			hotsuggs,
-			web_name:web_name,
+			web_name,
-			is_home:is_home,
+			is_home,
 		}
 	},
 });

templates/cms/mxpro/js/commonUI.js

@@ -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);

templates/cms/mxpro/searchContent.html

@@ -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,
+			ctx,
-			is_home:is_home,
+			is_home,
-			items:items,
+			items,
-			hotsuggs:hotsuggs,
+			hotsuggs,
-			web_name:web_name,
+			web_name,
-			sitems:sitems,
+			sitems,
-			wd:wd,
+			wd,
-			pg:pg,
+			pg,
-			last_page:last_page,
+			last_page,
-			next_page:next_page,
+			next_page,
-			vod_id:vod_id,
+			vod_id,
-			vod_name:vod_name,
+			vod_name,
-			details:details,
-			dinfo:dinfo,
-			vod_desc:vod_desc,
-			vod_tabs:vod_tabs,
-			vod_urls:vod_urls,
-			fast_play:fast_play,
 		}
 	},
 });