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

<script setup lang="ts">
import { ref } from 'vue'
import PagingComponent from 'components/PagingComponent/index.vue'
import { useRouter } from 'vue-router'
import { getOrderListInfoApi } from 'http/api/usercenter/seekorder'
const route = useRoute()
/* 查询参数 */
const cardList = ref<any>({})
const orderStatusTemp = ref<number>(0)
const idTemp = ref<string>('')
const titleStaus = ref<any>('')

//描述信息
const  operationDetails = ref<any>({
            1: { title: '已出库', preOutboundUser: '', preOutboundTime: '' },
            2: { title: '已收货', takeOverUser: '', takeOverTime: '' },
            3: { title: '租赁结束', rentOverUser: '', rentOverTime: '' },
        })
// 获取数据列表
// const getList = async () => {
//     const res: any = await getOrderListApi()
//     console.log('获取数据列表***', res)
//     tableData.value = res.rows
//     total.value = res.total
// }

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

  // 根据步骤的 Id 返回对应的描述
  const  getDescription=(desId:number)=>{
    const operation = operationDetails.value[desId];
        if (operation.title=="已出库" && titleStaus.value!=  "待出库" ) {
            return `
                操作人：${operation.preOutboundUser==null ?  ' ': operation.preOutboundUser}
                操作时间：${operation.preOutboundTime==null ?  ' ': operation.preOutboundTime}
            `;
        }else if(operation.title=="已收货"  && titleStaus.value!=  "待收货" && titleStaus.value!=  "待出库"){
            return `
                操作人：${operation.takeOverUser==null ?  ' ': operation.takeOverUser}
                操作时间：${operation.takeOverTime==null ?  ' ': operation.takeOverTime}
            `;
        }else if(operation.title=="租赁结束"  && (titleStaus.value!=  "待收货" && titleStaus.value!=  "待出库" && titleStaus.value!=  "租赁中")){
            return `
                操作人：${operation.rentOverUser==null ?  ' ': operation.rentOverUser}
                操作时间：${operation.rentOverTime==null ?  ' ': operation.rentOverTime}
            `;
        }
        return ''; // 默认返回空描述
    }

// 计算是否过期
const isExpired=(goods:any)=> {
      // 获取当前日期并去掉时间部分
      const today = new Date();
      today.setHours(0, 0, 0, 0);

      // 将endtime转为Date对象
      const endTime = new Date(goods.endTime.replace(/-/g, "/"));

      // 判断endtime是否早于今天
      return endTime < today;
}


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

/** 查询列表 */
const getList = async () => {
    let params = {
        orderId: idTemp.value,
        flag:true
    }

     const res: any = await getOrderListInfoApi(params)
    cardList.value = res.data
    operationDetails.value[1].preOutboundUser = res.data.detailsList[0].preOutboundUser
    operationDetails.value[1].preOutboundTime = res.data.detailsList[0].preOutboundTime
    operationDetails.value[2].takeOverUser = res.data.detailsList[0].takeOverUser
    operationDetails.value[2].takeOverTime = res.data.detailsList[0].takeOverTime
    operationDetails.value[3].rentOverUser = res.data.detailsList[0].rentOverUser
    operationDetails.value[3].rentOverTime = res.data.detailsList[0].rentOverTime
}

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

onMounted(() => {
    getList()
})


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

<template>
    <!-- 订单管理 -->
    <div class="container">
      <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/my-user/orderManagementCz' }">订单管理</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:80px;font-size: 20px;">
            <div style="color:green;">{{titleStaus}}</div>
          </el-col>
          </el-row>
        </el-header> 

         <el-steps class="step" :space="600" :active="orderStatusTemp===7 ? 1 : orderStatusTemp-1" finish-status="success">
            <el-step :title="getStepTitle(1)" :description="getDescription(1)"></el-step>
            <el-step :title="getStepTitle(2)" :description="getDescription(2)"></el-step>
            <el-step :title="getStepTitle(3)" :description="getDescription(3)"></el-step>
            <el-step :title="getStepTitle(4)" ></el-step>
            <el-step :title="getStepTitle(5)" ></el-step>
        </el-steps>
      </div>

     <div class="section">
        <el-header style="height:30px">租赁信息
        </el-header>
      <div style="height: 80px;">
          <div
            class="info"
            style="margin-top: 5px; display: flex; flex-wrap: wrap;"
            
          >
            <div class="item" style="width: 30%;flex-shrink: 0;margin-bottom: 5px;font-size: 14px;margin-left: 40px;opacity: 0.7">
              <span>订单编号：{{cardList.code}}</span>
            </div>
            <div class="item" style="width: 30%;flex-shrink: 0;margin-bottom: 5px;font-size: 14px;opacity: 0.7">
              <span>下单时间：{{cardList.orderTime}}</span>
            </div>

            <div class="item" style="width: 30%;flex-shrink: 0;margin-bottom: 5px;font-size: 14px;opacity: 0.7">
              <span></span>
            </div>

            <div class="item" style="width: 30%;flex-shrink: 0;margin-bottom: 5px;font-size: 14px;margin-left: 40px;opacity: 0.7">
              <span>出租单位：{{cardList.czcompanyName}}</span>
            </div>

            <div class="item" style="width: 30%;flex-shrink: 0;margin-bottom: 5px;font-size: 14px;opacity: 0.7">
              <span>出租人：{{cardList.person}}</span>
            </div>

            <div class="item" style="width: 30%;flex-shrink: 0;margin-bottom: 5px;font-size: 14px;opacity: 0.7">
              <span>出租人电话：{{cardList.personPhone}}</span>
            </div>

            <div class="item" style="width: 30%;flex-shrink: 0;margin-bottom: 5px;font-size: 14px;margin-left: 40px;opacity: 0.7">
              <span>承租单位：{{cardList.companyName}}</span>
            </div>

            <div class="item" style="width: 30%;flex-shrink: 0;margin-bottom: 5px;font-size: 14px;opacity: 0.7">
              <span>承租人：{{cardList.nickName}}</span>
            </div>
            
            <div class="item" style="width: 30%;flex-shrink: 0;margin-bottom: 5px;font-size: 14px;opacity: 0.7">
              <span>承租人电话：{{cardList.phoneNumber}}</span>
            </div>

            <div class="item" style="width: 30%;flex-shrink: 0;margin-bottom: 5px;font-size: 14px;margin-left: 40px;opacity: 0.7">
              <span>租赁协议：</span>
            </div>
          </div>
        </div>

           <el-row class="cart-listAll" :style="{background: cardList.orderStatus=='6' ? '#EBEEF5':'white'}">
                <el-col :span="1" >
                    <!-- <div style="text-align: center">
                        <el-checkbox :key="numberTemp" v-model="goods.isChecked" @change="onChangeGoods(index)" :disabled="goods.orderStatus!='2'">
                        </el-checkbox>
                    </div> -->
                </el-col>
                <el-col :span="7" >
                    <el-row class="cart-list" v-for="(goods, j) in cardList.detailsList" :key="j" >
                        <el-col class="goods-info">
                    <el-col :span="7">
                        <img :src="goods.url" alt="" />
                    </el-col>
                    <div class="goods-code">
                        <div style="font-size: 10px; font-weight: bold">{{ goods.deviceName }}</div>
                        <div>租期：{{ goods.days }}{{ ' ' + '天' }}</div>
                        <div style="display:flex;justify-content:space-between;width:100%;">
                            <div style="flex:1;text-align:left;width:220px">租金：{{ goods.dayLeasePrice }}{{ ' ' + '元/天' }}</div>
                            <div style="flex:1;text-align:left;">数量：{{ goods.num }}{{ ' ' + '台' }}</div>
                        </div>
                    </div>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col :span="4">
                    <div style="font-size: 14px; font-weight: bold; margin-bottom: 10px">
                        总费用
                    </div>
                    <div class="red-font">{{cardList.cost}}</div>
                </el-col>
                <el-col :span="7">
                    <div style="font-size: 14px; font-weight: bold; margin-bottom: 10px">租期</div>
                    <div style="color: black; font-weight: bold">
                        {{ cardList.startTime  }}
                    </div>
                    <div style="margin-top:3px;margin-bottom:3px">{{ '至' }}</div>
                    <div style="color: black; font-weight: bold">{{ cardList.endTime }}</div>
                </el-col>
                <el-col :span="4" >
                    <div
                        v-if="cardList.orderStatus == '2'"
                        style="font-size: 14px; font-weight: bold; margin-bottom: 10px; color: blue"
                    >
                        {{ '待出库' }}
                    </div>
                    <div
                        v-if="cardList.orderStatus == '3'"
                        style="font-size: 14px; font-weight: bold; margin-bottom: 10px; color: #C76F60"
                    >
                        {{ '待收货' }}
                    </div>
                    <div
                        v-if="cardList.orderStatus == '4' && isExpired(cardList)"
                        style="font-size: 14px; font-weight: bold; margin-bottom: 10px; color: #008D06"
                    >
                        {{ '租赁中' }}
                        <span style="color: red">(已过期)</span>
                    </div>
                    <div
                        v-if="cardList.orderStatus == '4' && !isExpired(cardList)"
                        style="font-size: 14px; font-weight: bold; margin-bottom: 10px; color: #008D06"
                    >
                        {{ '租赁中' }}
                    </div>
                    <div
                        v-if="cardList.orderStatus == '5'"
                        style="font-size: 14px; font-weight: bold; margin-bottom: 10px; color: #5B33CC"
                    >
                        {{ '已退租' }}
                    </div>
                    <div
                        v-if="cardList.orderStatus == '6'"
                        style="font-size: 14px; font-weight: bold; margin-bottom: 10px; color: #C00017"
                    >
                        {{ '已完成' }}
                    </div>
                    <div
                        v-if="cardList.orderStatus == '7'"
                        style="font-size: 14px; font-weight: bold; margin-bottom: 10px; color: #797979"
                    >
                        {{ '已驳回' }}
                    </div>
                </el-col>
           </el-row> 

        </div>
    </div>
</template>

<style lang="scss" scoped>

.container {
    // width: 800px;
    margin: 0 auto;
    padding: 10px;
    // background: #eeeff6;
    font-size: 14px;
    .step{
        margin-left:80px;;
    }

    .section {
        margin-top: 20px;
        margin-bottom: 20px;
    }
   .cart-tbody {
        background: #fff;
        padding: 8px 12px;
        margin: 10px;
        border: 1px solid #ccc;
        border-radius: 20px;
        .cart-user-info {
            display: flex;
            align-items: center;
            font-size: 13px;

            .user-name,
            .user-phone {
                padding: 3px 18px;
                border: 1px solid #ccc;
            }

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

        .cart-list {
            margin: 15px 0;
            display: flex;
            align-items: center;
            
            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;
            }
        }
    }
   .cart-listAll{
            margin: 15px 0;
            display: flex;
            align-items: center;
            font-size: 13px;
            
            div {
                text-align: center;
            }
        .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: 180px;
                    height: 80px;
                }

                .goods-code {
                    margin-left: 110px;
                    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;
            }
        }
            .lease-date {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                font-size: 12px;
            }

            .red-font {
                color: #ff4800;
                font-weight: bold;
            }
        }
}
</style>