applet/uni-app/问星数据.../pages/sphRank/sphRank.vue

<template>
	<view>
		<view class="choiceBox">
		  <view class="choiceActive choice" @click="goLogin">
			{{('日榜 ' + start_time)}}
			<view class="sj">
			  <image mode="widthFix" src="/static/img/sort.png"></image>
			</view>
		  </view>
		  <view class="choiceActive choice" @click="goLogin">
			全部
			<view class="sj">
			  <image mode="widthFix" src="/static/img/sort.png"></image>
			</view>
		  </view>
		</view>
	  <view class="userListBox">
		<view class="userItemBox" v-for="(item,index) in infoList" :key="index" @click="goLogin">
		  <view class="list_userImg">
			<image v-if="index==0" src="/static/img/one.png" mode="widthFix" class="top_img"></image>
			<image v-if="index==1" src="/static/img/second.png" mode="widthFix" class="top_img"></image>
			<image v-if="index==2" src="/static/img/three.png" mode="widthFix" class="top_img"></image>
			<image :src="item.userInfo.head_url" class="userImg" mode="widthFix"></image>
		  </view>
		  <view class="list_userInfo">
			<view class="userTitleBox">
			  <view class="userTitle">{{item.userInfo.nickname?item.userInfo.nickname:'-'}}</view>
			  <view class="auth_div">
				  <image :src="item.userInfo.auth_icon_url" class="icon" mode="widthFix"></image>
				  <text>{{item.userInfo.auth_profession}}</text>
			  </view>
			</view>
			<view class="userData">
			  <view class="userDataItem">
				<text class="data">{{item.fans_count||item.fans_count==0?$NumberHandle(item.fans_count):'-'}}</text>
				<view>预估粉丝数</view>
			  </view>
			  <view class="userDataItem">
				<text class="data" style="color:#E93269">{{item.like_incr||item.like_incr==0?$NumberHandle(item.like_incr):'-'}}</text>
				<view>新增获赞</view>
			  </view>
			  <view class="userDataItem">
				<text class="data">{{item.comment_incr  || item.comment_incr  == 0 ?$NumberHandle(item.comment_incr) :'-'}}</text>
				<view>新增获评</view>
			  </view>
			  <view class="userDataItem">
				<text class="data">{{item.like_divided_by_fans  || item.like_divided_by_fans  == 0 ?(item.like_divided_by_fans+'%') :'-'}}</text>
				<view>赞粉比</view>
			  </view>
			</view>
		  </view>
		</view>
	  </view>
	  <nopermission v-if="!loading"></nopermission>
	  <tab-bar :current='1'></tab-bar>
	  <applet-mask v-if="appletMaskFlag" @closeMask='closeMask'></applet-mask>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				appletMaskFlag:false,
				page:1,
				pagesize:20,
				infoList:[],
				start_time: this.$getDay(-1,false),
				loading:true
			}
		},
		onLoad() {
			this.init(1)
		},
		methods: {
			goLogin(){
				var sUserAgent = navigator.userAgent.toLowerCase();
				if(sUserAgent.indexOf("baidu") > 0 || sUserAgent.indexOf("ucbrowser") > 0 ) {
					this.$burialPoint({project_name:'小程序版h5',button_name:'点击打开弹框',key_value:uni.getStorageSync('key')?uni.getStorageSync('key'):'',page_name:'视频号榜单',url_value:window.location.href})
					_hmt?_hmt.push(['_trackEvent','小程序版h5', '点击打开弹框', uni.getStorageSync('key'),'']):'';
					this.appletMaskFlag = true;
				}else{
					if (!navigator.userAgent.toLowerCase().match(/micromessenger/i)) {
						this.$burialPoint({project_name:'小程序版h5',button_name:'页面按钮直接打开微信',key_value:uni.getStorageSync('key')?uni.getStorageSync('key'):'',page_name:'视频号榜单',url_value:window.location.href})
						_hmt?_hmt.push(['_trackEvent','小程序版h5', '页面按钮直接打开微信', uni.getStorageSync('key'),'']):'';
					   location.href = 'weixin://dl/business/?t=4HtwsBfu3Bj'
					}else{
						this.$burialPoint({project_name:'小程序版h5',button_name:'微信端-点击打开弹框',key_value:uni.getStorageSync('key')?uni.getStorageSync('key'):'',page_name:'视频号榜单',url_value:window.location.href})
						_hmt?_hmt.push(['_trackEvent','小程序版h5', '微信端-点击打开弹框', uni.getStorageSync('key'),'']):'';
						this.appletMaskFlag = true;
					}
				}
			},
			closeMask(){
				this.appletMaskFlag = false
			},
			init(page){
				this.loading = true
			    uni.showLoading({title: '加载中',})
			    this.$req(this.$api.goodVideoNumberList, 'get', {
			      page:page,
			      // label_id:this.data.authorType.id,
			      sort: 'like_divided_by_fans',
			      date:this.start_time,
			      page_size:this.pagesize,
			      // type:this.data.cycle
			    }, (res) => {
					this.loading = false
			      uni.hideLoading()
			      if(res && res.errno == 0){
			        this.infoList = res.rst.data
			      }else{
			        uni.showToast({
			          title: res.err,
			          icon: 'none',
			          duration: 2000
			        })
			      }
			    },()=>{
					this.loading = false
			      wx.hideLoading()
			    })
			},
		}
	}
</script>

<style>
page{
	background: #F1F1F1;
}
.userListBox .userItemBox{
  margin: 20rpx;
  height: 212rpx;
  background: #fff;
  border-radius: 14rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12rpx;
}
.userListBox .userItemBox:first-child {
  margin-top: 0;
}
.userListBox .userItemBox:last-child {
  margin-bottom: 0;
}
.userListBox .userItemBox .list_userImg{
  width: 135rpx;
  height: 135rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}
.userListBox .userItemBox .list_userInfo{
  flex: 1;
}
.userListBox .userItemBox .list_userInfo .userTitleBox{
  display: flex;
  align-items: center;
}
.userItemBox .list_userImg {
  position: relative;
}
.userItemBox .list_userImg .userImg {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.userItemBox .list_userImg .top_img {
  width: 50rpx;
  height: 80rpx;
  position: absolute;
  right: 0;
  top: 10rpx;
  z-index: 2;
}
.userListBox .userItemBox .list_userInfo .userTitleBox .userTitle{
  max-width: 200rpx;
  color: #000;
  font-size: 28rpx;
  line-height: 30rpx;
  overflow: hidden;
  font-weight: bold;
  text-overflow:ellipsis; white-space: nowrap;
  margin-top: 10rpx;
}
.userListBox .userItemBox .list_userInfo .userTitleBox .auth_div{
  flex: 1;
  overflow: hidden;
  text-overflow:ellipsis; 
  white-space: nowrap;
  margin-left: 10rpx;
  max-width: 300rpx;
}
.userListBox .userItemBox .list_userInfo .userTitleBox .auth_div .icon{
  width: 34rpx;
  height: 34rpx;
  vertical-align: middle;
}
.userListBox .userItemBox .list_userInfo .userTitleBox .auth_div text{
  color: #89899C;
  font-size: 24rpx;
  line-height: 34rpx;
  vertical-align: middle;
}
.userListBox .userItemBox .list_userInfo .userData{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20rpx;
}
.userListBox .userItemBox .list_userInfo .userData .userDataItem{
  text-align: center;
}
.userListBox .userItemBox .list_userInfo .userData .userDataItem .data{
  color: #000;
  font-size: 32rpx;
  line-height: 44rpx;
  font-weight: 600;
}
.userListBox .userItemBox .list_userInfo .userData .userDataItem view{
  color: #89899C;
  font-size: 22rpx;
  line-height: 36rpx;
  margin-top: 6rpx;
}
.choiceBox{
  display: flex;
  align-items: center;
  position: relative;
  padding: 32rpx 0 22rpx 28rpx;
}
.choiceBox .choice{
  border-radius: 32rpx;
  display: inline-block;
  padding: 0 20rpx;
  height: 64rpx;
  font-size: 28rpx;
  line-height: 64rpx;
  position: relative;
  background: #fff;
  color: #2562FF;
  z-index: 2;
  margin-right: 24rpx;
}
.choiceBox .choice .sj{
  display: inline-block;
}
.choiceBox .choice .sj image {
  width: 20rpx;
  height: auto;
}
.choiceBox .choiceActive{
  background: #fff;
  color: #2562FF;
  z-index: 4;
}
</style>