yichael_intomovie/pages/index/index.vue

<template>
    <z-paging
        class="content-page-wrap flex-column"
        ref="paging"
        v-model="videoList"
        @query="getVideoList"
        :refresher-enabled="false"
    >
        <template #top>
            <view style="padding: 30rpx">
                <top-main></top-main>
                <view class="search-box flex-left">
                    <view @click="toSearch" class="flex-1">
                        <u-input
                            placeholder="电影 / 电视剧 / 动漫"
                            height="72rpx"
                        >
                            <template #prefix>
                                <image
                                    src="@/static/img/icon-search.svg"
                                    style="
                                        width: 48rpx;
                                        height: 48rpx;
                                        margin-right: 20rpx;
                                    "
                                ></image>
                            </template>
                        </u-input>
                    </view>
                    <view @click="goHistory" class="input-right flex-left">
                        <image src="@/static/img/icon-history.svg"></image>
                    </view>
                </view>
                <view style="margin-top: 30rpx">
                    <u-tabs
                        :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>
                </view>
            </view>
        </template>

        <!-- 推荐视频 -->
        <template v-if="tabIndex == 0">
            <!-- 轮播图 -->
            <view style="margin-bottom: 30rpx">
				<image src="@/static/img/user-manual.svg" @click="openFile"></image>
                <!-- <u-swiper
                    :list="['@/static/img/user-manual.svg']"
                    height="380rpx"
                    radius="10rpx"
                    indicator
                    indicatorMode="line"
                    imgMode="aspectFill"
                    keyName="image_url"
                    showTitle
                    circular
                    @click="openFile"
                ></u-swiper> -->
            </view>
            <!-- 推荐卡片 -->
            <view class="flex-column" v-for="(card, index) in videoList">
                <view
                    class="flex-column"
                    style="background-color: #fff; border-radius: 20rpx"
                >
                    <view class="hotMain flex-column">
                        <view
                            class="flex-row justify-between"
                            style="padding: 10rpx 0"
                        >
                            <text style="font-weight: 600; font-size: 36rpx">{{
                                card.title
                            }}</text>
                            <!-- <view
                                style="border-radius: 50px; padding: 5rpx 20rpx"
                                @tap="toMore(card)"
                            >
                                <u-icon
                                    name="arrow-right"
                                    color="#717171"
                                    size="36rpx"
                                    bold
                                ></u-icon>
                            </view> -->
                        </view>
                        <view
                            class="flex-row flex-wrap"
                            style="padding: 5rpx 0"
                        >
                            <view
                                class="videoCardMain flex-column"
                                v-for="(video, index) in card.children"
                                :key="index"
                                @tap="goPlayVideo(video)"
                            >
                                <view class="videoCardImgBox">
                                    <image
                                        class="videoCardImg"
                                        :src="video.img"
                                        mode="aspectFill"
                                    ></image>
                                    <text class="video-state">
                                        <!-- {{ video.state }} -->
                                        正片
                                    </text>
                                </view>
                                <view class="videoCardName line_1">
                                    {{ video.title }}
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </template>
        <!-- 其他视频 -->
        <template v-else>
            <view class="tag-box">
                <scroll-view
                    class="hideScrollbar"
                    :scroll-left="scrollLeft"
                    :scroll-x="true"
                    :show-scrollbar="false"
                    v-for="(item, index) in searchData"
                    :key="index"
                >
                    <text class="tag-row title">{{ item.title }}</text>
                    <view
                        v-for="(items, indexs) in item.labelArr"
                        :key="indexs"
                        class="tag-row"
                    >
                        <text
                            class="label"
                            :class="{
                                active: items.value == selectTags[index],
                            }"
                            @click="handleTag(index, items.value)"
                            >{{ items.label }}</text
                        >
                    </view>
                </scroll-view>
            </view>
            <view class="flex-row flex-wrap">
                <view
                    class="videoCardMain flex-column"
                    v-for="(item, index) in videoList"
                    :key="index"
                    @click="goPlayVideo(item)"
                >
                    <view class="videoCardImgBox">
                        <image
                            class="videoCardImg"
                            :src="item.img"
                            mode="aspectFill"
                        ></image>
                        <text class="video-state">
                            <!-- {{ video.state }} -->
                            正片
                        </text>
                    </view>
                    <view class="videoCardName line_1">
                        {{ item.title }}
                    </view>
                </view>
            </view>
        </template>
    </z-paging>
</template>

<script>
import topMain from "@/components/topMain";
import { listPackage } from "@/utils/apiMethods.js";
export default {
    components: {
        topMain,
    },
    data() {
        return {
            tabIndex: 0,
            scrollLeft: 0,
            selectTags: ["", "", "", "", "1"], //选中的标签数据
            //搜索内容
            searchData: [
                {
                    title: "类型:",
                    labelArr: [
                        { label: "全部", value: "" },
                        // { label: "Netflix", value: "Netflix" },
                        { label: "剧情", value: "剧情" },
                        { label: "喜剧", value: "喜剧" },
                        { label: "动作", value: "动作" },
                        { label: "爱情", value: "爱情" },
                        { label: "恐怖", value: "恐怖" },
                        { label: "惊悚", value: "惊悚" },
                        { label: "犯罪", value: "犯罪" },
                        { label: "科幻", value: "科幻" },
                        { label: "悬疑", value: "悬疑" },
                        { label: "奇幻", value: "奇幻" },
                        { label: "冒险", value: "冒险" },
                        { label: "战争", value: "战争" },
                        { label: "历史", value: "历史" },
                        { label: "古装", value: "古装" },
                        { label: "家庭", value: "家庭" },
                        { label: "传记", value: "传记" },
                        { label: "武侠", value: "武侠" },
                        { label: "歌舞", value: "歌舞" },
                        { label: "短片", value: "短片" },
                        { label: "动画", value: "动画" },
                        { label: "儿童", value: "儿童" },
                        { label: "职场", value: "职场" },
                    ],
                },
                {
                    title: "地区:",
                    labelArr: [
                        { label: "全部", value: "" },
                        { label: "大陆", value: "中国大陆" },
                        { label: "香港", value: "中国香港" },
                        { label: "台湾", value: "中国台湾" },
                        { label: "美国", value: "美国" },
                        { label: "日本", value: "日本" },
                        { label: "韩国", value: "韩国" },
                        { label: "英国", value: "英国" },
                        { label: "法国", value: "法国" },
                        { label: "德国", value: "德国" },
                        { label: "印度", value: "印度" },
                        { label: "泰国", value: "泰国" },
                        { label: "丹麦", value: "丹麦" },
                        { label: "瑞典", value: "瑞典" },
                        { label: "巴西", value: "巴西" },
                        { label: "加拿大", value: "加拿大" },
                        { label: "俄罗斯", value: "俄罗斯" },
                        { label: "意大利", value: "意大利" },
                        { label: "比利时", value: "比利时" },
                        { label: "爱尔兰", value: "爱尔兰" },
                        { label: "西班牙", value: "西班牙" },
                        { label: "澳大利亚", value: "澳大利亚" },
                        { label: "其他", value: "其他" },
                    ],
                },
                {
                    title: "语言:",
                    labelArr: [
                        { label: "全部", value: "" },
                        { label: "国语", value: "国语" },
                        { label: "粤语", value: "粤语" },
                        { label: "英语", value: "英语" },
                        { label: "日语", value: "日语" },
                        { label: "韩语", value: "韩语" },
                        { label: "法语", value: "法语" },
                        { label: "其他", value: "其他" },
                    ],
                },
                {
                    title: "年份:",
                    labelArr: [
                        { label: "全部", value: "" },
                        { label: "2024", value: "2024" },
                        { label: "2023", value: "2023" },
                        { label: "2022", value: "2022" },
                        { label: "2021", value: "2021" },
                        { label: "2020", value: "2020" },
                        { label: "10年代", value: "2010_2019" },
                        { label: "00年代", value: "2000_2009" },
                        { label: "90年代", value: "1990_1999" },
                        { label: "80年代", value: "1980_1989" },
                        { label: "更早", value: "1979" },
                    ],
                },
                {
                    title: "排序:",
                    labelArr: [
                        { label: "综合", value: "1" },
                        { label: "最新", value: "2" },
                        { label: "最热", value: "3" },
                        { label: "评分", value: "4" },
                    ],
                },
            ],
            // {
            //     title: "类型:",
            //     labelArr: [
            //         { label: "全部", value: "" },
            //         { label: "逆袭", value: "逆袭" },
            //         { label: "甜宠", value: "甜宠" },
            //         { label: "虐恋", value: "虐恋" },
            //         { label: "穿越", value: "穿越" },
            //         { label: "重生", value: "重生" },
            //         { label: "剧情", value: "剧情" },
            //         { label: "科幻", value: "科幻" },
            //         { label: "武侠", value: "武侠" },
            //         { label: "爱情", value: "爱情" },
            //         { label: "动作", value: "动作" },
            //         { label: "战争", value: "战争" },
            //         { label: "冒险", value: "冒险" },
            //         { label: "其它", value: "其它" },
            //     ],
            // },
            tabList: [
                {
                    title: "推荐",
                    url: "https://www.keke1.app",
                },
                {
                    title: "电影",
                    url: "https://www.keke1.app/show/1",
                },
                {
                    title: "连续剧",
                    url: "https://www.keke1.app/show/2",
                },
                {
                    title: "动漫",
                    url: "https://www.keke1.app/show/3",
                },
                {
                    title: "综艺",
                    url: "https://www.keke1.app/show/4",
                },
                {
                    title: "短剧",
                    url: "https://www.keke1.app/show/6",
                },
            ],
            videoList: [],
            isLoading: false,
        };
    },
    methods: {
        openFile() {
            uni.navigateTo({
                url: `/pages/index/policy`,
            });
            // uni.openDocument({
            //     filePath: "/Movie/static/INK视频用户手册.doc",
            //     success: function (res) {
            //         console.log(res, "打开文件成功");
            //     },
            //     fail: (err) => {
            //         uni.showToast({
            //             title: "打开文件失败请重试",
            //             icon: "none",
            //         });
            //     },
            // });
        },
        // 前往历记录列表
        goHistory() {
            uni.navigateTo({
                url: `/pages/my/viewHistorys`,
            });
        },
        toSearch() {
            uni.navigateTo({
                url: "/pages/serach/serach",
            });
        },
        search() {
            let vm = this;
            vm.videoList = [];
            vm.$refs.paging.reload();
            // vm.getVideoList();
        },
        handleTag(index, val) {
            let vm = this;
            vm.selectTags[index] = val;
            vm.search();
        },
        async getHomeData() {
            let vm = this;
            let data = [];
            for (let i = 1; i < 6; i++) {
                data.push(await vm.getRecommendItme(i));
            }
            vm.$refs.paging.complete(data);
        },
        //获取视频列表
        getVideoList(pageNo = 1) {
            let vm = this;
            if (vm.tabIndex == 0) {
                this.getHomeData();
            } else {
                this.getTabData(pageNo);
            }
        },
        getTabData(pageNo) {
            let vm = this;
            uni.showLoading({
                title: "加载中",
            });
            let str = vm.selectTags.join("-");
            let url = `${vm.tabList[vm.tabIndex].url}-${str}-${pageNo}.html`;
            vm.isLoading = true;
            uni.request({
                url: url,
                method: "GET",
                success: async (res) => {
                    uni.hideLoading();
                    let data = listPackage(res.data, true);
                    vm.$refs.paging.complete(data);
                },
                fail: (err) => {
                    uni.hideLoading();
                    vm.$refs.paging.complete(false);
                },
            });
        },
        getRecommendItme(i) {
            let vm = this;
            return new Promise((resolve, reject) => {
                let str = vm.selectTags.join("-");
                let url = `${vm.tabList[i].url}-${str}-${1}.html`;
                let titleMap = {
                    1: "热门电影",
                    2: "热门连续剧",
                    3: "热门动漫",
                    4: "热门综艺",
                    5: "热门短剧",
                };
                uni.request({
                    url: url, // 接口地址
                    method: "GET", // 请求方法，可选值：GET、POST等
                    success: (res) => {
                        let obj = {
                            title: titleMap[i],
                            url: url,
                            children: listPackage(res.data).splice(0, 6),
                        };
                        resolve(obj);
                    },
                    fail: (err) => {
                        reject();
                    },
                });
            });
        },
        goPlayVideo(row) {
            uni.navigateTo({
                url: "/pages/play/play?url=" + row.url,
            });
        },
        setTabSelect(data) {
            let vm = this;
            vm.tabIndex = data.index;
            vm.selectTags = ["", "", "", "", "1"];
            vm.scrollLeft = 0;
            vm.search();
        },
    },
};
</script>
<style lang="less" scoped>
.tag-box {
    margin: 40rpx 0 0;
    .title {
        margin-right: 20rpx;
    }
    .tag-row {
        display: flex;
        align-items: center;
        .label {
            padding: 12rpx 18rpx;
            color: #5c5c5c;
            font-size: 28rpx;
            border-radius: 8rpx;
        }
        .active {
            color: #1dbc46;
            background: #d0f8dd;
        }
    }
    /deep/.uni-scroll-view-content {
        display: flex;
        margin: 0 18rpx 34rpx 0;
    }
}
</style>