ntcri/src/views/CourseDetail.vue

<script setup>
import { ref, reactive, computed } from "vue";
import { useRoute } from "vue-router";
import axios from "axios";
import moment from "moment";
import Navbar from "@/components/Navbar.vue";

const route = useRoute();
const courseId = route.params.id; // 網址參數
let groupName = ref("");
let course = reactive({
  data: [],
});
let groupSort = ref("");

const breadcrumbs = reactive([
  {
    title: "首頁",
    disabled: false,
    href: "/",
  },
  {
    title: "探索課程",
    disabled: false,
    href: "/ntcri/course-list",
  },
  {
    title: "課程清單",
    disabled: true,
  },
]);

// 取得資料
(async () => {
  try {
    const response = await axios.get(
      `https://cmm.ai:8088/api/get_class_name?class_name_id=${courseId}`
    );
    course.data = response.data.classes[0];
    groupSort.value = course.data.group_sort;
    console.log("groupSort.value", groupSort.value);
    console.log("courseData", course.data);

    if (course.data.group_id === 1) {
      groupName.value = "未來工藝學群";
    } else if (course.data.group_id === 2) {
      groupName.value = "技藝工藝學群";
    } else if (course.data.group_id === 3) {
      groupName.value = "生活工藝學群";
    } else if (course.data.group_id === 4) {
      groupName.value = "青年工藝學群";
    } else if (course.data.group_id === 5) {
      groupName.value = "世代工藝學群";
    } else if (course.data.group_id === 6) {
      groupName.value = "修護工藝學群";
    } else if (course.data.group_id === 7) {
      groupName.value = "跨域工藝學群";
    } else if (course.data.group_id === 8) {
      groupName.value = "線上工藝學群";
    }
  } catch (error) {
    console.error(error);
  }
})();

let session = reactive({
  data: [],
});

// 取得場次
(async () => {
  try {
    const response = await axios.get(
      `https://cmm.ai:8088/api/get_event?class_name_id=${courseId}`
    );
    // course.data = response.data.classes[0];
    session.data = response.data.classes;
    console.log("response", response.data.classes[0]);
  } catch (error) {
    console.error(error);
  }
})();

let other = reactive({
  classes: [],
});

// 取得清單
(async () => {
  try {
    const response = await axios.get("https://cmm.ai:8088/api/get_class_name");
    console.log("response.data.classes", response.data.classes);
    // other.classes = response.data.classes;
    // console.log('handleRandom(response.data.classes,3)',handleRandom(response.data.classes,3));
    other.classes = handleRandom(response.data.classes, 3);
    console.log("other.classes", other.classes);
  } catch (error) {
    console.error(error);
  }
})();

// 隨機取值
function handleRandom(arr, length) {
  let newArr = [];
  for (let i = 0; i < length; i++) {
    let index = Math.floor(Math.random() * arr.length);
    let item = arr[index];
    newArr.push(item);
    arr.splice(index, 1);
  }
  return newArr.reverse();
}

const dynamicCols = computed(() => {
  return groupSort.value === "pinkoi" ? "5" : "8";
});
</script>

<template>
  <Navbar />

  <v-container class="mt-16 course-detail">
    <v-breadcrumbs
      :items="breadcrumbs"
      divider="/"
      class="mt-3 mb-16 pa-0"
    ></v-breadcrumbs>
    <v-row class="justify-center">
      <v-col cols="3" class="title pa-0">
        <img src="@/assets/img/course/detail-background.png" alt="" class="bg-img" />
        <h2>{{ course.data.name }}</h2>
      </v-col>
      <v-col :cols="dynamicCols" class="pa-0 d-flex justify-center">
        <img
          :src="course.data.cover_img"
          alt=""
          class="cover-img"
          :class="{ small: groupSort === 'pinkoi' }"
        />
      </v-col>
      <v-col cols="12">
        <div class="info">
          <table>
            <thead>
              <tr>
                <th colspan="2">課程資訊</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>課程簡介</td>
                <td>{{ course.data.introduction }}</td>
              </tr>
              <tr v-show="course.data.category !== ''">
                <td>課程類別</td>
                <td>{{ course.data.category }}</td>
              </tr>
              <tr>
                <td>主辦單位</td>
                <td>{{ course.data.organizer }}－{{ course.data.school }}</td>
              </tr>
              <tr>
                <td>所屬學群</td>
                <td>{{ groupName }}</td>
              </tr>
              <!-- <tr>
                <td>報名對象</td>
                <td></td>
              </tr>
              <tr>
                <td>收費方式</td>
                <td></td>
              </tr>
              <tr>
                <td>報名方式</td>
                <td></td>
              </tr>
              <tr>
                <td>聯絡方式</td>
                <td></td>
              </tr>
              <tr>
                <td>備註</td>
                <td></td>
              </tr> -->
            </tbody>
          </table>
          <div class="d-flex justify-end">
            <v-btn rounded="xl" color="brown">附件下載</v-btn>
          </div>
        </div>
      </v-col>
      <v-col cols="12">
        <div class="sessions">
          <table>
            <thead>
              <tr>
                <th>場次名稱</th>
                <th>開始／結束時間</th>
                <th>課程地點</th>
                <th>講師</th>
                <th>報名截止日</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in session.data" :key="index">
                <td>{{ item.class_name }}</td>
                <td>
                  {{ moment(`${item.start_time}`).format("YYYY/MM/DD H:mm") }}
                  <br />
                  ～ <br />
                  {{ moment(`${item.end_time}`).format("YYYY/MM/DD H:mm") }}
                </td>
                <td></td>
                <td></td>
                <td></td>
                <td style="width: 0; padding: 0; border: none">
                  <div class="signup-btn">
                    <v-btn rounded="xl" color="brown" :href="item.URL">
                      點我報名
                    </v-btn>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </v-col>
      <v-col cols="12" class="my-16">
        <p class="other-title">其他推薦課程</p>
        <v-row>
          <v-col
            sm="6"
            md="4"
            cols="12"
            v-for="(item, index) in other.classes"
            :key="index"
            class="pa-5"
          >
            <div class="main-card">
              <section class="card-title">
                <h3>{{ item.name }}</h3>
              </section>
              <div class="card-info">
                <a
                  :href="
                    $router.resolve(`/course-detail/${item.class_name_id}`).href
                  "
                >
                  <img :src="item.cover_img" alt="" class="cover-img" />
                </a>
                <!-- <img :src="item.cover_img" alt="" class="cover-img" /> -->
                <span class="d-flex align-center py-3">
                  <img src="@/assets/img/icon/location_icon.png" alt="" />
                  <p class="mb-0 ms-3">
                    {{ item.school }}
                  </p>
                </span>
              </div>
            </div>
          </v-col>
        </v-row>
      </v-col>
    </v-row>
  </v-container>
</template>

<style lang="scss">
.course-detail {
  .cover-img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    &.small {
      width: auto;
      height: auto;
    }
  }

  .title {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    h2 {
      margin-top: -35px;
      margin-left: 5px;
      font-size: 24px;
      font-weight: 500;
      line-height: 32px;
      letter-spacing: 1px;
      color: #201715;
    }
    .bg-img {
      width: 250px;
      position: absolute;
      z-index: -1;
      right: -15px;
      bottom: -100px;
    }
  }

  .info {
    margin: 50px auto;
    padding: 25px 50px;
    table {
      td {
        padding: 10px 20px;
        line-height: 32px;
        letter-spacing: 1px;
        vertical-align: top;
        &:first-child {
          border-right: 1px solid #333;
        }
      }
      th {
        padding-bottom: 20px;
        border-bottom: 1px solid #333;
      }
      th,
      td:first-child {
        width: 117px;
        font-size: 18px;
        font-weight: 500;
      }
    }
  }

  .info,
  .sessions {
    background-color: #f2f2f4;
    table {
      width: 100%;
      border-collapse: collapse;
      td {
        line-height: 22px;
      }
    }
  }

  .sessions {
    padding: 25px 50px 70px;
    table {
      position: relative;
      th {
        width: 117px;
        font-size: 18px;
        font-weight: 500;
        padding-bottom: 20px;
      }
      td {
        padding: 20px;
        vertical-align: middle;
      }
      tbody {
        background-color: #fff;
      }
    }

    .signup-btn {
      position: absolute;
      bottom: -53px;
      right: 0;
    }
  }

  @media (max-width: 960px) {
    width: 100%;
  }

  .other-title {
    margin: 30px 0;
    padding-bottom: 30px;
    font-size: 26px;
    text-align: center;
    border-bottom: 1px solid;
  }
}
</style>