BJ_web_developers / codeScanning

  <template>

    <div style="height: 100%">

      <div 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<=1800">停车30分钟内无需缴费，请申请离场。</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<=1800">申请离场</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 v-show="currentTabActive==0" style="text-align:center;padding-top:20px;font-weight: 600;font-size: 16px;">
            可通过顶部标签分别查看在停和欠费记录
          </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>-->

      <!--<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>-->
  
  
      <!--<modal-alert ref="zeroAlert">-->

      <!--<div class="trave-tip-content txt-l" slot="content">-->
      <!--<div class="confirm-text">-->
      <!--<p>停车15分钟内无需缴费，申请成功。</p>-->
      <!--</div>-->
      <!--</div>-->
      <!--<span slot="button">知道了</span>-->

      <!--</modal-alert>-->

    </div>
  </template>
  
  <script>

  import {
    parkRecordList,
    historyQuery,
    parkingQuery,
    appApplyParkOut,
    queryArrearageSta,
    doOrderCreate
  } from "@/api/parkRecord/parkRecord.js";
  import axios from "axios";

  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.$Indicator.open({

        text: "加载中...",
        spinnerType: "fading-circle"
      });
      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;
      console.log(this.currentTabActive);
      console.log(this.carNumber);
      this.parkRecordList(10);

    },
    methods: {

      parkRecordList(_parkState) {  // 获取停车记录数据

        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: _parkState,

          terminalSource: 7,
          carNumber: this.carNumber,

          carNumberColor: this.carColor,

          orgId: sessionStorage.getItem("orgId")
        };
        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";
          });
          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);
          this.$Indicator.close();
        });

      },

      tabHandle(index) { // tab 切换

        this.currentTabActive = index;
        if (index == 0) {

          // this.parkRecordList(10)

        } else {
          this.allMoney = 0;
          this.historyList.forEach(i => {
            this.allMoney += Number(i.unPayFee);
          });

          // this.allChecked = false
          // this.parkRecordList(10)

        }

      },
      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) { // 缴纳本次在停费用

        let salt = this.$utils.myCommonSalt(32);
        let 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);
              console.log(i.orderId);
              // sessionStorage.setItem("pageIds", i.orderId);

              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 + "]";

        console.log(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/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>