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 stepList = reactive([
    { label: '创建', time: '2024-06-05 15:00:00', createdBy: '微信用户', stutus: 0 },
    { label: '下单', time: '2024-06-05 15:00:00', createdBy: '微信用户', stutus: 2 },
    { label: '初审', time: '2024-06-05 15:00:00', createdBy: 'system', stutus: 3 },
    { label: '快递取书', time: '2024-06-05 15:00:00', createdBy: 'system', stutus: 5 },
    { label: '快递签收', time: '2024-06-05 15:00:00', createdBy: 'system', stutus: 6 },
    { label: '仓库收货', time: '2024-06-05 15:00:00', createdBy: '喷喷喷', stutus: 8 },
    { label: '到货审核', time: '', createdBy: '', stutus: 9 },
    { label: '支付书款（完成）', time: '', createdBy: '', stutus: 11 }
]);

const props = defineProps({
    status: {
        type: Number,
        default: 0
    }
});

const active = computed(() => {
    return stepList.findIndex(item => item.stutus == props.status) || 0;
});

</script>