groupon-wx/pages/users/user_team/index.vue

<template>
  <view :style="colorStyle">
    <view class="acea-row nav">
      <view
        class="acea-row row-center-wrapper"
        :class="{ on: nav === 1 }"
        @click="navTab(1)"
        >团队人数
      </view>
      <view
        class="acea-row row-center-wrapper"
        :class="{ on: nav === 2 }"
        @click="navTab(2)"
        >直荐人数
      </view>
      <view
        class="acea-row row-center-wrapper"
        :class="{ on: nav === 3 }"
        @click="navTab(3)"
        >创客人数
      </view>
    </view>
    <view class="main-body">
      <view class="number_of_members" v-show="nav === 1">
        <!-- <view class="members_top">
          <text class="integral">0.0积分</text>
          <text class="explain">团队收益</text>
        </view> -->
				<view class="members_list">
          <view
            class="item acea-row row-between-wrapper"
            v-for="(item, index) in orderList"
            :key="index"
          >
            <view class="text-info">
              {{ item.createTime }}
            </view>
            <view class="left">
              <view class="state">
                <view class="order">{{ index + 1 }}</view>
                <img :src="item.avatar" alt="" />
                <view class="s-r">
                  <text>
                    {{ item.name }}
                  </text>
                </view>
                <view class="op-area">
                  <u-button type="primary" shape="circle"> 联系他 </u-button>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="direct_of_push" v-show="nav === 2">
        <!-- <view class="push_top">
          <text class="integral">0.0积分</text>
          <text class="explain">直推收益</text>
        </view> -->
        <view class="pus_list">
          <view
            class="item acea-row row-between-wrapper"
            v-for="(item, index) in integralList"
            :key="index"
          >
            <view class="text-info">
              {{ item.createTime }}
            </view>
            <view class="left">
              <view class="state">
                <view class="order">{{ index + 1 }}</view>
                <img :src="item.avatar" alt="" />
                <view class="s-r">
                  <text>
                    {{ item.name }}
                  </text>
                </view>
                <view class="op-area">
                  <u-button type="primary" shape="circle"> 联系他 </u-button>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="mark_of_members" v-show="nav === 3">
        <!-- <view class="mark_top">
          <text class="integral">0.0积分</text>
          <text class="explain">直推收益</text>
        </view> -->
        <view class="mark_list">
          <view
            class="item acea-row row-between-wrapper"
            v-for="(item, index) in makerList"
            :key="index"
          >
            <view class="text-info">
              {{ item.createTime }}
            </view>
            <view class="left">
              <view class="state">
                <view class="order">{{ index + 1 }}</view>
                <img :src="item.avatar" alt="" />
                <view class="s-r">
                  <text>
                    {{ item.name }}
                  </text>
                </view>
                <view class="op-area">
                  <u-button type="primary" shape="circle"> 联系他 </u-button>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import {
  userRecomPage,
  makerPage
} from '@/api/home.js';
import dayjs from '@/plugin/dayjs/dayjs.min.js';
import {
  toLogin
} from '@/libs/login.js';
import {
  mapGetters
} from "vuex";
// #ifdef MP
import authorize from '@/components/Authorize';
// #endif
import emptyPage from '@/components/emptyPage.vue';
import colors from '@/mixins/color'
export default {
  components: {
    // #ifdef MP
    authorize,
    // #endif
    emptyPage
  },
  filters: {
    dateFormat: function (value) {
      return dayjs(value * 1000).format('YYYY-MM-DD');
    }
  },
  mixins: [colors],
  data () {
    return {
      nav: 1, // 1：发票记录 2：抬头管理
      current: 0,
      page: 1,
      limit: 10,
      integralList: [],
      userInfo: {},
      loadend: false,
      loading: false,
      loadTitle: this.$t(`加载更多`),
      isAuto: false, //没有授权的不会自动授权
      isShowAuth: false, //是否隐藏授权
      orderList: [],
      makerList: [],
      invoiceList: [],

      isTime: 0
    };
  },
  computed: mapGetters(['isLogin']),
  watch: {
    nav: {
      immediate: true,
      handler (value) {
        this.page = 1;
        switch (value) {
          case 1:
            this.orderList = [];
            this.getOrderList();
            break;
          case 2:
            this.invoiceList = [];
            this.getIntegralList();
            break;
          case 3:
            this.makerList = [];
            this.getMakerPage();
            break;
        }
      }
    },
    isLogin: {
      handler: function (newV, oldV) {
        if (newV) {
          // this.getUserInfo();
          // this.userRecomPage();
        }
      },
      deep: true
    }
  },
  onLoad () {
    if (this.isLogin) {
      // this.getUserInfo();
      // this.getIntegralList();
    } else {
      toLogin();
    }
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  },
  methods: {
    // 菜单切换
    navTab (nav) {
      if (this.nav !== nav) {
        this.nav = nav;
      }
    },
    /**
     * 授权回调
     */
    onLoadFun: function () {
      this.getUserInfo();
    },
    // 授权关闭
    authColse: function (e) {
      this.isShowAuth = e
    },

    /**
     * 获取积分明细
     */

    getOrderList: function () {
      let that = this;
      if (that.loading) return;
      // if (that.loadend) return;
      that.loading = true;
      that.loadTitle = '';
      userRecomPage({
        type: 1,
        userId: this.$store.state.app.uid,
        current: that.page,
        size: that.limit
      }).then(function (res) {
        let list = res.data,
          loadend = list.length < that.limit;
        that.$set(that, 'orderList', list);
        that.page = that.page + 1;
        that.loading = false;
        that.loadend = loadend;
        that.loadTitle = loadend ? that.$t(`我也是有底线的`) : that.$t(`加载更多`);
      }, function (res) {
        this.loading = false;
        that.loadTitle = that.$t(`加载更多`);
      });
    },
    getIntegralList: function () {
      let that = this;
      if (that.loading) return;
      // if (that.loadend) return;
      that.loading = true;
      that.loadTitle = '';
      userRecomPage({
        type: 2,
        userId: this.$store.state.app.uid,
        current: that.page,
        size: that.limit
      }).then(function (res) {
        let list = res.data,
          loadend = list.length < that.limit;
        // that.integralList = that.$util.SplitArray(list, that.integralList);
        that.$set(that, 'integralList', list);
        that.page = that.page + 1;
        that.loading = false;
        that.loadend = loadend;
        that.loadTitle = loadend ? that.$t(`我也是有底线的`) : that.$t(`加载更多`);
      }, function (res) {
        this.loading = false;
        that.loadTitle = that.$t(`加载更多`);
      });
    },
    getMakerPage: function () {
			let that = this;
			console.log(that.loading,that.loadend);
      if (that.loading) return;
      // if (that.loadend) return;
      that.loading = true;
      that.loadTitle = '';
      makerPage({
        userId: this.$store.state.app.uid,
        current: that.page,
        size: that.limit
      }).then(function (res) {
        let list = res.data,
        loadend = list.length < that.limit;
        // that.makerList = that.$util.SplitArray(list, that.makerList);
        that.$set(that, 'makerList', list);
        that.page = that.page + 1;
        that.loading = false;
        that.loadend = loadend;
        that.loadTitle = loadend ? that.$t(`我也是有底线的`) : that.$t(`加载更多`);
      }, function (res) {
        this.loading = false;
        that.loadTitle = that.$t(`加载更多`);
      });
    },
    nav: function (current) {
      this.current = current;
    }
  }
}
</script>
<style lang="scss" scoped>
.nav {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9;
  width: 100%;
  height: 90rpx;
  background-color: #ffffff;
}

.nav .acea-row {
  flex: 1;
  border-top: 3rpx solid transparent;
  border-bottom: 3rpx solid transparent;
  font-size: 30rpx;
  color: #282828;
}

.nav .on {
  border-bottom-color: var(--view-theme);
  color: var(--view-theme);
}

.main-body {
  margin-top: 90rpx;

  .number_of_members {
    .members_top {
      height: 150rpx;
      background: white;
      display: flex;
      text-align: center;
      flex-direction: column;

      .integral {
        flex: 1;
        color: #ff4b4b;
        font-size: 38rpx;
        padding-top: 30rpx;
      }

      .explain {
        flex: 2;
      }
    }
		.members_list {
      .item {
        line-height: 50rpx;
        padding: 30rpx;
        background: white;
        margin-bottom: 10rpx;

        .text-info {
          color: #999999;
          margin-bottom: 10rpx;
        }

        .left {
          width: 100%;

          .state {
            height: 100rpx;

            .order {
              margin: auto 0;
              text-align: center;
              width: 50rpx;
              height: 50rpx;
              line-height: 50rpx;
              background: rgb(200, 153, 75);
              color: white;
              border-radius: 50%;
            }

            display: flex;

            image {
              margin-left: 30rpx;
              margin-right: 30rpx;
              width: 100rpx;
              height: 100rpx;
              border-radius: 50%;
              overflow: hidden;
            }

            .s-r {
              font-size: 34rpx;
              display: flex;
              flex-direction: column;
            }

            .op-area {
              display: flex;
              justify-content: flex-end;
              flex-grow: 1;

              /deep/ .u-button {
                height: 60rpx;
                width: 200rpx !important;
                margin: auto 0;
                font-size: 26rpx;
              }
            }
          }
        }

        .right {
          .num {
            height: 100rpx;
          }
        }
      }
    }
  }

  .direct_of_push {
    .push_top {
      margin-bottom: 10rpx;
      height: 150rpx;
      background: white;
      display: flex;
      text-align: center;
      flex-direction: column;

      .integral {
        flex: 1;
        color: #ff4b4b;
        font-size: 38rpx;
        padding-top: 30rpx;
      }

      .explain {
        flex: 2;
      }
    }

    .pus_list {
      .item {
        line-height: 50rpx;
        padding: 30rpx;
        background: white;
        margin-bottom: 10rpx;

        .text-info {
          color: #999999;
          margin-bottom: 10rpx;
        }

        .left {
          width: 100%;

          .state {
            height: 100rpx;

            .order {
              margin: auto 0;
              text-align: center;
              width: 50rpx;
              height: 50rpx;
              line-height: 50rpx;
              background: rgb(200, 153, 75);
              color: white;
              border-radius: 50%;
            }

            display: flex;

            image {
              margin-left: 30rpx;
              margin-right: 30rpx;
              width: 100rpx;
              height: 100rpx;
              border-radius: 50%;
              overflow: hidden;
            }

            .s-r {
              font-size: 34rpx;
              display: flex;
              flex-direction: column;
            }

            .op-area {
              display: flex;
              justify-content: flex-end;
              flex-grow: 1;

              /deep/ .u-button {
                height: 60rpx;
                width: 200rpx !important;
                margin: auto 0;
                font-size: 26rpx;
              }
            }
          }
        }

        .right {
          .num {
            height: 100rpx;
          }
        }
      }
    }
  }
  .mark_of_members {
    .mark_top {
      margin-bottom: 10rpx;
      height: 150rpx;
      background: white;
      display: flex;
      text-align: center;
      flex-direction: column;

      .integral {
        flex: 1;
        color: #ff4b4b;
        font-size: 38rpx;
        padding-top: 30rpx;
      }

      .explain {
        flex: 2;
      }
    }

    .mark_list {
      .item {
        line-height: 50rpx;
        padding: 30rpx;
        background: white;
        margin-bottom: 10rpx;

        .text-info {
          color: #999999;
          margin-bottom: 10rpx;
        }

        .left {
          width: 100%;

          .state {
            height: 100rpx;

            .order {
              margin: auto 0;
              text-align: center;
              width: 50rpx;
              height: 50rpx;
              line-height: 50rpx;
              background: rgb(200, 153, 75);
              color: white;
              border-radius: 50%;
            }

            display: flex;

            image {
              margin-left: 30rpx;
              margin-right: 30rpx;
              width: 100rpx;
              height: 100rpx;
              border-radius: 50%;
              overflow: hidden;
            }

            .s-r {
              font-size: 34rpx;
              display: flex;
              flex-direction: column;
            }

            .op-area {
              display: flex;
              justify-content: flex-end;
              flex-grow: 1;

              /deep/ .u-button {
                height: 60rpx;
                width: 200rpx !important;
                margin: auto 0;
                font-size: 26rpx;
              }
            }
          }
        }

        .right {
          .num {
            height: 100rpx;
          }
        }
      }
    }
  }
}
</style>