feiYi/src/views/VideoView.vue

<script setup lang="ts">
import { ref } from 'vue';
import { useSimpleDataLoader } from '@/composeable/SimpleDataLoader';
import type { GetContentListItem } from '@/api/CommonContent';
import HuliApi from '@/api/huli/HuliApi';
import PageLeftTitleRightContent from '@/components/parts/PageLeftTitleRightContent.vue';
import SimplePopup from '@/components/SimplePopup.vue';
import HoriontalLargeList from '@/components/small/HoriontalLargeList.vue';
import SimplePageContentLoader from '@/components/SimplePageContentLoader.vue';

const newsData = useSimpleDataLoader(async (params) => {
  return (await HuliApi.getVideoList(1, 30)).map(p => {
    return {
      ...p,
      tag: '非物质文化遗产',
    }
  });
});

const showDialog = ref(false);
const currentItem = ref<GetContentListItem>();

function goDetail(item: GetContentListItem, index: number) {
  currentItem.value = item;
  showDialog.value = true;
}


</script>

<template>
  <PageLeftTitleRightContent title-after-text="科普·系列片" :box="false">
    <template #content>
      <SimplePageContentLoader :loader="newsData">
        <HoriontalLargeList :list="newsData.content.value!" @item-click="goDetail" />
      </SimplePageContentLoader>
    </template>
  </PageLeftTitleRightContent>
  <SimplePopup v-model:show="showDialog">
    <div class="dialog bg-light p-4 d-flex flex-col">
      <div class="d-flex flex-row align-center ">
        <img class="main-image-button" src="@/assets/images/IconBack.png" @click="showDialog = false"></img>
        <h2 class="mb-0 ml-3">{{ currentItem?.title }}</h2>
      </div>
      <video v-if="showDialog" class="w-100" :src="(currentItem?.video as string)" controls autoplay></video>
    </div>
  </SimplePopup>
</template>

<style lang="scss" scoped>
.dialog {
  position: relative;
  width: 60vw;
  height: 70vh;

  video {
    margin-top: 10px;
    height: calc(70vh - 60px - 3rem);
  }
}
</style>