Skip to content

C
cloud-platform-ui
Commit 2da5bd5f authored by lixy's avatar lixy
Browse files
Options

租车订单详情

parent 9ab92a54
Show whitespace changes
Inline Side-by-side
Showing with 199 additions and 90 deletions
src/views/order/modal/rentOrderDetailModal.vue 0 → 100644
View file @ 2da5bd5f
<template>
<el-dialog title="订单详情" :visible.sync="dialogVisible" class="order-details">
<el-form :model="form" ref="form" label-width="90px">
<el-row>
<el-col :span="8">
<el-form-item label="订单号:">
<span>{{form.no}}</span>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="支付时间:">
<span>{{form.crtTime}}</span>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="订单状态:">
<span>{{form.ststusName}}</span>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="姓名:">
<span>{{form.username}}</span>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="手机号:">
<span>{{form.telephone}}</span>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="配车:">
<span style="margin-right: 10px;">{{form.vehicleNumberPlat}}</span><el-button size="small" type="primary" icon="edit" v-if="form.status==4">重新配车</el-button>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="取车:">
<span>{{form.orderRentVehicleDetail.startTime}}</span>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="">
<span>{{form.orderRentVehicleDetail.startAddr}}</span>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="交车公司:">
<span>{{form.startCompanyName}}</span>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="还车:">
<span>{{form.orderRentVehicleDetail.endTime}}</span>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="">
<span>{{form.orderRentVehicleDetail.endAddr}}</span>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="交车公司:">
<span>{{form.endCompanyName}}</span>
</el-form-item>
</el-col>
</el-row>
<table class="orderDetail">
<tr><th>房车</th><th>租借天数</th><th>费用明细</th>
</tr>
<tr>
<td>{{form.name}}{{rentCostDetail}}</td>
<td>{{form.orderRentVehicleDetail.dayNum}}天</td>
<td>{{rentCostDetail}}</td>
</tr>
<tr>
<td ></td>
<td ></td>
<td >共计:￥{{form.realAmount}}</td>
</tr>
</table>
<div v-if="form.orderVehicleCrosstownDto" style="margin: 20px 0;"><span style="font-size: 18px;font-weight: bold;">驾驶人信息</span></div>
<table class="orderDetail" v-if="form.orderVehicleCrosstownDto">
<tr><th>姓名</th><th>手机号</th><th>身份证号</th><th>驾照</th></tr>
<tr>
<td>{{form.orderVehicleCrosstownDto.licenseName}}</td>
<td>{{form.orderVehicleCrosstownDto.licensePhone}}</td>
<td>{{form.orderVehicleCrosstownDto.licenseIdCard}}</td>
<td><img style="width: 140px;height: 140px;" :src="form.orderVehicleCrosstownDto?form.orderVehicleCrosstownDto.licenseImg:'https://xxtest.upyuns.com/image/app/default_%20avatar.png'"></td>
</tr>
</table>
</el-form>
</el-dialog>
</template>
<script>
import ElRow from "element-ui/packages/row/src/row";
import ElInput from "../../../../node_modules/element-ui/packages/input/src/input.vue";
import ElCol from "element-ui/packages/col/src/col";
import ElFormItem from "../../../../node_modules/element-ui/packages/form/src/form-item.vue";
import ElForm from "../../../../node_modules/element-ui/packages/form/src/form.vue";
export default {
props: ["form", "rentCostDetail"],
name: 'rentOrderDetailModal',
components: {
ElFormItem,
ElCol,
ElInput,
ElRow
},
data() {
return {
dialogVisible: false
}
},
watch: {
dialogVisible(newValue, oldValue){
if(!newValue){
this.$emit("rentOrderDetailDialogEvent", false);
}
},
},
mounted() {
this.dialogVisible = true;
},
methods: {
}
}
</script>
src/views/order/rentVehicleInfo/index.vue
View file @ 2da5bd5f
...@@ -127,54 +127,7 @@ ...@@ -127,54 +127,7 @@
</div> </div>
<!-- 订单详情 --> <!-- 订单详情 -->
<el-dialog :title="modalTitle" :visible.sync="bannerDialogVisible"> <rentOrderDetailModal :form="form" :rentCostDetail="tourCostDetail" v-if="rentDialogVisible" v-on:rentOrderDetailDialogEvent="rentOrderDetailDialogEvent"></rentOrderDetailModal>
<el-form :model="form" :rules="rules" ref="form" label-width="90px">
<div class="label-title">
<span >订单号:</span><span class="label-text">{{form.no}}</span>
<span >支付时间:</span><span class="label-text">{{form.crtTime}}</span>
</div>
<div class="label-title">
<span >订单状态:</span><span class="label-text">{{form.ststusName}}</span>
</div>
<div class="label-title">
<span >姓名/手机号:</span> <span class="label-text"><span >{{form.username}}</span>/<span>{{form.telephone}}</span></span>
</div>
<div class="label-title">
<span >配车:</span> <span class="label-text"><span >{{form.vehicleNumberPlat}}</span><a class="label-text" style="color: #1478F0;">重新配车></a></span>
</div>
<div class="label-title">
<span >取车:</span> <span class="label-text">{{form.orderRentVehicleDetail.startTime}}</span><span class="label-text">{{form.orderRentVehicleDetail.startAddr}}</span> <span class="label-text">交车公司:</span><span>{{form.startCompanyName}}</span>
</div>
<div class="label-title">
<span >还车:</span> <span class="label-text">{{form.orderRentVehicleDetail.endTime}}</span><span class="label-text">{{form.orderRentVehicleDetail.endAddr}}</span> <span class="label-text">交车公司:</span><span>{{form.endCompanyName}}</span>
</div>
<table class="orderDetail">
<tr>
<td>房车</td>
<td>租借天数</td>
<td>费用明细</td>
</tr>
<tr>
<td>{{form.name}}{{tourCostDetail}}</td>
<td>{{form.orderRentVehicleDetail.dayNum}}天</td>
<td>{{tourCostDetail}}</td>
</tr>
<tr>
<td ></td>
<td ></td>
<td >共计:{{form.realAmount}}</td>
</tr>
</table>
<div style="margin-top: 20px;">
<div><span style="font-size: 20px;font-weight: bold;">驾驶人信息</span></div>
<div style="margin-top: 10px;"><span>{{this.form.orderVehicleCrosstownDto?this.form.orderVehicleCrosstownDto.licenseName:''}}</span><span class="label-text">{{this.form.orderVehicleCrosstownDto?this.form.orderVehicleCrosstownDto.licensePhone:''}}</span><span class="label-text">{{this.form.orderVehicleCrosstownDto?this.form.orderVehicleCrosstownDto.licenseIdCard:''}}</span></div><br/>
<div v-if="this.form.orderVehicleCrosstownDto?true:false"><img class="label-text " id = "license-img" :src="this.form.orderVehicleCrosstownDto?this.form.orderVehicleCrosstownDto.licenseImg:''"></div>
</div>
</el-form>
</el-dialog>
<el-dialog :title="modalTitle" :visible.sync="orderVehicleCrosstownVisible"> <el-dialog :title="modalTitle" :visible.sync="orderVehicleCrosstownVisible">
<el-form :model="form" :rules="rules" ref="form" label-width="90px"> <el-form :model="form" :rules="rules" ref="form" label-width="90px">
...@@ -243,9 +196,11 @@ ...@@ -243,9 +196,11 @@
</div> </div>
</template> </template>
<script> <script>
import Illegal from "./illegalModal";//违章查询 import Illegal from "./illegalModal";//违章查询
import Detail from "./detail";//违章查询 import Detail from "./detail";//违章查询
import rentOrderDetailModal from "../modal/rentOrderDetailModal";//租车订单详情
import { import {
formatDate formatDate
} from '../../../utils/dateFormattor'; } from '../../../utils/dateFormattor';
...@@ -266,11 +221,18 @@ ...@@ -266,11 +221,18 @@
import { import {
getAllZone getAllZone
} from 'api/base_info/constant/'; } from 'api/base_info/constant/';
import ElRow from "element-ui/packages/row/src/row";
import ElCol from "element-ui/packages/col/src/col";
import ElButton from "../../../../node_modules/element-ui/packages/button/src/button.vue";
export default { export default {
name: 'branchCompanyStock', name: 'branchCompanyStock',
components: { components: {
ElButton,
ElCol,
ElRow,
Illegal, Illegal,
Detail, Detail,
rentOrderDetailModal
}, },
data() { data() {
return { return {
...@@ -341,7 +303,7 @@ ...@@ -341,7 +303,7 @@
version: undefined version: undefined
}, },
orderVehicleCrosstownVisible:false, orderVehicleCrosstownVisible:false,
bannerDialogVisible: false,//添加、编辑弹框 rentDialogVisible: false,//租车详情弹框
modalTitle: '订单详情', modalTitle: '订单详情',
illegalVisible: false,//违章查询弹框 illegalVisible: false,//违章查询弹框
detailVisible:false, detailVisible:false,
...@@ -468,7 +430,13 @@ ...@@ -468,7 +430,13 @@
if(this.form.orderRentVehicleDetail.driverType==1) { if(this.form.orderRentVehicleDetail.driverType==1) {
this.serviceCost = this.form.orderRentVehicleDetail.dayNum * 600 this.serviceCost = this.form.orderRentVehicleDetail.dayNum * 600
} }
this.bannerDialogVisible = true; this.rentDialogVisible = true;
},
/**
* 租车订单详情弹框关闭
* */
rentOrderDetailDialogEvent(e){
this.rentDialogVisible = false;
}, },
/** /**
* 操作-违章查询按钮，显示违章弹框 * 操作-违章查询按钮，显示违章弹框
...@@ -738,12 +706,16 @@ ...@@ -738,12 +706,16 @@
.label-title{ .label-title{
margin-top: 10px; margin-top: 10px;
} }
.orderDetail tr td{ .orderDetail tr th{
background: #eef1f6;
}
.orderDetail tr td, .orderDetail tr th{
width: 500px; width: 500px;
text-align: center; text-align: center;
border: 0.0625rem solid; border: 1px solid #dfe6ec;
margin-left: 100px; margin-left: 100px;
margin-right: 100px; margin-right: 100px;
padding: 10px;
} }
.label-value{ .label-value{
margin-left: 80px; margin-left: 80px;
...@@ -753,4 +725,7 @@ ...@@ -753,4 +725,7 @@
width: 50px; width: 50px;
height: 50px; height: 50px;
} }
.order-details .el-form-item{
margin-bottom: 10px !important;
}
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment