SetUp.vue 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237
  1. <script setup>
  2. import { ref, onMounted } from "vue";
  3. import { useMainStore } from "@/stores/store";
  4. import { useI18n } from "vue-i18n";
  5. import Navbar from "@/components/Navbar.vue";
  6. const { t } = useI18n();
  7. const store = useMainStore();
  8. let isLogin = store.checkToken();
  9. let isLoading = ref(true);
  10. let isCrafts = ref(false); // 身份是否為工藝教育者
  11. async function getUserInfo() {
  12. await store.getUserInfo();
  13. console.log("store.userInfo", store.userInfo);
  14. if (Object.keys(store.userInfo).length) {
  15. let position = store.userInfo.position;
  16. console.log("身份:", position);
  17. if (position) {
  18. if (position["開課工藝家"]) {
  19. isCrafts.value = true;
  20. isLoading.value = false;
  21. console.log("是否為開課工藝家", isCrafts.value);
  22. } else {
  23. isCrafts.value = false;
  24. isLoading.value = false;
  25. }
  26. } else {
  27. isCrafts.value = false;
  28. isLoading.value = false;
  29. }
  30. } else {
  31. isLogin = false;
  32. isCrafts.value = false;
  33. isLoading.value = false;
  34. store.loginState = false;
  35. console.log("尚未登入");
  36. console.log("是否為開課工藝家", isCrafts.value);
  37. }
  38. }
  39. onMounted(() => {
  40. setTimeout(() => {
  41. getUserInfo();
  42. }, 500);
  43. });
  44. // 導向藝文中心登入頁面
  45. async function login() {
  46. window.location.href = `https://member.moc.gov.tw/MOCMC/A0001/list?SYS_ID=CRAFT_NTCRI`;
  47. }
  48. </script>
  49. <template>
  50. <Navbar />
  51. <div v-if="isLoading" class="d-flex justify-center py-16">
  52. <v-progress-circular
  53. color="grey-lighten-4"
  54. indeterminate
  55. ></v-progress-circular>
  56. </div>
  57. <v-container v-else class="my-16 py-16">
  58. <v-row class="align-center">
  59. <v-col cols="12" md="6">
  60. <div class="options">
  61. <img
  62. src="@/assets/img/setup-courses/素材-01.png"
  63. alt="臺灣工藝學校全球學習共享平台"
  64. />
  65. <router-link to="/setup-courses/tutorial"> {{ t("tutorial.title") }}</router-link>
  66. </div>
  67. </v-col>
  68. <v-col cols="12" md="6" class="mt-16 mt-md-0">
  69. <div v-if="!isLogin" class="options">
  70. <img
  71. src="@/assets/img/setup-courses/素材-02.png"
  72. alt="臺灣工藝學校全球學習共享平台"
  73. />
  74. <button @click="login()">登入會員開課</button>
  75. <!-- <button @click="store.openLoginDialog()">登入會員開課</button> -->
  76. </div>
  77. <div v-else-if="isCrafts" class="options">
  78. <img
  79. src="@/assets/img/setup-courses/素材-03.png"
  80. alt="臺灣工藝學校全球學習共享平台"
  81. />
  82. <router-link to="/setup-courses/create">
  83. {{ t("tutorial.create") }}
  84. </router-link>
  85. </div>
  86. <div v-else>
  87. <v-card class="text-center px-0 py-8 crafts-card">
  88. <v-card-item>
  89. <v-card-title>歡迎加入工藝教育者的行列</v-card-title>
  90. <!-- <v-card-subtitle class="my-5"
  91. >讓我們一步一步完成提案吧! <br></v-card-subtitle
  92. > -->
  93. <p class="my-8">讓我們一步一步完成提案吧!</p>
  94. </v-card-item>
  95. <v-card-actions class="d-flex flex-column">
  96. <v-btn
  97. :loading="isLoading"
  98. variant="flat"
  99. color="purple"
  100. class="px-8 mt-10"
  101. size="large"
  102. >
  103. <router-link to="/setup-courses/proposal">開始提案</router-link>
  104. </v-btn>
  105. <small class="text-gray mt-8"
  106. >若提案通過後無法創建課程,請聯絡管理員。</small
  107. >
  108. </v-card-actions>
  109. </v-card>
  110. </div>
  111. </v-col>
  112. </v-row>
  113. <!-- <v-row v-if="isLogin && !isCrafts">
  114. <v-col cols="12" class="px-0">
  115. <v-card class="text-center px-0 py-8 crafts-card">
  116. <v-card-item>
  117. <v-card-title>歡迎加入工藝教育者的行列</v-card-title>
  118. <v-card-subtitle class="my-5"
  119. >讓我們一步一步完成提案吧!</v-card-subtitle
  120. >
  121. </v-card-item>
  122. <v-card-text>
  123. <v-btn
  124. :loading="isLoading"
  125. variant="flat"
  126. color="purple"
  127. class="px-8"
  128. size="large"
  129. >
  130. <router-link to="/setup-courses/proposal">開始提案</router-link>
  131. </v-btn>
  132. </v-card-text>
  133. </v-card>
  134. </v-col>
  135. </v-row> -->
  136. </v-container>
  137. </template>
  138. <style lang="scss" scoped>
  139. .crafts-card {
  140. margin-top: 120px;
  141. display: flex;
  142. flex-direction: column;
  143. align-items: center;
  144. justify-content: center;
  145. height: 400px;
  146. letter-spacing: 1px;
  147. @media (max-width: 960px) {
  148. margin-top: 0;
  149. }
  150. .v-card-title {
  151. font-size: 1.8em;
  152. letter-spacing: 2px;
  153. }
  154. .v-card-subtitle {
  155. font-size: 1em;
  156. }
  157. }
  158. .swiper-slide {
  159. height: 31.25em !important;
  160. }
  161. .options {
  162. display: flex;
  163. flex-direction: column;
  164. align-items: center;
  165. a,
  166. button {
  167. display: block;
  168. padding: 1.25em 5em;
  169. font-size: 1.25em;
  170. letter-spacing: 0.125em;
  171. border: 0.125em solid var(--purple);
  172. border-radius: 0.9375em;
  173. transition: all 0.3s;
  174. &:hover {
  175. box-shadow: 0 0 0.5em var(--purple);
  176. }
  177. @media (max-width: 600px) {
  178. font-size: 1.125em;
  179. }
  180. }
  181. img {
  182. width: 100%;
  183. max-width: 31.25em;
  184. }
  185. }
  186. // Swiper
  187. .background-image {
  188. background-image: url("@/assets/img/default.webp");
  189. width: 100%;
  190. height: 100%;
  191. position: absolute;
  192. background-size: cover;
  193. z-index: -1;
  194. }
  195. .swiper {
  196. width: 100%;
  197. height: 100%;
  198. }
  199. .swiper-slide {
  200. text-align: center;
  201. font-size: 1em;
  202. /* Center slide text vertically */
  203. display: flex;
  204. justify-content: center;
  205. align-items: center;
  206. }
  207. .swiper-slide img {
  208. display: block;
  209. width: 100%;
  210. height: 100%;
  211. object-fit: cover;
  212. }
  213. </style>