delivery-depot-uniapp/pages/taskList-verification/components/myTaskList.vue

<template>
  <view class="my-task-container">
    <!-- 任务列表 -->
    <scroll-view
      scroll-y
      @scrolltolower="loadMore"
      class="task-list"
      refresher-enabled
      :refresher-triggered="isRefreshing"
      @refresherrefresh="onRefresh"
    >
      <!-- 空数据提示 -->
      <view v-if="taskList.length === 0" class="empty-container">
        <image src="" mode="aspectFit" class="empty-image"></image>
        <text class="empty-text">暂无任务数据</text>
      </view>

      <!-- 任务列表内容 -->
      <template v-else>
        <view
          v-for="(item, index) in taskList"
          @click="handleTaskClick(item)"
          :key="index"
          class="task-item"
        >
          <view class="warehouse-info">
            <view class="info-row">
              <uni-icons type="home" size="24" color="#1976D2"></uni-icons>
              <view class="warehouse-name">
                <view class="labeltext">库区名称:</view>
                <view class="valuetext">{{ item.kqmc }}</view>
              </view>
            </view>
            <view class="info-row">
              <uni-icons type="location" size="24" color="#FFA726"></uni-icons>
              <view class="warehouse-address">
                <view class="labeltext">库区地址:</view>
                <view class="valuetext">{{ item.jtdz }}</view>
              </view>
            </view>
          </view>
          <view class="divider"></view>
          <view class="task-status">
            <text>通过数量: {{ item.hytgNum || "0" }}</text>
            <text>不通过数量: {{ item.hybtgNum || "0" }}</text>
            <!-- <text :class="['status']"
              >核验状态: {{ statusflutter(item.hyState) }}</text
            > -->
            <text
              >核验状态:
              {{ statusFun(item.hytgNum, item.hybtgNum, item.hyNum) }}</text
            >
          </view>
        </view>

        <!-- 加载更多提示 -->
        <view class="load-more" v-if="taskList.length > 0">
          <view v-if="loading" class="loading-box">
            <text class="loading-text">加载中...</text>
          </view>
          <view v-else-if="!hasMore" class="bottom-line">
            <text class="line"></text>
            <text class="text">已经到底了</text>
            <text class="line"></text>
          </view>
        </view>
      </template>
    </scroll-view>
  </view>
</template>

<script>
import { getTaskList } from "@/api/task";
export default {
  data() {
    return {
      pageNo: 1,
      pageSize: 10,
      loading: false,
      hasMore: true,
      taskList: [],
      isRefreshing: false,
    };
  },
  // 页面加载
  created() {
    this.getTaskList();
  },

  methods: {
    statusFun(hytgNum, hybtgNum, hyNum) {
      if (hytgNum === hyNum) {
        return "全部通过";
      } else if (hybtgNum === hyNum) {
        return "全部不通过";
      } else if (hytgNum + hybtgNum === hyNum) {
        return "核验完成";
      } else {
        return "核验中";
      }
    },

    initTaskList() {
      this.hasMore = true;
      this.pageNo = 1;
      this.taskList = [];
      this.getTaskList();
    },

    async getTaskList() {
      if (this.loading || !this.hasMore) return;
      try {
        this.loading = true;

        // 加载
        uni.showLoading({
          title: "加载中...",
        });

        const params = {
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          listType: 2,
        };

        const res = await getTaskList(params);

        if (res.code === 0) {
          const list = res.data.records;
          if (this.pageNo === 1) {
            this.taskList = list;
          } else {
            // 否则追加到现有列表
            this.taskList = [...this.taskList, ...list];
          }
          // 判断是否还有更多数据
          this.hasMore = list.length >= this.pageSize;

          // 如果还有更多数据，页码加1
          if (this.hasMore) {
            this.pageNo++;
          }
        } else {
          uni.showToast({
            title: res.message || "获取任务列表失败",
            icon: "none",
          });
        }
      } catch (error) {
        console.error("获取任务列表失败：", error);
        uni.showToast({
          title: "获取任务列表失败",
          icon: "none",
        });
      } finally {
        this.loading = false;
        uni.hideLoading();
      }
    },
    handleTaskClick(item) {
      // item.hytgNum, item.hybtgNum, item.hyNum

      let isAllOk = item.hytgNum + item.hybtgNum === item.hyNum;

      // 将对象转为 URL 参数
      const params = encodeURIComponent(
        JSON.stringify({
          kqmc: item.kqmc,
          // address: item.address,
          // roomCount: item.roomCount,
          // status: item.status,
          kqId: item.kqId,
          hyState: item.hyState,
          isAllOk,
          // 可以添加其他需要传递的参数
        })
      );

      uni.navigateTo({
        url: `/pages/myTask-verification/myTaskLayout?taskInfo=${params}`,
      });
    },
    // 核验状态(0:待查验,1:查验通过,2:查验不通过3:核验中)
    statusflutter(status) {
      if (status === 0) {
        return "待查验";
      } else if (status === 1) {
        return "查验通过";
      } else if (status === 2) {
        return "查验不通过";
      } else if (status === 3) {
        return "核验中";
      }
    },
    loadMore() {
      if (this.hasMore && !this.loading) {
        this.getTaskList(true);
      }
    },

    // 添加下拉刷新处理方法
    async onRefresh() {
      this.isRefreshing = true;
      try {
        await this.resetList();
      } finally {
        this.isRefreshing = false;
      }
    },

    // 修改重置列表方法
    async resetList() {
      this.pageNo = 1;
      this.hasMore = true;
      this.taskList = [];
      await this.getTaskList();
    },
  },
};
</script>

<style lang="scss" scoped>
.my-task-container {
  height: 100vh;
  background: linear-gradient(#cfddfc 0%, #e6eeff 10%, #fff 100%);
}

.header {
  padding: 30rpx 40rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;

  .title {
    font-size: 36rpx;
    font-weight: bold;
  }
}

.task-list {
  height: calc(100vh - 100rpx);
  padding: 20rpx;
  box-sizing: border-box;
}

.task-item {
  // background-color: #;
  background: linear-gradient(#fff 0%, #fff 80%, #f4f6fb 100%);
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 10rpx 10rpx rgba(0, 0, 0, 0.1);
}

.warehouse-info {
  .info-row {
    display: flex;
    align-items: start;
    margin-bottom: 20rpx;

    view {
      margin-left: 16rpx;
      font-size: 35rpx;
    }

    .warehouse-name,
    .warehouse-address {
      display: flex;
      flex: 1;
    }

    .labeltext {
      // 文字禁止换行
      white-space: nowrap;
    }

    .valuetext {
      text-align: left;
    }
  }
}

.task-status {
  display: flex;
  justify-content: space-between;
  margin-top: 20rpx;
  font-size: 28rpx;

  .status {
    &.status-pending {
      color: #ffa726;
    }

    &.status-processing {
      color: #1976d2;
    }

    &.status-failed {
      color: #f44336;
    }
  }
}

// 如果需要下拉刷新的加载动画
.loading {
  display: flex;
  align-items: center;
  justify-content: center;

  &::before {
    content: "";
    width: 30rpx;
    height: 30rpx;
    margin-right: 10rpx;
    border: 2rpx solid #999;
    border-top-color: transparent;
    border-radius: 50%;
    animation: loading 0.8s linear infinite;
  }
}

@keyframes loading {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.empty-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  // padding: 100rpx 0;

  .empty-image {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 20rpx;
  }

  .empty-text {
    color: #999;
    font-size: 28rpx;
  }
}

.load-more {
  padding: 20rpx 30rpx 40rpx;

  .loading-box {
    text-align: center;

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

  .bottom-line {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 30rpx;

    .line {
      flex: 1;
      height: 1rpx;
      background: #ddd;
    }

    .text {
      color: #999;
      font-size: 24rpx;
      padding: 0 30rpx;
    }
  }
}

.divider {
  height: 1rpx; /* 分割线的高度 */
  background-color: rgba(117, 117, 117, 0.1); /* 分割线的颜色 */
  margin: 10rpx 0; /* 分割线的上下间距 */
  width: 100%; /* 分割线的宽度 */
}
</style>