ntcri/src/views/User/Passport.vue

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

const store = useMainStore();
let token = store.token;
console.log("學習護照", store.token);

let register = reactive({
  list: [],
});

(async () => {
  try {
    const response = await axios.get(
      `https://cmm.ai:8088/api/get_registration?access_token=${token}`
    );
    register.list = response.data.registrations;
    console.log("response", response.data.registrations);
  } catch (error) {
    console.error(error);
  }
})();
</script>

<template>
  <v-card class="h-100">
    <div class="title">
      <h4>學習護照</h4>
    </div>
    <p class="text-center">
      凡在平台選擇「學習時數課程」並報名 <br />
      即可累積點數，兌換精美好禮－工藝材料包
    </p>

    <v-row class="main-info mt-10">
      <v-col cols="12" lg="6" class="d-flex flex-column align-center">
        <h5>累積學習<span>時數</span></h5>
        <div class="d-flex align-center position-relative">
          <p>
            自 2023 年起至今 <br />
            完成課程時數
          </p>
          <img src="@/assets/img/passport/icon-01.png" alt="" class="icon" />
        </div>
        <div class="record-item">
          <img src="@/assets/img/passport/icon-03.png" alt="" />
          <p>
            總共 <br />
            <strong> 102 </strong> <small>小時</small>
          </p>
        </div>
      </v-col>
      <v-col cols="12" lg="6" class="d-flex flex-column align-center">
        <h5>累積學習<span>點數</span></h5>
        <div class="d-flex align-center position-relative">
          <p>
            累積 20 點即可兌換 1 份 <br />
            工藝材料包
          </p>
          <img src="@/assets/img/passport/icon-02.png" alt="" class="icon" />
        </div>
        <div class="record-item">
          <img src="@/assets/img/passport/icon-03.png" alt="" />
          <p>
            總共 <br />
            <strong> 33 </strong> <small>點</small>
          </p>
        </div>
      </v-col>
      <v-col cols="12" class="my-16">
        <div class="main-table">
          <h6 class="table-title">報名中課程</h6>
          <table>
            <thead>
              <tr>
                <th>名稱</th>
                <th width="30%">日期</th>
                <th width="15%">時數</th>
                <th width="15%">報名完成</th>
              </tr>
            </thead>
            <tbody v-if="register.list.length">
              <!-- <tr v-if="!register.list.length">
                <p class="hint-item">
                  目前沒有報名紀錄喔！點擊開始探索您的專屬課程！
                </p>
              </tr> -->
              <tr v-for="(item, index) in register.list" :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>3 小時</td>
                <td>
                  <span class="finish-icon" v-if="item.reg_confirm">
                    <v-icon icon="mdi-check" class="pb-1"></v-icon>
                  </span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <router-link
          v-if="!register.list.length"
          to="/course-list"
          class="hint-item"
        >
          目前沒有報名紀錄喔！ <br />
          點擊開始探索您的專屬課程！
        </router-link>
      </v-col>

      <v-col cols="12" class="my-16">
        <div class="main-table">
          <h6 class="table-title">上課紀錄</h6>
          <table>
            <thead>
              <tr>
                <th>名稱</th>
                <th width="30%">日期</th>
                <th width="15%">時數</th>
                <th width="15%">報名完成</th>
              </tr>
            </thead>
            <tbody>
              <tr></tr>
            </tbody>
          </table>
        </div>
      </v-col>

      <div class="dot-item">
        <span class="t-dot"></span>
        <span class="r-dot"></span>
        <span class="b-dot"></span>
        <span class="l-dot"></span>
      </div>
    </v-row>
  </v-card>
</template>

<style lang="scss" scoped>
p {
  line-height: 30px;
}

.main-info {
  margin: 30px;
  padding: 50px;
  position: relative;
  border: 2px solid var(--blue);
  border-radius: 20px;

  @media (max-width: 600px) {
    margin: 0;
    padding: 50px 20px 100px;
  }

  h5 {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 1px;
    span {
      display: block;
      margin: 5px 0 15px;
      font-size: 36px;
    }
  }

  p {
    text-align: center;
    line-height: 22px;
    @media (max-width: 490px) {
      font-size: 14px;
    }
  }

  .icon {
    width: 50px;
    position: absolute;
    right: -50px;
  }

  .record-item {
    margin-top: 20px;
    position: relative;
    p {
      width: 100%;
      position: absolute;
      z-index: 100;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #fff;
      font-size: 30px;
    }
    strong {
      display: inline-block;
      margin: 25px 0;
      font-size: 56px;
      font-weight: 500;
      @media (max-width: 600px) {
        font-size: 50px;
      }
    }
    small {
      font-size: 20px;
    }
    img {
      max-width: 260px;
      @media (max-width: 600px) {
        max-width: 220px;
      }
    }
  }
}

.table-title {
  background-color: var(--blue);
}

table {
  thead {
    border-bottom: 2px solid var(--blue);
  }
  tbody {
    td {
      border-bottom: 1px solid var(--blue);
      line-height: 24px;
      padding: 15px;
    }
  }
  .finish-icon {
    padding: 8px;
    border: 2px solid var(--blue);
    border-radius: 100px;
    .v-icon {
      color: var(--blue);
    }
  }
}
</style>