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

<template>
  <z-paging ref="paging" v-model="orderList" auto-show-back-to-top class="order-page" @query="getData">
    <template #top>
      <!-- 自定义导航栏 -->
      <nav-bar :title="$t('user.myOrders')"></nav-bar>
      <wd-tabs v-model="orderStatus" @change="handleOrderStatusTabChange">
        <wd-tab v-for="item in ordersTabs" :key="item.value" :title="item.name" :name="item.value"></wd-tab>
      </wd-tabs>
    </template>

    <!-- 订单列表 -->
    <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 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>
  </z-paging>
</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 paging = ref<any>(null)

// 订单状态
const orderStatus = ref<string>('-1')
const ordersTabs = [
  {
    name: "全部",
    value: '-1',
    badge: {},
  },
  {
    name: "待付款",
    value: '0',
    badge: {},
  },
  {
    name: "已完成",
    value: '3',
    badge: {},
  },
]

/**
 * 处理订单状态切换
 */
const handleOrderStatusTabChange = (val: number) => {
  paging.value.reload()
}



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

/**
 * 获取订单列表
 */
const getData = async (page: number, pageSize: number) => {
  try {
    // 添加订单状态参数
    const res = await getOrderList(page, pageSize, orderStatus.value)
    paging.value.complete(res.data.records)
  } catch (error) {
    paging.value.complete(false)
    console.error('获取订单列表失败:', error)
  }
}
</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>