kxmall-ui/kxmall-app-ui/pages/user/promotion/PromoterList.vue

<template>
  <view class="promoter-list">
    <!-- 头部背景 -->
    <view class="header">
      <view class="promoter-count">
        <view class="title">推广总人数</view>
        <view class="count">{{ (parseInt(first) || 0) + (parseInt(second) || 0) }}<text class="unit">人</text></view>
        <view class="subtitle">您已成功推广的会员总数</view>
      </view>
    </view>

    <!-- 筛选导航 -->
    <view class="nav acea-row row-around">
      <view class="item" :class="screen.grade == 0 ? 'on' : ''" @click="checkGrade(0)">一级({{ first || '0' }})</view>
      <view class="item" :class="screen.grade == 1 ? 'on' : ''" @click="checkGrade(1)">二级({{ second || '0' }})</view>
    </view>

    <!-- 搜索框 -->
    <view class="search acea-row row-between-wrapper">
      <form @submit.prevent="submitForm">
        <view class="input">
          <input placeholder="点击搜索会员名称" v-model="screen.keyword" />
          <text class="iconfont icon-guanbi" @click="screen.keyword = ''"></text>
        </view>
      </form>
      <view class="iconfont icon-sousuo2"></view>
    </view>

    <!-- 排序导航 -->
    <view class="sortNav acea-row row-middle" :class="fixedState === true ? 'on' : ''">
      <view class="sortItem" @click="sort('childCount')">
        团队排序
        <image src="../../../static/user/sort1.png" v-if="childCount == 1" />
        <image src="../../../static/user/sort2.png" v-if="childCount == 2" />
        <image src="../../../static/user/sort3.png" v-if="childCount == 3" />
      </view>
      <view class="sortItem" @click="sort('numberCount')">
        金额排序
        <image src="../../../static/user/sort1.png" v-if="numberCount == 1" />
        <image src="../../../static/user/sort2.png" v-if="numberCount == 2" />
        <image src="../../../static/user/sort3.png" v-if="numberCount == 3" />
      </view>
      <view class="sortItem" @click="sort('orderCount')">
        订单排序
        <image src="../../../static/user/sort1.png" v-if="orderCount == 1" />
        <image src="../../../static/user/sort2.png" v-if="orderCount == 2" />
        <image src="../../../static/user/sort3.png" v-if="orderCount == 3" />
      </view>
    </view>

    <!-- 列表内容 -->
    <view :class="fixedState === true ? 'sortList' : ''">
      <view class="item acea-row row-between-wrapper" v-for="(val, spreadListIndex) in spreadList" :key="spreadListIndex">
        <view class="picTxt acea-row row-between-wrapper">
          <view class="pictrue">
            <image :src="val.avatar" />
          </view>
          <view class="text">
            <view class="name line1">{{ val.nickname }}</view>
            <view>加入时间: {{ val.time }}</view>
          </view>
        </view>
        <view class="right">
          <view>
            <text class="font-color-red">{{ val.childCount }}</text>人
          </view>
          <view>{{ val.orderCount }} 单</view>
          <view>{{ val.numberCount ? val.numberCount : 0 }} 元</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'PromoterList',
  props: {},
  data: function () {
    return {
      fixedState: false,
      screen: {
        page: 1,
        limit: 15,
        grade: 0,
        keyword: '',
        sort: '',
      },
      childCount: 2,
      numberCount: 2,
      orderCount: 2,
      loaded: false,
      loading: false,
      spreadList: [],
      loadTitle: '',
      first: '',
      second: '',
    }
  },
  mounted: function () {
    this.getSpreadUsers()
  },
  onReachBottom() {
    !this.loading && this.getSpreadUsers()
  },
  watch: {
    'screen.sort': function () {
      this.screen.page = 0
      this.loaded = false
      this.loading = false
      this.spreadList = []
      this.getSpreadUsers()
    },
  },
  methods: {
    handleScroll: function () {
      // var scrollTop =
      //   document.documentElement.scrollTop || document.body.scrollTop;
      // var offsetTop = document.querySelector(".header").clientHeight;
      // if (scrollTop >= offsetTop) {
      //   this.fixedState = true;
      // } else {
      //   this.fixedState = false;
      // }
    },
    submitForm: function () {
      this.screen.page = 0
      this.loaded = false
      this.loading = false
      this.spreadList = []
      this.getSpreadUsers()
    },
    getSpreadUsers: function () {
      let that = this,
          screen = that.screen
      if (that.loaded || that.loading) return
      that.loading = true
      uni.showLoading({
        title: '加载中...'
      })
      this.$api.request('post', 'user/app/spread/people',screen).then(
          (res) => {
            uni.hideLoading()
            that.loading = false
            that.spreadList.push.apply(that.spreadList, res.data.list)
            that.loaded = res.data.list.length < that.screen.limit
            that.loadTitle = that.loaded ? '人家是有底线的' : '上拉加载更多'
            that.screen.page = that.screen.page + 1
            that.first = res.data.total
            that.second = res.data.totalLevel
          },
          (err) => {
            uni.hideLoading()
            uni.showToast({
              title: err.msg || err.response.data.msg || err.response.data.message,
              icon: 'none',
              duration: 2000,
            })
          },
          300
      )
    },
    checkGrade: function (val) {
      if (val == this.screen.grade) return
      else {
        this.screen.page = 1
        this.screen.grade = val
        this.loading = false
        this.loaded = false
        this.spreadList = []
        this.getSpreadUsers()
      }
    },
    sort: function (types) {
      let that = this
      switch (types) {
        case 'childCount':
          if (that.childCount == 2) {
            that.childCount = 1
            that.orderCount = 2
            that.numberCount = 2
            that.screen.sort = 'childCount DESC'
          } else if (that.childCount == 1) {
            that.childCount = 3
            that.orderCount = 2
            that.numberCount = 2
            that.screen.sort = 'childCount ASC'
          } else if (that.childCount == 3) {
            that.childCount = 2
            that.orderCount = 2
            that.numberCount = 2
            that.screen.sort = ''
          }
          break
        case 'numberCount':
          if (that.numberCount == 2) {
            that.numberCount = 1
            that.orderCount = 2
            that.childCount = 2
            that.screen.sort = 'numberCount DESC'
          } else if (that.numberCount == 1) {
            that.numberCount = 3
            that.orderCount = 2
            that.childCount = 2
            that.screen.sort = 'numberCount ASC'
          } else if (that.numberCount == 3) {
            that.numberCount = 2
            that.orderCount = 2
            that.childCount = 2
            that.screen.sort = ''
          }
          break
        case 'orderCount':
          if (that.orderCount == 2) {
            that.orderCount = 1
            that.numberCount = 2
            that.childCount = 2
            that.screen.sort = 'orderCount DESC'
          } else if (that.orderCount == 1) {
            that.orderCount = 3
            that.numberCount = 2
            that.childCount = 2
            that.screen.sort = 'orderCount ASC'
          } else if (that.orderCount == 3) {
            that.orderCount = 2
            that.numberCount = 2
            that.childCount = 2
            that.screen.sort = ''
          }
          break
        default:
          that.screen.sort = ''
      }
    },
  },
}
</script>

<style lang="less">
.promoter-list {
  .header {
    background-image: url('https://kxmalls.oss-cn-hangzhou.aliyuncs.com/bg/bg.png');
    background-repeat: no-repeat;
    background-size: 100% 110%;
    width: 100%;
    height: 300rpx;
    padding: 0 30rpx;
    box-sizing: border-box;
    color: #fff;
    .promoter-count {
      text-align: center;
      padding: 50rpx 0;

      .title {
        font-size: 28rpx;
        opacity: 0.9;
        margin-bottom: 10rpx;
      }

      .count {
        font-size: 72rpx;
        font-weight: bold;
        line-height: 1.2;
        font-family: 'Arial Rounded MT Bold', 'Helvetica Rounded', sans-serif;
        text-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);

        .unit {
          font-size: 36rpx;
          font-weight: normal;
          margin-left: 8rpx;
        }
      }

      .subtitle {
        font-size: 24rpx;
        opacity: 0.8;
        margin-top: 10rpx;
      }
    }
    .name {
      font-size: 30rpx;
      padding-top: 50rpx;
      justify-content: center;
    }

    .num {
      text-align: center;
      font-size: 60rpx;
      margin-top: 20rpx;
      font-family: 'GuildfordProBook 5';
    }

    .profit {
      padding: 0 20rpx;
      font-size: 24rpx;
      margin-top: 30rpx;

      .item {
        min-width: 200rpx;
        text-align: center;
        width: 50%;

        .money {
          font-size: 34rpx;
          margin-top: 10rpx;
        }
      }
    }
  }

  .nav {
    justify-content: space-around;
    display: flex;
    background-color: #fff;
    height: 80rpx;
    line-height: 80rpx;
    font-size: 28rpx;
    color: #282828;
    border-bottom: 1px solid #eee;

    .item {
      height: 100%;

      &.on {
        color: #eb3729;
        border-bottom: 5rpx solid #eb3729;
      }
    }
  }

  .search {
    align-items: center;
    display: flex;
    justify-content: space-around;
    background-color: #fff;
    height: 90rpx;
    padding: 0 30rpx;
    border-bottom: 1px solid #eee;
    flex-wrap: wrap;
    border-bottom: 1px solid #eee;

    .input {
      width: 630rpx;
      height: 60rpx;
      border-radius: 50rpx;
      background-color: #f5f5f5;
      position: relative;

      input {
        height: 100%;
        width: 620rpx;
        font-size: 26rpx;
        padding: 0 30rpx;
        box-sizing: border-box;

        &::placeholder {
          color: #bbb;
        }
      }

      .iconfont {
        position: absolute;
        right: 28rpx;
        top: 50%;
        transform: translateY(-50%);
        color: #999;
        font-size: 28rpx;
      }
    }

    .iconfont {
      font-size: 40rpx;
      color: #515151;
    }
  }

  .sortNav {
    background-color: #fff;
    height: 80rpx;
    border-bottom: 1px solid #eee;
    color: #333;
    font-size: 28rpx;

    &.on {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 5;
    }

    .sortItem {
      text-align: center;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;

      image {
        width: 24rpx;
        height: 24rpx;
        margin-left: 6rpx;
      }
    }
  }

  .sortList {
    margin-top: 80rpx;
  }

  .item {
    background-color: #fff;
    border-bottom: 1px solid #eee;
    height: 160rpx;
    padding: 0 30rpx;
    font-size: 24rpx;
    color: #666;

    .picTxt {
      width: 440rpx;

      .pictrue {
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
        overflow: hidden;

        image {
          width: 100%;
          height: 100%;
          border-radius: 50%;
          border: 3rpx solid #fff;
          box-shadow: 0 0 7rpx #aaa;
          box-sizing: border-box;
        }
      }

      .text {
        width: 300rpx;
        margin-left: 20rpx;

        .name {
          font-size: 28rpx;
          color: #333;
          margin-bottom: 10rpx;
        }
      }
    }

    .right {
      width: 240rpx;
      text-align: right;
      font-size: 22rpx;
      color: #333;

      .font-color-red {
        color: #eb3729;
      }
    }
  }
}
.acea-row {
  display: flex;
  flex-wrap: wrap;
}
</style>