BJ_web_developers / wxgzh

  <template>
    <section class="">
      <div class="vipCardBg">

        <!--<ul class="cardTypeList">-->
        <!--<li>年卡</li>-->
        <!--<li>月卡</li>-->
        <!--<li>半年卡</li>-->
        <!--</ul>-->

        <div class="van-ellipsis" style="padding: 20px 0  10px 20px"> {{plName}}</div>
        <div class="van-ellipsis" style="padding: 0 0  0 20px">{{plAddress}}</div>

      </div>

      <van-cell-group inset style="margin-bottom: 10px;" v-for="(i,index) in list" @click="LinkBuyCard(i)" :key="index">
        <van-cell>

          <template #title>

            <span style="font-size: 20px;font-weight: 600;">{{i.cardType | capitalize}}优惠</span>

          </template>
        </van-cell>

        <van-cell :title="i.cardName" center value="立即购买" :label="'单价：'+(i.actPrice/100).toFixed(2)" is-link>

        </van-cell>
      </van-cell-group>
  

      <!--<van-cell-group inset style="margin-bottom: 10px;">-->

      <!--<van-cell >-->
      <!--<template #title>-->
      <!--<span style="font-size: 20px;font-weight: 600;">年卡</span>-->
      <!--</template>-->
      <!--</van-cell>-->
      <!--<van-cell title="万达月卡cardName" center value="立即购买" label="单价：￥1800.00"  is-link>-->
      <!--</van-cell>-->

      <!--</van-cell-group>-->

    </section>
  
  </template>
  
  <script>

  
  import { queryVipCardByPlNo } from "@/api/card/card";

  export default {
    name: "buyCardDetail",

    data() {
      return {
        plNo: "",
        plName: "",
        plAddress: "",
        list: []
      };

    },

    created() {
      this.plNo = this.$route.query.plNo;
      this.plName = this.$route.query.plName;
      this.plAddress = this.$route.query.plAddress;
      console.log(this.plNo);
      this.queryVipCardByPlNo();

    },

    methods: {
      LinkBuyCard(i) {

        this.$router.push({

            name: "buyVipCard",
            query: {
              cardName:i.cardName,
              carType:i.carType,
              cardType:i.cardType,
              actPrice:i.actPrice,
              discValue:i.discValue,
              cardNo:i.cardNo,
              plName:this.plName,
              plNo:this.plNo
            }

          }
        );

      },
      queryVipCardByPlNo() {
        let jsondata = {

          parkNo: this.plNo,

          saleChannel: "2"
        };
        jsondata.sign = this.$utils.signObject(jsondata);
        queryVipCardByPlNo(jsondata).then(response => {
          // console.log(response.data[0].parkList);

          console.log(response);

          this.list = response.data;

        });

      }

    },
    filters: {
      capitalize: function(value) {
        if (value == 1) {
          return "年卡";
        }
        if (value == 2) {
          return "半年卡";
        }
        if (value == 3) {
          return "季卡";
        }
        if (value == 4) {
          return "月卡";
        }
        if (value == 5) {
          return "日卡";
        }
        if (value == 6) {
          return "错峰年卡(周末免费)";
        }
        if (value == 7) {
          return "错峰月卡(周末免费)";
        }
        if (value == 8) {
          return "错峰夜晚包月";
        }
      }

    }
  };
  </script>
  
  <style scoped lang="less">
    .vipCardBg {
      margin-top: 14px;
      margin-left: 10px;
      margin-right: 10px;
      margin-bottom: 10px;
      /* width: 100%; */
      height: 150px;
      background-image: url('../../assets/images/cards/vipcardbg.png');
      background-repeat: no-repeat;
      /* background-position: center center; */
      background-size: 100% 100%;
      -moz-background-size: 100% 100%;
      font-size: 16px;
      color: #fff;
    }
  
    .cardTypeList {
      padding: 20px 0 10px 20px;
      overflow: hidden;
      > li {
        float: left;
        margin-right: 10px;
        padding: 2px 20px;
        border-radius: 10px;
        background: rgba(255, 255, 255, .3);
      }
    }
  </style>