123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202 |
- <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>
|