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

<template>
  <PageContainer title="愉快政">
    <CurrentSite />

    <div class="content">
      <van-grid :gutter="10" :column-num="3" class="grid">
        <van-grid-item
          class="grid-item"
          v-for="item in gridItems"
          :key="item.text"
          :to="item.to"
        >
          <template #icon>
            <img :src="item.icon" class="grid-icon" />
          </template>
          <template #text>
            <span class="grid-text">{{ item.text }}</span>
          </template>
        </van-grid-item>
      </van-grid>
    </div>
    <van-popup
      :show="YHZConfirmpopup"
      position="center"
      round
      close-on-click-overlay
      :style="{ height: '20%', width: '80%' }"
      @close="onYHZConfirmClose"
      class="confirmpopup"
    >
      <div class="confirmpopup__content">
        <h3>请在服务站授权定位</h3>
      </div>
      <div class="btn-box">
        <van-button class="btn" @click="onYHZConfirmClose">取消</van-button>
        <van-button class="btn" type="primary" @click="getLocation"
          >授权定位</van-button
        >
      </div>
    </van-popup>
  </PageContainer>
</template>

<script setup>
import "vant/es/toast/style";
import "vant/es/popup/style";
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useYHZStore } from "../stores/yhzStore";
import { showToast } from "vant";
import { request } from "../../../shared/utils/request";
import PageContainer from "@/components/PageContainer.vue";
import CurrentSite from "@/components/CurrentSite.vue";

import group63Icon from "@/assets/images/组 63.png";
import group105Icon from "@/assets/images/组 105.png";
import group10501Icon from "@/assets/images/组 105(1).png";
import group104Icon from "@/assets/images/组 104.png";
import group106Icon from "@/assets/images/组 106.png";

const router = useRouter();
const yhzinfo = ref({});
const yhzStore = useYHZStore();

const route = useRoute();
const token = route.query.token;
const YHZConfirmpopup = ref(false);

// 配置项
const gridItems = [
  {
    icon: group63Icon,
    text: "设备管理",
    to: {
      name: "EquipManage",
      params: { data: encodeURIComponent(JSON.stringify(yhzinfo.value)) },
    },
  },
  {
    icon: group10501Icon,
    text: "物资管理",
    to: {
      name: "MaterialManage",
      params: { data: encodeURIComponent(JSON.stringify(yhzinfo.value)) },
    },
  },
  {
    icon: group104Icon,
    text: "人员管理",
    to: {
      name: "StaffManage",
      params: { data: encodeURIComponent(JSON.stringify(yhzinfo.value)) },
    },
  },
  {
    icon: group106Icon,
    text: "冰雪灾害",
    to: {
      name: "IceEventManage",
      params: { data: encodeURIComponent(JSON.stringify(yhzinfo.value)) },
    },
  },
  {
    icon: group105Icon,
    text: "预警信息",
    to: {
      name: "WarningMessage",
    },
  },
];

// 获取当前登录用于就职的养护站信息
const getYHZinfo = async () => {
  try {
    const res = await request({
      url: `/snow-ops-platform/yhz/getStationByUser`,
      method: "GET",
    });
    if (res.code === "00000") {
      yhzinfo.value = res.data[0];
      yhzStore.setYHZInfo(res.data[0]);
      
      // 更新配置项中的params，确保使用最新的yhzinfo
      gridItems.forEach(item => {
        if (item.to.params && item.to.params.data) {
          item.to.params.data = encodeURIComponent(JSON.stringify(yhzinfo.value));
        }
      });
    } else {
      throw new Error(res.message);
    }
  } catch (error) {
    showToast({
      message: error.message,
      type: "fail",
    });
  }
};

const onYHZConfirmClose = () => {
  YHZConfirmpopup.value = false;
};

const getLocation = () => {
  // 定位逻辑
  YHZConfirmpopup.value = false;
};

onMounted(async () => {
  if (token) {
    localStorage.setItem("token", token);
    router.replace({ path: route.path }).then(() => {
      window.location.reload();
    });
  }
  await getYHZinfo();
  if (
    yhzinfo.value.isManager &&
    (yhzinfo.value.jd === "" || yhzinfo.value.wd === "")
  ) {
    YHZConfirmpopup.value = true;
  }
});

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

<style lang="scss" scoped>
.btn-box {
  width: 100%;
  display: flex;
  gap: 16px;
  padding: 16px;
}
.btn {
  width: 50%;
}

.confirmpopup__content {
  padding: 20px;
}

.grid-icon {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.grid-text {
  font-size: 14px;
  color: #323233;
}
:deep(.grid-item) {
  .grid-text {
    margin-top: 16px;
    font-weight: 400;
    font-size: 16px;
    color: #333333;
    line-height: 16px;
  }
}
</style>