liedou_uniapp/pages/subPackages/my/friendList.vue

<template>
  <view class="pageBox">
    <!-- 头部栏-->
    <u-navbar class="navbar-wrap" title="我的好友" title-color="#fff" back-icon-color="#fff" :background="background" ></u-navbar>
	<view class="stickBox" :style="{top:statusBarHeight + navigationBarHeight + 'px'}">
      <!-- 提示-->
      <view v-show="showNotice">
        <notice :text="topNaiv.top_message" name="arrow-right" @clickNotice="clickNotice"></notice>
      </view>
      <!--    切换栏-->
      <view class="typeBox">
        <view v-for="item in topNaiv.top_friend" :key="item.top_name" :class="item.top_type == typeAc ? 'active' : ''" @click="switchType(item.top_type)">
          <view class="num">{{item.count}}</view>
          <view class="name">{{item.top_name}}</view>
        </view>
      </view>
    </view>
	<!-- 好友列表 -->
	<view class="friends-item" v-for="item in listProp" :key="item.id">
		<view class="fixed-center">
			<image class="friends-head" :src="item.img" mode="widthFix"></image>
			<view class="friends-con">
				<view class="friends-title-block">
					<view class="friends-title">{{item.name}}</view>
					<image v-if="item.level == 3" class="friend-tag-img" src="https://ld.726p.com/ldyx_static/imgs/tag-yys.png" mode="widthFix"></image>
					<image v-if="item.level == 2" class="friend-tag-img" src="https://ld.726p.com/ldyx_static/imgs/tag-svip.png" mode="widthFix"></image>
					<image v-if="item.level == 1" class="friend-tag-img" src="https://ld.726p.com/ldyx_static/imgs/tag-vip.png" mode="widthFix"></image>
				</view>
				<view class="friends-other">{{item.phone}} {{item.regist_at}}</view>
			</view>
		</view>
		<button class="inviteFriend" open-type="share" data-source="inviteFriend" v-if="typeAc == 5">邀请注册</button>
	</view>
	<view class="loadinfo" v-if="listProp.length > 0 && !loading && isEnd">没有更多了</view>
	<!-- 无数据展示 -->
	<view class="no-data-blcok" v-if="listProp.length <= 0 && !loading" style="margin-top: 200rpx;">
		<image class="no-data-img" src="https://ld.726p.com/ldyx_static/imgs/no-order.png" mode="widthFix"></image>
		<view class="no-data-hint">您还没有好友～</view>
	</view>
	<!-- 回到顶部 -->
	<u-back-top :scroll-top="scrollTop"></u-back-top>
  </view>
</template>
<script>
import notice from "../../commonMoudle/notice";
import orderList from "../../commonMoudle/orderList";
const app = getApp()
export default {
  components:{
    notice,
    orderList,
  },
  data(){
    return{
	  background: app.globalData.navbarBackground,
      statusBarHeight: app.globalData.statusBarHeight,
	  navigationBarHeight: app.globalData.navigationBarHeight,
      showNotice:true,
      topNaiv:{},
      typeAc:2,
      listProp:[],
      loading:true,
	  page:1,
	  isEnd: false, // 数据加载到最后一页
	  scrollTop: 0,
    }
  },
  onPageScroll(e) {
  	this.scrollTop = e.scrollTop;
  },
  onLoad() {
  	this.getTopNaiv()
	this.getFriendlist()
  },
  //上拉加载
  onReachBottom() {
	if (this.isEnd || this.loading) return; // 到达最后一页 或者 次页正在加载中，不允许再上拉加载
    this.loading = true;
	this.page++;
	this.getFriendlist()
  },
  //下拉刷新
  async onPullDownRefresh(){
	await this.getTopNaiv()
	this.page = 1;
	await this.getFriendlist()
	uni.stopPullDownRefresh()
  },
  methods: {
	// 好友类型获取
	async getTopNaiv() {
	    try {
	      const url = this.$api.adzoneCreate_getTopNaiv
	      const params = {}
	      uni.showLoading({ title: '加载中...', mask: true })
		  const { data: res } = await this.$postJSON(url, params)
	      if (res && res.errno == 0) {
			  this.topNaiv = res.rst.data;
	      } else {
	        uni.showToast({ title: res.err || '操作失败', icon: 'none' })
	      }
	    } catch (error) {
			uni.showToast({ title: '服务器错误', icon: 'none' })
	    } finally {
	      uni.hideLoading()
	    }
	},
	// 订单明细
	async getFriendlist() {
		// 第一页列表数据加载前，页面回到顶部
		if (this.page == 1) {
			uni.pageScrollTo({
				scrollTop: 0
			});
		}
	    try {
	      const url = this.$api.adzoneCreate_getTypeOperate
	      const params = {
			  page: this.page,
			  type: this.typeAc,
		  }
	      uni.showLoading({ title: '加载中...', mask: true })
		  const { data: res } = await this.$postJSON(url, params)
		  this.loading = false;
	      if (res && res.errno == 0) {
			  // 判断数据是否是最后一页
			  if (res.rst.data.length <= 0) {
				  this.isEnd = true
			  } else {
				  this.isEnd = false
			  }
			  // 获得数据
			  if(this.page == 1) {
				  this.listProp = res.rst.data;
			  } else {
				  this.listProp = this.listProp.concat(res.rst.data)
			  }
	      } else {
	        uni.showToast({ title: res.err || '操作失败', icon: 'none' })
	      }
	    } catch (error) {
			this.loading = false;
			uni.showToast({ title: '服务器错误', icon: 'none' })
	    } finally {
			this.loading = false;
	      uni.hideLoading()
	    }
	},
    //关闭提示
    clickNotice(){
		if(this.topNaiv.top_level != 3){ // 非运营商，去特权介绍页
			uni.navigateTo({
				url: '/pages/subPackages/my/tqjs'
			})
		}else{ // 运营商
			let url = encodeURIComponent(this.topNaiv.url)
		    $router.navigateTo({
			    url: `/pages/webView/webView?url=${url}&title=运营商后台`
		    })
		}
    },
    //切换type
    switchType(type){
      this.typeAc = type
	  this.page = 1;
	  this.getFriendlist()
    },
  },
}
</script>
<style lang="scss" scoped>
.pageBox{
  background-color: #F5F5F5;
  position: relative;
  .navbar_name{
    color: #fff;
    font-size: 36rpx;
    padding-left:40%;
    display:flex;
    align-items: center;
    .lMar10{
      margin-left: 10rpx;
    }
  }
  .stickBox{
    position: sticky;
    background-color: #F5F5F5;
	padding-top: 1rpx;
	z-index: 9999;
  }
  .typeBox{
    background-color: #fff;
    color: #333;
    font-size: 32rpx;
    padding: 20rpx 50rpx;
    border-bottom: 2rpx solid #f1f1f1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: center;
	position: relative;
	z-index: 10;
    .name{
      margin-top: 15rpx;
	  font-size: 30rpx;
    }
    .active{
      color:#f13641;
      font-weight: 600;
    }

  }
}
.friends-item{
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #fff;
	padding: 20rpx 40rpx;
	border-bottom: 4rpx solid #f5f5f5;
	.friends-head{
		width: 100rpx;
		height: 100rpx;
		border-radius: 8rpx;
		margin-right: 40rpx;
	}
	.friends-con{
		.friends-title-block{
			display: flex;
			align-items: center;
			.friends-title{
				color: #333;
				font-size: 30rpx;
				line-height: 40rpx;
			}
			.friend-tag-img{
				width: 120rpx;
				height: 40rpx;
				margin-left: 6rpx;
			}
		}
		.friends-other{
			font-size: 26rpx;
			line-height: 40rpx;
			color: #999;
			margin-top: 10rpx;
		}
	}
}
.fixed-center{
	display: flex;
	align-items: center;
}
.loadinfo{
	text-align: center;
	color: #666;
	font-size: 28rpx;
	margin: 20rpx 0;
}
.inviteFriend{
	font-size: 22rpx;
	color: #f13641;
	border: 2rpx solid #f13641;
	line-height: 46rpx;
	padding: 0 20rpx;
	border-radius: 46rpx;
	background: transparent;
	margin: 0;
}
</style>