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

<template>
  <Navbar class="mb-3" />
  <div class="d-flex parent default-width mb-5">
    <v-card class="left">
      <v-list color="primary">
        <div class="text-center my-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>