1

pages.json

@@ -26,6 +26,13 @@
 				"navigationStyle": "custom",
 				"disableScroll": true
 			}
+		},
+		{
+			"path": "pages/catalog/detail",
+			"style": {
+				"navigationStyle": "custom",
+				"disableScroll": true
+			}
 		}
 	],
 	"globalStyle": {

pages/catalog/detail.uvue

@@ -0,0 +1,142 @@
+<script setup lang='ts'>
+import Back from '@/components/back.uvue'
+import Loading from '@/components/loading.uvue'
+import { ref, onMounted, getCurrentInstance } from 'vue'
+
+const isLoading = ref(true)
+const showProgress = ref(true)
+
+onMounted(async () => {
+  isLoading.value = false
+})
+const videoContext = ref<UniApp.VideoContext>()
+const data = ref({
+  src: 'https://oss.xiaoxiongcode.com/course-1/animate/第1集_观察.mp4'
+})
+const menuItems = [
+  { id: 'watch', name: '看课', icon: '📺', active: true },
+  { id: 'practice', name: '练习', icon: '📝', active: false },
+  { id: 'experiment', name: '虚拟实验', icon: '🧪', active: false },
+  { id: 'diary', name: '科学日记', icon: '📓', active: false }
+]
+onReady(() => {
+  videoContext.value = uni.createVideoContext("video1", getCurrentInstance()!.proxy!)
+})
+setTimeout(() => {
+  showProgress.value = false
+}, 2000)
+function handleControlsToggle(e) {
+  videoContext.value?.requestFullScreen({
+    direction: 0
+  })
+}
+</script>
+<template>
+  <Loading v-show="isLoading" />
+  <cl-page v-show="!isLoading">
+    <Back />
+    <view 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.src"
+        :show-center-play-btn="false" autoplay>
+      </video>
+      <template>
+        <view class="video-fullscreen_controls" @click="handleControlsToggle">
+          <view class="control-btn">
+            <text class="control-icon">23123123123</text>
+          </view>
+          <view class="control-btn">
+            <text class="control-icon">123213</text>
+          </view>
+          <view class="control-btn">
+            <text class="control-icon">123123123123</text>
+          </view>
+        </view>
+      </template>
+    </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">1、物质大揭秘！</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 "
+          :class="{ active: item.active }">
+          <view
+            class="h-[15vh] w-[20vh] bg-[#fff] rounded-2xl border-[.5vh] border-[#254AD9] border-b-[1vh] border-solid flex items-center justify-center gap-[1vh]">
+            <cl-image src="https://oss.xiaoxiongcode.com/static/home/4.png" 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]': item.active, '!bg-[#5CBDFD]': i === 0 }">
+            </view>
+            <view class="w-[5vh] bg-[#fff] h-[5vh] rounded-full" :class="{ 'bg-[#71C73D]': item.active }"></view>
+            <view class="w-[1vh] bg-[#B4DBF7] flex-1"
+              :class="{ 'bg-[#71C73D]': item.active, '!bg-[#5CBDFD]': 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_controls {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 0px;
+  height: 50px;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  z-index: 10;
+  width: 80vw;
+}
+</style>

pages/catalog/index.uvue

@@ -1,3 +1,37 @@
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue'
+import { fetchSubjectConfigInfo } from '@/services/subject/info'
+import type { SubjectCatalogResult } from '@/services/subject/catalog'
+import Progress from './components/progress.uvue'
+import Back from '@/components/back.uvue'
+import Loading from '@/components/loading.uvue'
+import { config } from '@/config'
+
+const isLoading = ref(true)
+
+const visible = ref<boolean>(false)
+const dataList = ref<SubjectCatalogResult[]>([])
+const catalog = ref<SubjectCatalogResult>()
+async function getDataList() {
+  const res = await fetchSubjectConfigInfo({ id: '69afc7e048070409048c06b6' })
+  dataList.value = res.catalogList || []
+  catalog.value = res?.catalogList?.[0]
+}
+onMounted(async () => {
+  await getDataList()
+  isLoading.value = false
+})
+function handleSelect(item: SubjectCatalogResult) {
+  catalog.value = item
+  visible.value = false
+}
+function handleDetail(item: SubjectCatalogResult) {
+  uni.navigateTo({
+    url: '/pages/catalog/detail?id=' + item.id
+  })
+}
+</script>
+
 <template>
   <Loading v-show="isLoading" />
   <cl-page v-show="!isLoading">
@@ -17,7 +51,8 @@
     </view>
     <view class="boxs">
       <scroll-view class="scroll-view_H" direction="horizontal" :show-scrollbar="false">
-        <view class="scroll-view-item_H bg-[white]" v-for="course in catalog?.courseList || []" :key="course.id">
+        <view class="scroll-view-item_H bg-[white]" v-for="course in catalog?.courseList || []" :key="course.id"
+          @tap="handleDetail(course)">
           <cl-image :src="config.baseUrl + course?.fileList?.[0]?.url" mode="heightFix"
             class="!w-full !h-[26vh] mb-[2px] rounded-xl"></cl-image>
           <text class="text-[16px] font-bold">{{
@@ -64,34 +99,7 @@
   </cl-page>
 </template>
 
-<script lang="ts" setup>
-import { ref, onMounted } from 'vue'
-import { fetchSubjectConfigInfo } from '@/services/subject/info'
-import type { SubjectCatalogResult } from '@/services/subject/catalog'
-import Progress from './components/progress.uvue'
-import Back from '@/components/back.uvue'
-import Loading from '@/components/loading.uvue'
-import { config } from '@/config'
-
-const isLoading = ref(true)
 
-const visible = ref<boolean>(false)
-const dataList = ref<SubjectCatalogResult[]>([])
-const catalog = ref<SubjectCatalogResult>()
-async function getDataList() {
-  const res = await fetchSubjectConfigInfo({ id: '69afc7e048070409048c06b6' })
-  dataList.value = res.catalogList || []
-  catalog.value = res?.catalogList?.[0]
-}
-onMounted(async () => {
-  await getDataList()
-  isLoading.value = false
-})
-function handleSelect(item: SubjectCatalogResult) {
-  catalog.value = item
-  visible.value = false
-}
-</script>
 
 <style lang="scss" scoped>
 .boxs {