WorkloadApp/pages/index/index.vue

<template>
  <view class="content">
    <view class="group">
      <button class="page" v-if="true" @click="onHandleClick(0)">
        <uni-icons type="list" size="40"></uni-icons>
        <view>项目列表</view>
      </button>
      <button class="page" v-if="true" @click="onHandleClick(1)">
        <uni-icons type="checkmarkempty" size="40"></uni-icons>
        <view>项目审核</view>
      </button>
      <button class="page" v-if="true" @click="onHandleClick(2)">
        <uni-icons type="calendar" size="40"></uni-icons>
        <view>工时上报</view>
      </button>
      <button class="page" v-if="true" @click="onHandleClick(3)">
        <uni-icons type="auth" size="40"></uni-icons>
        <view>工时审批</view>
      </button>
    </view>
  </view>
</template>

<script>
import { queryUser } from "@/services/index";

export default {
  data() {
    return { user: {} };
  },
  onShow() {
    this.getCurrentUser();
  },
  computed: {
    permission() {
      let permission = {};
      this.user?.Permissions.forEach((item) => {
        permission = {
          ...permission,
          ...item.Menus,
        };
      });
      return permission;
    },
  },
  methods: {
    onHandleClick(index) {
      switch (index) {
        case 0:
          uni.navigateTo({
            url: "../Project/list",
          });
          break;
        case 1:
          uni.navigateTo({
            url: "../Project/auth",
          });
          break;
        case 2:
          uni.navigateTo({
            url: "../WorkingHours/index",
          });
          break;
        case 3:
          uni.navigateTo({
            url: "../WorkingHours/audit",
          });
          break;
      }
    },
    async getCurrentUser() {
      let res = {};
      res = await queryUser();
      this.user = res.data;
    },
  },
};
</script>

<style lang="less" scoped>
.content {
  display: flex;
  justify-content: center;
}
.group {
  width: 90%;
  padding: 10%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  background-color: #ffffff;
}
.page {
  width: 40%;
  margin: 5%;
}
</style>