十三、实战开发 uni-app x 项目（仿京东）- 我的订单（包含待付款、待发货、待收货、待评价）

不再讲如何添加新页面了，如不会，可以看

添加新页面order.uvue文件，我们先逐行讲解代码，最后附上整个代码

页面功能

选项卡切换: 提供“全部”、“待付款”、“待发货”、“待收货”、“待评价”选项卡，点击切换显示对应状态的订单列表。
订单列表展示: 根据选中的选项卡，展示对应状态的订单列表。
订单操作: 根据订单状态，提供不同的操作按钮，例如：
- 待付款: 取消订单、立即付款
- 待发货: 取消订单
- 待收货: 确认收货
- 待评价: 评价商品

1. `<template>` 部分

<template>
  <view class="order">
    <!-- 选项卡 -->
    <view class="order-tabs">
      <view
        class="tab-item"
        v-for="(item, index) in tabs"
        :key="index"
        :class="{ active: activeTab === index }"
        @click="switchTab(index)"
      >
        <text>{
  
  { item }}</text>
      </view>
    </view>

<view class="order">: 订单页面的容器。
<view class="order-tabs">: 选项卡的容器，使用 Flex 布局。
<view class="tab-item">: 每个选项卡项，v-for 遍历 tabs 数组，:class 动态绑定 active 类名，当 activeTab === index 时为当前选中项，@click 事件触发 switchTab 方法。
<text>: 选项卡文本。

    <!-- 订单列表 -->
    <view class="order-list">
      <view class="order-item" v-for="(item, index) in filteredOrderList" :key="index">
        <!-- 订单状态 -->
        <view class="order-status">
          <text>{
  
  { item.status }}</text>
        </view>

<view class="order-list">: 订单列表的容器。
<view class="order-item">: 每个订单项，v-for 遍历 filteredOrderList 数组。
<view class="order-status">: 订单状态的容器。
<text>: 订单状态文本。

        <!-- 商品信息 -->
        <view class="goods-list">
          <view class="goods-item" v-for="(goods, goodsIndex) in item.goodsList" :key="goodsIndex">
            <image class="goods-image" :src="goods.imageUrl" mode="aspectFill" />
            <view class="goods-info">
              <text class="goods-name">{
  
  { goods.name }}</text>
              <text class="goods-price">￥{
  
  { goods.price }}</text>
              <text class="goods-count">x{
  
  { goods.count }}</text>
            </view>
          </view>
        </view>

<view class="goods-list">: 商品列表的容器。
<view class="goods-item">: 每个商品项，v-for 遍历 item.goodsList 数组。
<image class="goods-image">: 商品图片，:src 绑定图片路径，mode="aspectFill" 图片按比例填充。
<view class="goods-info">: 商品信息的容器。
<text class="goods-name">: 商品名称。
<text class="goods-price">: 商品价格。
<text class="goods-count">: 商品数量。

        <!-- 订单金额 -->
        <view class="order-price">
          <text>订单金额:</text>
          <text class="price">￥{
  
  { item.totalPrice }}</text>
        </view>

<view class="order-price">: 订单金额的容器。
<text>: 订单金额标签。