youxi-app/pages/programming/progress.uvue

<script setup lang="ts">
import Back from '@/components/back.uvue'
import Loading from '@/components/loading.uvue'
import { ref, onMounted, computed, watch, nextTick, onUnmounted } from 'vue'
import { type SubjectCourseResult, fetchSubjectCourseApp, updateSubjectProgress } from '@/services/subject/course'
import { router, user, isTabletDevice } from '@/.cool'

const userInfo = computed(() => user.info.value?.userInfo)
const course = ref<SubjectCourseResult>()
const progress = ref(0)
const isLoading = ref(false)
//通过路由参数获取课程id
async function fetchCatalog() {
  course.value = await fetchSubjectCourseApp({ id: router.query().id })
}
onMounted(async () => {
  isLoading.value = true
  await fetchCatalog()
  isLoading.value = false
})
const visible = ref(false)
const menuItems = [
  { id: 1, name: '视频学习', icon: 'https://oss.xiaoxiongcode.com/static/home/6419.png', x: 0, y: 21 },
  // { id: 2, name: '实战指导', icon: 'https://oss.xiaoxiongcode.com/static/home/6418.png', x: 27, y: 19 },
  { id: 3, name: '参考答案', icon: 'https://oss.xiaoxiongcode.com/static/home/6416.png', x: 80, y: 16 },
  { id: 4, name: '开始编程', icon: 'https://oss.xiaoxiongcode.com/static/home/6417.png', x: 38, y: 18 },
]
//点击事件
function handleClick(id: number) {
  switch (id) {
    case 1:
      router.push({
        path: "/pages/programming/detail",
        query: {
          id: router.query().id,
        }
      });
      break
    case 2:
      router.push({
        path: "/pages/programming/code",
        query: {
          id: router.query().id,
          type: 2,
        }
      });
      break
    case 3:
      router.push({
        path: "/pages/programming/code",
        query: {
          id: router.query().id,
          type: 3,
        }
      });
      break
    case 4:
      const res = isTabletDevice()
      if (res) {
        router.push({
          path: "/pages/programming/web-view",
          query: {
            id: router.query().id,
          }
        });
      } else {
        visible.value = true
      }
      break
  }

}
function copyUrl() {
  uni.setClipboardData({
    data: 'www.xiaoxiongcode.com',
    showToast: true
  });
}
function handleExchange() {
  router.push({
    path: "/pages/programming/web-view",
    query: {
      id: router.query().id,
    }
  });
}
</script>
<template>
  <Loading v-show="isLoading" />
  <cl-page>
    <Back />
    <image class="absolute top-0 left-0 z-[1] w-full h-full " mode="aspectFill"
      src="https://oss.xiaoxiongcode.com/static/scratch/5.jpg" />
    <view class="main relative z-[2]">

      <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/scratch/6.png" />
        <view v-for="item in menuItems" :key="item.id"
          class="w-[10vw] h-[13vw] 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 src="https://oss.xiaoxiongcode.com/static/home/6415.png" class="w-[4vw] " mode="widthFix" />
          </view>
        </view>
      </view>
    </view>
    <cl-popup v-model="visible" :size="400" :show-header="false" direction="center">
      <view class="flex flex-col items-center justify-center gap-4 py-5 bg-slate-50">
        <view class="absolute top-2 right-2" @tap="visible = false">
          <cl-icon name="close-circle-fill" color="info" :size="20"></cl-icon>
        </view>
        <image mode="heightFix" src="https://oss.xiaoxiongcode.com/static/home/coding.png" class="h-[70rpx]" />
        <view class="text-center w-[300rpx]">
          <cl-text class="text-center" color="#fb923c" :size="16">非平板显示效果较差，建议使用平板或者电脑端操作！</cl-text>
          <cl-text class="text-center" color="#999" :size="14">账号：小程序登录手机账号 </cl-text>
          <cl-text class="text-center" color="#999" :size="14"> 密码：初始密码为123456 </cl-text>
          <cl-text class="text-center" color="#999" :size="14">少儿编程网址: www.xiaoxiongcode.com </cl-text>
          <cl-row :gutter="20">
            <cl-col :span="12">
              <cl-button type="primary" @tap="copyUrl"> 复制网址 </cl-button>
            </cl-col>
            <cl-col :span="12">
              <cl-button type="warn" @tap="handleExchange"> 继续前往 </cl-button>
            </cl-col>
          </cl-row>
        </view>
      </view>
    </cl-popup>
  </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>