ntcri/src/views/CollegeGroup/Cross.vue

<script setup>
import { ref, reactive, watch } from "vue";
import { useMainStore } from "@/stores/store";
import axios from "axios";
import moment from "moment";

const store = useMainStore();

const breadcrumbs = reactive([
  {
    title: "首頁",
    disabled: false,
    href: "/",
  },
  {
    title: "工藝學群",
    disabled: true,
  },
  {
    title: "跨域增能",
    disabled: true,
  },
]);

let loading = ref(false);
let pageNum = ref(1); // 頁數(預設第一頁)
let pageAmount = ref(18); // 每頁顯示筆數
let totalPages = ref(1); // 總頁數
let totalNum = ref(0); // 資料總筆數
let selectCategory = ref([]); // 選擇類別
let isFilter = ref(false); // 篩選狀態
let filterList = reactive([]); // 篩選條件
let isSearch = ref(false); // 搜尋狀態
let searchInput = ref(""); // 關鍵字
let searchError = ref(false); // 搜尋錯誤訊息

watch(searchInput, (val) => {
  if (val === "") {
    searchError.value = false;
    getClass();
  }
});

const courese = reactive({
  list: [],
});

async function getClass() {
  loading.value = true;
  let url = `https://cmm.ai:8088/api/get_online_courese?no_org=udemy&page_num=${pageNum.value}&page_amount=${pageAmount.value}`;

  // 篩選類別
  if (isFilter.value) {
    filterList.map((item) => {
      url += item;
    });
  }

  // 關鍵字搜尋
  if (isSearch.value) {
    url += `&key_word=${searchInput.value}`;
  }

  try {
    const response = await axios.get(url);
    courese.list = response.data.online_coures;
    console.log("response.data", response.data);
    totalNum.value = response.data.total_num;
    totalPages.value = store.getTotalPages(response.data.total_num, 18);
    loading.value = false;

    if (!response.data.online_coures.length) {
      searchError.value = true;
    } else {
      searchError.value = false;
    }
  } catch (error) {
    loading.value = false;
    console.error(error);
  }
}

getClass();

const listLocation = ref(null);

watch(pageNum, () => {
  getClass();
  listLocation.value.scrollIntoView({ behavior: "smooth", block: "start" });
});

watch(selectCategory, (val) => {
  if (val.includes("全部")) {
    selectCategory.value = [];
    isFilter.value = false;
    pageNum.value = 1;
    getClass();
  } else {
    selectFilter("category", val);
  }
});

// 篩選課程
async function selectFilter(type, val) {
  isFilter.value = true;
  pageNum.value = 1; // 篩選時返回第一頁
  filterList.splice(0, filterList.length); // 清空陣列

  if (type === "category") {
    filterList.push(`&category=${val}`);
  }

  getClass();
}

async function handleSearch() {
  if (searchInput.value !== "") {
    isSearch.value = true;
  } else {
    isSearch.value = false;
  }
  getClass();
}
</script>

<template>
  <v-breadcrumbs
    :items="breadcrumbs"
    divider="/"
    class="mt-10 pa-0"
  ></v-breadcrumbs>

  <div class="list">
    <section>
      <h3>跨域增能</h3>
      <p>
        培育能承接文化生產者的內涵與工藝知識，並轉化成一般人能同理感受並更進一步在生活中學習應用的人才。
        <br />
        主要專業並非工藝而是更偏向社會傳播，或其他八大藝術專業或民俗文化專業。但能進一步了解文化生產者。
        <br />
        不管是傳統工藝的延伸，或是有形、無形文化資產的保護與創意化，都鼓勵跨領域的合作與創作，並在最後達到永續經營，成為國家升級的重要推動力量。以因應本土化、國際化、多元化的環境銳變與社會趨勢。
      </p>
    </section>

    <section>
      <h3>提供多元領域專業課程</h3>
      <p>
        法務知識、財務稅務、資金籌措、藝術行政、市場分析、產品開發、消費者管理、藝術藏家、
        品牌設計、市場通路、行銷策略、展覽企劃、文案撰寫、公關溝通、其他類及，策略課程
      </p>
    </section>

    <section>
      <h3>教學型態</h3>
      <div class="d-flex flex-column flex-sm-row justify-center">
        <p>
          素養型 <br />
          （講述核心素養）
        </p>
        <p>
          知識型 <br />
          （講述基本能力）
        </p>
        <p>
          技術型 <br />
          （實作、討論）
        </p>
      </div>
    </section>
  </div>

  <div
    ref="listLocation"
    class="d-flex flex-column flex-sm-row align-center justify-space-between title"
  >
    <h2>所有課程</h2>
    <div class="search">
      <span>
        <input
          v-model="searchInput"
          type="text"
          @keyup.enter="handleSearch()"
          placeholder="關鍵字搜尋"
        />
        <button @click="handleSearch()">
          <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>
        沒有符合搜尋條件的項目
      </div>
    </div>
  </div>

  <v-row>
    <v-col cols="12" md="3" lg="2">
      <v-row class="filter-list">
        <v-col cols="12" sm="6" md="12">
          <v-select
            v-model="selectCategory"
            label="類別"
            :items="[
              '全部',
              '財務稅務',
              '市場分析',
              '行銷策略',
              '公關溝通',
              '法務知識',
              '產品開發',
              '品牌設計',
              '消費者管理',
              '策劃展覽',
              '藝術行政',
              '文案撰寫',
              '教學影音',
              '品牌企劃',
            ]"
            multiple
            hide-details
          ></v-select>
        </v-col>
        <!-- <v-col cols="12">
            <v-btn
              @click="selectFilter()"
              class="w-100"
              variant="flat"
              color="brown"
              rounded="xl"
            >
              搜尋
            </v-btn>
          </v-col>
          <v-col cols="12">
            <v-btn class="w-100" variant="outlined" color="brown" rounded="xl">
              清除重填
            </v-btn>
          </v-col> -->
      </v-row>
    </v-col>
    <v-col cols="12" md="9" lg="10">
      <v-row class="cross-courese">
        <v-col
          cols="12"
          md="6"
          lg="4"
          v-for="(item, index) in courese.list"
          :key="index"
          class="pa-5"
        >
          <div class="main-card">
            <a :href="item.video_url" target="_blank">
              <section class="card-title">
                <h3>{{ item.title }}</h3>
              </section>
            </a>

            <a :href="item.video_url" target="_blank">
              <div class="card-info">
                <ul>
                  <li class="d-flex align-center">
                    <p class="mb-0 ms-3">分類： {{ item.category }}</p>
                  </li>
                  <li class="d-flex align-center">
                    <p class="mb-0 ms-3">來源： {{ item.content }}</p>
                  </li>
                </ul>
              </div>
            </a>
          </div>
        </v-col>
      </v-row>
    </v-col>
  </v-row>

  <v-pagination
    v-if="courese.list.length"
    v-model="pageNum"
    :length="totalPages"
    rounded="circle"
    class="mt-16"
  ></v-pagination>

  <span v-if="courese.list.length" class="text-gray total-item"
    >總筆數：{{ totalNum }}</span
  >

  <div class="title mt-16">
    <h2>工藝中心開課</h2>
  </div>

  <p class="cooming-soon">「籌備中 cooming soon」</p>
</template>

<style lang="scss" scoped>
.main-block {
  h2 {
    @media (max-width: 600px) {
      margin-bottom: 30px;
    }
  }
}

.v-input {
  @media (max-width: 600px) {
    max-width: 250px;
    margin: auto;
    margin-top: -20px;
  }
}

.cross-courese {
  .main-card {
    .card-title {
      height: 40%;

      h3 {
        font-size: 18px;
        font-weight: 500;
      }
    }

    .card-info {
      padding: 0;
      height: 60%;

      ul {
        justify-content: center;

        li:first-child {
          margin-bottom: 5px;
        }

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

.list {
  max-width: 850px;
  margin: 100px auto 50px;
  @media (max-width: 600px) {
    margin: 50px auto;
  }
  section {
    margin-bottom: 50px;
    text-align: center;
    h3 {
      margin-left: -20px;
      margin-bottom: 25px;
      list-style: disc;
      font-size: 28px;
      font-weight: 500;
      @media (max-width: 600px) {
        font-size: 22px;
      }
      &::before {
        content: "\2022"; /* Unicode 編碼 */
        font-size: 1.2em;
        color: #bca2b5;
        position: relative;
        top: 3px;
      }
    }
    p {
      line-height: 28px;
      letter-spacing: 1px;
      @media (max-width: 600px) {
        font-size: 14px;
      }
    }
  }
}
</style>