youxi-app/pages/catalog/detail.uvue

<script setup lang='ts'>
import Back from '@/components/back.uvue'
import Loading from '@/components/loading.uvue'
import { ref, onMounted, watchEffect } from 'vue'
import { type SubjectCourseResult, fetchSubjectCourseApp, updateSubjectProgress } from '@/services/subject/course'
import { router } from '@/.cool'
const isLoading = ref(true)
const showProgress = ref(true)
const showControls = ref(true)
const showVideo = ref(true)

const data = ref({
  videoSrc: 'https://oss.xiaoxiongcode.com/course-1/animate/第1集_观察.mp4',
  webviewSrc: '',
})
const menuItems = [
  { id: 'watch', name: '看课', icon: 'https://oss.xiaoxiongcode.com/static/home/kanke.png' },
  { id: 'practice', name: '练习', icon: 'https://oss.xiaoxiongcode.com/static/home/lianxi.png' },
  { id: 'experiment', name: '虚拟实验', icon: 'https://oss.xiaoxiongcode.com/static/home/shiyan.png' },
  { id: 'diary', name: '科学日记', icon: 'https://oss.xiaoxiongcode.com/static/home/riji.png' }
]
const menu2Items = [
  { id: '1', name: '观察', icon: 'https://oss.xiaoxiongcode.com/static/home/kanke.png' },
  { id: '2', name: '提问', icon: 'https://oss.xiaoxiongcode.com/static/home/lianxi.png' },
  { id: '3', name: '假设', icon: 'https://oss.xiaoxiongcode.com/static/home/shiyan.png' },
  { id: '4', name: '实验', icon: 'https://oss.xiaoxiongcode.com/static/home/riji.png' },
  { id: '5', name: '总结', icon: 'https://oss.xiaoxiongcode.com/static/home/riji.png' },
  { id: '6', name: '拓展', icon: 'https://oss.xiaoxiongcode.com/static/home/riji.png' },
]
//当前进度
const progress = ref(1)
const progress2 = ref(1)


const course = ref<SubjectCourseResult>()
//通过路由参数获取课程id
async function fetchCatalog() {
  course.value = await fetchSubjectCourseApp({ id: router.query().id })
  if (!course.value?.courseUserProgress) {
    await updateSubjectProgress({
      courseId: course.value?.id,
      mainProgress: 1,
      assistantProgress: 1,
      status: 0
    })
    progress.value = 1
    progress2.value = 1
    data.value.videoSrc = course.value?.detailItem?.observeVideoPath || ''
    data.value.webviewSrc = course.value?.detailItem?.observeAnimationPath || ''
  } else {
    progress.value = 1
    progress2.value = 1
    // progress.value = course.value?.courseUserProgress.mainProgress
    // progress2.value = course.value?.courseUserProgress.assistantProgress
  }
}
onMounted(async () => {
  await fetchCatalog()
  isLoading.value = false
  setTimeout(() => {
    showProgress.value = false
  }, 2000)
})
async function handleEnded() {
  // await updateSubjectProgress({
  //   courseId: course.value?.id,
  //   mainProgress: 1,
  //   assistantProgress: 2,
  //   status: 0
  // })
  // progress2.value = 2

  switch (progress2.value) {
    case 1:
      showVideo.value = false
      break
  }
}



function handleControlsToggle(e) {
  console.log(e)
  showControls.value = e.detail.show
}

watchEffect(() => {
  if (progress.value === 1) {
    switch (progress2.value) {
      case 1:
        showVideo.value = true
        data.value.videoSrc = course.value?.detailItem?.observeVideoPath || ''
        data.value.webviewSrc = course.value?.detailItem?.observeAnimationPath || ''
        break
      case 2:
        showVideo.value = true
        data.value.videoSrc = course.value?.detailItem?.questionVideoPath || ''
        break
      case 3:
        showVideo.value = false
        data.value.webviewSrc = course.value?.detailItem?.assumeAnimationPath || ''
        break
      case 4:
        showVideo.value = true
        data.value.videoSrc = course.value?.detailItem?.testVideoPath || ''
        data.value.webviewSrc = course.value?.detailItem?.testAnimationPath || ''
        break
      case 5:
        data.value.videoSrc = course.value?.detailItem?.summaryVideoPath || ''
        break
      case 6:
        data.value.videoSrc = course.value?.detailItem?.expandVideoPath || ''
        break
    }
  }
  console.log(data.value.videoSrc)
})
function handleMessage(e) {
  console.log(e)
}
</script>
<template>
  <Loading v-show="isLoading" />
  <cl-page v-show="!isLoading">
    <Back v-show="showProgress" />
    <view v-if="showVideo" class="w-[64vw] h-[36vw] absolute top-1/2  z-[1] left-[7vw]  translate50"
      :class="{ ' rounded-2xl p-[3px] bg-black mt-[25px] ': showProgress, 'video-container': !showProgress }">
      <video id="video1" class="w-full h-full " :class="{ 'rounded-2xl': showProgress }" :src="data.videoSrc"
        :show-center-play-btn="false" :show-background-playback-button="false" :show-fullscreen-btn="false"
        :show-casting-button="false" autoplay @controlstoggle="handleControlsToggle" @ended="handleEnded">
      </video>
      <view class="video-fullscreen_title" v-show="showControls && !showProgress">
        <Back />
        <view class="text-[20px] font-bold text-white">
          {{ course?.mainTitle }}
        </view>
        <view class="control-progress">
          <view class="before"></view>
          <view v-for="(item, i) in menu2Items" :key="item.id"
            class="px-0 py-3 flex items-center justify-center gap-[5px] relative z-[1]"
            :class="{ '!bg-[#fff] rounded-full': progress2 == i + 1 }">
            <cl-image :src="item.icon" mode="heightFix" class="!h-[30px]"></cl-image>
            <text class="text-[14px]  font-bold" :class="{ '!text-[#2BA0F3]': progress2 == i + 1 }">{{ item.name
            }}</text>
          </view>
          <view class="before"></view>
        </view>
      </view>
    </view>
    <view v-if="!showVideo" class="w-full h-full absolute top-0 left-0 z-[1]">
      <view class="video-fullscreen_title">
        <Back v-show="!showProgress" />
        <view class="control-progress">
          <view class="before"></view>
          <view v-for="(item, i) in menu2Items" :key="item.id"
            class="px-0 py-3 flex items-center justify-center gap-[5px]  relative z-[1]"
            :class="{ '!bg-[#fff] rounded-full': progress2 == i + 1 }">
            <cl-image :src="item.icon" mode="heightFix" class="!h-[30px]"></cl-image>
            <text class="text-[14px]  font-bold" :class="{ '!text-[#2BA0F3]': progress2 == i + 1 }">{{ item.name
            }}</text>
          </view>
        </view>
      </view>
      <web-view :src="data.webviewSrc" class="w-full h-full" @message="handleMessage"></web-view>
    </view>
    <view class="course-detail-page" :class="{ 'hidden': !showProgress }">
      <!-- 顶部标题栏 -->
      <view class="flex-[1]  h-[100vh] relative">
        <view class="flex flex-row w-full pr-[3vw] pl-[10vw] items-center justify-between absolute top-[30px]">
          <text class="text-[5vh] font-bold">{{ course?.mainTitle }}</text>
          <text
            class="rounded-full p-[1vh] px-[2vh] border-2 border-[#fff] border-solid text-[#fff] text-[3vh] font-bold">课程收获</text>
        </view>

      </view>
      <!-- 右侧功能菜单 -->
      <view class="w-[25vw] h-[100vh] bg-[#5CBDFD] flex flex-col  justify-center p-5">
        <view v-for="(item, i) in menuItems" :key="item.id" class="h-[20vh]  flex flex-row items-center ">
          <view
            class="h-[15vh] w-[20vh] bg-[#999999] rounded-2xl border-[.5vh] border-[#254AD9] border-b-[1vh] border-solid flex items-center justify-center gap-[1vh]"
            :class="{ '!bg-[#fff]': progress > i }">
            <cl-image :src="item.icon" mode="heightFix" class="!h-[7vh]"></cl-image>
            <text class="text-[2vh] font-bold">{{ item.name }}</text>
          </view>
          <view class="flex items-center h-[20vh] ml-[2vh] ">
            <view class="w-[1vh] bg-[#B4DBF7] flex-1" :class="{ '!bg-[#71C73D]': progress > i, '!opacity-0': i === 0 }">
            </view>
            <view class="w-[5vh] bg-[#fff] h-[5vh] rounded-full" :class="{ '!bg-[#71C73D]': progress > i }"></view>
            <view class="w-[1vh] bg-[#B4DBF7] flex-1"
              :class="{ '!bg-[#71C73D]': progress > i, '!opacity-0': i === menuItems.length - 1 }"></view>
          </view>
        </view>
      </view>
    </view>

  </cl-page>
</template>
<style lang="scss" scoped>
.translate50 {
  transform: translateY(-50%);
}

.course-detail-page {
  @apply flex flex-row items-center;
  background-color: #3498DB;
  height: 100vh;
  color: black;
  transition: all 1s ease-in-out;

}

.video-container {
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  transform: translate(0, 0);
  animation: spin 2s linear 1;
  transition: all 2s ease-in-out;
}

@keyframes spin {
  0% {
    opacity: 50%;
  }

  100% {
    opacity: 1;
  }
}

.hidden {
  opacity: 0;
  transition: all 3s ease-in-out;
}

.video-fullscreen_title {
  @apply absolute top-3 left-0 pl-[80px] w-[100vw] z-10 flex items-center justify-between flex-row;
  color: #fff;

  .control-progress {
    @apply flex flex-row gap-[1vh] relative justify-end;
    flex: 1;

    .before {
      @apply absolute top-1/2 right-0 w-[410px] h-[40px] bg-[#2BA0F3] rounded-l-full;
      transform: translateY(-30%);
    }
  }
}

video::-webkit-media-controls-fullscreen-button,
video::-webkit-media-controls-enter-fullscreen-button,
video::-webkit-media-controls-rotate-button,
video::-webkit-media-controls-seek-back-button,
video::-webkit-media-controls-seek-forward-button {
  display: none !important;
}
</style>