youxi-app/pages/catalog/progress.uvue

<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>