src/components/parkRecord.vue

<template>
  <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"
            :class="{tabActive:currentTabActive == index}"
            @click="tabHandle(index)"
        >{{i.text}}
        </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" 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>{{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" @click="toPayPage">清缴欠费</p>
          </div>
        </div>
        <!--没有在停费用-->
        <!--<div class="noRecord">暂无记录</div>-->
      </div>
    </div>
    <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>
<script>
export default {
  name: 'parkRecord',
  data() {
    return {
      tabList: [  // 切换数据
        { text: '在停缴费', id: 1 },
        { text: '离场待缴', id: 2 },
      ],
      carColor: 1,// 车牌颜色
      currentTabActive: 1, // 显示当前哪个
      carNumber: '', //  车牌号码
      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, // 全部选择事件
      historyCheckedLen:0, //选中了几笔交易
      historyCheckedMon: 0, //选中了待缴纳的金额
    }
  },
  mounted(){
  },
  created() {
    this.carNumber = this.$route.query.carNumber  // 获取车牌号
    console.log(this.carNumber)
  },
  methods: {
    tabHandle(index) { // tab 切换
      this.currentTabActive = index
    },
    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: {
    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>
<style scoped lang="scss">
  .tabWrap {
    height: 38px;
    background: #FFF;
    display: flex;
    color: #666;
    li {
      flex: 1;
      line-height: 38px;
      text-align: center;
      border-bottom: 1px solid #DFDFDF;
    }
    .tabActive {
      color: #0564CC;
      border-bottom: 1px solid #0564CC;
      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;
      }
    }
  }
  .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;
    background-size: 161px 124px;
    text-align: center;
  }
</style>