bnyer-cloud-hub/pages-userInfo/extends/extends.vue

<template>
	<view class="container">
	  <view class="invite-comp">
	    <view class="invite-code-div">
	      <view class="back-con-top"> 邀请码 </view>
	      <view class="inviteCode">
				{{userInfo.inviteCode}}
	      </view>
	    </view>
      <view class="border"></view>
      <view class="invite-code-btn">
        <button class="invite-btn" @click="" open-type="share">点击邀请</button>
      </view>
	  </view>
	  <view class="invited-list-title">已邀请</view>
	  <view>
		  <uni-list border-full v-for="(item,index) in inviteLogList" :key="index">
        <uni-list-item :title="item.invitedScanCode" :note="item.createTime" :thumb="item.img" thumb-size="lg" />
      </uni-list>
      <!-- 显示加载中或者全部加载完成 -->
      <view>
        <uni-load-more :status="loadStatus"></uni-load-more>
      </view>
	  </view>
	  
	</view>
</template>

<script>
	import {
		getInviteLog
	} from '@/api/userInfo.js'
	export default {
		data() {
			return {
				inviteLogList: [],
				pageSize: 10,
				pageNum: 1,
				userInfo: {},
				flag: false,
        loadStatus:'noMore',  //加载样式：more - 加载前样式，loading - 加载中样式，noMore - 没有数据样式
        isLoadMore:false,  //是否加载中
			}
		},
		created() {
			const userInfo = uni.getStorageSync('userInfo')
			if (!userInfo) {
				console.log('havent userInfo')
				uni.showModal({
					content: '艺术家账户过期,请重新登录！',
					showCancel: false,
					success() {
						//没有缓存则跳转登录页面
						uni.reLaunch({
							url: '/pages/login/login'
						});
					}
				});
			} else {
				this.userInfo = userInfo;
				console.log('have userInfo')
			}
			this.getInviteLog();
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.pageNum = 1
			this.inviteLogList = []
			this.getInviteLog();
			uni.stopPullDownRefresh()
		},
		// 上划加载更多
		onReachBottom() {//上拉触底函数
      if(!this.isLoadMore) {  //此处判断，上锁，防止重复请求
        this.isLoadMore=true
        if (this.loadStatus === "more") {
          this.pageNum += 1  //每次上拉请求新的一页
          this.getInviteLog();
        }
      }
		},
		onShareAppMessage(res) {
		    if (res.from === 'button') {// 来自页面内分享按钮
		      console.log(res.target)
		    }
		    return {
		      title: '邀请更多',
		      path: `/pages/register/register?inviteCode=${this.userInfo.inviteCode}`,
		    }
		  },
		methods:{
			// 获取邀请记录
			async getInviteLog() {
				let that = this;
        that.loadStatus = 'loading';
				const res = await getInviteLog({
					pageSize: that.pageSize,
					pageNum: that.pageNum,
					creatorId: that.userInfo.id
				})
				console.log('res', res)
				if (res.data.code === 200) {
					that.inviteLogList.push(...res.data.rows)
          if(res.data.rows.length < that.pageSize){  //判断接口返回数据量小于请求数据量，则表示此为最后一页
            that.isLoadMore = true
            that.loadStatus = 'noMore'
          }else{
            this.loadStatus = 'more';
            that.isLoadMore = false
          }
				} else {
					uni.showModal({
						content: '邀请记录加载失败！',
						showCancel: false
					});
          that.isLoadMore = false
          if(that.page > 1){
            that.page -= 1
          }
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
.container {
  width: 670rpx;
  margin: 20rpx auto;


  .invite-comp {
    background: $uni-bg-base-color;
    border-radius: 20rpx;
    padding: 40rpx;

    .invite-code-div {

      .back-con-top {
        color: $uni-white;
        font-size: 28rpx;
        line-height: 60rpx;
        text-align: center;
      }

      .inviteCode {
        color: $uni-primary;
        font-size: 40rpx;
        line-height: 80rpx;
        text-align: center;

      }

    }

    .border {
      height: 2rpx;
      background: $uni-secondary-color;
      margin-top: 40rpx;
      margin-bottom: 40rpx;
    }

    .invite-code-btn {

      .invite-btn {
        color: $uni-btn-text-color;
      }

    }

  }

  .invited-list-title {
    color: $uni-white;
    font-size: 28rpx;
    line-height: 60rpx;
    margin-top: 20rpx;
    margin-bottom: 20rpx;
  }


  ::v-deep .uni-list {
    background: $uni-bg-base-color !important;
    margin-bottom: 20rpx;
    border-radius: 24rpx;
    overflow: hidden;
  }

  ::v-deep .uni-list-item {
    background: $uni-bg-base-color !important;
  }

  ::v-deep .uni-list--border-top {
    display: none !important;
  }
  ::v-deep .uni-list--border-bottom {
    display: none !important;
  }

  ::v-deep .uni-list-item__content-title {
    color: $uni-white !important;
  }

  ::v-deep .uni-list-item__content-note {
    color: $uni-secondary-color !important;
  }


}
</style>