【陪诊系统-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

相关推荐
excel21 小时前
ES6 中函数的双重调用方式:fn() 与 fn\...``
前端
可乐爱宅着21 小时前
全栈框架next.js入手指南
前端·next.js
你的人类朋友1 天前
什么是API签名?
前端·后端·安全
会豪1 天前
Electron-Vite (一)快速构建桌面应用
前端
中微子1 天前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)
前端
唐某人丶1 天前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”
前端·人工智能·aigc
中微子1 天前
深入剖析 useState产生的 setState的完整执行流程
前端
遂心_1 天前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
小徐_23331 天前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
RoyLin1 天前
TypeScript设计模式:适配器模式
前端·后端·node.js