C56-GZH-UI/pages/index/orderDetailList.vue

<template>
  <view class="u-page">
    <u-list @scrolltolower="scrolltolower">
      <view class="list-wrap">
        <view v-for="(item, index) in detailList" :key="index" class="card-item">
              <view class="info-item">
                <u-col span="6">
                  <text class="label">商品名称：{{item.itemName}}</text>
                </u-col>
                <u-col span="6">
                  <text class="label">体积：{{ item.cube }} m³</text>
                </u-col>
              </view>
              <view class="info-item">
                <u-col span="6">
                <text class="label">重量：{{ item.weight }} kg</text>
                </u-col>
                <u-col span="6">
                  <text class="label">数量：{{ item.peiceNum }} 件</text>
                </u-col>
              </view>
        </view>
      </view>
    </u-list>
  </view>
</template>

<script>
import { getOrderDetailList } from '@/api/index.js';

export default {
  data() {
    return {
      detailList: [],
      page: 1,
      limit: 10,
      // loadStatus: 'loadmore',
      total: 0
    };
  },

  onLoad(options) {
    console.log(options)
    let item = {}
    item.accountId = options.accountId
    item.orderCenterOrderId = options.orderCenterOrderId
    this.getDetailList(item);
  },

  methods: {
    // 获取明细列表数据

    // let params = {
    //   accountId: item.ACCOUNT_ID,
    //   userId: item.USER_ID,
    //   orderCenterOrderId: item.ORDER_CENTER_ORDER_ID
    // }
    // getOrderDetailList(params).then(res => {
    //   if (res.data) {
    //       console.log(res.data)
    //   }
    // })
    async getDetailList(item) {
      try {
        // this.loadStatus = 'loading';
        // 这里替换为实际的API调用
        const res = await getOrderDetailList({
            accountId: item.accountId,
            userId: item.userId,
            orderCenterOrderId: item.orderCenterOrderId
        });

        console.log(1111)
        console.log(res)
        if (res.code === 'success') {
          this.detailList = res.data
        } else {
          // this.loadStatus = 'loadmore';
          uni.$u.toast(res.message || '获取数据失败');
        }
      } catch (error) {
        // this.loadStatus = 'loadmore';
        uni.$u.toast('获取数据失败');
      }
    },

    // // 滚动到底部触发
    // scrolltolower() {
    //   if (this.loadStatus === 'loadmore') {
    //     this.page++;
    //     this.getDetailList();
    //   }
    // }
  }
};
</script>

<style lang="scss" scoped>
.u-page {
  padding: 0;
}

.list-wrap {
  padding: 15px;
  background-color: #f8f8f8;
}

.card-item {
  margin-bottom: 15px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  padding: 12px;
  border: 1px solid #eaeaea;
}

.info-item {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 8px 0;
  
  &:not(:last-child) {
    border-bottom: 1px solid #f0f0f0;
  }
  
  .label {
    color: #333;
    font-size: 14px;
    margin-right: 5px;
    white-space: nowrap;
    
    &::after {
      content: '';
      display: inline-block;
      width: 1px;
      height: 12px;
      background-color: #dcdfe6;
      margin: 0 8px;
      vertical-align: middle;
    }
  }
  
  .value {
    color: #666;
    font-size: 14px;
    flex: 1;
  }
}
</style>