src/components/navigation.vue

<template>
  <div>
    <div class="car_charge_bg">
    </div>
    <van-button class="bg_title" type="primary" size="mini">集团车辆点击此处验证</van-button>
    <van-cell-group>
      <van-cell title="充电单价" value="1.20元/小时" size="large"/>
      <van-cell title="充电服务费" value="0.30元/小时" size="large"/>
      <van-cell title="充电功率" value="100KW" size="large"/>
      <van-cell title="充电编码" value="1011111" label="充值完成后自动开始充电" size="large"/>
    </van-cell-group>
    <div>
      <p style="padding-left: 16px;">
        <span style="font-size: 16px;">请选择充电金额</span>
        <span style="font-size: 14px; color: #999;">(充电完成后自动退款剩余金额)</span>
      </p>
    </div>
    <van-grid :gutter="16">
      <van-grid-item v-for="(value, index) in moneyList" :key="value" :text="value+'元'"
                     :class="{'activeColor':index==currentIndex}" @click="moneyChage(index)"/>
    </van-grid>
    <div style="padding: 25px 16px">
      <van-button type="primary" block>确定充值</van-button>
    </div>
  </div>
</template>
<script>
import { swiperQuery } from "../api/navigation/navigation";
export default {
  name: "navigation",
  data() {
    return {
      currentIndex: 0,
      moneyList: [
        "10", "20", "30", "50", "80", "100", "150", "200"
      ],
      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: {
    moneyChage(_index) {
      this.currentIndex = _index;
    },
    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);
      });
    },
    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>
  .car_charge_bg {
    width: 120px;
    height: 120px;
    margin: 25px auto;
    background: url("../assets/images/car.png") no-repeat;
    background-size: 100% 100%;
    position: relative;
  }
  .bg_title{
    position: absolute;
    top:20px;
    right: 16px;
  }
  >>> .van-grid-item__text {
    font-size: 18px;
  }
  .activeColor >>> .van-grid-item__content {
    border: 1px solid #01CF97;
  }
  .activeColor >>> .van-grid-item__text {
    color: #01CF97 !important;
  }
</style>