WechatApp/pages/orderInfo/index.vue

<template>
  <!-- 订单列表 -->
  <view class="content">
    <!-- 搜索栏 -->
    <view class="search-container">
      <view class="search-box">
        <image :src="getFileUrl('img/personal/search.png')" mode="widthFix" class="search-icon"></image>
        <input type="text" placeholder="搜索" class="search-input" v-model="searchKeyword" />
      </view>
    </view>

    <!-- 标签页 -->
    <view class="tabs">
      <view class="tab-item" :class="{ active: activeTab === 'current' }" @click="switchTab('current')">
        当前订单
      </view>
      <view class="tab-item" :class="{ active: activeTab === 'history' }" @click="switchTab('history')">
        历史订单
      </view>
    </view>

    <!-- 订单列表 -->
    <scroll-view class="order-list" scroll-y>
      <view v-for="(order, index) in currentOrderList" :key="order.id || index" class="order-card">
        <!-- 订单头部 -->
        <view class="order-header">
          <view class="order-number">NO.{{ order.orderNo }}</view>

        </view>

        <!-- 店铺信息 -->
        <view class="store-info" @click="handleStoreClick(order)">
          <view><text class="store-name">{{ order.storeName }}</text>
            <text class="store-arrow">›</text>
          </view>
          <view class="order-status" :class="order.statusClass">{{ order.statusText }}</view>
        </view>

        <!-- 订单时间 -->
        <view class="order-time">{{ order.createTime }}</view>

        <!-- 商品信息 -->
        <view class="order-goods" @click="handleOrderDetail(order)">
          <view class="goods-images">
            <image v-for="(image, imgIndex) in order.goodsImages" :key="imgIndex" :src="getFileUrl(image)"
              mode="aspectFill" class="goods-image" />
          </view>
          <view class="goods-info">
            <view class="goods-price">¥{{ order.totalPrice }}</view>
            <view class="goods-count">共{{ order.goodsCount }}件</view>
          </view>
        </view>

        <!-- 操作按钮 -->
        <view class="order-actions">
          <view class="action-btn outline" @click="handleAddFood(order)">
            去加餐
          </view>
          <view class="action-btn primary" @click="handleCheckout(order)">
            去结算
          </view>
        </view>
      </view>

      <!-- 空状态 -->
      <view v-if="currentOrderList.length === 0" class="empty-state">
        <text class="empty-text">暂无订单</text>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { onLoad } from "@dcloudio/uni-app";
import { ref, computed } from "vue";
import { getFileUrl } from "@/utils/file.js";
import { go } from "@/utils/utils.js";

const activeTab = ref('current');
const searchKeyword = ref('');

// 示例订单数据
const currentOrders = ref([
  {
    id: 1,
    orderNo: '1929065620709298441',
    storeName: '正旗手选海鲜烧烤(东港店)',
    createTime: '2025-06-01 14:40:58',
    totalPrice: 19.9,
    goodsCount: 2,
    statusText: '进行中',
    statusClass: 'status-active',
    goodsImages: ['/static/demo.png', '/static/demo.png']
  }
]);

const historyOrders = ref([]);

// 当前显示的订单列表
const currentOrderList = computed(() => {
  const orders = activeTab.value === 'current' ? currentOrders.value : historyOrders.value;
  if (!searchKeyword.value) {
    return orders;
  }
  return orders.filter(order =>
    order.orderNo.includes(searchKeyword.value) ||
    order.storeName.includes(searchKeyword.value)
  );
});

// 处理订单详情
const handleOrderDetail = (order) => {
  console.log('订单详情');
  go('/pages/orderInfo/orderDetail');
};

// 切换标签页
const switchTab = (tab) => {
  activeTab.value = tab;
};

// 处理店铺点击
const handleStoreClick = (order) => {
  console.log('点击店铺:', order);
  // TODO: 跳转到店铺详情
};

// 处理加餐
const handleAddFood = (order) => {
  console.log('去加餐:', order);
  // TODO: 跳转到点餐页面
  go('/pages/orderFood/index');
};

// 处理结算
const handleCheckout = (order) => {
  console.log('去结算:', order);
  // TODO: 跳转到结算页面
  go('/pages/placeOrder/index');
};

onLoad((e) => {
  uni.setNavigationBarTitle({
    title: '我的订单'
  });
});
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f7f9fa;
  box-sizing: border-box;
}

// 搜索栏
.search-container {
  width: 100%;
  padding: 20rpx 30rpx;
  background-color: #fff;
  box-sizing: border-box;

  .search-box {
    width: 100%;
    height: 80rpx;
    background-color: #f5f5f5;
    border-radius: 40rpx;
    display: flex;
    align-items: center;
    padding: 0 30rpx;
    box-sizing: border-box;

    .search-icon {
      width: 34rpx;
      height: 34rpx;
      margin-right: 16rpx;
    }

    .search-input {
      flex: 1;
      font-size: 28rpx;
      color: #333;
      background: transparent;
      border: none;
    }
  }
}

// 标签页
.tabs {
  display: flex;
  background-color: #fff;
  border-bottom: 1rpx solid #f0f0f0;
  padding: 0 30rpx;

  .tab-item {
    flex: 1;
    height: 88rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 27rpx;
    color: #AAAAAA;
    font-weight: bold;
    position: relative;
    transition: color 0.3s;

    &.active {
      font-size: 27rpx;
      color: #151515;
      font-weight: bold;

      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 40rpx;
        height: 8rpx;
        background-color: #FF6B35;
        border-radius: 5rpx;
      }
    }
  }
}

// 订单列表
.order-list {
  flex: 1;
  padding: 20rpx 30rpx;
  box-sizing: border-box;
}

// 订单卡片
.order-card {
  width: 100%;
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0rpx 0rpx 11rpx 0rpx rgba(0, 0, 0, 0.06);
  box-sizing: border-box;

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

    .order-number {
      font-size: 28rpx;
      color: #151515;
      font-weight: 500;
    }
  }

  // 店铺信息
  .store-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12rpx;


    .order-status {
      font-size: 28rpx;
      font-weight: 500;

      &.status-active {
        font-size: 23rpx;
        color: #008844;
      }

      &.status-completed {
        color: #999;
      }

      &.status-cancelled {
        color: #FF3B30;
      }
    }

    .store-name {
      font-size: 27rpx;
      color: #151515;
      font-weight: bold;
    }

    .store-arrow {
      font-size: 36rpx;
      color: #999;
      margin-left: 10rpx;
    }
  }

  // 订单时间
  .order-time {
    font-size: 23rpx;
    color: #AAAAAA;
    margin-bottom: 20rpx;
  }

  // 商品信息
  .order-goods {
    display: flex;
    align-items: center;
    margin-bottom: 30rpx;

    .goods-images {
      display: flex;
      gap: 12rpx;
      margin-right: 20rpx;

      .goods-image {
        width: 100rpx;
        height: 100rpx;
        border-radius: 8rpx;
        background-color: #f5f5f5;
      }
    }

    .goods-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: flex-end;

      .goods-price {
        font-weight: bold;
        font-size: 27rpx;
        color: #151515;
        margin-bottom: 8rpx;
      }

      .goods-count {
        font-size: 23rpx;
        color: #666666;
      }
    }
  }

  // 操作按钮
  .order-actions {
    display: flex;
    gap: 20rpx;
    padding-top: 20rpx;
    border-top: 1rpx solid #f0f0f0;
    justify-content: flex-end;

    .action-btn {
      height: 68rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 34rpx;
      font-size: 28rpx;
      font-weight: 500;
      transition: all 0.3s;


      &.outline {
        border: 2rpx solid #FF6B35;
        color: #FF6B35;
        background-color: transparent;
        text-align: center;
        width: 172rpx;
        height: 73rpx;
        box-shadow: 0rpx -11rpx 46rpx 0rpx rgba(86, 125, 244, 0.05);
        border-radius: 19rpx 19rpx 19rpx 19rpx;
        border: 2rpx solid #F47D1F;

        &:active {
          background-color: #fff4e6;
        }
      }

      &.primary {
        background: linear-gradient(135deg, #FF6B35 0%, #FF8C42 100%);
        color: #fff;
        width: 172rpx;
        height: 73rpx;
        background: linear-gradient(0deg, #FCB73F 0%, #FC733D 100%);
        box-shadow: 0rpx -11rpx 46rpx 0rpx rgba(86, 125, 244, 0.05);
        border-radius: 19rpx 19rpx 19rpx 19rpx;

        &:active {
          opacity: 0.8;
        }
      }
    }
  }
}

// 空状态
.empty-state {
  width: 100%;
  padding: 100rpx 0;
  display: flex;
  justify-content: center;
  align-items: center;

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