jiqu-library-miniprogram/src/pageA/fan_list/index.vue

<template>
  <view class="text-md">
    <loading-view v-if="isFirstLoading"></loading-view>
    <view :style="[{'opacity': nav0pacity}]" class="h-0 transition-opacity duration-20 z-900 fixed">
      <u-navbar title="粉丝列表"></u-navbar>
    </view>
    <view class="bg">
      <view class="status_bar"  :style="{'height':statusBarHeight+'px'}"></view>
      <view class="p-base flex items-center">
        <view @tap="back">
          <image class="w-20rpx " src="/static/images/user/white_left_arrow.png" mode="widthFix"></image>
        </view>
        <view class="text-xl text-white flex-1 text-center">粉丝列表</view>
      </view>
    </view>
    <view class="w-full  bg-white borderRarius ">
      <view class="px-base flex items-center">
        <view class=" relative -top-50rpx">
          <cu-avatar size="130" :src="user.avatar?user.avatar:''"></cu-avatar>
        </view>
        <view class="flex items-center -mt-60rpx ml-base">
          <view class=" text-txBase font-extrabold">用户名:</view>
          <view class=" text-txGray ml-15rpx">{{user.phone}}</view>
        </view>
      </view>
      <view class="-mt-30rpx flex items-center justify-between text-center text-txBase ">
        <view class="flex-1">粉丝人数</view>
        <view class="flex-1">成长值</view>
      </view>
      <view class="flex items-center justify-between text-center text-txBase  font-extrabold">
        <view class="flex-1">{{fans_num}}</view>
        <view class="flex-1">{{growth_value}}</view>
      </view>
      <view class="bg-primary w-full h-10rpx mt-base"></view>
    </view>
    <mescroll-body :height="height" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"
      :up="upOption">
      <view class="mt-base bg-white">
        <view v-if="dataList.length!=0" class=" flex items-center  text-txBase py-base text-center">
          <view class="flex-1">用户名</view>
          <view class="flex-1">成长值</view>
        </view>
        <view class="pl-base">
          <view v-for="(item,index) in dataList" :key="index"
            class="flex border-t border-txBorder items-center text-center  text-txGray py-base">
            <view class="flex-1 flex items-center ">
              <cu-avatar size="108" :src="item.avatar?item.avatar:''"></cu-avatar>
             <!-- <view class="w-108rpx h-108rpx rounded-full bg-txGray"></view> -->
              <view class="ml-base ">
                <view class="text-left">{{item.nickname?item.nickname:'匿名用户'}}</view>
                <view>{{item.phone|showPhone}}</view>
              </view>
            </view>
            <view class="flex-1 flex items-center justify-center flex-col">
              <view>{{item.level_name}}</view>
              <view class="flex-1">{{item.value}}</view>
            </view>
          </view>
        </view>
      </view>
    </mescroll-body>
  </view>
</template>

<script>
  import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
  export default {
    mixins: [MescrollMixin], // 使用mixin
    data() {
      return {
        isFirstLoading:true,
        scrollNumber: 0,
        fans_num:0,
        growth_value:"",
        downOption: {
          auto: false,
          use: false
        },
        upOption: {
          page: {
            size: 20
          },
          noMoreSize: 1
        },
        dataList: [], //获取到的数据
        menuButtonInfo:0,//胶囊按钮信息
        statusBarHeight:0,//状态栏高度
        musicheadHeight:0
      };
    },
    onReady() {
    	// #ifdef  MP-WEIXIN
    	//获取状态栏高度
    	const {	statusBarHeight,windowHeight,screenHeight }= uni.getSystemInfoSync()
    	this.statusBarHeight=statusBarHeight
    	// 获取胶囊按钮信息（width、height、top等）
    	const {width,height,top}=uni.getMenuButtonBoundingClientRect()
    	this.menuButtonInfo={width,height,top}
    	// 胶囊按钮相对于离导航栏的上边距
    	const topDistance=this.menuButtonInfo.top-this.statusBarHeight;
    	// 计算导航栏高度
    	this.musicheadHeight=this.menuButtonInfo.height+topDistance*2;
     // #endif
    },
    onPageScroll(e) {
      this.scrollNumber = e.scrollTop
    },
    computed: {
      nav0pacity() {
        const option = (this.scrollNumber - 10) / 100
        return option >= 1 ? 1 : option
      },
      user() {
        return this.$store.getters.user ?? {}
      },
      height() {
        const {
          windowHeight,
          statusBarHeight
        } = this.$u.sys();
        return windowHeight - statusBarHeight - 270 + 'px';
      },
    },
    onLoad() {
      this.getFans()
    },
    methods: {
      async getFans() {
        try{
          let resDate = await this.$api.get('/v1/fans/statistics', {})
          this.fans_num = resDate.fans_num
          this.growth_value = resDate.growth_value
        }catch(err){}finally{
          this.isFirstLoading=false
        }
      },
      downCallback() {
        this.mescroll.resetUpScroll();
        this.dataList = []
      },
      async upCallback(page) {
        this.loadData(page);
      },
      loadData(page) {
        this.$api.get(`/v1/fans`, {
          params: {
            page: page.num,
            per_page: page.size
          }
        }).then(res => {
          this.mescroll.endSuccess(res.data.length)
          if (page.num == 1) this.dataList = [];
          this.dataList = this.dataList.concat(res.data);
        }).catch(err => {
          this.mescroll.endErr()
        })
      },
      back() {
        uni.navigateBack({
          delta: 1
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .status_bar {
    height: var(--status-bar-height);
    width: 100%;
  }

  .bg {
    width: 100%;
    height: 407rpx;
    background-image: url(../../static/images/user/fan_title_bg.png);
    background-size: 100% 100%;
  }

  .borderRarius {
    border-top-left-radius: 30rpx;
    border-top-right-radius: 30rpx;
    margin-top: -150rpx;
  }
</style>