update

src/views/CollegeGroup/Cfa.vue

@@ -3,6 +3,7 @@ import { ref, reactive, watch } from "vue";
 import { useMainStore } from "@/stores/store";
 import axios from "axios";
 import moment from "moment";
+import CourseCard from "@/components/CourseCard.vue";
 
 const store = useMainStore();
 const breadcrumbs = reactive([
@@ -116,6 +117,35 @@ async function getTgcReport() {
 }
 
 getTgcReport();
+
+// 媒體報導
+let coursePageNum = ref(1); // 頁數(預設第一頁)
+let coursePageAmount = ref(6); // 每頁顯示筆數
+let courseTotalPages = ref(1); // 總頁數
+let courseLoading = ref(false);
+
+const courseData = reactive({
+  classes: [],
+});
+
+async function getClass() {
+  courseLoading.value = true;
+
+  try {
+    const response = await axios.get(
+      `https://cmm.ai:8088/api/get_class_name?group_sort=希望工程&is_check=1&page_num=${coursePageNum.value}&page_amount=${coursePageAmount.value}`
+    );
+    courseTotalPages.value = store.getTotalPages(response.data.total_num, 6);
+    courseData.classes = response.data.classes;
+    courseLoading.value = false;
+    console.log("getClass response", courseData.classes);
+  } catch (error) {
+    courseLoading.value = false;
+    console.error(error);
+  }
+}
+
+getClass();
 </script>
 
 <template>
@@ -247,6 +277,37 @@ getTgcReport();
       <v-expansion-panel-text v-html="item.a"> </v-expansion-panel-text>
     </v-expansion-panel>
   </v-expansion-panels>
+
+  <div class="title" ref="mediaList">
+    <h2>臺灣綠工藝希望工程－課程</h2>
+  </div>
+
+  <div class="d-flex justify-center mb-10" v-if="courseLoading">
+    <v-progress-circular
+      color="grey-lighten-4"
+      indeterminate
+    ></v-progress-circular>
+  </div>
+
+  <v-row v-else>
+    <v-col
+      sm="6"
+      lg="4"
+      cols="12"
+      v-for="(item, index) in courseData.classes"
+      :key="index"
+      class="pa-5"
+    >
+      <CourseCard :data="item" />
+    </v-col>
+  </v-row>
+
+  <v-pagination
+    v-model="coursePageNum"
+    :length="courseTotalPages"
+    rounded="circle"
+    class="mt-16"
+  ></v-pagination>
 </template>
 
 <style lang="scss" scoped>

src/views/CourseList.vue

@@ -97,8 +97,6 @@ async function search() {
   }
 }
 
-let progress = ref(false);
-
 const breadcrumbs = reactive([
   {
     title: "首頁",
@@ -315,13 +313,6 @@ watch(selectCategory, (val) => {
               <CourseCard :data="item" />
             </v-col>
           </v-row>
-          <div class="progress-item" v-if="progress">
-            <v-progress-circular
-              :size="50"
-              indeterminate
-              color="primary"
-            ></v-progress-circular>
-          </div>
 
           <div
             v-if="searchError"