订单追踪页面实现：Vue3、ECharts、WangEditor、VCalendar、Vue3 Baidu Map GL

应用场景

该代码用于实现一个订单追踪页面，展示订单信息、物流状态和详细订单状态。它适用于电子商务网站，允许用户实时跟踪他们的订单。

基本功能

• **展示订单信息：**包括订单中的商品信息、价格和数量。
• **物流状态：**以时间线形式显示订单的物流状态，包括下单、发货和送达时间。
• **详细订单状态：**提供更多关于订单状态的详细信息，例如预期的送达日期和追踪 ID。

功能实现步骤及关键代码分析

1. 数据绑定

首先，我们需要定义一个数据对象来存储订单信息、物流状态和详细订单状态。

const data = {
  orderInfo: {
    items: [
      {
        img: "https://source.unsplash.com/random/100x100",
        name: "Brown Suite",
        size: "XL",
        qty: 10,
        price: 120,
      },
    ],
  },
  orderDetails: {
    expectedDeliveryDate: "03 Sep 2023",
    trackingId: "TRK452126542",
  },
  orderStatus: [
    {
      icon: "success",
      text: "Order Placed",
      time: "23 Aug 2023, 04:25 PM",
    },
    {
      icon: "success",
      text: "In Progress",
      time: "23 Aug 2023, 03:54 PM",
    },
    {
      icon: "success",
      text: "Shipped",
      time: "Expected 02 Sep 2023",
    },
    {
      icon: "success",
      text: "Delivered",
      time: "23 Aug 2023, 2023",
    },
  ],
};

2. 订单信息展示

订单信息使用 Vue.js 的 v-for 指令来动态渲染订单中的商品信息。

<div class="order-item" v-for="item in data.orderInfo.items" :key="item.name">
  <div class="order-item-img">
    <img :src="item.img" alt="" />
  </div>
  <div class="order-item-info">
    <div class="order-item-name">{{ item.name }}</div>
    <div class="order-item-size">Size: {{ item.size }} | Qty: {{ item.qty }}</div>
    <div class="order-item-price">${{ item.price }}</div>
  </div>
</div>

3. 物流状态展示

物流状态使用 Vue.js 的 v-for 指令来动态渲染时间线上的状态。

<div class="order-status-item" v-for="status in data.orderStatus" :key="status.text">
  <div class="order-status-item-icon">
    <van-icon :name="status.icon" />
  </div>
  <div class="order-status-item-text">{{ status.text }}</div>
  <div class="order-status-item-time">{{ status.time }}</div>
</div>

4. 详细订单状态展示

详细订单状态使用 Vue.js 的 v-for 指令来动态渲染订单状态的详细信息。

<div class="order-details-item" v-for="detail in data.orderDetails" :key="detail.label">
  <div class="order-details-item-label">{{ detail.label }}</div>
  <div class="order-details-item-value">{{ detail.value }}</div>
</div>

总结与展望

开发这段代码的过程让我熟悉了 Vue.js、ECharts、WangEditor、VCalendar 和 Vue3 Baidu Map GL 等库的使用。这些库提供了强大的功能，使我们能够轻松创建交互式和信息丰富的用户界面。

未来，该卡片功能可以进一步扩展和优化，例如：

• 添加地图组件以显示订单的送货路线。
• 集成实时订单跟踪，以便用户可以实时查看订单的当前位置。
• 提供多种语言支持，以使页面对全球用户可用。