beelink/src/views/regime/Live.vue

<template>
  <div class="video">
    <div class="nav">
        <div class="tabs">
            <div :class="tabindex == 1 ? 'on' : ''" @click="tabchange(1)">
            {{lan.$t('quanbuzhibo')}}
            </div>
            <div :class="tabindex == 0 ? 'on' : ''" @click="tabchange(0)">
            {{lan.$t('weikaishi')}}
            </div>
            <div :class="tabindex == 2 ? 'on' : ''" @click="tabchange(2)">
            {{lan.$t('yijieshu')}}
            </div>
        </div>
        <div class="sel">
            <img src="@/static/images/sousuo.png" alt="" class="icon" />
            <input :placeholder="lan.$t('zhibosousuo')" type="text" @keyup.enter="sel()" v-model="input" />
        </div>
    </div>
    <div class="list" v-if="tabindex == 1">
        <LiveItem
            :type="2"
            v-for="(i, j) in livelist.data"
            :key="j"
            :img="i.img"
            :title="i.title"
            :score="i.score"
            :date="i.dateline"
            :takehour="i.livetime"
            :livenum="i.count"
            :status="i.livestatus"
            :zid="i.liveid"
        ></LiveItem>
    </div>

    <div class="list" v-if="tabindex == 0">
        <LiveItem
            :type="2"
            v-for="(i, j) in livelist.data"
            :key="j"
            :img="i.img"
            :title="i.title"
            :score="i.score"
             :date="i.dateline"
            :takehour="i.livetime"
            :livenum="i.count"
            :status="i.livestatus"
            :zid="i.liveid"
        ></LiveItem>
    </div>
    <div class="list" v-if="tabindex == 2">
        <LiveItem
            :type="2"
            v-for="(i, j) in livelist.data"
            :key="j"
            :img="i.img"
            :title="i.title"
            :score="i.score"
            :date="i.dateline"
            :takehour="i.livetime"
            :livenum="i.count"
            :status="i.livestatus"
            :zid="i.liveid"
        ></LiveItem>
    </div>
    <template v-if="!livelist.total">
            <a-empty />
    </template>
    <div class="pages">
        <a-pagination v-if="livelist.total" v-model:current="page" :total="livelist.total" :showLessItems="true" />
    </div>
  </div>
</template>
<style lang="scss" scoped>
.video {
  width: 100%;
  height: 706px;
  background-color: #fff;
  border-radius: 17px;
  padding: 40px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
    .nav {
        display: flex;
        align-items: center;
        border-bottom: 1px solid #eee;
        justify-content: space-between;
        width: 100%;
        .tabs {
        display: flex;
        align-items: center;
        font-size: 13px;
        font-weight: bold;
        color: #111;
        padding: 11px 0;
        > div {
            margin-right: 58px;
            cursor: pointer;
            text-align: center;
            width: 54px;
            &:hover{
                color: #08ae98;
            }
        }
        .on {
            color: #08ae98;
            position: relative;
            &::before {
            content: "";
            display: block;
            position: absolute;
            bottom: -12px;
            width: 57px;
            height: 1px;
            background-color: #08ae98;
            }
        }
        }
        .sel {
        width: 171px;
        height: 26px;
        border: 1px solid #999;
        display: flex;
        align-items: center;
        padding: 8px;
        border-radius: 4px;
        > img {
            width: 11px;
            height: 11px;
        }
        > input {
            width: 119px;
            font-size: 9px;
            line-height: 1;
            margin-left: 6px;
            border: none;
            outline: none;
        }
        }
    }
    .list {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        > div {
            margin-top: 28px;
            margin-left: 23px;
            &:nth-child(1),
            &:nth-child(6) {
                margin-left: 0;
            }
        }
    }
    .pages {
        position: absolute;
        bottom: 114px;
        display: flex;
        justify-content: center;
        ::v-deep(.ant-pagination-next) > .ant-pagination-item-link,
        ::v-deep(.ant-pagination-prev) > .ant-pagination-item-link,
        ::v-deep(.ant-pagination-item),
        ::v-deep(.ant-pagination-jump-next-custom-icon),
        ::v-deep(.ant-pagination-jump-prev-custom-icon) {
        border: 1px solid #08ae98;
        }
        ::v-deep(.ant-pagination-item-active) a {
        color: #fff;
        }
        ::v-deep(.ant-pagination-item-active) {
        background-color: #08ae98;
        }
    }
}
</style>
<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
import LiveItem from "@/components/LiveItem.vue";
import { getlivelist } from "@/api";
import { LivelistInfo } from "@/types";
import { useI18n } from '@/utils/i18n';
export default defineComponent({
  components: {
    LiveItem,
  },
  setup() {
    const lan: any = useI18n();
    const page = ref(1);
    const tabindex = ref<number | string>(1);
    const livelist = ref<LivelistInfo>({
        code: 0,
        total: 0,
        msg: "",
        data: []
    });
    const input = ref("")
    onMounted(async () => {
        livelist.value = await getlivelist();
    });
    async function tab(){
        input.value = '';
        let index: string | number = '';
        if(tabindex.value != 1){
            index = tabindex.value
        }
        livelist.value = await getlivelist({ status: index});

    }
    function tabchange(e: number): void {
        tabindex.value = e;
        livelist.value = {data:[], code: 0, msg: "",total: 0};
        tab();
    }
    async function sel(){
        console.log(input.value);
        livelist.value = await getlivelist({title: input.value});
    }
   
    return {
        page,
        tabindex,
        tabchange,
        livelist,
        input,
        sel,
        lan
    };
  },
});
</script>