• liwei's avatar
    liwei · 440a28fa
    liwei authored
    440a28fa
inviteRecordList.vue 3.61 KB
<template>
  <div class="invite-record-list">
    <div class="title" ref="title">
      <span>已邀好友</span>
      <span>购买时间</span>
    </div>
    <scroll
      ref="scrollItem"
      class="scrollItem"
      :data="list"
      :pullup="pullup"
      :bounce="false"
      @pullup="onReachBottom"
    >
      <div class="container">
        <ul>
          <li v-for="(item,index) in list" :key="index">
            <p>{{item.nickname}}</p>
            <p>{{item.pay_at}}</p>
          </li>
        </ul>
        <div v-if="finished" class="none">没有更多了~</div>
      </div>
    </scroll>
  </div>
</template>
<script>
import { getInviteListApi } from "../../service/api";
import { Toast } from "vant";

export default {
  name: "inviteRecordList",
  data() {
    return {
      total: 0,
      height: 0,
      pullup: true,
      page: 1,
      loading: true,
      finished: false,
      list: []
    };
  },
  mounted() {
    this.height =
      window.innerHeight -
      this.$refs.title.getBoundingClientRect().bottom -
      this.$refs.title.getBoundingClientRect().height;
    this.getInviteList();
  },
  methods: {
    onReachBottom() {
      if (!this.finished && this.loading) {
        this.page++;
        this.loading = false;
        Toast.loading({
          mask: true,
          message: ""
        });
        this.page++;
        let json = {
          page: this.page,
          limit: 20
        };
        getInviteListApi(json, this.id).then(res => {
          if (res) {
            if (res.list && res.list.length > 0) {
              res.list.forEach(element => {
                this.records.push(element);
              });
              if (res.total == this.records.length) {
                this.finished = true;
              }
            }
          }
          Toast.clear();
        });
      }
    },
    getInviteList() {
      let json = {
        page: this.page,
        limit: 20
      };
      let id = this.$route.query.shopId;
      this.id = id;
      getInviteListApi(json, this.id).then(res => {
        if (res) {
          if (res.list && res.list.length > 0) {
            this.list = res.list;
          }
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
@import "../../util/public";
@tocurrentvw : 1/2 * @toVw;
@tocurrentvh : 1/2 * @toVh;
.invite-record-list {
  // display: flex;
  height: 100vh;
  overflow: hidden;
  box-sizing: border-box;
  flex-direction: column;
  // margin: 64 * @tocurrentvh auto;
  // padding:64 * @tocurrentvh auto ;
  width: 688 * @tocurrentvw;
  .title {
    margin-top: 32 * @toVw;
    // margin: 0;
    height: 76 * @tocurrentvh;
    display: flex;
    align-items: center;
    background-color: #fbebe3;
    border-radius: 5 * @tocurrentvw;
    font-size: 28 * @tocurrentvw;
    font-weight: 400;
    color: #eb7162;
  }
  .scrollItem {
    height: 80vh;
    width: 100%;
    margin-top: 0;
    overflow: hidden;
  }
  .container {
    margin: 0;
    width: 100%;
    overflow: hidden;
    // height: 200px;
    ul {
      li {
        height: 65 * @tocurrentvh;
        width: 100%;
        display: flex;
        align-items: center;
        border-radius: 5 * @tocurrentvw;
        font-size: 28 * @tocurrentvw;
        font-weight: 400;
        color: #696765;
        &:nth-child(odd) {
          background-color: #fff;
        }
        &:nth-child(even) {
          background-color: #fffaf8;
          background-color: rgba(251, 235, 227, 0.7);
        }
        p {
          text-align: center;
          width: 40%;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
      }
    }
  }
}
</style>