【陪诊系统-H5客户端】订单状态进度条

似乎~客户端相对来说，要简单一点，就挑几个其中感兴趣的记录一下

订单状态进度条是根据当前订单的状态动态改变，这里的动态改变实际上是利用后端返回的状态数据，给标签添加不同的class属性来实现。进度条样式其实是两个圆角矩形框，里面是绿色，用不同的class控制其宽度，外部是白色圆角矩形框。也能直接用vant组件库里的

:class=" $`od-jd-${item}`$ 中的item是父组件传递的参数，订单状态编码，在父组件中给每个状态对应了一个编码 ，分别是0,10,20,30,40

javascript 复制代码

const stateMap = {
	//服务器端返回的状态信息是文字，用数值去暂替
    '待支付':10,
    '待服务':20,
    '已完成':30,
    '已取消':40,
}

在进度条组件中，根据状态码展示进度条不同长度

javascript 复制代码

<template>
  <!-- 经过数据 动态添加class 控制进度条显示 通过父子组件的通信 传入props-->
    <div class="od-banner">
      <img class="od-banner-icon" src="/images/od_bg_icon.png" mode="widthFix" />
      <div class="od-jd" :class="[`od-jd-${item}`]">
        <div class="od-jd-out">
          <div class="od-jd-in"></div>
        </div>
        <div class="vp-flex od-jd-text">
          <div class="vp-flex_1">
            <text class="od-jd-st-0">填写订单</text>
          </div>
          <div class="vp-flex_1">
            <text class="od-jd-st-10">在线支付</text>
          </div>
          <div class="vp-flex_1">
            <text class="od-jd-st-20">专人服务</text>
          </div>
          <div class="vp-flex_1">
            <text class="od-jd-st-30">服务完成</text>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive, getCurrentInstance, onMounted } from "vue";
  const { proxy } = getCurrentInstance();
  const { item } = defineProps(["item"]);
  </script>


<style>
...
.od-jd {
    margin: 30px 20px;
  }
  .od-jd-out {
    background: #ffffff;
    border: 2.5px solid #ffffff;
    height: 10px;
    line-height: 10px;
    border-radius: 25px;
    overflow: hidden;
    position: relative;
  }
  .od-jd-in {
    height: 10px;
    line-height: 10px;
    border-radius: 25px;
    overflow: hidden;
    width: 0%;
    background-size: 100%;
  }
 .od-jd-0 .od-jd-in {
    width: 12%;
  }
  .od-jd-0 .od-jd-st-0 {
    opacity: 1;
    font-weight: bold;
  }
  .od-jd-10 .od-jd-in {
    width: 37%;
  }
  .od-jd-10 .od-jd-st-10 {
    opacity: 1;
    font-weight: bold;
  }
  .od-jd-20 .od-jd-in {
    width: 64%;
  }
  .od-jd-20 .od-jd-st-20 {
    opacity: 1;
    font-weight: bold;
  }
  .od-jd-30 .od-jd-in {
    width: 100%;
  }
  .od-jd-30 .od-jd-st-30 {
    opacity: 1;
    font-weight: bold;
  }
  .od-jd-40 .od-jd-in {
    width: 100%;
    background: #999999;
  }
</style>

that's all