weapp-v2/pages/challenge-detail/challenge-detail.vue

<template>
	<view class="challenge-detail-container">
		<view class="bgc">
			<view class="challenage-info-top">
				<!-- <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="user-avatar">
					<view class="avatar-bg"><view class="avatar-img" :style="{ backgroundImage: item.challenge_avatar ? `url(${item.challenge_avatar})` : '' }" /></view>
					<view class="user-name">{{ item.challenge_nickname | getName }}</view>
					<view class="winTip" v-if="item.status == 2" :class="item.status == 2 && item.challenge_id == item.success_id ? 'winTip_red' : 'winTip_gray'">
						{{ item.status == 2 && item.challenge_id == item.success_id ? '胜利' : '失败' }}
					</view>
				</view> 
				<!-- 竞猜时间阶段 对战中 -->
				<!-- <template v-if="Date.now() < item.guessing_endtime && item.status === 1"> -->
				<template>
					<view class="challenage-info">
						<view class="info-title"></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">{{ item | getAction(self) }}</view>
					</view>
				</template>
				<!-- <template v-else>
					<view class="challenage-info info2">
						<view class="info-title">
							<text class="text">“</text>
							<text class="text spec">{{ item.challenge_nickname | getName }}</text>
							<text class="text">”向你发起的挑战</text>
						</view>
						<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">{{ item | getAction(self) }}</view>
					</view>
				</template> -->
				<view class="user-avatar">
					<view class="avatar-bg accept"><view class="avatar-img" :style="{ backgroundImage: item.accept_avatar ? `url(${item.accept_avatar})` : '' }" /></view>
					<view class="user-name">{{ item.accept_nickname | getName }}</view>
					<view class="winTip" v-if="item.status == 2" :class="item.status == 2 && item.accept_id == item.success_id ? 'winTip_red' : 'winTip_gray'">
						{{ item.status == 2 && item.accept_id == item.success_id ? '胜利' : '失败' }}
					</view>
				</view>
			</view>
			<!-- <view class="bottom">
					
				<view class="tiaozhan">
					恭喜“个人昵称”猜对了。奖励50学分！
				</view>
			</view> -->
		</view>
		
		<view class="challenage-info-num">
			<view class="title">从争霸赛开始到现在各自总学分</view>
			<view class="info-nums-box">
				<view class="num">{{ item.challenge_total }}</view>
				<view class="num accept">{{ item.accept_total }}</view>
			</view>
			<view class="info-nums-user">
				<view class="user">{{ item.challenge_nickname | getName }}</view>
				<view class="user">{{ item.accept_nickname | getName }}</view>
			</view>
		</view>
		<view class="challenage-info-result">
			<view class="result-title">
				<template v-if="n">
					<text class="text">距离竞猜结束还有：</text>
					<view class="count-time">{{ countDown }}</view>
				</template>
				<template v-else>
					<text class="text">竞猜已结束</text>
				</template>
			</view>
			<view class="support">
				<view class="red">
					支持率   {{ item.challenge_num + item.accept_num ? Math.floor((item.challenge_num / (item.challenge_num + item.accept_num)) * 100) : 0 }}%
				</view>
				<view class="blue">
					{{ item.challenge_num + item.accept_num ? Math.ceil((item.accept_num / (item.challenge_num + item.accept_num)) * 100) : 0 }}% 支持率
				</view>
			</view>
			<view class="result-progress">
				<view
					class="progress-item challenge"
					:style="{ width:30+ (item.challenge_num + item.accept_num ? Math.floor((item.challenge_num / (item.challenge_num + item.accept_num)) * 100) : 50) + '%' }"
				>
					<view class="user-avatar" :style="{ backgroundImage: item.challenge_avatar ? `url(${item.challenge_avatar})` : '' }" />
					<view class="progress-value">
						<!-- {{ item.challenge_num + item.accept_num ? Math.floor((item.challenge_num / (item.challenge_num + item.accept_num)) * 100) : 0 }}% -->
					</view>
					<view class="progress-vs">vs</view>
				</view>
				<!-- selected -->
				<view
					class="progress-item accept"
					:style="{ width: 30+ (item.challenge_num + item.accept_num ? Math.floor((item.accept_num / (item.challenge_num + item.accept_num)) * 100) : 50) + '%' }"
				>
					<view class="progress-value">
						<!-- {{ item.challenge_num + item.accept_num ? Math.floor((item.accept_num / (item.challenge_num + item.accept_num)) * 100) : 0 }}% -->
					</view>
					<view class="user-avatar" :style="{ backgroundImage: item.accept_avatar ? `url(${item.accept_avatar})` : '' }" />
				</view>
			</view>
			<view class="result-btn">
				<view
					class="btn"
					:class="Date.now() > item.guessing_endtime || (item.guessing && item.support_id !== item.challenge_id) ? 'time-end' : ''"
					@click="action(item.challenge_nickname, item.challenge_id, 0)"
				>
					<template v-if="item.guessing">
						{{ item.support_id == item.challenge_id ? '已' : '' }} 预测ta赢
					</template>
					<template v-else>
						{{
							(Date.now() &lt; item.guessing_endtime) ? '预测ta赢' : '预测时间截止'
						}}
					</template>
				</view>
				<view
					class="btn accept"
					:class="Date.now() > item.guessing_endtime || (item.guessing && item.accept_id !== item.challenge_id) ? 'time-end' : ''"
					@click="action(item.accept_nickname, item.accept_id, 1)"
				>
					<template v-if="item.guessing">
						{{ item.support_id == item.accept_id ? '已' : '' }} 预测ta赢
					</template>
					<template v-else>
						{{
							(Date.now() &lt; item.guessing_endtime) ? '预测ta赢' : '预测时间截止'
						}}
					</template>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import { api_challengeGuessing } from '@/api.js'
export default {
	data() {
		return {
			pageTitle: '挑战详情',
			item: {},
			self: true,
			n: 0,
			active: '' //判断是从我的挑战，围观竞猜 挑战排行那个tab进来的
		}
	},
	computed: {
		countDown() {
			const add0 = num => (num < 10 ? '0' + num : num);
			const sec = Math.floor((this.item.guessing_endtime - this.n) / 1000);
			const day = Math.floor(sec / 86400);
			const hour = Math.floor((sec % 86400) / 3600);
			const minite = Math.floor((sec - 86400 * day - hour * 3600) / 60);
			const second = Math.floor(sec - 86400 * day - hour * 3600 - minite * 60);
			return `${add0(hour + +day * 24)}时${add0(minite)}分${add0(second)}秒`;
		}
	},
	filters: {
		getAction(item, self) {
			if (self) {
				if (item.status == 1) {
					return 'PK中';
				} else {
					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, len) {
			if (name) {
				return name.length > 5 ? name.slice(0, 5) + '...' : name;
			}
			return '';
		}
	},
	beforeDestroy() {
		clearInterval(this.timer);
	},
	onLoad({ from, active }) {
		this.item = uni.temp1;
		this.active = active; //判断是从我的挑战，围观竞猜 挑战排行那个tab进来的
		console.log(this.item, 'item');
		if (Date.now() <= this.item.guessing_endtime) {
			this.n = Date.now();
			this.timer = setInterval(() => {
				if (this.n + 1000 > this.item.guessing_endtime) {
					clearInterval(this.timer);
					this.n = 0;
					return;
				}
				this.n = Date.now();
			}, 1000);
		}
		if (!from) {
			this.self = false;
		}
	},
	methods: {
		action(nickname, userid, type) {
			if (!this.item.guessing) {
				if (this.n != 0) {
					if (this.item.accept_id != this.$store.state.userServerInfo.id && this.item.challenge_id != this.$store.state.userServerInfo.id) {
						uni.showModal({ title: '提示', content: `确定要预测${nickname}赢？` }).then(([, { confirm }]) => {
							if (confirm) {
								uni.loading()
								this.$ajax.get(`${api_challengeGuessing}?challenge_id=${this.item.id}&user_id=${userid}&type=${type}`).then(([, { data: { code, msg } }]) => {
									uni.hideLoading()
									if (code == 200) {
										uni.fromUpload = true
										this.item.guessing = true
										this.item.support_id = userid
										uni.$emit('Guesst', this.item.id)
									} else {
										uni.showToast({
										    title: msg,
										    duration: 2000,
											icon:"none"
										})
									}
								})
							}
						});
					} else {
						uni.showToast({
							title: '当前竞猜不可参与',
							duration: 2000,
							icon:'none'
						})
						// this.$refs.toast.hover('当前竞猜不可参与', 2345, 'center');
					}
				} else {
					uni.showToast({
						title: '竞猜已结束',
						duration: 2000,
						icon:'none'
					})
					// this.$refs.toast.hover('竞猜已结束', 2345, 'center');
				}
			} else {
				uni.showToast({
					title: '您已参与此次竞猜',
					duration: 2000,
					icon:'none'
				})
				// this.$refs.toast.hover('您已参与此次竞猜', 2345, 'center')
			}
		}
	}
};
</script>

<style lang="scss">
page {
	display: flex;
	flex-direction: column;
	.winTip {
		font-size: 28rpx;
		font-weight: bold;
		text-align: center;
		&_red {
			color: #EA4A41;
		}
		&_gray {
			color: #999999;
		}
	}
	.support {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		font-weight: bold;
		line-height: 50rpx;
		.red {
			color: #EA4A41;
		}
		.blue {
			color: #1DB0FE;
		}
	}
	.challenge-detail-container {
		flex: 1;
		background-color: #f9f9fb;
		padding: 30rpx;
		box-sizing: border-box;
		.bgc {
			background-color: #ffffff;
			border-radius: 24rpx;
			margin-bottom: 30rpx;
			padding: 30rpx;
			position: relative;
			.bottom {
				margin-top: 20rpx;
				// .info-btn {
				// 	width: 630rpx;
				// 	height: 96rpx;
				// 	border-radius: 56rpx;
				// 	text-align: center;
				// 	line-height: 96rpx;
				// 	background-color: #f8f8f8;
				// 	color: #333333;
				// 	font-size: 32rpx;
				// 	font-weight: bold;
				// }
			}
			.tiaozhan {
				width: 630rpx;
				height: 96rpx;
				border-radius: 56rpx;
				text-align: center;
				line-height: 96rpx;
				background-color: #f8f8f8;
				color: #333333;
				font-size: 32rpx;
				font-weight: bold;
			}
		}
		.challenage-info-top {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.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;
				}
			}
			.user-avatar {
				width: 140rpx;
				overflow: hidden;
				.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-top: 40rpx;
					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;
						.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;
						}
					}
				}
			}
		}
	}
	.challenage-info-num {
		width: 100%;
		padding: 30rpx;
		background-color: #ffffff;
		box-sizing: border-box;
		border-radius: 24rpx;
		margin-bottom: 30rpx;
		.title {
			color: #333333;
			font-size: 28rpx;
			line-height: 40rpx;
			margin-bottom: 30rpx;
			text-align: center;
		}
		.info-nums-box {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 14rpx;
			.num {
				flex: 1;
				margin-right: 15rpx;
				height: 88rpx;
				line-height: 88rpx;
				border-radius: 16rpx;
				text-align: center;
				color: #ea4a41;
				font-size: 48rpx;
				background-color: #fff4f3;
				&.accept {
					background: #f1f9ff !important;
					color: #1db0fe !important;
					margin-left: 15rpx;
					margin-right: 0 !important;
				}
			}
		}
		.info-nums-user {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.user {
				flex: 1;
				margin-right: 15rpx;
				text-align: center;
				color: #333333;
				font-size: 28rpx;
				&.accept {
					margin-left: 15rpx;
					margin-right: 0 !important;
				}
			}
		}
	}
	.challenage-info-result {
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;
		background-color: #ffffff;
		.result-title {
			width: 100%;
			padding: 0 38rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			margin-bottom: 30rpx;
			.text {
				color: #333333;
				font-size: 28rpx;
				line-height: 40rpx;
			}
			.count-time {
				width: 204rpx;
				height: 64rpx;
				border-radius: 6rpx;
				background-color: #353235;
				color: #ffffff;
				font-size: 40rpx;
				line-height: 64rpx;
				text-align: center;
			}
		}
		.result-progress {
			width: 100%;
			margin-bottom: 30rpx;
			display: flex;
			align-items: stretch;
			justify-content: space-between;
			.progress-item {
				height: 88rpx;
				padding: 0 12rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				position: relative;
				&.challenge {
					background: linear-gradient(90deg, #f97c55 0%, #ff513d 54%, #f44545 100%);
					border-top-left-radius: 88rpx;
					border-bottom-left-radius: 88rpx;
					border-bottom-right-radius: 150rpx;
					border-top-right-radius: 20rpx;
					width: 70%;
					.user-avatar {
						margin-right: 38rpx !important;
					}
					.progress-vs {
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
						background: linear-gradient(180deg, #ffe4ab 0%, #ffba40 100%);
						border: 4rpx solid #ffffff;
						box-sizing: border-box;
						display: flex;
						align-items: center;
						justify-content: center;
						color: #ffffff;
						font-size: 30rpx;
						font-weight: bold;
						text-align: center;
						line-height: 52rpx;
						position: absolute;
						top: 50%;
						right: -30rpx;
						transform: translateY(-50%);
						z-index: 99;
					}
				}
				&.accept {
					background: linear-gradient(77deg, #13aefe 0%, #1bb0fe 53%, #7bc9fb 100%);
					border-top-right-radius: 88rpx;
					border-bottom-right-radius: 88rpx;
					border-top-left-radius: 150rpx;
					border-bottom-left-radius: 20rpx;
					width: 30%;
					justify-content: flex-end;
					.user-avatar {
						margin-left: 10rpx !important;
					}
				}
				.user-avatar {
					width: 64rpx;
					height: 64rpx;
					border-radius: 50%;
					box-sizing: border-box;
					border: 1px solid #ffffff;
					background-position: center;
					background-repeat: no-repeat;
					background-size: 100%;
				}
				.progress-value {
					color: #ffffff;
					font-size: 36rpx;
				}
				&.selected {
					background: #f8f8f8 !important;
					.progress-value {
						color: #999999 !important;
					}
				}
			}
		}
		.result-btn {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 22rpx;
			box-sizing: border-box;
			.btn {
				width: 228rpx;
				height: 68rpx;
				line-height: 68rpx;
				border-radius: 68rpx;
				text-align: center;
				box-sizing: border-box;
				border: 1px solid #ea4a41;
				background-color: #ffffff;
				color: #ea4a41;
				font-size: 28rpx;
				&.accept {
					border-color: #1db0fe !important;
					color: #1db0fe !important;
				}
				&.time-end {
					border-color: #f8f8f8 !important;
					background-color: #f8f8f8 !important;
					color: #999999 !important;
				}
			}
		}
	}
}
</style>