zh-wx/pages/users/user_directPartner/index.vue

<template>
  <view class="user_directPartner">
    <view class="integral-details" :style="colorStyle">
      <!-- <view class='header'>
				<view class='currentScore'>{{$t(`当前红色积分`)}}</view>
				<view class="scoreNum">{{userInfo.integral}}</view>
				<view class='line'></view>
			</view> -->
      <view class="wrapper">
        <view class="list" :hidden="current != 0">
          <view
            class="item acea-row row-between-wrapper"
            v-for="(item, index) in integralList"
            :key="index"
          >
            <view class="left">
              <view class="state">
                <view class="order">{{ index + 1 }}</view>
                <img :src="item.avatar" alt="" />
                <view class="s-r">
									<text>
                    {{ item.userName }}
                  </text>
                  <text>
                    {{ item.account }}
                  </text>

                </view>
              </view>
              <!-- <view class="text-info">推荐人 : &nbsp; {{ item.recommendName }}</view> -->
              <view class="text-info">推荐时间 : &nbsp; {{ item.createTime }}</view>
            </view>
            <view class="right">
              <view class="num font-color"> </view>
              <!-- <view class="text-info">贡献人 ：&nbsp; {{ item.parentName }}</view>
              <view class="text-info">贡献时间 ：&nbsp; {{ item.contributeTime }}</view> -->
            </view>
          </view>
          <view
            class="loadingicon acea-row row-center-wrapper"
            v-if="integralList.length > 0"
          >
            <text
              class="loading iconfont icon-jiazai"
              :hidden="loading == false"
            ></text
            >{{ loadTitle }}
          </view>
          <view v-if="integralList.length == 0">
            <emptyPage :title="$t(`暂无收益记录哦～`)"></emptyPage>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  linkedUserList
} 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 {
      current: 0,
      page: 1,
      limit: 10,
      integralList: [],
      userInfo: {},
      loadend: false,
      loading: false,
      loadTitle: this.$t(`加载更多`),
      isAuto: false, //没有授权的不会自动授权
      isShowAuth: false, //是否隐藏授权
      isTime: 0
    };
  },
  computed: mapGetters(['isLogin']),
  watch: {
    isLogin: {
      handler: function (newV, oldV) {
        if (newV) {
          // this.getUserInfo();
          this.linkedUserList();
        }
      },
      deep: true
    }
  },
  onLoad () {
    if (this.isLogin) {
      // this.getUserInfo();
      this.getIntegralList();
    } else {
      toLogin();
    }
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    this.getIntegralList();
  },
  methods: {
    /**
     * 授权回调
     */
    onLoadFun: function () {
      this.getUserInfo();
      this.getIntegralList();
    },
    // 授权关闭
    authColse: function (e) {
      this.isShowAuth = e
    },

    /**
     * 获取积分明细
     */
    getIntegralList: function () {
      let that = this;
      if (that.loading) return;
      if (that.loadend) return;
      that.loading = true;
      that.loadTitle = '';
      linkedUserList({
        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', that.integralList);
        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">
.user_directPartner {
	.text-info{
		color: #999999;
		margin-top: 5rpx;
	}
  .list {
    .item {
			line-height: 50rpx;
      padding: 30rpx;
      background: white;
      .left {
        .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;
          }
        }
      }
			.right{
				.num{
					height: 100rpx;
				}
			}
    }
  }
}
</style>