BJ_web_developers / codeScanning

  <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 | formateColor">蒙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 | formateColor">蒙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>

  import { parkRecordList } from '@/api/parkRecord/parkRecord.js'
  

  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)

      this.parkRecordList(this.carNumber)

    },
    methods: {

      parkRecordList(){
        parkRecordList({}).then(res => {
          console.log(res)
  
        })
      },
  
  
  

      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',
            query:{
              carColor:0
            }
          }
        )

      }

    },
    filters: {

      formateColor(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>