taimed-international-app/pages/user/order/index.vue

<template>
  <view class="order-page">
    <!-- 自定义导航栏 -->
    <nav-bar :title="$t('user.myOrders')"></nav-bar>

    <!-- 订单列表 -->
    <scroll-view 
      v-if="orderList.length > 0"
      scroll-y 
      class="order-scroll"
      @scrolltolower="loadMore"
    >
      <view class="order-list">
        <view 
          v-for="order in orderList" 
          :key="order.id" 
          class="order-item"
        >
          <view class="order-header">
            <text class="book-name">{{ order.bookEntity.name }}</text>
            <view class="price-info">
              <image 
                v-if="order.paymentMethod === '4'" 
                src="/static/icon/coin.png" 
                class="payment-icon"
              />
              <image 
                v-else 
                src="/static/icon/currency.png" 
                class="payment-icon"
              />
              <text class="price">{{ order.orderMoney }}</text>
              <text v-if="order.paymentMethod === '5'" class="currency">NZD</text>
            </view>
          </view>
          <text class="order-sn">
            {{ $t('user.orderSn') }}
            {{ order.orderSn }}
          </text>
          <text class="create-time">{{ order.createTime }}</text>
        </view>
      </view>

      <!-- 加载提示 -->
      <view class="load-tips">
        <wd-divider v-if="hasMore && showLoadTip">
          {{ $t('common.loadMore') }}
        </wd-divider>
        <wd-divider v-if="!hasMore && showLoadTip">
          {{ $t('common.noMore') }}
        </wd-divider>
      </view>
    </scroll-view>

    <!-- 空状态 -->
    <view v-else-if="!loading" class="empty-state">
      <text class="empty-text">{{ $t('common.noData') }}</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getOrderList } from '@/api/modules/user'
import type { IOrder } from '@/types/user'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

// 导航栏高度
const statusBarHeight = ref(0)
const navbarHeight = ref('44px')

// 订单列表
const orderList = ref<IOrder[]>([])

// 分页信息
const page = ref({
  current: 1,
  limit: 10
})

// 加载状态
const loading = ref(false)
const hasMore = ref(true)
const showLoadTip = ref(false)
const total = ref(0)

/**
 * 获取导航栏高度
 */
const getNavbarHeight = () => {
  const systemInfo = uni.getSystemInfoSync()
  statusBarHeight.value = systemInfo.statusBarHeight || 0
  
  let navBarHeight = 44
  if (systemInfo.model.indexOf('iPhone') !== -1 && parseInt(systemInfo.model.slice(-2)) >= 11) {
    navBarHeight = 48
  }
  
  const totalHeight = statusBarHeight.value + navBarHeight
  navbarHeight.value = totalHeight + 'px'
}

/**
 * 获取订单列表
 */
const getData = async () => {
  if (loading.value || !hasMore.value) {
    return
  }

  try {
    loading.value = true

    const res = await getOrderList(page.value.current, page.value.limit)

    if (res.orders && res.orders.records) {
      total.value = res.orders.total
      const records = res.orders.records

      if (records.length > 0) {
        orderList.value = [...orderList.value, ...records]
        page.value.current += 1
        showLoadTip.value = true

        // 判断是否还有更多数据
        if (orderList.value.length >= total.value || records.length < page.value.limit) {
          hasMore.value = false
        }
      } else {
        hasMore.value = false
      }
    }
  } catch (error) {
    console.error('获取订单列表失败:', error)
  } finally {
    loading.value = false
  }
}

/**
 * 加载更多
 */
const loadMore = () => {
  if (!loading.value && hasMore.value) {
    getData()
  }
}

/**
 * 返回上一页
 */
const goBack = () => {
  uni.navigateBack({
    delta: 1
  })
}

onMounted(() => {
  getNavbarHeight()
  getData()
})
</script>

<style lang="scss" scoped>
$theme-color: #54a966;

.order-page {
  min-height: 100vh;
  background-color: #f7faf9;
}

.custom-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background-color: #fff;
  border-bottom: 1rpx solid #e5e5e5;

  .navbar-content {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    position: relative;

    .navbar-left {
      position: absolute;
      left: 10px;
      display: flex;
      align-items: center;
      padding: 10rpx;
    }

    .navbar-title {
      font-size: 16px;
      font-weight: 700;
      color: #333;
    }
  }
}

.order-scroll {
  height: 100vh;
}

.order-list {
  padding: 0 20rpx 10rpx;
}

.order-item {
  background: #fff;
  border-radius: 15rpx;
  padding: 30rpx;
  margin-top: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

  .order-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20rpx;

    .book-name {
      flex: 1;
      font-size: 34rpx;
      color: #333;
      font-weight: bold;
      max-width: 85%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .price-info {
      display: flex;
      align-items: center;

      .payment-icon {
        width: 38rpx;
        height: 38rpx;
        margin-right: 5rpx;
      }

      .price {
        font-size: 36rpx;
        color: $theme-color;
        font-weight: bold;
      }

      .currency {
        font-size: 32rpx;
        color: $theme-color;
        font-weight: bold;
        margin-left: 5rpx;
      }
    }
  }

  .order-sn {
    display: block;
    font-size: 30rpx;
    color: #666;
    line-height: 38rpx;
    margin-bottom: 10rpx;
  }

  .create-time {
    display: block;
    font-size: 28rpx;
    color: #aaa;
  }
}

.load-tips {
  padding: 40rpx 0 20rpx;
  text-align: center;
}

.empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding-top: 100rpx;

  .empty-text {
    font-size: 30rpx;
    color: #999;
  }
}
</style>