1

components/back.uvue

@@ -4,7 +4,7 @@ import { router } from "@/.cool";
 </script>
 <template>
   <view class="back" @click="router.back()">
-    <cl-image src="/static/home/back.png" height="22" width="30" mode="heightFix" />
+    <cl-image src="https://oss.xiaoxiongcode.com/static/home/back.png" height="22" width="30" mode="heightFix" />
   </view>
 </template>
 <style lang="scss" scoped>

pages/card/index.uvue

@@ -1,32 +1,66 @@
 <script setup lang='ts'>
 import Back from '@/components/back.uvue'
 import Loading from '@/components/loading.uvue'
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, nextTick } from 'vue'
 import { type SubjectKnowledgeCardResult, getSubjectKnowledgeCard } from '@/services/subject/card'
 import { fetchSubjectConfigInfo } from '@/services/subject/info'
 import type { SubjectCatalogResult } from '@/services/subject/catalog'
+// import uni from "@dcloudio/vite-plugin-uni";
 
 const activeCategory = ref<string>()
 const activeTab = ref<string>('knowledge')
 const isLoading = ref(true)
 const categories = ref<SubjectCatalogResult[]>([])
-
 const cards = ref<SubjectKnowledgeCardResult[]>([])
+const cardsScrollView = ref<any>(null)
+const categoryRefs = ref<any>()
 async function getDataList() {
-  const res = await fetchSubjectConfigInfo({ id: '69afc7e048070409048c06b6' })
+  const res = await getSubjectKnowledgeCard({ subjectId: '69afc7e048070409048c06b6' })
+  cards.value = res.userCardList || []
   categories.value = res.catalogList || []
-  handleSelect(res.id as string)
 }
-function handleSelect(subjectId: string) {
-  activeCategory.value = subjectId
-  getSubjectKnowledgeCard({ subjectId }).then(res => {
-    console.log(res)
-    cards.value = res.catalogList || []
+function handleSelect(categoryId: string) {
+  activeCategory.value = categoryId
+  // 滚动到对应分类位置
+  console.log(11, categoryRefs.value)
+  //找到第一个元素上categoryId属性与categoryId相同的元素
+  const element = categoryRefs.value.find((item: any) => {
+    return item.dataset.category === categoryId
   })
+  console.log(11, element)
+  if (element) {
+    const rect = element.getBoundingClientRect()
+    console.log(rect)
+    if (cardsScrollView.value) {
+      cardsScrollView.value.scrollTo({
+        top: rect.top, // 减去顶部偏移
+        animated: true
+      })
+    }
+  }
+}
+
+function onScroll(e: any) {
+  const scrollTop = e.detail.scrollTop
+  // 遍历所有分类，检查哪个分类在可视区域
+  for (const category of categories.value) {
+    const element = categoryRefs.value[category.id]
+    if (element) {
+      const rect = element.getBoundingClientRect()
+      // 检查元素是否在可视区域内
+      if (rect.top <= 150 && rect.bottom >= 150) {
+        activeCategory.value = category.id
+        break
+      }
+    }
+  }
 }
 onMounted(async () => {
   await getDataList()
   isLoading.value = false
+  nextTick(() => {
+    handleSelect(categories.value[0].id as string)
+  })
 })
 </script>
 <template>
@@ -52,11 +86,13 @@ onMounted(async () => {
             <view class="tab" :class="{ active: activeTab === 'honor' }" @tap="activeTab = 'honor'">荣誉</view>
           </view>
         </view>
-        <scroll-view direction="vertical" :show-scrollbar="false" class="cards">
+        <scroll-view direction="vertical" :show-scrollbar="false" class="cards" ref="cardsScrollView"
+          @scroll="onScroll">
           <view class="grid grid-cols-5 gap-4">
-            <view class="card" v-for="card in cards" :key="card.id">
-              <image src="/static/home/21.png" class="w-full h-full" />
-              <view class="card-title">{{ card.name }}</view>
+            <view class="card" v-for="card in cards" :key="card.id" :data-category="card.catalogId" ref="categoryRefs">
+              <image v-if="card.userCardId" :src="card.iconPath" class="w-full h-full" />
+              <image v-else src="https://oss.xiaoxiongcode.com/static/home/21.png" class="w-full h-full" />
+              <view class="card-title">{{ card.cardName }}</view>
             </view>
           </view>
         </scroll-view>
@@ -132,6 +168,14 @@ onMounted(async () => {
       height: calc(100vh - 90px);
     }
 
+    .category-section {
+      margin-bottom: 40px;
+
+      .category-title {
+        @apply text-white font-bold text-xl mb-4;
+      }
+    }
+
     .card {
       // background-color: rgba(255, 255, 255, 0.9);
       // border-radius: 16px;

pages/catalog/index.uvue

@@ -2,9 +2,10 @@
   <Loading v-if="isLoading" />
   <cl-page v-else>
     <Back />
-    <img src="/static/home/2.png" alt="" class="w-full h-full object-cover" />
+    <img src="https://oss.xiaoxiongcode.com/static/home/2.png" alt="" class="w-full h-full object-cover" />
     <!-- 精灵图动画 -->
-    <cl-image src="/static/home/3.gif" mode="heightFix" class="!absolute bottom-0 left-0 !w-[44vh] !h-[55vh] z-[1]" />
+    <cl-image src="https://oss.xiaoxiongcode.com/static/home/3.gif" mode="heightFix"
+      class="!absolute bottom-0 left-0 !w-[44vh] !h-[55vh] z-[1]" />
     <view>
 
     </view>
@@ -31,15 +32,18 @@
     </view>
     <view class="footer">
       <view>
-        <cl-image src="/static/home/4.png" mode="heightFix" class=" !h-[40px] mb-[2px] rounded-xl"></cl-image>
+        <cl-image src="https://oss.xiaoxiongcode.com/static/home/4.png" mode="heightFix"
+          class=" !h-[40px] mb-[2px] rounded-xl"></cl-image>
         <text class="text-[14px] text-white font-bold text-stroke-custom">虚拟实验</text>
       </view>
       <view>
-        <cl-image src="/static/home/5.png" mode="heightFix" class=" !h-[40px] mb-[2px] rounded-xl"></cl-image>
+        <cl-image src="https://oss.xiaoxiongcode.com/static/home/5.png" mode="heightFix"
+          class=" !h-[40px] mb-[2px] rounded-xl"></cl-image>
         <text class="text-[14px] text-white font-bold text-stroke-custom">我的收获</text>
       </view>
       <view>
-        <cl-image src="/static/home/6.png" mode="heightFix" class=" !h-[40px] mb-[2px] rounded-xl"></cl-image>
+        <cl-image src="https://oss.xiaoxiongcode.com/static/home/6.png" mode="heightFix"
+          class=" !h-[40px] mb-[2px] rounded-xl"></cl-image>
         <text class="text-[14px] text-white font-bold text-stroke-custom">学习报告</text>
       </view>
     </view>

pages/index/home.uvue

@@ -7,10 +7,10 @@ function handlePage(url) {
 </script>
 <template>
 	<cl-page>
-		<img src="/static/home/11.png" alt="" class="w-full h-full object-cover" />
+		<img src="https://oss.xiaoxiongcode.com/static/home/11.png" alt="" class="w-full h-full object-cover" />
 		<view class="content">
 			<view class="relative w-[25vw] " @click="handlePage('/pages/catalog/index')">
-				<img src="/static/home/13.png" alt="" class="w-full object-cover" />
+				<img src="https://oss.xiaoxiongcode.com/static/home/13.png" alt="" class="w-full object-cover" />
 				<view class="absolute top-0 left-0 w-full h-full flex flex-col items-center justify-center text-white pb-3">
 					<view class="text-2xl font-bold">全部课程</view>
 					<view class="text-[11px] px-2 py-1 rounded-full bg-[#55B58A] text-white font-bold mt-2">点击这里查看上过课程</view>
@@ -20,34 +20,34 @@ function handlePage(url) {
 				<cl-row>
 					<cl-col :span="12" :pt="{ className: '!p-3' }">
 						<view class="relative w-full ">
-							<img src="/static/home/14.png" alt="" class="w-full object-cover" />
+							<img src="https://oss.xiaoxiongcode.com/static/home/14.png" alt="" class="w-full object-cover" />
 							<view class="absolute top-4 left-5">
 								<view class="text-2xl font-bold">虚拟实验</view>
 							</view>
 							<view class="absolute bottom-5 right-3">
-								<img src="/static/home/17.png" alt="" class="w-[16vw] object-cover" />
+								<img src="https://oss.xiaoxiongcode.com/static/home/17.png" alt="" class="w-[16vw] object-cover" />
 							</view>
 						</view>
 					</cl-col>
 					<cl-col :span="12" :pt="{ className: '!p-3' }">
 						<view class="relative w-full ">
-							<img src="/static/home/15.png" alt="" class="w-full object-cover" />
+							<img src="https://oss.xiaoxiongcode.com/static/home/15.png" alt="" class="w-full object-cover" />
 							<view class="absolute top-4 left-5">
 								<view class="text-2xl font-bold">学习报告</view>
 							</view>
 							<view class="absolute bottom-1 right-3">
-								<img src="/static/home/18.png" alt="" class="w-[15vw] object-cover" />
+								<img src="https://oss.xiaoxiongcode.com/static/home/18.png" alt="" class="w-[15vw] object-cover" />
 							</view>
 						</view>
 					</cl-col>
 					<cl-col :span="12" :pt="{ className: '!p-3' }" @click="handlePage('/pages/card/index')">
 						<view class="relative w-full ">
-							<img src="/static/home/16.png" alt="" class="w-full object-cover" />
+							<img src="https://oss.xiaoxiongcode.com/static/home/16.png" alt="" class="w-full object-cover" />
 							<view class="absolute top-4 left-5">
 								<view class="text-2xl font-bold">我的收获</view>
 							</view>
 							<view class="absolute bottom-2 right-2">
-								<img src="/static/home/19.png" alt="" class="w-[20vw] object-cover" />
+								<img src="https://oss.xiaoxiongcode.com/static/home/19.png" alt="" class="w-[20vw] object-cover" />
 							</view>
 						</view>
 					</cl-col>

pages/user/login.uvue

@@ -1,12 +1,12 @@
 <template>
 	<cl-page>
 		<Back />
-		<img src="/static/home/1.jpg" alt="" class="w-full h-full object-cover">
+		<img src="https://oss.xiaoxiongcode.com/static/home/1.jpg" alt="" class="w-full h-full object-cover">
 		<view class="title">
 			少儿物理启蒙
 		</view>
 		<view class="group">
-			<cl-image src="/static/home/8.png" width="150px" height="150px" mode="heightFix" />
+			<cl-image src="https://oss.xiaoxiongcode.com/static/home/8.png" width="150px" height="150px" mode="heightFix" />
 			<view class="w-[40vw]">
 				<cl-tabs v-model="val" :list="list" :form="formData" @change="tabsChange"></cl-tabs>
 				<cl-form v-model="formData" :pt="{ className: 'mt-1' }">

services/subject/card.ts

@@ -1,10 +1,12 @@
 import { usePost, stringify, useGet } from "@/.cool";
 import type { SubjectCourseResult } from './course'
 import type { FileList } from '../types/index'
+import type { SubjectCatalogResult } from '@/services/subject/catalog'
 
 export interface SubjectKnowledgeCardResult {
     id?: string
     name?: string
+    cardName?: string
     subjectId?: string
     catalogId?: string
     iconPath?: string
@@ -17,11 +19,12 @@ export interface SubjectKnowledgeCardResult {
     createdUserId?: string
     createdUserName?: string
     createdTime?: string
+    userCardId?: string
     updateTime?: string
 }
 export interface SubjectCardResult {
-    userCardList?: string[]
-    catalogList?: SubjectKnowledgeCardResult[]
+    userCardList?: SubjectKnowledgeCardResult[]
+    catalogList?: SubjectCatalogResult[]
 }
 export function getSubjectKnowledgeCardPage(parameter: any) {
     return useGet(`/subject/card/page`, parameter)