商城个人中心路由

src/layout/personal/navBar.vue

@@ -54,7 +54,7 @@
                 <div class="d-flex ml-3 align-center cursor-pointer" :class="{'active-route': routeActive === 5, 'vipBox': vip}" v-bind="props" @click="handleToPersonalCenter">
                   <div style="position: relative;">
                     <v-avatar class="avatar">
-                      <v-img alt="John" :src="getUserAvatar(baseInfo?.avatar, baseInfo?.sex)" ></v-img>
+                      <v-img alt="" :src="getUserAvatar(baseInfo?.avatar, baseInfo?.sex)" ></v-img>
                     </v-avatar>
                     <div v-if="vip" style="position: absolute; left: -9px; bottom: -3px;" @click.stop="router.push('/recruit/personal/personalCenter/memberBenefits/membershipPackage')">
                       <svg-icon name="huangguan1" size="25"></svg-icon>

src/router/modules/recruit.js

@@ -58,6 +58,37 @@ const recruit = [
         meta: {
           title: '积分兑换记录'
         }
+      },
+      {
+        path: '/mall/user',
+        redirect: '/mall/user/order',
+        component: () => import('@/views/mall/user/index.vue'),
+        name: 'mallUser',
+        meta: {
+          title: '我的'
+        },
+        children: [
+          {
+            path: '/mall/user/order',
+            component: () => import('@/views/mall/user/order/index.vue'),
+            name: 'mallUserOrder',
+            meta: {
+              title: '我的订单',
+              enName: 'My Order',
+              icon: 'mdi-order-bool-ascending'
+            }
+          },
+          {
+            path: '/mall/user/address',
+            component: () => import('@/views/mall/user/address/index.vue'),
+            name: 'mallUserAddress',
+            meta: {
+              title: '收货地址',
+              enName: 'Shipping Address',
+              icon: 'mdi-map-marker-outline'
+            }
+          }
+        ]
       }
     ]
   },

src/views/mall/components/navbar.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="stickyBox py-5">
+    <div class="default-width d-flex align-center justify-space-between">
+      <div class="header-link">
+        <span class="cursor-pointer" :class="{'active-route' : isActive('/mall')}" @click="router.push('/mall')">首页</span>
+        <span class="cursor-pointer mx-8" :class="{'active-route' : isActive('/mall/user', true)}" @click="router.push('/mall/user')">
+          <v-icon>mdi-account-circle-outline</v-icon>
+          我的
+        </span>
+        <span class="cursor-pointer">
+          <v-icon size="20">mdi-cart-outline</v-icon>
+          购物车
+        </span>
+      </div>
+      <div class="search d-flex align-center">
+        <v-text-field
+          v-model="inputVal"
+          placeholder="请输入关键词"
+          color="primary"
+          variant="plain"
+          density="compact"
+          clearable
+          :hide-details="true"
+          class="ml-3 px-2"
+          style="height: 100%; line-height: 100%;"
+          @keyup.enter="handleSearch"
+        ></v-text-field>
+        <v-btn class="searchBtn" prepend-icon="mdi-shopping-search-outline" @click="handleSearch">搜索</v-btn>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineOptions({ name: 'formPage'})
+import { computed, ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+const isActive = computed(() => (path, hasChild) => {
+  const currentPath = router.currentRoute.value.path
+  return hasChild ? currentPath.includes(path) : currentPath === path
+})
+
+const inputVal = ref('')
+const handleSearch = () => {}
+</script>
+
+<style scoped lang="scss">
+.stickyBox {
+  position: sticky;
+  top: 48px;
+  z-index: 999;
+  background-color: #fff;
+}
+.active-route {
+  position: relative;
+  color: var(--v-primary-base);
+  &::before {
+    content: '';
+    width: 100%;
+    height: 3px;
+    position: absolute;
+    bottom: -8px;
+    left: 0;
+    background-color: var(--v-primary-base);
+  }
+}
+.header-link span:hover {
+  color: var(--v-primary-base);
+}
+.search {
+  height: 50px;
+  width: 350px;
+  border: 2px solid var(--v-primary-base);
+  border-radius: 5px;
+  .searchBtn {
+    width: 100px;
+    height: 49px;
+    line-height: 48px;
+    text-align: center;
+    font-size: 18px;
+    color: #fff;
+    background-color: var(--v-primary-base);
+    cursor: pointer;
+  }
+}
+</style>

src/views/mall/home/components/navbar.vue

@@ -1,77 +0,0 @@
-<template>
-  <div class="default-width d-flex align-center justify-space-between">
-    <div class="header-link">
-      <span class="cursor-pointer" :class="{'active-route' : isActive('/mall')}" @click="router.push('/mall')">首页</span>
-      <span class="cursor-pointer mx-8">订单中心</span>
-      <span class="cursor-pointer">
-        <v-icon size="20">mdi-cart-outline</v-icon>
-        购物车
-      </span>
-    </div>
-    <div class="search d-flex align-center">
-      <v-text-field
-        v-model="inputVal"
-        placeholder="请输入关键词"
-        color="primary"
-        variant="plain"
-        density="compact"
-        clearable
-        :hide-details="true"
-        class="ml-3 px-2"
-        style="height: 100%; line-height: 100%;"
-        @keyup.enter="handleSearch"
-      ></v-text-field>
-      <v-btn class="searchBtn" prepend-icon="mdi-shopping-search-outline" @click="handleSearch">搜索</v-btn>
-    </div>
-  </div>
-</template>
-
-<script setup>
-defineOptions({ name: 'formPage'})
-import { computed, ref } from 'vue'
-import { useRouter } from 'vue-router'
-
-const router = useRouter()
-const isActive = computed(() => (path) => {
-  const currentPath = router.currentRoute.value.path
-  return currentPath.includes(path)
-})
-
-const inputVal = ref('')
-const handleSearch = () => {}
-</script>
-
-<style scoped lang="scss">
-.active-route {
-  position: relative;
-  color: var(--v-primary-base);
-  &::before {
-    content: '';
-    width: 100%;
-    height: 3px;
-    position: absolute;
-    bottom: -8px;
-    left: 0;
-    background-color: var(--v-primary-base);
-  }
-}
-.header-link span:hover {
-  color: var(--v-primary-base);
-}
-.search {
-  height: 50px;
-  width: 350px;
-  border: 2px solid var(--v-primary-base);
-  border-radius: 5px;
-  .searchBtn {
-    width: 100px;
-    height: 49px;
-    line-height: 48px;
-    text-align: center;
-    font-size: 18px;
-    color: #fff;
-    background-color: var(--v-primary-base);
-    cursor: pointer;
-  }
-}
-</style>

src/views/mall/home/index.vue

@@ -1,9 +1,7 @@
 <template>
   <div style="min-width: 1184px;" class="white-bgc">
-    <!-- 搜索框 -->
-    <div class="py-5 stickyBox">
-      <Navbar />
-    </div>
+    <!-- 导航栏 -->
+    <Navbar />
 
     <!-- 轮播图 -->
     <Carousel :templateData="template" class="mb-10" style="max-height: 594.5px;" />
@@ -24,7 +22,7 @@
 <script setup>
 defineOptions({ name: 'mall-home-index'})
 import { ref } from 'vue'
-import Navbar from './components/navbar.vue'
+import Navbar from '../components/navbar.vue'
 import Carousel from './components/carousel.vue'
 import HotGoods from './components/hotGoods.vue'
 import PointExchange from '../pointExchange'
@@ -65,11 +63,4 @@ const loginClose = () => {
 </script>
 
 <style scoped lang="scss">
-.stickyBox {
-  position: sticky;
-  top: 48px;
-  z-index: 999;
-  background-color: #fff;
-  // border-bottom: 1px solid #00897B;
-}
 </style>

src/views/mall/user/address/index.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>address-index</div>
+</template>
+
+<script setup>
+defineOptions({ name: 'mall-user-address-index' })
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/views/mall/user/index.vue

@@ -0,0 +1,131 @@
+<template>
+  <Navbar class="my-3 white-bgc" />
+  <div class="d-flex parent default-width mb-5">
+    <v-card class="left">
+      <v-list color="primary">
+        <div class="text-center mb-3">
+          <v-avatar :image="getUserAvatar(baseInfo?.avatar, baseInfo?.sex)" size="100"></v-avatar>
+          <p class="mt-2 color-primary font-weight-bold">{{ baseInfo?.name }}</p>
+        </div>
+        <v-divider></v-divider>
+        <template v-for="(item, index) in list">
+          <template v-if="!item.children.length">
+            <v-list-item
+              :key="`${item.name}_${index}`"
+              active-class="active"
+              color="primary"
+              :href="item.path"
+              :to="item.path"
+              :prepend-icon="item.icon"
+              :title="getCurrentLocaleLang() === 'zh_CN' ? item.title : item.enName"
+            >
+            </v-list-item>
+          </template>
+          <v-list-group
+            v-else
+            color="primary"
+            :key="`${item.path}_${item.title}`"
+            :prepend-icon="item.icon"
+          >
+            <template v-slot:activator="{ props }">
+              <v-list-item v-bind="props" :title="getCurrentLocaleLang() === 'zh_CN' ? item.title : item.enName"></v-list-item>
+            </template>
+            <v-list-item
+              v-for="(val, i) in item.children"
+              :key="i"
+              color="primary"
+              :href="val.path"
+              style="padding-left: 40px;"
+              :to="val.path"
+              :title="getCurrentLocaleLang() === 'zh_CN' ? val.title : val.enName"
+            ></v-list-item>
+          </v-list-group>
+        </template>
+      </v-list>
+    </v-card>
+
+    <v-card class="ml-3 pa-3 page">
+      <router-view></router-view>
+    </v-card>
+  </div>
+</template>
+
+<script setup>
+defineOptions({ name: 'mall-user-index'})
+import { computed, ref } from 'vue'
+import { getCurrentLocaleLang } from '@/utils/lang.js'
+import { useRoute  } from 'vue-router'
+import { useUserStore } from '@/store/user'
+import { getUserAvatar } from '@/utils/avatar'
+import Navbar from '../components/navbar.vue'
+
+let baseInfo = ref(JSON.parse(localStorage.getItem('baseInfo')) || {}) // 人才信息
+useUserStore().$subscribe((mutation, state) => {
+  if (Object.keys(state.baseInfo).length) baseInfo.value = state.baseInfo
+})
+
+const route = useRoute()
+const mallUserRoute = route.matched.find(item => item.path === '/mall/user')
+
+// 左侧菜单列表
+const list = computed(() => {
+  return getList(mallUserRoute.children)
+})
+
+const getList = (arr, obj = []) => {
+  arr.forEach(element => {
+    if (element.show) return
+    let data = {}
+    data = {
+      title: element?.meta?.title,
+      enName: element?.meta?.enName,
+      icon: element?.meta?.icon,
+      name: element?.name,
+      path: element?.path,
+      children: []
+    }
+    if (element?.children) {
+      getList(element.children, data.children)
+    }
+    obj.push(data)
+  })
+  return obj
+}
+
+</script>
+
+<style scoped lang="scss">
+.parent {
+  height: calc(100vh - 190px);
+  overflow-y: auto;
+}
+.page {
+  flex: 1;
+  width: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+.left {
+  position: sticky;
+  width: 220px;
+  height: calc(100vh - 193px);
+  overflow-y: auto;
+}
+.title {
+  color: var(--color-333);
+  font-weight: 600;
+  font-size: 20px;
+}
+::-webkit-scrollbar {
+  width: 6px;
+  height: 10px;
+}
+::-webkit-scrollbar-thumb, .temporaryAdd ::-webkit-scrollbar-thumb, .details_edit ::-webkit-scrollbar-thumb {
+  // 滚动条-颜色
+  background: #c3c3c379;
+}
+::-webkit-scrollbar-track, .temporaryAdd ::-webkit-scrollbar-track, .details_edit ::-webkit-scrollbar-track {
+  // 滚动条-底色
+  background: #e5e5e58f;
+}
+</style>

src/views/mall/user/order/index.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>order-index</div>
+</template>
+
+<script setup>
+defineOptions({ name: 'mall-user-order-index'})
+</script>
+
+<style scoped lang="scss">
+
+</style>