aiot-app/pages/pda/outsourcing/index/index.vue

<template>
  <view class="content-box">
    <uni-nav-bar
      fixed="true"
      statusBar="true"
      left-icon="back"
      title="委外单"
      background-color="#157A2C"
      color="#fff"
      @clickLeft="back"
    ></uni-nav-bar>

    <view class="top-wrapper">
      <uni-section>
        <uni-easyinput
          prefixIcon="search"
          style="width: 460rpx"
          v-model="searchFrom.keyWord"
          placeholder="请输入"
        >
        </uni-easyinput>
      </uni-section>

      <button class="search_btn" @click="doSearch">搜索</button>

      <image class="menu_icon" src="~@/static/pda/menu.svg"></image>
    </view>

    <view class="list_box">
      <u-list
        @scrolltolower="scrolltolower"
        key="list"
        :preLoadScreen="page * 10"
      >
        <u-list-item v-for="(item, index) in dataList" :key="index">
          <workCard :item="item" @handleDetail="handleDetail"></workCard>
        </u-list-item>

        <u-list-item v-if="dataList.length === 0">
          <view style="margin-top: 20vh">
            <u-empty iconSize="150" textSize="32" text="暂无工单"> </u-empty>
          </view>
        </u-list-item>
      </u-list>
    </view>
  </view>
</template>

<script>
import workCard from "../../components/workCard.vue";

import { workorderPage } from "@/api/pda/workOrder.js";
let [isEnd] = [false];
export default {
  components: {
    workCard,
  },
  data() {
    return {
      page: 1,
      size: 10,
      dataList: [],

      searchFrom: {
        keyWord: null,
      },
    };
  },
  onShow() {
    this.getList();
  },
  methods: {
    async getList() {
      let params = {
        pageNum: this.page,
        size: this.size,
        workOrderType: 2,
        customerClient: 2,
        status: [4, 5, 6, 7],
        ...this.searchFrom,
      };

      isEnd = false;

      const res = await workorderPage(params);

      if (params.pageNum === 1) {
        this.dataList = [];
      }

      this.dataList.push(...res.list);
      isEnd = this.dataList.length >= res.count;
    },

    doSearch() {
      this.getList();
    },

    scrolltolower() {
      if (isEnd) return;
      this.page++;
      this.getList();
    },

    handleDetail(item) {
      let url = "/pages/pda/workOrder/extrusionMolding/index";
      url += `?id=${item.id}&title=${item.taskName}`;

      uni.navigateTo({
        url,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.content-box {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: $page-bg;
}

.top-wrapper {
  background-color: #fff;
  display: flex;
  width: 750rpx;
  height: 88rpx;
  padding: 16rpx 32rpx;
  align-items: center;
  gap: 16rpx;

  /deep/.uni-section {
    margin-top: 0px;
  }

  /deep/.uni-section-header {
    padding: 0px;
  }

  .search_btn {
    width: 120rpx;
    height: 70rpx;
    line-height: 70rpx;
    padding: 0 24rpx;
    background: $theme-color;
    font-size: 32rpx;
    color: #fff;
    margin: 0;
    margin-left: 26rpx;
  }

  .menu_icon {
    width: 44rpx;
    height: 44rpx;
    margin-left: 14rpx;
  }
}

.list_box {
  flex: 1;
  overflow: hidden;
  padding: 16rpx 0;

  .u-list {
    height: 100% !important;
  }
}
</style>