yichael_intomovie/pages/serach/serach.vue

<template>
    <z-paging
        class="content-page-wrap flex-column"
        ref="paging"
        v-model="videoList"
        @query="getSearchList"
        :refresher-enabled="false"
        :default-page-size="50"
    >
        <template #top>
            <view class="search-box flex-left">
                <u-icon
                    name="arrow-left"
                    color="#000E08"
                    size="40rpx"
                    @tap="goBack"
                    bold
                    style="margin-right: 12rpx"
                ></u-icon>
                <u-input
                    placeholder="电影 / 电视剧 / 动漫"
                    v-model="keyword"
                    height="72rpx"
                    clearable
                    @change="keywordInput"
                    @clear="search"
                    ref="inputRef"
                    focus
                >
                </u-input>
                <view @click="search" class="input-right"> 搜索 </view>
            </view>
            <u-tabs
                style="padding: 0 32rpx"
                v-if="videoList.length > 0"
                :list="tabList"
                keyName="title"
                lineWidth="0"
                lineHeight="0"
                :activeStyle="{
                    color: '#000000',
                    fontWeight: 'bold',
                    transform: 'scale(1.05)',
                    fontSize: '40rpx',
                }"
                :inactiveStyle="{
                    color: '#717171',
                    transform: 'scale(1)',
                    fontSize: '30rpx',
                }"
                itemStyle="padding: 0 42rpx 0 0; height: 70rpx;"
                @click="setTabSelect"
            ></u-tabs>
        </template>
        <!-- <view class="suggest-box" v-if="keyword && isSearch">
            <view
                class="search-row flex-left"
                v-for="(item, index) in showSearchList"
                @click="goVideo(item.title)"
            >
                <u-icon name="search" color="#D0D0D0" size="24"></u-icon>
                <view class="title" v-html="item.showTitle"></view>
            </view>
        </view> -->
        <view class="search-main">
            <view
                v-for="(item, index) in showSearchList"
                class="row-box flex"
                @click="goPlayVideo(item)"
            >
                <image :src="item.img" mode="aspectFill"></image>
                <view class="right-content flex_1">
                    <h4 v-html="item.showTitle"></h4>
                    <text>{{ item.desc }}</text>
                    <view class="flex">
                        <view class="tag">{{
                            (
                                tabList.find(
                                    (items) => items.type == item.tag
                                ) || {}
                            ).title
                        }}</view>
                    </view>
                </view>
            </view>
        </view>
    </z-paging>
</template>

<script>
import { hightLight } from "@/utils/hightLight";
import { searchListPackage } from "@/utils/apiMethods.js";
export default {
    data() {
        return {
            keyword: "",
            videoList: [],
            isSearch: true,
            tabList: [
                {
                    title: "全部",
                    type: "",
                },
                {
                    title: "电影",
                    type: "电影",
                },
                {
                    title: "连续剧",
                    type: "剧集",
                },
                {
                    title: "动漫",
                    type: "动漫",
                },
                {
                    title: "综艺",
                    type: "综艺纪录",
                },
                {
                    title: "短剧",
                    type: "短剧",
                },
            ],
            tabIndex: 0,
        };
    },
    // mounted() {
    //     this.$nextTick(() => {
    // 		document.querySelector('input').focus();
    //     });
    // },
    computed: {
        showSearchList() {
            let vm = this;
            let data = [];
            if (vm.keyword) {
                vm.videoList.map((item) => {
                    item.showTitle = hightLight(vm.keyword, item.title);
                    if (
                        vm.tabIndex == 0 ||
                        vm.tabList[vm.tabIndex].type == item.tag
                    ) {
                        data.push(item);
                    }
                });
            }
            return data;
        },
    },
    methods: {
        search() {
            let vm = this;
            vm.videoList = [];
            vm.$refs.paging.reload();
            // vm.getSearchList();
        },
        keywordInput(val) {
            let vm = this;
            if (val) {
                uni.$u.debounce(vm.search, 500);
            } else {
                vm.search();
            }
        },
        setTabSelect(data) {
            let vm = this;
            vm.tabIndex = data.index;
        },
        // 搜索视频列表
        getSearchList(pageNo = 1) {
            let vm = this;
            // uni.showLoading({
            //     title: "搜索中",
            // });
            uni.request({
                url: "https://www.keke1.app/search", // 接口地址
                method: "GET",
                data: {
                    k: vm.keyword,
                    page: pageNo,
                },
                success: (res) => {
                    // uni.hideLoading();
                    vm.$refs.paging.complete(searchListPackage(res.data));
                },
                fail: (err) => {
                    uni.hideLoading();
                    vm.$refs.paging.complete(false);
                    console.log(err);
                },
            });
        },
        // goVideo(val) {
        //     let vm = this;
        //     vm.isSearch = false;
        //     vm.keyword = val;
        //     vm.search();
        // },
        goPlayVideo(row) {
            uni.reLaunch({
                url: "/pages/play/play?url=" + row.url,
            });
        },
        goBack() {
            uni.navigateBack();
        },
    },
};
</script>

<style lang="scss" scoped>
.search-box {
    margin: 28rpx;
    z-index: 2;
}
.suggest-box {
    height: 100%;
    width: 100%;
    padding: 0 28rpx;
    .search-row {
        border-bottom: 2rpx solid #e1e1e1;
        padding: 16rpx 8rpx;
        .title {
            color: #000e08;
            font-size: 28rpx;
            margin-left: 14rpx;
            font-weight: bold;
        }
    }
}
.search-main {
    margin-top: 32rpx;
    .row-box {
        margin-bottom: 40rpx;
        image {
            width: 140rpx;
            height: 196rpx;
            border-radius: 16rpx;
        }
        .right-content {
            margin-left: 22rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            flex: 1;

            text {
                color: #717171;
                font-size: 24rpx;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }
            .tag {
                height: 56rpx;
                background: #d0f8dd;
                border-radius: 8rpx;
                padding: 0 18rpx;
                display: flex;
                align-items: center;
                font-weight: bold;
                font-size: 28rpx;
                color: #1dbc46;
            }
        }
    }
}
</style>