weapp/pages/challengeList/challengeList.vue

<template>
	<view class="challenage-container">
		<view class="nav-container">
			<view v-for="(nav, ni) in navList" :key="ni" class="nav-item" :class="active === ni ? 'active' : ''" @click="(active = ni), ToTop()">{{ nav }}</view>
		</view>
		<view class="challenage-list">
			<template v-if="list.length > 0">
				<view v-for="item in list" :key="item.id" class="challenage-item">
					<!-- <view class="challenage-status" :class="Date.now() < item.guessing_endtime ? (item.status ? (item.status == 1 ? 'ing' : '') : 'no') : ''">
						{{ 
					      (Date.now() &lt; item.guessing_endtime) ? 
					         !item.status ? 
					            '未应战' : item.status == 1 ? 
					               '对战中' : '已结束' 
					         : '已结束'
						}}
					</view> -->
					<view class="challenage-status" :class="item.status == 1 ? 'ing' : item.status == 0 ? 'no' : ''" v-if="active == 0">
						<view v-if="item.status == 0">未应战</view>
						<view v-if="item.status == 1">对战中</view>
						<view v-if="item.status == 2">已结束</view>
						<view v-if="item.status == 3">已拒绝</view>
					</view>
					<view class="challenage-status" :class="item.status == 1 ? 'ing' : ''" v-else>{{ item.status == 1 ? '对战中' : '已结束' }}</view>
					<view class="body body2">
						<view class="user-avatar" :class="item.status == 2 && item.challenge_id == item.success_id ? 'win' : ''">
							<view class="avatar-bg"><view class="avatar-img" :style="{ backgroundImage: `url(${item.challenge_avatar})` }" /></view>
							<view class="user-name">{{ item.challenge_nickname | getName }}</view>
						</view>
						<!-- 我的挑战 -->
						<template v-if="active === 0">
							<view class="challenage-info">
								<view class="info-title">
									<text class="text">“</text>
									<text class="text spec">{{ item.challenge_nickname | getName }}</text>
									<text class="text">”向你发起的挑战</text>
								</view>
								<view class="info-num">
									<view class="num">{{ Math.floor(item.day / 10) }}</view>
									<view class="num">{{ item.day % 10 }}</view>
								</view>
								<view class="info-time">{{ item.time }}</view>
								<view class="info-btn" :class="item.status == 1 || item.status == 2 ? 'active' : ''" @click="toDetail(item)">
									{{ item | getAction(nowActive) }}
								</view>
							</view>
						</template>
						<!-- 围观竞猜 挑战排行 -->
						<template v-else>
							<view class="challenage-info info2">
								<view class="challenage-vs">
									<view class="info-score">{{ item.challenge_total }}</view>
									<view class="vs-img"></view>
									<view class="info-score accept">{{ item.accept_total }}</view>
								</view>
								<!-- <view class="info-btn" :class="item.status !== 3 || Date.now() > item.guessing_endtime ? 'active' : ''" @click="toDetail(item)"> -->
								<view class="info-btn" :class="item.status == 1 ? 'active' : ''" @click="toDetail(item)">{{ item | getAction(nowActive) }}</view>
							</view>
						</template>
						<view class="user-avatar" :class="item.status == 2 && item.accept_id == item.success_id ? 'win' : ''">
							<view class="avatar-bg accept"><view class="avatar-img" :style="{ backgroundImage: `url(${item.accept_avatar})` }" /></view>
							<view class="user-name">{{ item.accept_nickname | getName }}</view>
						</view>
					</view>
				</view>
			</template>
			<template v-else>
				<view class="noTip">暂无竞猜挑战</view>
			</template>
		</view>

		<view class="start-challenge" @click="getChallenge">
			<view class="start-cilcle"></view>
			<view class="text">发起挑战</view>
		</view>
	</view>
</template>

<script>
import { api_Mychallenge_list, api_GuessingList, api_GuessingRanklList } from '@/api.js';
export default {
	data() {
		return {
			navList: ['我的挑战', '围观竞猜', '挑战排行'],
			pageTitle: '学分挑战',
			active: 1,
			nowActive: 0,
			list: [],
			page: 1,
			requesting: false,
			scrollViewHeight: 0,
			showScrollView: false,
			// scrollTop: 0
		};
	},
	watch: {
		active() {
			this.refresherrefresh();
		}
	},
	filters: {
		getAction(item, nowActive) {
			if (nowActive == 0) {
				if (item.status == 1 || item.status == 2) {
					return '挑战详情';
				} else if (item.status == 0) {
					if (item.type == 0) {
						return '查看详情';
					} else if (item.type == 1) {
						return '应战';
					}
				} else if (item.status == 3) {
					return '已拒绝';
				}
			} else {
				if (item.guessing) {
					return '已竞猜';
				} else {
					if (Date.now() > item.guessing_endtime) {
						return '竞猜结束';
					} else {
						return '围观竞猜';
					}
				}
			}
			return '';
		},
		getLong(long, index) {
			return (Number(long) > 9 ? String(long) : '0' + long)[index];
		},
		getName(name) {
			if (name) {
				return name.length > 8 ? name.slice(0, 8) + '...' : name;
			}
			return '';
		}
	},
	// onPageScroll(e) {
	// 	this.scrollTop = e.scrollTop;
	// },
	onLoad(e) {
		if (e.active) {
			this.active = Number(e.active);
		}
		this.request(true);
		uni.$on('RejectPK', id => (this.list.find(e => e.id == id).status = 3));
		uni.$on('AcceptPK', id => (this.list.find(e => e.id == id).status = 1));
		uni.$on('Guesst', id => (this.list.find(e => e.id == id).guessing = true));
		uni.$on('REDRESH', () => this.refresherrefresh());
	},
	onReachBottom() {
		this.request();
	},
	methods: {
		//返回顶部
		ToTop() {
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 300
			});
		},
		refresherrefresh() {
			this.page = 1;
			this.request(true);
		},
		request(refresh) {
			if (!this.requesting && this.page > 0) {
				this.requesting = true;
				uni.loading();
				this.$ajax
					.get(
						this.active == 0
							? api_Mychallenge_list + `?page=${this.page}`
							: this.active === 1
							? api_GuessingList + `?page=${this.page}`
							: api_GuessingRanklList + `?page=${this.page}`
					)
					.then(([, { data: { data: { list, size } } }]) => {
						list.length < size ? (this.page = 0) : (this.page += 1);
						(this.list = refresh ? list : [...this.list, ...list]), (this.nowActive = this.active);
						uni.hideLoading();
						this.requesting = false;
					});
			}
		},
		getChallenge() {
			// 点击发起挑战
			uni.navigateTo({ url: '../challenge/challenge' });
		},
		toDetail(item) {
			const type = this.$options.filters.getAction(item, this.active);
			if (type == '查看详情' || type == '应战') {
				uni.pkInfo = {
					challenge_id: item.challenge_id,
					challenge_avatar: item.challenge_avatar,
					challenge_nickname: item.challenge_nickname,
					accept_id: item.accept_id,
					accept_avatar: item.accept_avatar,
					accept_nickname: item.accept_nickname,
					id: item.id
				};
			}
			if (type == '查看详情') {
				uni.navigateTo({ url: '../challenge/challenge?type=1' });
			} else if (type == '应战') {
				uni.navigateTo({ url: '../challenge/challenge?type=2' });
			} else if (type == '挑战详情' || type == '围观竞猜' || type == '已竞猜' || type == '竞猜结束') {
				uni.temp1 = item;
				uni.navigateTo({ url: '../challenge-detail/challenge-detail' + (type == '挑战详情' ? '?from=1' + '&active=' + this.active : '?active=' + this.active) });
			}
		}
	}
};
</script>

<style lang="scss">
page {
	width: 100%;
	min-height: 100vh;
	.challenage-container {
		width: 100%;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		.nav-container {
			width: 100%;
			height: 104rpx;
			background-color: #ffffff;
			padding: 0 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: fixed;
			top: 0;
			left: 0;
			background: #fff;
			z-index: 9999;
			.nav-item {
				color: #333333;
				font-size: 32rpx;
				line-height: 44rpx;
				font-weight: bolder;
				&.active {
					color: #ea4a41 !important;
					position: relative;
					&::after {
						content: '';
						display: block;
						width: 30rpx;
						height: 4rpx;
						border-radius: 4rpx;
						background: linear-gradient(97deg, #f97c55 0%, #f44545 100%);
						position: absolute;
						left: 50%;
						bottom: 0;
						transform: translate(-50%, 4rpx);
					}
				}
			}
		}
		.challenage-list {
			margin-top: 120rpx;
			flex: 1;
			// overflow: hidden;
			overflow: scroll;
			-webkit-overflow-scrolling: touch;
			background-color: #f9f9fb;
			box-sizing: border-box;
			.noTip {
				width: 100%;
				padding: 20rpx 0;
				text-align: center;
				color: #999999;
			}
			.challenage-item {
				width: calc(100% - 60rpx);
				margin: 0 auto 30rpx auto;
				border-radius: 24rpx;
				background-color: #ffffff;
				padding: 30rpx;
				box-sizing: border-box;
				overflow: hidden;
				&:nth-of-type(1) {
					margin-top: 30rpx;
				}
				position: relative;
				.challenage-status {
					position: absolute;
					top: 0;
					right: 0;
					height: 56rpx;
					padding: 0 30rpx;
					line-height: 56rpx;
					color: #999999;
					font-size: 28rpx;
					border-bottom-left-radius: 56rpx;
					background-color: #eeeeee;
					font-weight: bolder;
					&.ing {
						background: linear-gradient(113deg, #ffc401 0%, #fe0000 100%) !important;
						color: #ffffff !important;
					}
					&.no {
						background: linear-gradient(180deg, #13aefe 0%, #7bc9fb 100%) !important;
						color: #ffffff !important;
					}
				}
				.body {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					&.body2 {
						padding-top: 10rpx !important;
					}
					.user-avatar {
						width: 140rpx;
						position: relative;
						&.win {
							&::before {
								content: '';
								display: block;
								width: 74rpx;
								height: 32rpx;
								background: url(../../static/new_challenge/win_t.png) center no-repeat;
								background-size: 100%;
								position: absolute;
								top: -30rpx;
								left: 50%;
								transform: translateX(-50%);
								z-index: 99;
							}
							&::after {
								content: '';
								display: block;
								width: 150rpx;
								height: 65rpx;
								background: url(../../static/new_challenge/win_b.png) center no-repeat;
								background-size: 100%;
								position: absolute;
								left: 50%;
								bottom: 24rpx;
								transform: translateX(-50%);
								z-index: 99;
							}
						}
						.avatar-bg {
							width: 140rpx;
							height: 124rpx;
							background: linear-gradient(180deg, #f97c55 0%, #f44545 100%);
							&.accept {
								background: linear-gradient(180deg, #13aefe 0%, #7bc9fb 100%);
							}
							clip-path: polygon(0 50%, 25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%);
							display: flex;
							align-items: center;
							justify-content: center;
							margin-bottom: 6rpx;
							.avatar-img {
								width: calc(100% - 20rpx);
								height: calc(100% - 12rpx);
								clip-path: polygon(0 50%, 25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%);
								background-position: center;
								background-repeat: no-repeat;
								background-size: 100%;
								background-color: transparent;
							}
						}
						.user-name {
							width: 140rpx;
							height: 40rpx;
							color: #333333;
							font-size: 28rpx;
							line-height: 40rpx;
							text-align: center;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}
					.challenage-info {
						flex: 1;
						overflow: hidden;
						display: flex;
						flex-direction: column;
						align-items: center;
						.info-title {
							width: 100%;
							text-align: center;
							margin-bottom: 20rpx;
							.text {
								color: #333333;
								font-size: 28rpx;
								line-height: 40rpx;
								&.spec {
									color: #ea4a41 !important;
								}
							}
						}
						.info-num {
							display: flex;
							align-items: center;
							justify-content: center;
							margin-bottom: 10rpx;
							.num {
								height: 86rpx;
								padding: 0 14rpx;
								background: linear-gradient(180deg, #f97c55 0%, #f44545 100%);
								color: #ffffff;
								font-size: 48rpx;
								line-height: 86rpx;
								border-radius: 8rpx;
								&:nth-of-type(1) {
									margin-right: 10rpx;
								}
							}
						}
						.info-time {
							color: #333333;
							font-size: 28rpx;
							line-height: 40rpx;
							margin-bottom: 20rpx;
							text-align: center;
						}
						.info-btn {
							width: 192rpx;
							height: 68rpx;
							border-radius: 68rpx;
							text-align: center;
							line-height: 68rpx;
							background-color: #f8f8f8;
							color: #333333;
							font-size: 28rpx;
						}
						&.info2 {
							.challenage-vs {
								display: flex;
								align-items: center;
								justify-content: space-between;
								margin-bottom: 28rpx;
								padding-top: 44rpx;
								.info-score {
									min-width: 104rpx;
									box-sizing: border-box;
									text-align: center;
									height: 62rpx;
									border-radius: 8rpx;
									line-height: 62rpx;
									padding: 0 8rpx;
									background: linear-gradient(92deg, #f97c55 0%, #f44545 100%);
									color: #ffffff;
									font-size: 36rpx;
									&.accept {
										background: linear-gradient(268deg, #13aefe 0%, #7bc9fb 100%) !important;
									}
								}
								.vs-img {
									width: 100rpx;
									height: 100rpx;
									background: url('https://api.jiuweiyun.cn/public/uploads/weapp/icon/vs.png') center no-repeat;
									background-size: 100%;
									margin: 0 10rpx;
								}
							}
						}
					}
				}
			}
		}
		.start-challenge {
			position: fixed;
			right: 0;
			bottom: 240rpx;
			height: 88rpx;
			border-top-left-radius: 88rpx;
			border-bottom-left-radius: 88rpx;
			padding: 0 24rpx 0 16rpx;
			background: linear-gradient(81deg, #ffc401 0%, #fe0000 100%);
			display: flex;
			align-items: center;
			justify-content: center;
			.start-cilcle {
				width: 68rpx;
				height: 68rpx;
				border-radius: 68rpx;
				background-color: #ffffff;
				margin-right: 20rpx;
				position: relative;
				&::after,
				&::before {
					content: '';
					display: block;
					width: 40rpx;
					height: 6rpx;
					background-color: #ffc401;
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
				}
				&::after {
					transform: translate(-50%, -50%) rotate(90deg) !important;
				}
			}
			.text {
				color: #ffffff;
				font-size: 32rpx;
				font-weight: bolder;
			}
		}
	}
}
</style>