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

<template>
  <view class="order-page">
    <uni-data-select
      v-model="value"
      :localdata="range"
      style="
    margin-bottom: 5px;
"
      placeholder="请选择巷道"
      @change="change"
    ></uni-data-select>
    <!-- 下拉刷新 -->
    <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.pics">
            <u-image 
              v-for="(pic, picIndex) in item.pics.split(';')" 
              :key="picIndex" 
              :title="pic.url"
              :src="pic.url" width="73px" height="73px" 
              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,   // 每页条数
      
      streetId:null,
      range: [
       
      ],
      refreshing: false,
      loadStatus: 'loadmore', // 加载状态：loadmore/loading/nomore
      total: 0       // 总数据量
    }
  },
  onLoad() {
    this.getStreetList();
    this.loadOrders(); // 初始化加载
  },
  methods: {
    change(e) {
    //   console.log(e);
       this.streetId = e;
      this.pageNum = 1;
      this.loadOrders();
    //   this.onRefresh()
    },
    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.streetName + "-" + (row.fromDirection ? "左侧-" : "右侧-") + row.fromRow + '层-' + row.fromColumn + '列' + (row.fromSeparation == 2 ? "深货位" : "");
      const to = row.toSide == 2 ? "库外" : row.streetName + "-" + (row.toDirection ? "左侧-" : "右侧-") + row.toRow + '层-' + row.toColumn + '列' + (row.toSeparation == 2 ? "深货位" : "");
      return from + "->" + to;
    },
    async getStreetList() {
        try {
        const res = await request({
          url: '/admin-api/logistics/street/list',
          method: 'GET',
          data: {
          }
        });
        
        if (res.data.code === 200) {
            // console.log(res.data.data);
            
         console.log(res.data.data.map(item => ({ value: item.id, text: item.name })));
          this.range = res.data.data.map(item => ({ value: item.id, text: item.name }));
          console.log(this.range);
          
        } 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';
      }
    },
    // 跳转到详情页
    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,
            srmNumber: this.streetId
          }
        });
        
        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>