ntcri/src/views/User/FavoriteClass.vue

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

const store = useMainStore();
let favorites = reactive({
  list: [],
});
let favoritesAll = reactive({
  list: [],
});

let token = store.token;

// 取得收藏課程
async function getFavoriteClass() {
  try {
    const response = await axios.get(
      `https://cmm.ai:8088/api/get_favorite_class?access_token=${token}`
    );
    console.log(
      "response.data.favorite_courses",
      response.data.favorite_courses
    );
    favorites.list = response.data.favorite_courses;
    favoritesAll.list = response.data.favorite_courses;
  } catch (error) {
    console.error(error);
  }
}

getFavoriteClass();

let progress = ref(false);
let timeoutId = null;
let searchError = ref(false);
const searchText = ref("");
const filtered = reactive({
  list: [],
});

watch(searchText, (val) => {
  if (val === "") {
    favorites.list = favoritesAll.list;
  }
});

// 延遲觸發
const handleInput = () => {
  clearTimeout(timeoutId);
  timeoutId = setTimeout(handleSearch, 500);
};

// 課程搜尋
const handleSearch = () => {
  filtered.list = favorites.list.filter((item) =>
    item.name.includes(searchText.value)
  );
  if (filtered.list.length) {
    favorites.list = filtered.list;
    searchError.value = false;
  } else {
    favorites.list = favoritesAll.list;
    searchError.value = true;
    setTimeout(() => {
      searchError.value = false;
    }, 2000);
  }
  console.log("filtered", filtered);
};
</script>

<template>
  <v-card class="h-100">
    <div class="title">
      <h4>我的收藏</h4>
    </div>
    <v-text-field
      v-model.lazy="searchText"
      class="ms-5 mt-5"
      hide-details
      @input="handleInput"
    >
      <template v-slot:label>
        <span>
          搜尋課程<v-icon
            icon="mdi-text-box-search-outline"
            class="pb-1 ps-1"
          ></v-icon>
        </span>
      </template>
    </v-text-field>
    <div class="error">
      <div v-if="searchError" class="d-flex align-center ms-6 pt-2">
        <v-icon color="primary" icon="mdi-alert" class="me-2"></v-icon>
        沒有符合搜尋條件的項目
      </div>
    </div>
    <v-container>
      <v-row>
        <v-col cols="12" v-if="!favorites.list.length">
          <router-link to="/setup-courses" class="hint-item">
            <v-icon color="purple" icon="mdi-bookmark" class="mb-2"></v-icon>
            <p>
              收藏是空的喔！ <br />
              趕快前往探索課程找尋感興趣的課程吧！
            </p>
          </router-link>
        </v-col>
        <v-col
          sm="4"
          cols="12"
          v-for="(item, index) in favorites.list"
          :key="index"
          class="pa-5"
        >
          <CourseCard :data="item" />
        </v-col>
      </v-row>
      <div class="progress-item" v-if="progress">
        <v-progress-circular
          :size="50"
          indeterminate
          color="primary"
        ></v-progress-circular>
      </div>
    </v-container>
  </v-card>
</template>

<style lang="scss" scoped>
.error {
  height: 1.5625em;
}
</style>