教师简介

src/api/modules/study/index.ts

@@ -5,3 +5,6 @@ export const systemSubjectList = (params) =>
 // 学习计划
 export const trainingCampLearningPlanList = (params) =>
   get(`/trainingCamp/learningPlan/list`, params, {})
+// 教师简介
+export const systemTeacherProfileImages = (userNamePrefix) =>
+  get(`/system/teacher/profileImages/${userNamePrefix}`, {}, {})

src/views/study/components/study-layout.vue

@@ -113,7 +113,6 @@ const state: any = reactive({
   avatar: '',
 })
 const menusCpt = computed(() => {
-  console.log(router.getRoutes())
   return router.getRoutes().filter((v) => v.meta?.isMenu)
 })
 const rgbs = [

src/views/study/home/index.vue

@@ -180,142 +180,148 @@
               教师简介
             </div>
           </div>
-          <div class="relative flex-1 p-4">
+          <div class="relative flex-1 p-4" v-loading="state.teacher.loading">
             <div class="teacher-carousel h-full" id="teacherCarousel">
-              <div
-                class="teacher-slide active flex items-center justify-center p-6"
-              >
-                <div
-                  class="card-hover w-full max-w-4xl rounded-lg bg-gray-50 p-6"
-                  ref="ref_ccc"
-                >
-                  <div class="teacher-profile">
-                    <div class="teacher-avatar">
-                      <div
-                        class="mx-auto h-36 w-36 overflow-hidden rounded-full bg-gray-200"
-                      >
-                        <img
-                          src="https://picsum.photos/id/1005/200/200"
-                          alt="教师头像"
-                          class="h-full w-full object-cover"
-                        />
-                      </div>
-                    </div>
-                    <div class="teacher-info">
-                      <div class="mb-2 text-2xl font-bold text-gray-800">
-                        王老师 width: {{ ref_ccc?.clientWidth }} height:
-                        {{ ref_ccc?.clientHeight }}
-                      </div>
-                      <div class="mb-4 text-lg text-[var(--czr-main-color)]">
-                        语文教师 | 10年教龄
-                      </div>
-                      <div class="leading-relaxed text-gray-600">
-                        毕业于北京师范大学中文系，曾获市级优秀教师称号，擅长文言文教学和写作指导。教学风格生动有趣，注重培养学生的文学素养和审美能力。<br /><br />
-                        在过去的教学实践中，王老师开发了"情境式文言文教学法"，通过历史场景还原和角色扮演，帮助学生深入理解古文内涵。所带班级语文平均分连续五年位列年级第一，指导的学生多次在全国作文比赛中获奖。
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <div class="teacher-slide flex items-center justify-center p-6">
-                <div
-                  class="card-hover w-full max-w-4xl rounded-lg bg-gray-50 p-6"
-                >
-                  <div class="teacher-profile">
-                    <div class="teacher-avatar">
-                      <div
-                        class="mx-auto h-36 w-36 overflow-hidden rounded-full bg-gray-200"
-                      >
-                        <img
-                          src="https://picsum.photos/id/1010/200/200"
-                          alt="教师头像"
-                          class="h-full w-full object-cover"
-                        />
-                      </div>
-                    </div>
-                    <div class="teacher-info">
-                      <div class="mb-2 text-2xl font-bold text-gray-800">
-                        李老师 width: {{ ref_ccc?.clientWidth }} height:
-                        {{ ref_ccc?.clientHeight }}
-                      </div>
-                      <div class="mb-4 text-lg text-[var(--czr-main-color)]">
-                        数学教师 | 8年教龄
-                      </div>
-                      <div class="leading-relaxed text-gray-600">
-                        毕业于复旦大学数学系，教学风格生动有趣，注重培养学生的逻辑思维能力。曾多次指导学生参加数学竞赛并获得省级奖项，深受学生喜爱。<br /><br />
-                        李老师独创"生活化数学"教学模式，将抽象的数学概念与日常生活现象相结合，让学生在实践中理解数学原理。开发了多款数学学习小游戏，使枯燥的数学练习变得趣味盎然，有效提升了学生的学习兴趣和成绩。
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <div class="teacher-slide flex items-center justify-center p-6">
+              <template v-for="(item, index) in state.teacher.data">
                 <div
-                  class="card-hover w-full max-w-4xl rounded-lg bg-gray-50 p-6"
+                  class="teacher-slide flex items-center justify-center p-6"
+                  :class="index === 0 ? 'active' : ''"
                 >
-                  <div class="teacher-profile">
-                    <div class="teacher-avatar">
-                      <div
-                        class="mx-auto h-36 w-36 overflow-hidden rounded-full bg-gray-200"
-                      >
-                        <img
-                          src="https://picsum.photos/id/1000/200/200"
-                          alt="教师头像"
-                          class="h-full w-full object-cover"
-                        />
-                      </div>
-                    </div>
-                    <div class="teacher-info">
-                      <div class="mb-2 text-2xl font-bold text-gray-800">
-                        张老师 width: {{ ref_ccc?.clientWidth }} height:
-                        {{ ref_ccc?.clientHeight }}
-                      </div>
-                      <div class="mb-4 text-lg text-[var(--czr-main-color)]">
-                        英语教师 | 12年教龄
-                      </div>
-                      <div class="leading-relaxed text-gray-600">
-                        毕业于上海外国语大学，曾留学英国，擅长口语教学和应试技巧指导。教学方法新颖独特，注重培养学生的实际应用能力和跨文化交际能力。<br /><br />
-                        张老师引入"沉浸式英语教学法"，课堂上全程使用英语授课，创造母语学习环境。编写了《中学生日常英语会话手册》，收录了1000+实用对话场景，帮助学生快速提升口语能力。所教学生英语口语平均分高于年级平均水平20%。
-                      </div>
-                    </div>
-                  </div>
+                  <img :src="item" />
                 </div>
-              </div>
-
-              <div class="teacher-slide flex items-center justify-center p-6">
-                <div
-                  class="card-hover w-full max-w-4xl rounded-lg bg-gray-50 p-6"
-                >
-                  <div class="teacher-profile">
-                    <div class="teacher-avatar">
-                      <div
-                        class="mx-auto h-36 w-36 overflow-hidden rounded-full bg-gray-200"
-                      >
-                        <img
-                          src="https://picsum.photos/id/1003/200/200"
-                          alt="教师头像"
-                          class="h-full w-full object-cover"
-                        />
-                      </div>
-                    </div>
-                    <div class="teacher-info">
-                      <div class="mb-2 text-2xl font-bold text-gray-800">
-                        刘老师 width: {{ ref_ccc?.clientWidth }} height:
-                        {{ ref_ccc?.clientHeight }}
-                      </div>
-                      <div class="mb-4 text-lg text-[var(--czr-main-color)]">
-                        物理教师 | 15年教龄
-                      </div>
-                      <div class="leading-relaxed text-gray-600">
-                        毕业于清华大学物理系，教学经验丰富，多次指导学生在物理竞赛中获奖。注重理论与实践相结合，善于激发学生对科学的兴趣和探索精神。<br /><br />
-                        刘老师创建了"趣味物理实验室"，设计了50+个家庭可做的物理实验，让学生通过动手操作理解物理原理。带领学生参加全国青少年科技创新大赛，获得多项奖项。主编的《生活中的物理学》成为学校推荐阅读书目。
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
+              </template>
+              <!--              <div-->
+              <!--                class="teacher-slide active flex items-center justify-center p-6"-->
+              <!--              >-->
+              <!--                <div-->
+              <!--                  class="card-hover w-full max-w-4xl rounded-lg bg-gray-50 p-6"-->
+              <!--                  ref="ref_ccc"-->
+              <!--                >-->
+              <!--                  <div class="teacher-profile">-->
+              <!--                    <div class="teacher-avatar">-->
+              <!--                      <div-->
+              <!--                        class="mx-auto h-36 w-36 overflow-hidden rounded-full bg-gray-200"-->
+              <!--                      >-->
+              <!--                        <img-->
+              <!--                          src="https://picsum.photos/id/1005/200/200"-->
+              <!--                          alt="教师头像"-->
+              <!--                          class="h-full w-full object-cover"-->
+              <!--                        />-->
+              <!--                      </div>-->
+              <!--                    </div>-->
+              <!--                    <div class="teacher-info">-->
+              <!--                      <div class="mb-2 text-2xl font-bold text-gray-800">-->
+              <!--                        王老师-->
+              <!--                      </div>-->
+              <!--                      <div class="mb-4 text-lg text-[var(&#45;&#45;czr-main-color)]">-->
+              <!--                        语文教师 | 10年教龄-->
+              <!--                      </div>-->
+              <!--                      <div class="leading-relaxed text-gray-600">-->
+              <!--                        毕业于北京师范大学中文系，曾获市级优秀教师称号，擅长文言文教学和写作指导。教学风格生动有趣，注重培养学生的文学素养和审美能力。<br /><br />-->
+              <!--                        在过去的教学实践中，王老师开发了"情境式文言文教学法"，通过历史场景还原和角色扮演，帮助学生深入理解古文内涵。所带班级语文平均分连续五年位列年级第一，指导的学生多次在全国作文比赛中获奖。-->
+              <!--                      </div>-->
+              <!--                    </div>-->
+              <!--                  </div>-->
+              <!--                </div>-->
+              <!--              </div>-->
+              <!--              <div class="teacher-slide flex items-center justify-center p-6">-->
+              <!--                <div-->
+              <!--                  class="card-hover w-full max-w-4xl rounded-lg bg-gray-50 p-6"-->
+              <!--                >-->
+              <!--                  <div class="teacher-profile">-->
+              <!--                    <div class="teacher-avatar">-->
+              <!--                      <div-->
+              <!--                        class="mx-auto h-36 w-36 overflow-hidden rounded-full bg-gray-200"-->
+              <!--                      >-->
+              <!--                        <img-->
+              <!--                          src="https://picsum.photos/id/1010/200/200"-->
+              <!--                          alt="教师头像"-->
+              <!--                          class="h-full w-full object-cover"-->
+              <!--                        />-->
+              <!--                      </div>-->
+              <!--                    </div>-->
+              <!--                    <div class="teacher-info">-->
+              <!--                      <div class="mb-2 text-2xl font-bold text-gray-800">-->
+              <!--                        李老师 width: {{ ref_ccc?.clientWidth }} height:-->
+              <!--                        {{ ref_ccc?.clientHeight }}-->
+              <!--                      </div>-->
+              <!--                      <div class="mb-4 text-lg text-[var(&#45;&#45;czr-main-color)]">-->
+              <!--                        数学教师 | 8年教龄-->
+              <!--                      </div>-->
+              <!--                      <div class="leading-relaxed text-gray-600">-->
+              <!--                        毕业于复旦大学数学系，教学风格生动有趣，注重培养学生的逻辑思维能力。曾多次指导学生参加数学竞赛并获得省级奖项，深受学生喜爱。<br /><br />-->
+              <!--                        李老师独创"生活化数学"教学模式，将抽象的数学概念与日常生活现象相结合，让学生在实践中理解数学原理。开发了多款数学学习小游戏，使枯燥的数学练习变得趣味盎然，有效提升了学生的学习兴趣和成绩。-->
+              <!--                      </div>-->
+              <!--                    </div>-->
+              <!--                  </div>-->
+              <!--                </div>-->
+              <!--              </div>-->
+
+              <!--              <div class="teacher-slide flex items-center justify-center p-6">-->
+              <!--                <div-->
+              <!--                  class="card-hover w-full max-w-4xl rounded-lg bg-gray-50 p-6"-->
+              <!--                >-->
+              <!--                  <div class="teacher-profile">-->
+              <!--                    <div class="teacher-avatar">-->
+              <!--                      <div-->
+              <!--                        class="mx-auto h-36 w-36 overflow-hidden rounded-full bg-gray-200"-->
+              <!--                      >-->
+              <!--                        <img-->
+              <!--                          src="https://picsum.photos/id/1000/200/200"-->
+              <!--                          alt="教师头像"-->
+              <!--                          class="h-full w-full object-cover"-->
+              <!--                        />-->
+              <!--                      </div>-->
+              <!--                    </div>-->
+              <!--                    <div class="teacher-info">-->
+              <!--                      <div class="mb-2 text-2xl font-bold text-gray-800">-->
+              <!--                        张老师 width: {{ ref_ccc?.clientWidth }} height:-->
+              <!--                        {{ ref_ccc?.clientHeight }}-->
+              <!--                      </div>-->
+              <!--                      <div class="mb-4 text-lg text-[var(&#45;&#45;czr-main-color)]">-->
+              <!--                        英语教师 | 12年教龄-->
+              <!--                      </div>-->
+              <!--                      <div class="leading-relaxed text-gray-600">-->
+              <!--                        毕业于上海外国语大学，曾留学英国，擅长口语教学和应试技巧指导。教学方法新颖独特，注重培养学生的实际应用能力和跨文化交际能力。<br /><br />-->
+              <!--                        张老师引入"沉浸式英语教学法"，课堂上全程使用英语授课，创造母语学习环境。编写了《中学生日常英语会话手册》，收录了1000+实用对话场景，帮助学生快速提升口语能力。所教学生英语口语平均分高于年级平均水平20%。-->
+              <!--                      </div>-->
+              <!--                    </div>-->
+              <!--                  </div>-->
+              <!--                </div>-->
+              <!--              </div>-->
+
+              <!--              <div class="teacher-slide flex items-center justify-center p-6">-->
+              <!--                <div-->
+              <!--                  class="card-hover w-full max-w-4xl rounded-lg bg-gray-50 p-6"-->
+              <!--                >-->
+              <!--                  <div class="teacher-profile">-->
+              <!--                    <div class="teacher-avatar">-->
+              <!--                      <div-->
+              <!--                        class="mx-auto h-36 w-36 overflow-hidden rounded-full bg-gray-200"-->
+              <!--                      >-->
+              <!--                        <img-->
+              <!--                          src="https://picsum.photos/id/1003/200/200"-->
+              <!--                          alt="教师头像"-->
+              <!--                          class="h-full w-full object-cover"-->
+              <!--                        />-->
+              <!--                      </div>-->
+              <!--                    </div>-->
+              <!--                    <div class="teacher-info">-->
+              <!--                      <div class="mb-2 text-2xl font-bold text-gray-800">-->
+              <!--                        刘老师 width: {{ ref_ccc?.clientWidth }} height:-->
+              <!--                        {{ ref_ccc?.clientHeight }}-->
+              <!--                      </div>-->
+              <!--                      <div class="mb-4 text-lg text-[var(&#45;&#45;czr-main-color)]">-->
+              <!--                        物理教师 | 15年教龄-->
+              <!--                      </div>-->
+              <!--                      <div class="leading-relaxed text-gray-600">-->
+              <!--                        毕业于清华大学物理系，教学经验丰富，多次指导学生在物理竞赛中获奖。注重理论与实践相结合，善于激发学生对科学的兴趣和探索精神。<br /><br />-->
+              <!--                        刘老师创建了"趣味物理实验室"，设计了50+个家庭可做的物理实验，让学生通过动手操作理解物理原理。带领学生参加全国青少年科技创新大赛，获得多项奖项。主编的《生活中的物理学》成为学校推荐阅读书目。-->
+              <!--                      </div>-->
+              <!--                    </div>-->
+              <!--                  </div>-->
+              <!--                </div>-->
+              <!--              </div>-->
             </div>
 
             <!-- 轮播控制按钮 -->
@@ -326,13 +332,13 @@
               <i class="fas fa-chevron-right text-[var(--czr-main-color)]"></i>
             </button>
 
-            <!-- 轮播指示器 -->
-            <div class="carousel-indicators" id="carouselIndicators">
-              <button class="carousel-indicator active" data-index="0"></button>
-              <button class="carousel-indicator" data-index="1"></button>
-              <button class="carousel-indicator" data-index="2"></button>
-              <button class="carousel-indicator" data-index="3"></button>
-            </div>
+            <!--            轮播指示器-->
+            <!--            <div class="carousel-indicators" id="carouselIndicators">-->
+            <!--              <button class="carousel-indicator active" data-index="0"></button>-->
+            <!--              <button class="carousel-indicator" data-index="1"></button>-->
+            <!--              <button class="carousel-indicator" data-index="2"></button>-->
+            <!--              <button class="carousel-indicator" data-index="3"></button>-->
+            <!--            </div>-->
           </div>
         </div>
       </div>
@@ -341,11 +347,14 @@
 </template>
 
 <script setup lang="ts">
-import { onBeforeMount, onMounted, reactive, ref } from 'vue'
+import { nextTick, onBeforeMount, onMounted, reactive, ref } from 'vue'
 import StudyLayout from '@/views/study/components/study-layout.vue'
 import topCom from './top.vue'
 import { Hm, YM, YMD } from '@/utils/czr-util'
-import { trainingCampLearningPlanList } from '@/api/modules/study'
+import {
+  systemTeacherProfileImages,
+  trainingCampLearningPlanList,
+} from '@/api/modules/study'
 import { useAppStore } from '@/stores'
 
 const AppStore = useAppStore()
@@ -359,6 +368,10 @@ const state: any = reactive({
     data: [],
     date: YMD(new Date()),
   },
+  teacher: {
+    loading: false,
+    data: [],
+  },
   query: {
     p1: YM(new Date()),
     p2: '2023-06-11',
@@ -372,107 +385,109 @@ const state: any = reactive({
     user: null,
   },
 })
-const ref_ccc = ref()
 const ref_month = ref()
 const ref_date = ref()
 const initTeacher = () => {
-  // 教师简介轮播功能（单个老师轮播）
-  const carousel = document.getElementById('teacherCarousel')
-  const slides = document.querySelectorAll('.teacher-slide')
-  const prevBtn = document.getElementById('carouselPrev')
-  const nextBtn = document.getElementById('carouselNext')
-  const indicators = document.querySelectorAll('.carousel-indicator')
-
-  if (!carousel || !slides.length) return
-
-  let currentIndex = 0
-  const totalSlides = slides.length
-  let slideInterval
-
-  // 初始化轮播
-  const initCarousel = () => {
-    slides.forEach((slide, index) => {
-      if (index !== currentIndex) {
-        slide.classList.remove('active', 'prev', 'next')
-        slide.classList.add('next')
-      }
-    })
-    startSlideInterval()
-  }
-
-  // 显示指定索引的幻灯片
-  const showSlide = (index) => {
-    // 移除所有幻灯片的类
-    slides.forEach((slide) => {
-      slide.classList.remove('active', 'prev', 'next')
-    })
-
-    // 移除所有指示器的active类
-    indicators.forEach((indicator) => {
-      indicator.classList.remove('active')
-    })
+  state.teacher.loading = true
+  systemTeacherProfileImages('TEACHER_top')
+    .then(({ data }: any) => {
+      state.teacher.data = data
+
+      nextTick(() => {
+        // 教师简介轮播功能（单个老师轮播）
+        const carousel = document.getElementById('teacherCarousel')
+        const slides = document.querySelectorAll('.teacher-slide')
+        const prevBtn = document.getElementById('carouselPrev')
+        const nextBtn = document.getElementById('carouselNext')
+        // const indicators = document.querySelectorAll('.carousel-indicator')
+
+        if (!carousel || !slides.length) return
+
+        let currentIndex = 0
+        const totalSlides = slides.length
+        let slideInterval
+
+        // 初始化轮播
+        const initCarousel = () => {
+          slides.forEach((slide, index) => {
+            if (index !== currentIndex) {
+              slide.classList.remove('active', 'prev', 'next')
+              slide.classList.add('next')
+            }
+          })
+          startSlideInterval()
+        }
 
-    // 计算前一张和后一张的索引
-    const prevIndex = (index - 1 + totalSlides) % totalSlides
-    const nextIndex = (index + 1) % totalSlides
+        // 显示指定索引的幻灯片
+        const showSlide = (index) => {
+          // 移除所有幻灯片的类
+          slides.forEach((slide) => {
+            slide.classList.remove('active', 'prev', 'next')
+          })
 
-    // 为幻灯片添加相应的类
-    slides[prevIndex].classList.add('prev')
-    slides[index].classList.add('active')
-    slides[nextIndex].classList.add('next')
+          // 移除所有指示器的active类
+          // indicators.forEach((indicator) => {
+          //   indicator.classList.remove('active')
+          // })
 
-    // 激活当前指示器
-    indicators[index].classList.add('active')
+          // 计算前一张和后一张的索引
+          const prevIndex = (index - 1 + totalSlides) % totalSlides
+          const nextIndex = (index + 1) % totalSlides
 
-    currentIndex = index
-  }
+          // 为幻灯片添加相应的类
+          slides[prevIndex].classList.add('prev')
+          slides[index].classList.add('active')
+          slides[nextIndex].classList.add('next')
 
-  // 自动轮播函数
-  const startSlideInterval = () => {
-    slideInterval = setInterval(() => {
-      const nextIndex = (currentIndex + 1) % totalSlides
-      showSlide(nextIndex)
-    }, 5000) // 5秒切换一次
-  }
+          // 激活当前指示器
+          // indicators[index].classList.add('active')
 
-  // 上一张
-  prevBtn.addEventListener('click', () => {
-    const prevIndex = (currentIndex - 1 + totalSlides) % totalSlides
-    showSlide(prevIndex)
-    resetSlideInterval()
-  })
-
-  // 下一张
-  nextBtn.addEventListener('click', () => {
-    const nextIndex = (currentIndex + 1) % totalSlides
-    showSlide(nextIndex)
-    resetSlideInterval()
-  })
-
-  // 点击指示器切换幻灯片
-  indicators.forEach((indicator, index) => {
-    indicator.addEventListener('click', () => {
-      showSlide(index)
-      resetSlideInterval()
+          currentIndex = index
+        }
+        // 自动轮播函数
+        const startSlideInterval = () => {
+          slideInterval = setInterval(() => {
+            const nextIndex = (currentIndex + 1) % totalSlides
+            showSlide(nextIndex)
+          }, 5000) // 5秒切换一次
+        }
+        // 上一张
+        prevBtn.addEventListener('click', () => {
+          const prevIndex = (currentIndex - 1 + totalSlides) % totalSlides
+          showSlide(prevIndex)
+          resetSlideInterval()
+        })
+        // 下一张
+        nextBtn.addEventListener('click', () => {
+          const nextIndex = (currentIndex + 1) % totalSlides
+          showSlide(nextIndex)
+          resetSlideInterval()
+        })
+        // 点击指示器切换幻灯片
+        // indicators.forEach((indicator, index) => {
+        //   indicator.addEventListener('click', () => {
+        //     showSlide(index)
+        //     resetSlideInterval()
+        //   })
+        // })
+        // 鼠标悬停时暂停轮播
+        carousel.addEventListener('mouseenter', () => {
+          clearInterval(slideInterval)
+        })
+        // 鼠标离开时恢复轮播
+        carousel.addEventListener('mouseleave', startSlideInterval)
+        // 重置轮播定时器
+        const resetSlideInterval = () => {
+          clearInterval(slideInterval)
+          startSlideInterval()
+        }
+        // 初始化轮播
+        initCarousel()
+      })
+    })
+    .finally(() => {
+      state.teacher.loading = false
     })
-  })
-
-  // 鼠标悬停时暂停轮播
-  carousel.addEventListener('mouseenter', () => {
-    clearInterval(slideInterval)
-  })
-
-  // 鼠标离开时恢复轮播
-  carousel.addEventListener('mouseleave', startSlideInterval)
-
-  // 重置轮播定时器
-  const resetSlideInterval = () => {
-    clearInterval(slideInterval)
-    startSlideInterval()
-  }
-
-  // 初始化轮播
-  initCarousel()
 }
 const initTopHistory = () => {
   const arr: any = []