haha/haha-mp/src/pages/orders/orders.vue

<template>
  <view class="container">
    <view class="title">我的订单</view>
    <view class="order-tabs">
      <view class="tab-item active">全部</view>
      <view class="tab-item">待支付</view>
      <view class="tab-item">已完成</view>
      <view class="tab-item">退款/售后</view>
    </view>
    <view class="order-list">
      <view class="order-item">
        <view class="order-header">
          <view class="order-time">2026-01-23 10:30:00</view>
          <view class="order-status">已完成</view>
        </view>
        <view class="order-products">
          <view class="product-item">
            <view class="product-name">可口可乐</view>
            <view class="product-price">¥3.50</view>
            <view class="product-quantity">×2</view>
          </view>
        </view>
        <view class="order-footer">
          <view class="order-total">共2件商品 合计：¥7.00</view>
          <button class="order-button">查看详情</button>
        </view>
      </view>
      <view class="order-item">
        <view class="order-header">
          <view class="order-time">2026-01-23 09:15:00</view>
          <view class="order-status">待支付</view>
        </view>
        <view class="order-products">
          <view class="product-item">
            <view class="product-name">雪碧</view>
            <view class="product-price">¥3.50</view>
            <view class="product-quantity">×1</view>
          </view>
        </view>
        <view class="order-footer">
          <view class="order-total">共1件商品 合计：¥3.50</view>
          <button class="order-button">立即支付</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { mockApi } from '../../utils/mock';

const orders = ref<any[]>([]);

onMounted(async () => {
  const response = await mockApi.getOrders();
  if (response.success) {
    orders.value = response.data;
  }
});
</script>

<style>
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  padding: 30rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
}

.order-tabs {
  display: flex;
  background-color: #fff;
  margin: 20rpx 0;
  padding: 0 30rpx;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 20rpx 0;
  font-size: 28rpx;
  color: #666;
  position: relative;
}

.tab-item.active {
  color: #FFD700;
  font-weight: bold;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 25%;
  width: 50%;
  height: 4rpx;
  background-color: #FFD700;
}

.order-list {
  padding: 0 30rpx 30rpx;
}

.order-item {
  background-color: #fff;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
}

.order-header {
  display: flex;
  justify-content: space-between;
  padding: 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.order-time {
  font-size: 24rpx;
  color: #999;
}

.order-status {
  font-size: 24rpx;
  color: #FF6B6B;
}

.order-products {
  padding: 20rpx;
}

.product-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10rpx 0;
}

.product-name {
  font-size: 28rpx;
  color: #333;
  flex: 1;
}

.product-price {
  font-size: 28rpx;
  color: #333;
  margin: 0 20rpx;
}

.product-quantity {
  font-size: 28rpx;
  color: #666;
}

.order-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  border-top: 1rpx solid #f0f0f0;
  background-color: #f9f9f9;
}

.order-total {
  font-size: 28rpx;
  color: #333;
}

.order-button {
  background-color: #FFD700;
  color: #333;
  border: none;
  padding: 10rpx 30rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
}
</style>