FT577-WMS/pda/pages/index.vue

<template>
  <view class="page-container">
    <!-- 顶部区域 -->
    <view class="header">
      <view class="header-info">
        <image class="logo" src="@/static/logo.png" mode="aspectFit"></image>
        <view class="header-text">
          <text class="app-name">WMS 仓储管理</text>
          <text class="welcome-text">欢迎使用仓库管理系统</text>
        </view>
      </view>
    </view>

    <!-- 功能入口 -->
    <view class="menu-section">
      <view class="menu-grid">
        <view class="menu-item" @click="navigateTo('/pages/warehouse/inbound/index')">
          <view class="menu-icon inbound">
            <uni-icons type="download" size="28" color="#fff"></uni-icons>
          </view>
          <text class="menu-label">入库管理</text>
          <text class="menu-desc">入库绑盘 / 补料入库</text>
        </view>

        <view class="menu-item" @click="navigateTo('/pages/warehouse/outbound/index')">
          <view class="menu-icon outbound">
            <uni-icons type="upload" size="28" color="#fff"></uni-icons>
          </view>
          <text class="menu-label">出库管理</text>
          <text class="menu-desc">出库确认 / 异常确认</text>
        </view>

        <view class="menu-item" @click="navigateTo('/pages/warehouse/inventory/index')">
          <view class="menu-icon inventory">
            <uni-icons type="search" size="28" color="#fff"></uni-icons>
          </view>
          <text class="menu-label">盘点管理</text>
          <text class="menu-desc">库存盘点</text>
        </view>

        <view class="menu-item" @click="navigateTo('/pages/warehouse/stock/index')">
          <view class="menu-icon stock">
            <uni-icons type="bars" size="28" color="#fff"></uni-icons>
          </view>
          <text class="menu-label">库存统计</text>
          <text class="menu-desc">库存数据总览</text>
        </view>
      </view>
    </view>

    <!-- 快捷操作 -->
    <view class="quick-section">
      <text class="section-title">快捷操作</text>
      <view class="quick-grid">
        <view class="quick-item" @click="navigateTo('/pages/warehouse/inbound/bindTray')">
          <uni-icons type="scan" size="22" color="#1890ff"></uni-icons>
          <text class="quick-label">入库绑盘</text>
        </view>
        <!-- <view class="quick-item" @click="navigateTo('/pages/warehouse/inbound/supply')">
          <uni-icons type="plus" size="22" color="#52c41a"></uni-icons>
          <text class="quick-label">补料入库</text>
        </view> -->
        <view class="quick-item" @click="navigateTo('/pages/warehouse/inbound/emptyTray')">
          <uni-icons type="plus" size="22" color="#52c41a"></uni-icons>
          <text class="quick-label">空托入库</text>
        </view>
        <view class="quick-item" @click="navigateTo('/pages/warehouse/outbound/trayConfirm')">
          <uni-icons type="checkmarkempty" size="22" color="#fa8c16"></uni-icons>
          <text class="quick-label">出库确认</text>
        </view>
        <view class="quick-item" @click="navigateTo('/pages/warehouse/outbound/container')">
          <uni-icons type="info" size="22" color="#f5222d"></uni-icons>
          <text class="quick-label">呼叫空托</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {}
    },
    methods: {
      navigateTo(url) {
        this.$tab.navigateTo(url)
      }
    }
  }
</script>

<style lang="scss" scoped>
  page {
    background-color: #f5f7fa;
    min-height: 100%;
  }

  .page-container {
    padding: 24rpx;
  }

  .header {
    background: linear-gradient(135deg, #1890ff, #096dd9);
    border-radius: 20rpx;
    padding: 40rpx 36rpx;
    margin-bottom: 32rpx;
  }

  .header-info {
    display: flex;
    align-items: center;
  }

  .logo {
    width: 80rpx;
    height: 80rpx;
    border-radius: 16rpx;
    margin-right: 24rpx;
  }

  .header-text {
    display: flex;
    flex-direction: column;
  }

  .app-name {
    font-size: 36rpx;
    font-weight: 500;
    color: #fff;
    margin-bottom: 8rpx;
  }

  .welcome-text {
    font-size: 24rpx;
    color: rgba(255, 255, 255, 0.8);
  }

  .menu-section {
    margin-bottom: 32rpx;
  }

  .menu-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .menu-item {
    width: 48%;
    background: #fff;
    border-radius: 20rpx;
    padding: 36rpx 24rpx;
    margin-bottom: 24rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .menu-icon {
    width: 88rpx;
    height: 88rpx;
    border-radius: 20rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20rpx;
  }

  .menu-icon.inbound {
    background: linear-gradient(135deg, #1890ff, #40a9ff);
  }

  .menu-icon.outbound {
    background: linear-gradient(135deg, #fa8c16, #ffa940);
  }

  .menu-icon.inventory {
    background: linear-gradient(135deg, #52c41a, #73d13d);
  }

  .menu-icon.stock {
    background: linear-gradient(135deg, #722ed1, #9254de);
  }

  .menu-label {
    font-size: 32rpx;
    font-weight: 500;
    color: #333;
    margin-bottom: 8rpx;
  }

  .menu-desc {
    font-size: 24rpx;
    color: #999;
  }

  .quick-section {
    background: #fff;
    border-radius: 20rpx;
    padding: 32rpx 24rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
  }

  .section-title {
    font-size: 30rpx;
    font-weight: 500;
    color: #333;
    margin-bottom: 28rpx;
  }

  .quick-grid {
    display: flex;
    justify-content: space-between;
  }

  .quick-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16rpx 24rpx;
  }

  .quick-label {
    font-size: 24rpx;
    color: #666;
    margin-top: 12rpx;
  }
</style>