BJ_web_developers / codeScanning

  <template>
    <div>
      <div class="car-wrap">

        <div class="carBG" :class="carWrapBG | formateColor">
          <p class="carNumber">{{carNumber}}</p>

          <p class="payFee">{{(arrearageActFee/100).toFixed(2)}}元</p>

        </div>
      </div>
  

      <ul class="fee-wrap">
        <li>
          <span>待缴金额</span>

          <span>{{(arrearageActFee/100).toFixed(2)}}</span>

        </li>
        <li>
          <span>优惠金额</span>

          <span>{{(arrearageDiscFee/100).toFixed(2)}}</span>

        </li>
        <li>
          <span>应付金额</span>

          <span>{{(arrearageActFee/100).toFixed(2)}}</span>

        </li>
      </ul>
      <div style="padding: 20px 18px">

        <div class="toPay">{{clientBrowser}}支付</div>

      </div>
  
      <p class="tip">
        温馨提示：
      </p>
      <p style="color: #666;padding: 0 18px;">
        请在支付完成后15分钟内出场，如超出15分钟，会
        产生相应费用。
      </p>
  
  

    </div>
  </template>
  
  <script>
  export default {

    name: 'orderPay',
    data() {
      return {
        carWrapBG: 0,
        carNumber: '京A12312',

        arrearageActFee: 0,
        arrearageDiscFee:0,
        arrearageActFee:0,
        clientBrowser:'', // 客户端

      }
    },
    created() {

      this.carWrapBG = this.$route.query.carColor //车牌颜色
      this.carNumber = this.$route.query.carNumber
      this.arrearageTotalFee = this.$route.query.arrearageTotalFee
      this.arrearageDiscFee = this.$route.query.arrearageDiscFee
      this.arrearageActFee = this.$route.query.arrearageActFee
      this.clientBrowser = this.$utils.clientBrowser() //支付方式
        // arrearageTotalFee: res.arrearageTotalFee,//车牌颜色
        // arrearageDiscFee: res.arrearageDiscFee,//车牌颜色
        // arrearageActFee: res.arrearageActFee,//车牌颜色
        // carNumber: this.carNumber // 车牌

    },
    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">
    .car-wrap {
      padding: 7px 7px;

      background: #FFF;

    }
  
    .carBG {
      width: 100%;
      height: 130px;

    }
    .carBlue{
      background: url("../assets/images/blueBG.png") no-repeat;
      background-size: 100% 100%;
    }
    .carYellow{

      background: url("../assets/images/yellowBG.png") no-repeat;
      background-size: 100% 100%;
    }

    .carGreen{
      background: url("../assets/images/greenBG.png") no-repeat;
      background-size: 100% 100%;
    }
    .carWhite{
      background: url("../assets/images/whiteBG.png") no-repeat;
      background-size: 100% 100%;
    }
    .carBlack{
      background: url("../assets/images/blackBG.png") no-repeat;
      background-size: 100% 100%;
    }
  
    .carNumber {
      padding: 20px 0 10px;
      font-size: 30px;
      color: #fff;
      text-align: center;
    }
  
    .payFee {
      font-size: 24px;
      color: #FF7B7B;
      text-align: center;
    }
  
    .fee-wrap {
      background: #FFF;
      padding: 0 18px;
      > li {
        display: flex;
        justify-content: space-between;
        height: 30px;
        line-height: 30px;
        border-bottom: 1px solid #EAEAEA;
        &:last-child {
          border-bottom: 0;
        }
      }
  
    }
  
    .toPay {
      width: 100%;
      height: 44px;
      margin: 0 auto;
      line-height: 44px;
      text-align: center;
      background: linear-gradient(180deg, #3885D9 0%, #4194EF 100%);
      border-radius: 4px;
      border: 1px solid #0D72E2;
      font-size: 20px;
      color: #FFF;
      cursor: pointer;
    }
    .tip{
      padding-left: 40px;
      background: url("../assets/images/free-tip.png") no-repeat 18px center;
      background-size: 16px 16px;
      color: #666;
    }

  </style>