<template>
  <div style="height: 100%;display: flex;flex-direction: column;">
    <div style="flex: 1;overflow-y: auto;padding: 15px">
      <div v-if="cardList.length == 0" class="noCardData">
        <p>您目前没有任何会员卡,</p>
        <p>请绑定车牌通过认证后再购买会员卡!</p>
      </div>
      <div class="cardBg">
        <ul class="cardList">
          <li>
            会员卡- 月卡
          </li>
          <li>
            绑定车牌号： 京A12312
          </li>
          <li>
            有效时间段： 2021-11-11 至 2021-12-10
          </li>
          <li>
            适用停车场： 万达停车场
          </li>
        </ul>
      </div>
      <div class="cardBg">
        <ul class="cardList">
          <li>
            会员卡- 月卡
          </li>
          <li>
            绑定车牌号： 京A12312
          </li>
          <li>
            有效时间段： 2021-11-11 至 2021-12-10
          </li>
          <li>
            适用停车场： 万达停车场
          </li>
        </ul>
      </div>
    </div>
    <x-button type="primary" @click.native="$router.push({path:'CardList'})">购买会员卡</x-button>
  </div>
</template>

<script>
import { queryVipCardsByCustId } from "@/api/cards/cards";
export default {
  name: "Cards",
  data() {
    return {
      cardList: []
    };
  },
  mounted() {
    this.queryVipCardsByCustId();
  },
  methods: {
    queryVipCardsByCustId: function() {
      let jsondata = this.$utils.commonParams();
      jsondata.sign = this.$utils.signObject(jsondata);
      queryVipCardsByCustId(jsondata).then(data => {
        console.log(data);
        if (data.code == 0) {
          let res = data.data;
        } else {
          this.$vux.toast.text(data.message, "top");
        }
      });
    }
  }
};
</script>

<style scoped lang="scss">
  .noCardData {
    padding-top: 130px;
    background: url("../../assets/images/cards/nodata.png") no-repeat center 0;
    background-size: 121px 100px;
    text-align: center;
  }

  .cardBg {
    width: 100%;
    height: 150px;
    background: #26a2ff url("../../assets/images/cards/cards.png") no-repeat 20px 20px;
    background-size: 90% 90%;
    border-radius: 8px;
    margin-bottom: 15px;
  }
  .cardList{
    padding: 20px 0 0 20px;
    color: #fff;
    li{
      line-height: 30px;
    }
  }

</style>
