MProjectsNDays之3：Progress Steps解锁物流跟踪效果新玩法

前端

2023-09-22 07:19:31

物流跟踪：提升电子商务体验的关键

什么是物流跟踪？

在飞速发展的电子商务时代，物流跟踪已经成为一项不可或缺的工具，它赋予消费者实时追踪包裹运输状态的能力，从而显著提升购物体验。物流跟踪系统通常配备直观界面，允许用户输入订单号或包裹编号，从而获取包裹当前位置、预计送达时间等相关信息。

Progress Steps组件简介

Progress Steps组件是一个前端库，专为创建直观且用户友好的进度条和步骤指示器而设计。它提供丰富的样式和功能，便于集成到任何前端项目中。在本文中，我们将利用Progress Steps组件打造物流跟踪界面进度条。

实现物流跟踪效果

要实现物流跟踪效果，需要遵循以下步骤：

搭建基本结构 ：首先，构建一个基本HTML结构，包括包裹列表和Progress Steps组件。
设置CSS样式 ：然后，为包裹列表和Progress Steps组件设置CSS样式，以呈现美观的外观。
添加JavaScript逻辑 ：最后，添加JavaScript逻辑，使Progress Steps组件能够根据包裹运输状态显示不同步骤。

详细教程

搭建基本结构

<div class="package-list">
  <div class="package">
    <div class="package-info">
      <p>订单号：1234567890</p>
      <p>包裹编号：ABCDEFGHIJ</p>
      <p>收件人：张三</p>
      <p>收件地址：北京市朝阳区某某小区123号</p>
    </div>
    <div class="progress-steps"></div>
  </div>
  <!-- 其他包裹信息 -->
</div>

设置CSS样式

.package-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.package {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  background-color: #f5f5f5;
}

.package-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.progress-steps {
  display: flex;
  flex-direction: row;
  gap: 20px;
}

添加JavaScript逻辑

// 获取Progress Steps组件
const progressSteps = document.querySelector('.progress-steps');

// 获取包裹信息列表
const packages = document.querySelectorAll('.package');

// 遍历包裹信息列表
packages.forEach((package) => {
  // 获取包裹的运送状态
  const status = package.querySelector('.status').textContent;

  // 根据运送状态设置Progress Steps组件的步骤
  switch (status) {
    case '已发货':
      progressSteps.innerHTML = `
        <div class="step active">已发货</div>
        <div class="step">运输中</div>
        <div class="step">已送达</div>
      `;
      break;
    case '运输中':
      progressSteps.innerHTML = `
        <div class="step active">已发货</div>
        <div class="step active">运输中</div>
        <div class="step">已送达</div>
      `;
      break;
    case '已送达':
      progressSteps.innerHTML = `
        <div class="step active">已发货</div>
        <div class="step active">运输中</div>
        <div class="step active">已送达</div>
      `;
      break;
  }
});