jsh_erp_app/pages/inventory-task/index.vue

<template>
  <view class="check-page">
    <u-navbar height="40px" title="盘点" bgColor="#fff" autoBack placeholder>
    </u-navbar>
    <view class="container_main">
      <u-sticky :offsetTop="offsetTop" bgColor="#fff">
        <view class="search-box">
          <u-search
            placeholder="请输入单据编号或名称"
            shape="square"
            v-model="query.number"
            :showAction="false"
            :clearabled="true"
            @search="handleSearch"
            @clear="handleSearch"
          ></u-search>
        </view>
        <view class="type-box">
          <u-tabs
            :list="tabList"
            :inactiveStyle="{ color: '#000', fontSize: '28rpx' }"
            :activeStyle="{ color: '#000', fontSize: '28rpx' }"
            lineColor="#0256FF"
            lineWidth="66rpx"
            :scrollable="false"
            @click="tabClick"
          >
          </u-tabs>
        </view>
      </u-sticky>
      <view class="content-box">
        <view class="content-box-val">
          <check-item
            v-for="item in list"
            :key="item.id"
            :info="item"
            @btnClick="handleBtnClick"
          ></check-item>
        </view>
        <!-- 加载更多 -->
        <u-loadmore :status="loadStatus" @loadmore="onLoadMore" />
      </view>
    </view>
  </view>
</template>

<script>
import checkItem from "./components/check-item.vue";
import {
  taskStocktakingList,
  startTask,
} from "@/common/request/apis/inventoryTask";
import { taskStatusList } from "../inventory-task/utils/index.js";

export default {
  components: {
    checkItem,
  },
  data() {
    return {
      offsetTop: 0,
      tabList: taskStatusList,
      query: {
        number: "",
        status: "",
      },
      pageNum: 1,
      pageSize: 10,
      loadStatus: "loadmore", //加载前值为loadmore，加载中为loading，没有数据为nomore
      list: [],
    };
  },
  onLoad() {
    let systemInfo = uni.getSystemInfoSync();
    let statusBarHeight = systemInfo.statusBarHeight;
    this.offsetTop = statusBarHeight + 40;
    // 初始化数据
    this.loadData();
  },
  onPullDownRefresh() {
    // 下拉刷新
    this.onRefresh();
  },
  onReachBottom() {
    // 触底加载更多
    this.onLoadMore();
  },
  methods: {
    async onRefresh() {
      try {
        await this.loadData(true);
      } finally {
        uni.stopPullDownRefresh();
      }
    },
    async onLoadMore() {
      if (this.loadStatus !== "loadmore") return;
      this.loadStatus = "loading";
      try {
        await this.loadData();
      } catch (e) {
        this.loadStatus = "loadmore";
      }
    },
    async loadData(isRefresh = false) {
      if (isRefresh) {
        this.pageNum = 1;
        this.list = [];
      }

      try {
        this.loadStatus = "loading";
        const pageNum = this.pageNum;
        const pageSize = this.pageSize;
        const params = {
          pageNum,
          pageSize,
          ...this.query,
        };
        const res = await taskStocktakingList(params);
        const { rows, total } = res.data;
        this.list = [...this.list, ...rows];
        if (pageNum * pageSize < Number(total)) {
          this.pageNum++;
          this.loadStatus = "loadmore";
        } else {
          this.loadStatus = "nomore";
        }
      } catch (error) {}
    },
    tabClick({ index }) {
      this.query.status = this.tabList[index].value;
      this.loadData(true);
    },
    handleSearch(value) {
      this.loadData(true);
    },
    // 前往盘点任务详情
    handleBtnClick(data) {
      console.log(11111, data);
      // params.id--->任务id   params.btnName--->按钮label
      const { btnName } = data;
      switch (btnName) {
        case "详情":
          uni.navigateTo({
            url: `/pages/inventory-task/taskDetail?id=${data.id}`,
          });
          break;
        case "去盘点":
          startTask(data.id).then((res) => {
            if (res.code === 200) {
              uni.navigateTo({
                url: `/pages/inventory-task/detail?id=${data.id}&pageType=1`,
              });
            } else {
              uni.$u.toast(res.data);
            }
          });
          break;
        case "去提交":
          break;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.check-page {
  min-height: 100vh;
  background-color: #f0f6fb;
  .container_main {
    .search-box {
      background-color: rgba(191, 200, 219, 0.2);
      margin: 0 32rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-radius: 8rpx;

      ::v-deep .u-search__content {
        background-color: transparent !important;

        .u-search__content__input {
          background-color: transparent !important;
        }
      }

      .scan-icon {
        width: 100rpx;
        height: 100%;

        image {
          width: 40rpx;
          height: 40rpx;
        }
      }
    }

    .content-box {
      padding: 24rpx;
      &-val {
        border-radius: 16rpx 16rpx 0 0;
        overflow: hidden;
      }
    }
  }
}
</style>