ntcri/src/components/CourseCard.vue

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

const props = defineProps({
  data: {
    type: Object,
  },
});

const store = useMainStore();
let progress = ref(false);
let token = localStorage.getItem("token");

// 收藏課程清單
let favorites = reactive({
  list: [],
});

// 加入收藏課程
async function setFavoriteClass(classId) {
  let isLogin = store.checkToken();
  if (!isLogin) {
    store.openLoginDialog();
    return;
  }

  progress.value = true;

  const url = `https://cmm.ai:8088/api/add_favorite_class?class_name_id=${classId}&access_token=${token}`;
  try {
    const response = await axios.post(url);
    getFavoriteClass();
    progress.value = false;
  } catch (error) {
    console.error(error);
  }
}

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

getFavoriteClass();

// 刪除收藏課程
async function deleteFavoriteClass(classId) {
  progress.value = true;
  try {
    const response = await axios.post(
      `https://cmm.ai:8088/api/delete_favorite_class?class_name_id=${classId}&access_token=${token}`
    );
    progress.value = false;
    getFavoriteClass();
  } catch (error) {
    console.error(error);
  }
}

// 檢查收藏狀態
function isClassFavorite(classId) {
  if (favorites.list) {
    let list = favorites.list.map((e) => e.class_name_id);
    return list.includes(classId);
  }
}

// // 返回課程圖片網址
// function getImageSrc(data) {
//   console.log("data", data);
//   if (data.is_inner === 0) {
//     return data.cover_img;
//   } else if (data.group_id === 9) {
//     return store.getImageUrl("cfa-default.jpg");
//   } else if (data.special_class_list_name === "one_day_class") {
//     return store.getImageUrl("default.png");
//   } else if (data.org === "Udemy") {
//     return data.cover_img;
//   } else {
//     return `https://ntcri.org/${data.cover_img}`;
//   }
// }
</script>

<template>
  <div class="main-card">
    <section class="card-title">
      <h3>{{ data.org === "Udemy" ? data.title : data.name }}</h3>
    </section>
    <div class="card-info">
      <!-- <router-link :to="`/course-detail/${data.class_name_id}`"> -->
      <a
        :href="
          data.org !== 'Udemy'
            ? $router.resolve(`/course-detail/${data.class_name_id}`).href
            : data.video_url
        "
        target="_blank"
      >
        <div class="overflow-hidden">
          <v-img
            class="mx-auto cover-img"
            :lazy-src="store.getImageSrc(data)"
            height="13.75em"
            cover
            :src="store.getImageSrc(data)"
            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>

      <div class="d-flex justify-end mt-3">
        <small class="text-gray">編號：{{ data.encode }}</small>
      </div>
      <!-- </router-link> -->
      
      <ul v-if="data.org !== 'Udemy'">
        <li class="d-flex align-center mb-5">
          <div class="description">
            <p
              class="text-gray pt-3"
              v-html="store.formatString(data.introduction)"
            ></p>
          </div>
        </li>
        <li class="d-flex align-center justify-space-between">
          <div class="d-flex align-center">
            <v-icon
              color="primary"
              icon="mdi-map-marker"
              class="me-1 mt-1"
            ></v-icon>
            <p class="mb-0 pe-3 location-item">
              {{ data.location_name }}
            </p>
          </div>

          <button aria-label="收藏課程">
            <v-icon
              v-if="isClassFavorite(data.class_name_id)"
              @click="deleteFavoriteClass(data.class_name_id)"
              color="primary"
              icon="mdi-bookmark"
              size="large"
            ></v-icon>
            <v-icon
              v-else
              @click="setFavoriteClass(data.class_name_id)"
              color="primary"
              icon="mdi-bookmark-outline"
              size="large"
            ></v-icon>
          </button>
        </li>
      </ul>

      <ul v-else class="justify-center">
        <li>
          <div class="description">
            <p
              class="text-gray pt-3"
              v-html="store.formatString(data.content)"
            ></p>
          </div>

          <!-- <p class="text-gray pt-3">
            {{ data.content }}
          </p> -->
        </li>
      </ul>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.description {
  height: 7em;
  overflow: hidden;
}

.location-item {
  -webkit-line-clamp: 2 !important;
}
</style>