欠费缴纳--费用支付

liuqimichale
1 parent eb4a88b5
Showing 8 changed files with 86 additions and 3 deletions
src/assets/images/blackBG.png
src/assets/images/blueBG.png
src/assets/images/greenBG.png
src/assets/images/whiteBG.png
src/assets/images/yellowBG.png
src/components/orderPay.vue
src/components/parkRecord.vue
src/router/index.js
+<template>
+  <div>
+    <div class="car-wrap">
+      <div class="carBG">
+        <p>蒙DT849</p>
+        <p>D36.0123</p>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'orderPay'
+}
+</script>
+
+<style scoped lang="scss">
+  .car-wrap {
+    padding: 7px 7px;
+  }
+
+  .carBG {
+    width: 100%;
+    height: 130px;
+    background: url("../assets/images/yellowBG.png") no-repeat;
+    background-size: 100% 100%;
+  }
+</style>
@@ -87,14 +87,14 @@
         <div class="history-footer">
           <p class="statistical-data">您已选中
-            <span>3</span>笔交易
-            &nbsp;&nbsp;&nbsp;&nbsp;合计：<span>¥ 50.00</span>
+            <span>{{historyCheckedLen}}</span>笔交易
+            &nbsp;&nbsp;&nbsp;&nbsp;合计：¥ <span>{{historyCheckedMon/100}}.00</span>
           </p>
           <div class="opration-wrap">
             <p class="check-btn" :class="{isAllChecked:allChecked}"
                @click="checkedAll"
             >全选</p>
-            <p class="settle-btn">清缴欠费</p>
+            <p class="settle-btn" @click="toPayPage">清缴欠费</p>
           </div>
         </div>
@@ -110,6 +110,15 @@
     <div v-else class="noRecord">
       暂无记录
     </div>
+
+    <modal-alert ref="alert">
+      <div class="trave-tip-content txt-l" slot="content">
+        <div class="confirm-text">
+          <p>请至少选择一笔记录</p>
+        </div>
+      </div>
+      <span slot="button">知道了</span>
+    </modal-alert>
   </div>
 </template>
@@ -133,8 +142,12 @@ export default {
         {money:400,checked:false, id: 4},
       ] ,
       allChecked:false, // 全部选择事件
+      historyCheckedLen:0, //选中了几笔交易
+      historyCheckedMon: 0, //选中了待缴纳的金额
     }
   },
+  mounted(){
+  },
   created() {
     this.carNumber = this.$route.query.carNumber  // 获取车牌号
     console.log(this.carNumber)
@@ -145,9 +158,43 @@ export default {
     },
     chooseHandle(i, index) { // 历史欠费单个选择事件
       i.checked = !i.checked
+      let me = this
+      if(i.checked ){ //单个选中
+        me.historyCheckedLen ++
+        me.historyCheckedMon += i.money
+      }else{ //单个不选中
+        me.historyCheckedLen --
+        me.historyCheckedMon -= i.money
+      }
+
+
     },
     checkedAll() { // 全选选择事件
       this.allChecked = !this.allChecked
+      if(this.allChecked){  //全选
+        let me = this
+        me.historyCheckedMon = 0
+        this.historyList.forEach(function(item){
+          item.checked = true;
+          me.historyCheckedMon += item.money
+        });
+        this.historyCheckedLen = this.historyList.length
+      }else{ //反选
+
+        this.historyList.forEach(function(item){
+          item.checked = false;
+
+        });
+        this.historyCheckedLen = 0
+        this.historyCheckedMon = 0
+      }
+    },
+    toPayPage() { //缴纳费用
+      if(this.historyCheckedLen==0){
+        this.$refs.alert.open()
+        return
+      }
+      this.$router.push({path:'orderPay'})
     }
   },
   filters: {
@@ -22,6 +22,12 @@ export default new Router({
       name: 'parkRecord',
       component: parkRecord
     },
+    {
+      path: '/orderPay',
+      name: 'orderPay',
+      component: () => import("@/components/orderPay.vue")
+    },
+
   ]
 })