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

相关推荐
mapbar_front15 分钟前
react项目开发—关于代码架构/规范探讨
前端·react.js
二木一夕21 分钟前
Vue 3 的组合式 API和传统选项式 API区别(vue2转vue3,两者差异)
前端
LuckySusu23 分钟前
【vue篇】Vue 项目中的静态资源管理:assets vs static 终极指南
前端·vue.js
LuckySusu24 分钟前
【vue篇】Vue.delete vs delete:数组删除的“陷阱”与正确姿势
前端·vue.js
LuckySusu25 分钟前
【vue篇】Vue 模板编译原理:从 Template 到 DOM 的翻译官
前端·vue.js
小菜摸鱼28 分钟前
Node.js + vue3 大文件-切片上传全流程(视频文件)
前端·node.js
LuckySusu31 分钟前
【vue篇】Vue 2 响应式“盲区”破解:如何监听对象/数组属性变化
前端·vue.js
LuckySusu31 分钟前
【vue篇】Vue Mixin:可复用功能的“乐高积木”
前端·vue.js
勤奋菲菲36 分钟前
Vue3+Three.js:requestAnimationFrame的详细介绍
开发语言·javascript·three.js·前端可视化
洋不写bug43 分钟前
前端环境搭建,保姆式教学
前端