|
|
@@ -0,0 +1,118 @@
|
|
|
+<script setup lang="ts">
|
|
|
+import Back from '@/components/back.uvue'
|
|
|
+import Loading from '@/components/loading.uvue'
|
|
|
+import { ref, onMounted, watch, nextTick, onUnmounted } from 'vue'
|
|
|
+import { type SubjectCourseResult, fetchSubjectCourseApp, updateSubjectProgress } from '@/services/subject/course'
|
|
|
+import { router } from '@/.cool'
|
|
|
+
|
|
|
+const course = ref<SubjectCourseResult>()
|
|
|
+const progress = ref(0)
|
|
|
+const isLoading = ref(false)
|
|
|
+const progressStatus = ref(0)
|
|
|
+//通过路由参数获取课程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
|
|
|
+ } else if (course.value?.courseUserProgress.status == 0) {
|
|
|
+ progressStatus.value = course.value?.courseUserProgress.status
|
|
|
+ progress.value = course.value?.courseUserProgress.assistantProgress
|
|
|
+ } else {
|
|
|
+ progress.value = 6
|
|
|
+ progressStatus.value = course.value?.courseUserProgress.status
|
|
|
+ }
|
|
|
+}
|
|
|
+onShow(async () => {
|
|
|
+ isLoading.value = true
|
|
|
+ await fetchCatalog()
|
|
|
+ setTimeout(() => {
|
|
|
+ isLoading.value = false
|
|
|
+ }, 1000)
|
|
|
+})
|
|
|
+
|
|
|
+const menuItems = [
|
|
|
+ { id: 1, name: '观察', icon: 'https://oss.xiaoxiongcode.com/static/home/6419.png' ,x:0,y:15},
|
|
|
+ { id: 2, name: '交互', icon: 'https://oss.xiaoxiongcode.com/static/home/6414.png' ,x:15,y:22},
|
|
|
+ { id: 3, name: '思考', icon: 'https://oss.xiaoxiongcode.com/static/home/6418.png' ,x:29,y:13},
|
|
|
+ { id: 4, name: '假设', icon: 'https://oss.xiaoxiongcode.com/static/home/6412.png' ,x:41,y:3},
|
|
|
+ { id: 5, name: '总结', icon: 'https://oss.xiaoxiongcode.com/static/home/6416.png' ,x:59,y:7},
|
|
|
+ { id: 6, name: '实验', icon: 'https://oss.xiaoxiongcode.com/static/home/6417.png' ,x:80,y:10},
|
|
|
+]
|
|
|
+//点击事件
|
|
|
+function handleClick(id: number) {
|
|
|
+ if (course.value?.id && course.value?.courseUserProgress.status == 0) {
|
|
|
+ updateSubjectProgress({
|
|
|
+ courseId: course.value?.id,
|
|
|
+ mainProgress: 1,
|
|
|
+ assistantProgress: id,
|
|
|
+ status: course.value?.courseUserProgress.status
|
|
|
+ })
|
|
|
+ }
|
|
|
+ router.push({
|
|
|
+ path: "/pages/catalog/detail",
|
|
|
+ query: {
|
|
|
+ id: router.query().id ,
|
|
|
+ progress: id,
|
|
|
+ }
|
|
|
+ });
|
|
|
+}
|
|
|
+</script>
|
|
|
+<template>
|
|
|
+ <!-- <Loading v-show="isLoading" /> -->
|
|
|
+ <cl-page>
|
|
|
+ <Back />
|
|
|
+ <view class="main">
|
|
|
+ <!-- <image class="absolute top-0 left-0 z-[1] w-full h-full " mode="aspectFill" src="https://oss.xiaoxiongcode.com/static/home/641.png" /> -->
|
|
|
+
|
|
|
+ <view class="text-[20px] font-bold text-[#333333] absolute top-6 left-20">
|
|
|
+ {{ course?.mainTitle }}
|
|
|
+ </view>
|
|
|
+ <view class="progress w-[90vw] h-[45vw] pb-[5vw] flex items-center justify-end ">
|
|
|
+ <image class="w-[80vw]" mode="widthFix" src="https://oss.xiaoxiongcode.com/static/home/形状 1.png" />
|
|
|
+ <view v-for="item in menuItems" :key="item.id" class="w-[10vw] h-[19vw] absolute flex items-center justify-between z-[2]"
|
|
|
+ :style="{
|
|
|
+ top: `${item.y}vw`,
|
|
|
+ left: `${item.x}vw`
|
|
|
+ }" @click="handleClick(item.id)">
|
|
|
+ <view class="w-[9vw] h-[9vw] flex items-center justify-center bg-[#fff] rounded-[2vw] box-shadow">
|
|
|
+ <image :src="item.icon" class="w-[4vw] " mode="widthFix" />
|
|
|
+ <text class="text-[2vw] text-[#000]">{{item.name}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="flex items-center justify-between gap-[1vw]">
|
|
|
+ <image v-if="progress === item.id&&progressStatus == 0" src="https://oss.xiaoxiongcode.com/static/home/6411.png" class="h-[4vw] " mode="heightFix" />
|
|
|
+ <view v-else-if="progress<item.id&&progressStatus == 0" class="text-[2vw] w-[4vw] h-[4vw] flex items-center justify-center text-bold text-[#333] bg-[#fff] rounded-full ">
|
|
|
+ {{ item.id }}
|
|
|
+ </view>
|
|
|
+ <image v-else src="https://oss.xiaoxiongcode.com/static/home/6413.png" class="h-[4vw] " mode="heightFix" />
|
|
|
+
|
|
|
+ <image src="https://oss.xiaoxiongcode.com/static/home/6415.png" class="w-[4vw] " mode="widthFix" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </cl-page>
|
|
|
+</template>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.main{
|
|
|
+ background: linear-gradient(0deg, #88C5F0, #D0ECFF);
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ .progress{
|
|
|
+ position: relative;
|
|
|
+ z-index: 2;
|
|
|
+ }
|
|
|
+}
|
|
|
+.box-shadow{
|
|
|
+box-shadow: 4px 7px 10px 0px rgba(62,166,238,0.44);
|
|
|
+}
|
|
|
+</style>
|
