Zlpt_Portal/src/views/user/orderManagement/detail.vue

<script setup lang="ts">
import { ref } from 'vue'
import PagingComponent from 'components/PagingComponent/index.vue'
import { useRouter } from 'vue-router'
import { getOrderListApi } from 'http/api/usercenter/seekorder'
const route = useRoute()

const cardList = ref<any>([])
const orderStatusTemp = ref<Number>(0)
const titleStaus = ref<any>('')
// 获取数据列表
// const getList = async () => {
//     const res: any = await getOrderListApi()
//     console.log('获取数据列表***', res)
//     tableData.value = res.rows
//     total.value = res.total
// }
// onMounted(() => {
//     getList()
// })

  // 根据步骤的 Id 返回对应的标题
const  getStepTitle = (stepId:number)=> {
        if (orderStatusTemp.value === 1) {
          titleStaus.value=  '待出库' ;
          return stepId === 1 ? '待出库' : '';
        } else if (orderStatusTemp.value === 2) {
          titleStaus.value=  '待收货' ;
          return stepId === 1 ? '已出库' : stepId === 2 ? '待收货' : '';
        } else if (orderStatusTemp.value === 3) {
          titleStaus.value=  '租赁中' ;
          return stepId === 1 ? '已出库' : stepId === 2 ? '已收货' : stepId === 3 ? '租赁中' : '';
        } else if (orderStatusTemp.value === 4) {
          titleStaus.value=  '发起费用结算' ;
          return stepId === 1 ? '已出库' : stepId === 2 ? '已收货' : stepId === 3 ? '租赁结束' : stepId === 4 ? '发起费用结算' : '';
        } else if (orderStatusTemp.value === 5) {
          titleStaus.value= '已完成' ;
          return stepId === 1 ? '已出库' : stepId === 2 ? '已收货' : stepId === 3 ? '租赁结束' : stepId === 4 ? '已退租' : stepId === 5 ? '已完成' : '';
        }
        titleStaus.value=''
        return ''; // 默认返回空字符串
      }

const getId = ()=>{
    orderStatusTemp.value = Number(route.query.orderStatusTemp)
}

onBeforeMount(()=>{
   getId()
})




const time = ref([])
</script>

<template>
    <!-- 订单管理 -->
    <div class="container">
      <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/myuser/orderManagement' }">订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单明细</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="section">
        <el-header>
          <el-row type="flex" justify="space-between" align="middle">
          <el-col :span="3">
            <span>订单流程</span>
          </el-col>
          <el-col :span="2" style="text-align:right;margin-right:20px;font-size: 20px;">
            <div style="color:green;">{{titleStaus}}</div>
          </el-col>
          </el-row>
        </el-header> 

         <el-steps class="step" :space="400" :active="orderStatusTemp.value" finish-status="success">
            <el-step :title="getStepTitle(1)" ></el-step>
            <el-step :title="getStepTitle(2)" ></el-step>
            <el-step :title="getStepTitle(3)" ></el-step>
            <el-step :title="getStepTitle(4)" ></el-step>
            <el-step :title="getStepTitle(5)" :finish-status="orderStatusTemp.value >= 5 ? 'success' : ''"></el-step>
        </el-steps>
      </div>
    </div>
</template>

<style lang="scss" scoped>
.step{
    margin-left:80px;;
}
.section {
    margin-top: 20px;
    margin-bottom: 20px;
}
.container {
    width: 800px;
    margin: 0 auto;
    padding: 10px;
    background: #eeeff6;
    font-size: 14px;

    .cart-title {
        margin-top: 10px;
        padding: 10px 0;
        display: flex;
        align-items: center;
        font-size: 14px;
        font-weight: bold;
        letter-spacing: 1px;
    }

    .cart-title div:first-child {
        width: 5px;
        height: 20px;
        background-color: #4fabfe;
    }

    .cart-th {
        margin: 15px 0;
        div {
            text-align: center;
        }
    }

    .cart-tbody {
        background: #fff;
        padding: 8px 12px;
        margin: 10px;

        .cart-user-info {
            display: flex;
            align-items: center;
            font-size: 13px;

            .code,
            .orderTime {
                padding: 3px 18px;
                border: 1px solid #ccc;
            }

            .czcompanyName {
                margin-left: 20px;
                border-right: none;
            }
        }

        .cart-list {
            margin: 15px 0;
            display: flex;
            align-items: center;
            font-size: 13px;
            div {
                text-align: center;
            }

            .goods-info {
                display: flex;
                align-content: center;

                img {
                    width: 140px;
                    height: 80px;
                }

                .goods-code {
                    margin-left: 70px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;

                    div {
                        text-align: left;
                    }
                }
            }

            .lease-date {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                font-size: 12px;
            }

            .red-font {
                color: #ff4800;
                font-weight: bold;
            }
        }
    }

    .protocol-handle {
        background: #fff;
        padding: 8px 12px;
        margin: 10px;
        font-size: 13px;

        .checkbox-container a {
            color: #ff4800;
            text-decoration: underline;
        }
    }
}
</style>