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

<!-- 
[报名] 样式3 - 排名列表
http://localhost:5173/card/#/pages/bm/style4/rankList
https://oss-mbh5.colormaprun.com/card/#/pages/bm/style4/rankList
 -->
<template>
	<view class="body">
		<view v-if="pageReady" class="content uni-column">
			<view class="uni-column" :class="cssTop">
				<my-topbar :mcName="mcName" :class="cssTopbarColor" :showMessage="popupMessageList.length > 0"
					@btnBackClick="btnBack" @btnInfoClick="btnInfo" @btnMessageClick="btnMessage"></my-topbar>

				<view class="topcontent uni-column uni-jcsa">
					<view class="tcview uni-row uni-jcsb">
						<view class="tcbox uni-column uni-jcc">
							<text class="tcbox-label">赛事总里程</text>
							<text class="tcbox-value">{{fmtDistanct(all_totalDistance)}} 千米</text>
						</view>
						<view class="tcbox uni-column uni-jcc">
							<text class="tcbox-label">{{configParam.labelRightAnswerNum}}</text>
							<text class="tcbox-value">{{all_totalAnswerNum}} 次</text>
						</view>
					</view>
					<text class="today" :data-content="today">{{today}}</text>
				</view>

				<!-- <view class="topcontent uni-column uni-jcsa">
					<view class="logo"></view>
					<view class="tcbar uni-row uni-jcsb">
						<text class="tcbar-text">赛事总里程：{{fmtDistanct(all_totalDistance)}} 千米</text>
						<text class="tcbar-text">{{configParam.labelRightAnswerNum}}：{{all_totalAnswerNum}} 次</text>
					</view>
				</view> -->

				<view class="topbtm uni-row">
					<view class="topbtm-egg" @click="btnMyEgg">{{configParam.labelTicketName}}</view>
					<text class="topbtm-name">{{nickName}}</text>
					<view class="topbtm-egg" @click="btnExchg">{{configParam.labelAwardAddress}}</view>
				</view>
			</view>
			<view class="main uni-column">
				<view class="main-bar uni-row uni-jcse">
					<text>总里程：{{fmtDistanct(all_totalDistance)}}km</text>
					<text>总打点数：{{all_totalCp}}个</text>
					<text>总百味豆数：{{all_totalSysPoint}}个</text>
				</view>
				
				<my-tab ref="tab1" :tabItems="tab1Items" :type="1" @onTabClick="onTab1Click"
					:initActIndex=configParam.tab1InitActIndex @onSelectChange="onSelectChange"></my-tab>
				<my-tab ref="tab2" :tabItems="tab2Items" :tabItemsMark="tab2ItemsMark" :type="0"
					:initActIndex=configParam.tab2InitActIndex @onTabClick="onTab2Click" :fontSize="12"></my-tab>

				<view class="tab-view uni-column">
					<!-- 团体成绩列表 -->
					<template v-if="tab1Current==0" v-for="(item, index) in rank1List" :key="index">
						<my-ranklist v-show="tab2Current === index" :rankRs="rankList[item]"
							:rank-type="rankTypeList[index]"></my-ranklist>
					</template>

					<!-- 个人成绩列表 -->
					<template v-if="tab1Current==1" v-for="(item, index) in rank2List" :key="index">
						<my-ranklist v-show="tab2Current === index" :rankRs="rankList[item]"
							:rank-type="rankTypeList[index]"></my-ranklist>
					</template>
				</view>

				<button class="btnBack" @click="btnStartGame">{{btnStartGameText}}</button>
				<!-- <button class="btnBack" @click="btnBack">返回</button> -->
			</view>

			<my-popup ref="mypopup" :config="popupRuleConfig" :dataList="popupDataList" :acttime="acttime"></my-popup>
			<my-popup ref="mypopupExchg" :config="popupExchgConfig" :dataList="popupExchgList"></my-popup>
			<my-popup ref="mypopupMessage" :config="popupMessageConfig" :dataList="popupMessageList" @noMoreRemindersClick="onNoMoreRemindersClick"></my-popup>
			<my-popup ref="mypopupWarn" :config="popupWarnConfig" :dataList="popupWarnList"></my-popup>
			
		</view>
	</view>
</template>

<script>
	import tools from '/common/tools';
	import {
		teamName,
		defaultPopUpDataList
	} from '/common/define';
	import {
		token,
		apiMatchRsDetailQuery,
		apiCardRankDetailQuery,
		apiCardConfigQuery,
		apiUserCurrentRankNumQuery,
		apiIsAllowMcSignUp,
		apiUserJoinCardQuery,
		apiMapListQuery,
		apiCompStatisticQuery,
		apiWarnMessageQuery,
		apiUnReadMessageQuery,
		apiReadMessage,
		checkResCode
	} from '/common/api';

	export default {
		data() {
			return {
				pageReady: false,
				pageName: "rankList",
				firstEnterKey: 'firstEnter-bm-style4',
				rankKey: "rank-bm-style4",
				mapKey: "rank-bm-style4-map",
				messageKey: "message-bm-style4",
				queryObj: {},
				queryString: "",
				token: "",
				ovtype: "",

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

				mapList: [], // 卡片对应地图列表详情
				all_totalDistance: 0, // 赛事所有人累计里程，单位米
				all_totalRightAnswerNum: 0, // 赛事所有人正确答题数（校园文化输出）
				all_totalAnswerNum: 0, // 赛事所有人答题数（校园文化输出）
				all_totalCp: 0, // 赛事中所有人打点数
				all_totalSysPoint: 0, // 赛事中所有人百味豆

				mcState: 0, // 赛事/活动状态 0: 未开始  1: 进行中  2: 已结束
				allowMcSignUp: false, // 是否允许重新分组
				countdown: "", // 倒计时
				rankList: { // 排名列表
					// totalDistanceRs: [],
					// totalCpRs: [],
					// totalSysPointRs: [],
					// fastPaceRs: []
				},
				interval: null,

				teamType: 0, // 队伍类型
				// dispArrStr: "totalDistance,totalCp,totalSysPoint,fastPace",
				dispArrStr: "teamCp,teamTodayCp,teamDistance,teamRightAnswerPer,teamTodayPace,regionCp,regionTodayCp,regionDistance,regionRightAnswerPer,regionTodayPace", // 要显示的集合范围
				tab1Current: 0,
				tab2Current: 0,				
				tab1Items: ["团体"],
				// tab1Items: ["团体", {
				// 	selectValue: 1,
				// 	data: [
				// 		{text: "个人(中心校区)", value: 1},
				// 		{text: "个人(千佛山校区南区)", value: 2},
				// 		{text: "个人(兴隆校区)", value: 3}
				// 	]}
				// ],
				tab2Items: [],
				tab2Items_team: ["总积分", "今日积分", "总里程", "校园文化", "今日配速"],
				tab2Items_person: ["总积分", "今日积分", "总里程", "校园文化", "今日配速"],
				tab2ItemsMark: [{
					textColor: "#ff6203",
					icon: "static/common/award.png"
				}],
				tabActiveColor: "#81cd00",

				rankTypeList: [],
				// 团队成绩类型列表
				rankTypeList_team: ["totalScore", "totalScore", "totalDistance", "rightAnswerPer", "fastPace"],
				// 个人成绩类型列表
				rankTypeList_person: ["totalScore", "totalScore", "totalDistance", "rightAnswerPer", "fastPace"],
				// 团体成绩列表
				rank1List: ["teamCpRs", "teamTodayCpRs", "teamDistanceRs", "teamRightAnswerPerRs", "teamTodayPaceRs"],
				// 个人成绩列表
				rank2List: ["regionCpRs", "regionTodayCpRs", "regionDistanceRs", "regionRightAnswerPerRs", "regionTodayPaceRs"],

				cssTop: "",
				cssTopbarColor: "",
				configParam: {
					labelRightAnswerNum: "文化输出",
					labelTicketName: "我的奖券",
					labelAwardAddress: "兑奖地址",
					tab1InitActIndex: 0,
					tab2InitActIndex: 0,
				},
				// selectedMapId: 0, // 用户选择的地图ID
				popupRuleConfig: {}, // 规则弹窗配置
				popupExchgConfig: {}, // 兑换地址弹窗配置
				popupMessageConfig: {}, // 通知弹窗配置
				// popupWarnConfig: {}, // 警告弹窗配置
				popupWarnConfig: {
					"height": "550px"
				},
				popupDataList: [],
				popupExchgList: [],
				popupMessageList: [],
				popupWarnList: [],
				// mqIdListStr: "", // 已读消息id列表 逗号分隔
			}
		},
		computed: {},
		onLoad(query) { // 类型非必填，可自动推导
			// console.log(query);
			this.queryObj = query;
			this.queryString = tools.objectToQueryString(this.queryObj);
			// console.log(queryString);
			this.token = query["token"] ?? token;
			this.ecId = query["id"] ?? 0;
			this.ovtype = query["ovtype"] ?? "";

			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);

			this.messageKey += "-" + this.ecId;
			console.log("messageKey:", this.messageKey);
			
			this.today = tools.timestampToTime(null, 2);

			tools.removeCssCode();

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

			this.getCardConfigQuery();
		},
		// 页面初次渲染完成，此时组件已挂载完成，DOM 树($el)已可用
		onReady() {
			// this.dealFirstEnter();
			// this.tab2Items = this.tab2Items_team;
		},
		onShow() {
			this.getUserJoinCardQuery();
		},
		onUnload() {
			this.clear();
		},
		methods: {
			initTab() {
				if (this.tab1Current == 0) {
					this.rankTypeList = this.rankTypeList_team;
					this.tab2Items = this.tab2Items_team;
				} else {
					this.rankTypeList = this.rankTypeList_person;
					this.tab2Items = this.tab2Items_person;
				}
			},
			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 tabActiveColor = config.tabActiveColor;
				if (tabActiveColor != undefined && tabActiveColor.length > 0) {
					this.tabActiveColor = tabActiveColor;
				}
				
				// 加载规则弹窗配置
				const popupRuleConfig = config.popupRuleConfig;
				if (popupRuleConfig != undefined) {
					this.popupRuleConfig = popupRuleConfig;
				}
				// console.log("[loadConfig] popupRuleConfig:", this.popupRuleConfig);

				// 加载兑换地址弹窗配置
				const popupExchgConfig = config.popupExchgConfig;
				if (popupExchgConfig != undefined) {
					this.popupExchgConfig = popupExchgConfig;
				}
				// console.log("[loadConfig] popupExchgConfig:", this.popupExchgConfig);
				
				// 加载通知弹窗配置
				const popupMessageConfig = config.popupMessageConfig;
				if (popupMessageConfig != undefined) {
					this.popupMessageConfig = popupMessageConfig;
				}
				// console.log("[loadConfig] popupMessageConfig:", this.popupMessageConfig);
				
				// 加载警告弹窗配置
				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 {
							this.popupDataList.push(popupDataList[i]);
						}
					}
				} else {
					this.popupDataList = defaultPopUpDataList;
					console.log("[loadConfig] popupDataList 加载默认列表");
				}
				// console.log("[loadConfig] popupDataList:", this.popupDataList);

				// 加载弹窗(兑换地点)数据
				const popupExchgList = config.popupExchgList;
				if (popupExchgList != undefined && popupExchgList.length > 0) {
					for (var i = 0; i < popupExchgList.length; i++) {
						// console.log("[loadConfig] popupExchgList", i, popupExchgList[i]);
						this.popupExchgList.push(popupExchgList[i]);
					}
				}
				// console.log("[loadConfig] popupExchgList:", this.popupExchgList);

				// 加载成绩参数
				const rankParam = config.rankParam;
				if (rankParam != undefined) {
					if (rankParam.tab2ItemsMark != undefined) {
						this.tab2ItemsMark = rankParam.tab2ItemsMark;
					}
					if (rankParam.dispArrStr != undefined && rankParam.dispArrStr.length > 0) {
						this.dispArrStr = rankParam.dispArrStr;
						// console.log("[loadConfig] dispArrStr:", rankParam.dispArrStr);
					}
					if (rankParam.tab2Items_team != undefined && rankParam.tab2Items_team.length > 0) {
						this.tab2Items_team = rankParam.tab2Items_team;
						// console.log("[loadConfig] tab2Items_team:", rankParam.tab2Items_team);
					}
					if (rankParam.tab2Items_person != undefined && rankParam.tab2Items_person.length > 0) {
						this.tab2Items_person = rankParam.tab2Items_person;
					}
					if (rankParam.rankTypeList_team != undefined && rankParam.rankTypeList_team.length > 0) {
						this.rankTypeList_team = rankParam.rankTypeList_team;
					}
					if (rankParam.rankTypeList_person != undefined && rankParam.rankTypeList_person.length > 0) {
						this.rankTypeList_person = rankParam.rankTypeList_person;
					}
					if (rankParam.rank1List != undefined && rankParam.rank1List.length > 0) {
						this.rank1List = rankParam.rank1List;
					}
					if (rankParam.rank2List != undefined && rankParam.rank2List.length > 0) {
						this.rank2List = rankParam.rank2List;
					}
				}
				// console.log("[loadConfig] rankParam:", rankParam);
				
				// 加载页面参数
				const param = config.param;
				if (param != undefined) {
					if (param.labelRightAnswerNum != undefined && param.labelRightAnswerNum.length > 0) {
						this.configParam.labelRightAnswerNum = param.labelRightAnswerNum;
					}
					if (param.labelTicketName != undefined && param.labelTicketName.length > 0) {
						this.configParam.labelTicketName = param.labelTicketName;
					}
					if (param.labelAwardAddress != undefined && param.labelAwardAddress.length > 0) {
						this.configParam.labelAwardAddress = param.labelAwardAddress;
					}
					if (param.tab1InitActIndex != undefined && param.tab1InitActIndex >= 0) {
						this.configParam.tab1InitActIndex = param.tab1InitActIndex;
						this.tab1Current = param.tab1InitActIndex;
					}
					if (param.tab2InitActIndex != undefined && param.tab2InitActIndex >= 0) {
						this.configParam.tab2InitActIndex = param.tab2InitActIndex;
						this.tab2Current = param.tab2InitActIndex;
					}
				}
				this.initTab();
				// console.log("[loadConfig] param:", this.configParam);
				
				this.pageReady = true;
			},
			// 获取倒计时
			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) {
				// return Math.round(val * 100 / 1000) / 100;
				if (val < 10000)
					return Math.round(val * 100 / 1000) / 100;
				else
					return Math.round(val / 1000);
			},
			fmtMcTime(timestamp) {
				return tools.fmtMcTime(timestamp);
			},
			// 获取活动时间
			getActtime() {
				this.acttime = tools.getActtime(this.beginSecond, this.endSecond);
			},
			getTeamName(teamType, teamIndex) {
				return teamName[teamType][teamIndex];
			},
			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{
									width: 100%;
									height: 170px;
									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: -20px;
									background-size: cover;
								}
								.topcontent {
									display: none !important;
								}
								.topbar-color{
									color: #333333;
								}
								.topbtm-name {
									background-color: #c77f34 !important;
									border: none !important;
									color: #ffffff !important;
								}
								.topbtm-egg {
									background-color: #c77f34 !important;
									border: none !important;
									color: #ffffff !important;
								}
								.main-bar {
									display: flex !important;
									background-color: #ffeddb !important;
									color: #ff8d1a !important;
								}
								.btnBack{
									background-color: #ff870e !important;
								}
								.tab-active{
									background-color: #ff870e !important;
								}
								.swiper-item-button {
									background-color: #ff870e !important;
								}
								.uni-swiper-dot-active {
									background: #ff870e !important;
								}
							`,
							"tabActiveColor": "#ff870e",
							"popupRuleConfig": {
								"height": "530px"
							},
							"popupDataList": [
								{
									"type": 7,
									"data": {
										"title": "活动规则",
										"content": "<br>① 任何人、任何时间均可体验参赛。<br><br>② 6个场地任意选，比赛时间内，不限次数参赛。<br><br>③ 1次成功打点，获取1个百味豆。<br><br>④ 1次正确答题，获取1个百味豆。"
									}
								},
								{
									"type": 7,
									"data": {
										"title": "活动奖励",
										"content": "<br><li>活动： 20个百味豆兑换一个鸡蛋<br><span style='font-size: 12px; color:#999999;'>(限本次活动百味豆，兑换以“蛋叔券”为准)</style><li>百味豆越多，“蛋叔”给你的鸡蛋 越多，上不封顶！<li>随时可以兑换哦~<li>能不能吃上自己挣的鸡蛋，就看你的了！<li style='color:#FF870E;'><span style='color:#FF870E;'>同时，参赛即可获取合作机构的奖励！</span><br><br>",
										"imageList": [{
											"src": "/static/common/danshu.png",
											"width": "183px",
											"height": "81px"
										}]
									}
								},
								{
									"type": 7,
									"data": {
										"title": "合作机构",
										"logo": {
											"src": "/static/logo/xxhpgy.png",
											"width": "120px",
											"height": "120px",
											"memo": "星星和蒲公英双语阅读馆"
										},
										"content": "星星和蒲公英双语阅读馆，济南儿童阅读网红圣地！馆藏2W+册正版图书，涵盖中英文大奖绘本、桥梁书、自然科学与文学社科名著，以及艺术画册和摄影图集。开展面向4-12岁孩子的中文阅读读书会＆中英双语阅读课。<br><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><span style='color:#FF870E;'>礼品：《山海经》精装套系书<br>书籍原价158元，仅需19.9元/套，不限领取次数，多余权限可赠送他人使用！</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><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><span style='color:#FF870E;'>礼品：手机全年影视会员卡</span>",
										"pointList": [
											{
												"name": "酷森体育俱乐部",
												"tel": "电话：<a href='tel:15621875115' style='color: #333333;'>15621875115</a>",
												"longitude": 117.075174,
												"latitude": 36.654108
											}
										]
									}
								}
							],
							"popupExchgConfig": {
								"height": "460px"
							},
							"popupExchgList": [
								{
									"type": 5,
									"data": {
										"title": "兑换地点1",
										"img": "/static/common/gtgwcs.png",
										"point": {
											"longitude": 117.022194,
											"latitude": 36.661612,
											"name": "冠同购物超市"
										}
									}
								},
								{
									"type": 5,
									"data": {
										"title": "兑换地点2",
										"img": "/static/common/wslgwcs2.png",
										"point": {
											"longitude": 117.022194,
											"latitude": 36.661612,
											"name": "万盛隆购物超市"
										}
									}
								}
							],
							"popupMessageConfig": {
								"height": "500px"
							},
							"param": {
								"labelRightAnswerNum": "文化输出",
								"labelTicketName": "蛋叔券",
								"labelAwardAddress": "兑换地址",
								"tab1InitActIndex": 0,
								"tab2InitActIndex": 0
							},
							"rankParam": {
								"tab2ItemsMark": [],
								"dispArrStr": "teamDistance,teamPoint,teamCp,teamPace,regionDistance,regionPoint,regionCp,regionPace",
								"tab2Items_team": ["里程", "打点数", "百味豆", "配速"],
								"tab2Items_person": ["里程", "打点数", "百味豆", "配速"],
								"rankTypeList_team": ["totalDistance", "totalCp", "totalSysPoint", "fastPace"],
								"rankTypeList_person": ["totalDistance", "totalCp", "totalSysPoint", "fastPace"],
								"rank1List": ["teamDistanceRs", "teamPointRs", "teamCpRs", "teamPaceRs"],
								"rank2List": ["regionDistanceRs", "regionPointRs", "regionCpRs", "regionPaceRs"]
							}
						}; */

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

						setTimeout(this.dealFirstEnter, 500);
					},
					fail: (err) => {
						console.log("getCardConfigQuery err", err)
					},
				});
			},
			// 卡片对应活动或赛事详情查询
			// getCardDetailQuery() {
			// 	uni.request({
			// 		url: apiCardDetailQuery,
			// 		header: {
			// 			"Content-Type": "application/x-www-form-urlencoded",
			// 			"token": this.token,
			// 		},
			// 		method: "POST",
			// 		data: {
			// 			ecId: this.ecId
			// 		},
			// 		success: (res) => {
			// 			// console.log("getCardDetailQuery", res)
			// 			const data = res.data.data;
			// 			this.mcType = data.mcType;
			// 			this.mcId = data.mcId;
			// 			this.mcName = data.mcName;
			// 			this.beginSecond = data.beginSecond;
			// 			this.endSecond = data.endSecond;
			// 			this.coiName = data.coiName;
			// 			this.teamNum = data.teamNum;

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

			// 			this.getCountdown();
			// 			this.getActtime();
			// 			this.getCardRankDetailQuery();

			// 			this.clear();
			// 			this.interval = setInterval(this.getCountdown, 60000);
			// 		},
			// 		fail: (err) => {
			// 			console.log("getCardDetailQuery err", err)
			// 		},
			// 	});
			// },
			// 卡片对应线上赛多个活动查询
			matchRsDetailQuery() {
				uni.request({
					url: apiMatchRsDetailQuery,
					header: {
						"Content-Type": "application/x-www-form-urlencoded",
						"token": this.token,
					},
					method: "POST",
					data: {
						ecId: this.ecId
					},
					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.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.ocaRs = data.ocaRs;

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

							this.getCountdown();
							this.getActtime();
							this.mapListQuery();
							this.compStatisticQuery();
							// this.getCardRankDetailQuery();

							this.clear();
							this.interval = setInterval(this.getCountdown, 60000);
						}
					},
					fail: (err) => {
						console.log("matchRsDetailQuery 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 = {
								// selectValue: this.selectedMapId,
								selectValue: this.ocaId,
								data: []
							};
							for (var i = 0; i < data.length; i++) {
								if (mapItems.selectValue == 0 && i == 0) {
									mapItems.selectValue = data[i].ocaId;
									// this.selectedMapId = data[i].ocaId;
									this.ocaId = data[i].ocaId;
								}
								let map = {};
								map.text = "个人(" + data[i].mapName + ")";
								map.value = data[i].ocaId;
								mapItems.data.push(map);
							}
							this.tab1Items.push(mapItems);
							this.getCardRankDetailQuery();
						}
					},
					fail: (err) => {
						console.log("mapListQuery err", err);
					},
				});
			},
			// 赛事总成绩统计查询
			compStatisticQuery() {
				uni.request({
					url: apiCompStatisticQuery,
					header: {
						"Content-Type": "application/x-www-form-urlencoded",
						"token": this.token,
					},
					method: "POST",
					data: {
						mcId: this.mcId
					},
					success: (res) => {
						// console.log("compStatisticQuery", res);
						if (res.data.code == 0) {
							const data = res.data.data;
							this.all_totalDistance = data.totalDistance;
							this.all_totalRightAnswerNum = data.totalRightAnswerNum;
							this.all_totalAnswerNum = data.totalAnswerNum;
							this.all_totalCp = data.totalCp;
							this.all_totalSysPoint = data.totalSysPoint;
						}
					},
					fail: (err) => {
						console.log("compStatisticQuery err", err);
					},
				});
			},
			// 排名查询
			getCardRankDetailQuery() {
				uni.request({
					url: apiCardRankDetailQuery,
					header: {
						"Content-Type": "application/x-www-form-urlencoded",
						"token": this.token,
					},
					method: "POST",
					data: {
						mcIdListStr: this.mcId,
						mcType: this.mcType,
						ocaId: this.ocaId,
						dispArrStr: this.dispArrStr
					},
					success: (res) => {
						// console.log("getCardRankDetailQuery", res);
						const rankdata = res.data.data;
						// this.rankList.totalDistanceRs = rankdata.totalDistanceRs;
						// this.rankList.totalCpRs = rankdata.totalCpRs;
						// this.rankList.totalSysPointRs = rankdata.totalSysPointRs;
						// this.rankList.fastPaceRs = rankdata.fastPaceRs;
						this.rankList = rankdata;
					},
					fail: (err) => {
						console.log("getCardRankDetailQuery err", err);
					},
				});
			},
			// 卡片用户当前排名查询
			// getUserCurrentRankNumQuery() {
			// 	uni.request({
			// 		url: apiUserCurrentRankNumQuery,
			// 		header: {
			// 			"Content-Type": "application/x-www-form-urlencoded",
			// 			"token": this.token,
			// 		},
			// 		method: "POST",
			// 		data: {
			// 			ecId: this.ecId
			// 		},
			// 		success: (res) => {
			// 			// console.log("getUserCurrentRankNumQuery", res)
			// 			if (res.data.code == 0) {
			// 				const data = res.data.data;
			// 				const rankNum = data.rankNum;
			// 				this.dealNotice(rankNum);
			// 			}
			// 		},
			// 		fail: (err) => {
			// 			console.log("getUserCurrentRankNumQuery 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)
					},
				});
			},
			// 用户是否已经报名卡片对应赛事查询
			getUserJoinCardQuery() {
				uni.request({
					url: apiUserJoinCardQuery,
					header: {
						"Content-Type": "application/x-www-form-urlencoded",
						"token": this.token
					},
					method: "POST",
					data: {
						ecId: this.ecId
					},
					success: (res) => {
						// console.log("getUserJoinCardQuery", res)
						const code = res.data.code;
						const data = res.data.data;
						if (code == 0) {
							this.isJoin = data.isJoin;
							if (this.isJoin) { // 已报名
								this.btnStartGameText = "我要比赛";
							} else {	// 未报名
								this.btnStartGameText = "我要报名";
							}
						}
					},
					fail: (err) => {
						console.log("getUserJoinCardQuery err", err)
					},
				});
			},
			// 未读消息列表查询
			getUnReadMessageQuery() {
				uni.request({
					url: apiUnReadMessageQuery,
					header: {
						"Content-Type": "application/x-www-form-urlencoded",
						"token": this.token,
					},
					method: "POST",
					data: {
						relationType: 2, // 类型 1 成就 2 卡片
						relationId: this.ecId
					},
					success: (res) => {
						// console.log("getUnReadMessageQuery", res);
						if (checkResCode(res)) {
							const unReadMessageRs = res.data.data;
							this.popupMessageList.length = 0;
							this.mqIdListStr = "";
							for (var i = 0; i < unReadMessageRs.length; i++) {
								let popupData = {
									type: 6, // 6: 通知
									data: {}
								};
								this.messageKey += "-" + unReadMessageRs[i].mqId;
								popupData.data.mqType = unReadMessageRs[i].mqType;
								popupData.data.title = unReadMessageRs[i].mqTitle;
								popupData.data.message = unReadMessageRs[i].mqMessage;
								this.popupMessageList.push(popupData);
								
								// this.mqIdListStr += this.unReadMessageRs[i].mqId;
								// if (i < this.unReadMessageRs.length - 1) {
								// 	this.mqIdListStr += ",";
								// }
							}
							
							// this.popupMessageList.push(
							// 	{
							// 		type: 6,	// 6: 通知
							// 		data: {
							// 			mqType: 3,
							// 			title: "特别提醒",
							// 			message: `本次比赛的目的为体验校园文化，提升身体素质，让大家感受和熟悉定向运动魅力及技巧。<br>
							// 			在此特别提醒：<br>
							// 			无论是驰骋校园，还是漫步秋色，<b>“勿以轮带步，唯愿步量途”。让我们用脚步来丈量这片共同热爱的家园</b>，见证山大123周年的辉煌时刻！<br>
							// 			<div style='text-align: right;'>山东大学体育委员会</div>`
							// 			}
							// 	}
							// );
							// console.log("popupMessageList", this.popupMessageList);

							if (this.popupMessageList.length > 0) {
								const messageValue = uni.getStorageSync(this.messageKey);
								// console.log("messageValue:", messageValue);
								if (!messageValue) {
									this.$refs.mypopupMessage.popupOpen();
									// uni.setStorageSync(this.messageKey, true);
								}
							}
						}
					},
					fail: (err) => {
						console.log("getUnReadMessageQuery 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);
							
							if (this.popupWarnList.length > 0) {
								this.$refs.mypopupWarn.popupOpen();
							}
						}
					},
					fail: (err) => {
						console.log("warnMessageQuery err", err)
					},
				});
			},
			onNoMoreRemindersClick() {
				this.$refs.mypopupMessage.popupClose();
				uni.setStorageSync(this.messageKey, true);
			},
			// 标记消息已读
			readMessage() {
				uni.request({
					url: apiReadMessage,
					header: {
						"Content-Type": "application/x-www-form-urlencoded",
						"token": this.token,
					},
					method: "POST",
					data: {
						"mqIdListStr": this.mqIdListStr
					},
					success: (res) => {
						// console.log("readMessage", res);
					},
					fail: (err) => {
						console.log("readMessage err", err);
					},
				});
			},
			btnBack() {
				// window.history.back();
				/* uni.navigateTo({
					url: "/pages/bm/style4/rankOverview?" + this.queryString
				}); */

				const url = `action://to_home/`;
				tools.appAction(url);
			},
			btnStartGame() {
				// uni.navigateTo({
				// 	url: "/pages/bm/style4/rankOverview?" + this.queryString
				// });
				if (this.isJoin) {	// 已报名
					const url = "/pages/bm/style4/rankOverview?" + this.queryString;
					tools.appAction(url, "uni.navigateTo");
				} else {	// 未报名
					const url = "/pages/bm/style4/signup?" + this.queryString;
					tools.appAction(url, "uni.navigateTo");
				}
			},
			btnInfo() {
				// console.log(this.$refs.mypopup);
				this.$refs.mypopup.popupOpen();
			},
			btnMessage() {
				// console.log(this.$refs.mypopup);
				this.$refs.mypopupMessage.popupOpen();
			},
			btnMyEgg() {
				// uni.navigateTo({
				// 	url: "/pages/achievement/index2?tabCurrent=2&" + this.queryString
				// });
				const url = "/pages/achievement/index2?tabCurrent=2&" + this.queryString;
				tools.appAction(url, "uni.navigateTo");
			},
			btnExchg() {
				this.$refs.mypopupExchg.popupOpen();
			},
			onTab1Click(val) {
				console.log("onTab1Click: ", val);
				this.tab1Current = val;
				this.initTab();
			},
			onTab2Click(val) {
				// console.log("onTab2Click: ", val);
				this.tab2Current = val;
			},
			onSelectChange(val) {
				// console.log("onSelectChange: ", val);
				this.ocaId = val.value;
				this.getCardRankDetailQuery();

				uni.setStorageSync(this.mapKey, this.ocaId);
			},
		}
	}
</script>

<style scoped>
	.content {
		width: 100vw;
		height: 100vh;
	}

	.top-default {
		width: 100%;
		height: 170px;
		padding-top: 36px;
		justify-content: space-between;
		background-image: url('static/backgroud/top_bg_sddx.png');
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
	}

	.topcontent {
		width: 90%;
		/* height: 90%; */
		/* margin-bottom: 20px; */
	}

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

	.tcview {
		width: 90%;
		/* height: 100px; */
	}

	.tcbox {
		width: 121px;
		height: 63px;
		opacity: 1;
		border-radius: 6px;
		background: #9A300E;
		border: 1px solid #D3A254;
	}

	.tcbox-label {
		font-size: 12px;
		font-weight: 500;
		line-height: 23px;
		color: #f3d809;
	}

	.tcbox-value {
		font-size: 16px;
		font-weight: 500;
		line-height: 26px;
		color: #f3d809;
	}
	
	.today {
		margin-top: 8px;
		color: #751f00;
		font-size: 16px;
		/* font-family: "黑体", sans-serif; */
		font-weight: 3700;
		position: relative;
		z-index: 0;
	}

	.today::after {
		content: attr(data-content);
		-webkit-text-stroke: 3px #DCA452;
		/* font-family: "黑体", sans-serif; */
		position: absolute;
		left: 0;
		top: 0;
		z-index: -1;
	}

	.tcbar {
		display: none;
		width: 92%;
		padding: 6px 12px;
		background: #9a300e;
		border-radius: 6px;
	}

	.tcbar-text {
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #f3d809;
		font-size: 13px;
	}

	.mcName {
		font-size: 40rpx;
		font-weight: 550;
	}

	.topbtm {
		width: 100%;
		margin-bottom: 5px;
		justify-content: space-around;
	}

	.topbtm-name {
		padding: 3px 12px;
		background-color: #9A300E;
		border: 1px solid #D3A254;
		border-radius: 6px;
		text-align: center;
		font-weight: 500;
		color: #ffffff;
		font-size: 14px;
	}

	.topbtm-egg {
		width: 60px;
		padding: 3px 12px;
		background-color: #9A300E;
		border: 1px solid #D3A254;
		border-radius: 6px;
		text-align: center;
		color: #ffffff;
		font-size: 14px;
	}

	.topbtm-null {
		width: 60px;
		padding: 3px 12px;
	}

	.cal {
		width: 46rpx;
		height: 46rpx;
		margin-right: 20rpx;
	}

	.main {
		width: 100%;
		/* height: 70vh; */
		flex-grow: 1;
		justify-content: space-around;
		/* justify-content: space-between; */
	}
	
	.main-bar {
		display: none;
		width: 100%;
		height: 21px;
		background-color: #d8e8c6;
		
		font-size: 10px;
		font-weight: 500;
		color: #3d6706;
	}

	/* /deep/ .tab-active {
		background-color: #a43a07 !important;
	} */

	.main-tab {
		width: 90%;
		margin-top: 20rpx;
	}

	.tab-view {
		width: 100%;
		/* height: 69vh; */
		flex-grow: 1;
	}

	.btnBack {
		width: 70%;
		height: 80rpx;
		margin-bottom: 20rpx;
		/* font-weight: bold; */
		color: white;
		font-size: 32rpx;
		line-height: 80rpx;
		border-radius: 27px;
		background-color: #2e85ec;
	}

	/* .swiper-item-button {
		background-color: #ff870e !important;
	}
	
	.uni-swiper-dot-active {
		background: #ff870e !important;
	} */
</style>