ks-app-employment-service/packageB/train/video/videoList.vue

<template>
    <AppLayout :title="title" :show-bg-image="false" @onScrollBottom="getDataList('add')">
 <!--       <template #headerleft>
            <view class="btnback">
                <image src="@/static/icon/back.png" @click="navBack"></image>
            </view>
        </template> -->
        <template #headContent>
            <view class="collection-search">
                <view class="search-content">
                    <view class="header-input button-click">
                        <uni-icons class="iconsearch" color="#6A6A6A" type="search" size="22"></uni-icons>
                        <input
                            class="input"
                            v-model="searchKeyword"
                            @confirm="searchVideo"
                            placeholder="输入视频名称"
                            placeholder-class="inputplace"
                        />
                        <uni-icons 
                            v-if="searchKeyword" 
                            class="clear-icon" 
                            type="clear" 
                            size="24" 
                            color="#999" 
                            @click="clearSearch"
                        />
                    </view>
                </view>
            </view>
        </template>
        <view class="main-list">
			<view class="list-title">
				<text>视频列表</text>
				<view class="title-line"></view>
			</view>
            <view class="video-grid" v-if="dataList.length>0">
                <view 
                    v-for="video in dataList" 
                    :key="video.id || video.videoId"
                    class="video-item"
					:style="getItemBackgroundStyle('video-bg.png')"
                    @click="playVideo(video)"
                >
                    <view class="video-cover">
                        <image 
                            :src="trainVideoImgUrl+ video.cover" 
                            mode="aspectFill"
                        ></image>
                    </view>
                    <view class="video-info">
                        {{ video.videoTitle || '未命名视频' }}
                    </view>
                </view>
            </view>
            <empty v-else pdTop="200"></empty>
        </view>
    </AppLayout>
</template>

<script setup>
import { inject, ref, reactive } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
const { $api, navTo, navBack } = inject('globalFunction');
import config from "@/config.js"

// state
const title = ref('');
const searchKeyword = ref('');
const dataList=ref([])
const pageSize=ref(10)
const pageNum=ref(1)
const totalNum=ref(0)
const baseUrl = config.imgBaseUrl
const getItemBackgroundStyle = (imageName) => ({
    backgroundImage: `url(${baseUrl}/train/${imageName})`,
    backgroundSize: 'cover',      // 覆盖整个容器
    backgroundPosition: 'center', // 居中
    backgroundRepeat: 'no-repeat'
});
const trainVideoImgUrl=config.trainVideoImgUrl

onLoad(() => {
    getDataList('refresh');
});

// 搜索视频
function searchVideo() {
    getDataList('refresh');
}

// 清除搜索内容
function clearSearch() {
    searchKeyword.value = '';
    getDataList('refresh');
}

// 获取视频列表
function getDataList(type = 'add') {
	let maxPage=Math.ceil(totalNum.value/pageSize.value)
	let params={}
    if (type === 'refresh') {
        pageNum.value = 1;
		params={
			category:'',
			hour:'',
			level:'',
			searchValue:searchKeyword.value,
			orderStr:'',
			pageSize:pageSize.value,
			pageNum:pageNum.value
		}
		$api.myRequest('/train/public/trainVideo/trainVideoList', params).then((resData) => {
			dataList.value=resData.rows
			totalNum.value=resData.total
		});
    }
    if (type === 'add' && pageNum.value < maxPage) {
        pageNum.value += 1;
		params={
			category:'',
			hour:'',
			level:'',
			searchValue:searchKeyword.value,
			orderStr:'',
			pageSize:pageSize.value,
			pageNum:pageNum.value
		}
		$api.myRequest('/train/public/trainVideo/trainVideoList', params).then((resData) => {
			dataList.value=dataList.value.concat(resData.rows)
			totalNum.value=resData.total
		});
	}
}
	

// 播放视频
function playVideo(video) {
    navTo(`/packageB/train/video/videoDetail?id=${video.videoId}`);
}
</script>

<style lang="stylus" scoped>
.btnback{
    width: 64rpx;
    height: 64rpx;
}
image {
    height: 100%;
    width: 100%;
}
.collection-search{
    padding: 10rpx 20rpx;
    .search-content{
        position: relative
        display: flex
        align-items: center
        padding: 14rpx 0
        .header-input{
            padding: 0
            width: calc(100%);
            position: relative
            .iconsearch{
                position: absolute
                left: 30rpx;
                top: 50%
                transform: translate(0, -50%)
                z-index: 1
            }
            .input{
                padding: 0 80rpx 0 80rpx
                height: 80rpx;
                background: #FFFFFF;
                border-radius: 75rpx 75rpx 75rpx 75rpx;
                border: 2rpx solid #ECECEC
                font-size: 28rpx;
            }
            .clear-icon{
                position: absolute
                right: 30rpx;
                top: 50%
                transform: translate(0, -50%)
                z-index: 1
                cursor: pointer
            }
            .inputplace{
                font-weight: 400;
                font-size: 28rpx;
                color: #B5B5B5;
            }
        }
    }
}
.main-list{
    background-color: #ffffff;
    padding: 20rpx 20rpx 28rpx 20rpx;
	margin:10rpx 30rpx ;
	box-shadow: 0px 3px 20px 0px rgba(0,105,234,0.1);
	border-radius: 12px;
}
.list-title{
	font-weight: bold;
	font-size: 36rpx;
	color: #404040;
	position: relative;
	margin-bottom: 20px;
}
.title-line{
	position: absolute;
	bottom: -10rpx;
	left: 36rpx;
	width: 70rpx;
	height: 8rpx;
	background: linear-gradient(90deg, #FFAD58 0%, #FF7A5B 100%);
	border-radius: 4rpx;
}
.video-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20rpx;
}
.video-item{
    border-radius: 12rpx;
    overflow: hidden;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
    transition: transform 0.2s;
	padding: 20rpx
}
.video-item:active{
    transform: scale(0.98);
}
.video-cover{
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 比例 */
    background: #f0f0f0;
	border-radius: 4rpx;
}
.video-cover image{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.video-info{
    padding: 16rpx 16rpx 0 16rpx;
	font-size: 26rpx;
	color: #333;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: center;
}
.video-title{
    font-size: 28rpx;
    color: #333;
    line-height: 40rpx;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>