src/views/parkPay/navigation.vue

<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">
        是我的车，去支付
      </p>
      <p class="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: '7'
      };
      // 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)
    }
  }
}
</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/parkPay/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/parkPay/blueBG.png") no-repeat;
    background-size: 100% 100%;
  }
  .carYellow {
    background: url("../../assets/images/parkPay/yellowBG.png") no-repeat;
    background-size: 100% 100%;
  }
  .carGreen {
    background: url("../../assets/images/parkPay/greenBG.png") no-repeat;
    background-size: 100% 100%;
  }
  .carWhite {
    background: url("../../assets/images/parkPay/whiteBG.png") no-repeat;
    background-size: 100% 100%;
  }
  .carBlack {
    background: url("../../assets/images/parkPay/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/parkPay/toParkRecord.png") no-repeat;
    background-size: 100% 50px;
    cursor: pointer;
  }
  .toPlateNumber{
    text-align: right;
    cursor: pointer;
  }
</style>