src/views/cards/cardList.vue

<template>
  <section style="padding: 0 10px">
    <van-row>
      <van-col span="18">
        <van-search
          v-model="value"
          placeholder="请输入搜索关键词"
          @search="onSearch"
        />
      </van-col>
      <van-col span="6" style="margin-top: 5px;">
        <van-button type="info" round block @click="toOwnCards">续费</van-button>
      </van-col>
    </van-row>
    <ul v-if="cardList.length>0">
      <li class="cardListWrap" v-for="i in cardList[0].parkList" @click="toBuyCardPage(i)">
        <div class="van-ellipsis" style="padding: 20px 0  10px 10px">{{i.plName}}</div>
        <div class="van-ellipsis" style="padding: 10px 0  20px 10px;color: #999">{{i.plAddress}}</div>
      </li>
    </ul>
    <section style="text-align: center;padding-top: 20px" v-else>
      <van-image :src="require('../../assets/images/cards/novipcard.png')"/>
      <p>未找到会员卡</p>
    </section>
  </section>
</template>
<script>
import { queryVipCardListByOrgId, queryVipCardListByPlName } from "@/api/card/card";
export default {
  name: "cardList",
  data() {
    return {
      value: "",
      cardList: []
    };
  },
  created() {
    this.queryVipCardListByOrgId();
  },
  methods: {
    onSearch(val) {
      console.log("111" + val);
      // Toast(val);
      let jsondata = {
        orgId: this.$utils.orgId,
        parkName: val,
        saleChannel: "2"
      };
      jsondata.sign = this.$utils.signObject(jsondata);
      queryVipCardListByPlName(jsondata).then(response => {
        // console.log(response.data[0].parkList);
        this.cardList = response.data;
        console.log(response);
      });
    },
    onCancel() {
      // Toast('取消');
    },
    toBuyCardPage(i) {
      this.$router.push({
          name: "buyCardDetail",
          query: {
            plNo: i.plNo,
            plName: i.plName,
            plAddress: i.plAddress
          }
        }
      );
    },
    queryVipCardListByOrgId() {
      let jsondata = {
        orgId: this.$utils.orgId,
        latitude: "115.10114",
        longitude: "40.616892",
        type: "00",
        limit: "1000",
        saleChannel: "2"  // 办理渠道, 1：APP 4：微信小程序
      };
      jsondata.sign = this.$utils.signObject(jsondata);
      queryVipCardListByOrgId(jsondata).then(response => {
        console.log(response.data);
        this.cardList = response.data;
      });
    },
    toOwnCards() {
      this.$router.push({
          name: "ownCards",
        }
      );
    }
  }
};
</script>
<style scoped>
  .cardListWrap {
    margin-top: 15px;
    margin-left: 0px;
    margin-right: 0px;
    width: 100%;
    height: 106px;
    background: url("../../assets/images/cards/vipcardbg1.png") no-repeat;
    background-size: 100% 100%;
    font-size: 16px;
  }
</style>