123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186 |
- <script setup>
- import { ref, reactive, computed, onMounted } from "vue";
- import { useMainStore } from "@/stores/store";
- // import axios from "axios";
- import Navbar from "@/components/Navbar.vue";
- const store = useMainStore();
- // let token = localStorage.getItem("token");
- let username = ref("");
- onMounted(async () => {
- await store.getProfile();
- username.value = store.profile.username;
- });
- // (async () => {
- // try {
- // const response = await axios.get(
- // `https://cmm.ai:8088/api/information?token=${token}`
- // );
- // console.log("response", response.data.msg);
- // if (!response.data.msg) {
- // store.logout();
- // return;
- // }
- // store.setProfile(response.data.msg);
- // username.value = response.data.msg.username;
- // } catch (error) {
- // console.error(error);
- // }
- // })();
- const firstName = computed(() => {
- const firstChar = username.value.charAt(0);
- return firstChar.toUpperCase();
- });
- let items = [
- { type: "divider" },
- {
- title: "個人檔案",
- icon: "mdi-account",
- url: "/user/profile",
- value: 1,
- },
- {
- title: "學習護照",
- icon: "mdi-book",
- url: "/user/passport",
- value: 2,
- },
- // {
- // title: "我的提案",
- // icon: "mdi-list-box",
- // url: "/user/proposal",
- // value: 3,
- // },
- {
- title: "我的開課",
- icon: "mdi-school",
- url: "/user/courses",
- value: 3,
- },
- {
- title: "我的收藏",
- icon: "mdi-bookmark",
- url: "/user/favorite-class",
- value: 4,
- },
- // {
- // title: "帳戶設定",
- // icon: "mdi-cog",
- // url: "/user/setting",
- // value: 5,
- // },
- { type: "divider" },
- ];
- </script>
- <template>
- <Navbar />
- <v-container fluid class="pa-8 pa-sm-16 dashboard-container">
- <v-row>
- <v-col cols="12" md="2">
- <v-card class="pa-5">
- <div class="user-info">
- <div class="img">
- <span> {{ firstName }}</span>
- </div>
- <p class="name">{{ username }}</p>
- </div>
- <v-list class="w-100 mt-1">
- <v-list-item v-for="(item, index) in items" :key="index">
- <v-divider v-if="item.type === 'divider'"></v-divider>
- <div v-else class="d-flex justify-center">
- <router-link :to="item.url" class="d-flex">
- <v-icon color="gray" class="me-2">{{ item.icon }}</v-icon>
- <v-list-item-title>{{ item.title }}</v-list-item-title>
- </router-link>
- </div>
- </v-list-item>
- <v-list-item>
- <div class="d-flex justify-center">
- <button class="d-flex" @click="store.logout()">
- <v-icon color="gray" class="me-2">mdi-logout</v-icon>
- <v-list-item-title>登出</v-list-item-title>
- </button>
- <!-- <router-link to="/" class="d-flex">
- <v-icon color="gray" class="me-2">mdi-logout</v-icon>
- <v-list-item-title>登出</v-list-item-title>
- </router-link> -->
- </div>
- </v-list-item>
- </v-list>
- </v-card>
- </v-col>
- <v-col cols="12" md="10">
- <router-view></router-view>
- </v-col>
- </v-row>
- </v-container>
- </template>
- <style lang="scss">
- .dashboard-container {
- max-width: 100% !important;
- letter-spacing: 0.0625em;
- .title {
- display: flex;
- justify-content: center;
- h4 {
- margin: 1.25em 0;
- padding-bottom: 1.25em;
- display: inline-block;
- font-size: 1.375em;
- font-weight: 500;
- text-align: center;
- border-bottom: 0.1875em solid var(--purple);
- }
- }
- .user-info {
- display: flex;
- flex-direction: column;
- align-items: center;
- .img {
- width: 4.375em;
- height: 4.375em;
- background-color: var(--purple);
- display: flex;
- align-items: center;
- justify-content: center;
- border-radius: 6.25em;
- span {
- color: #fff;
- font-size: 2.125em;
- font-weight: 500;
- }
- }
- .name {
- font-size: 1.75em;
- margin-top: 0.9375em;
- }
- }
- .v-card {
- padding: 1.5625em;
- .v-btn {
- font-size: 1.125em;
- }
- }
- .v-list {
- a,
- button {
- transition: all 0.3s;
- &:hover {
- opacity: 0.8;
- }
- }
- }
- }
- </style>
|