onecric_h5/pages/Game/top-creators.vue

<template>
	<view class="contain">
		<view class="header">
			<image src="/static/image/common/grade-left.png" mode="" @click="$back()"></image>
			<div class="tabbar">
				<div class="tab" :class="{'active': tab == 1}" @click="changeTab(1)">
					{{ $t("game.lab") }}
					<div class="line"></div>
				</div>
				<div class="tab" :class="{'active': tab == 2}" @click="changeTab(2)">
					{{ $t('member.tab1') }}
					<div class="line"></div>
				</div>
			</div>
		</view>
		<div class="list">
			<div class="item" v-for="(item, index) in list" :key="item.id">
				<div class="img-box" @click="toUrlLive(item)">
					<u--image
						class="avatar"
						:src="item.avatar"
						shape="circle"
						width="96rpx"
						height="96rpx"
					></u--image>
					<img v-if="item.islive == 1" class="img" src="/static/image/match/live-actives.png" alt="">
					<img v-else class="img" src="/static/image/match/live.png" alt="">
				</div>
				<div class="content">
					<div class="left">
						<div>{{ item.user_nickname }}</div>
						<div class="num">{{ $t('member.lab2') }}: {{ numberToK(item.attention) }}</div>
					</div>
					<view class="paid size28" v-if="item.is_attention == 1" @click="attention(item, index)">
						<!-- Followed -->
						{{ $t('member.lab') }}
					</view>
					<view class="guanzhu-box" v-if="item.is_attention == 0" @click="attention(item, index)">
						<image src="/static/image/match/guanzhu.png" mode="widthFix" class="guanzhu-icon mg-rt12"></image>
						<text class="size28 cfff">{{ $t('member.lab1') }}</text>
					</view>
				</div>
			</div>
		</div>
		<u-loadmore 
			:status="status"
			fontSize="28"
			:line="true"
			:loading-text="statusType.loadingText" 
			:loadmore-text="statusType.loadmoreText" 
			:nomore-text="statusType.nomoreText" 
		/>
	</view>
</template>

<script>
import { numberToK, parseTime } from '@/utils/util'
	export default {
		data() {
			return {
				type:0,
				list: [],
				statusType:{
					loadingText: this.$t('common.lab'),
					loadmoreText: this.$t('common.lab1'),
					nomoreText: this.$t('common.lab2')
				},
				status:'loadmore',
				tab: 1,
				pageNumber: 1
			}
		},
		onLoad(option) {
			this.type = option.type;
			this.getList()
		},
		// 触底触发
		onReachBottom() {
			if(this.status == 'loadmore'){
				this.pageNumber++;
				this.getList();
			}
			
		},
		// 下拉刷新
		onPullDownRefresh(){
			// 正常情况下接口返回应该很会很快。故意延迟调用，让用户有在刷新的体验感
			this.pageNumber = 1;
			this.status = 'loadmore';
			this.getList();
			
			setTimeout(res=>{
				uni.stopPullDownRefresh()
			},1500)
		},
		methods: {
			getList() {
				this.status= 'loading';
				this.getHistory()
			},
			getHistory() {
				let params = {
					page: this.pageNumber
				}
				if (this.tab == 2) {
					params.type = '2'
				}
				uni.$u.http.get('/api/game/users', {
					params
				}).then(res => {
					if (this.pageNumber == 1) {
						this.list = res.data || []
					} else {
						this.list = this.list.concat(res.data || [])
					}
					this.status = this.list.length == res.total ? 'nomore' : 'loadmore'
				})
			},
			changeTab(item){
				if (this.tab == item) {
					return
				}
				if (this.$store.state.isLogin != 1) {
					this.$toUrl('/pages/login/login')
					return
				}
				this.tab = item
				this.pageNumber = 1
				this.getList()
			},
			 /* 关注 */
			 attention(item, index) {
				if (this.$store.state.isLogin != 1) {
					this.$toUrl('/pages/login/login')
					return
				}
				uni.showLoading({
					title: this.$t('common.lab'),
				});
				uni.$u.http
					.post("/api/Member/attention", {
						id: item.id,
					})
					.then((res) => {
						if (this.tab == 1) {
							this.$set(this.list[index], 'attention', item.is_attention == 0 ? (item.attention + 1) : (item.attention - 1) )
							this.$set(this.list[index], 'is_attention', item.is_attention == 0 ? 1 : 0 )
						} else {
							this.pageNumber = 1
							this.getList()
						}
					}).finally(() => {
						uni.hideLoading();
					});
			},
			toUrlLive(item) {
				uni.navigateTo({
					url: `/pages/Match/member/usermanger?id=${item.id}`,
				});
			},
			numberToK(v) {
				return numberToK(v)
			},
			parseTime(t) {
				return parseTime(t, '{y}-{m}-{d} {h}:{i}')
			}
		},
	}
</script>

<style lang="scss" scoped>
page {
  background-color: #F3F3F7;
}
.header {
  color: #fff;
  font-size: 34rpx;
  padding: 0 24rpx;
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: #1D2550;
	display: flex;
	align-items: center;
	justify-content: center;
  image {
		position: absolute;
		left: 24rpx;
		top: 50%;
		transform: translateY(-50%);
    width: 60rpx;
    height: 60rpx;
  }
	.tabbar {
		width: 260px;
		display: flex;
		align-items: center;
		justify-content: center;
		.tab {
			flex: 1;
			line-height: 44px;
			text-align: center;
			position: relative;
			&.active {
				color: #DC3C23;
				.line {
					display: block;
				}
			}
		}
		.line {
			position: absolute;
			bottom: 3px;
			left: 50%;
			transform: translateX(-50%);
			width: 126rpx;
			background-color: #DC3C23;
			display: none;
			height: 2px;
		}
	}
}
.list {
	padding: 24rpx 28rpx;
  background-color: #F3F3F7;
}
.item {
	margin-bottom: 24rpx;
	padding: 28rpx 28rpx;
	background-color: #fff;
	border-radius: 12rpx;
	display: flex;
	font-size: 14px;
	.num {
		color: rgb(117, 117, 117);
		margin-top: 8px;
	}
}
.img-box {
	margin-right: 20rpx;
	position: relative;
	.img {
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 77%;
	}
}
.content {
	flex: 1;
	min-width: 10%;
	max-width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	.left {
		flex: 1;
		min-width: 10%;
		max-width: 100%;
	}
	.paid{
		padding: 8rpx 20rpx;
		border-radius: 12rpx;
		background-color: #ccc;
		color: #fff;
	}
	.guanzhu-box{
		display: flex;
		justify-content: center;
		align-items: center;
		background: url(@/static/image/match/right-bg.png)center center/ 100% 100% no-repeat;
		width: 180rpx;
		height: 59.54rpx;
		.guanzhu-icon{
			width: 28.82rpx;
			height: 25.39rpx;
		}
	}
}
</style>