ntcri/src/views/Crafts.vue

<script setup>
import { ref, reactive, watch, computed, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useMainStore } from "@/stores/store";
import { useI18n } from "vue-i18n";
import axios from "axios";
import Navbar from "@/components/Navbar.vue";
import PDFViewer from "@/components/PDFViewer.vue";
import craftsPdfList from "@/utils/useCraftsPdf";
import ArticleCard from "@/components/ArticleCard.vue";
import CraftsArticle from "@/components/CraftsArticle.vue";

const { t } = useI18n();
const route = useRoute();
const router = useRouter();
const store = useMainStore();
const routeHash = route.hash; // 網址參數(錨點)
const bookName = route.params.id; // 網址參數(pdf書名)

if (routeHash) {
  setTimeout(() => {
    const targetElement = document.querySelector(routeHash);
    if (targetElement) {
      targetElement.scrollIntoView({ behavior: "smooth" });
    }
  }, 500);
}

onMounted(() => {
  if (bookName) {
    setTimeout(() => {
      let book = read.list.filter((item) => item.article_id == bookName);
      updatePDF(book[0].files);
    }, 1000);
  }
});

let searchInput = ref("");
let searchError = ref(false);
let currentPage = ref(1); // 當前頁數(預設第一頁)
let itemsPerPage = ref(5); // 每頁顯示筆數
let totalPages = ref(1); // 總頁數
const newsAll = reactive({
  list: [],
});
const newsData = reactive({
  list: [],
});

(async function getData() {
  try {
    const response = await axios.get(`${store.apiUrl}/api/get_news`);
    console.log("response", response.data.news);
    newsAll.list = response.data.news;
    newsData.list = response.data.news;
    totalPages.value = store.getTotalPages(response.data.news.length, 5); // 計算頁數
  } catch (error) {
    console.error(error);
  }
})();

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

(async function getArticle() {
  try {
    const response = await axios.get(
      `${store.apiUrl}/api/get_article?group_sort=論文補助`
    );
    thesis.list = response.data.articles;
    console.log("response", response.data.articles);
  } catch (error) {
    console.error(error);
  }
})();

// 搜尋
async function search() {
  searchError.value = false;
  let keyword = searchInput.value;
  if (keyword !== "") {
    try {
      const response = await axios.get(
        `${store.apiUrl}/api/search_news_like?keyword=${keyword}`
      );
      if (response.data.news.length !== 0) {
        newsData.list = response.data.news;
      } else {
        searchError.value = true;
      }
    } catch (error) {
      console.error(error);
    }
  } else {
    newsData.list = newsAll.list;
  }
}

const searchLocation = ref(null);

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

// 分頁顯示
const paginatedList = computed(() => {
  const startIndex = (currentPage.value - 1) * itemsPerPage.value;
  const endIndex = startIndex + itemsPerPage.value;
  return newsData.list.slice(startIndex, endIndex);
});

const breadcrumbs = reactive([
  {
    title: "home.title",
    disabled: false,
    href: "/",
  },
  {
    title: "navbar.crafts",
    disabled: true,
    href: "/crafts",
  },
]);

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

let fileName = ref(""); // PDFViewer Props
const readRef = ref(null);
const viewerRef = ref(null);

function updatePDF(name) {
  // 更新 pdf 後移除網址參數
  router.replace({ path: "/crafts" });
  fileName.value = name;
  if (!store.isMobile) {
    setTimeout(() => {
      viewerRef.value.scrollIntoView({ behavior: "smooth", block: "start" });
    }, 300);
  }
}

function isAnchorLink(url) {
  // 檢查 URL 是否為錨點
  return url.startsWith("#");
}

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

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

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

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

// 正則表達式移除 style 屬性
const filteredContent = (content) => {
  const regex = /style="text-align: center;"/g;
  return content.replace(regex, "");
};

function handlePdfUrl(pdf) {
  let json = pdf.replace(/'/g, '"');
  let file = JSON.parse(json);
  let url = file.file1;
  return url;
}
</script>

<template>
  <Navbar />
  <div class="bg-img">
    <v-container class="position-relative">
      <div class="article-content">
        <v-breadcrumbs :items="breadcrumbs" divider="/" class="my-5">
          <template v-slot:title="{ item }">
            {{ t(item.title) }}
          </template>
        </v-breadcrumbs>

        <v-row class="px-sm-10 pb-3 tag-btn">
          <v-col
            v-for="(item, index) in tagList"
            :key="index"
            :cols="index + 1 === tagList.length ? '12' : '6'"
            md=""
          >
            <a
              v-if="isAnchorLink(item.url)"
              :href="item.url"
              @click.stop
              class="py-3 py-sm-6 item"
            >
              <!-- 錨點 -->
              <h3>{{ t(`${item.title}`) }}</h3>
            </a>
            <a v-else :href="item.url" target="_blank" class="py-3 py-lg-6">
              <!-- 網址 -->
              <h3>{{ t(`${item.title}`) }}</h3>
            </a>
          </v-col>
        </v-row>

        <h2 id="articleList" class="mb-16 pb-5">{{ t("crafts.title_1") }}</h2>

        <!-- <div class="search pt-5 my-10 me-sm-16" ref="searchLocation">
          <span>
            <input
              v-model="searchInput"
              type="text"
              @keyup.enter="search()"
              placeholder="關鍵字搜尋"
            />
            <button @click="search()">
              <img src="@/assets/img/news/news-search-icon.png" alt="臺灣工藝學校全球學習共享平台" />
            </button>
          </span>
          <div
            v-if="searchError"
            class="d-flex justify-center align-center error me-4"
          >
            <v-icon color="primary" icon="mdi-alert" class="me-2"></v-icon>
            {{ t("no_found") }}
          </div>
        </div> -->

        <CraftsArticle />

        <h2 ref="readRef" id="readList">{{ t("crafts.title_2") }}</h2>

        <v-row class="justify-center align-start mt-16 read-list">
          <v-col
            cols="12"
            sm="6"
            md="4"
            v-for="(item, index) in read.list"
            :key="index"
            class="d-flex flex-row flex-sm-column align-center px-sm-10"
          >
            <a
              v-if="store.isMobile"
              :href="handlePdfUrl(item.files)"
              target="_blank"
            >
              <v-img
                class="mx-auto cover-img"
                :lazy-src="`${store.imgUrl}/${item.cover_img}`"
                :src="`${store.imgUrl}/${item.cover_img}`"
                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>
              <!-- <img :src="item.img" alt="臺灣工藝學校全球學習共享平台" /> -->
            </a>

            <!-- <img
              v-else
              :src="item.img"
              alt="臺灣工藝學校全球學習共享平台"
              @click="updatePDF(item.fileName)"
            /> -->

            <v-img
              v-else
              class="mx-auto cover-img"
              :lazy-src="`${store.imgUrl}/${item.cover_img}`"
              :src="`${store.imgUrl}/${item.cover_img}`"
              @click="updatePDF(item.files)"
              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>

            <!-- <a :href="item.url" target="_blank">
              <img :src="item.img" alt="臺灣工藝學校全球學習共享平台" />
            </a> -->
            <section>
              <h3 v-html="item.title"></h3>
              <!-- <p>{{ item.depiction }}</p> -->
            </section>
          </v-col>
        </v-row>

        <div ref="viewerRef">
          <PDFViewer :file="fileName" />
        </div>

        <h2 id="bookList" class="mb-16">{{ t("crafts.title_3") }}</h2>

        <!-- <div class="search pt-5 my-10 me-sm-16" ref="searchLocation ">
          <span>
            <input
              v-model="searchInput"
              type="text"
              @keyup.enter="search()"
              placeholder="關鍵字搜尋"
            />
            <button @click="search()">
              <img src="@/assets/img/news/news-search-icon.png" alt="臺灣工藝學校全球學習共享平台" />
            </button>
          </span>
          <div
            v-if="searchError"
            class="d-flex justify-center align-center error me-4"
          >
            <v-icon color="primary" icon="mdi-alert" class="me-2"></v-icon>
            {{ t("no_found") }}
          </div>
        </div> -->

        <v-row class="justify-center book-list">
          <v-col
            cols="12"
            sm="10"
            md="6"
            v-for="(item, index) in book.list"
            :key="index"
            class="position-relative mt-10 mb-16 pb-16"
          >
            <a
              :href="$router.resolve(`/article-detail/${item.article_id}`).href"
            >
              <div class="overflow-hidden">
                <v-img
                  class="mx-auto cover-img"
                  :lazy-src="`${store.imgUrl}/${item.cover_img}`"
                  cover
                  :src="`${store.imgUrl}/${item.cover_img}`"
                  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>
            </a>

            <!-- <a :href="item.url" target="_blank">
              <img :src="item.img" alt="臺灣工藝學校全球學習共享平台" />
            </a> -->
            <section class="info">
              <p v-html="filteredContent(item.content)"></p>
              <span>{{ JSON.parse(item.tags)[0] }}</span>
            </section>
          </v-col>
        </v-row>

        <!-- <v-pagination
          v-model="currentPage"
          class="my-4"
          :length="totalPages"
        ></v-pagination> -->

        <h2 id="journal">{{ t("crafts.title_4") }}</h2>

        <div class="journal-content">
          <p>
            臺灣工藝學刊(Journal of
            Craftology｜Taiwan)是由中華民國文化部所屬臺灣工藝學校全球學習共享平台所出版之學術性半年刊，創立於2021年。
            <br />
            <br />
            本刊企圖以工藝為問題意識核心，致力於工藝學跨領域思維整合之研究論文，內容涵蓋當代工藝多元價值論述，藝術與人文、社會及科學之跨領域發展整合、產生對話與交集，提供工藝研究交流平台，經由公開徵求工藝相關領域之研究論文稿件，旨在促進臺灣工藝文化主體與工藝產業發展的學術研究質量，建構國內工藝學知識體系，以提升國內工藝學術研究水準。
          </p>

          <div class="list">
            <span class="title">
              <p>學刊主題</p>
              <p>發刊</p>
            </span>

            <ul>
              <li>
                <p>臺灣工藝學刊－第 1 期</p>
                <p>2022.11</p>
              </li>
              <li>
                <p>臺灣工藝學刊－創刊特別號</p>
                <p>2021.12</p>
              </li>
            </ul>
          </div>

          <div class="pdf-list">
            <div class="side-title">
              <h5>研究論文</h5>
              <h5>實務報告</h5>
            </div>
            <ul>
              <li v-for="(item, index) in craftsPdfList" :key="index">
                <h3>{{ item.title }}</h3>
                <h4>{{ item.en_title }}</h4>
                <p>{{ item.author }}　{{ item.en_author }}</p>
                <p>
                  關鍵字：{{ item.keywords }} <br />
                  keywords：{{ item.en_keywords }}
                </p>
                <a
                  :href="`${store.imgUrl}/pdf/crafts/${item.fileName}.pdf`"
                  download
                >
                  <span>
                    <v-icon
                      icon="mdi-download"
                      color="gray"
                      class="me-2 pt-1"
                    ></v-icon>
                    全文下載
                  </span>
                </a>
              </li>
            </ul>
          </div>
        </div>

        <h2 id="thesisGrant">{{ t("crafts.title_5") }}</h2>

        <ul class="mt-10">
          <li
            v-for="(item, index) in thesis.list"
            :key="index"
            class="post-item pa-5"
            rounded="xl"
          >
            <ArticleCard :data="item" type="article" />
          </li>
        </ul>
      </div>
    </v-container>
  </div>
</template>

<style lang="scss" scoped>
.article-content {
  margin-bottom: 9.375em;
}

h2 {
  padding-top: 6.25em;
  font-size: 1.875em;
  font-weight: 500;
  text-align: center;
}

.bg-img {
  background-image: url("@/assets/img/crafts/background.png");
  background-size: cover;
  background-position: top;
  @media (max-width: 960px) {
    background-size: contain;
    background-repeat: repeat;
  }
}

.read-list,
.book-list {
  p {
    margin-bottom: 0.625em;
  }
  h3,
  p {
    font-weight: 500;
    text-align: center;
    line-height: 1.875em;
  }
}

.read-list {
  .v-img {
    width: 100%;
    // height: 100%;
    max-height: 25em;
    object-fit: cover;
    cursor: pointer;

    @media (max-width: 600px) {
      width: 50%;
    }
  }

  @media (max-width: 600px) {
    section {
      width: 50%;
      padding: 0 0.625em;
      font-size: 0.875em;
    }
  }

  p {
    width: 18.125em;

    @media (max-width: 600px) {
      width: auto;
    }
  }
}

.book-list {
  margin-bottom: 6.25em;
  .info {
    width: 26.875em;
    padding: 0.625em 1.25em;
    position: absolute;
    right: -2.5em;
    bottom: -3.75em;
    z-index: 1;
    background: rgba(255, 255, 255, 0.8);
    border: 0.125em solid #c8cbcc;

    @media (max-width: 1280px) {
      width: 25em;
    }

    @media (max-width: 600px) {
      width: 20.625em;
      right: -0.1875em;
      bottom: -5em;
    }

    p {
      width: 18.75em;
      margin-bottom: 0;
      text-align: start;
    }
    span {
      display: block;
      margin-top: auto;
      position: absolute;
      bottom: 0.9375em;
      right: 0.9375em;
    }
  }
}

.pdf-list {
  display: flex;
  margin: 6.25em 0;
  .side-title {
    padding: 4.375em 0 4.375em 0.625em;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 0.3125em;
    background-color: var(--purple);
    h5 {
      padding: 1.25em 0.625em;
      position: relative;
      font-size: 1.625em;
      font-weight: 400;
      writing-mode: vertical-rl; // 垂直
      color: var(--purple);
      letter-spacing: 0.125em;
      background-color: #fff;

      @media (max-width: 600px) {
        font-size: 1.25em;
      }

      &::after,
      &::before {
        content: "";
        display: block;
        height: 0.9375em;
        width: 105%;
        background: #fff;
        position: absolute;
      }

      &::after {
        top: -0.4em;
        right: -0.2em;
        transform: rotate(-15deg);

        @media (max-width: 1200px) {
          top: -0.5em;
          right: -0.1875em;
        }
      }
      &::before {
        bottom: -0.4em;
        right: -0.2em;
        transform: rotate(15deg);

        @media (max-width: 1200px) {
          bottom: -0.5em;
          right: -0.1875em;
        }
      }
    }
  }
  ul {
    background-color: #fff;
    padding: 3.125em 3.125em 0 3.125em;

    @media (max-width: 600px) {
      padding: 1.5625em 1.5625em 0 1.5625em;
    }

    li {
      margin-bottom: 1.5625em;
      padding-bottom: 1.5625em;
      border-bottom: 0.0625em dashed #ccc;

      &:last-child {
        margin-bottom: 0;
        // padding-bottom: 0;
      }
      h3 {
        font-size: 1.375em;
        line-height: 1.875em;
        @media (max-width: 600px) {
          font-size: 1.125em;
        }
      }
      h4 {
        margin: 0.9375em 0;
        font-size: 1.125em;
        line-height: 1.625em;
        color: var(--gray);
        @media (max-width: 600px) {
          font-size: 1em;
        }
      }
      h3,
      h4 {
        font-weight: 500;
      }
      h3,
      h4,
      p {
        letter-spacing: 0.0625em;
      }
      p {
        font-size: 0.875em;
        color: var(--gray);
      }
      a {
        display: inline-block;
        padding: 0.3125em 0.625em;
        margin-top: 1.25em;
        font-size: 0.875em;
        border-radius: 0.3125em;
        border: 0.125em solid var(--gray);
        transition: all 0.3s;

        &:hover {
          opacity: 0.7;
        }

        span {
          display: flex;
          align-items: center;
        }
      }
    }
  }
}

.journal-content {
  margin-top: 5em;
  p {
    line-height: 1.75em;
  }
  .list {
    letter-spacing: 0.0625em;
    .title {
      margin-top: 6.25em;
      padding-bottom: 1.25em;
      font-size: 1.25em;
      border-bottom: 0.125em solid var(--purple);
    }

    .title,
    ul li {
      display: flex;
      justify-content: space-between;
    }

    ul {
      margin-top: 1.25em;
      li {
        margin-top: 0.625em;
        padding-bottom: 0.625em;
        border-bottom: 0.125em dashed #dddddd;
        // &:first-child {
        //   border-bottom: 0.125em dashed #ccc;
        // }
        p {
          font-weight: 400;
        }
      }
    }
  }
}
</style>