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>
          <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: []
      };
    },
    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) {
  
          } 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
          }
        })

      }
    }
  };
  </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>