BJ_web_developers / wxgzh

<template>
  <div style="height: 100%;display: flex;flex-direction: column;">
    <div style="flex: 1;overflow-y: auto;padding: 15px">
      <div class="noCardData" v-if="cardList.length == 0">
        <p>您目前没有任何会员卡,</p>

      </div>

      <div v-else>
        <div v-for="(i ,index) in cardList" class="cardBg"
             :class="{'nianka':i.cardType==1,'bannianka':i.cardType==2,'jika':i.cardType==3,'yueka':i.cardType==4,'rika':i.cardType==5,shixiao:i.cardStatus==0}"
        >
          <ul class="cardList">
            <li style="padding-left: 25px;">
              会员卡-
              {{i.cardType=="1"?"年卡":(i.cardType=="2"?"半年卡":(i.cardType=="3"?"季卡":(i.cardType=="4"?"月卡":(i.cardType=="5"?"日卡":""))))}}
            </li>
            <li>
              绑定车牌号： {{ i.carNumber }}
            </li>
            <li>
              有效时间段： {{i.effDate}} 至 {{i.expDate}}
            </li>
            <li>
              卡名称： {{ i.cardName }}
            </li>
          </ul>
          <div class="cardStatus"
               v-if="i.cardStatus==1"
               :class="{'niankaStatus':i.cardType==1,'banniankaStatus':i.cardType==2,'jikaStatus':i.cardType==3,'yuekaStatus':i.cardType==4,'rikaStatus':i.cardType==5}"
          >
            月卡生效中
          </div>
          <div class="cardStatus shixiaocardStatus" v-else>月卡已失效</div>
          <div class="renewBtn" @click="toReNew(i)"
               v-if="i.cardStatus==1"
               :class="{'niankaStatus':i.cardType==1,'banniankaStatus':i.cardType==2,'jikaStatus':i.cardType==3,'yuekaStatus':i.cardType==4,'rikaStatus':i.cardType==5}"
          >续费</div>
        </div>
        <!--cardType=='1'?'年卡':(cardType=='2'?'半年卡':(cardType=='3'?'季卡':(cardType=='4'?'月卡':(cardType=='5'?'日卡':''))))-->


      </div>


    </div>
    <!--<x-button type="primary" ></x-button>-->
    <!--<mt-button type="primary" size="large" @click.native="$router.push({path:'buyCard'})">购买会员卡</mt-button>-->
    <mt-button type="primary" size="large" @click.native="toBuy">购买会员卡</mt-button>
  </div>
</template>

<script>
import { queryVipCardsByCustId, queryVipCardsByCarNumberForH5 } from "@/api/cards/cards";
export default {
  name: "Cards",
  data() {
    return {
      cardList: [],
      custId:''
    };
  },
  mounted() {
    // this.queryVipCardsByCustId();
    this.queryVipCardsByCarNumberForH5()
  },
  methods: {
    // 获取会员卡列表
    queryVipCardsByCarNumberForH5:function(){
      let jsondata = this.$utils.commonParams();
      jsondata.carNumber = this.$route.query.carNumber
      jsondata.carNumberColor = this.$route.query.carNumberColor
      jsondata.sign = this.$utils.signObject(jsondata);
      queryVipCardsByCarNumberForH5(jsondata).then(data => {
        console.log(data);
        if (data.code == 0) {
          this.cardList = data.data
          if(this.cardList.length>0){
            this.custId = this.cardList[0].custId
          }
        } else {
          this.$vux.toast.text(data.message, "top");
        }
      });
    },
    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;
          this.cardList = res;
        } else {
          this.$vux.toast.text(data.message, "top");
        }
      });
    },
    // 续费
    toReNew: function(i) {
      console.log(i);
      sessionStorage.setItem("renewData", JSON.stringify(i));
      this.$router.push("renew");
    },

    // 购买
    toBuy:function() {
      this.$router.push({
        path:'buyCard',
        query:{
          carNumber:this.$route.query.carNumber,
          carNumberColor: this.$route.query.carNumberColor,
          custId:this.custId
        }
      })
    }
  }
};
</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;
    position: relative;
    background-image: url("../../assets/images/cards/cards.png");
    background-repeat: no-repeat;
    background-position: 20px 20px;
    background-size: 90% 90%;
    border-radius: 8px;
    margin-bottom: 15px;
    overflow: hidden;
  }
  .nianka{
    background-color: #dd6c1e;
  }
  .bannianka{
    background-color: #2A1DD2;
  }
  .jika{
    background-color: #DF6B1B;
  }

  .yueka{
    background-color:  #33CCFF;
  }
  .rika{
    background-color: #498816;
  }
  .shixiao{
    background-color: #ccc;
  }

  .cardList {
    padding: 20px 0 0 20px;
    color: #fff;
    li {
      line-height: 30px;
    }
  }
  .cardStatus{
    position: absolute;
    left: -22px;
    top: 21px;
    font-size: 12px;
    -webkit-transform: rotate(30deg);
    transform: rotate(-43deg);
    width: 100px;
    text-align: center;
    color: #fff;
  }
  .niankaStatus{
    background-color: #c17b12;
  }
  .yuekaStatus{
    background-color: #3989a3;
  }
  .banniankaStatus{
    background-color: #7972cb;
  }
  .jikaStatus{
    background-color: #f19f67;
  }
  .rikaStatus{
    background-color: #7edb33;
  }
  .shixiaocardStatus{
    background-color: #a59d9d;
  }

  .renewBtn {
    position: absolute;
    top: 20px;
    right: 20px;
    /*border: 1px solid #ffbe00;*/
    /*background: #ffbe00;*/
    color: #fff;
    padding: 2px 10px;
    border-radius: 4px;
    cursor: pointer;
  }

</style>