yixiang/pageC/paihang.vue

<template>
	<view class="content">
		<view class="tabs">
			<u-tabs :list="tabs" :scrollable="false" @click="tochangetab" lineWidth="0" :current="current" :activeStyle="{
			            color: '#00B0B0',
			            fontWeight: 'bold'
			        }" :inactiveStyle="{
			            color: '#999999',
			        }"></u-tabs>
		</view>
		<view class="list">
			<view class="list-item hflex acenter jbetween" v-for="(item,index) in list" :key="index">
				<view class="user hflex acenter">
					<image :src="item.avatar" mode="aspectFill"></image>
					<view class="name vflex">
						<text class="text_hide">{{item.username}}</text>
						<text v-if="current == 0">精品贴总数{{item.num}}篇</text>
						<text v-if="current == 1">点赞总数{{item.num}}次</text>
						<text class="text_hide" v-if="current == 2">{{item.introduction}}</text>
					</view>
				</view>
				<view class="item-right" v-if="current == 0">
					<image src="/static/images/zuozhe1.png" class="img1" mode="aspectFill" v-if="index == 0"></image>
					<image src="/static/images/zuozhe2.png" class="img1" mode="aspectFill" v-if="index == 1"></image>
					<image src="/static/images/zuozhe3.png" class="img1" mode="aspectFill" v-if="index == 2"></image>
				</view>
				<view class="item-right" v-if="current == 1">
					<image src="/static/images/dianzan-paihang1.png" class="img1" mode="aspectFill" v-if="index == 0">
					</image>
					<image src="/static/images/dianzan-paihang2.png" class="img1" mode="aspectFill" v-if="index == 1">
					</image>
					<image src="/static/images/dianzan-paihang3.png" class="img1" mode="aspectFill" v-if="index == 2">
					</image>
				</view>
				<view class="item-right" v-if="current == 2">
					<image src="/static/images/jifen1.png" class="img2" mode="aspectFill" v-if="index == 0"></image>
					<image src="/static/images/jifen2.png" class="img2" mode="aspectFill" v-if="index == 1"></image>
					<image src="/static/images/jifen3.png" class="img2" mode="aspectFill" v-if="index == 2"></image>
				</view>
				<view class="item-right" v-if="index > 2">
					<text>{{item.row_num}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	export default {
		data() {
			return {
				tabs: [{
						id: 'boutique',
						name: '精品贴排行',
					},
					{
						id: 'like',
						name: '点赞排行',
					},
					{
						id: 'integral',
						name: '积分排行',
					},
				],
				current: 0,
				list: [],
				page: 1,
				last_page: 1,
			}
		},
		onLoad() {
			this.getlist()
		},
		onShow() {

		},
		onPullDownRefresh() {

		},
		onReachBottom() {
			if (this.page == this.last_page) {
				uni.$u.toast('已经到底了')
				return
			} else {
				this.page++
				this.getlist()
			}
		},
		methods: {
			getlist() {
				var _this = this
				$api.req({
					url: 'user/rank',
					method: 'GET',
					data: {
						is_page: 1,
						type: _this.tabs[_this.current].id,
						page: _this.page,
						limit: 10,
					}
				}, function(res) {
					if (res.code == 10000) {
						_this.list = _this.list.concat(res.data.list)
						_this.last_page = res.data.last_page
					}
				})
			},
			tochangetab(e) {
				this.current = e.index
				this.list = []
				this.page = 1
				this.getlist()
			},
		}
	}
</script>

<style lang="scss">
	.content {
		background: #FFFFFF;

		.tabs {}

		.list {
			.list-item {
				padding: 32rpx 28rpx;
				box-sizing: border-box;
				width: 100%;

				.item-right {
					.img1 {
						width: 188rpx;
						height: 52rpx;

					}

					.img2 {
						width: 60rpx;
						height: 38rpx;
					}

					text {
						font-size: 32rpx;
						font-family: SFPro, SFPro;
						font-weight: 400;
						color: #666666;
					}
				}

				.user {
					image {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
						margin-right: 20rpx;
					}

					.name {
						max-width: 384rpx;

						text:first-child {
							font-size: 32rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							color: #333333;
						}

						text:last-child {
							font-size: 24rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							color: #777777;
							padding-top: 10rpx;
						}
					}
				}
			}
		}
	}
</style>