jsh_erp_app/pages/inventory-task/detail.vue

<template>
  <view class="inventory-detail">
    <!-- 导航栏 -->
    <u-navbar
      :title="pageTitle"
      :autoBack="true"
      fixed
      safe-area-inset-top
      placeholder
    >
      <template #right>
        <view class="nav-right">
          <u-icon name="search" size="20" color="#333"></u-icon>
        </view>
      </template>
    </u-navbar>

    <!-- 基本信息 吸顶 -->
    <view class="info-card">
      <view class="info-item">
        <text class="info-label">盘点单号：</text>
        <text class="info-value">{{ inventoryInfo.code }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">盘点人：</text>
        <text class="info-value">{{ inventoryInfo.operator }}</text>
      </view>
      <view class="progress-box">
        <view class="progress-label-box">
          <text class="progress-label"> 盘点进度 </text>
          <text class="progress-value"
            >{{ inventoryInfo.progress }}/{{ inventoryInfo.total }}</text
          >
        </view>
        <view class="progress-bar-wrap">
          <u-line-progress
            :percentage="getProgressPercentage"
            height="4"
            :show-text="false"
            activeColor="#4080FF"
          >
          </u-line-progress>
        </view>
      </view>
    </view>
    <!-- 筛选按钮 -->
    <u-sticky bgColor="#F5F6F7" :offsetTop="44">
      <view class="filter-wrap">
        <view class="filter-btn" @click="filterPopupVisible = true">
          <text>筛选</text>
          <image
            src="@/static/image/saixuan-icon.png"
            mode=""
            class="icon"
          ></image>
        </view>
      </view>
    </u-sticky>

    <!-- 商品列表 -->
    <view class="goods-list">
      <view class="goods-item" v-for="(item, index) in goodsList" :key="index">
        <view class="location-row">
          <view class="location-left">
            <text class="location-label">库位：</text>
            <text class="location-value">{{ item.location }}</text>
            <image
              src="@/static/image/bianji-icon.png"
              mode=""
              class="icon"
            ></image>
          </view>
          <text class="category-text">{{ item.category }}</text>
        </view>

        <view class="goods-content">
          <image
            class="goods-image"
            :src="item.image"
            mode="aspectFill"
          ></image>
          <view class="goods-info">
            <text class="goods-name u-line-2">{{ item.name }}</text>
            <view class="goods-field half-w">
              <text class="field-label">规格：</text>
              <text class="field-value">{{ item.spec }}</text>
            </view>
            <view class="goods-field half-w">
              <text class="field-label">盘点人：</text>
              <text class="field-value">{{ item.checkUser }}</text>
            </view>
            <view class="goods-field">
              <text class="field-label">盘点时间：</text>
              <text class="field-value">{{ item.checkTime }}</text>
            </view>
            <view class="stock-row">
              <view class="stock-item">
                <text class="stock-label">系统库存</text>
                <text class="stock-value">{{ item.systemStock }}瓶</text>
              </view>
              <view class="stock-item">
                <text class="stock-label">已盘库存</text>
                <text
                  class="stock-value"
                  :class="{
                    'stock-value-zero': item.actualStock === '未盘',
                    'stock-value-warning': item.actualStock === '0瓶',
                  }"
                  >{{ item.actualStock }}</text
                >
              </view>
            </view>
          </view>
        </view>

        <view class="action-row">
          <u-button
            type="primary"
            size="mini"
            @click="handleCheck(item)"
            class="action-btn"
            >盘点</u-button
          >
          <u-button
            type="primary"
            size="mini"
            @click="handleRecheck(item)"
            class="action-btn"
            >重新盘点
          </u-button>
          <u-button
            type="warning"
            size="mini"
            plain
            @click="handleCheck2(item)"
            class="action-btn action-btn-secondary"
            >盘点2</u-button
          >
        </view>
      </view>

      <!-- 加载更多 -->
      <u-loadmore :status="loadMoreStatus" @loadmore="onLoadMore" />
    </view>
    <InventoryFilterPopup
      :show.sync="filterPopupVisible"
      :defaultValues="defaultFilterValues"
      @confirm="handleFilterConfirm"
    />
    <actionNumPopup :show.sync="actionPop.showNumPop" />
    <categoryPopup :show.sync="actionPop.showCategoryPop" />
    <error-pop
      v-model="actionPop.errorShow"
      isCenter
      cancelBtnText="取消"
      confirmBtnText="确定"
      @close="actionPop.errorShow = false"
      @confirm="confirm"
      :content="actionPop.errorText"
    ></error-pop>
  </view>
</template>

<script>
import InventoryFilterPopup from "./components/inventoryFilterPopup.vue";
import actionNumPopup from "./components/actionNumPopup.vue";
import categoryPopup from "./components/categoryPopup.vue";
import errorPop from "@/components/error-pop/error-pop.vue";
export default {
  components: {
    InventoryFilterPopup,
    actionNumPopup,
    errorPop,
    categoryPopup,
  },
  data() {
    return {
      pageTitle: "2025年中心仓第三季度食品盘点",
      isRefreshing: false,
      loadMoreStatus: "loadmore",
      pageNum: 1,
      pageSize: 10,
      inventoryInfo: {
        code: "2024202244",
        operator: "刘双秀",
        progress: 105,
        total: 604,
      },
      goodsList: [
        {
          location: "C6-2-2",
          category: "母婴用品-家居旅行",
          image: "/static/demo/goods1.png",
          name: "4层汗巾儿童全棉幼儿类吸汗巾婴儿纱布毛巾1条装",
          spec: "4层-随机",
          checkUser: "刘双秀",
          checkTime: "2025-04-03",
          systemStock: "5瓶",
          actualStock: "未盘",
          isChecked: false,
        },
        {
          location: "C6-2-2",
          category: "母婴用品-家居旅行",
          image: "/static/demo/goods1.png",
          name: "4层汗巾儿童全棉幼儿类吸汗巾婴儿纱布毛巾1条装",
          spec: "4层-随机",
          checkUser: "刘双秀",
          checkTime: "2025-04-03",
          systemStock: "5瓶",
          actualStock: "0瓶",
          isChecked: true,
        },
      ],
      filterPopupVisible: false,
      defaultFilterValues: {
        goods: "",
        user: "",
        category: "",
        location: "",
      },
      actionPop: {
        // 盘点数量弹框状态
        showNumPop: false,
        // 警告提示弹框状态
        errorShow: false,
        errorText: "是否提交盘点？",
        // 修改库位弹框状态
        showCategoryPop: false,
      },
    };
  },
  computed: {
    getProgressPercentage() {
      return (this.inventoryInfo.progress / this.inventoryInfo.total) * 100;
    },
  },
  onLoad() {
    // 初始化数据
    this.loadData();
  },
  onPullDownRefresh() {
    // 下拉刷新
    this.onRefresh();
  },
  onReachBottom() {
    // 触底加载更多
    this.onLoadMore();
  },
  methods: {
    async onRefresh() {
      try {
        await this.loadData(true);
      } finally {
        uni.stopPullDownRefresh();
      }
    },
    async onLoadMore() {
      if (this.loadMoreStatus !== "loadmore") return;
      this.loadMoreStatus = "loading";
      try {
        await this.loadData();
      } catch (e) {
        this.loadMoreStatus = "loadmore";
      }
    },
    async loadData(isRefresh = false) {
      if (isRefresh) {
        this.pageNum = 1;
        this.goodsList = [];
      }

      // 模拟数据加载
      await new Promise((resolve) => setTimeout(resolve, 1000));

      // 模拟新数据
      const mockData = [
        {
          location: "C6-2-2",
          category: "母婴用品-家居旅行",
          image: "/static/demo/goods1.png",
          name: "4层汗巾儿童全棉幼儿类吸汗巾婴儿纱布毛巾1条装",
          spec: "4层-随机",
          checkUser: "刘双秀",
          checkTime: "2025-04-03",
          systemStock: "5瓶",
          actualStock: isRefresh ? "未盘" : "0瓶",
          isChecked: !isRefresh,
        },
      ];

      this.goodsList = [...this.goodsList, ...mockData];
      this.pageNum++;

      // 模拟没有更多数据
      if (this.pageNum > 3) {
        this.loadMoreStatus = "nomore";
      } else {
        this.loadMoreStatus = "loadmore";
      }
    },
    handleCheck(item) {
      uni.showToast({
        title: "开始盘点",
        icon: "none",
      });
    },
    handleRecheck(item) {
      uni.showToast({
        title: "开始重新盘点",
        icon: "none",
      });
    },
    handleCheck2(item) {
      uni.showToast({
        title: "开始盘点2",
        icon: "none",
      });
    },
    handleFilterConfirm(values) {
      this.defaultFilterValues = values;
      this.filterPopupVisible = false;
    },
  },
};
</script>

<style lang="scss">
.inventory-detail {
  min-height: 100vh;
  background-color: #f0f6fb;
  padding-bottom: 40rpx;

  .nav-right {
    padding: 0 24rpx;
  }

  .info-card {
    background-color: #fff;
    padding: 16rpx 32rpx;

    .info-item {
      display: flex;
      font-size: 28rpx;
      margin-bottom: 10rpx;

      .info-label {
        color: #666;
        margin-right: 8rpx;
      }

      .info-value {
        color: #333;
      }
    }

    .progress-box {
      .progress-label-box {
        display: flex;
        justify-content: space-between;
      }

      .progress-label {
        font-size: 28rpx;
        color: #666;
        display: block;
        margin-bottom: 16rpx;
      }

      .progress-bar-wrap {
        margin-bottom: 16rpx;
      }

      .progress-value {
        font-size: 24rpx;
        color: #4080ff;
        display: block;
        text-align: right;
      }
    }
  }

  .filter-wrap {
    display: flex;
    justify-content: flex-end;
    padding: 20rpx;

    .filter-btn {
      display: flex;
      align-items: center;
      border-radius: 8rpx;
      font-size: 24rpx;
      color: #333333;

      .icon {
        margin-left: 8rpx;
        width: 32rpx;
        height: 32rpx;
      }
    }
  }

  .goods-list {
    width: 710rpx;
    margin: 0 20rpx;
    border-radius: 16rpx;

    .goods-item {
      background-color: #fff;
      overflow: hidden;
      border-bottom: 1px solid #f5f6f7;

      .location-row {
        display: flex;
        align-items: center;
        padding: 24rpx 32rpx;
        border-bottom: 1px solid #f5f6f7;
        gap: 40rpx;

        .location-left {
          display: flex;
          align-items: center;

          .location-label {
            font-size: 28rpx;
            color: #333;
          }

          .location-value {
            font-size: 28rpx;
            color: #4080ff;
            margin: 0 8rpx;
          }

          .icon {
            width: 32rpx;
            height: 32rpx;
          }
        }

        .category-text {
          font-size: 24rpx;
          color: #999;
        }
      }

      .goods-content {
        padding: 24rpx 32rpx;
        display: flex;

        .goods-image {
          width: 160rpx;
          flex-basis: 160rpx;
          height: 160rpx;
          border-radius: 8rpx;
          background-color: #f5f6f7;
        }

        .goods-info {
          display: flex;
          flex-wrap: wrap;
          flex: 1;
          margin-left: 24rpx;

          .half-w {
            width: 50%;
          }

          .goods-name {
            font-size: 28rpx;
            line-height: 1.4;
            color: #333;
            margin-bottom: 16rpx;
          }

          .goods-field {
            font-size: 24rpx;
            color: #666;
            margin-bottom: 16rpx;

            .field-label {
              color: #999;
            }

            .field-value {
              color: #666;
            }
          }
        }
      }

      .stock-row {
        display: grid;
        grid-template-columns: 50% 50%;
        width: 100%;
        padding: 24rpx;
        background-color: #f6f8fa;
        border-radius: 8rpx;

        .stock-item {
          display: flex;
          flex-direction: column;

          .stock-label {
            font-size: 24rpx;
            color: #999;
            margin-bottom: 20rpx;
          }

          .stock-value {
            font-size: 24rpx;
            color: #333;

            &-zero {
              color: #999;
            }

            &-warning {
              color: #ff9900;
            }
          }
        }
      }

      .action-row {
        padding: 0 32rpx 32rpx;
        display: flex;
        justify-content: flex-end;
        gap: 24rpx;

        .action-btn {
          width: 140rpx;
          height: 56rpx;
          padding: 0;

          &-secondary {
            background-color: transparent;
            border-color: #ff9900;
            color: #ff9900;
          }
        }
      }
    }
  }
}
</style>