ntcri/src/views/Courses/SetUp.vue

<script setup>
import { ref, onMounted } from "vue";
import { useMainStore } from "@/stores/store";
import { useI18n } from "vue-i18n";
import Navbar from "@/components/Navbar.vue";

const { t } = useI18n();
const store = useMainStore();
let isLogin = store.checkToken();
let isLoading = ref(true);
let isCrafts = ref(false); // 身份是否為工藝教育者

async function getUserInfo() {
  await store.getUserInfo();
  console.log("store.userInfo", store.userInfo);
  if (Object.keys(store.userInfo).length) {
    let position = store.userInfo.position;
    console.log("身份：", position);
    if (position) {
      if (position["開課工藝家"]) {
        isCrafts.value = true;
        isLoading.value = false;
        console.log("是否為開課工藝家", isCrafts.value);
      } else {
        isCrafts.value = false;
        isLoading.value = false;
      }
    } else {
      isCrafts.value = false;
      isLoading.value = false;
    }
  } else {
    isLogin = false;
    isCrafts.value = false;
    isLoading.value = false;
    store.loginState = false;
    console.log("尚未登入");
    console.log("是否為開課工藝家", isCrafts.value);
  }
}

onMounted(() => {
  setTimeout(() => {
    getUserInfo();
  }, 500);
});

// 導向藝文中心登入頁面
async function login() {
  window.location.href = `https://member.moc.gov.tw/MOCMC/A0001/list?SYS_ID=CRAFT_NTCRI`;
}
</script>

<template>
  <Navbar />

  <div v-if="isLoading" class="d-flex justify-center py-16">
    <v-progress-circular
      color="grey-lighten-4"
      indeterminate
    ></v-progress-circular>
  </div>

  <v-container v-else class="my-16 py-16">
    <v-row class="align-center">
      <v-col cols="12" md="6">
        <div class="options">
          <img
            src="@/assets/img/setup-courses/素材-01.png"
            alt="臺灣工藝學校全球學習共享平台"
          />
          <router-link to="/setup-courses/tutorial">   {{ t("tutorial.title") }}</router-link>
        </div>
      </v-col>

      <v-col cols="12" md="6" class="mt-16 mt-md-0">
        <div v-if="!isLogin" class="options">
          <img
            src="@/assets/img/setup-courses/素材-02.png"
            alt="臺灣工藝學校全球學習共享平台"
          />
          <button @click="login()">登入會員開課</button>
          <!-- <button @click="store.openLoginDialog()">登入會員開課</button> -->
        </div>
        <div v-else-if="isCrafts" class="options">
          <img
            src="@/assets/img/setup-courses/素材-03.png"
            alt="臺灣工藝學校全球學習共享平台"
          />
          <router-link to="/setup-courses/create">
            {{ t("tutorial.create") }}
          </router-link>
        </div>
        <div v-else>
          <v-card class="text-center px-0 py-8 crafts-card">
            <v-card-item>
              <v-card-title>歡迎加入工藝教育者的行列</v-card-title>

              <!-- <v-card-subtitle class="my-5"
                >讓我們一步一步完成提案吧！ <br></v-card-subtitle
              > -->

              <p class="my-8">讓我們一步一步完成提案吧！</p>
            </v-card-item>

            <v-card-actions class="d-flex flex-column">
              <v-btn
                :loading="isLoading"
                variant="flat"
                color="purple"
                class="px-8 mt-10"
                size="large"
              >
                <router-link to="/setup-courses/proposal">開始提案</router-link>
              </v-btn>
              <small class="text-gray mt-8"
                >若提案通過後無法創建課程，請聯絡管理員。</small
              >
            </v-card-actions>
          </v-card>
        </div>
      </v-col>
    </v-row>

    <!-- <v-row v-if="isLogin && !isCrafts">
      <v-col cols="12" class="px-0">
        <v-card class="text-center px-0 py-8 crafts-card">
          <v-card-item>
            <v-card-title>歡迎加入工藝教育者的行列</v-card-title>

            <v-card-subtitle class="my-5"
              >讓我們一步一步完成提案吧！</v-card-subtitle
            >
          </v-card-item>

          <v-card-text>
            <v-btn
              :loading="isLoading"
              variant="flat"
              color="purple"
              class="px-8"
              size="large"
            >
              <router-link to="/setup-courses/proposal">開始提案</router-link>
            </v-btn>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row> -->
  </v-container>
</template>

<style lang="scss" scoped>
.crafts-card {
  margin-top: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 400px;
  letter-spacing: 1px;

  @media (max-width: 960px) {
    margin-top: 0;
  }

  .v-card-title {
    font-size: 1.8em;
    letter-spacing: 2px;
  }
  .v-card-subtitle {
    font-size: 1em;
  }
}
.swiper-slide {
  height: 31.25em !important;
}
.options {
  display: flex;
  flex-direction: column;
  align-items: center;
  a,
  button {
    display: block;
    padding: 1.25em 5em;
    font-size: 1.25em;
    letter-spacing: 0.125em;
    border: 0.125em solid var(--purple);
    border-radius: 0.9375em;
    transition: all 0.3s;

    &:hover {
      box-shadow: 0 0 0.5em var(--purple);
    }

    @media (max-width: 600px) {
      font-size: 1.125em;
    }
  }
  img {
    width: 100%;
    max-width: 31.25em;
  }
}

// Swiper
.background-image {
  background-image: url("@/assets/img/default.webp");
  width: 100%;
  height: 100%;
  position: absolute;
  background-size: cover;
  z-index: -1;
}

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 1em;

  /* Center slide text vertically */
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>