押金记录

src/App.vue

@@ -25,8 +25,8 @@
     border-bottom: 1px solid #ccc;
   }
   .main-container{
-    padding: 0 10px;
-    margin-top: 61px;
+    // padding: 0 10px;
+    // margin-top: 10px;
   }
   .header-title{
     margin: 0 88px;

src/api/order/rentVehicle.js

@@ -60,3 +60,14 @@ export function saveOrderViolation(params) {
     data: params
   });
 }
+
+/**
+ * 获取押金退款进度
+ * @param query
+ */
+export function getStep(orderNo) {
+  return fetch({
+    url: 'api/order/orderVehicle/getByOrderId?orderNo=' + orderNo,
+    method: 'get'
+  });
+}

src/views/layout/Navbar.vue

 <template>
 
 <el-menu class="navbar" mode="horizontal">
-  
   <hamburger class="hamburger-container" :toggleClick="toggleSideBar" :isActive="sidebar.opened"></hamburger>
   <levelbar></levelbar>
   <tabs-view></tabs-view>
@@ -66,6 +65,12 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
+.el-menu{
+  background-color: #fff;
+  height: 70px;
+  line-height: 70px;
+  -moz-box-shadow:1px 1px 3px #ccc; -webkit-box-shadow:1px 1px 3px #ccc; box-shadow:1px 1px 3px #ccc;
+}
 .navbar {
     height: 50px;
     line-height: 50px;

src/views/order/rentVehicleInfo/index.vue

@@ -147,6 +147,75 @@
 						<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>
+						<div class="stepBox" v-if="depositDetail">
+							<div class="title" v-if="depositRefundRecord.length>0">退款进度</div>
+							<ul>
+								<li v-for = "(item,index) in depositRefundRecord" :class="{'active':item.iscomplete}" :key="index">
+									<img class="activeImg" v-if="item.iscomplete" src="../../../assets/images/active.png" alt="">
+									<img class="activeImg" v-if="!item.iscomplete" src="../../../assets/images/doing.png" alt="">
+									<p class="stepTitle">
+										<template v-if="item.status==1">
+											<div class="picBox">
+												<div style="flex: 1">15000押金退还已申请</div>
+												<div style="font-size: 10px;color: #999">{{item.updTimeStr}}</div>
+											</div>
+										</template>
+										<template v-if="item.status==2">
+											<div class="picBox">
+												<div style="flex: 1">15000元押金退还到账</div>
+												<div style="font-size: 10px;color: #999">{{item.updTimeStr}}</div>
+											</div>
+										</template>
+										<template v-if="item.status==3">
+											<div class="picBox">
+												<div style="flex: 1">{{item.restAmount}}元房车违章押金到账</div>
+												<div style="font-size: 10px;color: #999">{{item.updTimeStr}}</div>
+											</div>
+										</template>
+										<template v-if="item.status==4">
+											<div class="picBox">
+												<div style="flex: 1">房车定损评定中</div>
+												<div style="font-size: 10px;color: #999">{{item.updTimeStr}}</div>
+											</div>
+										</template>
+										<template v-if="item.status==5">
+											<div class="picBox">
+												<div style="flex: 1">完成定损，退还剩余押金</div>
+												<div style="font-size: 10px;color: #999">{{item.updTimeStr}}</div>
+											</div>
+										</template>
+										<template v-if="item.status==6">
+											<div class="picBox">
+												<div style="flex: 1">押金退还到账</div>
+												<div style="font-size: 10px;color: #999">{{item.updTimeStr}}</div>
+											</div>
+										</template>
+									</p>
+									<p class="tip">
+										<template v-if="item.status==1">成功还车，退还15000租车押金</template>
+										<template v-if="item.status==2">{{item.updTimeStr}} 到账</template>
+										<template v-if="item.status==3">预计{{item.endTimeStr}}之前到账</template>
+										<template v-if="item.status==4">押金将在定损后退还，请耐心等待...</template>
+										<template v-if="item.status==5">定损流程有疑问可联系滴房车 客服<a :href="'tel://'+Tel" style="color: #666666;">{{Tel}}</a></template>
+										<template v-if="item.status==6">定损流程有疑问可联系滴房车 客服<a :href="'tel://'+Tel" style="color: #666666;">{{Tel}}</a></template>
+									</p>
+									<p class="detailTitle" v-if="item.orderViolation && item.status==3" style="margin-top: 15px">违章罚款</p>
+									<p class="detailTitle" v-if="item.orderViolation && item.status==3">违章截图：</p>
+									<div class="picBox" v-if="dedDetail.length>0">
+										<img class="picItem" :src="itm" alt="" v-for = "(itm,idx) in item.pictureList" :key="idx">
+									</div>
+									<p class="detailTitle" v-if="item.orderViolation && item.status==3" style="color: #666666;font-size: 13px">如有疑问，可联系滴房车客服 <a :href="'tel://'+Tel" style="color: #666666;">{{Tel}}</a></p>
+									<p class="detailTitle" v-if="dedDetail.length>0 && item.status==5" style="margin-top: 15px">定损总罚款{{dedTotal}}元</p>
+									<p class="detailTitle" v-if="dedDetail.length>0 && item.status==5">明细</p>
+									<div v-if="dedDetail.length>0 && item.status==5" v-for="(itm,idx) in dedDetail" :key="idx">
+										<p class="detailTitle">{{itm.id}}、{{itm.statusName}}</p>
+										<div class="picBox">
+											<img class="picItem" :src="it" alt="" v-for = "(it,ix) in itm.picList" :key="ix">
+										</div>
+									</div>
+								</li>
+							</ul>
+						</div> 
 						<div v-if="vehicleDetail" style="border: 1px solid;">
 								<div style="border-bottom: 1px solid;">
 									<span class="label-text">交车交接人:</span><span class="label-text">{{orderReturnVehicleCrosstown.username}}</span>
@@ -183,10 +252,6 @@
 
 							</div>
 						</div>
-						<!--押金记录-->
-						<div v-if="refundshow">
-
-						</div>
 
 		  </el-form>
 		</el-dialog>
@@ -208,7 +273,8 @@
     page,
 		getAllBranchCompany,
 		getAllBranchCompanyByZoneId,
-		getOrderVehicleCrosstown
+		getOrderVehicleCrosstown,
+		getStep
   } from 'api/order/rentVehicle';
 	import {
 	  timestamp2Date
@@ -236,6 +302,11 @@
     },
     data() {
       return {
+		pictureList:[],
+        dedDetail:[],
+        depositRefundRecord:[],
+        dedTotal:'',
+        Tel:'',
        form: {
 					couponAmount: undefined,
 					crtHost: undefined,
@@ -376,8 +447,9 @@
 				handover:false,
 				returnVehicle: false,
 				refundshow:false,//退款信息
-				vehicleDetail:true, //交还车信息，默认全部显示
-				order_btn_order_violcation_save:false
+				vehicleDetail:false, //交还车信息，默认全部显示
+				order_btn_order_violcation_save:false,
+				depositDetail:false,
       }
     },
     created() {
@@ -565,10 +637,60 @@
 						this.returnVehicle = true
 						this.handover = false
 						this.vehicleDetail=true
+						this.depositDetail = false
 				},
 				handleRefundVehicle(row) {
 					console.log(row)
-						this.modalTitle = "还车记录"
+					var that = this;
+					that.pictureList=[];
+					that.dedDetail=[];
+					that.depositRefundRecord=[];
+					that.dedTotal='';
+					that.Tel='';
+					getStep(row.no).then(response =>{
+						response.data.forEach(function(item) {
+                                    if(item.type!=1){
+                                        that.type = item.type
+                                        if(item.dedDetail){
+                                            var dedTotal = ''
+                                            var dedDetail = JSON.parse(item.dedDetail);
+                                            that.dedDetail = dedDetail;
+                                            dedDetail.forEach(function(item){
+                                                dedTotal += item.cost
+                                            })
+                                            that.dedTotal = dedTotal;
+                                        }
+                                        item.depositRefundRecord.forEach(function(itm){
+                                            itm.updTimeStr = timestamp2Date(itm.updTime);
+                                            if(itm.status==3){
+                                                itm.endTimeStr = timestamp2Date(Number(itm.updTime)+2592000000)
+                                                if(itm.orderViolation){
+                                                    if(itm.orderViolation.picture){
+                                                        var Arr = itm.orderViolation.picture.split(",");
+                                                        var arrivalPicList = [];
+                                                        Arr.map(function(it){
+                                                            arrivalPicList.push(it);
+                                                        });
+                                                        itm.pictureList = arrivalPicList;
+                                                    }
+                                                }
+                                            }
+										})
+										if(item.type==3){
+											var arr = item.depositRefundRecord;
+											var item = arr.shift();
+											arr.push(item)
+										}else{
+											var arr = item.depositRefundRecord;
+										}
+										
+
+                                        that.depositRefundRecord = arr
+                                        console.log(that.depositRefundRecord)
+                                    }
+                                });
+					})
+						this.modalTitle = "押金记录"
 						 this.form = row;
 						if (this.form.status == 2) {
 							this.form.ststusName = '取消';
@@ -588,7 +710,8 @@
 					 this.form.orderRentVehicleDetail.startTime = timestamp2Date(this.form.orderRentVehicleDetail.startTime)
 					 this.form.orderRentVehicleDetail.endTime = timestamp2Date(this.form.orderRentVehicleDetail.endTime)
 					 this.orderVehicleCrosstownVisible = true
-						this.vehicleDetail=false
+					 this.vehicleDetail=false
+					 this.depositDetail = true
 					},
 			//监听change事件
 			 getProvinceRegions(item) {
@@ -702,7 +825,7 @@
   }
 </script>
 
-<style>
+<style scpoed>
     .label-text{
         margin-left: 10px;
         margin-right: 20px;
@@ -732,4 +855,25 @@
    .order-details .el-form-item{
      margin-bottom: 10px !important;
    }
+   .stepBox{background-color: #fff;width: 100%;margin-top: 10px;}
+        .title{font-size: 17px;color: #171413;border-bottom: 1px solid #CCCCCC;margin-bottom: 10px;font-weight:400;padding: 10px;}
+        .stepBox ul{margin-left: 10px;padding-left: 10px;padding-top: 20px;}
+        .stepBox li{position: relative;padding: 0 20px 20px 20px;list-style: none;min-height: 40px;border-left: 1px solid #ccc;margin-top: -15px;}
+        .stepBox li.active{border-color: #47E270;}
+        .stepBox ul li:last-child{border: none;}
+        .activeImg,.doingImg{position: absolute;width: 28px;top: -18px;left: -14px;}
+        .stepTitle{font-size: 15px;color: #171413;padding-bottom: 5px}
+        .tip{font-size: 10px;color: #999999;}
+        .detailTitle{font-size: 10px;color: #171413;}
+        .orderBox{width: 100%;padding: 0 10px;background: #fff;}
+        .orderItem{display: flex;display: -webkit-box;display: -webkit-flex;align-items: center;padding-bottom: 5px}
+        .orderItemLeft{font-size: 13px;color: #171413}
+        .orderItemRight{font-size: 13px;color: #666666}
+        .detailBox{display: flex;display: -webkit-box;display: -webkit-flex;padding: 0 10px 10px 10px;align-items: center}
+        .detailBoxLeft{width: 80px;height: 80px;border-radius: 3px;margin-right: 7px}
+        .detailBoxRight{flex: 1;}
+        .copy{font-size: 10px;color: #666666;background: #EEEEEE;border-radius: 3px;padding: 3px;margin-left: 10px}
+        .picBox{display: flex;display: -webkit-box;display: -webkit-flex;align-items: center;flex-wrap: wrap}
+        .picItem{width: calc(33.3% - 10px);margin-right: 10px;margin-bottom: 10px;}
+        .bag{background:#171413;border-radius:3px;padding:0 2px;color:#fff;font-size:10px;margin-right: 5px}
 </style>

src/views/vehicle/vehicleInfo/index.vue

@@ -1238,12 +1238,12 @@
         },
         set: function ([startDate, endDate]) {
           if (this.$utils.isDate(startDate)) {
-            this.form4Apply.bookStartDate = formatDate(startDate, 'yyyy-MM-dd');
+            this.form4Apply.bookStartDate = formatDate(startDate, 'yyyy-MM-dd hh:mm:ss');
           } else {
             this.form4Apply.bookStartDate = undefined;
           }
           if (this.$utils.isDate(endDate)) {
-            this.form4Apply.bookEndDate = formatDate(endDate, 'yyyy-MM-dd');
+            this.form4Apply.bookEndDate = formatDate(endDate, 'yyyy-MM-dd hh:mm:ss');
           } else {
             this.form4Apply.bookEndDate = undefined;
           }