ntcri/src/views/Achievement.vue

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

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

// // 所有文章
// let articles = reactive({
//   list: [],
// });

// (async () => {
//   try {
//     const response = await axios.get(
//       `${store.apiUrl}/api/get_article?group_id=3`
//     );
//     console.log("response", response);
//     articles.list = response.data.articles;
//   } catch (error) {
//     console.error(error);
//   }
// })();

const breadcrumbs = reactive([
  {
    title: "home.title",
    disabled: false,
    href: "/",
  },
  {
    title: "navbar.craft_groups",
    disabled: true,
  },
  {
    title: "成果展現",
    disabled: true,
  },
]);

/* 希望工程 Start */

onMounted(() => {
  store.getFavoriteClass();
});

const faqList = [
  {
    q: "問：社區關懷據點（或其他弱勢族群）想導入工藝手作陪伴，應如何做？",
    a: "答：原有執行之其他課程，經評估可部分以工藝手作取代，確認日期及時段，可洽 049-2334141 分機 237 楊小姐，媒合就地或鄰近工藝師前往教學。",
  },
  {
    q: "問：職能治療師若想加入「臺灣綠工藝希望工程」工藝手作陪伴，應如何參與？",
    a: "答：請與 049-2334141 分機 237 楊小姐聯繫，將會媒合就地或鄰近有教學需求之單位或團體。",
  },
  {
    q: "問：工藝手作陪伴有什麼好處？",
    a: "答：工藝手作活動可以達到認知上的訓練，最主要是因為工藝可提供豐富的感官刺激，透過創作的想像力、創意，以及作品自我表達能力的滿足感，在認知上的訓練就非常有效果。在運用手部動作過程中，可刺激活化腦部功能，延緩失智失能。在社交人際互動過程中，在製作工藝品中，成員間互相協助幫忙，形成良好互動，甚至是在完成作品與其他的好朋友互相分享。",
  },
  {
    q: "問：想要投入弱勢族群教學的工藝師，有限定其工藝種類嗎？",
    a: "答：無限制工藝種類，但工藝師規劃手作時以安全性高、操作不複雜為考量。",
  },
  {
    q: "問：工藝師應規劃幾堂的課程較為適合？",
    a: "答：以每週執行一次，每次 2 小時，持續 6 至 8 週為宜，若對於未曾執行過工藝手作之族群，可先安排體驗式課程，再漸進式導入，惟仍依各單位需求彈性調整。",
  },
  {
    q: "問：工藝師若想加入「臺灣綠工藝希望工程」工藝手作陪伴，應如何參與？",
    a: "答：請與 049-2334141 分機 237 楊小姐聯繫，請規劃並提供適合的課程，將會媒合就地或鄰近有教學需求之單位或團體。",
  },
];

// 活動現場
let activityPageNum = ref(1); // 頁數(預設第一頁)
let activityPageAmount = ref(12); // 每頁顯示筆數
let activityTotalPages = ref(1); // 總頁數

// 媒體報導
let mediaPageNum = ref(1); // 頁數(預設第一頁)
let mediaPageAmount = ref(12); // 每頁顯示筆數
let mediaTotalPages = ref(1); // 總頁數

let loading = ref(false);
const activityList = ref(null);
const mediaList = ref(null);

watch(activityPageNum, () => {
  getClasses();
  activityList.value.scrollIntoView({ behavior: "smooth", block: "start" });
});

watch(mediaPageNum, () => {
  getTgcReport();
  mediaList.value.scrollIntoView({ behavior: "smooth", block: "start" });
});

const tgcImg = reactive({
  classes: [],
});

// 獲取活動現場資料
async function getClasses() {
  loading.value = true;
  let url = `${store.apiUrl}/api/get_tgc_img?page_num=${activityPageNum.value}&page_amount=${activityPageAmount.value}`;

  try {
    const response = await axios.get(url);
    tgcImg.classes = response.data.tgc_pic;
    activityTotalPages.value = store.getTotalPages(response.data.total_num, 12);
    console.log(response);
  } catch (error) {
    loading.value = false;
    console.error(error);
  }
}

getClasses();

const tgcReport = reactive({
  classes: [],
});

// 獲取媒體報導資料
async function getTgcReport() {
  loading.value = true;
  let url = `${store.apiUrl}/api/get_tgc_report?page_num=${mediaPageNum.value}&page_amount=${mediaPageAmount.value}`;

  try {
    const response = await axios.get(url);
    tgcReport.classes = response.data.tgc_report;
    mediaTotalPages.value = store.getTotalPages(response.data.total_num, 12);

    console.log("report", response);
  } catch (error) {
    loading.value = false;
    console.error(error);
  }
}

getTgcReport();

// 媒體報導
let coursePageNum = ref(1); // 頁數(預設第一頁)
let coursePageAmount = ref(6); // 每頁顯示筆數
let courseTotalPages = ref(1); // 總頁數
let courseLoading = ref(false);
let courseList = ref(null);

const courseData = reactive({
  classes: [],
});

// 切換分頁時回到列表上方
watch(coursePageNum, () => {
  getClass();
  courseList.value.scrollIntoView({ behavior: "smooth", block: "start" });
});

// group_sort 希望工程
async function getClass() {
  courseLoading.value = true;

  try {
    const response = await axios.get(
      `${store.apiUrl}/api/get_class_name?group_id=9&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 希望工程", courseData.classes);
  } catch (error) {
    courseLoading.value = false;
    console.error(error);
  }
}

getClass();
/* 希望工程 End */
</script>

<template>
  <div class="college-bg-img">
    <Navbar />
    <v-container fluid class="college-content pb-16 px-lg-0">
      <div 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">
          <h2>成果展現</h2>
          <!-- <p>
            {{ groupDescribe }}
          </p> -->
        </div>
      </div>
      <div class="main-block">
        <v-breadcrumbs :items="breadcrumbs" divider="/" class="mt-10 pa-0">
          <template v-slot:title="{ item }">
            {{ t(item.title) }}
          </template>
        </v-breadcrumbs>

        <!-- 生活工藝 -->
        <v-container class="pa-0 life-list">
          <router-link to="/college-group/life/shop">
            <v-row>
              <v-col cols="12" md="4" lg="5" class="pa-0 overflow-hidden">
                <img
                  src="@/assets/img/college-group/life/cover-01.png"
                  alt="臺灣工藝學習平台"
                />
              </v-col>
              <v-col cols="12" md="8" lg="7" class="content">
                <h3 class="mb-5">旅物 SHOP</h3>
                <p>
                  《旅物 •
                  SHOP》位於自然生態豐富的臺灣工藝文化園區，明亮穿透的空間設計，連結窗外工藝植物園，到室內的生活工藝選物，這是一間由土地孕育而生的工藝選品店，從採擷、手作，到用物於生活，是材料與手、物與物、人與物、人與人彼此流動交會，共度美好日常的店頭。包含崇尚自然循環，創造生活風格的臺灣在地「臺灣綠工藝」品牌、扶植青年創業的「青年孵化器」、工藝中心開發的周邊商品「品工藝」以及在地咖啡品牌「一日咖啡」等四個子品牌，推廣「自然、循環、平衡、寬容、生命力」的綠工藝精神，更是鼓勵青年實驗開店、青年工藝教育者的孵化平臺。
                </p>
              </v-col>
            </v-row>
          </router-link>

          <router-link to="/college-group/life/craft-journey">
            <v-row>
              <v-col cols="12" md="8" lg="7" class="content">
                <h3 class="mb-10">工藝行旅</h3>
                <p>
                  工藝文化深度旅遊，品味在地、標記生活 <br />
                  打造以工藝為核心的文化深度旅遊路徑，結合工藝體驗、自然風土、地方美食、在地物產、
                  建築等觀光資源，旅人緩步慢行，暫離喧囂、以手作沉澱自我，發現生命中的寧靜與感動。
                  現在一起出發，感受工藝行旅的魅力和樂趣！
                </p>
              </v-col>
              <v-col cols="12" md="4" lg="5" class="pa-0 overflow-hidden">
                <img
                  src="@/assets/img/college-group/life/cover-02.png"
                  alt="臺灣工藝學習平台"
                />
              </v-col>
            </v-row>
          </router-link>

          <router-link to="/college-group/life/apprentice/about">
            <v-row>
              <v-col cols="12" md="8" lg="7" class="content">
                <h3 class="mb-10">一日學徒</h3>
                <p>
                  全民工藝教育倡議平台｜生活 x 手作 x 體驗 <br />
                  以「手做」，經歷生活中的一切美好！ <br />
                  用「一日」，體會過去師徒制三年四個月的工藝學習精神與態度！
                  <br />
                  由工藝教育者親自規畫各類手作工藝課程，隨時提供最新課程資訊，民眾依據喜好選擇課程，
                  體驗半天或一天的手作工藝學習，尋找就近的工藝教育者學習各種小物知識經驗與技藝。
                </p>
              </v-col>
              <v-col cols="12" md="4" lg="5" class="pa-0 overflow-hidden">
                <img
                  src="@/assets/img/college-group/life/cover-03.png"
                  alt="臺灣工藝學習平台"
                />
              </v-col>
            </v-row>
          </router-link>

          <router-link to="/college-group/life/campus">
            <v-row>
              <v-col cols="12" md="4" lg="5" class="pa-0 overflow-hidden">
                <img
                  src="@/assets/img/college-group/life/cover-04.png"
                  alt="臺灣工藝學習平台"
                />
              </v-col>
              <v-col cols="12" md="8" lg="7" class="content">
                <h3 class="mb-10">校園扎根</h3>
                <p>
                  工藝校園扎根計畫以工藝融入學校教育，媒合教師與工藝教育者，跨域合作開發具創造力、觀察力、美學素養、批判思考以及手作體驗的工藝教材教案，實踐工藝之於學習、生活的價值。符合教育部
                  12 年國教課綱的「核心素養」，以及 STEAM
                  教育的五大精神「跨領域、動手做、生活應用、解決問題及五感學習」，以「做中學，學中做」培育新世代的工藝人才。
                </p>
              </v-col>
            </v-row>
          </router-link>
        </v-container>

        <!-- 希望工程 -->
        <div class="cfa-content">
          <div class="title">
            <h2>{{ t("about_craft_for_all") }}</h2>
          </div>

          <v-row>
            <v-col cols="12" md="6">
              <p class="mb-5">
                以工藝為媒介，實踐社會價值功能。臺灣工藝學習平台啟動「臺灣綠工藝希望工程」，本於自然、循環、平衡、寬容、生命力等綠工藝精神，融合人文關懷，深化工藝與社會的互動連結，為所有人帶來「希望‧療癒‧陪伴」的力量。
              </p>
              <p>
                「臺灣綠工藝希望工程」是公民互助精神的體現，以「One Community,
                One
                Craft（OCOC）」一社群一工藝理念，凝聚社會力量，以工藝師、職能治療師提供核心支持服務，以社區、NGO團體、相關民間組織及政府單位為平台，在社福體系中的醫療機構、長照機構與社區照顧關懷據點等，向社會上包含樂齡長者、兒童、婦女、身心障礙者等所有人，傳達工藝手作的溫暖。以工藝投入社會服務，引領身心靈向上提升，也形成一股陪伴的安定力量，促進社會關係的融合與共好。
              </p>
            </v-col>
            <v-col cols="12" md="6">
              <div class="about-img">
                <img
                  class="img-fluid"
                  src="@/assets/img/college-group/life/生活工藝素材-24.png"
                  alt="臺灣工藝學習平台"
                />
              </div>
            </v-col>
          </v-row>

          <div class="title" ref="activityList">
            <h2>{{ t("event") }}</h2>
          </div>

          <v-row>
            <v-col
              sm="6"
              md="4"
              cols="12"
              class="pa-5"
              v-for="(item, index) in tgcImg.classes"
              :key="index"
            >
              <div class="main-card">
                <div class="card-info">
                  <div class="overflow-hidden">
                    <v-img
                      class="mx-auto cover-img"
                      :lazy-src="item.pic_url"
                      :src="item.pic_url"
                      height="16.875em"
                      cover
                      alt="臺灣工藝學習平台"
                    >
                      <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>
                  </div>

                  <div class="card-title">
                    <h3>{{ item.pic_name }}</h3>
                  </div>
                </div>
              </div>
            </v-col>
          </v-row>

          <v-pagination
            v-model="activityPageNum"
            :length="activityTotalPages"
            rounded="circle"
            class="mt-16"
          ></v-pagination>

          <div class="title" ref="mediaList">
            <h2>{{ t("media_coverage") }}</h2>
          </div>

          <ul class="tgc-report">
            <li
              class="d-flex align-center justify-space-between"
              v-for="(item, index) in tgcReport.classes"
              :key="index"
            >
              <div class="info">
                <a :href="item.url" target="_blank">
                  <p class="report-title font-weight-normal">
                    {{ item.title }}
                  </p>
                </a>
              </div>
              <div class="date time-block">
                <span>
                  {{ moment(`${item.create_time}`).format("YYYY-MM-DD") }}</span
                >
              </div>
            </li>
          </ul>
          <v-pagination
            v-model="mediaPageNum"
            :length="mediaTotalPages"
            rounded="circle"
            class="mt-16"
          ></v-pagination>

          <div>
            <h2 class="title">{{ t("faq") }}</h2>
          </div>

          <v-expansion-panels>
            <v-expansion-panel v-for="item in faqList" :key="item">
              <v-expansion-panel-title>{{ item.q }}</v-expansion-panel-title>
              <v-expansion-panel-text v-html="item.a"> </v-expansion-panel-text>
            </v-expansion-panel>
          </v-expansion-panels>

          <div ref="courseList">
            <h2 class="title">{{ t("craft_for_all") }}</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>
        </div>
      </div>
    </v-container>
  </div>
</template>

<style lang="scss" scoped>
p {
  line-height: 1.75em;
  letter-spacing: 0.0625em;
}
.navbar {
  margin-top: 0;
}

.description-item {
  h2 {
    margin-bottom: 1.5em;
  }
}

.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;
      }
    }
  }
}

/* 生活工藝 */
.life-list {
  margin-top: 6.25em;

  @media (max-width: 600px) {
    margin-top: 0;
  }

  a {
    display: block;
    margin: 3.125em 0;
    border: 0.125em solid var(--purple);
    border-radius: 1.25em;
    overflow: hidden;
    &:hover {
      img {
        transform: scale(1.1);
      }
    }
  }

  h3 {
    font-size: 1.5em;
    font-weight: 500;
  }

  img {
    width: 100%;
    height: 20.625em;
    min-height: 100%;
    object-fit: cover;
    transition: all 0.5s;
    @media (max-width: 1280px) {
      height: 23.125em;
    }
    @media (max-width: 600px) {
      height: 12.5em;
    }
  }

  .content {
    padding: 2.1875em 3.75em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    @media (max-width: 1280px) {
      padding: 2.5em;
    }
  }
}

/* 希望工程 */
.cfa-content {
  .about-img {
    width: 80%;
    height: auto;
    margin: auto;
  }

  .card-info {
    height: 100%;
    padding-bottom: 0;
    .card-title {
      margin: auto;
      border-bottom: none;
      cursor: pointer;
      h3 {
        font-weight: 500;
      }
    }
  }

  p {
    font-weight: 400;
    letter-spacing: 0.0625em;
    line-height: 1.875em;
  }

  .tgc-report {
    li {
      padding: 1.875em 0;
      border-bottom: 0.0625em solid #c9c9c9;
      .info {
        a {
          transition: all 0.3s;
          &:hover {
            opacity: 0.7;
          }
        }
      }
    }
    .report-title {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      @media (max-width: 960px) {
        white-space: normal;
      }
    }
  }
  .time-block {
    padding: 0 0 0 1.25em;
    span {
      width: 5.625em;
      display: block;
    }
  }
  .v-expansion-panel-title,
  .v-expansion-panel-text {
    font-size: 1em;
    line-height: 1.875em;
    letter-spacing: 0.0625em;
  }
  .v-expansion-panel-text {
    padding: 0.9375em 1.25em;
    font-size: 1em;
  }
}
</style>