fohow_wx/src/views/user/invite/Recode.vue

<template>
  <div class="agent-recode">
    <div class="recode-top">
      <div class="top-title">我的邀请</div>
      <div class="top-info">
        <div class="info-left">
          <div class="info-count">{{total_count}}人</div>
          <div class="info-text">邀请总人数</div>
        </div>
      </div>
    </div>
    <div class="recode-list">
      <div class="list-top">
        <div :class="[ iscur === 0 ? activeClass : '', 'list-left' ]" data-current="0" @click="changebar">一级分销</div>
        <div :class="[ iscur === 1 ? activeClass : '', 'list-right' ]" data-current="1" @click="changebar">二级分销</div>
        <div class="list-line" :style="tableft"></div>
        <div class="clear"></div>
      </div>
      <div class="list-center">
        <van-list v-model="isUpLoading" :finished="upFinished" finished-text="" @load="onLoadList" :offset="offset" v-if="iscur === 0">
          <div class="list-item" v-for="(item, index) in inlist" :key="index">
            <div class="item-top">
              <img :src="item.head" class="item-head" alt="">
              <div class="item-name" v-if="item.nickname">{{item.nickname}}</div>
              <div class="item-name" v-if="!item.nickname">微信用户</div>
              <!-- <div class="item-num">({{item.id}})</div> -->
              <div class="item-time">{{item.create_time | formatSTime}}</div>
              <div class="clear"></div>
            </div>
          </div>
          <div class="list-none" v-show="shownone">
            <img src="@/assets/img/h.png" class="none-img" alt="">
            <div class="none-text">当前数据为空</div>
          </div>
        </van-list>
      </div>
      <div class="list-center">
        <van-list v-model="isUpLoading1" :finished="upFinished1" finished-text="" @load="onLoadList1" :offset="offset1" v-if="iscur === 1">
          <div class="list-item" v-for="(item, index) in outlist" :key="index">
            <div class="item-top">
              <img :src="item.head" class="item-head" alt="" v-if="item.head">
              <img src="@/assets/img/wx.png" class="item-head" alt="" v-if="!item.head">
              <div class="item-name" v-if="item.nickname">{{item.nickname}}</div>
              <div class="item-name" v-if="!item.nickname">微信用户</div>
              <!-- <div class="item-num">({{item.id}})</div> -->
              <div class="item-time">{{item.create_time | formatSTime}}</div>
              <div class="clear"></div>
            </div>
          </div>
          <div class="list-none" v-show="shownone1">
            <img src="@/assets/img/h.png" class="none-img" alt="">
            <div class="none-text">当前数据为空</div>
          </div>
        </van-list>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  name: '',
  props: {
  },
  data () {
    return {
      shownone: false,
      shownone1: false,
      inlist: [],
      intotal: 0,
      outlist: [],
      outtotal: 0,
      activeClass: 'active',
      iscur: 0,
      tableft: {
        left: '0.96rem'
      },
      recode: {},
      page: 1,
      per_page: 10,
      page1: 1,
      per_page1: 10,
      offset: 5,
      offset1: 5,
      isUpLoading: false,
      upFinished: false,
      isUpLoading1: false,
      upFinished1: false,
      tab: true,
      tab1: true,
      total_count: '',
      id: 0
    }
  },
  created () {
    // this.$store.dispatch('userInfo')
    // this.getrecode()
    // if (this.$route.query.invite_id) {
    //   this.id = this.$route.query.invite_id
    // }
  },
  components: {},
  computed: {
    ...mapGetters(['userInfo'])
  },
  beforeMount() {},
  mounted() {},
  methods: {
    in () {
      this.$get({
        url: `v1/invite/${this.$route.query.id}/list`,
        data: {
          page: this.page,
          per_page: this.per_page,
        }
      }).then((res) => {
        this.total_count = res.total_count
        this.tab = false
        if (this.page === 1) {
          this.inlist = []
          this.intotal = 0
        }
        this.page++
        this.isUpLoading = false
        this.inlist = this.inlist.concat(res.list || [])
        this.intotal = res.list_count
        if (this.inlist.length >= this.intotal) {
          this.upFinished = true
        }
        if (this.intotal === 0) {
          setTimeout(() => {
            this.shownone = true
          }, 100)
        } else {
          this.shownone = false
        }
      })
    },
    out () {
      this.$get({
        url: `v1/invite/${this.$route.query.id}/frend/list`,
        data: {
          page: this.page1,
          per_page: this.per_page1,
        }
      }).then((res) => {
        this.tab1 = false
        if (this.page1 === 1) {
          this.outlist = []
          this.outtotal = 0
        }
        this.page1++
        this.isUpLoading1 = false
        this.outlist = this.outlist.concat(res.list || [])
        this.outtotal = res.list_count
        if (this.outlist.length >= this.outtotal) {
          this.upFinished1 = true
        }
        if (this.outtotal === 0) {
          setTimeout(() => {
            this.shownone1 = true
          }, 100)
        } else {
          this.shownone1 = false
        }
      })
    },
    onLoadList () {
      setTimeout(() => {
        this.in()
      }, 100)
    },
    onLoadList1 () {
      setTimeout(() => {
        this.out()
      }, 100)
    },
    getrecode () {
      this.$get({
        url: 'v1/agent/invite_mater',
        data: {
        }
      }).then((res) => {
        this.recode = res
      })
    },
    changebar (e) {
      if (this.iscur === parseInt(e.target.dataset.current)) {
        return false
      } else {
        this.iscur = parseInt(e.target.dataset.current)
        if (this.iscur === 0) {
          this.tableft.left = '0.96rem'
        } else if (this.iscur === 1) {
          this.tableft.left = '4.32rem'
        }
      }
    }
  },
  watch: {
    // 'userInfo': function (val) {
    //   console.log(val)
    //   this.id = val.wx_user.id
    // }
  }
}
</script>
<style lang='less' scoped>
.agent-recode {
  background: #eeeeed;
  min-height: 100%;
  overflow: hidden;
  text-align: left;
  .recode-top {
    width: 7.1rem;
    margin: 0.2rem auto;
    background: #fff;
    box-sizing: border-box;
    padding: 0 0.2rem;
    border-radius: 0.1rem;
    overflow: hidden;
    .top-title {
      color: #acbac3;
      font-size: 0.32rem;
      font-weight: 600;
      padding-top: 0.25rem;
      padding-bottom: 0.25rem;
    }
    .top-info {
      display: flex;
      display: -webkit-flex;
      justify-content: space-between;
      flex-wrap: nowrap;
      text-align: center;
      margin-bottom: 0.3rem;
      .info-left {
        flex-grow: 1;
        height: 1.1rem;
        border-right: 0.02rem solid #eee;
        .info-count {
          font-size: 0.26rem;
          color: #ff595d;
          margin-top: 0.1rem;
          margin-bottom: 0.1rem;
        }
        .info-text {
          font-size: 0.26rem;
          color: #999999;
        }
      }
      .info-center {
        flex-grow: 1;
        height: 1.1rem;
        border-right: 0.02rem solid #eee;
        .info-count {
          font-size: 0.26rem;
          color: #4c4c4c;
          margin-top: 0.1rem;
          margin-bottom: 0.1rem;
        }
        .info-text {
          font-size: 0.26rem;
          color: #999999;
        }
      }
      .info-right {
        flex-grow: 1;
        height: 1.1rem;
        .info-count {
          font-size: 0.26rem;
          color: #4c4c4c;
          margin-top: 0.1rem;
          margin-bottom: 0.1rem;
        }
        .info-text {
          font-size: 0.26rem;
          color: #999999;
        }
      }
    }
  }
  .recode-list {
    background: #fff;
    border-radius: 0.1rem;
    box-sizing: border-box;
    padding: 0 0.2rem 0.2rem;
    margin: 0.2rem auto 0.2rem;
    width: 7.1rem;
    position: relative;
    .list-top {
      height: 0.75rem;
      width: 100%;
      border-bottom: 0.02rem solid #eee;
      position: relative;
      .list-left {
        width: 50%;
        color: #acbac3;
        text-align: center;
        float: left;
        font-size: 0.26rem;
        height: 0.75rem;
        line-height: 0.75rem;
      }
      .list-right {
        width: 50%;
        color: #acbac3;
        text-align: center;
        float: left;
        font-size: 0.26rem;
        height: 0.72rem;
        line-height: 0.72rem;
      }
      .list-line {
        width: 1.45rem;
        height: 0.02rem;
        background: #28cd5e;
        position: absolute;
        left: 0;
        bottom: 0;
        transition: left 0.4s;
      }
      .active {
        color: #28cd5e;
      }
    }
    .list-center {
      .list-none {
        position: absolute;
        top: 2.5rem;
        left: 50%;
        transform: translateX(-50%);
        .none-img {
          height: 2.1rem;
          width: 1.7rem;
        }
        .none-text {
          color: #999;
          font-size: 0.26rem;
          padding-top: 0.2rem;
        }
      }
      .list-item {
        // height: 1.6rem;
        width: 100%;
        margin-top: 0.2rem;
        background: #fff;
        box-sizing: border-box;
        padding: 0 0.2rem;
        .item-top {
          // height: 0.88rem;
          border-bottom: 0.02rem solid #ccc;
          width: 100%;
          padding-bottom: 0.25rem;
          .item-head {
            height: 0.5rem;
            width: 0.5rem;
            // background: pink;
            border-radius: 50%;
            float: left;
            margin-right: 0.2rem;
            margin-top: 0.2rem;
          }
          .item-name {
            color: #4c4c4c;
            font-size: 0.26rem;
            margin-right: 0.2rem;
            float: left;
            margin-top: 0.26rem;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
            max-width: 2.5rem;
          }
          .item-num {
            color: #4c4c4c;
            font-size: 0.26rem;
            float: left;
            margin-top: 0.26rem;
          }
          .item-time {
            color: #708fa3;
            font-size: 0.26rem;
            float: right;
            margin-top: 0.28rem;
          }
        }
        .item-bottom {
          padding-bottom: 0.3rem;
          .bottom-left {
            float: left;
            color: #4c4c4c;
            font-size: 0.26rem;
            margin-top: 0.2rem;
          }
          .bottom-right {
            float: right;
            color: #4c4c4c;
            font-size: 0.26rem;
            margin-top: 0.2rem;
          }
          .bottom-bottom {
            color: #4c4c4c;
            font-size: 0.26rem;
            margin-top: 0.2rem;
          }
        }
      }
    }
  }
}
</style>