欠费缴纳

liuqimichale
1 parent 7bc83a97
Showing 3 changed files with 152 additions and 7 deletions
src/assets/images/choose.png
src/assets/images/choosed.png
src/components/parkRecord.vue
 <template>
-  <div>
-    <div v-if="parkList.length>0">
+  <div style="height: 100%">
+    <div v-if="parkList.length>0" style="height: 100%">
       <ul class="tabWrap">
         <li v-for="(i,index) in tabList"
             :key="i.id"
@@ -17,7 +17,7 @@
         <div>
           <p class="free-tip">您为会员卡车辆无需缴费，请直接离场。</p>
  
-          <div class="cost-main">
+          <div class="cost-main" >
             <ul class="cost-header">
               <li :class="carColor | formatColor">蒙DMW169</li>
               <li>本次费用</li>
@@ -33,7 +33,7 @@
               </p>
               <p>停车时长：18分钟33秒</p>
               <div class="out-wrap">
-                <p class="mon-wrap">1.50元</p>
+                <p class="mon-wrap">￥1.50</p>
                 <p class="out-btn">出场缴费</p>
               </div>
             </div>
@@ -47,7 +47,62 @@
  
  
       <!--历史缴费-->
-      <div v-show="currentTabActive==1">1</div>
+      <div v-show="currentTabActive==1" class="history-con" >
+
+        <div class="history-body">
+          <p class="money-all">总欠费金额：
+            <span>¥15.50</span>
+          </p>
+
+          <div class="cost-main  cost-main-history" style="padding-left: 50px;"
+
+            v-for="(i, index) in historyList" :key="i.id"
+            @click="chooseHandle(i, index)"
+            :class="{isChecked: i.checked}"
+          >
+            <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>
+              </div>
+
+            </div>
+          </div>
+
+        </div>
+
+
+        <div class="history-footer">
+          <p class="statistical-data">您已选中
+            <span>3</span>笔交易
+            &nbsp;&nbsp;&nbsp;&nbsp;合计：<span>¥ 50.00</span>
+          </p>
+          <div class="opration-wrap">
+            <p class="check-btn" :class="{isAllChecked:allChecked}"
+               @click="checkedAll"
+            >全选</p>
+            <p class="settle-btn">清缴欠费</p>
+          </div>
+        </div>
+
+
+        <!--没有在停费用-->
+        <!--<div class="noRecord">暂无记录</div>-->
+
+      </div>
  
     </div>
  
@@ -68,9 +123,16 @@ export default {
         { text: '离场待缴', id: 2 },
       ],
       carColor: 1,// 车牌颜色
-      currentTabActive: 0, // 显示当前哪个
+      currentTabActive: 1, // 显示当前哪个
       carNumber: '', //  车牌号码
-      parkList: [1] // 停车记录数据
+      parkList: [1], // 停车记录数据
+      historyList:[  // 历史欠费数据
+        {money:100,checked:false, id: 1},
+        {money:200,checked:false, id: 2},
+        {money:300,checked:false, id: 3},
+        {money:400,checked:false, id: 4},
+      ] ,
+      allChecked:false, // 全部选择事件
     }
   },
   created() {
@@ -80,6 +142,12 @@ export default {
   methods: {
     tabHandle(index) { // tab 切换
       this.currentTabActive = index
+    },
+    chooseHandle(i, index) { // 历史欠费单个选择事件
+      i.checked = !i.checked
+    },
+    checkedAll() { // 全选选择事件
+      this.allChecked = !this.allChecked
     }
   },
   filters: {
@@ -205,6 +273,83 @@ export default {
     }
   }
  
+
+  .history-con{
+    height: calc(100% - 38px);
+    overflow: hidden;
+  }
+  .history-body{
+    height: calc(100% - 81px);
+    overflow-y: scroll;
+  }
+  .history-footer{
+    height: 81px;
+    background: #F8F8F8;
+  }
+
+
+  .cost-main-history{
+    margin-bottom: 10px;
+    background:#fff url("../assets/images/choose.png") no-repeat 10px center;
+    background-size: 20px 20px;
+    cursor: pointer;
+  }
+
+
+
+
+  .isChecked{
+    background:#fff url("../assets/images/choosed.png") no-repeat 10px center;
+    background-size: 20px 20px;
+  }
+
+  .money-all{
+    padding-left: 18px;
+    height: 25px;
+    line-height: 25px;
+    font-weight: 500;
+    background: #FEF8DB;
+    span{
+      color: #BC0202;
+    }
+  }
+
+  .statistical-data{
+    padding-left: 18px;
+    height: 32px;
+    line-height: 32px;
+    background: #E6FAFA;
+    span{
+      color: #D20000;
+    }
+  }
+  .opration-wrap{
+    padding-left: 18px;
+    height: 49px;
+    line-height: 49px;
+    background: #f8f8f8;
+    display: flex;
+    justify-content: space-between;
+    .check-btn{
+      padding-left: 30px;
+      background: url("../assets/images/choose.png") no-repeat 0 center;
+      background-size: 20px 20px;
+      cursor: pointer;
+    }
+    .isAllChecked{
+      background: url("../assets/images/choosed.png") no-repeat 0 center;
+      background-size: 20px 20px;
+    }
+    .settle-btn{
+      width: 106px;
+      height: 49px;
+      background: linear-gradient(145deg, #2783E9 0%, #227ADC 100%);
+      text-align: center;
+      color: #fff;
+      cursor: pointer;
+    }
+  }
+
   .noRecord {
     padding-top: 200px;
     background: url("../assets/images/noRecord.png") no-repeat center 60px;