1

config/proxy.ts

@@ -26,4 +26,4 @@ export const proxy = {
 	}
 };
 
-export const value = "dev";
+export const value = "prod";

pages.json

@@ -41,7 +41,8 @@
 		"backgroundColorContent": "@bgContentColor",
 		"backgroundColor": "@bgColor",
 		"navigationBarBackgroundColor": "@navBgColor",
-		"pageOrientation": "landscape"
+		"pageOrientation": "landscape",
+		"navigationStyle": "custom"
 	},
 	"uniIdRouter": {}
 }

pages/catalog/detail.uvue

@@ -1,15 +1,17 @@
 <script setup lang='ts'>
 import Back from '@/components/back.uvue'
 import Loading from '@/components/loading.uvue'
-import { ref, onMounted, getCurrentInstance } from 'vue'
+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 videoContext = ref<UniApp.VideoContext>()
+const showVideo = ref(true)
+
 const data = ref({
-  src: 'https://oss.xiaoxiongcode.com/course-1/animate/第1集_观察.mp4'
+  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' },
@@ -30,27 +32,26 @@ const progress = ref(1)
 const progress2 = ref(1)
 
 
-onReady(() => {
-  videoContext.value = uni.createVideoContext("video1", getCurrentInstance()!.proxy!)
-})
-
 const course = ref<SubjectCourseResult>()
 //通过路由参数获取课程id
 async function fetchCatalog() {
   course.value = await fetchSubjectCourseApp({ id: router.query().id })
-  data.value.src = course.value?.detailItem?.observeVideoPath || ''
   if (!course.value?.courseUserProgress) {
-    // await updateSubjectProgress({
-    //   courseId: course.value?.id,
-    //   mainProgress: 1,
-    //   assistantProgress: 1,
-    //   status: 0
-    // })
+    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 = course.value?.courseUserProgress.mainProgress
-    progress2.value = course.value?.courseUserProgress.assistantProgress
+    progress.value = 1
+    progress2.value = 1
+    // progress.value = course.value?.courseUserProgress.mainProgress
+    // progress2.value = course.value?.courseUserProgress.assistantProgress
   }
 }
 onMounted(async () => {
@@ -61,45 +62,106 @@ onMounted(async () => {
   }, 2000)
 })
 async function handleEnded() {
-  await updateSubjectProgress({
-    courseId: course.value?.id,
-    mainProgress: 1,
-    assistantProgress: 2,
-    status: 0
-  })
-  progress2.value = 2
+  // 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 class="w-[64vw] h-[36vw] absolute top-1/2  z-[1] left-[7vw]  translate50"
+    <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.src"
+      <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">
-        <Back v-show="!showProgress" />
+      <view class="video-fullscreen_title" v-show="showControls && !showProgress">
+        <Back />
         <view class="text-[20px] font-bold text-white">
-          {{ course?.mainTitle }}是的
+          {{ 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]"
-            :class="{ '!bg-[#fff] rounded-full': progress2 > i }">
+            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 }">
       <!-- 顶部标题栏 -->
@@ -180,8 +242,7 @@ function handleControlsToggle(e) {
     @apply flex flex-row gap-[1vh] relative justify-end;
     flex: 1;
 
-    &:before {
-      content: '';
+    .before {
       @apply absolute top-1/2 right-0 w-[410px] h-[40px] bg-[#2BA0F3] rounded-l-full;
       transform: translateY(-30%);
     }

pages/catalog/index.uvue

@@ -8,12 +8,12 @@ import Loading from '@/components/loading.uvue'
 import { config } from '@/config'
 import { router } from "@/.cool";
 const isLoading = ref(true)
-
+const isDev = process.env.NODE_ENV == "development";
 const visible = ref<boolean>(false)
 const dataList = ref<SubjectCatalogResult[]>([])
 const catalog = ref<SubjectCatalogResult>()
 async function getDataList() {
-  const res = await fetchSubjectConfigInfo({ id: '69afc7e048070409048c06b6' })
+  const res = await fetchSubjectConfigInfo({ id: isDev ? '69c49329091547710d451f9d' : '69c49329091547710d451f9d' })
   dataList.value = res.catalogList || []
   catalog.value = res?.catalogList?.[0]
 }