Skip to content

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

租车订单详情

parent 9ab92a54
Hide 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
......@@ -99,14 +99,14 @@
<span v-if="scope.row.status == '6'">已完成</span>
</template>
</el-table-column>
<el-table-column width="110" align="center" label="订单详情">
<template scope="scope">
<span style="color: #13CE66;cursor: pointer;" @click="handleOrderDetail(scope.row)">订单详情</span>
</template>
</el-table-column>
<el-table-column align="center" label="操作" width="400">
<template scope="scope">
<template scope="scope">
<el-button size="small" v-if="scope.row.status >=4" type="success" @click="handleHandoverOrderVehicle(scope.row)">交车记录</el-button>
<el-button size="small" v-if="scope.row.status == 6" type="success" @click="handleReturnOrderVehicle(scope.row)">还车记录</el-button>
<el-button size="small" v-if="scope.row.status > 3" type="success" @click="handleRefundVehicle(scope.row)">押金记录</el-button>
......@@ -125,57 +125,10 @@
:current-page.sync="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit"
layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
</div>
<!-- 订单详情 -->
<el-dialog :title="modalTitle" :visible.sync="bannerDialogVisible">
<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>
<rentOrderDetailModal :form="form" :rentCostDetail="tourCostDetail" v-if="rentDialogVisible" v-on:rentOrderDetailDialogEvent="rentOrderDetailDialogEvent"></rentOrderDetailModal>
<el-dialog :title="modalTitle" :visible.sync="orderVehicleCrosstownVisible">
<el-form :model="form" :rules="rules" ref="form" label-width="90px">
<div class="label-title">
......@@ -203,7 +156,7 @@
<span style="margin-left:110px;">身份证号:</span> <span class="label-text">{{orderReturnVehicleCrosstown.licenseIdCard}}</span><br />
<img :src="orderReturnVehicleCrosstown.licenseImg" style="width: 100px; height: 100px;margin-left:110px;"/>
</div>
<div>
<span class="label-text">拍照取证*:</span><br/>
<img v-for="item in otherImg" :src="item" style="width: 100px; height: 100px;margin-left:110px;"/>
......@@ -221,31 +174,33 @@
</div>
<div v-if="returnVehicle">
<span class="label-text">押金扣除项*:</span><span>{{orderReturnVehicleCrosstown.deduction?'有扣除项':'没有扣除项'}}</span><br/>
</div>
<div>
<span class="label-text">备注:</span></span><span class="label-text">{{orderReturnVehicleCrosstown.remak}}</span>
</div>
<div>
</div>
</div>
<!--押金记录-->
<div v-if="refundshow">
</div>
</el-form>
</el-dialog>
</div>
</template>
<script>
import Illegal from "./illegalModal";//违章查询
import Detail from "./detail";//违章查询
import rentOrderDetailModal from "../modal/rentOrderDetailModal";//租车订单详情
import {
formatDate
} from '../../../utils/dateFormattor';
......@@ -266,11 +221,18 @@
import {
getAllZone
} 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 {
name: 'branchCompanyStock',
components: {
ElButton,
ElCol,
ElRow,
Illegal,
Detail,
rentOrderDetailModal
},
data() {
return {
......@@ -341,7 +303,7 @@
version: undefined
},
orderVehicleCrosstownVisible:false,
bannerDialogVisible: false,//添加、编辑弹框
rentDialogVisible: false,//租车详情弹框
modalTitle: '订单详情',
illegalVisible: false,//违章查询弹框
detailVisible:false,
......@@ -468,8 +430,14 @@
if(this.form.orderRentVehicleDetail.driverType==1) {
this.serviceCost = this.form.orderRentVehicleDetail.dayNum * 600
}
this.bannerDialogVisible = true;
this.rentDialogVisible = true;
},
/**
* 租车订单详情弹框关闭
* */
rentOrderDetailDialogEvent(e){
this.rentDialogVisible = false;
},
/**
* 操作-违章查询按钮，显示违章弹框
*/
......@@ -538,7 +506,7 @@
this.handover = true
this.returnVehicle = false
this.vehicleDetail=true
},
getAllOrderVehicleCrosstown() {
getOrderVehicleCrosstown(this.orderVehicleQuery)
......@@ -554,10 +522,10 @@
}
}
})
},
handleReturnOrderVehicle(row) {
console.log(row)
this.modalTitle = "还车记录"
......@@ -615,7 +583,7 @@
this.form.ststusName = '已完成';
}
this.form.orderRentVehicleDetail.startTime = timestamp2Date(this.form.orderRentVehicleDetail.startTime)
this.form.orderRentVehicleDetail.endTime = timestamp2Date(this.form.orderRentVehicleDetail.endTime)
this.form.orderRentVehicleDetail.endTime = timestamp2Date(this.form.orderRentVehicleDetail.endTime)
this.orderVehicleCrosstownVisible = true
this.vehicleDetail=false
},
......@@ -650,7 +618,7 @@
});
});
},
handleDelete(row) {
this.$confirm('此操作将永久删除, 是否继续?', '提示', {
confirmButtonText: '确定',
......@@ -731,26 +699,33 @@
</script>
<style>
.label-text{
margin-left: 10px;
margin-right: 20px;
}
.label-text{
margin-left: 10px;
margin-right: 20px;
}
.label-title{
margin-top: 10px;
}
.orderDetail tr td{
width: 500px;
text-align: center;
border: 0.0625rem solid;
margin-left: 100px;
margin-right: 100px;
}
.label-value{
margin-left: 80px;
margin-right: 100px;
}
#license-img{
width: 50px;
height: 50px;
}
</style>
\ No newline at end of file
margin-top: 10px;
}
.orderDetail tr th{
background: #eef1f6;
}
.orderDetail tr td, .orderDetail tr th{
width: 500px;
text-align: center;
border: 1px solid #dfe6ec;
margin-left: 100px;
margin-right: 100px;
padding: 10px;
}
.label-value{
margin-left: 80px;
margin-right: 100px;
}
#license-img{
width: 50px;
height: 50px;
}
.order-details .el-form-item{
margin-bottom: 10px !important;
}
</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