似乎~客户端相对来说,要简单一点,就挑几个其中感兴趣的记录一下
订单状态进度条是根据当前订单的状态动态改变,这里的动态改变实际上是利用后端返回的状态数据,给标签添加不同的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