siteFront/pages/category/video.vue

<template>
<!--  视频列表-->
	<view class="video_list">
		<view class="banner">
			<view class="img">
				<image :src="topImg" mode="aspectFill" style="width: 100%;height: 100%;"></image>
				<view class="topText tn-flex tn-ml-xl">
					<view class="icon tn-mt-sm">
						<image :src="config.logo" mode="aspectFill" style="width: 100%;height: 100%;"></image>
					</view>
					<view class="title tn-ml tn-text-3xl tn-text-bold tn-mt">
						{{config.siteName}}
					</view>
				</view>
			</view>
			<view class="search tn-pl-sm tn-pr-sm tn-pt-xs tn-pb-xs" @click="showSearch">
				<TnIcon name="search"></TnIcon>
				<span class="tn-pl-xs">搜 索</span>
			</view>
		</view>
		<view class="container tn-shadow tn-m-sm  tn-radius">
			<view class="topic tn-text-xl tn-text-bold tn-pt-sm tn-pb tn-border-bottom tn-grey-light_border tn-p-sm" style="letter-spacing: 4rpx;border-bottom-right-radius: 0;border-bottom-left-radius: 0;">
				#{{headerTitle}}
			</view>
			<view class="item tn-radius tn-mb tn-mt tn-shadow" v-for="(item,index) in articleList" :key="index" @click="toDetail(item)">
				<view class="cover tn-radius tn-p-sm">
					<image :src="JSON.parse(item.image)[0]" style="width: 100%;height: 100%;"></image>
				</view>
				<view class="wrap">
					<view class="mask">
						
					</view>
				</view>
				<view class="title tn-text-center tn-pb-xs">
					{{item.title}}
				</view>
			</view>
			<view class="loadmore tn-mt tn-pb">
				<TnLoadmore :status="loadmoreStatus" color="#666" loading-icon-mode="flower" />
			</view>
		</view>
		<TnPopup v-model="showPopup" open-direction="top" :radius="0">
		    <view class="tn-pt-sm tn-pb-sm tn-pl-lg tn-pr-lg">
				<TnSearchBox
				    v-model="searchValue"
					shape="round"
				    @search="searchBtnClickEvent"
					@clear="clearEvent"
				  />
			</view>
		</TnPopup>
	</view>
	
</template>

<script lang="ts" setup>
	import { onMounted, reactive, ref } from 'vue';
	import request from '@/utils/request';
	import { onLoad,onReachBottom } from "@dcloudio/uni-app";
	import type { LoadmoreStatus } from '@tuniao/tnui-vue3-uniapp'
	import TnPopup from '@/uni_modules/tuniaoui-vue3/components/popup/src/popup.vue'
	import TnSearchBox from '@/uni_modules/tuniaoui-vue3/components/search-box/src/search-box.vue'
	import TnLoadmore from '@/uni_modules/tuniaoui-vue3/components/loadmore/src/loadmore.vue'
	import config from '@/config/config.js'
	const loadmoreStatus = ref<LoadmoreStatus>('loadmore')
	
	const topImg = ref('/static/index_top.jpg')
	
	const showPopup = ref(false)
	
	const headerTitle = ref('')
	
	const articleList = ref([])
	
	const searchValue = ref()
	
	const params = reactive<{
		page?:number,
		limit?:number,
		cateId?:number,
		keyword?:string
	}>({
		page:1,
		limit:10
	})
	
	const showSearch = () => {
		showPopup.value = true
	}
	
	const clearEvent = () => {
		params.page = 1
		params.keyword = undefined
		articleList.value = []
		getList(params)
	}
	
	const searchBtnClickEvent = (value:string) => {
		params.page = 1;
		params.keyword = value
		articleList.value = [];
		showPopup.value = false;
		getList(params)
	}
	
	const getMenuConfig = () => {
		request({
			url: '/front/content/category/info',
			method:'GET',
			data:{'cateId':params.cateId}
		}).then((res:any)=>{
			uni.setNavigationBarTitle({
				title:res.data.data.cateName
			})
			headerTitle.value = res.data.data.cateName
			// if(res.data.data.image){
			// 	topImg.value = res.data.data.image
			// }
		})
	}
	
	const getList = (params:any) => {
		loadmoreStatus.value = 'loading'
		request({
			url: '/front/content/list',
			method:'GET',
			data:params
		}).then((res:any)=>{
			articleList.value = articleList.value.concat(res.data.data.list)
			loadmoreStatus.value = 'loadmore'	
			if(res.data.data.list.length<10){
				loadmoreStatus.value = 'nomore'
			}
		})
	}
	
	const toDetail = (item) =>{
		if(item.type === 0){
			let routeUrl = '/pages/detail/index'
			if(item.template){
				routeUrl = item.template //定义模板后
			}
			uni.navigateTo({
				url:routeUrl + '?cateId=' + item.cateId + '&id=' + item.id
			})
		}else if(item.type === 1){
			//外链
			if(item.link && item.link.slice(0,25) !== 'https://mp.weixin.qq.com/'){
				uni.navigateTo({
					url:'/pages/webview/index?url=' + item.link
				})
			}else{
				window.location.href = item.link
			}
		}else{
			uni.navigateTo({
				url:'/pages/detail/album?id=' + item.id
			})
		}
	}
	
	onLoad((options) =>{
		params.cateId = options.cateId
	}) 
	
	onReachBottom(() =>{
		params.page += 1
		getList(params)
	}) 
	
	onMounted(() => {
		getMenuConfig()
		getList(params)
	})
	
</script>

<style lang="scss" scoped>
	.video_list{
		background-color: #fff;
		height: 100vh;
		.banner{
			height: 450rpx;
			position: relative;
			.img{
				width: 100%;
				height: 100%;
				.topText{
					color: #fff;
					position: absolute;
					top: 100rpx;
					left: 0;
					.icon{
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
					}
					.title{
						letter-spacing: 4rpx;
						text-shadow: 6rpx 6rpx 8rpx #5c5c5c;
					}
				}
			}
			::after{
				content: "";
				position: absolute;
				width: 100%;
				height: 120rpx;
				top: 330rpx;
				left: 0;
				background:linear-gradient(180deg,rgba(255, 255, 255, 0.01),rgba(255, 255, 255, 0.9))
			}
			.search{
				color: #fff;
				position: absolute;
				top: 20rpx;
				right: 20rpx;
				border-radius: 30rpx;
				background-color: rgba(255, 255, 255, 0.5);
			}
		}
		
		.container{
			position: relative;
			top: -130rpx;
			background-color: #FFF;
			.item{
				.cover{
					width: 100%;
					height: 380rpx;
				}
			}
		}
	}
</style>