CardList.vue 2 KB
<template>
  <div style="padding: 15px">
    <div class="cardBg">
      <ul class="cardList" @click="$router.push({path:'buyCard'})">
        <li style="display: flex;justify-content: space-between">
          <span style="background: blue;padding: 2px 8px;">月卡</span> <span>测试</span>
        </li>
        <li>
          +  购买会员卡
        </li>
        <li>
          ¥  100.00
        </li>
        <li>
          活动有效期: 2021.05.11 - 2022.01.31
        </li>
      </ul>
    </div>
    <div class="cardBg">
      <ul class="cardList">
        <li style="display: flex;justify-content: space-between">
          <span style="background: blue;padding: 2px 8px;">月卡</span> <span>测试</span>
        </li>
        <li>
          +  购买会员卡
        </li>
        <li>
          ¥  100.00
        </li>
        <li>
          活动有效期: 2021.05.11 - 2022.01.31
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { queryVipAreaCardByOrgId } from "@/api/cards/cards";

export default {
  name: "CardList",
  data(){
    return{

    }
  },
  mounted(){
    this.queryParkListForVipCard()
  },
  methods:{
    queryParkListForVipCard: function() {
      let jsondata = this.$utils.commonParams();
      jsondata.saleChannel = '2' // 售卖渠道:1-APP、2-公众号、3-平台
      jsondata.sign = this.$utils.signObject(jsondata);
      queryVipAreaCardByOrgId(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">
  .cardBg {
    width: 100%;
    height: 150px;
    background: #0099FF url("../../assets/images/cards/cards.png") no-repeat 20px 20px;
    background-size: 90% 90%;
    border-radius: 8px;
    margin-bottom: 15px;
  }

  .cardList {
    padding: 20px 20px 0 20px;
    color: #fff;
    li {
      margin-bottom: 10px;
      /*line-height: 30px;*/
    }
  }
</style>