1

pages.json

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

pages/catalog/detail.uvue

@@ -72,12 +72,51 @@ async function handleEnded() {
 
   switch (progress2.value) {
     case 1:
-      showVideo.value = false
+      router.push({
+        path: "/pages/catalog/web-view",
+        query: {
+          src: data.value.webviewSrc,
+          progress: progress2.value,
+        }
+      });
+      progress2.value++
+      break
+    case 2:
+      router.push({
+        path: "/pages/catalog/web-view",
+        query: {
+          src: data.value.webviewSrc,
+          progress: progress2.value,
+        }
+      });
+      progress2.value += 2
+      break
+    case 4:
+      router.push({
+        path: "/pages/catalog/web-view",
+        query: {
+          src: data.value.webviewSrc,
+          progress: progress2.value,
+        }
+      });
+      progress2.value++
+      break
+    case 5:
+    case 6:
+      progress2.value++
       break
   }
 }
-
-
+const status = ref('wait')
+onShow(() => {
+  var pages = getCurrentPages();
+  const prevPage = pages[pages.length - 1];
+  console.log('prevPage', prevPage)
+  status.value = prevPage?.status || 'wait'
+  if (status.value === 'success') {
+    // progress2.value++
+  }
+})
 
 function handleControlsToggle(e) {
   console.log(e)
@@ -116,14 +155,14 @@ watchEffect(() => {
   console.log(data.value.videoSrc)
 })
 function handleMessage(e) {
-  console.log(e)
+  console.log(123, 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"
+    <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.videoSrc"
         :show-center-play-btn="false" :show-background-playback-button="false" :show-fullscreen-btn="false"
@@ -147,22 +186,7 @@ function handleMessage(e) {
         </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">

pages/catalog/web-view.uvue

@@ -0,0 +1,42 @@
+<script setup lang='ts'>
+import { ref, onMounted, watchEffect } from 'vue'
+import { router } from '@/.cool'
+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 webviewSrc = ref('')
+onMounted(() => {
+  webviewSrc.value = router.query().src
+  progress.value = router.query().progress
+})
+function handleMessage(e) {
+  var pages = getCurrentPages();
+  const prevPage = pages[pages.length - 2];
+  prevPage.status = "success"
+}
+</script>
+<template>
+  <view class="w-full h-full absolute top-0 left-0 z-[11]">
+    <view class="video-fullscreen_title">
+      <Back />
+      <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': progress == i + 1 }">
+          <cl-image :src="item.icon" mode="heightFix" class="!h-[30px]"></cl-image>
+          <text class="text-[14px]  font-bold" :class="{ '!text-[#2BA0F3]': progress == i + 1 }">{{ item.name
+          }}</text>
+        </view>
+      </view>
+    </view>
+    <web-view :src="webviewSrc + '?' + Math.random()" class="w-full h-full" @message="handleMessage"></web-view>
+  </view>
+</template>
+<style lang="less" scoped></style>