daimp-front/sub-operation-service/src/layouts/component/UserMenu/index.vue

<template>
  <div class="layout-user-centre-warp">
    <div class="layout-user-centre">
      <div class="layout-user-centre-top">
        <div class="logo-warp">
          <costomImg :url="'images/logo3.png'" :is-view="false"></costomImg>
        </div>
      </div>

      <div class="layout-user-centre-menu">
        <el-menu ellipsis class="layout-user-centre-menu">
          <app-link v-for="(item, index) in meuns" :key="index" :to="item.path">
            <el-menu-item active-text-color="#25BF82">
              <div class="iconfont" :class="'icon-' + item.icon" :style="{ 'font-size': item.iconSize }"></div>
              <span class="txt-ellipsis clamp1">{{ item.label }}</span>
            </el-menu-item>
          </app-link>
        </el-menu>
      </div>
    </div>
  </div>
</template>

<script setup name="layout-user-centre">
import { computed, ref } from 'vue';
import { useSettingStore } from '@/store/modules/setting';
import { usePermissionStore } from '@/store/modules/permission';
import AppLink from '../Menu/Link.vue';
import { useRoute, useRouter } from 'vue-router';
import { isEmpty, getAssetsFile } from '@/utils';
import costomImg from '@/components/costomImg.vue';

const route = useRoute();
const router = useRouter();
const SettingStore = useSettingStore();
const PermissionStore = usePermissionStore();
const cacheRoutes = computed(() => PermissionStore.keepAliveRoutes);
const isReload = computed(() => SettingStore.isReload);

const isSubApp = computed(() => route.path.includes('sub'));

const keyword = ref('');

const meuns = ref([
  { label: '我的购物车', path: '/sub-operation-service/userCenter-shoppingCart', icon: 'shopcar', iconSize: '26px' },
  { label: '我的订单', path: '/sub-operation-service/userCenter-userOrders', icon: 'order', iconSize: '26px' },
  { label: '我的土地', path: '/sub-operation-service/userCenter-userLands', icon: 'land', iconSize: '26px' },
  // { label: '我的溯源', path: '', icon: 'soucecode' },
  // { label: '我的金融', path: '', icon: 'finance' },
  // { label: '我的农机', path: '', icon: 'farmmachinery' },
  // { label: '我的品牌', path: '', icon: 'brand' },
  // { label: '我的劳务', path: '', icon: 'labor' },
  // { label: '分拣/包装', path: '', icon: 'sorting' },
  // { label: '仓储/物流', path: '', icon: 'logistics' },
  // { label: '修改密码', path: '', icon: 'password' },
]);

function Search() {
  console.log(keyword.value, 'search');
}

const toHome = () => {
  console.info('toHome', router);
  router.push('/sub-operation-service/home');
};
</script>

<style lang="scss" scoped>
div {
  box-sizing: border-box;
}
.layout-user-centre-warp {
  display: inline-block;
  padding: 16px;
  width: 320px;
  height: 100vh;
  text-align: center;
  .layout-user-centre {
    overflow: auto;
    height: calc(100% - 0px);
    border-radius: 16px;
    background: $color-fff;
  }
  .layout-user-centre-top {
    padding: 8px;
    width: 100%;
    .logo-warp {
      height: 74px;
    }
  }
  .el-menu {
    border-right: 0 !important;
    background: $color-fff;
    .el-menu-item {
      font-size: 20px;
      font-weight: 400;
      .iconfont {
        display: inline-block;
        vertical-align: middle;
        padding-right: 8px;
        color: $color-333;
      }
    }
    li {
      color: $color-333;
    }
    .router-link-active {
      li {
        color: $color-main !important;
        .iconfont {
          color: $color-main !important;
        }
      }
    }
  }
}
</style>