YTAPP/pages/home/index.vue

<template>
  <view class="warp">
    <uni-grid
      class="grid"
      :column="3"
      :show-border="false"
      :square="false"
      @change="change"
    >
      <uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
        <view class="grid-item-box" @click="itemClick(item.url)">
          <image class="image" :src="item.src" mode="aspectFill" />
          <text class="text">{{ item.text }}</text>
        </view>
      </uni-grid-item>
    </uni-grid>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { onShow } from "@dcloudio/uni-app";

const token = ref(null);
const user = ref(null);
const list = ref([
  // {
  // 	url: '/pages/scan/index',
  // 	src: '/static/scan_fill.png',
  // 	text: '扫描入库'
  // },

  {
    url: "/pages/inbound/index",
    src: "/static/inbound.png",
    text: "入库",
  },
  {
    url: "/pages/weigh/index",
    src: "/static/weigh.png",
    text: "称重",
  },
  {
    url: "/pages/outbound/index",
    src: "/static/outbound.png",
    text: "出库",
  },
  {
    url: "/pages/warehouseScan/index",
    src: "/static/houscan.png",
    text: "仓库扫描",
  },
  {
    url: "/pages/printer/index",
    src: "/static/print.png",
    text: "打印",
  },
  {
    url: "/pages/scanLotno/index",
    src: "/static/link.png",
    text: "托盘/批次",
  },
  {
    url: "/pages/waybillNo/index",
    src: "/static/link.png",
    text: "库位绑定",
  },
]);
onShow(() => {
  token.value = uni.getStorageSync("token");
  user.value = uni.getStorageSync("user");
  console.log("show---", { token: token.value, user: user.value });
});
const itemClick = (url) => {
  console.log(url);
  if (token.value) {
    uni.navigateTo({
      url,
    });
  } else {
    uni.navigateTo({
      url: "/pages/login/index",
    });
  }
};
const change = () => {};
const logout = () => {
  uni.removeStorageSync("token");
  uni.removeStorageSync("user");
  token.value = uni.getStorageSync("token");
  user.value = uni.getStorageSync("user");
};
</script>

<style lang="scss">
.image {
  width: 36px;
  height: 36px;
}

.text {
  font-size: 14px;
  margin-top: 10px;
}
.grid {
  margin-top: 20px;
}
.grid-item-box {
  flex: 1;
  // position: relative;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px 0;
}

.grid-dot {
  position: absolute;
  top: 5px;
  right: 15px;
}
</style>