mobile_h5/card/pages/bm/style4/rankOverview.vue

<!-- 
[报名] 样式3 - 排名总览
http://localhost:5173/card/#/pages/bm/style4/rankOverview
https://oss-mbh5.colormaprun.com/card/#/pages/bm/style4/rankOverview
 -->
<template>
	<view class="body">
		<view v-if="pageReady" class="content uni-column">
			<view class="uni-column" :class="cssTop">
				<my-topbar :mcName="mcName" :class="cssTopbarColor"
					@btnBackClick="btnBack" @btnInfoClick="btnInfo"></my-topbar>
				
				<view class="topcontent uni-column uni-jcsa">
					<view class="logo"></view>
					<text v-if="configParam.subTitle.length > 0" class="top-acttime">{{configParam.subTitle}}</text>
					<text v-else class="top-acttime">{{fmtMcTime2(beginSecond, endSecond)}}</text>
				</view>
			</view>

			<view v-if="configParam.midType == 0" class="midType0 uni-column">
				<view class="mid-0 uni-row uni-jcc">
					<view class="mid-0-select">
						<e-select v-model="ocaId" :options="mapList" :search="false" :inputClick="true"
							maxHeight="300px" :clearable="false" @change="eSelectChange"></e-select>
					</view>
					<text v-if="popupHelpList.length > 0" class="mid-0-help" @click="btnHelp">帮助</text>
				</view>
				<view class="midType0-mid-1 uni-row uni-jcsa">
					<view class="uni-row">
						<image v-if="popupWarnList.length > 0" class="mid-1-yellowCard" mode="aspectFit" 
						 @click="btnWarn" src="/static/common/card_yellow.gif"></image>
						<text class="mid-1-text">{{nickName}}</text>
					</view>
					<text class="mid-1-text">{{coiName}}</text>
					<text class="mid-1-text" style="color: #aaaaaa;" v-if="mcState==1 && allowMcSignUp"
						@click="btnReGroup">修改</text>
				</view>
				<view class="mid-2 uni-row uni-jcsa">
					<view class="uni-column">
						<text class="mid-2-value">{{regionTotalNum}}</text>
						<text class="mid-2-text">总场次</text>
					</view>

					<view class="mid-line"></view>
					<view class="uni-column">
						<text class="mid-2-value">{{regionTotalCp}}</text>
						<text class="mid-2-text">总打点数</text>
					</view>

					<view class="mid-line"></view>
					<view class="uni-column">
						<text class="mid-2-value">{{regionTotalCpRankNum}}</text>
						<text class="mid-2-text">个人排名</text>
					</view>

				</view>
			</view>
			
			<view v-if="configParam.midType == 1" class="midType1 uni-column">
				<view class="mid-0 uni-row uni-jcc">
					<view class="mid-0-select">
						<e-select v-model="ocaId" :options="mapList" :search="false" :inputClick="true"
							maxHeight="300px" :clearable="false" @change="eSelectChange"></e-select>
					</view>
					<view class="mid-0-right uni-row uni-jcsa">
						<text class="" style="" v-if="mcState==1 && allowMcSignUp"
							@click="btnReGroup">修改</text>
						<text v-if="popupHelpList.length > 0" class="" @click="btnHelp">帮助</text>
					</view>
				</view>
				<view class="midType1-mid-1 uni-row uni-jcsb">
					<view class="uni-row">
						<image v-if="popupWarnList.length > 0" class="mid-1-yellowCard" mode="aspectFit" 
						 @click="btnWarn" src="/static/common/card_yellow.gif"></image>
						<text class="mid-1-name">{{nickName}}</text>
					</view>
					<text class="mid-1-name">{{coiName}}</text>
					<text class="uni-nowrap">总场次：{{regionTotalNum}}</text>
				</view>
				<view class="mid-2 uni-row uni-jcsa">
					<view class="uni-column">
						<text class="mid-2-value" style="color: #ff0045;">{{regionTotalSysPoint}}</text>
						<text class="mid-2-text">百味豆(个)</text>
					</view>
			
					<view class="mid-line"></view>
			
					<view class="uni-column">
						<text class="mid-2-value">{{fmtDistanct(regionTotalDictance)}}</text>
						<text class="mid-2-text">总里程km</text>
					</view>
			
					<view class="mid-line"></view>
					<view class="uni-column">
						<text class="mid-2-value">{{regionTotalCp}}</text>
						<text class="mid-2-text">打点数(个)</text>
					</view>
			
					<view class="mid-line"></view>
			
					<view class="uni-column">
						<text class="mid-2-value">{{fmtPace(regionFastPace)}}</text>
						<text class="mid-2-text">最快配速</text>
					</view>
				</view>
			</view>

			<view class="main uni-column">
				<text class="main-title">选择比赛路线</text>
				<my-pathList :style="pathListStyle.style" :pathList="pathList"
					:selectedPath="ocaId" :mcState="mcState" :showLine="pathListStyle.showLine"
					@onPathClick="onPathClick"></my-pathList>
			</view>
			
			<view class="bottom uni-column">
				<button class="btnStartGame" @click="btnStartGame">开始比赛</button>
			</view>
			
			<my-popup ref="mypopup" :config="popupRuleConfig" :dataList="popupDataList" :acttime="acttime"></my-popup>
			<my-popup ref="mypopupHelp" :config="popupHelpConfig" :dataList="popupHelpList"></my-popup>
			<my-popup ref="mypopupWarn" :config="popupWarnConfig" :dataList="popupWarnList"></my-popup>
			<!-- <my-popup-map ref="mypopupmap" :point="navPoint"></my-popup-map> -->
		</view>
	</view>
</template>

<script>
	import tools from '/common/tools';
	import {
		defaultPopUpDataList,
		defaultPopUpDataList2
	} from '/common/define';
	import {
		token,
		apiMapListQuery,
		apiMatchRsDetailQuery,
		apiCardConfigQuery,
		apiIsAllowMcSignUp,
		apiWarnMessageQuery,
		checkResCode
	} from '/common/api';

	export default {
		data() {
			return {
				pageReady: false,
				// audioSrc: "/static/audio/2.mp3",
				// audioSrc: "https://oss-mbh5.colormaprun.com/card/static/audio/2.mp3",
				// audioSrc: "http://t-oss-mbh5.colormaprun.com/card/static/audio/2.mp3",
				pageName: "rankOverview",
				firstEnterKey: 'firstEnter-bm-style4',
				rankKey: "rank-bm-style4",
				mapKey: "rank-bm-style4-map",
				queryObj: {},
				queryString: "",
				token: "",

				ecId: 0, // 卡片id
				mcId: 0, // 赛事id
				mcType: 0, // 赛事类型 1 普通活动 2 线下赛 3 线上赛
				mcName: "", // 赛事名称
				coiName: "", // 已报名单位名称
				acttime: "", // 活动时间
				beginSecond: null, // 活动或赛事开始时间戳，单位秒
				endSecond: null, // 活动或赛事结束时间戳，单位秒
				ocaId: 0, // 关联id，带入到App活动详情页面
				nickName: "", // 昵称

				totalNum: null, // 总场次
				totalDistanct: null, // 总距离,单位米
				totalDistanctRankNum: null, // 总距离排名
				totalCp: null, // 总打点数
				totalCpRankNum: null, // 总打点数排名
				totalSysPoint: null, // 总百味豆
				totalSysPointRankNum: null, // 总百味豆排名
				fastPace: null, // 个人最快配速
				fastPaceRankNum: null, // 个人最快配速排名
				regionTotalNum: null, // 地图内总场次
				regionTotalCp: null, // 地图内打点数
				regionTotalCpRankNum: null, // 地图内个人打点排名
				regionTotalSysPoint: null, // 地图内积分(百味豆)
				regionTotalDictance: null, // 地图内里程(单位米)
				regionFastPace: null, // 地图内最快配速
				ocaRs: [], // 卡片对应活动集合

				mapList: [], // 地图列表

				interval: null,
				mcState: 0, // 赛事/活动状态 0: 未开始  1: 进行中  2: 已结束
				allowMcSignUp: false, // 是否允许重新分组
				cssTop: "",
				cssTopbarColor: "",
				pathList: {},
				pathListStyle: {},
				popupRuleConfig: {}, // 规则弹窗配置
				popupHelpConfig: {}, // 帮助弹窗配置
				// popupWarnConfig: {}, // 警告弹窗配置
				popupWarnConfig: {
					"height": "550px"
				},
				popupDataList: [],
				popupHelpList: [],
				popupWarnList: [],
				navPoint: {},
				configParam: {
					subTitle: "",
					midType: 0
				},
			}
		},
		computed: {
			pathListLen() {
				return Object.keys(this.pathList).length;
			}
		},
		onLoad(query) { // 类型非必填，可自动推导
			// uni.showLoading({
			// 	title: '加载中'
			// });
			
			// console.log("query:", query);
			this.queryObj = query;
			this.queryString = tools.objectToQueryString(this.queryObj);
			// console.log(queryString);
			this.token = query["token"] ?? token;
			this.ecId = query["id"] ?? 0;

			this.firstEnterKey += "-" + this.ecId;
			console.log("firstEnterKey:", this.firstEnterKey);

			this.rankKey += "-" + this.ecId;
			console.log("rankKey:", this.rankKey);

			this.mapKey += "-" + this.ecId;
			console.log("mapKey:", this.mapKey);

			tools.removeCssCode();

			const mapValue = uni.getStorageSync(this.mapKey);
			if (mapValue) {
				console.log("mapValue:", mapValue);
				this.ocaId = mapValue;
			}

			this.getCardConfigQuery();
		},
		// 页面初次渲染完成，此时组件已挂载完成，DOM 树($el)已可用
		onReady() {
			// this.dealFirstEnter();
			// this.playMusic();
		},
		onShow() {
			// uni.showToast({
			// 	icon: "none",
			// 	title: "[rankOverview] onShow"
			// })
			// if (this.$audio.audioStatus == 2 && this.$audio.audioSrc == this.audioSrc) {
			// 	this.$audio.play();
			// }
		},
		onUnload() {
			this.clear();
		},
		methods: {
			playMusic() {
				return;
				// uni.showToast({
				// 	title: 'playMusic',
				// 	icon: 'none',
				// 	duration: 2000
				// });
				// if (this.$audio.audioStatus == 0 || this.$audio.audioSrc != this.audioSrc) {
				// 	this.$audio.playAudio(this.audioSrc);
				// }
			},
			dealNotice(rank) {
				// console.log('[dealFirstEnter]');
				let that = this;
				uni.getStorage({
					key: that.rankKey,
					success: (res) => {
						console.log('[getStorage]', that.rankKey, res.data);
						const oldRank = res.data;
						if (oldRank != rank) {
							// that.notice = true;
							that.setRankValue(rank);
						}
					},
					fail: (e) => {
						console.log('[getStorage] fail', that.rankKey, e);
						// that.notice = false;
						that.setRankValue(rank);
					},
				})
			},
			setRankValue(data) {
				let that = this;
				uni.setStorage({
					key: that.rankKey,
					data: data,
					success: () => {
						console.log('[setStorage] success', that.rankKey, data);
					},
					fail: (e) => {
						console.log('[setStorage] fail', that.rankKey, e);
					},
				})
			},
			dealFirstEnter() {
				// console.log('[dealFirstEnter]');
				let that = this;
				uni.getStorage({
					key: that.firstEnterKey,
					success: (res) => {
						console.log('[getStorage]', that.firstEnterKey, res.data);
					},
					fail: (e) => {
						console.log('[getStorage] fail', that.firstEnterKey, e);
						that.btnInfo();
						that.setFirstEnterValue(true);
					},
				})
			},
			setFirstEnterValue(data) {
				let that = this;
				uni.setStorage({
					key: that.firstEnterKey,
					data: data,
					success: () => {
						console.log('[setStorage] success', that.firstEnterKey, data);
					},
					fail: (e) => {
						console.log('[setStorage] fail', that.firstEnterKey, e);
					},
				})
			},
			clear() {
				if (this.interval != null) {
					clearInterval(this.interval);
					this.interval = null;
				}
			},
			loadConfig(config) {
				// console.log("config", config);

				// 加载CSS样式
				const css = config.css;
				if (css != undefined && css.length > 0) {
					tools.loadCssCode(css);

					if (css.indexOf(".top{") >= 0) {
						this.cssTop = "top";
					}
					if (css.indexOf(".topbar-color{") >= 0) {
						this.cssTopbarColor = "topbar-color";
					}
				}

				if (this.cssTop == "") {
					this.cssTop = "top-default";
				}
				if (this.cssTopbarColor == "") {
					this.cssTopbarColor = "topbar-color-default";
				}
				console.log("[loadConfig] cssTop:", this.cssTop);
				console.log("[loadConfig] cssTopbarColor:", this.cssTopbarColor);

				// 加载比赛路线数据
				const pathList = config.pathList;
				// console.log("[loadConfig] pathList:", pathList);
				if (pathList != undefined) {
					this.pathList = pathList;
				}

				// 加载比赛路线样式
				const pathListStyle = config.pathListStyle;
				// console.log("[loadConfig] pathList:", pathList);
				if (pathListStyle != undefined) {
					this.pathListStyle = pathListStyle;
				}

				// 加载规则弹窗配置
				const popupRuleConfig = config.popupRuleConfig;
				if (popupRuleConfig != undefined) {
					this.popupRuleConfig = popupRuleConfig;
				}
				// console.log("[loadConfig] popupRuleConfig:", this.popupRuleConfig);
				
				// 加载帮助弹窗配置
				const popupHelpConfig = config.popupHelpConfig;
				if (popupHelpConfig != undefined) {
					this.popupHelpConfig = popupHelpConfig;
				}
				// console.log("[loadConfig] popupHelpConfig:", this.popupHelpConfig);
				
				// 加载警告弹窗配置
				const popupWarnConfig = config.popupWarnConfig;
				if (popupWarnConfig != undefined) {
					this.popupWarnConfig = popupWarnConfig;
				}
				// console.log("[loadConfig] popupWarnConfig:", this.popupWarnConfig);
				
				// 加载弹窗数据
				const popupDataList = config.popupDataList;
				// console.log("[loadConfig] popupDataList:", popupDataList);
				if (popupDataList != undefined && popupDataList.length > 0) {
					for (var i = 0; i < popupDataList.length; i++) {
						// console.log("[loadConfig] popupDataList", i, popupDataList[i]);
						if (popupDataList[i] == 'default') {
							for (var j = 0; j < defaultPopUpDataList.length; j++) {
								this.popupDataList.push(defaultPopUpDataList[j]);
							}
						} else if (popupDataList[i] == 'default2') {
							for (var j = 0; j < defaultPopUpDataList2.length; j++) {
								this.popupDataList.push(defaultPopUpDataList2[j]);
							}
						} else {
							this.popupDataList.push(popupDataList[i]);
						}
					}
				} else {
					this.popupDataList = defaultPopUpDataList;
					console.log("[loadConfig] popupDataList 加载默认列表");
				}
				// console.log("[loadConfig] popupDataList:", this.popupDataList);
				
				// 加载弹窗(帮助)数据
				const popupHelpList = config.popupHelpList;
				if (popupHelpList != undefined && popupHelpList.length > 0) {
					for (var i = 0; i < popupHelpList.length; i++) {
						// console.log("[loadConfig] popupHelpList", i, popupHelpList[i]);
						this.popupHelpList.push(popupHelpList[i]);
					}
				}
				// console.log("[loadConfig] popupHelpList:", this.popupHelpList);
				
				// 加载页面参数
				const param = config.param;
				if (param != undefined) {
					if (param.subTitle != undefined && param.subTitle.length > 0) {
						this.configParam.subTitle = param.subTitle;
					}
					if (param.midType != undefined && param.midType >= 0) {
						this.configParam.midType = param.midType;
					}
				}
				// console.log("[loadConfig] param:", this.configParam);

				this.pageReady = true;
				// uni.hideLoading();
			},
			// 获取倒计时
			getCountdown() {
				// console.log(this.endSecond)
				if (this.endSecond > 0) {
					const now = Date.now() / 1000;
					const dif = this.endSecond - now;
					// const dif = 3600*24 - 60;
					if (dif > 0) {
						this.countdown = '距结束 ' + tools.convertSecondsToDHM(dif);
					} else {
						this.countdown = "活动已结束";
					}
					// this.countdown = tools.convertSecondsToHMS(dif);
				} else {
					this.countdown = "距结束 --天--小时";
				}
			},
			// 格式化 距离
			fmtDistanct(val) {
				if (val >= 0) {
					return Math.round(val * 100 / 1000) / 100;
				} else {
					return '--';
				}
				/* if (val < 1000)
					return Math.round(val * 10 / 1000) / 10;
				else
					return Math.round(val / 1000); */
			},
			// 格式化 配速
			fmtPace(val) {
				if (val >= 0) {
					return tools.convertSecondsToHMS(val, 2);
				} else {
					return '--';
				}
			},
			fmtMcTime(timestamp) {
				return tools.fmtMcTime(timestamp);
			},
			// 获取活动时间
			getActtime() {
				this.acttime = tools.getActtime(this.beginSecond, this.endSecond);
			},
			fmtMcTime2(timestamp1, timestamp2) {
				return tools.fmtMcTime2(timestamp1, timestamp2);
			},
			getCardConfigQuery() {
				uni.request({
					url: apiCardConfigQuery,
					header: {
						"Content-Type": "application/x-www-form-urlencoded",
						"token": this.token,
					},
					method: "POST",
					data: {
						ecId: this.ecId,
						pageName: this.pageName
					},
					success: (res) => {
						// console.log("getCardConfigQuery", res)
						const data = res.data.data;
						// console.log("configJson", data.configJson);
						const config = data.configJson != "" ? JSON.parse(data.configJson) : "";
						// console.log("configJson", data.configJson);
						/* const config = {
							"css": `
								.top{
									position: relative;
									width: 100%;
									height: 220px;
									padding-top: 36px;
									justify-content: space-between;
									background-image: url('static/backgroud/top_bg_dengshanjie.png');
									background-repeat: no-repeat;
									background-position-x: center;
									background-position-y: center;
									background-size: cover;
								}
								.topcontent {
									display: none !important;
								}
								.topbar-color{
									color: #333333;
								}
								.mid{
									margin-top: -40px !important;
								}
								.btnStartGame{
									background-color: #ff870e !important;
								}
								.e-select{
									background-color: #ff870e !important;
								}
								.swiper-item-button{
									background-color: #ff870e !important;
								}
								.uni-swiper-dot-active{
									background: #ff870e !important;
								}
							`,
							"pathList": {
								"row1": [{
										"type": 3,
										"pathImg": "/static/common/lingxiucheng.png",
										"path": {
											"ocaId": 1,
											"mcType": 3
										},
										"navImg": "/static/common/nav.png",
										"point": {
											"longitude": 117.022194,
											"latitude": 36.661612,
											"name": "领秀城起始点"
										}
									},
									{
										"type": 3,
										"pathImg": "/static/common/quanchenggongyuan.png",
										"path": {
											"ocaId": 1,
											"mcType": 3
										},
										"navImg": "/static/common/nav.png",
										"point": {
											"longitude": 117.022194,
											"latitude": 36.661612,
											"name": "泉城公园起始点"
										}
									}
								],
								"row2": [{
										"type": 3,
										"pathImg": "/static/common/baihuagongyuan.png",
										"path": {
											"ocaId": 1,
											"mcType": 3
										},
										"navImg": "/static/common/nav.png",
										"point": {
											"longitude": 117.022194,
											"latitude": 36.661612,
											"name": "百花公园起始点"
										}
									},
									{
										"type": 3,
										"pathImg": "/static/common/aotizhongxin.png",
										"path": {
											"ocaId": 1,
											"mcType": 3
										},
										"navImg": "/static/common/nav.png",
										"point": {
											"longitude": 117.022194,
											"latitude": 36.661612,
											"name": "奥体中心起始点"
										}
									}
								],
								"row3": [{
									"type": 3,
									"pathImg": "/static/common/muniushan.png",
									"path": {
										"ocaId": 1,
										"mcType": 3
									},
									"navImg": "/static/common/nav.png",
									"point": {
										"longitude": 117.022194,
										"latitude": 36.661612,
										"name": "牧牛山起始点"
									}
								}]
							},
							"pathListStyle" : {
								"showLine" : true,
								"style": "justify-content: flex-start;"
							},
							"popupRuleConfig": {
								"height": "560px"
							},
							"popupDataList": [
								{
									"type": 1,
									"data": {
										"title": "小飞龙定向登山节",
										"logo": {
											"src": "/static/logo/xfl2.png",
											"width": "100px",
											"height": "100px"
										},
										"content": "小飞龙定向登山节燃情开幕！7大公园/社区等你探索，加入心仪战队，开启寻宝之旅！奖品多到拿不下！",
										"imageList": [{
											"src": "/static/common/qrcode_xfldsjzxbzq.png",
											"width": "150px",
											"height": "150px"
										}]
									}
								},
								{
									"type": 7,
									"data": {
										"title": "活动流程",
										"logo": {
											"src": "/static/logo/xfl2.png",
											"width": "100px",
											"height": "100px"
										},
										"content": "<br>① 导航至起点打点 → ② 依次打点 → ③ 接受挑战 → ④ 终点打点 → ⑤ 查看成绩 → ⑥ 赢取奖励",
										"imageList": [{
											"src": "/static/common/qrcode_spjc.png",
											"width": "150px",
											"height": "150px"
										}]
									}
								},
								{
									"type": 7,
									"data": {
										"title": "规则及奖励",
										"content": "<br><span style='color:#fe880e;'>规则：</span><br>① 7个场地任选、参赛时间自由、路线随机、不限参赛次数；<br>② 选择心仪战队，共筑个人与战队荣耀；<br>③ 1次成功打点，获取1个百味豆（积分）；1次正确答题，获取1个百味豆（积分）；<br>④ 正常完赛累计百味豆，未完赛不计入。<br><br> <span style='color:#fe880e;'>奖励：</span><br>① 每20个百味豆（积分）兑换一枚鸡蛋，上不封顶（7日内兑换）；<br>② 每20个百味豆（积分）获取各合作机构多种精美礼品（7日内兑换）；<br>③ 赛事中不定期推出额外奖励，请随时关注赛事弹出公告。"
									}
								},
								{
									"type": 7,
									"data": {
										"title": "奖励",
										"logo": {
											"src": "/static/logo/xxhpgy.png",
											"width": "120px",
											"height": "120px",
											"memo": "星星和蒲公英双语阅读馆"
										},
										"content": "星星和蒲公英双语阅读馆，济南儿童阅读网红圣地！馆藏2W+册正版图书，涵盖中英文大奖绘本、桥梁书、自然科学与文学社科名著，以及艺术画册和摄影图集。开展面向4-12岁孩子的中文阅读读书会＆中英双语阅读课。<br><br>每20个百味豆奖励：<br><span style='color:#FF870E;'>礼品一：到店阅读权限一年<br>礼品二：店内饮品五折券一张</span>",
										"pointList": [
											{
												"name": "星星和蒲公英双语阅读馆",
												"tel": "电话：<a href='tel:18765812082' style='color: #333333;'>18765812082</a>",
												"longitude": 117.075174,
												"latitude": 36.654108
											}
										]
									}
								},
								{
									"type": 7,
									"data": {
										"title": "奖励",
										"logo": {
											"src": "/static/logo/wensiyu.png",
											"width": "120px",
											"height": "120px",
											"memo": "文思语少年读书会"
										},
										"content": "文思语少年读书会，专注于为4-15岁儿童和家庭提供阅读素养发展解决方案和产品。读书会以整本书精读伴读为核心，塑造良好的读书习惯，训练阅读理解能力，培养创意作文能力。<br><br>每20个百味豆奖励：<br><span style='color:#FF870E;'>《山海经》精装套系书。原价：158元/套，活动价19.9元/套，封顶5套，权限可赠送他人</span>",
										"pointList": [
											{
												"name": "文思语少年读书会",
												"tel": "电话：<a href='tel:17663733631' style='color: #333333;'>17663733631</a>",
												"longitude": 117.075174,
												"latitude": 36.654108
											}
										]
									}
								},
								{
									"type": 7,
									"data": {
										"title": "奖励",
										"logo": {
											"src": "/static/logo/lezhigu.png",
											"width": "120px",
											"height": "120px",
											"memo": "乐知谷"
										},
										"content": "乐知谷是济南科学类口碑最好的机构，主做面向4-12岁儿童，内容涵盖工程科技、自然科学、生命科学、地球太空、PBL综合项目等五大板块，室内＆户外相结合，真正将实验、动手、探究融于生活，培养独立思考、永存好奇、敢于创造的未来型孩子。<br><br>每20个百味豆奖励：<br><span style='color:#FF870E;'>乐知谷景点工程体验课《建造一座斜拉桥》一堂，感受力学结构的科技含量。每人限参与1次，多余权限可赠送他人</span>",
										"pointList": [
											{
												"name": "乐知谷",
												"tel": "电话：<a href='tel:19100652564' style='color: #333333;'>19100652564</a>",
												"longitude": 117.075174,
												"latitude": 36.654108
											}
										]
									}
								},
								{
									"type": 7,
									"data": {
										"title": "奖励",
										"logo": {
											"src": "/static/logo/kusentiyu.png",
											"width": "120px",
											"height": "120px",
											"memo": "酷森体育俱乐部"
										},
										"content": "酷森体育俱乐部包含少儿篮球、体能训练、跳绳，三大课程。拥有二十年以上资深学院派专家教练团队，制定系统的少儿运动训练体系，结合不同年龄及能力的孩子进行定制化教学，使其更符合不同孩子的综合能力提升。<br><br>每20个百味豆奖励：<br><span style='color:#FF870E;'>手机全年影视会员卡，封顶5张</span>",
										"pointList": [
											{
												"name": "酷森体育俱乐部",
												"tel": "电话：<a href='tel:15621875115' style='color: #333333;'>15621875115</a>",
												"longitude": 117.075174,
												"latitude": 36.654108
											}
										]
									}
								},
								{
									"type": 7,
									"data": {
										"title": "主办方",
										"logo": {
											"src": "/static/logo/xfl2.png",
											"width": "120px",
											"height": "120px",
											"memo": "英泓小飞龙体育俱乐部"
										},
										"content": "专注15年青少年体能训练，俱乐部开馆7年具备完善的针对中国青少年体质的科学训练体系，为12万青少年提供运动方案。俱乐部小学会员，通过俱乐部的系统训练，已达到中考体育满分标准。",
										"pointList": [
											{
												"name": "英泓小飞龙体育俱乐部",
												"tel": "电话：<a href='tel:15689409077' style='color: #333333;'>15689409077</a>",
												"longitude": 117.075174,
												"latitude": 36.654108
											}
										]
									}
								},
								"default2"
							],
							"popupWarnConfig": {
								"height": "550px"
							},
							"popupHelpConfig": {
								"height": "539px"
							},
							"popupHelpList": [
								{
									"type": 2,
									"data": {
										"title": "帮助",
										"img": "/static/common/qrcode_help.png",
										"imgParam": {
											"height": "370px"
										}
									}
								}
							],
							"param": {
								"subTitle": "",
								"midType": 1
							}
						}; */

						this.loadConfig(config);
						this.matchRsDetailQuery();
						this.warnMessageQuery();

						setTimeout(this.dealFirstEnter, 500);
					},
					fail: (err) => {
						console.log("getCardConfigQuery err", err)
					},
				});
			},
			// 卡片对应地图列表详情查询
			mapListQuery() {
				uni.request({
					url: apiMapListQuery,
					header: {
						"Content-Type": "application/x-www-form-urlencoded",
						"token": this.token,
					},
					method: "POST",
					data: {
						mcId: this.mcId
					},
					success: (res) => {
						// console.log("mapListQuery", res);
						if (res.data.code == 0) {
							const data = res.data.data;
							this.mapList = data;

							let mapItems = [];
							for (var i = 0; i < data.length; i++) {
								let map = {};
								map.text = data[i].mapName;
								map.value = data[i].ocaId;
								mapItems.push(map);
							}
							this.mapList = mapItems;
							// console.log("mapList", this.mapList);
						}
					},
					fail: (err) => {
						console.log("mapListQuery err", err);
					},
				});
			},
			// 卡片对应线上赛多个活动查询
			matchRsDetailQuery() {
				uni.request({
					url: apiMatchRsDetailQuery,
					header: {
						"Content-Type": "application/x-www-form-urlencoded",
						"token": this.token,
					},
					method: "POST",
					data: {
						ecId: this.ecId,
						ocaId: this.ocaId
					},
					success: (res) => {
						// console.log("matchRsDetailQuery", res);
						if (checkResCode(res)) {
							const data = res.data.data;
							this.mcType = data.mcType;
							this.mcId = data.mcId;
							this.mcName = data.mcName;
							this.coiName = data.coiName;
							this.beginSecond = data.beginSecond;
							this.endSecond = data.endSecond;
							this.nickName = data.nickName;
							this.totalNum = data.totalNum;
							this.totalDistanct = data.totalDistanct;
							this.totalDistanctRankNum = data.totalDistanctRankNum;
							this.totalCp = data.totalCp;
							this.totalCpRankNum = data.totalCpRankNum;
							this.totalSysPoint = data.totalSysPoint;
							this.totalSysPointRankNum = data.totalSysPointRankNum;
							this.fastPace = data.fastPace;
							this.fastPaceRankNum = data.fastPaceRankNum;
							this.regionTotalNum = data.regionTotalNum;
							this.regionTotalCp = data.regionTotalCp;
							this.regionTotalCpRankNum = data.regionTotalCpRankNum;
							this.regionTotalSysPoint = data.regionTotalSysPoint;
							this.regionTotalDictance = data.regionTotalDictance;
							this.regionFastPace = data.regionFastPace;
							this.ocaRs = data.ocaRs;

							this.mcState = tools.checkMcState(this.beginSecond, this.endSecond);

							const rank = JSON.stringify(data);
							this.dealNotice(rank);

							this.getCountdown();
							this.getActtime();

							this.isAllowMcSignUp();
							this.mapListQuery();

							this.clear();
							this.interval = setInterval(this.getCountdown, 60000);
						}
					},
					fail: (err) => {
						console.log("matchRsDetailQuery err", err)
					},
				});
			},
			// 是否允许重新分组（报名）
			isAllowMcSignUp() {
				uni.request({
					url: apiIsAllowMcSignUp,
					header: {
						"Content-Type": "application/x-www-form-urlencoded",
						"token": this.token,
					},
					method: "POST",
					data: {
						ecId: this.ecId
					},
					success: (res) => {
						// console.log("isAllowMcSignUp", res)
						if (res.data.code == 0) {
							const data = res.data.data;
							this.allowMcSignUp = data.allowSignUp;
						}
					},
					fail: (err) => {
						console.log("isAllowMcSignUp err", err)
					},
				});
			},
			// 警告列表查询
			warnMessageQuery() {
				uni.request({
					url: apiWarnMessageQuery,
					header: {
						"Content-Type": "application/x-www-form-urlencoded",
						"token": this.token,
					},
					method: "POST",
					data: {
						ecId: this.ecId
					},
					success: (res) => {
						// console.log("warnMessageQuery", res);
						if (checkResCode(res)) {
							const warnRs = res.data.data;
							this.popupWarnList.length = 0;
							for (var i = 0; i < warnRs.length; i++) {
								let popupData = {
									type: 9, // 9: 警告
									data: {}
								};
								popupData.data.warnType = warnRs[i].warnType;
								popupData.data.title = warnRs[i].warnTitle;
								popupData.data.iconUrl = warnRs[i].iconUrl;
								popupData.data.iconNum = warnRs[i].iconNum;
								popupData.data.message = warnRs[i].warnMessage;
								popupData.data.qrCodeUrl = warnRs[i].qrCodeUrl;
								this.popupWarnList.push(popupData);
							}
							
							/* this.popupWarnList.push(
								{
									type: 9, // 9: 警告
									data: {
										warnType: 1,
										title: "黄牌",
										iconUrl: "/static/common/card_yellows.png",
										iconNum: 1,
										message: `亲爱的参赛者:
　　收到此黄牌，说明您的比赛数据被系统判定为存在异常，此次比赛（活动）为徒步定向校园文化主题活动，请自觉遵守规则，如果您收到的黄牌数量过多<span style='color: red'>（超过2张）</span>，您的成绩将影响到您的院系/单位成绩，同时您的个人成绩也有可能根据规则被取消。如果您坚持您的比赛数据没有问题，请联系我们的客服人员，谢谢！
　　让我们一起创造文明、和谐的校园生活，感谢您的支持！`,
										qrCodeUrl: "https://orienteering.beswell.com/shanda/%E8%AD%A6%E5%91%8A%E4%BA%8C%E7%BB%B4%E7%A0%81%402x.png"
										}
								}
							); */
							// console.log("popupMessageList", this.popupMessageList);
						}
					},
					fail: (err) => {
						console.log("warnMessageQuery err", err)
					},
				});
			},
			btnBack() {
				// const url = `action://to_home/`;
				// tools.appAction(url);

				// uni.navigateTo({
				// 	url: "/pages/bm/style4/rankList?" + this.queryString
				// });
				const url = "/pages/bm/style4/rankList?" + this.queryString;
				tools.appAction(url, "uni.navigateTo");
			},
			btnInfo() {
				// console.log(this.$refs.mypopup);
				this.$refs.mypopup.popupOpen();
			},
			btnHelp() {
				this.$refs.mypopupHelp.popupOpen();
			},
			btnWarn() {
				this.$refs.mypopupWarn.popupOpen();
			},
			btnReGroup() {
				this.queryObj.from = "rankOverview";
				this.queryString = tools.objectToQueryString(this.queryObj);
				// uni.navigateTo({
				// 	url: '/pages/bm/style4/signup?' + this.queryString
				// });
				const url = '/pages/bm/style4/signup?' + this.queryString;
				tools.appAction(url, "uni.navigateTo");
			},
			onOverviewClick(ovtype) {
				this.queryObj.ovtype = ovtype;
				this.queryString = tools.objectToQueryString(this.queryObj);
				// uni.navigateTo({
				// 	url: "/pages/bm/style4/rankList?" + this.queryString
				// });
				const url = "/pages/bm/style4/rankList?" + this.queryString;
				tools.appAction(url, "uni.navigateTo");
			},
			eSelectChange(data) {
				// console.log("eSelectChange:", data);
				this.ocaId = data.value;
				this.matchRsDetailQuery();
				uni.setStorageSync(this.mapKey, this.ocaId);
			},
			onPathClick(data) {
				console.log("onPathClick:", data);
				if (this.ocaId != data.path.ocaId) {
					this.ocaId = data.path.ocaId;
					this.matchRsDetailQuery();
					uni.setStorageSync(this.mapKey, data.path.ocaId);
				}
			},
			btnStartGame() {
				// 赛事/活动状态 0: 未开始  1: 进行中  2: 已结束
				if (this.mcState == 1) {
					const url = `action://to_detail/?id=${this.ocaId}&matchType=${this.mcType}`;
					tools.appAction(url);
				} else if (this.mcState == 0) {
					uni.showToast({
						title: '比赛尚未开始',
						icon: 'none',
						duration: 3000
					});
				} else if (this.mcState == 2) {
					uni.showToast({
						title: '比赛已结束',
						icon: 'none',
						duration: 3000
					});
				}
			}
		}
	}
</script>

<style scoped>
	.content {
		width: 100vw;
		min-height: 100vh;
		overflow-x: scroll;
	}

	.top-default {
		position: relative;
		z-index: 10;
		width: 100%;
		height: 270px;
		padding-top: 36px;
		justify-content: space-between;
		background-image: url("/static/backgroud/top_bg_egg2.png");
		background-repeat: no-repeat;
		background-position-x: center;
		background-position-y: -8px;
		background-size: 100% 100%;
		/* background-size: cover; */
	}

	.topbar-color-default {
		color: #333333;
	}

	.topcontent {
		height: 90%;
		margin-bottom: 50px;
	}

	.logo {
		width: 80px;
		height: 80px;
		margin-top: 10px;
		/* background-image: url('/static/logo/sddx.png'); */
		background-repeat: no-repeat;
		background-position-x: center;
		background-position-y: center;
		background-size: contain;
	}

	.top-acttime {
		display: none;
		text-shadow: 3px 3px 0px #640008;
		font-family: YouSheBiaoTiHei;
		/* font-family: Arial, Helvetica, sans-serif; */
		font-weight: bold;
		color: #ffee0b;
		font-size: 26px;
	}

	.topbtm {
		width: 100%;
		/* height: 60rpx; */
		margin-bottom: 40px;
		justify-content: space-evenly;
	}

	.topbtm-name {
		/* width: 320rpx; */
		/* height: 28px; */
		padding: 5px 12px;
		background-color: #9fda39;
		border-radius: 5px;
		/* backdrop-filter: blur(30px); */
		text-align: center;
		font-weight: 500;
		color: #497400;
		font-size: 14px;
	}

	.midType0 {
		width: 90%;
		height: 150px;
		position: relative;
		z-index: 20;
		margin-top: -40px;
		background: #ffffff;
		border-radius: 9px;
		box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.13);
		font-family: Source Han Sans CN;
	}

	.midType1 {
		width: 90%;
		/* height: 112px; */
		height: 150px;
		position: relative;
		z-index: 20;
		margin-top: -70px;
		background: #ffffff;
		border-radius: 9px;
		box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.13);
		font-family: Source Han Sans CN;
	}
	
	.mid-0 {
		width: 90%;
		margin: 12px;
	}
	
	.mid-0-select {
		width: 60%;
		font-weight: 500;
		color: #8e8e8e;
		font-size: 14px;
	}
	
	.mid-0-help {
		position: absolute;
		right: 30px;
		font-size: 12px;
		font-weight: 500;
		color: #992900;
	}

	.mid-0-right {
		position: absolute;
		width: 60px;
		/* background-color: #81cd00; */
		right: 10px;
		font-size: 12px;
		font-weight: 500;
		color: #992900;
	}
	
	.midType0-mid-1 {
		width: 90%;
		margin-bottom: 12px;
	}
	
	.midType1-select {
		/* width: 46%; */
		min-width: 46%;
		max-width: 50%;
		margin: 0 5px;
		font-weight: 500;
		color: #8e8e8e;
		font-size: 14px;
	}
	
	.midType1-mid-1 {
		width: 90%;
		margin-bottom: 12px;
		font-weight: 500;
		color: #8e8e8e;
		font-size: 14px;
	}
	
	.mid-1-yellowCard {
		width: 15px;
		height: 20px;
		margin-right: 10px;
	}

	.mid-1-name {
		max-width: 360rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.mid-1-text {
		/* min-width: 60px; */
		font-weight: 500;
		color: #9a300e;
		font-size: 12px;
	}

	.mid-2 {
		width: 92%;
		/* margin: 0 10px; */
	}

	.mid-2-value {
		font-weight: 900;
		font-size: 22px;
		line-height: 25px;
	}

	.mid-2-text {
		color: #989898;
		font-size: 12px;
	}

	.mid-line {
		width: 0px;
		height: 40px;
		border: 1px solid;
		border-color: #e6e6e6;
	}

	.overview-1 {
		width: 111px;
		height: 54px;
		background: #ffb40b;
		border-radius: 50%;
		box-shadow: 3px 3px 0px rgba(140, 140, 140, 1);
		pointer-events: auto;
	}

	.overview-2 {
		margin-top: -43px;
		color: #ffffff;
		font-size: 18px;
		pointer-events: auto;
	}

	.overview-3 {
		width: 111px;
		height: 54px;
		background: #f39509;
		border-radius: 50%;
		box-shadow: 3px 3px 0px rgba(140, 140, 140, 1);
		pointer-events: auto;
	}

	.overview-4 {
		width: 111px;
		height: 54px;
		background: #81cd00;
		border-radius: 50%;
		box-shadow: 3px 3px 0px rgba(140, 140, 140, 1);
		pointer-events: auto;
	}

	.overview-5 {
		width: 111px;
		height: 54px;
		background: #64cbb0;
		border-radius: 50%;
		box-shadow: 3px 3px 0px rgba(140, 140, 140, 1);
		pointer-events: auto;
	}

	.ovline1 {
		margin-top: 9px;
		color: #ffffff;
		font-size: 12px;
	}

	.ovline2 {
		color: #ffffff;
		font-size: 16px;
	}

	.main {
		width: 100%;
		margin-top: 20px;
		margin-bottom: 20px;
		/* height: 70vh; */
		justify-content: space-around;
		/* justify-content: space-between; */
	}

	.main-title {
		margin-bottom: 10px;
		font-weight: 550;
		color: #333333;
		font-size: 16px;
	}

	.bottom {
		width: 100%;
		flex-grow: 1;
		justify-content: flex-end;
	}

	.btnStartGame {
		width: 70%;
		height: 80rpx;
		/* margin-top: 50rpx; */
		margin-bottom: 20rpx;
		/* font-weight: bold; */
		color: white;
		font-size: 32rpx;
		line-height: 80rpx;
		border-radius: 27px;
		background-color: #2e85ec;
	}
	
	/deep/ .e-select {
		/* width: 60%; */
		height: 60rpx;
		background: #2e85ec;
		color: #ffffff;
		border-radius: 18px;
		justify-content: space-around;

		font-size: 16px;
		font-weight: 500;
		line-height: 60rpx;
		text-align: center;
		border: none !important;
	}

	/deep/ .e-select-input-text {
		color: inherit !important;
	}

	/deep/ .e-select-selector-item {
		color: #818181;
	}

	/deep/ .uni-icons {
		color: inherit !important;
	}

	/deep/ .e-select-icon {
		width: 26px !important;
	}
</style>