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