bxztApp/packages/mobile/src/views/Home.vue

<template>
  <div class="home">
    <van-nav-bar title="愉快政" fixed left-arrow />

    <van-cell-group>
      <van-cell title="当前站点" :value="detailData.mc" />
    </van-cell-group>

    <div class="content">
      <van-grid :gutter="10" :column-num="3" class="grid">
        <van-grid-item
          icon="setting-o"
          text="设备管理"
          :to="{
            name: 'EquipManage',
            params: { data: encodeURIComponent(JSON.stringify(detailData)) },
          }"
        />
        <van-grid-item icon="setting-o" text="物资管理" to="/MaterialManage" />
        <van-grid-item icon="setting-o" text="人员管理" to="/StaffManage" />
        <van-grid-item icon="setting-o" text="冰雪灾害" to="/IceHail" />
      </van-grid>
    </div>

    <!-- <van-tabbar v-model="active" route>
      <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
      <van-tabbar-item icon="user-o" to="/user">我的</van-tabbar-item>
    </van-tabbar> -->
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { showToast } from "vant";
import { request } from "../../../shared/utils/request";

const router = useRouter();
const active = ref(0);
const detailData = ref({});

// 获取养护站详情
const getYHZDetail = async () => {
  try {
    const res = await request({
      url: `/api/yhz/${53}`, // 假设获取的是id为53的养护站的详情
      method: "GET",
    });
    if (res.code && res.code === "00000") {
      detailData.value = res.data;
    } else {
      throw new Error(res.message);
    }
  } catch (error) {
    showToast({
      message: error.message,
      type: "error",
    });
  }
};

onMounted(() => {
  getYHZDetail();
});

const goToUser = () => {
  router.push("/user");
};
</script>

<style scoped>
.home {
  padding-top: var(--van-nav-bar-height); /* 自动匹配导航栏高度 */
}

.content {
  padding: 16px;
}

.grid {
  margin-top: 16px;
}

.btn {
  margin-top: 24px;
}
</style>