src/views/parkPay/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 v-if="parkingData.length>0">
          <p class="free-tip" v-if="parkingData[0].parkDuration<=2100">停车15分钟内无需缴费，请申请离场。</p>
          <div class="cost-main" v-for="i in parkingData">
            <ul class="cost-header">
              <li :class="carColor | formateColor">{{i.carNumber}}</li>
              <li>本次费用</li>
            </ul>
            <div class="cost-body">
              <p>车辆类型：临停车</p>
              <p>车场名称：{{i.parkName}}
              </p>
              <p> 进场时间：{{i.parkInTime}}
              </p>
              <p>出场时间：{{i.parkOutTime}}
              </p>
              <p>停车时长：{{ $utils.dateFormat(i.parkDuration)}}</p>
              <div class="out-wrap">
                <p class="mon-wrap">￥{{(i.unPayFee/100).toFixed(2)}}</p>
                <p class="out-btn" @click="toPayCurrent(i,parkingData[0].parkDuration)"
                   v-if="parkingData[0].parkDuration<=900">申请离场</p>
                <p class="out-btn" @click="toPayCurrent(i,parkingData[0].parkDuration)" v-else>出场缴费</p>
              </div>
            </div>
          </div>
        </div>
        <!--没有在停费用-->
        <div class="noRecord" v-else>暂无记录</div>
      </div>
      <!--历史缴费-->
      <div v-show="currentTabActive==1" class="history-con">
        <div v-if="historyList.length>0" style="height: 100%;">
          <div class="history-body">
            <p class="money-all">总欠费金额：
              <span>¥{{(allMoney/100).toFixed(2)}}</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">{{i.carNumber}}</li>
                <li>欠费</li>
              </ul>
              <div class="cost-body">
                <!--<p>车辆颜色：临停车</p>-->
                <p>车场名称：{{i.parkName}}
                </p>
                <p> 进场时间：{{i.parkInTime}}
                </p>
                <p>出场时间：{{i.parkOutTime}}
                </p>
                <p>停车时长：{{ $utils.dateFormat(i.parkDuration)}}</p>
                <div class="out-wrap">
                  <p class="mon-wrap">￥{{(i.unPayFee/100).toFixed(2)}}</p>
                </div>
              </div>
            </div>
          </div>
          <div class="history-footer">
            <p class="statistical-data">您已选中
              <span>{{historyCheckedLen}}</span>笔交易
              &nbsp;&nbsp;&nbsp;&nbsp;合计：¥ <span>{{(historyCheckedMon/100).toFixed(2)}}</span>
            </p>
            <div class="opration-wrap">
              <p class="check-btn" :class="{isAllChecked:allChecked}"
                 @click="checkedAll"
              >全选</p>
              <p class="settle-btn" @click="toPayHisroryPage">清缴欠费</p>
            </div>
          </div>
        </div>
        <!--没有在停费用-->
        <div class="noRecord" v-else>暂无记录</div>
      </div>
    </div>
    <div v-else class="noRecord">
      暂无记录
    </div>
  </div>
</template>
<script>
import {
  parkRecordList, historyQuery, parkingQuery, appApplyParkOut, queryArrearageSta,
  doOrderCreate
} from "@/api/parkRecord/parkRecord.js";
export default {
  name: "parkRecord",
  data() {
    return {
      tabList: [  // 切换数据
        { text: "在停缴费", id: 1 },
        { text: "欠费待缴", id: 2 }
      ],
      carColor: 1,// 车牌颜色
      currentTabActive: 0, // 显示当前哪个
      carNumber: "", //  车牌号码
      parkingData: [], //  在停数据
      parkList: [], // 停车记录数据
      historyList: [  // 历史欠费数据
        { money: 100, checked: false, id: 1 }
      ],
      allChecked: false, // 全部选择事件
      allMoney: 0, // 欠费所有的费用
      historyCheckedLen: 0, //选中了几笔交易
      historyCheckedMon: 0, //选中了待缴纳的金额
      orderIds: [] // 选中数据的订单 数组
    };
  },
  mounted() {
  },
  created() {
    this.carNumber = this.$route.query.carNumber;  // 获取车牌号
    this.carColor = this.$route.query.carNumberColor;  // 获取颜色   0:蓝牌;1:黄牌;2:白牌;3:黑牌;4:绿色
    this.currentTabActive = this.$route.query.parkFlag ? this.$route.query.parkFlag : 0;   // 0在停   1历史
    console.log(this.carNumber);
    this.parkRecordList(this.carNumber);
    //
  },
  methods: {
    parkRecordList() {  // 获取停车记录数据
      var salt = this.$utils.myCommonSalt(32);
      var jsondata = {
        app_id: this.$utils.myVarAppid,
        deviceInfo: this.$utils.myDeviceInfo,
        salt: salt,
        sign_type: "md5",
        pageNum: 1,
        pageSize: 1000,
        parkState: 10,
        terminalSource: 7,
        carNumber: this.carNumber,
        carNumberColor: this.carColor,
        // sign: md5sign,
        orgId: this.$utils.myOrgId
      };
      jsondata.sign = this.$utils.signObject(jsondata);
      // jsondata.sign = md5sign
      console.log("停车记录传参  " + JSON.stringify(jsondata));
      parkRecordList(jsondata).then(response => {
        console.log(response);
        this.parkList = response.data.dataList;
        this.parkingData = this.parkList.filter(item => {
          return item.parkState == "10";
        });
        // if(this.parkingData.length>0){
        //   this.currentTabActive = 0
        // }
        console.log(this.parkingData);
        this.historyList = this.parkList.filter(item => {
          return item.parkState == "20";
        });
        this.historyList.forEach(i => {
          this.allMoney += Number(i.unPayFee);
        });
        if (this.parkingData.length == 0 && this.historyList.length > 0) {
          this.currentTabActive = 1;
        }
        if (this.$route.query.parkFlag == 1) {
          this.currentTabActive = 1;
          this.checkedAll();
        }
        console.log(this.historyList);
      });
    },
    tabHandle(index) { // tab 切换
      this.currentTabActive = index;
    },
    chooseHandle(i, index) { // 历史欠费单个选择事件
      i.checked = !i.checked;
      let me = this;
      if (i.checked) { //单个选中
        me.historyCheckedLen++;
        if (me.historyCheckedLen == this.historyList.length) {
          this.allChecked = true;
        }
        me.orderIds.push(i.orderId);
        me.historyCheckedMon += Number(i.unPayFee);
      } else { //单个不选中
        let _i = me.orderIds.indexOf(i.orderId);
        me.orderIds.splice(_i, 1);
        this.allChecked = false;
        me.historyCheckedLen--;
        me.historyCheckedMon -= Number(i.unPayFee);
      }
    },
    checkedAll() { // 全选选择事件
      this.allChecked = !this.allChecked;
      if (this.allChecked) {  //全选
        let me = this;
        this.historyList.forEach(function(item) {
          item.checked = true;
          me.orderIds.push(item.orderId);
        });
        this.historyCheckedMon = this.allMoney;
        this.historyCheckedLen = this.historyList.length;
      } else { //反选
        this.historyList.forEach(function(item) {
          item.checked = false;
        });
        this.historyCheckedLen = 0;
        this.historyCheckedMon = 0;
        this.orderIds = [];
      }
    },
    toPayCurrent(i, num) { // 缴纳本次在停费用
      var salt = this.$utils.myCommonSalt(32);
      var params = {
        app_id: this.$utils.myVarAppid,
        deviceInfo: this.$utils.myDeviceInfo,
        salt: salt,
        sign_type: "md5",
        orderId: i.orderId,
        payOrderType: "101",
        terminalSource: "3"
      };
      params.sign = this.$utils.signObject(params);
      appApplyParkOut(params).then(response => {
        console.log(response);
        if (response.code == "5005") {
          var salt = this.$utils.myCommonSalt(32);
          var jsondata = {
            app_id: this.$utils.myVarAppid,
            deviceInfo: this.$utils.myDeviceInfo,
            salt: salt,
            sign_type: "md5",
            payType: this.$utils.clientBrowsePayType(),
            appId: this.$utils.myVxAppId,
            orderId: i.orderId,
            terminalSource: "7",
            parkCode: i.parkCode,
            carNumber: this.carNumber
          };
          jsondata.sign = this.$utils.signObject(jsondata);
          parkingQuery(jsondata).then(result => {
            console.log(result);
            let res = result.data;
            let _dis = res.discountFee;
            let discountFee = _dis.slice(1, _dis.length - 1);
            this.$router.push(
              {
                path: "orderPay",
                query: {
                  carColor: this.carColor,// 车牌颜色
                  arrearageTotalFee: res.orderTotalFee,// 应收
                  arrearageDiscFee: discountFee * 100,// 优惠
                  arrearageActFee: res.orderFee,// 实收
                  carNumber: this.carNumber, // 车牌
                  paySrcType: 101, //支付的类型   101 是本次   103是历史欠费
                  ordeID: i.orderId, //支付的订单号
                  appOrderTimeout: res.appOrderTimeout // 超时描述
                }
              }
            );
          });
        } else {
          //$('.dialog-out').show()
          this.$msgbox("提示", "停车15分钟内无需缴费，申请成功。");
        }
      });
    },
    toPayHisroryPage() { // 缴纳历史费用
      if (this.historyCheckedLen == 0) {
        this.$msgbox("提示", "请至少选择一条记录");
        return;
      }
      let salt = this.$utils.myCommonSalt(32);
      let list = "[" + this.orderIds + "]";
      let jsondata = {
        app_id: this.$utils.myVarAppid,
        deviceInfo: this.$utils.myDeviceInfo,
        salt: salt,
        sign_type: "md5",
        payType: this.$utils.clientBrowsePayType(),
        // appId: this.$utils.myVxAppId,
        terminalSource: "7",
        orderIds: JSON.stringify(this.orderIds)
      };
      jsondata.sign = this.$utils.signObject(jsondata);
      console.log(jsondata);
      queryArrearageSta(jsondata).then(response => {
        console.log(response.data);
        let res = response.data;
        this.doOrderCreate(res.arrearageTotalFee, res.arrearageActFee, res.carArrearages[0].arrearageDiscFee);
        // let res = response.data.carArrearages[0]
        // console.log(res)
        // this.orderIds = JSON.stringify(this.orderIds)
        // sessionStorage.setItem('pageIds',this.orderIds)
        // console.log(this.orderIds)
      });
    },
    doOrderCreate(arrearageTotalFee, arrearageActFee, arrearageDiscFee) {
      var salt = this.$utils.myCommonSalt(32);
      // var list = "[" + this.orderIds + "]"
      console.log(this.orderIds);
      let carNumbers = [];
      carNumbers.push(this.carNumber);
      let jsondata = {
        app_id: this.$utils.myVarAppid,
        deviceInfo: this.$utils.myDeviceInfo,
        salt: salt,
        sign_type: "md5",
        orderBigType: 100,
        payOrderType: 103,
        terminalSource: this.$utils.commonTerminalSource,
        parkOrderIds: this.orderIds,
        operCode: "",
        operName: "",
        backDeveloperCode: "",
        backPlNo: "",
        orgId: this.$utils.myOrgId,
        orderTotalFee: arrearageTotalFee,
        orderActFee: arrearageActFee,
        token: "",
        backType: 2,
        carNumberList: carNumbers,
        payType: "12"
      };
      jsondata.sign = this.$utils.signObject(jsondata);
      console.log(jsondata);
      doOrderCreate(jsondata).then(response => {
        let res = response.data;
        this.$router.push(
          {
            path: "orderPay",
            query: {
              carColor: this.carColor,// 车牌颜色
              arrearageTotalFee: arrearageTotalFee,// 应收
              arrearageDiscFee: arrearageDiscFee,// 优惠
              arrearageActFee: arrearageActFee,// 实收
              carNumber: this.carNumber, // 车牌
              paySrcType: 103, //支付的类型   101 是本次   103是历史欠费
              ordeID: res.rltOrderId, //支付的订单号
              appOrderTimeout: "",
              // backDeveloperCode: response.data.inChargerCode
              backDeveloperCode: ""
            }
          }
        );
      });
    }
  },
  filters: {}
};
</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/parkPay/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/parkPay/carBlue.png") no-repeat 90px center;
        background-size: 28px 17px;
      }
      &.carYellow {
        background: url("../../assets/images/parkPay/carYellow.png") no-repeat 90px center;
        background-size: 28px 17px;
      }
      &.carGreen {
        background: url("../../assets/images/parkPay/carGreen.png") no-repeat 90px center;
        background-size: 28px 17px;
      }
      &.carWhite {
        background: url("../../assets/images/parkPay/carWhite.png") no-repeat 90px center;
        background-size: 28px 17px;
      }
      &.carBlack {
        background: url("../../assets/images/parkPay/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/parkPay/choose.png") no-repeat 10px center;
    background-size: 20px 20px;
    cursor: pointer;
  }
  .isChecked {
    background: #fff url("../../assets/images/parkPay/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/parkPay/choose.png") no-repeat 0 center;
      background-size: 20px 20px;
      cursor: pointer;
    }
    .isAllChecked {
      background: url("../../assets/images/parkPay/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/parkPay/noRecord.png") no-repeat center 60px;
    background-size: 161px 124px;
    text-align: center;
  }
</style>