xcx-shop/src/views/order/index.vue

<template>
  <div class="order-page">
    <!-- 搜索栏 -->
    <div>
      <van-search show-action v-model="searchValue" placeholder="搜索订单" @search="onSearch" @cancel="onCancel" />
    </div>
    <!-- 标签页 -->
    <van-tabs>
      <van-tab v-for="tab in tabs" :key="tab.value" :title="tab.name" :name="tab.value" class="tab-item"> </van-tab>
    </van-tabs>
    <!-- 订单列表 -->
    <div class="order-list bg-[#f5f5f5]">
      <template v-if="orders.length > 0">
        <div v-for="order in orders" :key="order.id" class="order-card bg-white round-[0.08rem]">
          <!-- 下单时间 -->
          <div class="flex justify-between items-center pt-3 px-3">
            <p class="text-sm">2025-10-20 20:10:20</p>
            <p class="text-sm text-[#FB6406]">{{ order.status }}</p>
          </div>
          <!-- 商品信息 -->
          <div class="px-3 pt-3 flex" @click="goDetail(order.id)">
            <img class="w-20 h-20 round-[0.08rem] bg-[#f5f5f5]" :src="order.productMainImageUrl" />
            <div class="flex flex-col justify-between flex-1 w-0 ml-3">
              <div>
                <p class="product-name text-[.13rem]">{{ order.productName }}</p>
                <p class="text-xs text-[#888] mt-2">{{ order.spec }}</p>
              </div>
              <p class="text-[.13rem] text-right">
                <span class="">共{{ order.num }}件商品</span>
                <span class="ml-3"
                  >实付款<i class="text-xs">¥</i><b class="text-base ml-1">{{ order.promotionPrice }}</b></span
                >
              </p>
            </div>
          </div>
          <!-- 操作区域 -->
          <div class="order-footer flex items-center justify-between p-3">
            <van-popover class="order-page__popover" v-model:show="showPopover" placement="top-start" :actions="actions" @select="onSelect">
              <template #reference>
                <span class="text-[#666]">更多</span>
              </template>
            </van-popover>
            <div class="flex items-center">
              <van-button size="small" class="h-7!" @click="handleAddToCart(order.id)">加入购物车</van-button>
              <van-button size="small" type="warning" class="ml-2! h-7! theme-bg-color theme-border-color" @click="handleBuyAgain(order.id)">再买一单</van-button>
            </div>
          </div>
        </div>
      </template>
      <div v-else class="empty-state">
        <div class="empty-icon">
          <van-icon name="orders-o" size="48" />
        </div>
        <div>暂无订单</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import api from '@/api'
import { showToast } from 'vant'

const searchValue = ref('')

// 响应式数据
const activeTab = ref(0)
const showActionMenu = ref(false)
const orders = ref([
  {
    id: 1,
    storeName: '天猫 得力官方旗舰店',
    status: '交易成功',
    productName: '得力纳米胶双面胶高粘度防粘防尘始发地水电费水电费',
    spec: '[基础款长1米] 粘厚1mm宽24mm(1卷装)',
    num: 1,
    price: 4.89,
  },
  {
    id: 2,
    storeName: '天猫 得力官方旗舰店',
    status: '交易成功',
    productName: '得力纳米胶双面胶高粘度防粘防尘始发地水电费水电费',
    spec: '[基础款长1米] 粘厚1mm宽24mm(1卷装)',
    num: 2,
    price: 4.89,
  },
])

const tabs = reactive([
  { name: '全部', value: 0 },
  { name: '待付款', value: 1 },
  { name: '待发货', value: 2 },
  { name: '已发货', value: 3 },
  { name: '退款', value: 4 },
])

const onSearch = () => {}
const onCancel = () => {}

const usePopover = () => {
  const showPopover = ref(false)
  const actions = [
    { text: '取消订单', value: 'cancel' },
    { text: '删除订单', value: 'delete' },
  ]
  const onSelect = () => {}
  return {
    showPopover,
    actions,
    onSelect,
  }
}
const { showPopover, actions, onSelect } = usePopover()

// 方法
const handleBuyAgain = (orderId) => {
  router.push({ name: 'commodity-detail', query: { id: orderId } })
}

const handleAddToCart = (orderId) => {}
const router = useRouter()
const goDetail = (id: number) => {
  router.push({ path: '/order/detail', query: { id } })
}

const init = () => {
  handleGetList()
}

const handleGetList = () => {
  api.shop.orderList.post().then((res) => {
    orders.value = res.data.map((item) => ({
      id: item.id,
      ...item,
    }))
    console.warn('----- my data is res: ', res)
  })
}

init()
</script>

<style scoped lang="scss">
.order-page {
  min-height: 100vh;
  :deep(.van-tabs) {
    &.van-tabs--line .van-tabs__wrap {
      height: 0.3rem;
    }
  }
  .order-card {
    & + .order-card {
      margin-top: 0.12rem;
    }
  }
  .product-name {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-color-light);
  }

  .empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
  }
}
.order-page__popover {
  :deep(.van-popover__content) {
    .van-popover__action {
      width: 0.8rem;
      height: 0.3rem;
      line-height: 0.3rem;
    }
    .van-popover__action-text {
      font-size: 0.12rem;
    }
  }
}
</style>