qianduan-app/pages/tabbar/order/order.vue

<template>
  <view class="order-page">
    <!-- 下拉刷新 -->
    <u-pull-refresh 
    :refreshing="refreshing" @refresh="onRefresh">
      <!-- 订单卡片列表 -->
      <view v-for="(item, index) in orderList" :key="index" class="order-card">
        <view class="order-info">
          <!-- 详情链接 -->
          <text class="detail-link" @click="goToDetail(item)">详情</text>
          <text class="order-name">任务号:{{ item.taskId }}</text>
          <text class="order-time">状态:{{ item.statusName }}</text>
          <text class="order-time">地址:{{ this.position(item) }}</text>
          <text class="order-time">时间:{{ this.formatTime(item.startTime) }}</text>
          <!-- 图片显示 -->
          <view class="pics-container" v-if="item.urlResources">
            <u-image 
              v-for="(pic, picIndex) in item.urlResources" 
              :key="picIndex" 
              :title="pic.url"
              :src="pic.url" width="80px" height="80px" 
              class="order-pic"
              mode="aspectFill"
            />
          </view>
        </view>
      </view>
      <!-- 上拉加载更多 -->
      <u-loadmore :status="loadStatus" @loadmore="onLoadMore" />
    </u-pull-refresh>
  </view>
</template>

<script>
import request from '@/utils/request';
export default {
  data() {
    return {
      orderList: [], // 订单列表
      pageNum: 1,    // 当前页码
      pageSize: 15,   // 每页条数
      
      refreshing: false,
      loadStatus: 'loadmore', // 加载状态：loadmore/loading/nomore
      total: 0       // 总数据量
    }
  },
  onLoad() {
    this.loadOrders(); // 初始化加载
  },
  methods: {
    formatTime(timestamp) {
      const date = new Date(timestamp);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    position(row) {
      const from = row.fromSide == 2 ? "库外" : row.srmNumber + "-" + (row.fromDirection ? "左侧-" : "右侧-") + row.fromRow + '层-' + row.fromColumn + '列' + (row.fromSeparation == 2 ? "深货位" : "");
      const to = row.toSide == 2 ? "库外" : row.srmNumber + "-" + (row.toDirection ? "左侧-" : "右侧-") + row.toRow + '层-' + row.toColumn + '列' + (row.toSeparation == 2 ? "深货位" : "");
      return from + "->" + to;
    },
    // 跳转到详情页
    goToDetail(item) {
      uni.navigateTo({
        url: `/pages/order/detail?data=${encodeURIComponent(JSON.stringify(item))}`
      });
    },
    // 加载订单数据
    async loadOrders() {
      this.loadStatus = 'loading';
      try {
        const res = await request({
          url: '/admin-api/logistics/order/page',
          method: 'GET',
          data: {
            pageNo: this.pageNum,
            pageSize: this.pageSize
          }
        });
        
        if (res.data.code === 200) {
          const { list, total } = res.data.data;
          this.total = total;
          if (this.pageNum === 1) {
            this.orderList = list; // 第一页直接覆盖
          } else {
            this.orderList = [...this.orderList, ...list]; // 追加数据
          }
          this.pageNum++;
          // 判断是否还有更多数据
          this.loadStatus = this.orderList.length < total ? 'loadmore' : 'nomore';
        } else {
          uni.showToast({ title: res.data.msg || '加载失败', icon: 'none' });
          this.loadStatus = 'loadmore';
        }
      } catch (error) {
        console.error('加载订单失败:', error);
        uni.showToast({ title: '网络错误', icon: 'none' });
        this.loadStatus = 'loadmore';
      }
    },
    // 下拉刷新
    async onRefresh() {
      this.pageNum = 1;
      
      this.refreshing = true
      await this.loadOrders().finally(() => {
        this.refreshing = false});
      this.$refs.pullRefresh.endRefresh();
    },
    // 上拉加载更多
    onLoadMore() {
      if (this.loadStatus === 'nomore') return;
      this.loadOrders();
    }
  }
}
</script>

<style scoped>
.order-page {
  padding: 20rpx;
  background-color: #f7f7f7;
}
.order-card {
  display: flex;
  margin-bottom: 20rpx;
  padding: 20rpx;
  background: #fff;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  position: relative;
}
.order-info {
  flex: 1;
  margin-left: 20rpx;
}
.order-name {
  display: block;
  font-size: 32rpx;
  font-weight: bold;
}
.order-time {
  display: block;
  margin-top: 10rpx;
  color: #999;
  font-size: 24rpx;
}
/* 详情链接样式 */
.detail-link {
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  color: #007AFF;
  font-size: 28rpx;
}
/* 图片样式 - 横向排列 */
.pics-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: 10rpx;
  gap: 10rpx;
}
.order-pic {
  width: 80px;
  height: 80px;
  border-radius: 8rpx;
}
</style>