update

src/language/en.json

@@ -284,7 +284,7 @@
     "periodic_courses_note": "When selecting periodic courses, the start and end date may not be on the same day",
     "delete_session": "Delete the session",
     "delete_session_confirmation": "Are you sure you want to delete the session?",
-    "content_requirements": "Content must be at least 100 characters, and can only contain information related to craft.",
+    "content_requirements": "Content must be at least 50 characters, and can only contain information related to craft.",
     "display_on_course_intro": "Will be displayed on course introduction for contact purposes",
     "registration_consent": "Registration Consent",
     "course_registration": "Course Registration"

src/language/zh.json

@@ -283,7 +283,7 @@
     "periodic_courses_note": "選擇週期課程時，起始日期與結束日期不可為同一天",
     "delete_session": "刪除場次",
     "delete_session_confirmation": "確定要刪除該場次嗎？",
-    "content_requirements": "內容不得少於 100 個字元，且不得含有工藝無關之資訊",
+    "content_requirements": "內容不得少於 50 個字元，且不得含有工藝無關之資訊",
     "display_on_course_intro": "會顯示於課程介紹中，想了解課程資訊者聯繫用途",
     "registration_consent": "報名同意書",
     "course_registration": "課程報名表"

src/router/index.js

@@ -361,16 +361,19 @@ const router = createRouter({
 
 // 檢查登入狀態
 router.beforeEach((to, from, next) => {
-  // 切換頁面時回到畫面最上方
-  setTimeout(() => {
-    window.scrollTo({ top: 0 });
-  }, 300);
+  if (to.hash === "") {
+    // 切換頁面時回到畫面最上方
+    setTimeout(() => {
+      window.scrollTo({ top: 0 });
+    }, 300);
+  }
 
   const store = useMainStore();
-  store.checkToken();
+  store.checkToken()
 
   // 檢查目標路由是否需要驗證權限
   if (to.meta.requiresAuth) {
+    store.checkToken();
     console.log('檢查目標路由');
     const haveToken = store.loginState;
     console.log('router store token', store.token);

src/views/CollegeGroup/Online.vue

@@ -31,19 +31,24 @@ const breadcrumbs = reactive([
 
 const categoryList = reactive([
   {
+    id: 1256,
     title: "匠作之手",
+    active: true,
   },
   {
+    id: 1255,
     title: "手作學習",
+    active: false,
   },
   {
-    title: "他山之石",
+    id: 1221,
+    title: "工藝行旅",
+    active: false,
   },
   {
-    title: "推薦影片",
-  },
-  {
-    title: "最新影片",
+    id: 1253,
+    title: "檢測修復",
+    active: false,
   },
 ]);
 
@@ -117,6 +122,14 @@ async function selectFilter(type, val) {
   getClass();
 }
 
+let activeCategory = ref(1256);
+
+function setCategory(id) {
+  activeCategory.value = id;
+  console.log("activeCategory.value", activeCategory.value);
+  getImediaVideo();
+}
+
 const searchLocation = ref(null);
 let imedia = reactive({
   list: [],
@@ -130,8 +143,12 @@ watch(imediaCurrentPage, () => {
   searchLocation.value.scrollIntoView({ behavior: "smooth", block: "start" });
 });
 
+let videoLoading = ref(false);
+
 async function getImediaVideo() {
-  let url = `${store.apiUrl}/api/get_media_data?media_categories_id=1256&page=${imediaCurrentPage.value}&page_size=8`;
+  videoLoading.value = true;
+
+  let url = `${store.apiUrl}/api/get_media_data?media_categories_id=${activeCategory.value}&page=${imediaCurrentPage.value}&page_size=8`;
 
   try {
     imedia.list = [];
@@ -142,8 +159,9 @@ async function getImediaVideo() {
 
     imediaTotalPages.value = store.getTotalPages(list.sum, 8); // 計算頁數
     console.log("imediaTotalPages", imediaTotalPages.value);
-
     console.log("imedia list", imedia.list);
+
+    videoLoading.value = false;
   } catch (error) {
     loading.value = false;
     console.error(error);
@@ -193,13 +211,25 @@ getImediaVideo();
     <v-col sm="2" cols="12" class="px-0">
       <ul class="btn-list">
         <li v-for="(item, index) in categoryList" :key="index" class="mx-3">
-          <v-btn class="mb-5" variant="outlined">
+          <v-btn
+            @click="setCategory(item.id)"
+            class="mb-5"
+            :class="{ active: item.active }"
+            variant="outlined"
+          >
             {{ item.title }}
           </v-btn>
         </li>
       </ul>
     </v-col>
     <v-col sm="10" cols="12">
+      <div class="d-flex justify-center mb-10" v-if="videoLoading">
+        <v-progress-circular
+          color="grey-lighten-4"
+          indeterminate
+        ></v-progress-circular>
+      </div>
+
       <v-row class="video-list">
         <v-col
           cols="12"
@@ -208,11 +238,6 @@ getImediaVideo();
           :key="index"
           class="mb-5 mb-md-0"
         >
-          <!-- <video controls class="w-100">
-            <source :src="item.video" type="video/mp4" />
-            <a :href="item.video"></a>
-          </video> -->
-
           <v-dialog
             transition="dialog-top-transition"
             width="853"
@@ -224,7 +249,6 @@ getImediaVideo();
                   v-bind="props"
                   class="mx-auto cover-img"
                   :lazy-src="item.image_m"
-                  height="13.75em"
                   cover
                   :src="item.image_m"
                 >
@@ -444,6 +468,11 @@ getImediaVideo();
       opacity: 0;
     }
   }
+
+  .active {
+    color: #fff;
+    background-color: var(--purple);
+  }
 }
 .video-list {
   h3 {
@@ -478,22 +507,23 @@ getImediaVideo();
     overflow: hidden;
     border-radius: 20px;
     .v-img {
-      height: 260px;
+      height: 225px;
       width: 100%;
       object-fit: cover;
       border-radius: 20px;
       transition: all 0.5s;
+      cursor: pointer;
 
       @media (max-width: 1200px) {
-        height: 190px;
+        height: 160px;
       }
 
       @media (max-width: 960px) {
-        height: 38vw;
+        height: 32vw;
       }
 
       @media (max-width: 600px) {
-        height: 45vw;
+        height: 37vw;
       }
 
       &:hover {

src/views/CourseList.vue

@@ -250,7 +250,7 @@ onMounted(() => {
                 '漆藝',
                 '藍染',
                 '蠟雕',
-                '竹工藝籃',
+                '竹工藝',
                 '金工/飾品',
                 '蠟燭/香氛/調香',
                 '植栽/花藝',

src/views/Courses/Create.vue

@@ -1475,7 +1475,7 @@ function deleteEvent(index) {
                             '漆藝',
                             '藍染',
                             '蠟雕',
-                            '竹工藝籃',
+                            '竹工藝',
                             '金工/飾品',
                             '蠟燭/香氛/調香',
                             '植栽/花藝',
@@ -1563,6 +1563,7 @@ function deleteEvent(index) {
                                           :rules="[requiredRule]"
                                           density="compact"
                                           variant="outlined"
+                                          placeholder="可與課程名稱相同"
                                         ></v-text-field>
                                       </v-label>
                                     </v-col>
@@ -2267,8 +2268,8 @@ function deleteEvent(index) {
                           variant="outlined"
                           :rules="[
                             (value) =>
-                              (value && value.length >= 100) ||
-                              '請至少輸入 100 個字元，以確保內容完整性',
+                              (value && value.length >= 50) ||
+                              '請至少輸入 50 個字元，以確保內容完整性',
                           ]"
                           counter
                         ></v-textarea>

src/views/Courses/Proposal.vue

@@ -1222,7 +1222,7 @@ function removeTeacher(index) {
                         '漆藝',
                         '藍染',
                         '蠟雕',
-                        '竹工藝籃',
+                        '竹工藝',
                         '金工/飾品',
                         '蠟燭/香氛/調香',
                         '植栽/花藝',
@@ -1274,8 +1274,8 @@ function removeTeacher(index) {
                       variant="outlined"
                       :rules="[
                         (value) =>
-                          (value && value.length >= 100) ||
-                          '請至少輸入 100 個字元，以確保內容完整性',
+                          (value && value.length >= 50) ||
+                          '請至少輸入 50 個字元，以確保內容完整性',
                       ]"
                     ></v-textarea>
                   </v-label>

src/views/Crafts.vue

@@ -236,6 +236,7 @@ function handlePdfUrl(pdf) {
             <a
               v-if="isAnchorLink(item.url)"
               :href="item.url"
+              @click.stop
               class="py-3 py-sm-6 item"
             >
               <!-- 錨點 -->

src/views/News.vue

@@ -150,10 +150,10 @@ const categoryList = reactive([
       class="material-img"
     />
     <v-container>
-      <img
+      <!-- <img
         src="@/assets/img/news/news-banner.png"
         alt="臺灣工藝學校全球學習共享平台"
-      />
+      /> -->
 
       <div class="content py-10 mt-16">
         <div class="bg-img">

src/views/User/Courses.vue

@@ -1514,7 +1514,7 @@ async function closeClass(id) {
                                           '漆藝',
                                           '藍染',
                                           '蠟雕',
-                                          '竹工藝籃',
+                                          '竹工藝',
                                           '金工/飾品',
                                           '蠟燭/香氛/調香',
                                           '植栽/花藝',
@@ -1598,8 +1598,8 @@ async function closeClass(id) {
                                         variant="outlined"
                                         :rules="[
                                           (value) =>
-                                            (value && value.length >= 100) ||
-                                            '請至少輸入 100 個字元，以確保內容完整性',
+                                            (value && value.length >= 50) ||
+                                            '請至少輸入 50 個字元，以確保內容完整性',
                                         ]"
                                         counter
                                       ></v-textarea>
@@ -1725,6 +1725,7 @@ async function closeClass(id) {
                                             :rules="[requiredRule]"
                                             density="compact"
                                             variant="outlined"
+                                            placeholder="可與課程名稱相同"
                                           ></v-text-field>
                                         </v-label>
                                       </v-col>