在停缴费

liuqimichale
1 parent e7874705
Showing 8 changed files with 152 additions and 9 deletions
src/assets/images/carBlack.png
src/assets/images/carBlue.png
src/assets/images/carGreen.png
src/assets/images/carWhite.png
src/assets/images/carYellow.png
src/assets/images/free-tip.png
src/assets/images/noRecord.png
src/components/parkRecord.vue
 <template>
   <div>
     <div v-if="parkList.length>0">
-      <ul class="tabWrap" >
+      <ul class="tabWrap">
         <li v-for="(i,index) in tabList"
             :key="i.id"
             :class="{tabActive:currentTabActive == index}"
@@ -10,16 +10,50 @@
         </li>
       </ul>
+
+      <!--本次缴费-->
       <div v-show="currentTabActive==0">
+        <div>
+          <p class="free-tip">您为会员卡车辆无需缴费，请直接离场。</p>
+
+          <div class="cost-main">
+            <ul class="cost-header">
+              <li :class="carColor | formatColor">蒙DMW169</li>
+              <li>本次费用</li>
+            </ul>
+
+            <div class="cost-body">
+              <p>车辆类型：临停车</p>
+              <p>车场名称：赤峰金店南
+              </p>
+              <p> 进场时间：2020-12-19 12:59:18
+              </p>
+              <p>出场时间：2020-12-19 12:17:52
+              </p>
+              <p>停车时长：18分钟33秒</p>
+              <div class="out-wrap">
+                <p class="mon-wrap">1.50元</p>
+                <p class="out-btn">出场缴费</p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!--没有在停费用-->
+        <div class="noRecord">暂无记录</div>
+
+
       </div>
+
+
+      <!--历史缴费-->
       <div v-show="currentTabActive==1">1</div>
     </div>
-    <div v-else>
-      暂无停车记录
+    <div v-else class="noRecord">
+      暂无记录
     </div>
   </div>
 </template>
@@ -29,23 +63,46 @@ export default {
   name: 'parkRecord',
   data() {
     return {
-      tabList: [
+      tabList: [  // 切换数据
         { text: '在停缴费', id: 1 },
         { text: '离场待缴', id: 2 },
       ],
-      currentTabActive: 0,
-      carNumber: '',
-      parkList:[1]
+      carColor: 1,// 车牌颜色
+      currentTabActive: 0, // 显示当前哪个
+      carNumber: '', //  车牌号码
+      parkList: [1] // 停车记录数据
     }
   },
   created() {
-    this.carNumber = this.$route.query.carNumber
+    this.carNumber = this.$route.query.carNumber  // 获取车牌号
     console.log(this.carNumber)
   },
   methods: {
-    tabHandle(index) {
+    tabHandle(index) { // tab 切换
       this.currentTabActive = index
     }
+  },
+  filters: {
+    formatColor(val) {
+      switch (val) {
+        case 0:
+          return 'carBlue'
+          break;
+        case 1:
+          return 'carYellow'
+          break;
+        case 2:
+          return 'carGreen'
+          break;
+        case 3:
+          return 'carWhite'
+          break;
+        case 4:
+          return 'carBlack'
+          break;
+
+      }
+    }
   }
 }
 </script>
@@ -68,4 +125,90 @@ export default {
       font-weight: bold;
     }
   }
+
+  .free-tip {
+    height: 25px;
+    line-height: 25px;
+    padding-left: 45px;
+    background: #FEF8DB url("../assets/images/free-tip.png") no-repeat 18px center;
+    background-size: 18px 18px;
+  }
+
+  .cost-main {
+    padding-left: 18px;
+    background: #fff;
+  }
+
+  .cost-header {
+    display: flex;
+    justify-content: space-between;
+    height: 45px;
+    line-height: 45px;
+    border-bottom: 1px solid #DFDFDF;
+    font-weight: bold;
+    li:first-child {
+      width: 150px;
+      &.carBlue {
+        background: url("../assets/images/carBlue.png") no-repeat 90px center;
+        background-size: 28px 17px;
+      }
+      &.carYellow {
+        background: url("../assets/images/carYellow.png") no-repeat 90px center;
+        background-size: 28px 17px;
+      }
+      &.carGreen {
+        background: url("../assets/images/carGreen.png") no-repeat 90px center;
+        background-size: 28px 17px;
+      }
+      &.carWhite {
+        background: url("../assets/images/carWhite.png") no-repeat 90px center;
+        background-size: 28px 17px;
+      }
+      &.carBlack {
+        background: url("../assets/images/carBlack.png") no-repeat 90px center;
+        background-size: 28px 17px;
+      }
+    }
+    li:last-child {
+      margin-right: 18px;
+      color: #BC0202;
+    }
+  }
+
+  .cost-body {
+    padding-top: 10px;
+    position: relative;
+    > p {
+      padding-bottom: 10px;
+    }
+    .out-wrap {
+      position: absolute;
+      right: 18px;
+      top: 50%;
+      transform: translateY(-50%);
+      .mon-wrap {
+        font-size: 16px;
+        color: #333;
+        font-weight: bold;
+      }
+      .out-btn {
+        width: 72px;
+        height: 24px;
+        margin-top: 18px;
+        line-height: 24px;
+        text-align: center;
+        background: linear-gradient(180deg, #3885D9 0%, #4194EF 100%);
+        border-radius: 4px;
+        color: #FFF;
+        cursor: pointer;
+      }
+    }
+  }
+
+  .noRecord {
+    padding-top: 200px;
+    background: url("../assets/images/noRecord.png") no-repeat center 60px;
+    background-size: 161px 124px;
+    text-align: center;
+  }
 </style>