weapp-v2/pages/rank-day/index2.vue

<template>
	<view class="index">
		<!-- <tel-verify v-if="showVerify"></tel-verify> -->
		<custom-warn v-if="showWarn"></custom-warn>
		<custom-toast ref='toast'></custom-toast>
		<view class="header-bg"></view>
		<!-- <view class="" @click="gotoyan">
			预约报名入口
		</view> -->
		<!-- <view class="title" v-if="userServerInfo.season">大卫博士学位争霸赛第{{ userServerInfo.season | numToZh }}季</view> -->
		<view class="title" v-if="userServerInfo.season">大卫博士学位争霸赛第{{ userServerInfo.season}}季</view>
		<view class="user_info_new">
			<view class="userinfo">
				<view class="top" @tap="toself">
					<open-data class="user-pic" type="userAvatarUrl"></open-data>
					<image v-if="userServerInfo.score >= 300" class="hat" src="../../static/icon/hat.png" mode="scaleToFill"></image>
					<view class="user-info">
						<view class="name-grade-level">
							<open-data type="userNickName" class="name"></open-data>
							<view class="grade">{{ userServerInfo.grade === undefined ? '未验证' : userServerInfo.grade }}</view>
							<view class="level" v-if="userServerInfo.level_name">
								<image src="../../static/icon/level.png" mode="scaleToFill"></image>
								<text>{{ userServerInfo.level_name }}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="user-status" v-if="userStatus" :class="(userStatus === '报名截止' || userStatus === '暂未开赛') ? 'end' : ''" @tap="tapUserStatus"> {{userStatus}} </view>
				<view class="score-rank">
					<view class="score">学分：{{ userServerInfo.score ? userServerInfo.score : '0' }}</view>
					<view class="rank">排名：{{ userServerInfo.rank ? userServerInfo.rank : '0' }}</view>
				</view>
			</view>
			<view class="biye_tip" v-if="userServerInfo.signuped">
				<template v-if="userServerInfo.status === 1">
					<view>
						你已连续参赛{{ userServerInfo.enrol_count }}季，你真棒！继续努力，加油！
					</view>
				</template>
				<template v-else>
					<view v-if="userServerInfo.score === userServerInfo.max_score">
						您已达到历史最高学分,请继续加油!
					</view>
					<view v-else>
						距离 {{ userServerInfo.score | willDeg(userServerInfo.max_score) }} 还差 {{ userServerInfo.score | lessScore(userServerInfo.max_score) }} 学分
					</view>
				</template>
				<view v-if="userServerInfo.score === userServerInfo.max_score">
					你已连续参赛{{ userServerInfo.enrol_count }}季，你真棒！继续努力，加油！
				</view>
				<view v-else>
					距离 {{ userServerInfo.score | willDeg(userServerInfo.max_score) }} 还差 {{ userServerInfo.score | lessScore(userServerInfo.max_score) }} 学分
				</view> 
			</view>
		</view>
		<view v-if="timer" class="index_countdown">
			<text style="font-size: 30rpx;">距{{ timerStatus ? '结束' : '开始' }}仅剩：</text>
			<text class="spec bg1">{{ countDown[0] || '00' }}</text>
			<text class="small">天</text>
			<text class="spec bg2">{{ countDown[1] || '00' }}</text>
			<text class="small">时</text>
			<text class="spec bg3">{{ countDown[2] || '00' }}</text>
			<text class="small">分</text>
			<view class="spec bg4 animate_second" v-if="countDown[3] || countDown[3] === 0">
				<swiper
					:indicator-dots="false"
					:autoplay="false"
					:interval="10000"
					:duration="300"
					:circular="true"
					:vertical="true"
					:current="countA.findIndex(i => +i === Number(countDown[3]))"
					:disable-touch="true"
					class="animate_item"
				>
					<swiper-item v-for="n of countA" :key="n">
						<view class="swiper-item">{{ n }}</view>
					</swiper-item>
				</swiper>
				<swiper
					:indicator-dots="false"
					:autoplay="true"
					:interval="1000"
					:duration="300"
					:circular="true"
					:vertical="true"
					:disable-touch="true"
					:current="countB.findIndex(i => +i === Number(countDown[4]))"
					class="animate_item"
					@change="changeCountTime"
				>
					<swiper-item v-for="n in countB" :key="n">
						<view class="swiper-item">{{ n }}</view>
					</swiper-item>
				</swiper>
			</view>
			<text class="small">秒</text>
		</view>
		<view v-if="messageList.length > 0" class="swiper_parant">
			<view class="message_icon_box">
				<image src="../../static/new/message2.jpg" mode="" class="message_icon"></image>
				<text>恭喜</text>
			</view>
			<swiper class="swiper swiper_message" :indicator-dots="false" :autoplay="true" :circular="true" @animationfinish="changeMessageSwiper" interval="1500">
				<swiper-item
					v-for="(item, i) in messageList"
					:key="i"
				>
					<view class="swiper-item uni-bg-red">{{ item.data }}</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="entrance">
			<!-- <view class="nav_container"> -->
				<view class="index-item item_bg1" @tap="toranking">
					<text class="name">销售排行</text>
					<view v-if="userServerInfo.rank" class="userranking">我的排名：{{ userServerInfo.rank ? userServerInfo.rank : '0' }}</view>
					<image src="https://api.jiuweiyun.cn/public/uploads/weapp/icon/index_bg1.png" class="coverImg cv1">
				</view>
				<view class="index-item item_bg2" @tap="toupload">
					<text class="name">数据上传</text>
					<image src="https://api.jiuweiyun.cn/public/uploads/weapp/icon/index_bg2.png" class="coverImg cv2">
				</view>
				<view class="index-item item_bg3" @tap="toChallenge()">
					<text class="name">挑战竞猜</text>
					<image src="https://api.jiuweiyun.cn/public/uploads/weapp/icon/index_bg3.png" class="coverImg cv3">
				</view>
				<view class="index-item item_bg4" @tap="toOther">
					<text class="name">其他</text>
					<image src="https://api.jiuweiyun.cn/public/uploads/weapp/icon/index_bg4.png" class="coverImg cv4">
				</view>
			<!-- </view> -->
		</view>
		
		
		<view class="rules" @tap="torules" @longpress="toLongTapIndex">查看赛季规则 <text class="cuIcon-question"></text></view>
		
		<!-- <button v-if="showGetUserInfoButton" class="getUserInfo" type="default" open-type="getUserInfo" @getuserinfo="getuserinfo"></button> -->
		<button class="getUserInfo" type="default" @click="getuserinfo">111</button>
		
		<!-- 学位弹窗 -->
		<page-toast :is-show="isXuefenToast && (userServerInfo.glory_popovers && userServerInfo.glory_popovers.type === 1)">
			<view class="toast_container xuewei_toast" @click="toToastDetail">
				<image class="bg" src="https://api.jiuweiyun.cn/public/uploads/icon/toast8.png"></image>
				<view class="text">{{ userServerInfo.score | userXueWei }}</view>
			</view>
		</page-toast>
		<!-- 学霸弹窗 -->
		<page-toast :is-show="isXuebaToast && (userServerInfo.max_popovers && userServerInfo.max_popovers.type === 10)">
			<view class="toast_container xueba_toast" @click="toToastXueBa">
				<image class="bg" src="https://api.jiuweiyun.cn/public/uploads/icon/toast7.png"></image>
				<view class="text">{{ userServerInfo.level_name }}学霸</view>
			</view>
		</page-toast>
		<!-- 挑战详情 -->
		<page-toast :is-show="isTiaoXhanToast && (userServerInfo.challenge_result && userServerInfo.challenge_result.type === 1)" :is-close="false" :before-close="resetTiaoZhanToast">
			<view class="challenge-num">
				<view class="challenage-num-top">
					<view class="challenage-num-body">
						<view class="challenge-num-item">
							<view>
								<text class="label">参加挑战:</text>
								<text class="spec">
									{{ userServerInfo.challenge_result.data.challenge_num || 0 }}
								</text>
								<text class="label">场</text>
							</view>
							<view>
								<text class="label">参加竞猜:</text>
								<text class="spec">
									{{ userServerInfo.challenge_result.data.guessing_num || 0 }}
								</text>
								<text class="label">场</text>
							</view>
						</view>
						<view class="challenge-num-item">
							<view>
								<text class="label">挑战成功:</text>
								<text class="spec">
									{{ userServerInfo.challenge_result.data.challenge_success || 0 }}
								</text>
								<text class="label">场</text>
							</view>
							<view>
								<text class="label">挑战失败:</text>
								<text class="spec">
									{{ userServerInfo.challenge_result.data.challenge_fail || 0 }}
								</text>
								<text class="label">场</text>
							</view>
						</view>
						<view class="challenge-num-item">
							<view>
								<text class="label">猜赢了:</text>
								<text class="spec">
									{{ userServerInfo.challenge_result.data.guessing_success || 0 }}
								</text>
								<text class="label">场</text>
							</view>
							<view>
								<text class="label">猜输了:</text>
								<text class="spec">
									{{ userServerInfo.challenge_result.data.guessing_fail || 0 }}
								</text>
								<text class="label">场</text>
							</view>
						</view>
					</view>
				</view>
				<view class="challenge-num-btn" @click="toTiaoZhan">查看详情</view>
			</view>
		</page-toast>
		<!-- 发起挑战 -->
		<page-toast :is-show="userServerInfo.cha_nickname" :is-close="false">
			<view class="challenge-invite">
				<view class="challenge-user">
					<view class="user-avatar"></view>
				</view>
				<view class="challenge-title">
					“{{ userServerInfo.cha_nickname | getName }}”向你发起学分挑战 详情可在“我的挑战”列表中查看
				</view>
				<view class="challenage-btn" @click="toChallenge('0')">查看详情</view>
			</view>
		</page-toast>
		<!-- 课程提醒 -->
		<page-toast :is-show="userServerInfo.link && showLink" :before-close="closeCourseLink">
			<scroll-view class="courseDialog" scroll-y="true">
				<image
					:src="userServerInfo.link"
					mode="widthFix"
					class="courseImg"
					@click="toCourseList"
				/>
			</scroll-view>
		</page-toast>
	</view>
</template>

<script>
	import telVerify from '../../components/tel-verify.vue'
	import customWarn from '../../components/custom-warn.vue'
	import { toast_sure, index_message, course_confim } from '../../api.js'
	import { setInterval, clearInterval } from 'timers'
	import { api_onLaunch } from '../../api.js'
	export default {
		onShareAppMessage () {  //分享荣誉证书
			uni.showLoading({ title: '加载中', mask: true })  //显示loading
			return {  //如果点击右上角分享按钮，则分享页面为小程序主页
				title: '大卫博士学位争霸赛',
				path: '/pages/index/index'
			}
		},
		onPullDownRefresh() {
			this.routing = false
			if ('wifi2g3g4g'.indexOf(this.networkType) !== -1) {  //有网络连接时才进行下一步
				// this.$store.commit('HIDEVERIFY')
				uni.showLoading({ title: '加载中', mask: true })  //显示loading
				this.$store.dispatch('onLaunch').then(() => {
					this.showLink = true
					this.$refs.toast.hover('刷新成功')
					uni.stopPullDownRefresh()
					this.isTiaoXhanToast = true
				}).catch(e => { //触发初始化方法
					this.$refs.toast.hover('服务器繁忙，请下拉刷新试试', 'center')
				})
			} else {
				uni.showToast({ title: '似乎已经断开网络连接', icon: 'none' })
			}
		},
		components: {
			telVerify,
			customWarn
		},
		filters: {
			getName(name) {
				if (name) {
					return name.length > 6 ? name.slice(0, 6) + '...' : name
				}
				return ''
			}
		},
		data() {
			return {
				timer: null,
				now: null,
				isXuefenToast: true,
				isXuebaToast: true,
				filterUserScore: 20,
				isTiaoXhanToast: true,
				messageList: [],
				timerStatus: null,
				countA: [5,4,3,2,1,0],
				countB: [9,8,7,6,5,4,3,2,1,0],
				showLink: true
			}
		},
		computed: {
			showVerify () {  //是否弹出手机验证框
				return this.$store.state.showVerify
			},
			showWarn () {
				return this.$store.state.showWarn
			},
			userWeixinInfo () {  //用户微信信息
				return this.$store.state.userWeixinInfo
			},
			userServerInfo () {  //用户服务器信息
				if(this.$store.state.userServerInfo.report_card && this.$store.state.userServerInfo.report_card.status === 1) {
					let _this = this
					uni.showModal({
						content: '查看成绩单',
						success: function (res) {
							let id = _this.$store.state.userServerInfo.report_card.id
							if (res.confirm) {
								_this.$ajax.get(`${toast_sure}?id=${id}`).then(([, { data: res }]) => {
									uni.navigateTo({ url: '../schoolReport/index' })
								})
							} else if (res.cancel) {
								
							}
						}
					})
				}
				return this.$store.state.userServerInfo
			},
			networkType () {  //网络类型
				return this.$store.state.networkType
			},
			showGetUserInfoButton () {  //是否显示获取用户信息的透明按钮
				return this.$store.state.showGetUserInfoButton
			},
			userStatus () {  //根据赛季阶段和用户类型，显示不同可操作项
				if (this.$verified()) {  //如果用户已经登录，进行下一步判断
					if (this.userServerInfo.status) {  //如果赛季已经开赛
						if (this.userServerInfo.status === 1) {  //如果赛季正处于报名阶段
							if (this.userServerInfo.signuped) {  //如果用户已报名
								return '已报名'
							} else {  //如果用户未报名,那么可能是 1 用户真没报名  2 批发商 3 客服
								if (this.userServerInfo.type === 1) {
									return '报名参赛'
								} else if (this.userServerInfo.type === 2) {
									return '报名参赛'
								} else if (this.userServerInfo.type === 3) {
									return ''
								}
							}
						} else if (this.userServerInfo.status === 2 || this.userServerInfo.status === 3 || this.userServerInfo.status === 5) {  //如果赛季正处于比赛或兑奖阶段
							if (this.userServerInfo.signuped) {  //如果用户已报名
								return '学分账单'
							} else {  //如果用户未报名，那么可能是 1 用户真没报名  2 批发商 3 客服
								if (this.userServerInfo.type === 1) {
									return '报名截止'
								} else if (this.userServerInfo.type === 2) {
									return '学分账单'
								} else if (this.userServerInfo.type === 3) {
									return ''
								}
							}
						} else if (this.userServerInfo.status === 4) { // 如果赛季正处于报名结束的空档期
							if (this.userServerInfo.signuped) {  //如果用户已报名
								return '已报名'
							} else {  //如果用户未报名，那么可能是 1 用户真没报名  2 批发商 3 客服
								if (this.userServerInfo.type === 1) {
									return '报名截止'
								} else if (this.userServerInfo.type === 2) {
									return '学分账单'
								} else if (this.userServerInfo.type === 3) {
									return ''
								}
							}
						}
					} else {  //如果赛季暂未开赛
						return '暂未开赛'
					}
				} else {  //如果用户未登录
					return '绑定账号'
				}
			},
			countDown() {
				let time = this.timerStatus ? this.userServerInfo.end_time : this.userServerInfo.start_time
				const sec = Math.floor((time - this.now) / 1000)
				let day = Math.floor(sec / 86400)
				let hour = Math.floor((sec % 86400) / 3600)
				let minite = Math.floor((sec - 86400 * day - hour * 3600) / 60)
				let second = Math.floor(sec - 86400 * day - hour * 3600 - minite * 60)
				day = day >= 10 ? day : `0${day}`
				hour = hour >= 10 ? hour : `0${hour}`
				minite = minite >= 10 ? minite : `0${minite}`
				second = String(second)
				let arr = [day, hour, minite, second >= 10 ? second[0] : 0, second >= 10 ? second[1] : second]
				return arr
			}
		},
		created () {  //加载完成后开启监听全局 MESSAGE 事件
			uni.$on('MESSAGE', (m, d, p) => {  //m 要提示的文字信息  d 文字信息出现的时常  p 文字信息出现的位置
				this.$refs.toast.hover(m, d, p)
			})
			uni.$on('HIDEMESSAGE', () => {  // 隐藏 文字提示
				this.$refs.toast.hide()
			})
			if ('wifi2g3g4g'.indexOf(this.networkType) !== -1) {  //有网络连接时才进行下一步
				let _this = this
				this.$store.dispatch('onLaunch').then(() => {
					// if (this.showVerify === true) {
					// 	uni.navigateTo({
					// 		url:'../boundPhone/boundPhone'
					// 	})
					// }
					uni.stopPullDownRefresh()
					this.init()
				}).catch(e => { //触发初始化方法
					this.$refs.toast.hover('网络可能出了点问题，请下拉刷新试试')
				})
			} else {
				uni.showToast({ title: '似乎已经断开网络连接', icon: 'none' })
			}
		},
		onShow() {  //每次展示首页时都初始化一次，达到实时更新数据的功能
			this.routing = false
			this.login()
			if ('wifi2g3g4g'.indexOf(this.networkType) !== -1) {  //有网络连接时才进行下一步
				if (uni.fromUpload) {
					uni.fromUpload = false
					if (uni.toRank) {
						uni.toRank = false
						uni.navigateTo({ url: '../ranking/ranking' })
					}
					// this.$store.dispatch('onLaunch').then(() => {
					// 	uni.stopPullDownRefresh()
					// 	this.init()
					// }).catch(e => { //触发初始化方法
					// 	this.$refs.toast.hover('网络可能出了点问题，请下拉刷新试试')
					// })
				}
			} else {
				uni.showToast({ title: '似乎已经断开网络连接', icon: 'none' })
			}
		},
		methods: {
			login() {
				const state = this.$store.state
				uni.showLoading({ title: '加载中', mask: true })  //显示loading
				this.$ajax.get(`${api_onLaunch}?id=${state.id}&sex=${state.userWeixinInfo.gender}&latitude=${state.latitude}&longitude=${state.longitude}&code=${state.CODE}&avatar=${state.userWeixinInfo.avatarUrl}&openid=${state.openid ? state.openid : '123'}&nickname=${state.userWeixinInfo.nickName}`).then(([ , { data: res }]) => {
					if (res.code === 200) { //当前微信用户已经绑定手机号了
						state.N401 = 0
						this.$store.commit('GETUSERSERVERINFO', res.data)
						uni.hideLoading()  //异步操作结束，停止 loading
						this.$ajax.get('/user/account_status').then(([ , { data: res }]) => {
							if(res.code === 200){
								this.init()
								if(res.data.status === 1) {
									uni.reLaunch({
										url:"../loginOutTip/loginOutTip"
									})
									return false
								}
							}
							resolve()
						}).catch(() => {
							resolve()
						})	
					} else if (res.code === 300) { //当前微信用户没有绑定手机号，弹出验证码框 // 401 表示 code 过期/失效 openid 获取不到等
						uni.hideLoading()  //异步操作结束，停止 loadin
						this.$store.commitcommit('SHOWVERIFY')
						uni.navigateTo({ url: '../boundPhone/boundPhone' })
						resolve()
					} else if (res.code === 401) {
						uni.hideLoading() // 异步操作结束，停止 loading
						reject(500)
					} else { //其他边界情况，提示用户下拉刷新
						uni.hideLoading() // 异步操作结束，停止 loading
						reject(500)
					}
				})
			},
			gotoyan() {
				uni.navigateTo({ url: '../makeApply/makeApply' })
			},
			closeCourseLink() {
				this.$ajax.get(`${course_confim}`).then(([, { data: res }]) => {
					this.showLink = false
				})
			},
			toCourseList() {
				this.$ajax.get(`${course_confim}`).then(([, { data: res }]) => {
					if(res.code === 200) {
						let { end_time, start_time } = this.userServerInfo
						let week = Math.ceil((end_time - start_time) / (7 * 24 * 60 * 60 * 1000))
						uni.navigateTo({
							url: '../course/list?week='+week
						})
					} else {
						uni.showModal({
							content: '课程确认失败',
							showCancel: false
						})
					}
				})
			},
			changeCountTime() {
				this.now = Date.now()
			},
			init() {
				let _this = this
				_this.now = Date.now()
				if(_this.userServerInfo.start_time && _this.userServerInfo.end_time) {
					let { start_time, end_time } = _this.userServerInfo
					if(_this.now > start_time - 5 * 24 * 3600 * 1000 && _this.now < start_time) {
						_this.timerStatus = false
						_this.timer = true
						// _this.timer = setInterval(() => {
						// 	_this.now = Date.now()
						// }, 1000 * 60)
					} else if (_this.now > start_time && _this.now < end_time) {
						_this.timerStatus = true
						_this.timer = true
						// _this.timer = setInterval(() => {
						// 	_this.now = Date.now()
						// }, 1000 * 1)
						// 活动期间 获取滚动卖货消息
						_this.index_message()
					} else {
						if (this.timer) {
							// clearInterval(_this.timer)
							_this.timer = null;
						}
					}
				} else {
					if (this.timer) {
						// clearInterval(_this.timer)
						_this.timer = null;
					}
				}
				uni.stopPullDownRefresh()
			},
			changeMessageSwiper({ detail }) {
				let current = detail.current;
				if(current >= this.messageList.length) {
					this.index_message();
				}
			},
			// 获取滚动消息
			index_message() {
				this.$ajax.get(`${index_message}`).then(([, { data: res }]) => {
					if(res.code === 200) {
						this.messageList = res.data.list
					}
				})
			},
			resetTiaoZhanToast() {
				this.isTiaoXhanToast = false
			},
			toTiaoZhan() {
				let toast_id = this.userServerInfo.challenge_result.id
				let _this = this
				this.$ajax.get(`${toast_sure}?id=${toast_id}`).then(([, { data: res }]) => {
					_this.isTiaoXhanToast = false
					_this.toChallenge()
				})
			},
			// 其他
			toOther() {
				uni.navigateTo({
					url:"../other/other"
				})
			},
			// 学霸弹窗
			toToastXueBa() {
				let toast_id = this.userServerInfo.max_popovers.id
				let _this = this
				this.$ajax.get(`${toast_sure}?id=${toast_id}`).then(([, { data: res }]) => {
					_this.isXuebaToast = false
					_this.toChallenge()
				})
			},
			toToastDetail() {
				let toast_id = this.userServerInfo.glory_popovers.id
				let _this = this
				this.$ajax.get(`${toast_sure}?id=${toast_id}`).then(([, { data: res }]) => {
					_this.isXuefenToast = false
					_this.tohonour()
				})
			},
			getuserinfo() {  //获取用户信息
			// console.log(111)
			// 	uni.getUserProfile({
			//         desc:'Wexin',     // 这个参数是必须的
			//         success:res=>{
			// 				this.$store.commit('HIDEGETUSERINFOBUTTON')  //隐藏透明按钮
			// 				let _this = this
			// 				this.$store.dispatch('onLaunch').then(()=> {
			// 					_this.init()
			// 				})  //触发初始化方法
			//             // console.log("用户信息",res.rawData)
			//         }
			//     })
				// uni.getUserInfo().then(([getUserWeixinInfoErr, userWeixinInfo]) => {  //获取完成后
				// 	if (getUserWeixinInfoErr) {
				// 		return
				// 	}
				// 	this.$store.commit('HIDEGETUSERINFOBUTTON')  //隐藏透明按钮
				// 	let _this = this
				// 	this.$store.dispatch('onLaunch').then(()=> {
				// 		_this.init()
				// 	})  //触发初始化方法
				// })
			},
			toself () {  //点击用户信息
				if (this.$verified()) {  //用户是否已登录
					if (this.userServerInfo.type === 1 || this.userServerInfo.type === 2) {  //只有普通客户和批发商个人主页
						if (this.routing) { return }
						this.routing = true
						uni.navigateTo({ url: `../self/self?from=index&id=${this.userServerInfo.id}` }) //已登录跳转到用户中心
					}
				} else {  //未登录弹出登录框
					// this.$store.commit('SHOWVERIFY')
					uni.navigateTo({ url: '../boundPhone/boundPhone' })
				}
			},
			tapUserStatus () {  //点击用户状态
				if (this.userStatus === '绑定账号') {
					// this.$store.commit('SHOWVERIFY')
					uni.navigateTo({ url: '../boundPhone/boundPhone' })
				} else if (this.userStatus === '报名参赛') {
					if (this.routing) { return }
					this.routing = true
					uni.navigateTo({ url: '../signup/signup' })
				} else if (this.userStatus === '学分账单') {
					if (this.routing) { return }
					this.routing = true
					uni.navigateTo({ url: '../score/score' })
				} else if (this.userStatus === '报名截止') { 
					this.$refs.toast.hover('报名时间已过，非常感谢您的关注。')
				} else if (this.userStatus === '暂未开赛') {
					this.$refs.toast.hover('暂未开赛，非常感谢您的关注。')
				} else if (this.userStatus === '已报名') {
					uni.navigateTo({
						url: "../certificate/notice"
					})
				}
			},
			toranking () {  //点击排行榜
			// uni.navigateTo({ url: '../ranking/ranking' })
				if (this.$verified()) {  //用户是否已登录
					if (this.userServerInfo.type === 1) {  //判断用户类型，普通用户需要报名后才可以查看排行榜
						if (this.userServerInfo.signuped) {  //如果用户已报名，就跳转
							if (this.routing) { return }
							this.routing = true
							uni.navigateTo({ url: '../ranking/ranking' })
							
						} else {  ////如果用户已报名，就提示用户没有报名
							uni.showModal({
								content:"您还没有报名参赛",
								showCancel:false
							})
						}	
					} else {  //批发商和客服可以直接查看排行榜页
						if (this.routing) { return }
						this.routing = true
						uni.navigateTo({ url: '../ranking/ranking' })
					}
				} else {  //未登录弹出登录框
					// this.$store.commit('SHOWVERIFY')
					uni.navigateTo({ url: '../boundPhone/boundPhone' })
				}
			},
			toupload () {  //点击上传图片
			
			// uni.navigateTo({ url: '../upload/upload' })
			// return false
			
				if (this.$verified()) {  //用户是否已登录
					if (this.userServerInfo.signuped) {
						if (this.userServerInfo.status === 1 || this.userServerInfo.status === 4) {
							this.$refs.toast.hover('比赛还没有开始')
						} else if (this.userServerInfo.status === 2) {
							if (this.routing) { return }
							this.routing = true
							uni.navigateTo({ url: '../upload/upload' })
							uni.fromUpload = true
						} else if (this.userServerInfo.status === 3 || this.userServerInfo.status === 5) {
							this.$refs.toast.hover('比赛已经结束了')
						}
					} else {
						this.$refs.toast.hover('您还没有报名参赛')
					}
				} else {  //未登录弹出登录框
					// this.$store.commit('SHOWVERIFY')
					uni.navigateTo({ url: '../boundPhone/boundPhone' })
				}
			},
			toChallenge(active) { // 点击学分挑战
			// uni.navigateTo({ url: '../challengeList/challengeList'+(active ? `?active=${active}` : '') })
			// return false
				if (this.$verified()) {  //用户是否已登录
					if (this.userServerInfo.signuped) { // 用户是否已经报名
						if (this.userServerInfo.level_name === '批发商' || this.userServerInfo.level_name === '经销商') { // 只有批发商能够参加学分竞赛
							if (this.routing) { return }
							this.routing = true
							this.closeChallenge()
							uni.navigateTo({ url: '../challengeList/challengeList'+(active ? `?active=${active}` : '') })
						} else {  //批发商和客服不可参赛，所以提示无参赛记录
							this.$refs.toast.hover('只有批发商可以参与挑战')
						}
					} else {
						this.$refs.toast.hover('您还没有报名参赛')
					}
				} else {  //未登录弹出登录框
					// this.$store.commit('SHOWVERIFY')
					uni.navigateTo({ url: '../boundPhone/boundPhone' })
				}
			},
			torules () {  //点击赛季规则
				if (this.routing) { return }
				this.routing = true
				uni.navigateTo({ url: '../rules/rules' })
			},
			// 长按赛季规则跳转
			toLongTapIndex() {
				uni.navigateTo({ url: '../longTapIndex/longTapIndex' })
			},
			closeChallenge() {
				this.$store.commit('READCHALLENGE')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.challenge-num {
		display: flex;
		flex-direction: column;
		align-items: center;
		.challenage-num-top{
			width: 626rpx;
			height: 612rpx;
			background: url(http://picture.liuliwa.top/new_challenge_toast/7.png) center no-repeat;
			background-size: 100%;
			margin: 0 auto 94rpx auto;
			position: relative;
			.challenage-num-body {
				width: 570rpx;
				height: 385rpx;
				position: absolute;
				bottom: 28rpx;
				left: 28rpx;
				border-radius: 24rpx;
				padding: 84rpx 30rpx 44rpx 30rpx;
				display: flex;
				justify-content: space-between;
				flex-direction: column;
				.challenge-num-item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					.label {
						color: #5D330D;
						font-size: 32rpx;
						margin-right: 10rpx;
					}
					.spec {
						color: #DD372D;
						font-size: 48rpx;
					}
				}
			}
		}
		.challenge-num-btn {
			width: 502rpx;
			height: 96rpx;
			border-radius: 96rpx;
			background: linear-gradient(180deg, #FEEB71 0%, #F89018 100%);
			color: #984100;
			font-size: 32rpx;
			font-weight: bold;
			line-height: 96rpx;
			text-align: center;
		}
	}
	.challenge-invite {
		display: flex;
		flex-direction: column;
		align-items: center;
		.challenge-user {
			width: 426rpx;
			height: 334rpx;
			margin: 0 auto 48rpx auto;
			background: url(http://picture.liuliwa.top/new_challenge_toast/5.png) center no-repeat;
			background-size: 100%;
			position: relative;
			.user-avatar {
				width: 168rpx;
				height: 168rpx;
				border-radius: 50%;
				position: absolute;
				bottom: 8rpx;
				left: 50%;
				transform: translateX(-50%);
				background-position: center;
				background-repeat: no-repeat;
				background-size: 100%;
				background-color: #007AFF;
			}
		}
		.challenge-title {
			width: 456rpx;
			color: #FFF1AD;
			font-size: 32rpx;
			line-height: 50rpx;
			margin-bottom: 86rpx;
			font-weight: bold;
		}
		.challenage-btn{
			width: 502rpx;
			height: 96rpx;
			border-radius: 96rpx;
			background: linear-gradient(180deg, #FEEB71 0%, #F89018 100%);
			color: #984100;
			font-size: 32rpx;
			font-weight: bold;
			line-height: 96rpx;
			text-align: center;
		}
	}
	.index {
		width: 100%;
		height: 100%;
		position: relative;
		box-sizing: border-box;
		padding: 161rpx 30rpx 0;
		display: flex;
		flex-direction: column;
		.index_countdown {
			width: 100%;
			height: 140rpx;
			background-image: linear-gradient(#4CBA59, #6BE57D);
			color: #FFFFFF;
			border-radius: 6rpx;
			margin-top: 10rpx;
			line-height: 60rpx;
			text-align: center;
			letter-spacing: 4rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 36rpx;
			.bg1 {
				background-color: #FD715D;
			}
			.bg2 {
				background-color: #3397DB;
			}
			.bg3{
				background-color: #F39B11;
			}
			.bg4 {
				// background-color: #B933FF;
			}
			.animate_second {
				display: flex !important;
				justify-content: space-between;
				align-items: center;
				.animate_item {
					flex: 1;
					height: 70rpx;
					&:nth-of-type(1) {
						background-color: #e3abff;
					}
					&:nth-last-of-type(1) {
						background-color: #B933FF;
					}
					text-align: center;
				}
			}
			.spec {
				display: block;
				text-align: center;
				line-height: 70rpx;
				color: #FFFFFF;
				width: 70rpx;
				height: 70rpx;
				border-radius: 10rpx;
				overflow: hidden;
			}
			.small{
				font-size: 24rpx;
				margin: 0 8rpx;
				margin-top: 40rpx;
			}
		}
		.xuefen_toast {
			width: 600rpx;
			height: 760rpx;
			
			.text {
				position: absolute;
				width: 430rpx;
				bottom: 217rpx;
				left: 50%;
				margin-left: -215rpx;
				display: flex;
				justify-content: flex-start;
				flex-wrap: wrap;
				font-size: 28rpx;
				color: #333333;
				
				view {
					width: calc(50% - 10rpx);
					margin-bottom: 20rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					&:nth-last-child(1), &:nth-last-child(2) {
						margin-bottom: 0;
					}
					&:nth-child(2n) {
						text-align: right;
						margin-left: 20rpx;
					}
				}
			}
		}	
		
		.yingzhan_toast {
			width: 574rpx;
			height: 596rpx;
			.text {
				left: 0;
				width: 100%;
				color: #F76454;
				font-size: 36rpx;
				position: absolute;
				text-align: center;
				top: 120rpx;
			}
		}
		
		.xiazhu_toast {
			width: 563rpx;
			height: 653rpx;
			
			.text {
				color: #712722;
				font-size: 28rpx;
				width: 402rpx;
				position: absolute;
				bottom: 188rpx;
				left: 50%;
				margin-left: -201rpx;
				
				text{
					display: block;
					margin-bottom: 20rpx;
					text-align: center;
					&:nth-last-child(1) {
						margin-bottom: 0;
					}
				}
			}
		}
		
		.tiaozhan_toast {
			width: 520rpx;
			height: 755rpx;
			.text {
				color: #712722;
				font-size: 28rpx;
				width: 390rpx;
				position: absolute;
				bottom: 160rpx;
				left: 50%;
				margin-left: -195rpx;
				line-height: 48rpx;
				text-align: center;
			}
		}
		
		.xuewei_toast {
			width: 712rpx;
			height: 750rpx;
			
			.text {
				font-size: 62rpx;
				color: #FFFFFF;
				position: absolute;
				width: 488rpx;
				text-align: center;
				height: 104rpx;
				line-height: 104rpx;
				left: 50%;
				margin-left: -244rpx;
				bottom: 138rpx;
			}
		}	
		
		.xueba_toast {
			width: 662rpx;
			height: 685rpx;
			
			.text {
				width: 416rpx;
				text-align: center;
				height: 112rpx;
				line-height: 112rpx;
				color: #FFFFFF;
				font-size: 58rpx;
				position: absolute;
				left: 50%;
				margin-left: -208rpx;
				bottom: 226rpx;
			}
		}
		
		.getUserInfo {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 9999;
			background: rgba(1, 1, 1, 0);
		}
		.header-bg {
			position: absolute;
			z-index: -1;
			top: 0;
			left: 0;
			width: 100%;
			height: 286rpx;
			background: linear-gradient(-2deg, rgba(255,68,54,1) 0%, rgba(254,132,72,1) 100%);
			border-bottom-right-radius: 350rpx 30rpx;
			border-bottom-left-radius: 350rpx 30rpx;
		}
		.title {
			position: absolute;
			top: 70rpx;
			left: 30rpx;
			@include text(34rpx);
			color: #FFFFFF;
		}
		.user_info_new {
			background: linear-gradient(#FFCF82, #FF9C00);
			border-radius: 10rpx;
			.biye_tip {
				height: 64rpx;
				background: rgba(0,0,0,.4);
				color: #FFFFFF;
				font-size: 28rpx;
				padding: 0 22rpx;
				box-sizing: border-box;
				width: 100%;
				line-height: 64rpx;
				border-bottom-left-radius: 10rpx;
				border-bottom-right-radius: 10rpx;
			}
		}
		.userinfo {
			position: relative;
			width: 100%;
			height: 225rpx;
			box-shadow: 0rpx 1rpx 3rpx 0rpx rgba(0, 0, 0, 0.2);
			border-radius:10px;
			box-sizing: border-box;
			padding: 22rpx;
			.top {
				height: 98rpx;
				display: flex;
				align-items: center;
				position: relative;
				.user-pic {
					height: 100%;
					width: 98rpx;
					border-radius: 50%;
					overflow: hidden;
				}
				.hat {
					position: absolute;
					top: -40rpx;
					left: 0px;
					width: 80rpx;
					height: 69.873rpx;
				}
				.user-info {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					height: 100%;
					margin-left: 16rpx;
					overflow: hidden;
					.progress {
						font-size: 26rpx;
						color: #FFFFFF;
					}
					.name-grade-level {
						height: 100%;
						width: 100%;
						display: flex;
						align-items: center;
						.name {
							font-size: 32rpx;
							color: #FFFFFF;
							max-width: 38%;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
						.grade {
							font-size: 26rpx;
							color: rgba(255,255,255,1);
							margin-left: 16rpx;
							vertical-align: baseline;
						}
						.level {
							margin-left: 18rpx;
							height: 30rpx;
							border-radius: 15rpx;
							font-size: 26rpx;
							background: #FFFFFF;
							color: rgba(250,99,66,1);
							text {
								float: right;
								line-height: 35rpx;
								margin: 0 12rpx;
							}
							image {
								width: 30rpx;
								height: 30rpx;
								float: left;
							}
						}
					}
				}
			}
			.user-status {
				position: absolute;
				width: 170rpx;
				height: 60rpx;
				top: 111rpx;
				right: 0;
				line-height: 62rpx;
				background: #FFFFFF;
				text-align: center;
				border-radius: 30rpx 0 0 30rpx;
				font-size: 32rpx;
				color: rgba(250,99,66,1);
				&.end {
					background: #999999;
					color: #FFFFFF;
				}
			}
			.countdown {
				position: absolute;
				right: 12rpx;
				top: 171rpx;
				display: flex;
				color: #FFFFFF;
			}
			.score, .rank {
				position: absolute;
				left: 32rpx;
				bottom: 35rpx;
				font-size: 32rpx;
				color: rgba(255,255,255,1);
				&.rank {
					left: 294rpx;
				} 
			}
		}
		.entrance {
			flex: 1;
			z-index: 1;
			margin: 10rpx 0;
			position: relative;
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;
			.nav_container {
				display: flex;
				justify-content: flex-start;
				flex-wrap: wrap;
			}
			.item_bg1 {
				// background-image: url(../../static/new/index_bg1.png);
				background-image: linear-gradient(#79a9fd, #929ef2);
			}
			.item_bg2 {
				// background-image: url(../../static/new/index_bg2.png);
				background-image: linear-gradient(#ff634c, #ff9587);
			}
			.item_bg3 {
				// background-image: url(../../static/new/index_bg3.png);
				background-image: linear-gradient(#fdad29, #ffcf4b);
			}
			.item_bg4 {
				// background-image: url(../../static/new/index_bg4.png);
				background-image: linear-gradient(#d486f9, #b063f8);
			}
			.index-item {
				width: calc(50% - 5rpx);
				position: relative;
				min-height: 285rpx;
				overflow: hidden;
				border-radius:10px;
				box-shadow:0rpx 1rpx 3rpx 0rpx rgba(0, 0, 0, 0.2);
				font-size: 30rpx;
				color: #FFFFFF;
				background-size: 100% 100%;
				background-repeat: no-repeat;
				margin-right: 5rpx;
				margin-bottom: 12rpx;
				&:nth-of-type(2n) {
					margin-right: 0;
					margin-left: 5rpx;
				}
				.name {
					z-index: 1;
					top: 38rpx;
					left: 30rpx;
					color: #FFFFFF;
					font-size: 40rpx;
					position: absolute;
					font-weight: 500;
				}
				view {
					position: absolute;
					left: 30rpx;
					top: 87rpx;
					font-size: 24rpx;
					color: #FFFFFF;
				}
				.coverImg {
					position: absolute;
				}
				.cv1 {
					width: 238rpx;
					height: 260rpx;
					right: 30rpx;
					bottom: 0;
				}
				.cv2 {
					width: 200rpx;
					height: 163rpx;
					right: 44rpx;
					bottom: 31rpx;
				}
				.cv3 {
					width: 275rpx;
					height: 275rpx;
					right: 10rpx;
					bottom: 33rpx;
				}
				.cv4 {
					width: 187rpx;
					height: 187rpx;
					right: 53rpx;
					bottom: 31rpx;
				}
			}
		}
		.rules {
			font-size: 24rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			font-weight: bold;
			color:rgba(243,67,54,1);
			text {
				margin-left: 9rpx;
			}
		}
		.swiper_parant {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #FF9C00;
			border-radius: 10rpx;
			height: 70rpx;
			margin: 5px 0;
			padding: 0 20rpx;
			box-sizing: border-box;
			// &::before{
			// 	content: "";
			// 	display: block;
			// 	width: 30rpx;
			// 	height: 30rpx;
			// 	background-image: url(../../static/new/message.png);
			// 	background-repeat: no-repeat;
			// 	background-size: 100% 100%;
			// 	margin-right: 10rpx;
			// }
			.message_icon_box {
				color: #FA6342;
				font-size: 32rpx;
				width: 135rpx;
				height: 54rpx;
				padding: 14rpx 12rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-right: 20rpx;
				background-color: #FFFFFF;
				border-radius: 8rpx;
				.message_icon {
					width: 32rpx;
					height: 26rpx;
					margin-right: 10rpx;
				}
			}
		}
		.swiper_message {
			flex: 1;
			height: 60rpx;
			box-sizing: border-box;
			line-height: 60rpx;
			color: #FFFFFF;
			font-size: 28rpx;
		}
		.hadChallenge {
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.3);
			@include flex(column);
			z-index: 2;
			.challenage {
				width: 574rpx;
				height: 596rpx;
				position: relative;
				image {
					width: 100%;
					height: 100%;
				}
				.challengeName {
					left: 0;
					width: 100%;
					top: 128rpx;
					color: #F76454;
					font-size: 36rpx;
					position: absolute;
					text-align: center;
				}
			}
			.closeChallenge {
				width: 62rpx;
				height: 62rpx;
				@include flex();
				font-size: 56rpx;
				margin-top: 30rpx;
				border-radius: 50%;
				background: #FFFFFF;
			}
		}
	}
	.courseDialog {
		width: 80%;
		margin: 0 auto;
		height: 700rpx;
		.courseImg {
			display: block;
			width: 100%;
		}
	}
</style>