|
|
@@ -1,31 +1,30 @@
|
|
|
<script setup lang='ts'>
|
|
|
import Back from '@/components/back.uvue'
|
|
|
import Loading from '@/components/loading.uvue'
|
|
|
-import { ref, onMounted, watchEffect, nextTick, onUnmounted } from 'vue'
|
|
|
+import { ref, onMounted, watch, nextTick, onUnmounted } 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',
|
|
|
+ videoSrc: '',
|
|
|
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 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/观察.png' },
|
|
|
{ id: '2', name: '思考', icon: 'https://oss.xiaoxiongcode.com/static/home/假设.png' },
|
|
|
{ id: '3', name: '假设', icon: 'https://oss.xiaoxiongcode.com/static/home/卡通扁平化功能图标设计.png' },
|
|
|
{ id: '4', name: '交互', icon: 'https://oss.xiaoxiongcode.com/static/home/总结.png' },
|
|
|
{ id: '5', name: '总结', icon: 'https://oss.xiaoxiongcode.com/static/home/拓展.png' },
|
|
|
- // { id: '6', name: '拓展', icon: 'https://oss.xiaoxiongcode.com/static/home/拓展.png' },
|
|
|
+ { id: '6', name: '实验', icon: 'https://oss.xiaoxiongcode.com/static/home/shiyan.png' },
|
|
|
]
|
|
|
//当前进度
|
|
|
const progress = ref(1)
|
|
|
@@ -63,93 +62,36 @@ async function fetchCatalog() {
|
|
|
})
|
|
|
progress.value = 1
|
|
|
progress2.value = 1
|
|
|
- data.value.videoSrc = course.value?.detailItem?.observeVideoPath || ''
|
|
|
- data.value.webviewSrc = course.value?.detailItem?.observeAnimationPath || ''
|
|
|
- } else if (course.value?.courseUserProgress.status === 0) {
|
|
|
- // progress.value = 1
|
|
|
- // progress2.value = 1
|
|
|
+ } else {
|
|
|
+ progressStatus.value = course.value?.courseUserProgress.status
|
|
|
progress.value = course.value?.courseUserProgress.mainProgress
|
|
|
progress2.value = course.value?.courseUserProgress.assistantProgress
|
|
|
- } else if (course.value?.courseUserProgress.status === 1) {
|
|
|
- progressStatus.value = 1
|
|
|
- progress.value = 1
|
|
|
- progress2.value = 1
|
|
|
}
|
|
|
}
|
|
|
onMounted(async () => {
|
|
|
+ isLoading.value = true
|
|
|
await fetchCatalog()
|
|
|
- isLoading.value = false
|
|
|
initOnlibeRecord()
|
|
|
setTimeout(() => {
|
|
|
- showProgress.value = false
|
|
|
isLoading.value = false
|
|
|
}, 1000)
|
|
|
})
|
|
|
async function handleEnded() {
|
|
|
-
|
|
|
- if (progress2.value === 5) {
|
|
|
- if (progress.value === 2) {
|
|
|
- return
|
|
|
- }
|
|
|
- progress.value++
|
|
|
- } else {
|
|
|
- progress2.value++
|
|
|
- }
|
|
|
- if (progress.value === 2) {
|
|
|
- return
|
|
|
- }
|
|
|
- if (progress2.value === 5) {
|
|
|
- progress.value++
|
|
|
- }
|
|
|
- if (progressStatus.value === 1) {
|
|
|
- return
|
|
|
- }
|
|
|
- await updateSubjectProgress({
|
|
|
- courseId: course.value?.id,
|
|
|
- mainProgress: progress.value,
|
|
|
- assistantProgress: progress2.value,
|
|
|
- status: 0
|
|
|
- })
|
|
|
-
|
|
|
- // switch (progress2.value) {
|
|
|
- // case 1:
|
|
|
- // router.push({
|
|
|
- // path: "/pages/catalog/web-view",
|
|
|
- // query: {
|
|
|
- // src: data.value.webviewSrc,
|
|
|
- // progress: progress2.value,
|
|
|
- // }
|
|
|
- // });
|
|
|
- // break
|
|
|
- // case 2:
|
|
|
- // case 4:
|
|
|
- // case 5:
|
|
|
- // case 5:
|
|
|
- // progress2.value++
|
|
|
- // break
|
|
|
- // }
|
|
|
+ progress.value++
|
|
|
}
|
|
|
const status = ref('wait')
|
|
|
onShow(async () => {
|
|
|
isLoading.value = true
|
|
|
var pages = getCurrentPages();
|
|
|
const prevPage = pages[pages.length - 1];
|
|
|
- console.log('prevPage', prevPage)
|
|
|
status.value = (prevPage as any)?.status || 'wait'
|
|
|
- if (status.value === 'test') {
|
|
|
- if (progress.value === 2) {
|
|
|
- progress2.value = 1
|
|
|
- progress.value = 1
|
|
|
- }
|
|
|
- (prevPage as any).status = 'wait'
|
|
|
- }
|
|
|
if (status.value === 'success') {
|
|
|
- if (progress.value === 2) {
|
|
|
+ if (progress2.value === 6) {
|
|
|
if (progressStatus.value === 0) {
|
|
|
await updateSubjectProgress({
|
|
|
courseId: course.value?.id,
|
|
|
- mainProgress: 2,
|
|
|
- assistantProgress: 5,
|
|
|
+ mainProgress: 1,
|
|
|
+ assistantProgress: 6,
|
|
|
status: 1
|
|
|
})
|
|
|
}
|
|
|
@@ -160,87 +102,74 @@ onShow(async () => {
|
|
|
(prevPage as any).status = 'wait'
|
|
|
}
|
|
|
isLoading.value = false
|
|
|
-
|
|
|
})
|
|
|
|
|
|
function handleControlsToggle(e) {
|
|
|
- console.log(e)
|
|
|
showControls.value = e.detail.show
|
|
|
}
|
|
|
|
|
|
-watchEffect(() => {
|
|
|
+watch(() => progress2.value, (newVal, oldVal) => {
|
|
|
isLoading.value = true
|
|
|
- setTimeout(() => {
|
|
|
- isLoading.value = false
|
|
|
- }, 2000)
|
|
|
- if (progress.value === 1) {
|
|
|
- switch (progress2.value) {
|
|
|
- case 1:
|
|
|
- setTimeout(() => {
|
|
|
- isLoading.value = false
|
|
|
- data.value.videoSrc = course.value?.detailItem?.observeVideoPath
|
|
|
- }, 2000)
|
|
|
- break
|
|
|
- case 2:
|
|
|
- setTimeout(() => {
|
|
|
- isLoading.value = false
|
|
|
- data.value.videoSrc = course.value?.detailItem?.questionVideoPath
|
|
|
- }, 2000)
|
|
|
- break
|
|
|
- case 3:
|
|
|
- setTimeout(() => {
|
|
|
- playVoice(course.value?.detailItem?.assumeAnimationPath)
|
|
|
- }, 1000)
|
|
|
- // data.value.webviewSrc = course.value?.detailItem?.assumeAnimationPath || data.value.webviewSrc
|
|
|
- // router.push({
|
|
|
- // path: "/pages/catalog/web-view",
|
|
|
- // query: {
|
|
|
- // src: data.value.webviewSrc,
|
|
|
- // progress: progress2.value,
|
|
|
- // }
|
|
|
- // });
|
|
|
- break
|
|
|
- case 4:
|
|
|
- // data.value.videoSrc = course.value?.detailItem?.testVideoPath || data.value.videoSrc
|
|
|
- data.value.webviewSrc = course.value?.detailItem?.summaryVideoPath
|
|
|
- router.push({
|
|
|
- path: "/pages/catalog/web-view",
|
|
|
- query: {
|
|
|
- src: data.value.webviewSrc,
|
|
|
- progress: progress2.value,
|
|
|
- }
|
|
|
- });
|
|
|
- break
|
|
|
- case 5:
|
|
|
- setTimeout(() => {
|
|
|
- isLoading.value = false
|
|
|
- data.value.videoSrc = course.value?.detailItem?.testVideoPath
|
|
|
- }, 2000)
|
|
|
- break
|
|
|
- case 6:
|
|
|
- setTimeout(() => {
|
|
|
- isLoading.value = false
|
|
|
- data.value.videoSrc = course.value?.detailItem?.expandVideoPath
|
|
|
- }, 2000)
|
|
|
- break
|
|
|
- }
|
|
|
- } else if (progress.value === 2) {
|
|
|
- data.value.webviewSrc = course.value?.testItem?.animationPath
|
|
|
- router.push({
|
|
|
- path: "/pages/catalog/web-view",
|
|
|
- query: {
|
|
|
- src: data.value.webviewSrc,
|
|
|
- progress: progress2.value,
|
|
|
- }
|
|
|
- });
|
|
|
+ if (course.value?.id) {
|
|
|
+ updateSubjectProgress({
|
|
|
+ courseId: course.value?.id,
|
|
|
+ mainProgress: progress.value,
|
|
|
+ assistantProgress: progress2.value,
|
|
|
+ status: progressStatus.value
|
|
|
+ })
|
|
|
}
|
|
|
-})
|
|
|
+ switch (progress2.value) {
|
|
|
+ case 1:
|
|
|
+ setTimeout(() => {
|
|
|
+ isLoading.value = false
|
|
|
+ data.value.videoSrc = course.value?.detailItem?.observeVideoPath
|
|
|
+ }, 2000)
|
|
|
+ break
|
|
|
+ case 2:
|
|
|
+ setTimeout(() => {
|
|
|
+ isLoading.value = false
|
|
|
+ data.value.videoSrc = course.value?.detailItem?.questionVideoPath
|
|
|
+ }, 2000)
|
|
|
+ break
|
|
|
+ case 3:
|
|
|
+ setTimeout(() => {
|
|
|
+ playVoice(course.value?.detailItem?.assumeAnimationPath)
|
|
|
+ }, 1000)
|
|
|
+ break
|
|
|
+ case 4:
|
|
|
+ data.value.webviewSrc = course.value?.detailItem?.summaryVideoPath
|
|
|
+ router.push({
|
|
|
+ path: "/pages/catalog/web-view",
|
|
|
+ query: {
|
|
|
+ src: data.value.webviewSrc,
|
|
|
+ progress: progress2.value,
|
|
|
+ }
|
|
|
+ });
|
|
|
+ break
|
|
|
+ case 5:
|
|
|
+ setTimeout(() => {
|
|
|
+ isLoading.value = false
|
|
|
+ data.value.videoSrc = course.value?.detailItem?.testVideoPath
|
|
|
+ }, 2000)
|
|
|
+ break
|
|
|
+ case 6:
|
|
|
+ data.value.webviewSrc = course.value?.testItem?.animationPath
|
|
|
+ router.push({
|
|
|
+ path: "/pages/catalog/web-view",
|
|
|
+ query: {
|
|
|
+ src: data.value.webviewSrc,
|
|
|
+ progress: progress2.value,
|
|
|
+ }
|
|
|
+ });
|
|
|
+ break
|
|
|
+ }
|
|
|
+
|
|
|
+}, { immediate: true })
|
|
|
const timers = ref(100)
|
|
|
const timer = ref<any>()
|
|
|
|
|
|
function handleTop() {
|
|
|
progress2.value = 4
|
|
|
- console.log(progress2.value)
|
|
|
}
|
|
|
function startRecord() {
|
|
|
console.log('开始录音');
|
|
|
@@ -270,17 +199,14 @@ onUnmounted(() => {
|
|
|
<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"
|
|
|
- :class="{ ' rounded-2xl p-[3px] bg-black mt-[25px] ': showProgress, 'video-container': !showProgress }">
|
|
|
- <video v-if="progress2 !== 3" 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">
|
|
|
+ <Back />
|
|
|
+ <view class="video-container">
|
|
|
+ <video v-if="progress2 !== 3" id="video1" class="w-full h-full " :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 v-else class="w-full h-full ">
|
|
|
<img src="https://oss.xiaoxiongcode.com/static/home/assert_1.gif" alt="" class="w-full h-full object-cover" />
|
|
|
-
|
|
|
<!-- 顶部提示文字 -->
|
|
|
<view class="absolute text-[20px] top-[20vh] w-full flex flex-row items-center justify-center">
|
|
|
<!-- <cl-icon name="notification-3-fill" color="#FCE762" :size="40"></cl-icon> -->
|
|
|
@@ -328,7 +254,7 @@ onUnmounted(() => {
|
|
|
@tap="handleTop">√</button>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="video-fullscreen_title" v-show="showControls && !showProgress">
|
|
|
+ <view class="video-fullscreen_title" v-show="showControls">
|
|
|
<Back />
|
|
|
<view class="text-[20px] font-bold text-white">
|
|
|
{{ course?.mainTitle }}
|
|
|
@@ -336,18 +262,17 @@ onUnmounted(() => {
|
|
|
<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 }" @tap="progress2 = i + 1">
|
|
|
+ class="py-2 px-3 flex items-center flex-row justify-center gap-[5px] relative z-[1]"
|
|
|
+ :class="{ '!bg-[#fff] rounded-l-full': progress2 == i + 1 }" @tap="progress2 = i + 1">
|
|
|
<cl-image :src="item.icon" mode="heightFix" class="!h-[28px] !w-[50px]"></cl-image>
|
|
|
<text class="text-[12px] font-bold" :class="{ '!text-[#2BA0F3]': progress2 == i + 1 }">{{ item.name
|
|
|
}}</text>
|
|
|
</view>
|
|
|
- <view class="before"></view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
- <view class="course-detail-page" :class="{ 'hidden': !showProgress }">
|
|
|
+ <view class="course-detail-page">
|
|
|
<!-- 顶部标题栏 -->
|
|
|
<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]">
|
|
|
@@ -358,7 +283,7 @@ onUnmounted(() => {
|
|
|
|
|
|
</view>
|
|
|
<!-- 右侧功能菜单 -->
|
|
|
- <view class="w-[25vw] h-[100vh] bg-[#5CBDFD] flex flex-col justify-center p-5">
|
|
|
+ <!-- <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]"
|
|
|
@@ -375,7 +300,7 @@ onUnmounted(() => {
|
|
|
:class="{ '!bg-[#71C73D]': progress >= i, '!opacity-0': i === menuItems.length - 1 }"></view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
+ </view> -->
|
|
|
</view>
|
|
|
|
|
|
</cl-page>
|
|
|
@@ -424,12 +349,12 @@ onUnmounted(() => {
|
|
|
color: #fff;
|
|
|
|
|
|
.control-progress {
|
|
|
- @apply flex flex-row gap-[3px] relative justify-end;
|
|
|
- flex: 1;
|
|
|
+ @apply fixed top-1/2 right-[0px] flex flex-col gap-[3px] z-[100] h-[280px];
|
|
|
+ transform: translateY(-50%);
|
|
|
|
|
|
.before {
|
|
|
- @apply absolute top-1/2 right-0 w-[300px] h-[40px] bg-[#2BA0F3] rounded-l-full;
|
|
|
- transform: translateY(-30%);
|
|
|
+ @apply absolute top-0 right-0 h-full w-full bg-[#2BA0F3];
|
|
|
+ border-radius: 25px 0 0 25px;
|
|
|
}
|
|
|
}
|
|
|
}
|
