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

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

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

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

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

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

<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