我的页面

src/router/index.js

@@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from '@ionic/vue-router'
 import TabsPage from '../views/TabsPage.vue'
 import { Page } from './Page'
 import { useUserStore } from '../stores/user'
+import { Dialog } from 'vant'
 
 const router = createRouter({
     history: createWebHistory(import.meta.env.BASE_URL),
@@ -60,7 +61,16 @@ router.beforeEach((to, from, next) => {
                     next()
                 })
                 .catch(() => {
-                    next()
+                    Dialog.confirm({
+                        title: '提示',
+                        message: '用户未登录,是否立即登录'
+                    })
+                        .then(() => {
+                            next('/login')
+                        })
+                        .catch(() => {
+                            next(false)
+                        })
                 })
         } else {
             next()

src/stores/user.js

@@ -21,7 +21,10 @@ export const useUserStore = defineStore('user', () => {
         })
     }
     const get = async () => {
-        user.value = http.get('/user/my')
+        return http.get('/user/my').then(res => {
+            console.log(res)
+            user.value = res
+        })
     }
     return { user, login, get }
 })

src/views/Mine.vue

@@ -1,10 +1,249 @@
 <template>
     <ion-page>
-        <ion-content class="mine" :fullscreen="true"> </ion-content>
+        <ion-content class="mine" :fullscreen="true">
+            <img class="userInfo-bg" src="../assets/userBg.png" alt="" />
+            <div class="userInfo" v-if="user">
+                <van-image width="60" height="60" radius="4" :src="user.avatar"></van-image>
+                <span class="name">{{ user.nickname }}</span>
+                <img src="../assets/icon_bianji.png" class="icon" alt="" />
+            </div>
+
+            <div class="order-card">
+                <div class="card-left">
+                    <div class="card-top">
+                        <span class="text1">我的订单</span>
+                        <span class="text2">全部</span>
+                        <img src="../assets/icon_inter.png" alt="" />
+                    </div>
+                    <van-grid class="card-content" :border="false" :column-num="3">
+                        <van-grid-item text="待支付">
+                            <template #icon>
+                                <img class="grid-icon" src="../assets/info_icon_daizhidfu.png" alt="" />
+                            </template>
+                        </van-grid-item>
+
+                        <van-grid-item text="待委托">
+                            <template #icon>
+                                <img class="grid-icon" src="../assets/info_icon_daiweituo.png" alt="" />
+                            </template>
+                        </van-grid-item>
+
+                        <van-grid-item text="委托中">
+                            <template #icon>
+                                <img class="grid-icon" src="../assets/info_icon_weituozhong.png" alt="" />
+                            </template>
+                        </van-grid-item>
+                    </van-grid>
+                </div>
+                <div class="card-right">
+                    <div class="card-top">
+                        <span class="text1">我的钱包</span>
+                    </div>
+                    <van-grid class="card-content" :border="false" :column-num="1">
+                        <van-grid-item text="465.26">
+                            <template #icon>
+                                <img class="grid-icon" src="../assets/info_icon_qianbao.png" alt="" />
+                            </template>
+                        </van-grid-item>
+                    </van-grid>
+                </div>
+            </div>
+
+            <van-cell-group class="menu" :border="false">
+                <van-cell title="我的收益" value="有新的收益" is-link>
+                    <template #icon>
+                        <img class="menu-icon" src="../assets/info_icon_shoyi.png" alt="" />
+                    </template>
+                    <template #right-icon>
+                        <img src="../assets/icon_inter.png" alt="" class="right-icon" />
+                    </template>
+                </van-cell>
+
+                <van-cell title="绑定银行卡" value="未绑定" is-link>
+                    <template #icon>
+                        <img class="menu-icon" src="../assets/info_icon_ka.png" alt="" />
+                    </template>
+                    <template #right-icon>
+                        <img src="../assets/icon_inter.png" alt="" class="right-icon" />
+                    </template>
+                </van-cell>
+            </van-cell-group>
+
+            <van-cell-group class="menu" :border="false">
+                <van-cell title="收货地址" is-link>
+                    <template #icon>
+                        <img class="menu-icon" src="../assets/info_icon_dizhi.png" alt="" />
+                    </template>
+                    <template #right-icon>
+                        <img src="../assets/icon_inter.png" alt="" class="right-icon" />
+                    </template>
+                </van-cell>
+
+                <van-cell title="设置" is-link>
+                    <template #icon>
+                        <img class="menu-icon" src="../assets/info_icon_shezhi.png" alt="" />
+                    </template>
+                    <template #right-icon>
+                        <img src="../assets/icon_inter.png" alt="" class="right-icon" />
+                    </template>
+                </van-cell>
+            </van-cell-group>
+        </ion-content>
     </ion-page>
 </template>
 
 <script setup>
+import { computed } from 'vue'
+import { useUserStore } from '../stores/user'
+const userStore = useUserStore()
+const user = computed(() => {
+    return userStore.user
+})
 </script>
 
+<style lang="less" scoped>
+.mine {
+    --ion-background-color: #fff;
+}
+.userInfo-bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    display: block;
+    z-index: 0;
+}
+.userInfo {
+    position: relative;
+    z-index: 1;
+    padding: 46px 16px 36px;
+    .f();
+    .icon {
+        width: 24px;
+        height: 24px;
+    }
+
+    .name {
+        font-size: 20px;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 28px;
+        flex-grow: 1;
+        margin: 0 12px;
+    }
+}
+
+.order-card {
+    background: #ffffff;
+    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.04);
+    border-radius: 4px;
+    position: relative;
+    z-index: 1;
+    margin: 0 16px;
+    padding: 12px;
+    .f();
+    .card-left {
+        width: 75%;
+    }
+
+    .card-top {
+        .f();
+        .text1 {
+            font-size: 14px;
+            font-weight: bold;
+            color: #000000;
+            line-height: 24px;
+            flex-grow: 1;
+        }
+        .text2 {
+            font-size: 12px;
+            color: #c8c9cc;
+            line-height: 24px;
+        }
+
+        img {
+            width: 24px;
+            height: 24px;
+        }
+    }
+
+    .card-content {
+        margin-top: 8px;
+        --van-grid-item-content-background: #fff8fc;
+        border-radius: 4px;
+        overflow: hidden;
+    }
+
+    .grid-icon {
+        width: 28px;
+        height: 28px;
+        display: block;
+    }
+
+    /deep/.van-grid {
+        --van-grid-item-text-color: #686868;
+        --van-grid-item-content-padding: 9px 8px;
+
+        .van-grid-item__text {
+            line-height: 17px;
+            margin-top: 4px;
+        }
+    }
+
+    .card-right {
+        width: 25%;
+        margin-left: 12px;
+        .card-top {
+            .text1 {
+                text-align: center;
+            }
+        }
+        .card-content {
+            --van-grid-item-content-background: #f8faff;
+        }
+
+        /deep/.van-grid {
+            --van-grid-item-text-color: #000;
+            --van-grid-item-text-font-size: 15px;
+            .van-grid-item__text {
+                font-weight: bold;
+            }
+        }
+    }
+}
+
+.order-card + .menu {
+    margin-top: 14px;
+}
+
+/deep/.menu {
+    --van-cell-line-height: 28px;
+    --van-cell-text-color: #000;
+    --van-cell-font-size: 14px;
+    --van-cell-vertical-padding: 16px;
+    --van-cell-horizontal-padding: 30px;
+
+    .menu-icon {
+        width: 28px;
+        height: 28px;
+        display: block;
+        margin-right: 12px;
+    }
+    .van-cell {
+        .f();
+    }
+
+    .van-cell__value {
+        font-size: 12px;
+    }
+}
 
+.right-icon {
+    width: 24px;
+    height: 24px;
+}
+.menu + .menu {
+    border-top: 10px solid #f2f4f5;
+}
+</style>