ntcri/src/views/Home.vue

<script setup>
import { ref, reactive, watch, onMounted } from "vue";
import { useMainStore } from "@/stores/store";
import { useI18n } from "vue-i18n";
import axios from "axios";
import moment from "moment";
import Map from "@/components/Map.vue";
import Navbar from "@/components/Navbar.vue";
import HomeList from "@/components/HomeList.vue";
import TermsList from "@/components/TermsList.vue";
import CourseCard from "@/components/CourseCard.vue";
import CoursesTutorial from "@/components/CoursesTutorial.vue";
import CraftsArticle from "@/components/CraftsArticle.vue";

const store = useMainStore();
const { t } = useI18n();

let loading = ref(true);

onMounted(() => {
  setTimeout(() => {
    loading.value = false;
  }, 300);
});

let pageNum = ref(1); // 頁數(預設第一頁)
let pageAmount = ref(4); // 每頁顯示筆數
let totalPages = ref(1); // 總頁數

// 切換分頁
watch(pageNum, () => {
  getClass();
});

let classes = reactive({
  data: [],
});

let assignState = ref(false);
let assignLocationId = ref(null);

async function getClass() {
  let url = `https://cmm.ai:8088/api/get_class_name?is_check=1&page_num=${pageNum.value}&page_amount=${pageAmount.value}`;
  let assignUrl = `https://cmm.ai:8088/api/get_class_name?is_check=1&page_num=${pageNum.value}&page_amount=${pageAmount.value}&location_id=${assignLocationId.value}`;

  try {
    const response = await axios.get(assignState.value ? assignUrl : url);
    totalPages.value = store.getTotalPages(response.data.total_num, 4);
    classes.data = response.data.classes;
  } catch (error) {
    console.error(error);
  }
}

getClass();

// 取得特定據點課程總筆數
const getClassList = async (locationId) => {
  assignState.value = true;
  assignLocationId.value = locationId;

  try {
    const response = await axios.get(
      `https://cmm.ai:8088/api/get_class_name?location_id=${locationId}`
    );
    getClass();
    pageNum.value = 1;
    totalPages.value = store.getTotalPages(response.data.classes.length, 4);
  } catch (error) {
    console.log("error", error);
  }
};

let recommend = reactive({
  list: [],
});

// 推薦課程
(async () => {
  try {
    const response = await axios.get(
      "https://cmm.ai:8088/api/get_class_name?recommend=1"
    );
    console.log("推薦課程", response);
    recommend.list = response.data.classes;
    console.log(" recommend.list", recommend.list);
  } catch (error) {
    console.error(error);
  }
})();

let panel = ref([]);

const tagList = reactive([
  {
    title: "crafts.title_1",
    url: "/crafts#articleList",
  },
  {
    title: "crafts.title_2",
    url: "/crafts#readList",
  },
  {
    title: "crafts.title_3",
    url: "/crafts#bookList",
  },
  {
    title: "crafts.title_4",
    url: "/crafts#journal",
  },
  {
    title: "crafts.title_5",
    url: "/crafts#thesisGrant",
  },
]);

let news = reactive({
  list: [],
});

// 重要訊息
(async () => {
  // 取得最新兩篇
  try {
    const response = await axios.get(
      "https://cmm.ai:8088/api/get_news?page_num=1&page_amount=2"
    );
    news.list = response.data.news;
    console.log("重要訊息", news.list);
  } catch (error) {
    console.error(error);
  }
})();

let assignTag = ref("news");

// watch(assignTag, (val) => {
//   if (val === "all") {
//     isInternal.value = false;
//   } else {
//     isInternal.value = true;
//   }
//   pageNum.value = 1;
//   getClass();
// });

function selectTag(btn) {
  if (btn === "news") {
    assignTag.value = "news";
  } else {
    assignTag.value = "exhibit";
  }
}

// 使用 ref 定義底部彈出視窗的狀態
// const isBottomSheetOpen = ref(false);

// 打開底部彈出視窗
// const openBottomSheet = () => {
//   isBottomSheetOpen.value = !isBottomSheetOpen.value;
// };

// 按住向上滑動的手勢處理函數
// const onSlideUpDown = (event) => {
//   console.log("onSlideUpDown");
//   const touch = event.changedTouches[0];
//   const startY = touch.clientY;

//   const onTouchMove = (event) => {
//     console.log("onTouchMove");
//     const touchMove = event.changedTouches[0];
//     const currentY = touchMove.clientY;
//     const deltaY = startY - currentY;

//     滑動超過一定距離（如 100px）打開底部彈出視窗
//     if (deltaY > 50) {
//       console.log("向上滑動");
//       isBottomSheetOpen.value = true;
//     }

//     向下滑動超過一定距離（如 -100px）關閉底部彈出視窗
//     if (deltaY < -100) {
//       console.log("向下滑動");
//       isBottomSheetOpen.value = false;
//     }
//   };
//   document.addEventListener("touchmove", onTouchMove);
// };
</script>

<template>
  <Transition>
    <div class="loading-item" v-if="loading">
      <v-progress-circular
        color="grey-lighten-4"
        indeterminate
      ></v-progress-circular>
    </div>
  </Transition>

  <div class="banner">
    <img src="@/assets/img/home/banner.webp" alt="" class="cover" />
    <img src="@/assets/img/home/logo.png" alt="" class="logo" />
  </div>
  <Navbar />
  <v-container class="px-md-0 pb-16 mb-16">
    <section class="text-center intro">
      <h2 class="title">{{ t("home.title_1") }}</h2>
      <p class="my-10">
        {{ t("home.content") }}
      </p>
      <!-- <p class="my-10">
        以佈局具國際視野之工藝學習共享平台為目標，藉由「工藝學校」的主體概念，推動臺灣工藝學校全球學習平台，以共享、友善、全人、全民的終身工藝手作平台進行人才、課程、知識、教材之工藝資源嫁接媒合與內容設計，以在地、就近、線上、線下等多元方式提供不同型態之學習體驗內容及選擇。
      </p>
      <p>
        With the goal of laying out a craft learning and sharing platform with
        an international perspective, through the main concept of "craft
        school", we promote the global learning platform of International Craft
        Learning Platform co-ops, and use a lifelong craft platform run on the
        values of sharing, friendliness, and holisticness to design and
        integrate craft resources such as talents, courses, knowledge and
        teaching materials, and provide different types of learning experiences
        in local ways, both online and offline.
      </p> -->
    </section>

    <v-carousel
      cycle
      height="400"
      hide-delimiters
      hide-delimiter-background
      show-arrows="hover"
    >
      <v-carousel-item>
        <div class="d-flex h-100 align-center">
          <img src="@/assets/img/home/carousel-01.jpg" alt="" class="w-100" />
        </div>
      </v-carousel-item>
    </v-carousel>

    <div class="news-content">
      <div class="d-flex tab-btn mb-16">
        <v-btn
          variant="text"
          @click="selectTag('news')"
          :class="{ active: assignTag === 'news' }"
        >
          重要訊息
        </v-btn>
        <v-btn
          variant="text"
          @click="selectTag('exhibit')"
          :class="{ active: assignTag === 'exhibit' }"
        >
          當期展覽
        </v-btn>
      </div>
      <div class="d-flex justify-end">
        <router-link to="/news">觀看更多訊息 >></router-link>
      </div>
      <ul>
        <li v-for="(item, index) in news.list" :key="index" class="mb-16 list">
          <HomeList :data="item" />
          <!-- <section class="d-flex">
            <p class="category mb-5">
              <span></span>
              {{ item.category }}
            </p>
            <p class="ms-5">
              {{ moment(`${item.create_time}`).format("YYYY-MM-DD") }}
            </p>
          </section>
          <v-card
            variant="outlined"
            class="d-flex flex-md-row flex-column align-center pa-5"
          >
            <v-row class="align-center">
              <v-col cols="12">
                <router-link :to="`/news/${item.news_id}`" class="cover-img">
                  <section class="d-flex flex-column pa-3">
                    <h3>{{ item.title }}</h3>
                    <p v-html="item.content"></p>
                  </section>
                </router-link>
              </v-col>
            </v-row>
          </v-card> -->
        </li>
      </ul>
    </div>

    <h2 class="my-10 title">{{ t("home.title_2") }}</h2>
    <v-row>
      <v-col cols="6" md="4">
        <router-link to="/" class="img-info">
          <img src="@/assets/img/home/首頁元素-12.png" alt="" />
          <section>
            <p>{{ t("college_group_1") }}</p>
          </section>
        </router-link>
      </v-col>
      <v-col cols="6" md="4">
        <router-link to="/college-group/craft" class="img-info">
          <img src="@/assets/img/home/首頁元素-11.png" alt="" />
          <section>
            <p>{{ t("college_group_2") }}</p>
          </section>
        </router-link>
      </v-col>
      <v-col cols="6" md="4">
        <router-link to="/college-group/future" class="img-info">
          <img src="@/assets/img/home/首頁元素-06.png" alt="" />
          <section>
            <p>{{ t("college_group_3") }}</p>
          </section>
        </router-link>
      </v-col>
      <v-col cols="6" md="4">
        <router-link to="/college-group/cross" class="img-info">
          <img src="@/assets/img/home/首頁元素-09.png" alt="" />
          <section>
            <p>{{ t("college_group_4") }}</p>
          </section>
        </router-link>
      </v-col>
      <v-col cols="6" md="4">
        <router-link to="/college-group/craft-for-all" class="img-info">
          <img src="@/assets/img/home/臺灣綠工藝希望工程.png" alt="" />
          <section>
            <p>{{ t("college_group_5") }}</p>
          </section>
        </router-link>
      </v-col>
      <v-col cols="6" md="4">
        <router-link to="/college-group/life" class="img-info">
          <img src="@/assets/img/home/首頁元素-07.png" alt="" />
          <section>
            <p>{{ t("college_group_6") }}</p>
          </section>
        </router-link>
      </v-col>
    </v-row>

    <div class="map-block">
      <h3 class="mb-10 title">{{ t("home.title_3") }}</h3>
      <div class="v-row">
        <v-col md="8" cols="12">
          <div class="map">
            <Map @locationId="getClassList" />
          </div>
        </v-col>
        <v-col md="4" cols="12">
          <v-list lines="three" class="list pa-0">
            <v-list-item v-for="item in classes.data" :key="item.id">
              <div class="d-flex align-center">
                <router-link
                  :to="`/course-detail/${item.class_name_id}`"
                  class="link"
                >
                  <v-img
                    :lazy-src="
                      item.is_inner === 0
                        ? item.cover_img
                        : item.special_class_list_name === 'one_day_class'
                        ? store.getImageUrl('default.png')
                        : `https://ntcri.org/${item.cover_img}`
                    "
                    cover
                    :src="
                      item.is_inner === 0
                        ? item.cover_img
                        : item.special_class_list_name === 'one_day_class'
                        ? store.getImageUrl('default.png')
                        : `https://ntcri.org/${item.cover_img}`
                    "
                  >
                    <template v-slot:placeholder>
                      <div
                        class="d-flex align-center justify-center fill-height"
                      >
                        <v-progress-circular
                          color="grey-lighten-4"
                          indeterminate
                        ></v-progress-circular>
                      </div>
                    </template>
                  </v-img>
                </router-link>
                <section>
                  <h2>{{ item.name }}</h2>
                  <div class="d-flex align-start">
                    <v-icon
                      color="primary"
                      icon="mdi-domain"
                      class="me-2"
                    ></v-icon>
                    <p>{{ item.organizer }}</p>
                  </div>
                  <div class="d-flex align-start">
                    <v-icon
                      color="primary"
                      icon="mdi-map-marker"
                      class="me-2 pt-1"
                    ></v-icon>
                    <p>{{ item.location_name }}</p>
                  </div>
                </section>
              </div>
            </v-list-item>
          </v-list>
          <v-pagination
            v-model="pageNum"
            :length="totalPages"
            class="my-4"
            rounded="circle"
          ></v-pagination>
        </v-col>
      </div>
      <!-- <div class="map">
        <Map @locationId="getClassList" />
      </div> -->
    </div>

    <h2 class="mb-10 title">{{ t("home.title_4") }}</h2>
    <v-row>
      <v-col
        cols="12"
        sm="6"
        lg="4"
        v-for="(item, index) in recommend.list"
        :key="index"
        class="pa-5"
      >
        <CourseCard :data="item" />
      </v-col>
      <v-col cols="12">
        <router-link to="/course-list" class="course-link">
          <img src="@/assets/img/course/探索課程素材-15.png" alt="" />
          <p>{{ t("see_more") }}</p>
        </router-link>
      </v-col>
    </v-row>

    <!-- 手機版底部視窗 -->
    <!-- <div
      class="bottom-sheet"
      @touchstart.prevent="onSlideUpDown"
      :class="{ show: isBottomSheetOpen }"
    >
      <div class="content">
        <span></span>
        <div class="list">
          <h2>Bottom Sheet Content</h2>
        </div>
      </div>
    </div> -->
  </v-container>

  <v-container fluid class="pa-0 pt-sm-16 tutorial-block">
    <h2 class="mb-10 title">{{ t("tutorial.title") }}</h2>
    <CoursesTutorial />
  </v-container>

  <v-container class="px-md-0 my-16">
    <h2 class="mb-10 title">{{ t("home.title_6") }}</h2>
    <v-expansion-panels v-model="panel" multiple>
      <v-expansion-panel elevation="0">
        <v-expansion-panel-title>{{
          t("home.faq.q_1")
        }}</v-expansion-panel-title>
        <v-expansion-panel-text>
          <ul>
            <li>
              <h4><span></span> {{ t("home.faq.a_1_1") }}</h4>
              <p>
                {{ t("home.faq.a_1_2") }}
              </p>
            </li>
            <li>
              <h4><span></span> {{ t("home.faq.a_2_1") }}</h4>
              <p>
                {{ t("home.faq.a_2_2") }}
              </p>
            </li>
            <li>
              <h4><span></span> {{ t("home.faq.a_3_1") }}</h4>
              <p>
                {{ t("home.faq.a_3_2") }}
              </p>
            </li>
            <li>
              <h4><span></span> {{ t("home.faq.a_4_1") }}</h4>
              <p>
                {{ t("home.faq.a_4_2") }}
              </p>
            </li>
          </ul>
        </v-expansion-panel-text>
      </v-expansion-panel>

      <v-expansion-panel elevation="0">
        <v-expansion-panel-title>
          {{ t("terms.terms_of_service") }}</v-expansion-panel-title
        >
        <v-expansion-panel-text>
          <TermsList />
        </v-expansion-panel-text>
      </v-expansion-panel>

      <v-expansion-panel elevation="0">
        <v-expansion-panel-title>{{
          t("home.faq.q_2")
        }}</v-expansion-panel-title>
        <v-expansion-panel-text>
          <p v-html="$t('home.faq.a_2')"></p>
        </v-expansion-panel-text>
      </v-expansion-panel>

      <v-expansion-panel elevation="0">
        <v-expansion-panel-title>{{
          t("home.faq.q_3")
        }}</v-expansion-panel-title>
        <v-expansion-panel-text>
          {{ t("home.faq.a_3") }}
        </v-expansion-panel-text>
      </v-expansion-panel>

      <v-expansion-panel elevation="0">
        <v-expansion-panel-title>{{
          t("home.faq.q_4")
        }}</v-expansion-panel-title>
        <v-expansion-panel-text>
          {{ t("home.faq.a_4") }}
        </v-expansion-panel-text>
      </v-expansion-panel>

      <v-expansion-panel elevation="0">
        <v-expansion-panel-title>{{
          t("home.faq.q_5")
        }}</v-expansion-panel-title>
        <v-expansion-panel-text>
          {{ t("home.faq.a_5") }}
        </v-expansion-panel-text>
      </v-expansion-panel>
    </v-expansion-panels>

    <h2 class="mb-10 mt-16 title">{{ t("crafts.title") }}</h2>

    <v-row class="px-5 px-sm-10 mt-16 mb-10 tag-btn">
      <v-col
        v-for="(item, index) in tagList"
        :key="index"
        :cols="index + 1 === tagList.length ? '12' : '6'"
        md=""
      >
        <a :href="item.url" target="_blank" class="py-3 py-lg-6 item">
          <!-- 網址 -->
          {{ t(`${item.title}`) }}
        </a>
      </v-col>
    </v-row>

    <CraftsArticle />

    <router-link to="/crafts" class="crafts-link">
      <img src="@/assets/img/course/探索課程素材-15.png" alt="" />
      <p>{{ t("crafts.see_more") }}</p>
    </router-link>

    <div class="mt-16">
      <img
        class="d-none d-md-block"
        src="@/assets/img/course/banner.png"
        alt=""
      />
      <img
        class="d-block d-md-none"
        src="@/assets/img/course/banner-mb.png"
        alt=""
      />
    </div>
  </v-container>
</template>

<style lang="scss" scoped>
.banner {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  .cover {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
  }
  .logo {
    width: 800px;
    position: absolute;
    z-index: 10;
  }
}

.intro {
  margin: 120px 0 100px;
  p {
    line-height: 32px;
  }
}

.title {
  font-size: 26px;
  font-weight: 400;
  letter-spacing: 2px;
  text-align: center;
}

.navbar {
  margin-bottom: 0;
}

.img-info {
  display: block;
  position: relative;
  section {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(167, 193, 204, 0.7);
    cursor: pointer;
    opacity: 0;
    transition: all 0.5s;
    &:hover {
      opacity: 1;
    }
    p {
      color: #fff;
      font-size: 20px;
      letter-spacing: 1px;
    }
  }
}

.news-content {
  margin: 100px auto;
}

.map-block {
  margin: 100px auto;
  .map {
    height: 100%;
    min-height: 100vh;
  }

  .list {
    .link {
      width: 40%;
      margin-right: 20px;
      border-radius: 5px;
      overflow: hidden;

      @media (max-width: 960px) {
        width: auto;
      }
      .v-img {
        width: 200px;
        height: 150px;
        margin-right: 20px;
        border-radius: 5px;
        box-shadow: 2px 2px 4px #aaaaaa;
        transition: all 0.3s;
        object-fit: cover;

        @media (max-width: 960px) {
          width: 250px;
          height: 170px;
          margin-right: 0;
        }

        &:hover {
          transform: scale(1.1);
        }
      }
    }

    section {
      width: 60%;

      h2 {
        margin-bottom: 10px;
        font-size: 16px;
        font-weight: 500;
      }

      p {
        font-size: 14px;
        font-weight: 400;
      }

      h2,
      p {
        line-height: 26px;
        letter-spacing: 1px;
        // 超過兩行則省略
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        line-break: after-white-space;
      }
    }

    .v-list-item {
      height: 215px;
      padding: 20px 0;
      border-bottom: 1px solid #cccccc;

      &:last-child {
        border-bottom: none;
      }

      .v-list-item__content {
        overflow: initial !important;
      }
    }
  }
}

.course-link {
  margin-top: 15px;
  color: #000;
  background-color: var(--sub-color);
}

.crafts-link {
  margin: 100px 0;
  color: #fff;
  background-color: var(--purple);
  img {
    filter: invert(88%) sepia(100%) saturate(0%) hue-rotate(151deg)
      brightness(103%) contrast(103%);
  }
}

.crafts-link,
.course-link {
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  box-shadow: 2px 2px 10px #aaaaaa;
  &:hover {
    img {
      transform: rotateZ(10deg);
    }
  }
  img {
    max-width: 85px;
    padding-right: 20px;
    transition: all 0.3s;
  }
  p {
    font-size: 20px;
    letter-spacing: 2px;
  }
}

.tutorial-block {
  max-width: 100% !important;
}

.loading-item {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}

// Vuetify Expansion 樣式
.v-expansion-panel {
  margin-bottom: 30px;
  line-height: 30px;
  border-radius: 10px !important;
  li:first-child {
    h4 {
      margin-top: 0;
    }
  }
  h4 {
    display: flex;
    align-items: center;
    margin-top: 20px;
    font-size: 18px;
    font-weight: 500;
    span {
      display: block;
      width: 8px;
      height: 8px;
      margin-top: 5px;
      margin-right: 10px;
      border-radius: 10px;
      background-color: var(--blue);
    }
  }
}

.v-expansion-panel-title {
  padding: 20px 30px;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: 1px;
  border: 1px solid var(--blue);
}

.v-expansion-panel-text {
  padding-top: 8px;
}

.v-expansion-panel-title__overlay {
  opacity: 0 !important;
}

.v-expansion-panels:not(.v-expansion-panels--variant-accordion)
  > :first-child:not(:last-child):not(.v-expansion-panel--active):not(
    .v-expansion-panel--before-active
  ),
.v-expansion-panels:not(.v-expansion-panels--variant-accordion)
  > :last-child:not(:first-child):not(.v-expansion-panel--active):not(
    .v-expansion-panel--after-active
  ),
.v-expansion-panels:not(.v-expansion-panels--variant-accordion)
  > :not(:first-child):not(:last-child):not(.v-expansion-panel--active):not(
    .v-expansion-panel--after-active
  ),
.v-expansion-panels:not(.v-expansion-panels--variant-accordion)
  > :not(:first-child):not(:last-child):not(.v-expansion-panel--active):not(
    .v-expansion-panel--before-active
  ),
.v-expansion-panel--active > .v-expansion-panel-title {
  border-top-left-radius: 10px !important;
  border-top-right-radius: 10px !important;
  border-bottom-left-radius: 10px !important;
  border-bottom-right-radius: 10px !important;
}
.v-expansion-panel:not(:first-child)::after {
  border-top-style: none;
}

.v-expansion-panel-title--active:hover > .v-expansion-panel-title__overlay,
.v-expansion-panel-title[aria-haspopup="menu"][aria-expanded="true"]:hover
  > .v-expansion-panel-title__overlay {
  opacity: 0;
}

/* 底部彈出視窗的樣式 */
.bottom-sheet {
  display: none;
  // display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 40px;
  left: 0;
  width: 100%;
  height: 300px; /* 設置底部彈出視窗的高度 */
  z-index: 1000;
  background-color: #fff;
  box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease-in-out;
  transform: translateY(100%); /* 預設隱藏底部視窗 */
  &.show {
    bottom: 0;
    transform: translateY(0);
  }
  .content {
    height: 100%;
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    text-align: center;
    span {
      display: block;
      height: 5px;
      width: 60px;
      position: absolute;
      top: 10px;
      background: #bbbbbb;
      border-radius: 20px;
    }
    .list {
      margin-top: 100px;
    }
  }
}
</style>