2024-11-28 13:43:25 +08:00
|
|
|
|
<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>('')
|
2024-11-28 18:02:43 +08:00
|
|
|
|
|
|
|
|
|
|
//描述信息
|
2024-12-02 16:31:39 +08:00
|
|
|
|
const operationDetails = ref<any>({
|
|
|
|
|
|
1: { title: '已出库', preOutboundUser: '', preOutboundTime: '' },
|
|
|
|
|
|
2: { title: '已收货', takeOverUser: '', takeOverTime: '' },
|
|
|
|
|
|
3: { title: '租赁结束', rentOverUser: '', rentOverTime: '' },
|
|
|
|
|
|
})
|
2024-11-28 13:43:25 +08:00
|
|
|
|
// 获取数据列表
|
|
|
|
|
|
// const getList = async () => {
|
|
|
|
|
|
// const res: any = await getOrderListApi()
|
|
|
|
|
|
// console.log('获取数据列表***', res)
|
|
|
|
|
|
// tableData.value = res.rows
|
|
|
|
|
|
// total.value = res.total
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
2024-12-02 16:31:39 +08:00
|
|
|
|
// 根据步骤的 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 ? '已驳回' : ''
|
2024-11-28 18:02:43 +08:00
|
|
|
|
}
|
2024-12-02 16:31:39 +08:00
|
|
|
|
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 '' // 默认返回空描述
|
|
|
|
|
|
}
|
2024-11-28 18:02:43 +08:00
|
|
|
|
|
2024-12-01 12:52:50 +08:00
|
|
|
|
// 计算是否过期
|
2024-12-02 16:31:39 +08:00
|
|
|
|
const isExpired = (goods: any) => {
|
|
|
|
|
|
// 获取当前日期并去掉时间部分
|
|
|
|
|
|
const today = new Date()
|
|
|
|
|
|
today.setHours(0, 0, 0, 0)
|
2024-12-01 12:52:50 +08:00
|
|
|
|
|
2024-12-02 16:31:39 +08:00
|
|
|
|
// 将endtime转为Date对象
|
|
|
|
|
|
const endTime = new Date(goods.endTime.replace(/-/g, '/'))
|
2024-12-01 12:52:50 +08:00
|
|
|
|
|
2024-12-02 16:31:39 +08:00
|
|
|
|
// 判断endtime是否早于今天
|
|
|
|
|
|
return endTime < today
|
2024-12-01 12:52:50 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
2024-12-02 16:31:39 +08:00
|
|
|
|
const getId = () => {
|
2024-11-28 13:43:25 +08:00
|
|
|
|
orderStatusTemp.value = Number(route.query.orderStatusTemp)
|
|
|
|
|
|
idTemp.value = String(route.query.idTemp)
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/** 查询列表 */
|
|
|
|
|
|
const getList = async () => {
|
|
|
|
|
|
let params = {
|
2024-12-02 15:41:54 +08:00
|
|
|
|
orderId: idTemp.value,
|
2024-11-28 13:43:25 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
2024-12-02 16:31:39 +08:00
|
|
|
|
const res: any = await getOrderListInfoApi(params)
|
2024-11-28 13:43:25 +08:00
|
|
|
|
cardList.value = res.data
|
2024-11-28 18:02:43 +08:00
|
|
|
|
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
|
2024-11-28 13:43:25 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
2024-12-02 16:31:39 +08:00
|
|
|
|
onBeforeMount(() => {
|
|
|
|
|
|
getId()
|
2024-11-28 13:43:25 +08:00
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
|
getList()
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
const time = ref([])
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<template>
|
|
|
|
|
|
<!-- 订单管理 -->
|
|
|
|
|
|
<div class="container">
|
2024-12-02 16:31:39 +08:00
|
|
|
|
<el-breadcrumb separator="/">
|
|
|
|
|
|
<el-breadcrumb-item :to="{ name: '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>
|
2024-11-28 13:43:25 +08:00
|
|
|
|
|
2024-12-02 16:31:39 +08:00
|
|
|
|
<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>
|
2024-11-28 13:43:25 +08:00
|
|
|
|
|
2024-12-02 16:31:39 +08:00
|
|
|
|
<div
|
|
|
|
|
|
class="item"
|
|
|
|
|
|
style="
|
|
|
|
|
|
width: 30%;
|
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
|
margin-bottom: 5px;
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
opacity: 0.7;
|
|
|
|
|
|
"
|
|
|
|
|
|
>
|
|
|
|
|
|
<span></span>
|
|
|
|
|
|
</div>
|
2024-11-28 13:43:25 +08:00
|
|
|
|
|
2024-12-02 16:31:39 +08:00
|
|
|
|
<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>
|
2024-11-28 13:43:25 +08:00
|
|
|
|
|
2024-12-02 16:31:39 +08:00
|
|
|
|
<div
|
|
|
|
|
|
class="item"
|
|
|
|
|
|
style="
|
|
|
|
|
|
width: 30%;
|
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
|
margin-bottom: 5px;
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
opacity: 0.7;
|
|
|
|
|
|
"
|
|
|
|
|
|
>
|
|
|
|
|
|
<span>出租人：{{ cardList.person }}</span>
|
|
|
|
|
|
</div>
|
2024-11-28 13:43:25 +08:00
|
|
|
|
|
2024-12-02 16:31:39 +08:00
|
|
|
|
<div
|
|
|
|
|
|
class="item"
|
|
|
|
|
|
style="
|
|
|
|
|
|
width: 30%;
|
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
|
margin-bottom: 5px;
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
opacity: 0.7;
|
|
|
|
|
|
"
|
|
|
|
|
|
>
|
|
|
|
|
|
<span>出租人电话：{{ cardList.personPhone }}</span>
|
|
|
|
|
|
</div>
|
2024-11-28 13:43:25 +08:00
|
|
|
|
|
2024-12-02 16:31:39 +08:00
|
|
|
|
<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>
|
2024-11-28 13:43:25 +08:00
|
|
|
|
|
2024-12-02 16:31:39 +08:00
|
|
|
|
<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>
|
2024-11-28 13:43:25 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
|
2024-12-02 16:31:39 +08:00
|
|
|
|
<el-row
|
|
|
|
|
|
class="cart-listAll"
|
|
|
|
|
|
:style="{ background: cardList.orderStatus == '6' ? '#EBEEF5' : 'white' }"
|
|
|
|
|
|
>
|
|
|
|
|
|
<el-col :span="1">
|
2024-12-01 12:52:50 +08:00
|
|
|
|
<!-- <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>
|
2024-12-02 16:31:39 +08:00
|
|
|
|
<el-col :span="7">
|
|
|
|
|
|
<el-row class="cart-list" v-for="(goods, j) in cardList.detailsList" :key="j">
|
2024-12-01 12:52:50 +08:00
|
|
|
|
<el-col class="goods-info">
|
2024-12-02 16:31:39 +08:00
|
|
|
|
<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>
|
2024-12-01 12:52:50 +08:00
|
|
|
|
</el-col>
|
|
|
|
|
|
</el-row>
|
2024-11-28 13:43:25 +08:00
|
|
|
|
</el-col>
|
2024-12-01 13:17:34 +08:00
|
|
|
|
<el-col :span="4">
|
2024-11-28 13:43:25 +08:00
|
|
|
|
<div style="font-size: 14px; font-weight: bold; margin-bottom: 10px">
|
|
|
|
|
|
总费用
|
|
|
|
|
|
</div>
|
2024-12-02 16:31:39 +08:00
|
|
|
|
<div class="red-font">{{ cardList.cost }}</div>
|
2024-11-28 13:43:25 +08:00
|
|
|
|
</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">
|
2024-12-02 16:31:39 +08:00
|
|
|
|
{{ cardList.startTime }}
|
2024-11-28 13:43:25 +08:00
|
|
|
|
</div>
|
2024-12-02 16:31:39 +08:00
|
|
|
|
<div style="margin-top: 3px; margin-bottom: 3px">{{ '至' }}</div>
|
2024-12-01 12:52:50 +08:00
|
|
|
|
<div style="color: black; font-weight: bold">{{ cardList.endTime }}</div>
|
2024-11-28 13:43:25 +08:00
|
|
|
|
</el-col>
|
2024-12-02 16:31:39 +08:00
|
|
|
|
<el-col :span="4">
|
2024-12-01 12:52:50 +08:00
|
|
|
|
<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'"
|
2024-12-02 16:31:39 +08:00
|
|
|
|
style="
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
|
color: #c76f60;
|
|
|
|
|
|
"
|
2024-12-01 12:52:50 +08:00
|
|
|
|
>
|
|
|
|
|
|
{{ '待收货' }}
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div
|
2024-12-01 13:17:34 +08:00
|
|
|
|
v-if="cardList.orderStatus == '4' && isExpired(cardList)"
|
2024-12-02 16:31:39 +08:00
|
|
|
|
style="
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
|
color: #008d06;
|
|
|
|
|
|
"
|
2024-12-01 12:52:50 +08:00
|
|
|
|
>
|
|
|
|
|
|
{{ '租赁中' }}
|
|
|
|
|
|
<span style="color: red">(已过期)</span>
|
2024-11-28 13:43:25 +08:00
|
|
|
|
</div>
|
2024-12-01 12:52:50 +08:00
|
|
|
|
<div
|
2024-12-01 13:17:34 +08:00
|
|
|
|
v-if="cardList.orderStatus == '4' && !isExpired(cardList)"
|
2024-12-02 16:31:39 +08:00
|
|
|
|
style="
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
|
color: #008d06;
|
|
|
|
|
|
"
|
2024-12-01 12:52:50 +08:00
|
|
|
|
>
|
|
|
|
|
|
{{ '租赁中' }}
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div
|
|
|
|
|
|
v-if="cardList.orderStatus == '5'"
|
2024-12-02 16:31:39 +08:00
|
|
|
|
style="
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
|
color: #5b33cc;
|
|
|
|
|
|
"
|
2024-12-01 12:52:50 +08:00
|
|
|
|
>
|
|
|
|
|
|
{{ '已退租' }}
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div
|
|
|
|
|
|
v-if="cardList.orderStatus == '6'"
|
2024-12-02 16:31:39 +08:00
|
|
|
|
style="
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
|
color: #c00017;
|
|
|
|
|
|
"
|
2024-12-01 12:52:50 +08:00
|
|
|
|
>
|
|
|
|
|
|
{{ '已完成' }}
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div
|
|
|
|
|
|
v-if="cardList.orderStatus == '7'"
|
2024-12-02 16:31:39 +08:00
|
|
|
|
style="
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
|
color: #797979;
|
|
|
|
|
|
"
|
2024-12-01 12:52:50 +08:00
|
|
|
|
>
|
|
|
|
|
|
{{ '已驳回' }}
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</el-col>
|
2024-12-02 16:31:39 +08:00
|
|
|
|
</el-row>
|
2024-11-28 13:43:25 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
|
.container {
|
|
|
|
|
|
// width: 800px;
|
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
|
padding: 10px;
|
|
|
|
|
|
// background: #eeeff6;
|
|
|
|
|
|
font-size: 14px;
|
2024-12-02 16:31:39 +08:00
|
|
|
|
.step {
|
|
|
|
|
|
margin-left: 80px;
|
2024-11-28 13:43:25 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.section {
|
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
|
}
|
2024-12-02 16:31:39 +08:00
|
|
|
|
.cart-tbody {
|
2024-11-28 13:43:25 +08:00
|
|
|
|
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;
|
2024-12-02 16:31:39 +08:00
|
|
|
|
|
2024-11-28 13:43:25 +08:00
|
|
|
|
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;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
2024-12-02 16:31:39 +08:00
|
|
|
|
.cart-listAll {
|
|
|
|
|
|
margin: 15px 0;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
font-size: 13px;
|
|
|
|
|
|
|
|
|
|
|
|
div {
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
}
|
2024-12-01 12:52:50 +08:00
|
|
|
|
.cart-list {
|
|
|
|
|
|
margin: 15px 0;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
font-size: 13px;
|
2024-12-02 16:31:39 +08:00
|
|
|
|
|
2024-12-01 12:52:50 +08:00
|
|
|
|
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;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
2024-12-02 16:31:39 +08:00
|
|
|
|
.lease-date {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
|
}
|
2024-12-01 12:52:50 +08:00
|
|
|
|
|
2024-12-02 16:31:39 +08:00
|
|
|
|
.red-font {
|
|
|
|
|
|
color: #ff4800;
|
|
|
|
|
|
font-weight: bold;
|
2024-12-01 12:52:50 +08:00
|
|
|
|
}
|
2024-12-02 16:31:39 +08:00
|
|
|
|
}
|
2024-11-28 13:43:25 +08:00
|
|
|
|
}
|
|
|
|
|
|
</style>
|
