weapp-v2/pages/joinnum/joinnum.vue

<template>
	<view class="joinnum" @tap="cancleChoose">
		<custom-nav :title="pageTitle"></custom-nav>
		<view class="content">
			<view class="top">
				<image src="https://api.jiuweiyun.cn/public/uploads/weapp/icon/logo.png" mode="scaleToFill"></image>
				<view class="info">
					<view class="season">{{ seasonNameList[seasonNameList.length - targetSeason] }}</view>
					<view class="total" v-if="userServerInfo.type === 3">
						<text class="cuIcon-friendfill" style="color: #FA6342; margin-right: 5px;"></text>
						<text style="color: #FA6342; margin-right: 15px;">{{ totalTop + totalSuper }}</text>
						<text>参赛总人数</text>
					</view>
				</view>
				<view class="choose" @tap.stop="chooseSeason">{{	`大卫博士学位争霸赛第${targetSeason}季`	}}&nbsp;<text class="cuIcon-right"></text></view>
				<scroll-view class="down" scroll-y :class="down ? 'show' : 'hide'">
					<view class="item" 
					v-for="(item, index) in seasonNameList" 
					:key="index" 
					@tap="switchSeason(index)">{{ seasonNameList.length - targetSeason === index ? '' : item }} 
					<text :style="{ display: seasonNameList.length - targetSeason === index ? 'none' : 'flex' }" class="cuIcon-right"></text></view>
				</scroll-view>
			</view>
			<view class="switch" v-if="userServerInfo.type === 3">
				<text :class="index === 0 ? 'active' : ''" @tap="switchTab(0)">我的</text>
				<text :class="index === 1 ? 'active' : ''" @tap="switchTab(1)">全部</text>
			</view>
			<view class="bubble" v-if="userServerInfo.type === 3">
				<view class="row">
					<view class="left"><text>{{ index === 0 ? '服务' : '赛季'}}</text>
					参赛总人数：<text style="color: #FA6342;">{{ index === 0 ? serverTop + serverSuper + crownNum : totalTop + totalSuper }}人</text></view>
					<view class="right" v-if="index === 0">
						批发商：<text style="color: #FA6342;">{{ crownNum }}人</text></view>
				</view>
				<view class="line"></view>
				<view class="row">
					<view class="left">经销商：<text style="color: #FA6342;">{{ index === 0 ? serverTop : totalTop }}人</text></view>
					<view class="right">销售员：<text style="color: #FA6342;">{{ index === 0 ? serverSuper : totalSuper }}人</text></view>
				</view>
			</view>
			<view class="bubble" v-else>
				<view class="row">
					<view class="left">团队参赛总人数：<text style="color: #FA6342;">{{ crownTop + crownSuper }}人</text></view>
				</view>
				<view class="line"></view>
				<view class="row">
					<view class="left">经销商：<text style="color: #FA6342;">{{ crownTop }}人</text></view>
					<view class="right">销售员：<text style="color: #FA6342;">{{ crownSuper }}人</text></view>
				</view>
			</view>
			<view class="list">
				<scroll-view scroll-y :style="{ height: scrollViewHeight + 'px' }" @scrolltolower="scrolltolower">
					<ranking-item v-for="(item, index) in list" :key="item.id" :index="index+1" :item="item" :type="type"></ranking-item>
					<custom-reach-bottom v-if="list.length" :nomore="nomore"></custom-reach-bottom>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import { api_getTotalJoinNum, api_getTeamJoinNum, api_todayPerson, api_todayTeam } from '../../api.js'
	import rankingItem from '../../components/ranking-item.vue'
	export default {
		components: {
			rankingItem
		},
		data() {
			return {
				pageTitle: '参赛人数',
				totalTop: 0,  //赛季总参赛经销商人数
				totalSuper: 0,  //赛季总参赛销售员人数
				crownTop: 0,  //批发商的经销商人数
				crownSuper: 0,  //批发商的销售员人数
				crownNum: 0,  //客服团队的批发商数量
				serverTop: 0,  //客服团队的经销商数量
				serverSuper: 0,  //客服团队的销售员数量
				index: 0,  //客服查看参赛数据时，active 下标
				list: [], 
				scrollViewHeight: 0,  //scrollview 高
				type: 2,  //排行榜类型
				page: 1,  //页数
				nomore: false,  //没得更多了
				requesting: false,  //是否正在进行网络请求
				targetSeason: 0,  //要切换的目标赛季届数
				seasonNameList: [],  //历史赛季名称
				down: false,
			};
		},
		computed: {
			userServerInfo () {
				return this.$store.state.userServerInfo
			}
		},
		methods: {
			switchSeason (index) {  //切换赛季
				this.page = 1  //恢复页码
				this.nomore = false  //恢复没得更多了  
				uni.showLoading({ title: '加载中', mask: true })  //显示loading
				this.targetSeason = this.userServerInfo.season - index
				this.initData(this.targetSeason)
			},
			switchTab(index) {  //客服点击切换时
				uni.showLoading({ title: '加载中', mask: true })  //显示loading
				this.index = index
				this.page = 1  //恢复页码
				this.nomore = false  //恢复没得更多了
				if (index) {
					this.type = 0
					this.getScrollViewList(api_todayPerson)  //切换到全部（个人榜）
				} else {
					this.type = 2
					this.getScrollViewList(api_todayTeam)  //切换到我的（团队榜）
				}
			},
			getScrollViewList (api) {  //获取scrollview 里的诗句
				this.$ajax.get(`${api}?page=${this.page}&season=${this.targetSeason}`).then(([ , { data: res }]) => {
					res.data.list.length < 20 ? this.nomore = true : ''  //如果返回的数据长度小于20，说明没得更多了
					this.list = this.list = res.data.list
					this.$hideLoading()  //异步操作结束，停止 loading
				})
			},
			chooseSeason () {  //点击切换赛季
				this.down = !this.down
			},
			cancleChoose () {  //收起下拉效果
				this.down = false
			},
			scrolltolower () {
				if (!this.requesting && !this.nomore) {  //防抖
					this.requesting = true
					this.$ajax.get(`${ this.index ? api_todayPerson : api_todayTeam }?page=${this.page + 1}&season=${this.targetSeason}`).then(([ , { data: res }]) => {
						res.data.list.length < 20 ? this.nomore = true : ''  //如果返回的数据长度小于20，说明没得更多了
						this.requesting = false
						this.page ++ 
						this.list = [...this.list, ...res.data.list]
					}, () => {
						this.requesting = false
					})
				}
			},
			async initData (season) {
				if (this.userServerInfo.type === 2) {  //如果是批发商查看参赛人数
					const [ , { data: res }] = await this.$ajax.get(`${api_getTeamJoinNum}?season=${season}`)  //获取批发商的团队数据
					this.crownTop = res.data.top_num
					this.crownSuper = res.data.super_num
					
					this.getScrollViewList(api_todayTeam)  //获取批发商的团队榜列表
				} else if (this.userServerInfo.type === 3) {  //如果是客服查看参赛人数 
					const [ , { data: res1 }] = await this.$ajax.get(`${api_getTotalJoinNum}?season=${season}`)  //获取赛季总参赛人数
					this.totalTop = res1.data.top_num
					this.totalSuper = res1.data.super_num
					
					const [ , { data: res2 }] = await this.$ajax.get(`${api_getTeamJoinNum}?season=${season}`)  //获取客服的团队数据
					this.crownNum = res2.data.crown_num
					this.serverTop = res2.data.top_num
					this.serverSuper = res2.data.super_num
					
					this.getScrollViewList(this.index ? api_todayPerson : api_todayTeam)  //获取客服的团队榜列表
				}
			}
		},
		async created() {
			uni.showLoading({ title: '加载中', mask: true })  //显示loading
			this.$scrollViewHeight('.list')  //设置页面内 scroll view 的高度
			this.targetSeason = this.$store.state.userServerInfo.season  //获取当前届数
			this.seasonNameList = new Array(this.targetSeason - 19 + 1).fill(0)  //将下拉选择里面的数据（历史赛季名称）放在数组里
			this.seasonNameList.forEach((e, i) => {
				this.seasonNameList[i] = `大卫博士学位争霸赛第${this.$store.state.userServerInfo.season - i}季`
			})
			this.initData(this.targetSeason)
		}
	}
</script>

<style lang="scss" scoped>
	.joinnum {
		@include page();
		.content {
			border-top: $custom-nav-borderbot-height solid $custom-nav-borderbot-color;
			background: $custom-nav-borderbot-color;
			display: flex;
			flex-direction: column;
			align-items: center;
			.top {
				width: 100%;
				height: 140rpx;
				margin-bottom: 10rpx;
				background: #FFFFFF;
				box-sizing: border-box;
				padding: 30rpx;
				display: flex;
				align-items: center;
				position: relative;
				image {
					height: 100%;
					width: 80rpx;
				}
				.info {
					flex: 1;
					height: 100%;
					margin-left: 12rpx;
					display: flex;
					flex-direction: column;
					position: relative;
					.season {
						color: #2A2A2A;
						font-size: 26rpx;
					}
					.total {
						margin-top: 20rpx;
						height: 30rpx;
						display: flex;
						font-size: 24rpx;
						align-items: center;
					}
				}
				.choose {
					color: #999999;
					font-size: 26rpx;
				}
				.down {
					position: absolute;
					width: 750rpx;
					height: 0;
					top: 140rpx;
					right: 0rpx;
					background: #FFFFFF;
					box-shadow:0px 1px 3px 0px rgba(0, 0, 0, 0.2);
					z-index: 1;
					border-bottom: 100vh solid;
					border-color: transparent;
					box-sizing: content-box;
					&.show {
						animation: down-show .2s;
						animation-fill-mode: forwards;
						border-bottom-width: 100vh;
					}
					&.hide {
						animation: down-hide .2s;
						animation-fill-mode: forwards;
						border-bottom-width: 0rpx;
					} 
					.item {
						line-height: 80rpx;
						box-sizing: border-box;
						padding: 0 30rpx;
						border-bottom: 1rpx solid #EEEEEE;
						display: flex;
						justify-content: space-between;
						background: #FFFFFF;
					}
				}
			}
			.switch {
				width: 100%;
				height: 60rpx;
				background: #FFFFFF;
				display: flex;
				justify-content: space-around;
				align-items: center;
				margin-bottom: 10rpx;
				text {
					font-size: 32rpx;
					color: #999999;
					height: 100%;
					line-height: 60rpx;
					text-align: center;
					flex: 1;
					position: relative;
					&.active {
						color: #FA6342;
					}
					&.active::after {
						content: '';
						position: absolute;
						width: 100rpx;
						height: 4rpx;
						background: #FA6342;
						bottom: 0;
						left: 50%;
						transform: translateX(-50%);
					}
				}
				
			}
			.bubble {
				width: 100%;
				box-sizing: border-box;
				padding: 0 30rpx;
				margin-bottom: 10rpx;
				background: #FFFFFF;
				.row {
					height: 60rpx;
					display: flex;
					.left, .right {
						box-sizing: border-box;
						flex: 1;
						height: 100%;
						float: left;
						display: flex;
						align-items: center;
						justify-content: center;
						&.right {
							border-left: 1rpx solid #EEEEEE;
						}
					}
				}
				.line {
					height: 1rpx;
					background: #EEEEEE;
				}
			}
			.list {
				flex: 1;
				width: 100%;
				background: #FFFFFF;
			}
		}
	}
	@keyframes down-show {
		0% {
			height: 0;
			background: rgba(0, 0, 0, 0);
		}
		100% {
			height: 260rpx;
			background: rgba(0, 0, 0, .6);
		}
	}
	@keyframes down-hide {
		0% {
			height: 260rpx;
			background: rgba(0, 0, 0, .6);
		}
		100% {
			height: 0;
			background: rgba(0, 0, 0, 0);
		}
	}
</style>