ntcri/src/views/CollegeGroup/Main.vue

<script setup>
import { ref, reactive, computed, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useMainStore } from "@/stores/store";
import axios from "axios";
import Navbar from "@/components/Navbar.vue";

const route = useRoute();
const router = useRouter();
const store = useMainStore();

let isLifeChildren = ref(false);

router.beforeEach((to, from) => {
  groupId.value = to.meta.group_id;
  getGroup(groupId.value);

  // 判斷是否前往生活工藝內頁
  if (to.path.includes("/college-group/life/")) {
    isLifeChildren.value = true;
  } else {
    isLifeChildren.value = false;
  }
});

let groupId = ref(null);
let groupName = ref("");
let groupDescribe = ref("");

groupId.value = route.meta.group_id;
getGroup(groupId.value);

// 取得學群介紹
async function getGroup(id) {
  console.log("getGroup", id);

  if (!id) {
    return;
  }

  if (id === 1) {
    groupName = "未來工藝";
  } else if (id === 2) {
    groupName = "技藝工藝";
  } else if (id === 3) {
    groupName = "生活工藝";
  } else if (id === 7) {
    groupName = "跨域增能";
  } else if (id === 8) {
    groupName = "線上工藝";
  } else if (id === 9) {
    groupName = "希望工程";
  }

  try {
    let response = await axios.get(
      `${store.apiUrl}/api/get_group_name?id=${id}`
    );
    groupDescribe.value = response.data.school_groups[0].describe;
    console.log("學群介紹", response.data.school_groups);
  } catch (error) {
    console.error(error);
  }
}

// const description = computed(() => {
//   let text = "";
//   switch (title.value) {
//     case "未來工藝":
//       text =
//         "深入探索未來工藝的發展趨勢，以 Metacraft 為核心，專注於工藝領域的未來研究與設計。整合研發補助和研究報告等多項計畫。";
//       break;
//     case "技藝工藝":
//       text =
//         "技藝工藝旨在培養專業型、旗艦型工藝人才。我們提供專業工藝課程、修復工藝、青年培訓及國際交流。深掘台灣在地工藝智慧，並與國際接軌。";
//       break;
//     case "跨域增能":
//       text =
//         "您可以在跨域增能獲得多元知識的學習機會、培養工藝師傅的綜合能力，其中包括智財、法律、商業等全方位的領域。";
//       break;
//     case "線上工藝":
//       text =
//         "線上工藝包含中國古典文化的古老工藝、具有台灣在地特色的民俗工藝、工藝匠人的創作故事，是工藝教育者的影音寶庫！";
//       break;
//     case "希望工程":
//       text =
//         "希望工程以綠工藝精神結合人文關懷，串聯工藝、社會，我們希望以「One Community, One Craft」理念帶來「希望‧療癒‧陪伴」的力量、讓工藝治癒身心靈，促進社會共好。";
//       break;
//     case "生活工藝":
//       text =
//         "從精選綠色工藝品牌「旅物SHOP」，到深度工藝之旅「工藝行旅」。「一日學徒」帶您用一天的時間體會工藝師的一生。以及培養新一代工藝教育者啓發潛能的「校園扎根」。";
//       break;
//   }

//   return text;
// });
</script>

<template>
  <div class="college-bg-img">
    <Navbar />
    <v-container fluid class="college-content pb-16 px-lg-0">
      <div v-if="!isLifeChildren" class="college-banner">
        <img
          class="d-none d-md-block"
          src="@/assets/img/college-group/banner.png"
          alt="臺灣工藝學校全球學習共享平台"
        />
        <img
          class="d-block d-md-none"
          src="@/assets/img/college-group/banner-mb.webp"
          alt="臺灣工藝學校全球學習共享平台"
        />
        <div class="description-item">
          <h1>{{ groupName }}</h1>
          <p>
            {{ groupDescribe }}
          </p>
        </div>
        <!-- <h1>{{ title }}</h1>
        <p class="description-item">
          {{ description }}
        </p> -->
      </div>
      <div class="main-block" :class="{ life: isLifeChildren }">
        <router-view></router-view>
      </div>
    </v-container>
  </div>
</template>

<style lang="scss" scoped>
.content {
  padding: 0;
  width: 90%;

  @media (max-width: 600px) {
    width: 85%;
  }
  .main-block {
    padding: 6.25em 5em;
    margin-top: -30%;
    background-color: #fff;

    @media (max-width: 960px) {
      padding: 6.25em 3.125em;
    }

    @media (max-width: 600px) {
      padding: 6.25em 1.25em;
    }

    h2 {
      font-size: 1.875em;
      font-weight: 500;
      line-height: 2em;
      margin-left: 0.625em;

      @media (max-width: 960px) {
        font-size: 1.5em;
      }

      @media (max-width: 600px) {
        margin-left: 0;
        margin-bottom: 3.125em;
      }
    }
    .title {
      margin: 5em 0;
      @media (max-width: 600px) {
        margin: 3.125em 0;
      }
    }
    .v-breadcrumbs {
      position: relative;
      z-index: 100;
      justify-content: flex-start;
      @media (max-width: 600px) {
        justify-content: center;
      }
    }
  }
}
</style>