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">
      <wd-card v-for="order in orderList" :key="order.id" type="rectangle" custom-class="order-item" @click="toDetails(order)">
        <template #title>
          <view class="order-item-title">
            <view class="order-item-sn">
              {{ order.orderSn }}
              <wd-icon name="file-copy" size="14px" color="#65A1FA" class="ml-1!" @click="copyToClipboard(order.orderSn)"></wd-icon>
              <!-- <wd-button type="icon" icon="file-copy" size="small"></wd-button> -->
            </view>
            <view class="order-item-status">{{ orderStatusMap[order.orderStatus] }}</view>
          </view>
        </template>
        
        <!-- 三种订单类型商品信息 -->
        <ProductInfo v-if="order.orderType === 'order'" :data="order.productList[0].product" :type="order.orderType" />
        <ProductInfo v-if="order.orderType === 'vip'" :data="order.vipBuyConfigEntity" :type="order.orderType" />
        <ProductInfo v-if="order.orderType === 'abroadVip'" :data="order.ebookvipBuyConfig" :type="order.orderType" />
        <!-- 三种订单类型商品信息 end -->
        <view class="order-item-total-price">实付款：{{ order.orderMoney }} {{ t('global.coin') }}</view>

        <template #footer>
          <view>
            <!-- <wd-button size="small" plain>申请售后</wd-button> -->
            <wd-button v-if="order.orderStatus === 0" size="small" plain class="ml-2.5!">继续付款</wd-button>
          </view>
        </template>
      </wd-card>
    </view>
  </z-paging>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getOrderList } from '@/api/modules/user'
import type { IOrder } from '@/types/order'
import { useI18n } from 'vue-i18n'
import { copyToClipboard } from '@/utils/index'
import ProductInfo from '@/components/order/ProductInfo.vue'
import { useSysStore } from '@/stores/sys'

const { t } = useI18n()
const paging = ref<any>(null)

// 订单状态映射
const orderStatusMap = useSysStore().orderStatusMap

// 订单状态
const orderStatus = ref<string>('3')
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)
  }
}

/**
 * 获取订单图片
 */
const getOrderImage = (order: IOrder) => {
  switch (order.orderType) {
    case 'order':
      return order.productList[0]?.product?.productImages || ''
    case 'abroadBook':
      return order.bookEntity?.images || ''
    case 'vip':
      return '/static/vip.png'
    case 'point':
      return '/static/jifen.png'
    default:
      return ''
  }
}

/**
 * 跳转订单详情
 */
const toDetails = (order: IOrder) => {
  uni.navigateTo({
    url: '/pages/user/order/details?orderId=' + order.orderId
  })
}



</script>

<style lang="scss" scoped>
.order-page {
  min-height: 100vh;
  background-color: #f7faf9;
}

.order-list {
  padding: 10px;
  padding-bottom: 0;
}

.order-item {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  border-radius: 8px !important;

  &:last-child {
    margin-bottom: 0;
  }

  :deep() {
    .wd-card__title-content {
      padding: 0 !important;
    }
    .wd-card__content{
      padding: 10px 0 !important;
    }
  }

  .order-item-title {
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .order-item-sn {
    display: flex;
    align-items: center;
    height: 36px;
    line-height: 36px;
  }

  .order-item-status {
    font-size: 12px;
    color: #e55f18;
  }

  .order-item-content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;

    .order-item-product-info {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;

      .order-item-product-name {
        color: #333;
      }
    }
    .order-item-product-price {
      font-weight: bold;
      color: #333;
      text-align: right;
      font-size: 12px;

      .count {
        font-weight: normal;
        color: #999;
      }
    }
  }

  .order-item-total-price {
    font-weight: bold;
    font-size: 14px;
    color: #333;
    margin-top: 10px;
    text-align: right;
    line-height: 1;
  }
}
</style>