ebike-plus-wx-maintenance/src/pages/me/me.vue

<script lang="ts" setup>
import { useAppStore } from '@/store'

interface IClass {
  key: string
  name: string
  path?: string
  customsrc?: string
  children?: IClass[]
}
definePage({
  style: {
    navigationStyle: 'custom',
  },
})

const appStore = useAppStore()
const userInfo = ref<any>({})

const isSeleid = ref<string>('')
const btnList = ref([
  {
    key: 'maintenance',
    name: '运维模块',
    children: [
      {
        key: 'changebatteries',
        name: '换电',
        path: '/pages-sub/changebatteries/changebatteries',
        customsrc: 'dianchigenghuan',
      },
      {
        key: 'picking',
        name: '领料',
        path: '/pages-sub/warehouse/addCenterControl/addCenterControl',
        customsrc: 'dianchi1',
      },
      {
        key: 'checkdevice',
        name: '设备检查',
        path: '/pages/devops/checkDevice/checkDevice',
        customsrc: 'btn_tongyong_shebeijiancha',
      },
      {
        key: 'faultreport',
        name: '故障上报',
        path: '/pages/devops/faultreport/faultreport',
        customsrc: 'guzhangshangbao',
      },
      {
        key: 'maintenancepage',
        name: '维修',
        path: '/pages/devops/maintenancepage/maintenancepage',
        customsrc: 'weixiu',
      },
      {
        key: 'bluetoothscan',
        name: '蓝牙扫码',
        path: '/pages-sub/bluetooth/bluetoothscan/bluetoothscan',
        customsrc: 'Bluetooth1',
      },
      {
        key: 'bikesite',
        name: '站点地图',
        path: '/pages/devops/bikesite/bikesite-list',
        customsrc: 'ditu2',
      },
      {
        key: 'dispatch',
        name: '调度',
        path: '/pages/warehouse/carDispatchByMine/carDispatchByMine',
        customsrc: 'ditu',
      },
      {
        key: 'maintainOrder',
        name: '调度',
        path: '/pages/warehouse/carDispatchByMine/carDispatchByMine',
        customsrc: 'weixiuoff',
      },
      {
        key: 'onlineUpdate',
        name: '在线升级',
        path: '/pages-sub/onlineUpdate/onlineUpdate',
        customsrc: 'zaixianshengji',
      },
    ],
  },
  {
    key: 'warehouse',
    name: '仓库模块',
    children: [
      {
        key: 'ebikehouse',
        name: '整车仓库',
        path: '/pages-sub/warehouse/vehicleWarehouse/vehicleWarehouse',
        customsrc: 'wode-wodecheku',
      },
      {
        key: 'wholebind',
        name: '整车绑定',
        path: '/pages-sub/warehouse/wholebind/wholebind',
        customsrc: 'bangdingcheliang-01',
      },
      {
        key: 'detectionecu',
        name: '测试中控',
        path: '/pages-sub/centerControl/testControl/testControl',
        customsrc: 'ceshi',
      },
      {
        key: 'ecuunbindlist',
        name: '解绑中控',
        path: '/pages/warehouse/ecuunbind/ecuunbindlist',
        customsrc: 'lifted',
      },
      {
        key: 'bindhelmet',
        name: '绑定头盔',
        path: '/pages/warehouse/bindhelmet/bindhelmet',
        customsrc: 'toukui',
      },
      {
        key: 'qrcodereplace',
        name: '换二维码',
        path: '/pages/warehouse/qrcodereplace/qrcodereplace',
        customsrc: 'erweima',
      },
      {
        key: 'outlist',
        name: '部件出库',
        path: '/pages/warehouse/component/outlist',
        customsrc: 'qitachuku',
      },
      {
        key: 'enterlist',
        name: '部件入库',
        path: '/pages-sub/warehouse/enterlist/enterlist',
        customsrc: 'qitaruku',
      },
      {
        key: 'centralControlList',
        name: '中控入库',
        path: '/pages-sub/warehouse/centralControlList/centralControlList',
        customsrc: 'navicon-rkyw',
      },
    ],
  },
  {
    key: 'operate',
    name: '运营模块',
    children: [
      {
        key: 'vehicleoperation',
        name: '运营车辆',
        path: '/pages-sub/operation/carOperation/carOperation',
        customsrc: 'daohang',
      },
    ],
  },
])// 仓库板块图标

function onClikcList(icon: IClass, item: IClass) {
  const ikey = item.key
  const ickey = icon.key
  const path = icon.path
  isSeleid.value = `${ikey}-${ickey}`
  if (path) {
    setTimeout(() => {
      uni.navigateTo({
        url: path, //
      })
    }, 100) // 延迟100毫秒后执行
  }
  setTimeout(() => {
    isSeleid.value = ''
  }, 200) // 延迟100毫秒后执行
}

function goSetting() {
  console.log('goSetting')
  uni.navigateTo({
    url: '/pages-sub/setting/index',
  })
}

onMounted(() => {
  // 获取用户信息
  userInfo.value = appStore.getUserInfo()
})
</script>

<template>
  <view class="bg" />
  <view class="container">
    <view class="topclass">
      <view class="top_bar">
        <view class="header">
          <uv-avatar text="李" font-size="22" />
          <view class="info">
            <view class="classname">
              {{ userInfo.username || '--' }}
            </view>
            <view class="tags">
              <uv-tags text="股东" size="mini" />
            </view>
          </view>
        </view>
        <view class="setting">
          <uv-icon name="setting-fill" size="22" @click="goSetting" />
        </view>
      </view>
    </view>
    <!-- 菜单模块 -->
    <view v-for="(item) in btnList" :key="item.key" class="section">
      <text class="section-title">{{ item.name }}</text>
      <view class="icon-row">
        <view
          v-for="(icon) in item.children"
          :key="icon.key"
          class="icon-item"
          @click="onClikcList(icon, item)"
        >
          <view
            class="classimg"
            :class="`${item.key}-${icon.key}` === isSeleid ? `classimgsm` : ``"
          >
            <uv-icon
              :name="icon.customsrc"
              custom-prefix="custom-icon"
              size="28"
              color="#1488f5"
            />
            <view class="classimgwz">
              {{ icon.name }}
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.bg {
  position: fixed;
  z-index: -1;
  width: 100%;
  background: linear-gradient(to bottom, rgb(132, 212, 248), rgb(247, 252, 255));
  height: 100vh;
}
.container {
  padding: 20px;
  width: calc(100% - 40px);
  overflow-x: hidden;

  .topclass {
    width: 100%;
    margin-top: 82px;
    margin-bottom: 30px;
  }

  .top_bar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .header {
      display: flex;
      align-items: center;

      .classname {
        line-height: 20px;
        font-size: 20px;
        font-weight: bold;
      }

      .info {
        margin-left: 15rpx;

        .tags {
          margin-top: 10rpx;
        }
      }
    }

    .setting {
    }
  }

  .section {
    width: 100%;
    margin-bottom: 15px;
    background: #fff;
    border-radius: 10px;
    padding: 15px 0px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

    .section-title {
      font-size: 18px;
      font-weight: bold;
      margin: 0px 20px;

      & ::before {
        content: '';
        display: inline-block;
        width: 3px;
        height: 15px;
        top: 50%;
        transform: translateY(10%);
        background-color: #1488f5;
        margin-right: 8px;
        border-radius: 10rpx;
      }
    }

    .icon-row {
      display: flex;
      justify-content: start;
      flex-wrap: wrap;

      .icon-item {
        text-align: center;
        width: 20%;
      }
    }
  }
}

.classimgsm {
  /* 将元素缩小至原来的 0.9 倍 */
  transform: scale(0.9);
}

.classimgwz {
  font-size: 26rpx;
}
.classimg {
  margin-top: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>