出租方订单页面以及订单详情
This commit is contained in:
parent
b083418ff9
commit
0b7fe3c0a2
|
|
@ -8,9 +8,12 @@ export {}
|
|||
declare module 'vue' {
|
||||
export interface GlobalComponents {
|
||||
Breadcrumb: typeof import('./src/components/Breadcrumb/index.vue')['default']
|
||||
ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
|
||||
ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
|
||||
ElButton: typeof import('element-plus/es')['ElButton']
|
||||
ElCarousel: typeof import('element-plus/es')['ElCarousel']
|
||||
ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
|
||||
ElCascader: typeof import('element-plus/es')['ElCascader']
|
||||
ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
|
||||
ElCol: typeof import('element-plus/es')['ElCol']
|
||||
ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
|
||||
|
|
@ -18,6 +21,7 @@ declare module 'vue' {
|
|||
ElDialog: typeof import('element-plus/es')['ElDialog']
|
||||
ElForm: typeof import('element-plus/es')['ElForm']
|
||||
ElFormItem: typeof import('element-plus/es')['ElFormItem']
|
||||
ElHeader: typeof import('element-plus/es')['ElHeader']
|
||||
ElIcon: typeof import('element-plus/es')['ElIcon']
|
||||
ElImage: typeof import('element-plus/es')['ElImage']
|
||||
ElInput: typeof import('element-plus/es')['ElInput']
|
||||
|
|
@ -28,6 +32,8 @@ declare module 'vue' {
|
|||
ElProgress: typeof import('element-plus/es')['ElProgress']
|
||||
ElRow: typeof import('element-plus/es')['ElRow']
|
||||
ElSelect: typeof import('element-plus/es')['ElSelect']
|
||||
ElStep: typeof import('element-plus/es')['ElStep']
|
||||
ElSteps: typeof import('element-plus/es')['ElSteps']
|
||||
ElTable: typeof import('element-plus/es')['ElTable']
|
||||
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
|
||||
ElTag: typeof import('element-plus/es')['ElTag']
|
||||
|
|
|
|||
|
|
@ -216,7 +216,7 @@ const routes: Array<RouteRecordRaw> = [
|
|||
},
|
||||
},
|
||||
|
||||
/* 订单管理（求租方） */
|
||||
/* 订单管理（承租方） */
|
||||
{
|
||||
path: 'orderManagement',
|
||||
name: 'orderManagement',
|
||||
|
|
@ -228,7 +228,31 @@ const routes: Array<RouteRecordRaw> = [
|
|||
isLogin: true
|
||||
},
|
||||
},
|
||||
/* 订单管理（订单详情） */
|
||||
/* 订单管理（出租方） */
|
||||
{
|
||||
path: 'orderManagementBuy',
|
||||
name: 'orderManagementBuy',
|
||||
component: () => import('@/views/user/orderManagementCz/index.vue'),
|
||||
meta: {
|
||||
title: '订单管理（求租）',
|
||||
keepAlive: true,
|
||||
AuthFlag: false,
|
||||
isLogin: true
|
||||
},
|
||||
},
|
||||
/* 订单管理（订单详情出租） */
|
||||
{
|
||||
path: 'orderManagementInfoBuy',
|
||||
name: 'orderManagementInfoBuy',
|
||||
component: () => import('@/views/user/orderManagementCz/detail.vue'),
|
||||
meta: {
|
||||
title: '订单详情',
|
||||
keepAlive: true,
|
||||
AuthFlag: false,
|
||||
isLogin: false
|
||||
},
|
||||
},
|
||||
/* 订单管理（订单详情承租） */
|
||||
{
|
||||
path: 'orderManagementInfo',
|
||||
name: 'orderManagementInfo',
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import { getOrderListInfoApi } from 'http/api/usercenter/seekorder'
|
|||
const route = useRoute()
|
||||
/* 查询参数 */
|
||||
const cardList = ref<any>({})
|
||||
const orderStatusTemp = ref<Number>(0)
|
||||
const orderStatusTemp = ref<number>(0)
|
||||
const idTemp = ref<string>('')
|
||||
const titleStaus = ref<any>('')
|
||||
// 获取数据列表
|
||||
|
|
@ -19,21 +19,24 @@ const titleStaus = ref<any>('')
|
|||
|
||||
// 根据步骤的 Id 返回对应的标题
|
||||
const getStepTitle = (stepId:number)=> {
|
||||
if (orderStatusTemp.value === 1) {
|
||||
if (orderStatusTemp.value === 2) {
|
||||
titleStaus.value= '待出库' ;
|
||||
return stepId === 1 ? '待出库' : '';
|
||||
} else if (orderStatusTemp.value === 2) {
|
||||
} else if (orderStatusTemp.value === 3) {
|
||||
titleStaus.value= '待收货' ;
|
||||
return stepId === 1 ? '已出库' : stepId === 2 ? '待收货' : '';
|
||||
} else if (orderStatusTemp.value === 3) {
|
||||
} else if (orderStatusTemp.value === 4) {
|
||||
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 ? '已退租' : '';
|
||||
} 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 ''; // 默认返回空字符串
|
||||
|
|
@ -70,7 +73,7 @@ const time = ref([])
|
|||
<!-- 订单管理 -->
|
||||
<div class="container">
|
||||
<el-breadcrumb separator="/">
|
||||
<el-breadcrumb-item :to="{ path: '/myuser/orderManagement' }">订单管理</el-breadcrumb-item>
|
||||
<el-breadcrumb-item :to="{ path: '/my-user/orderManagement' }">订单管理</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>订单明细</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
<div class="section">
|
||||
|
|
@ -85,12 +88,12 @@ const time = ref([])
|
|||
</el-row>
|
||||
</el-header>
|
||||
|
||||
<el-steps class="step" :space="400" :active="orderStatusTemp.value" finish-status="success">
|
||||
<el-steps class="step" :space="400" :active="orderStatusTemp===7 ? 1 : orderStatusTemp-1" 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-step :title="getStepTitle(5)" ></el-step>
|
||||
</el-steps>
|
||||
</div>
|
||||
|
||||
|
|
@ -179,6 +182,7 @@ const time = ref([])
|
|||
<div v-if="goods.orderStatus=='4'" style="font-size: 14px; font-weight: bold; margin-bottom: 10px; color:blue">{{"租赁中"}}</div>
|
||||
<div v-if="goods.orderStatus=='5'" style="font-size: 14px; font-weight: bold; margin-bottom: 10px; color:blue">{{"已退租"}}</div>
|
||||
<div v-if="goods.orderStatus=='6'" style="font-size: 14px; font-weight: bold; margin-bottom: 10px; color:blue">{{"已完成"}}</div>
|
||||
<div v-if="goods.orderStatus=='7'" style="font-size: 14px; font-weight: bold; margin-bottom: 10px; color:blue">{{"已驳回"}}</div>
|
||||
</el-col>
|
||||
<el-col :span="3">
|
||||
<div>
|
||||
|
|
@ -210,7 +214,7 @@ const time = ref([])
|
|||
<style lang="scss" scoped>
|
||||
|
||||
.container {
|
||||
width: 800px;
|
||||
// width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 10px;
|
||||
// background: #eeeff6;
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,296 @@
|
|||
<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 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 ''; // 默认返回空字符串
|
||||
}
|
||||
|
||||
const getId = ()=>{
|
||||
orderStatusTemp.value = Number(route.query.orderStatusTemp)
|
||||
idTemp.value = String(route.query.idTemp)
|
||||
}
|
||||
|
||||
/** 查询列表 */
|
||||
const getList = async () => {
|
||||
let params = {
|
||||
id: idTemp.value
|
||||
}
|
||||
|
||||
const res: any = await getOrderListInfoApi(params)
|
||||
cardList.value = res.data
|
||||
}
|
||||
|
||||
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:20px;font-size: 20px;">
|
||||
<div style="color:green;">{{titleStaus}}</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-header>
|
||||
|
||||
<el-steps class="step" :space="400" :active="orderStatusTemp===7 ? 1 : orderStatusTemp-1" 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)" ></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>
|
||||
|
||||
<div class="cart-tbody" >
|
||||
<el-row class="cart-list" v-for="(goods, j) in cardList.detailsList" :key="j">
|
||||
<el-col :span="9" 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>租金：{{ goods.dayLeasePrice }}{{ ' ' + '元/天' }}</div>
|
||||
<div>数量：{{ goods.num }}{{ ' ' + '台' }}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="2">
|
||||
<div style="font-size: 14px; font-weight: bold; margin-bottom: 10px">
|
||||
总费用
|
||||
</div>
|
||||
<div class="red-font">{{goods.costs}}</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">
|
||||
{{ goods.rentBeginTime }}
|
||||
</div>
|
||||
<div style="margin-top:3px;margin-bottom:3px">{{ '至' }}</div>
|
||||
<div style="color: black; font-weight: bold">{{ goods.rentEndTime }}</div>
|
||||
</el-col>
|
||||
<el-col :span="2">
|
||||
<div v-if="goods.orderStatus=='0'" style="font-size: 14px; font-weight: bold; margin-bottom: 10px; color:blue">{{"未下单"}}</div>
|
||||
<div v-if="goods.orderStatus=='1'" style="font-size: 14px; font-weight: bold; margin-bottom: 10px; color:blue">{{"已下单"}}</div>
|
||||
<div v-if="goods.orderStatus=='2'" style="font-size: 14px; font-weight: bold; margin-bottom: 10px; color:blue">{{"待出库"}}</div>
|
||||
<div v-if="goods.orderStatus=='3'" style="font-size: 14px; font-weight: bold; margin-bottom: 10px; color:blue">{{"待收货"}}</div>
|
||||
<div v-if="goods.orderStatus=='4'" style="font-size: 14px; font-weight: bold; margin-bottom: 10px; color:blue">{{"租赁中"}}</div>
|
||||
<div v-if="goods.orderStatus=='5'" style="font-size: 14px; font-weight: bold; margin-bottom: 10px; color:blue">{{"已退租"}}</div>
|
||||
<div v-if="goods.orderStatus=='6'" style="font-size: 14px; font-weight: bold; margin-bottom: 10px; color:blue">{{"已完成"}}</div>
|
||||
<div v-if="goods.orderStatus=='7'" style="font-size: 14px; font-weight: bold; margin-bottom: 10px; color:blue">{{"已驳回"}}</div>
|
||||
</el-col>
|
||||
<el-col :span="3">
|
||||
<div>
|
||||
<el-button
|
||||
@click="handleViewOrder(j)"
|
||||
type="text"
|
||||
size="mini"
|
||||
style="color: #blue; font-weight: bold"
|
||||
>
|
||||
出库
|
||||
</el-button>
|
||||
<el-button
|
||||
@click="handleViewOrder(j)"
|
||||
type="text"
|
||||
size="mini"
|
||||
style="color: #blue; font-weight: bold"
|
||||
>
|
||||
驳回
|
||||
</el-button>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
</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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue