play-video-app/pages/search/index.vue

<template>
    <view class="search">
        <view class="input_box">
            <u-search height="30" bgColor="#FFF" :showAction="false" :focus="true" placeholder="请输入剧名"
                searchIconColor="#000" v-model="keyword" @search="search"></u-search>
        </view>
        <view v-if="list && list.length" class="video_lists">
            <view class="list_item" v-for="(item,index) in list" :key="index" @click="toPlay(item)">
                <image :src="item.thumbnail" mode="aspectFill" loading="lazy"></image>
                <view class="innews">
                    <text>{{ item.name }}</text>
                    <text class="ellipsis-2">{{ item.description }}</text>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
import { getServerShipProgramPage } from '@/apis/index'
export default {
    data(){
        return{
            keyword:'',
            list:[]
        }
    },
    methods: {
        // 获取视频节目分页
        async getVideoPage() {
            let params = {
                orderByColumn: "",
                orderByAsc: true,
                pageIndex: 1,
                pageSize: 10,
                keyword: this.keyword,
                shipCategoryId: '',
            }
            const res = await getServerShipProgramPage(params)
            this.list = res.list
            console.log(res);
        },
        search(){
            this.getVideoPage()
        },
        toPlay(item){
            uni.redirectTo({
                url:'/pages/play/index?id='+ item.id+'&data='+JSON.stringify(item),
            })
        },
    },
}
</script>
<style lang="scss" scoped>
    .search{
        background: #fff;
        padding-bottom: var(--window-bottom);
        .input_box{
            padding: 20rpx;
        }
        .video_lists{
            
            padding: 20rpx;
            background: #fff;
            .list_item{
                display: flex;
                padding: 20rpx;
                border-bottom: 1rpx solid #e2e1d0;
                image{
                    flex-shrink: 0;
                    width: 160rpx;
                    height: 220rpx;
                    margin-right: 30rpx;
                }
                .innews{
                    padding: 10rpx 0;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;
                    // justify-content: space-around;
                }
            }
            .list_item:nth-last-child(1){
                border: 0;
            }
        }
    }
</style>