beelink/src/views/regime/Video.vue

<template>
  <div class="video">
    <div class="nav">
      <div class="tabs">
        <div :class="tabindex == 4 ? 'on' : ''" @click="tabchange(4)">
          全部视频
        </div>
        <div :class="tabindex == 0 ? 'on' : ''" @click="tabchange(0)">
          审核中
        </div>
        <div :class="tabindex == 1 ? 'on' : ''" @click="tabchange(1)">
          未通过
        </div>
        <div :class="tabindex == 2 ? 'on' : ''" @click="tabchange(2)">
          已发布
        </div>
      </div>
      <div class="sel">
        <img src="@/static/images/sousuo.png" alt="" class="icon" />
        <input type="text"  placeholder="请输入想要搜索的直播标题"  @keyup.enter="sel()" v-model="input"/>
      </div>
    </div>
    <div class="list" v-if="tabindex == 4">
      <VideoItem
        v-for="(i, j) in videolist.data"
        :key="j"
        :videoid="i.videoid"
        :img="i.img"
        :title="i.title"
        :score="i.score"
        :date="i.created_at"
        :takehour="i.fileduration"
        :livenum="i.statusname"
        :status="i.status"
        :watch="i.watch"
        :share="i.share"
      ></VideoItem>
    </div>

    <div class="list" v-if="tabindex == 0">
      <VideoItem
        v-for="(i, j) in videolist.data"
        :key="j"
        :img="i.img"
        :title="i.title"
        :score="i.score"
        :date="i.created_at"
        :takehour="i.fileduration"
        :livenum="i.statusname"
        :status="i.status"
        :watch="i.watch"
        :share="i.share"
      ></VideoItem>
    </div>
    <div class="list" v-if="tabindex == 1">
      <VideoItem
        v-for="(i, j) in videolist.data"
        :key="j"
        :img="i.img"
        :title="i.title"
        :score="i.score"
        :date="i.created_at"
        :takehour="i.fileduration"
        :livenum="i.statusname"
        :status="i.status"
        :watch="i.watch"
        :share="i.share"
      ></VideoItem>
    </div>
    <div class="list" v-if="tabindex == 2">
      <VideoItem
        v-for="(i, j) in videolist.data"
        :key="j"
        :img="i.img"
        :title="i.title"
        :score="i.score"
        :date="i.created_at"
        :takehour="i.fileduration"
        :livenum="i.statusname"
        :status="i.status"
        :watch="i.watch"
        :share="i.share"
      ></VideoItem>
    </div>
    <div class="pages">
      <a-pagination v-model:current="page" :total="videolist.total" :showLessItems="true" @change="pagechange" />
    </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;
      }
      .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, reactive, ref, UnwrapRef } from "vue";
import VideoItem from "@/components/VideoItem.vue";
import { getvideolist } from "@/api";
import { useRoute } from 'vue-router';
export default defineComponent({
  components: {
    VideoItem,
  },
  setup() {
    const page = ref(6);
    const tabindex = ref(4);
    interface VideoList {
      videoid: number;
      memberid: number;
      title: string;
      img: string;
      fileid: string;
      fileurl: string;
      fileduration: string;
      status: number;
      desc: string;
      deleted_at: null;
      created_at: string;
      updated_at: string;
      statusname: string;
    }
    
    const videolist = ref({})
    // const newvideolist = ref<Array<VideoList>>();
     const input = ref("")
    

    onMounted(async () => {

      const res = await getvideolist();
      videolist.value = res;

    });
    function tabchange(e: number): void {
      tabindex.value = e;
      // console.log(videolist)
    }
    async function sel(){
        console.log(input.value);
        page.value = 1;
          videolist.value = await getvideolist({title: input.value,page:page.value});
    }
    async function  pagechange() {
      videolist.value = await getvideolist({title: input.value,page:page.value});
    }
    return {
      page,
      tabindex,
      tabchange,
      videolist,
      sel,
      input,
      pagechange
    };
  },
});
</script>