ebike-ui/ebike-maintenance/pages/mine/mine.vue

<template>
  <view class="container">
    <view class="topclass">
      <view class="flex">
        <view class="">
          <view class="cu-item">
            <view class="cu-avatar round txImg">
              <image :src="`${imgPath}static/image/tx.png`" mode=""></image>
            </view>
          </view>
        </view>
        <view class="itemtwo">
          <view v-if="userInfo != null" class="classname">
            {{ userInfo.username }}
          </view>
          <view style="margin-top: 5px">
            <span class="classxx">股东</span>
          </view>
        </view>

        <view class="itemend">
          <uni-icons type="gear" size="30" @click="handleSetting"></uni-icons>
          <!-- <view class="classgzpz" @click="onClickWorkSet('工作配置')">
            退出登录
          </view> -->
        </view>
      </view>
    </view>
    <!-- 运维板块 -->
    <view class="section" v-for="(item, index) in dataList" :key="index">
      <text class="section-title">{{ item.name }}</text>
      <view class="icon-row">
        <view
          class="icon-item"
          v-for="(icon, i) in item.children"
          :key="index"
          @click="onClikcList(icon, item)"
        >
          <view
            class="classimg"
            :class="item.key + '-' + icon.key == isSeleid ? `classimgsm` : ``"
          >
            <uni-icons
              v-if="icon.customsrc"
              custom-prefix="iconfont"
              color="#1488f5"
              :type="icon.customsrc"
              size="28"
            ></uni-icons>
            <uni-icons
              v-else
              color="#1488f5"
              :type="icon.src ? icon.src : 'image'"
              size="28"
            ></uni-icons>
          </view>
          <view class="classimgwz">
            {{ icon.name }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import navigator from "@/utils/navigator.js";
import { showModelMessage, getUrlParams } from "@/utils/tools.js";
import config from "@/utils/config";
const imgPath = config.imgPath;
const isSeleid = ref(-1);
const userInfo = ref(null);
const dataList = ref([]);
// 仓库板块图标
const btnList = [
  {
    key: "maintenance",
    name: "运维模块",
    children: [
      {
        key: "changebatteries",
        name: "换电",
        path: "/pages/devops/changebatteries/changebatteries",
        customsrc: "icon-ebikedianchigenghuan",
      },
      {
        key: "picking",
        name: "领料",
        path: "/pages/warehouse/component/picking",
        customsrc: "icon-ebikedianchi1",
      },
      {
        key: "checkdevice",
        name: "设备检查",
        path: "/pages/devops/checkDevice/checkDevice",
        customsrc: "icon-ebikebtn_tongyong_shebeijiancha",
      },
      {
        key: "faultreport",
        name: "故障上报",
        path: "/pages/devops/faultreport/faultreport",
        customsrc: "icon-ebikeguzhangshangbao",
      },
      {
        key: "maintenancepage",
        name: "维修",
        path: "/pages/devops/maintenancepage/maintenancepage",
        customsrc: "icon-ebikeweixiu",
      },
      {
        key: "bluetoothscan",
        name: "蓝牙扫码",
        path: "/pages/warehouse/bluetooth/bluetoothscan",
        customsrc: "icon-ebikeBluetooth1",
      },
      {
        key: "bikesite",
        name: "站点地图",
        path: "/pages/devops/bikesite/bikesite-list",
        customsrc: "icon-ebikeditu2",
      },
      {
        key: "dispatch",
        name: "调度",
        path: "/pages/warehouse/carDispatchByMine/carDispatchByMine",
        customsrc: "icon-ebikeditu2",
      },
    ],
  },
  {
    key: "warehouse",
    name: "仓库模块",
    children: [
      {
        key: "ebikehouse",
        name: "整车仓库",
        path: "/pages/warehouse/ebikehouse/ebikehouse",
        customsrc: "icon-ebikewode-wodecheku",
      },
      {
        key: "wholebind",
        name: "整车绑定",
        path: "/pages/warehouse/wholebind/wholebind",
        customsrc: "icon-ebikebangdingcheliang-01",
      },
      {
        key: "detectionecu",
        name: "测试中控",
        path: "/pages/warehouse/detectionecu/detectionecu",
        src: "settings",
      },
      {
        key: "ecuunbindlist",
        name: "解绑中控",
        path: "/pages/warehouse/ecuunbind/ecuunbindlist",
        src: "tune",
      },
      {
        key: "bindhelmet",
        name: "绑定头盔",
        path: "/pages/warehouse/bindhelmet/bindhelmet",
        customsrc: "icon-ebiketoukui",
      },
      {
        key: "qrcodereplace",
        name: "换二维码",
        path: "/pages/warehouse/qrcodereplace/qrcodereplace",
        src: "link",
      },
      {
        key: "outlist",
        name: "部件出库",
        path: "/pages/warehouse/component/outlist",
        customsrc: "icon-ebikeqitachuku",
      },
      {
        key: "enterlist",
        name: "部件入库",
        path: "/pages/warehouse/component/enterlist",
        customsrc: "icon-ebikeqitaruku",
      },
    ],
  },
  {
    key: "operate",
    name: "运营模块",
    children: [
      {
        key: "vehicleoperation",
        name: "运营车辆",
        path: "/pages/warehouse/ebikehouse/vehicleoperation",
        src: "navigate",
      },
    ],
  },
];

onMounted(() => {
  //获取用户信息
  userInfo.value = uni.getStorageSync("userInfo");
  const permcode = "maintenance.applet";
  const permcodes = uni.getStorageSync("permCodes");
  const menus = [];
  if (permcodes.length > 0) {
    btnList.forEach((item) => {
      const menu = {
        key: item.key,
        name: item.name,
      };
      let ipermcode =
        permcode + "." + item.key.toLowerCase().replace(/-/g, ".");
      if (permcodes.some((item) => item.includes(ipermcode))) {
        menus.push(menu);
        if (item.children) {
          item.children.forEach((child) => {
            menu.children = menu.children || [];
            let cpermcode =
              ipermcode + "." + child.key.toLowerCase().replace(/-/g, ".");
            if (permcodes.some((item) => item.includes(cpermcode))) {
              const cmenu = {
                key: child.key,
                name: child.name,
                path: child.path,
              };
              if (child.customsrc) cmenu.customsrc = child.customsrc;
              else cmenu.src = child.src;
              menu.children.push(cmenu);
            }
          });
        }
      }
    });

    menus[0].children.push({
      key: "dispatch",
      name: "调度",
      path: "/pages/warehouse/carDispatchByMine/carDispatchByMine",
      customsrc: "icon-ebikeditu",
    });

    dataList.value = menus;
  }
});

const onClikcList = (icon, item) => {
  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毫秒后执行
};

const handleSetting = () => {
  navigator.to("/pages/personal/personalInfo");
};
</script>

<style scoped>
.container {
  padding: 20px;
  background: linear-gradient(
    to bottom,
    rgb(132, 212, 248),
    rgb(247, 252, 255)
  );
  height: 100vh;
}

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

.class1 {
  color: #55aaff;
  border: solid 1px #55aaff;
  padding: 3px;
  border-radius: 5px;
  margin-left: 10px;
  font-size: 12px;
}

.classxx {
  background-color: rgb(242, 242, 242);
  color: #000305;
  border-radius: 4px;
  padding: 2px 10px;
  font-size: 10px;
}

.section {
  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;
}

.section-title ::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%;
}

.icon-image {
  width: 50px;
  height: 50px;
  margin-bottom: 5px;
}

.icon-label {
  font-size: 14px;
}

.txImg {
  width: 50px;
  height: 50px;
  margin: 0px 10px;
  margin-top: -5px;
}
.txImg image {
  width: 50px;
  height: 50px;
}

.itemtwo {
  width: 78%;
}

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

.classimg {
  margin-top: 15px;
}

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

.classimg image {
  height: 30px;
  width: 30px;
}

.classimgwz {
  font-size: 26rpx;
}

.classgzpz {
  font-size: 12px;
  border-bottom: solid 1px #000;
}
</style>