BJ_web_developers / codeScanning

  <template>
    <div>
      <div style="height: 206px;">
        <div class="swiper-container">
          <div class="swiper-wrapper">

            <div class="swiper-slide" v-for="item in swiperData" :key="item.id"
                 :style="{backgroundImage:'url(' + item.url + ')'}"
                 @click="openImgUrl(item)"

            ></div>
          </div>
          <!-- 如果需要分页器 -->
          <div class="swiper-pagination"></div>
  
          <!-- 如果需要滚动条 -->
          <!--    <div class="swiper-scrollbar"></div>-->
        </div>
      </div>
      <p class="carNumberTip">
        请确认您当前缴费车牌号
      </p>
  
      <div class="car-wrap">
        <div class="carBG" :class="carWrapBG | formateColor">
          <p class="carNumber">{{carNumber}}</p>
        </div>
  

        <p class="toParkRecord" @click="toParkRecord">

          是我的车，去支付
        </p>
  

        <p class="toPlateNumber" @click="toPlateNumber">

          不是我的车，手动输入
        </p>
  
      </div>
  
  
    </div>
  </template>
  
  <script>
  import Swiper from 'swiper' //  应入swiper

  import {swiperQuery} from '../api/navigation/navigation'
  

  export default {
    name: 'navigation',
    data() {
      return {
        carNumber: '',  // 车牌号码
        carWrapBG: 0,// 车牌颜色
        swiperData: [], // 轮播数据
      }
    },
    mounted() {
      this.carNumber = this.$route.query.carNumber  // 车牌号码
      this.carWrapBG = this.$route.query.carNumberColor // 车牌颜色
      console.log(this.carNumber)
  
    },
    created() {
      this.initSWiper()
    },
    methods: {

      initSWiper() {

        var salt = this.$utils.myCommonSalt(32)
        var jsondata = {
          app_id: this.$utils.myVarAppid,
          deviceInfo: this.$utils.myDeviceInfo,
          salt: salt,
          sign_type: 'md5',
          sign: '1',

          orgId: this.$utils.myOrgId,

          jumpType: '8'
        };
        // jsondata = JSON.stringify(jsondata);

        swiperQuery(jsondata).then(res => {

          this.swiperData = res.data
          console.log(this.swiperData)

          new Swiper('.swiper-container', {

            pagination: '.swiper-pagination',
            paginationClickable: true,
            centeredSlides: true,
            notNextTick: true,
            autoplay: 5000,
            autoplayDisableOnInteraction: true,
  
            observer: true,       //修改swiper自己或子元素时，自动初始化swiper
            observeParents: true, //修改swiper的父元素时，自动初始化swiper
            onSlideChangeStart: function (swiper) {
              //console.log(swiper.activeIndex)
            }
          })
        })
      },

      openImgUrl(i) { // 点击图片跳转

        window.open(i.jumpUrl)

      },
      toPlateNumber() { //  前往输入车牌页面
        this.$router.push({
            path: 'plateNumber',
  
          }
        )
      },
      toParkRecord() { //  前往停车记录页面
        this.$router.push({
          path: 'parkRecord',
          query: {
            carNumber: this.carNumber,
            carNumberColor: this.carWrapBG
          }
        })
      },

    }
  }
  </script>
  
  <style scoped lang="scss">

    .swiper-container {

      height: 206px;
    }

  
    .swiper-slide {

      /*width: 100%;*/
      height: 206px;
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }

    .carNumberTip {
      width: 200px;
      margin: 20px auto 10px;
      padding-left: 20px;
      background: url("../assets/images/tip.png") no-repeat 0 center;
      background-size: 14px 14px;
      text-align: center;
    }
  
    .car-wrap {
      padding: 0px 40px;
      background: #FFF;
    }
  
    .carBG {
      width: 100%;
      height: 100px;
      line-height: 100px;
      text-align: center;
      font-size: 24px;
      color: #fff;
    }

    .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%;
    }

  
    .toParkRecord {

      margin-top: 40px;
      margin-bottom: 20px;
      height: 50px;
      line-height: 50px;
      font-size: 16px;
      text-align: center;
      background: url("../assets/images/toParkRecord.png") no-repeat;
      background-size: 100% 50px;
      cursor: pointer;
    }

  
    .toPlateNumber {

      text-align: right;
      cursor: pointer;
    }
  
  </style>