FT577-WMS/pda/pages/warehouse/stock/index.vue

<template>
  <view class="page-container">
    <view class="module-header">
      <uni-icons type="bars" size="22" color="#722ed1"></uni-icons>
      <text class="header-title">库存统计</text>
    </view>

    <!-- 库存概览卡片 -->
    <view class="summary-section">
      <view class="summary-card">
        <view class="summary-row">
          <view class="summary-item">
            <text class="summary-value">--</text>
            <text class="summary-label">库存总量</text>
          </view>
          <view class="summary-divider"></view>
          <view class="summary-item">
            <text class="summary-value">--</text>
            <text class="summary-label">物料种类</text>
          </view>
        </view>
        <view class="summary-row">
          <view class="summary-item">
            <text class="summary-value">--</text>
            <text class="summary-label">今日入库</text>
          </view>
          <view class="summary-divider"></view>
          <view class="summary-item">
            <text class="summary-value">--</text>
            <text class="summary-label">今日出库</text>
          </view>
        </view>
      </view>
    </view>

    <view class="feature-list">
      <view class="feature-card" @click="$modal.showToast('功能开发中')">
        <view class="feature-left">
          <uni-icons type="search" size="20" color="#1890ff"></uni-icons>
          <text class="feature-name">库存查询</text>
        </view>
        <uni-icons type="right" size="16" color="#ccc"></uni-icons>
      </view>

      <view class="feature-card" @click="$modal.showToast('功能开发中')">
        <view class="feature-left">
          <uni-icons type="location" size="20" color="#fa8c16"></uni-icons>
          <text class="feature-name">库位分布</text>
        </view>
        <uni-icons type="right" size="16" color="#ccc"></uni-icons>
      </view>

      <view class="feature-card" @click="$modal.showToast('功能开发中')">
        <view class="feature-left">
          <uni-icons type="pie-chart" size="20" color="#52c41a"></uni-icons>
          <text class="feature-name">库存报表</text>
        </view>
        <uni-icons type="right" size="16" color="#ccc"></uni-icons>
      </view>

      <view class="feature-card" @click="$modal.showToast('功能开发中')">
        <view class="feature-left">
          <uni-icons type="alert" size="20" color="#f5222d"></uni-icons>
          <text class="feature-name">库存预警</text>
        </view>
        <uni-icons type="right" size="16" color="#ccc"></uni-icons>
      </view>
    </view>

    <view class="empty-tip">
      <text class="tip-text">库存统计模块正在开发中，敬请期待</text>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {}
    }
  }
</script>

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

  .page-container {
    padding: 24rpx;
  }

  .module-header {
    display: flex;
    align-items: center;
    padding: 24rpx 0;
    margin-bottom: 20rpx;
  }

  .header-title {
    font-size: 32rpx;
    font-weight: 500;
    color: #333;
    margin-left: 12rpx;
  }

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

  .summary-card {
    background: linear-gradient(135deg, #1890ff, #096dd9);
    border-radius: 16rpx;
    padding: 40rpx 28rpx;
  }

  .summary-row {
    display: flex;
    align-items: center;
    justify-content: space-around;
  }

  .summary-row:first-child {
    margin-bottom: 32rpx;
  }

  .summary-divider {
    width: 1rpx;
    height: 60rpx;
    background: rgba(255, 255, 255, 0.3);
  }

  .summary-item {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .summary-value {
    font-size: 40rpx;
    font-weight: 500;
    color: #fff;
    margin-bottom: 8rpx;
  }

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

  .feature-list {
    background: #fff;
    border-radius: 16rpx;
    overflow: hidden;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
  }

  .feature-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 32rpx 28rpx;
    border-bottom: 1rpx solid #f5f5f5;
  }

  .feature-card:last-child {
    border-bottom: none;
  }

  .feature-left {
    display: flex;
    align-items: center;
  }

  .feature-name {
    font-size: 28rpx;
    color: #333;
    margin-left: 16rpx;
  }

  .empty-tip {
    padding: 60rpx 0;
    text-align: center;
  }

  .tip-text {
    font-size: 26rpx;
    color: #ccc;
  }
</style>