shuhi-ui/src/views/recycleOrder/detail/order-status.vue

<template>
    <el-steps
      style="width: 100%"
      :active="active"
      align-center
      finish-status="success"
    >
      <el-step v-for="item in stepList" :title="item.label">
        <template #description>
          <div>{{ item.time }}</div>
          <div>{{ item.createdBy }}</div>
        </template>
      </el-step>
    </el-steps>
</template>

<script setup>
  import { ref, reactive } from 'vue';
  const active = ref(6);
  const stepList = reactive([
    { label: '创建', time: '2024-06-05 15:00:00', createdBy: '微信用户' },
    { label: '下单', time: '2024-06-05 15:00:00', createdBy: '微信用户' },
    { label: '初审', time: '2024-06-05 15:00:00', createdBy: 'system' },
    { label: '快递取书', time: '2024-06-05 15:00:00', createdBy: 'system' },
    { label: '快递签收', time: '2024-06-05 15:00:00', createdBy: 'system' },
    { label: '仓库收货', time: '2024-06-05 15:00:00', createdBy: '喷喷喷' },
    { label: '到货审核', time: '', createdBy: '' },
    { label: '支付书款（完成）', time: '', createdBy: '' }
  ]);
</script>