v1.5.9

card/common/api.js

@@ -5,7 +5,7 @@ export const apiServer = process.env.API_BASE_URL;
 
 export const token = '';
 // export const token = '96ba3c924394934f7d30fa869a94ce0d';
-// export const token = 'c50350b7be4c2a49221c29944de13443';
+// export const token = 'd4dd6b57a15b4abaccf6cb6adcd4fd44';
 
 // 卡片基本信息查询
 export const apiCardBaseQuery = apiServer + 'CardBaseQuery';

card/common/tools.js

@@ -183,15 +183,15 @@ var tools = {
 			return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
 		else if (style == 1) {
 			if (hours > 0)
-				return `${hours}h${minutes}′${remainingSeconds}″`;
+				return `${hours}h${minutes}′${remainingSeconds.toString().padStart(2, '0')}″`;
 			else
-				return `${minutes}′${remainingSeconds}″`;
+				return `${minutes}′${remainingSeconds.toString().padStart(2, '0')}″`;
 		}
 		else if (style == 2) {
 			if (hours > 0)
-				return `${hours*60+minutes}′${remainingSeconds}″`;
+				return `${hours*60+minutes}′${remainingSeconds.toString().padStart(2, '0')}″`;
 			else
-				return `${minutes}′${remainingSeconds}″`;
+				return `${minutes}′${remainingSeconds.toString().padStart(2, '0')}″`;
 		}
 	},
 
@@ -331,6 +331,8 @@ var tools = {
 			return Y + '-' + M + '-' + D;
 		} else if (i == 2) {
 			return Y + '年' + M + '月' + D + '日';
+		} else if (i == 3) {
+			return Y + '-' + M + '-' + D + ' ' + h + ':' + m;
 		}
 		return Y + '-' + M + '-' + D + ' ' + h + ':' + m + ':' + s;
 	},

card/components/my-pathList/my-pathList.vue

@@ -31,7 +31,7 @@
 	export default {
 		name: "my-pathList",
 		props: {
-			pathList: {},
+			pathList: {},	// type  1: 比赛路线  2: 导航到指定地点  3: 比赛路线 + 导航
 			mcState: 0, // 赛事/活动状态 0: 未开始  1: 进行中  2: 已结束
 			selectedPath: 0, // 用户已选择的路线(ocaId)
 			showLine: false, // 是否显示线条

card/components/my-popup/my-popup.vue

@@ -7,14 +7,14 @@
 				<swiper-item v-for="(item, index) in dataList" :key="index">
 					<!-- 标题 + 图片 + 活动时间 + 活动简介 -->
 					<view v-if="item.type == 1" class="swiper-item-view uni-column">
-						<text class="swiper-item-title">{{item.data.title}}</text>
+						<text class="swiper-item-title" v-html="item.data.title"></text>
 						<image mode="aspectFit" class="swiper-item-image" :src="item.data.img"></image>
 						<view class="swiper-item-time uni-row">
 							<image mode="aspectFit" class="clock" src="/static/default/clock.png"></image>
 							<text class="acttime">{{acttime}}</text>
 						</view>
 						<view class="swiper-item-content uni-column">
-							<text class="introduce-content">{{item.data.content}}</text>
+							<text class="introduce-content" v-html="item.data.content"></text>
 						</view>
 						<button v-if="index < dataList.length - 1" class="swiper-item-button" @click="swiperNext">继
 							续</button>
@@ -23,7 +23,7 @@
 
 					<!-- 标题 + 图片 -->
 					<view v-if="item.type == 2" class="swiper-item-view uni-column">
-						<text class="swiper-item-title">{{item.data.title}}</text>
+						<text class="swiper-item-title" v-html="item.data.title"></text>
 						<image mode="aspectFit" style="height: 474rpx; margin-bottom: 50rpx;" :src="item.data.img">
 						</image>
 						<button v-if="index < dataList.length - 1" class="swiper-item-button" @click="swiperNext">继
@@ -33,9 +33,9 @@
 
 					<!-- 标题 + 图片 + 活动简介 -->
 					<view v-if="item.type == 3" class="swiper-item-view swiper-item-view-bg uni-column">
-						<text class="swiper-item-title">{{item.data.title}}</text>
+						<text class="swiper-item-title" v-html="item.data.title"></text>
 						<image mode="aspectFit" style="height: 280rpx; margin-top: 50rpx;" :src="item.data.img"></image>
-						<text class="swiper-item-content2">{{item.data.content}}</text>
+						<text class="swiper-item-content2" v-html="item.data.content"></text>
 						<button v-if="index < dataList.length - 1" class="swiper-item-button" @click="swiperNext">继
 							续</button>
 						<button v-else class="swiper-item-button" @click="popupClose">确 定</button>
@@ -43,18 +43,28 @@
 
 					<!-- 标题 + 图片 + 二维码 -->
 					<view v-if="item.type == 4" class="swiper-item-view swiper-item-view-bg2 uni-jct uni-column">
-						<text class="swiper-item-title">{{item.data.title}}</text>
-						<image mode="aspectFit" style="height: 260rpx; margin-top: 10rpx;" :src="item.data.img"></image>
-						<text class="swiper-item-content3">{{item.data.content}}</text>
-						<uv-qrcode v-if="item.data.qrCode.length > 0" ref="qrcode" size="200rpx"
-							:value="item.data.qrCode">
-							<!-- <template v-slot:loading>
-								<text style="color: green;">loading...</text>
-							</template> -->
-						</uv-qrcode>
-						<view v-else class="uni-column uni-jcse" style="height: 200rpx;">
+						<text class="swiper-item-title" v-html="item.data.title"></text>
+						<image mode="aspectFit" style="height: 220rpx; margin-top: 10rpx;" :src="item.data.img"></image>
+						<text class="swiper-item-content3" v-html="item.data.content"></text>
+						<text class="swiper-item-content4">【{{item.data.sourceName}}】</text>
+						<template v-if="[1,3].includes(item.data.exState)">
+							<view v-if="item.data.expireTime > 0" class="swiper-item-content4">( 有效期至 {{fmtTime(item.data.expireTime, 3)}} 
+								<span v-if="item.data.exState == 3" style="color: #ffaa00;">已临期</span>
+							)</view>
+							<uv-qrcode ref="qrcode" size="200rpx"
+								:value="item.data.qrCode">
+								<!-- <template v-slot:loading>
+									<text style="color: green;">loading...</text>
+								</template> -->
+							</uv-qrcode>
+						</template>
+						<view v-if="item.data.exState == 2" class="uni-column uni-jcse" style="height: 200rpx;">
 							<text style="color: red;">已兑换</text>
-							<text style="font-size: 24rpx;">( 兑换时间 {{item.data.exTime}} )</text>
+							<text class="swiper-item-content4">( 兑换时间 {{fmtTime(item.data.exTime, 3)}} )</text>
+						</view>
+						<view v-if="item.data.exState == 4" class="uni-column uni-jcse" style="height: 200rpx;">
+							<text style="color: red;">已过期</text>
+							<text v-if="item.data.expireTime > 0" class="swiper-item-content4">( 过期时间 {{fmtTime(item.data.expireTime, 3)}} )</text>
 						</view>
 						<button v-if="index < dataList.length - 1" class="swiper-item-button" @click="swiperNext">继
 							续</button>
@@ -63,7 +73,7 @@
 					
 					<!-- 标题 + 图片(点击图片打开地图APP进行地点定位) -->
 					<view v-if="item.type == 5" class="swiper-item-view uni-column">
-						<text class="swiper-item-title">{{item.data.title}}</text>
+						<text class="swiper-item-title" v-html="item.data.title"></text>
 						<image mode="aspectFit" style="height: 474rpx; margin-bottom: 50rpx;" :src="item.data.img" @click="dealNavClick(item.data.point)">
 						</image>
 						<button v-if="index < dataList.length - 1" class="swiper-item-button" @click="swiperNext">继
@@ -71,6 +81,34 @@
 						<button v-else class="swiper-item-button" @click="popupClose">确 定</button>
 					</view>
 
+					<!-- 通知 -->
+					<view v-if="item.type == 6" class="swiper-item-view uni-column">
+						<text class="swiper-item-title" v-html="item.data.title"></text>
+						<!-- mqType 消息类型 2:卡片图片 3:卡片文字 -->
+						<image v-if="item.data.mqType == 2" mode="aspectFit" style="height: 474rpx; margin-bottom: 50rpx;" :src="item.data.message">
+						</image>
+						<text v-if="item.data.mqType == 3" class="swiper-item-message" v-html="item.data.message"></text>
+						<button v-if="index < dataList.length - 1" class="swiper-item-button" @click="swiperNext">继
+							续</button>
+						<button v-else class="swiper-item-button" @click="popupClose">确 定</button>
+					</view>
+					
+					<!-- 标题 + HTML内容 + 图片(可为空) -->
+					<view v-if="item.type == 7" class="swiper-item-view uni-column">
+						<text class="swiper-item-title" v-html="item.data.title"></text>
+						<view class="swiper-item-content5">
+							<text v-html="item.data.content"></text>
+							<view class="uni-row uni-jcse" style="margin-top: 20px;">
+								<image v-for="(item, index) in item.data.imageList" :key="index" mode="aspectFit"
+									:style="getImageStyle(item)" :src="item.src"></image>
+							</view>
+						</view>
+						
+						<button v-if="index < dataList.length - 1" class="swiper-item-button" @click="swiperNext">继
+							续</button>
+						<button v-else class="swiper-item-button" @click="popupClose">确 定</button>
+					</view>
+					
 				</swiper-item>
 			</swiper>
 		</view>
@@ -78,7 +116,7 @@
 </template>
 
 <script>
-	// import tools from '/common/tools';
+	import tools from '/common/tools';
 	// import {
 	// 	teamName
 	// } from '/common/define';
@@ -125,12 +163,22 @@
 				this.isOpen = false;
 				this.$emit('popup-close');
 			},
+			fmtTime(timestamp, type = 2) {
+				return tools.timestampToTime(timestamp * 1000, type);
+			},
 			dealNavClick(navPoint) {
 				const url =
 					`action://to_map_app?title=${navPoint.name}&latitude=${navPoint.latitude}&longitude=${navPoint.longitude}`;
-				window.location.href = url;
-				// tools.appAction(url);
-			}
+				// window.location.href = url;
+				tools.appAction(url);
+			},
+			getImageStyle(item) {
+				let styleStr = "";
+				const width = item.width ?? "180rpx";
+				const height = item.height ?? "180rpx";
+				styleStr = `width: ${width}; height: ${height};`;
+				return styleStr;
+			},
 			// getTeamName(teamType, teamIndex) {
 			// 	return teamName[teamType][teamIndex];
 			// },
@@ -163,6 +211,7 @@
 
 	.popup {
 		width: 90vw;
+		// height: 720rpx;
 		height: 920rpx;
 		background-color: #FEFBF6;
 		border-radius: 50rpx;
@@ -194,8 +243,8 @@
 		background-image: url("/static/backgroud/oval.png");
 		background-repeat: no-repeat;
 		background-position-x: center;
-		background-position-y: 316rpx;
-		background-size: 70%;
+		background-position-y: 276rpx;
+		background-size: 66%;
 	}
 
 	.swiper-item-title {
@@ -225,7 +274,7 @@
 		width: 80%;
 		/* height: 100rpx; */
 		margin-top: 30rpx;
-		margin-bottom: 80rpx;
+		margin-bottom: 60rpx;
 		justify-content: start;
 	}
 
@@ -246,19 +295,51 @@
 		text-align: center;
 	}
 
+	.swiper-item-content4 {
+		// width: 80%;
+		// margin-top: 10rpx;
+		text-align: center;
+		font-size: 24rpx;
+	}
+	
+	.swiper-item-content5 {
+		width: 80%;
+		margin-top: 30rpx;
+		margin-bottom: 20rpx;
+		flex-grow: 1;
+		font-size: 26rpx;
+		line-height: 46rpx;
+	}
+	
+	::v-deep li {
+		margin-bottom: 10rpx;
+	}
+	
+	.swiper-item-message {
+		width: 80%;
+		/* height: 100rpx; */
+		margin-top: 20rpx;
+		margin-bottom: 20rpx;
+		// justify-content: center;
+		text-align: left;
+		font-size: 28rpx;
+		// line-height: 80rpx;
+		flex-grow: 1;
+	}
+	
 	.swiper-item-button {
 		width: 80%;
-		height: 106rpx;
-		margin-bottom: 60rpx;
+		height: 76rpx;
+		margin-bottom: 50rpx;
 		color: #ffffff;
 		/* font-weight: bold; */
-		line-height: 106rpx;
+		line-height: 76rpx;
 		background-color: #2e85ec;
 		border-radius: 27px;
 	}
 
 	::v-deep .uni-swiper-dots-horizontal {
-		bottom: 200rpx;
+		bottom: 155rpx;
 	}
 	
 	// ::v-deep .uni-swiper-dot-active {

card/components/my-ranklist/my-ranklist.vue

@@ -203,8 +203,8 @@
 
 <style lang="scss" scoped>
 	.list {
-		width: 90%;
-		height: 53vh;
+		width: 95%;
+		height: 43vh;
 		flex-grow: 1;
 		overflow: scroll;
 		margin-top: 16rpx;
@@ -235,7 +235,7 @@
 		text-align: center;
 		margin-top: 6rpx;
 		padding-right: 0.5rpx;
-		margin-right: 20rpx;
+		margin-right: 10rpx;
 		font-size: 26rpx;
 		font-weight: bold;
 		line-height: 50rpx;
@@ -279,7 +279,11 @@
 	}
 
 	.item-userName {
+		max-width: 360rpx;
 		font-size: 30rpx;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
 	}
 
 	.item-inGame {

card/components/my-tab/my-tab.vue

@@ -90,7 +90,7 @@
 					styleStr += "background-position-y: 2%;";
 					styleStr += "background-size: 14px;";
 				}
-				console.log("getTextStyle: ", styleStr);
+				// console.log("getTextStyle: ", styleStr);
 				return styleStr;
 			},
 			getSelectStyle() {

card/components/my-topbar/my-topbar.vue

@@ -0,0 +1,92 @@
+<template>
+	<view class="topbar uni-row">
+		<view class="topbar-left-right uni-row uni-jct">
+			<uni-icons type="left" class="topbar-ico topbar-ico-back" @click="btnBack"></uni-icons>
+			<text v-if="showMessage" class="topbar-rule"></text>
+		</view>
+		<text class="mcName">{{mcName}}</text>
+		<view class="topbar-left-right uni-row uni-jce">
+			<uni-icons v-if="showMessage" type="notification-filled" class="topbar-ico topbar-ico-message" @click="btnMessage"></uni-icons>
+			<text class="topbar-rule" @click="btnInfo">规则</text>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name:"my-topbar",
+		props: {
+			mcName: {
+				type: String,
+				default: ""
+			},
+			showMessage: {
+				type: Boolean,
+				default: false
+				// default: true
+			}
+		},
+		emits: ['btnBackClick', 'btnInfoClick', 'btnMessageClick'],
+		data() {
+			return {
+			};
+		},
+		methods: {
+			btnBack() {
+				this.$emit('btnBackClick');
+			},
+			btnInfo() {
+				this.$emit('btnInfoClick');
+			},
+			btnMessage() {
+				this.$emit('btnMessageClick');
+			}
+		}
+	}
+</script>
+
+<style>
+
+	.topbar {
+		width: 92%;
+		/* padding-top: 2px; */
+		justify-content: space-between;
+	}
+
+	.topbar-color-default {
+		color: #5b9100;
+	}
+	
+	.topbar-left-right {
+		/* width: 128rpx; */
+		/* background-color: dimgray; */
+	}
+	
+	.topbar-ico {
		width: 43rpx;
		height: 43rpx;
+		/* padding: 0 10rpx; */
		color: inherit !important;
		font-size: 46rpx !important;
	}
+	
+	.topbar-ico-back {
+		padding-right: 10rpx;
+	}
+	
+	.topbar-ico-message {
+		padding-left: 10rpx;
+	}
+	
+	.topbar-rule {
+		/* width: 60rpx; */
+		padding: 0 10rpx;
+		font-size: 30rpx;
+		white-space: nowrap;
+	}
+	
+	.mcName {
+		/* padding: 0 10rpx; */
+		font-size: 36rpx;
+		font-weight: 550;
+		white-space: nowrap;
+		overflow: hidden;
+		/* text-overflow: ellipsis; */
+	}
+	
+</style>

card/manifest.json

@@ -2,8 +2,8 @@
     "name" : "card",
     "appid" : "__UNI__A61F96B",
     "description" : "",
-    "versionName" : "1.5.3",
-    "versionCode" : 153,
+    "versionName" : "1.5.9",
+    "versionCode" : 159,
     "transformPx" : false,
     /* 5+App特有相关 */
     "app-plus" : {

card/pages/achievement/index2.vue

@@ -66,12 +66,13 @@ https://oss-mbh5.colormaprun.com/card/#/pages/achievement/index2
 						<view class="norecord2" v-if="item.aiRs == null || item.aiRs.length == 0">暂无记录</view>
 						<view class="list uni-row" v-else>
 							<view class="item uni-column"
-								:class="item2.exState==1 ? 'item-convertible' : 'item-converted'"
+								:class="getConvertClass(item2.exState)"
 								v-for="(item2, index2) in item.aiRs" :key="index2" @click="showAchDetail(item2)">
 								<view class="item-medal" :style="getMedalStyle(item2.iconUrl)"></view>
 								<view class="item-title uni-column">
-									<view class="item-title-ainame">{{item2.aiName}}</view>
-									<view class="item-title-aitime">{{fmtTime(item2.aiTime)}}</view>
+									<view class="item-title-ainame" style="margin-top: 3rpx;">{{item2.aiName}}</view>
+									<view class="item-title-ainame2">{{item2.sourceName}}</view>
+									<view class="item-title-aitime2">{{fmtTime(item2.aiTime)}}</view>
 								</view>
 							</view>
 						</view>
@@ -185,6 +186,20 @@ https://oss-mbh5.colormaprun.com/card/#/pages/achievement/index2
 			getMedalStyle(bgurl) {
 				return `background-image: url("${bgurl}")`;
 			},
+			// exState: 1 可兑 2 已兑 3 临期 4 过期
+			getConvertClass(exState) {
+				let cls = '';
+				if (exState == 1) {
+					cls = 'item-convertible';
+				} else if (exState == 2) {
+					cls = 'item-converted';
+				} else if (exState == 3) {
+					cls = 'item-nearExpiration';
+				} else if (exState == 4) {
+					cls = 'item-expired';
+				}
+				return cls;
+			},
 			fmtTime(timestamp, type = 2) {
 				return tools.timestampToTime(timestamp * 1000, type);
 			},
@@ -255,7 +270,7 @@ https://oss-mbh5.colormaprun.com/card/#/pages/achievement/index2
 					method: "POST",
 					data: {},
 					success: (res) => {
-						// console.log("getExchangeListQuery", res);
+						console.log("getExchangeListQuery", res);
 
 						if (checkResCode(res)) {
 							if (res.statusCode == 401) { // 未登录
@@ -285,16 +300,21 @@ https://oss-mbh5.colormaprun.com/card/#/pages/achievement/index2
 						oarId: oarId
 					},
 					success: (res) => {
-						// console.log("exchangeDetailQuery", res);
+						console.log("exchangeDetailQuery", res);
 						if (checkResCode(res)) {
 							const data = res.data.data;
 
 							// 弹窗已获取数据且可兑换状态时，不再更新弹窗数据
-							if (this.popupAchdet.length > 0 && this.popupAchdet[0].qrCode != "" && data
-								.qrCode != "") {
+							if (this.popupAchdet.length > 0 && this.popupAchdet[0].data.exState == 1 && data
+								.exState == 1) {
 								return;
 							}
-
+							// 弹窗已获取数据且临期状态时，不再更新弹窗数据
+							if (this.popupAchdet.length > 0 && this.popupAchdet[0].data.exState == 3 && data
+								.exState == 3) {
+								return;
+							}
+							
 							this.popupAchdet = [{
 								"type": 4,
 								"data": {
@@ -302,11 +322,14 @@ https://oss-mbh5.colormaprun.com/card/#/pages/achievement/index2
 									"img": data.iconUrl,
 									"content": data.aiName,
 									"qrCode": data.qrCode,
-									"exTime": this.fmtTime(data.exTime, 0)
+									"exState": data.exState,
+									"exTime": data.exTime,
+									"expireTime": data.expireTime,
+									"sourceName": data.sourceName,
 								},
 							}];
 
-							if (data.qrCode == "") { // 已兑换
+							if (data.exState == 2 || data.exState == 4) { // 已兑换 or 已过期
 								clearInterval(this.interval);
 								this.interval = null;
 							}
@@ -332,7 +355,9 @@ https://oss-mbh5.colormaprun.com/card/#/pages/achievement/index2
 						"token": this.token,
 					},
 					method: "POST",
-					data: {},
+					data: {
+						relationType: 1,	// 类型 1 成就 2 卡片
+					},
 					success: (res) => {
 						// console.log("getUnReadMessageQuery", res);
 
@@ -344,15 +369,14 @@ https://oss-mbh5.colormaprun.com/card/#/pages/achievement/index2
 							}
 
 							this.unReadMessageRs = res.data.data;
+							this.popupDataList.length = 0;
 							this.mqIdListStr = "";
 							for (var i = 0; i < this.unReadMessageRs.length; i++) {
 								let popupData = {
 									type: 3,
 									data: {}
 								};
-								if (this.unReadMessageRs[i].mqType == 1) { // 消息类型  1: 成就
-									popupData.data.title = "恭喜";
-								}
+								popupData.data.title = "恭喜";
 								popupData.data.img = this.unReadMessageRs[i].iconUrl;
 								popupData.data.content = "恭喜获得成就 \r\n" + this.unReadMessageRs[i].aiName;
 								this.popupDataList.push(popupData);
@@ -599,6 +623,25 @@ https://oss-mbh5.colormaprun.com/card/#/pages/achievement/index2
 		font-size: 11px;
 	}
 
+	.item-title-ainame2 {
+		width: 196rpx;
+		margin-top: 3rpx;
+		font-weight: 500;
+		color: #818181;
+		font-size: 11px;
+		text-align: center;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.item-title-aitime2 {
+		margin-top: 0rpx;
+		margin-bottom: 20rpx;
+		color: #818181;
+		font-size: 11px;
+	}
+	
 	.item-convertible {
 		background: url("/static/medal/convertible.png") #e7ecef no-repeat;
 		background-size: 30%;
@@ -610,4 +653,16 @@ https://oss-mbh5.colormaprun.com/card/#/pages/achievement/index2
 		background-size: 30%;
 		border-radius: 5px;
 	}
+	
+	.item-nearExpiration {
+		background: url("/static/medal/nearExpiration.png") #e7ecef no-repeat;
+		background-size: 30%;
+		border-radius: 5px;
+	}
+	
+	.item-expired {
+		background: url("/static/medal/expired.png") #e7ecef no-repeat;
+		background-size: 30%;
+		border-radius: 5px;
+	}
 </style>

card/pages/bm/style1/rankList.vue

@@ -7,12 +7,8 @@ https://oss-mbh5.colormaprun.com/card/#/pages/bm/style1/rankList
 	<view class="body">
 		<view class="content uni-column">
 			<view class="uni-column" :class="cssTop">
-				<view class="topbar uni-row">
-					<image mode="aspectFit" class="topbar-back" @click="btnBack" src="/static/default/back.png"></image>
-					<text class="mcName">{{mcName}}</text>
-					<text class="topbar-rule" @click="btnInfo" >规则</text>
-					<!-- <image mode="aspectFit" class="topbar-info" @click="btnInfo" src="/static/default/info.png"></image> -->
-				</view>
+				<my-topbar :mcName="mcName" class="topbar-color" :showMessage="popupMessageList.length > 0"
+					@btnBackClick="btnBack" @btnInfoClick="btnInfo" @btnMessageClick="btnMessage"></my-topbar>
 
 				<view class="topcontent uni-column">
 					<view>
@@ -60,6 +56,7 @@ https://oss-mbh5.colormaprun.com/card/#/pages/bm/style1/rankList
 			</view>
 			
 			<my-popup ref="mypopup" :dataList="popupDataList" :acttime="acttime"></my-popup>
+			<my-popup ref="mypopupMessage" :dataList="popupMessageList"></my-popup>
 			
 		</view>
 	</view>
@@ -75,6 +72,8 @@ https://oss-mbh5.colormaprun.com/card/#/pages/bm/style1/rankList
 		apiCardConfigQuery,
 		apiUserCurrentRankNumQuery,
 		apiIsAllowMcSignUp,
+		apiUnReadMessageQuery,
+		apiReadMessage,
 		checkResCode
 	} from '/common/api';
 	
@@ -84,6 +83,7 @@ https://oss-mbh5.colormaprun.com/card/#/pages/bm/style1/rankList
 				pageName: "rankList",
 				firstEnterKey: 'firstEnter-bm',
 				rankKey: "rank-bm-style1",
+				messageKey: "message-bm-style1",
 				queryObj: {},
 				queryString: "",
 				token: "",
@@ -118,6 +118,8 @@ https://oss-mbh5.colormaprun.com/card/#/pages/bm/style1/rankList
 				
 				cssTop: "",
 				popupDataList: [],
+				popupMessageList: [],
+				// mqIdListStr: "", // 已读消息id列表 逗号分隔
 			}
 		},
 		computed: {},
@@ -135,6 +137,9 @@ https://oss-mbh5.colormaprun.com/card/#/pages/bm/style1/rankList
 			this.rankKey += "-" + this.ecId;
 			console.log("rankKey:", this.rankKey);
 			
+			this.messageKey += "-" + this.ecId;
+			console.log("messageKey:", this.messageKey);
+			
 			tools.removeCssCode();
 			
 			this.getCardConfigQuery();
@@ -345,6 +350,7 @@ https://oss-mbh5.colormaprun.com/card/#/pages/bm/style1/rankList
 						}; */
 						
 						this.loadConfig(config);
+						this.getUnReadMessageQuery();
 						this.getCardDetailQuery();
 						
 						setTimeout(this.dealFirstEnter, 500);
@@ -468,6 +474,77 @@ https://oss-mbh5.colormaprun.com/card/#/pages/bm/style1/rankList
 					},
 				});
 			},
+			// 未读消息列表查询
+			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 += ",";
+								// }
+							}
+			
+							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);
+					},
+				});
+			},
+			// 标记消息已读
+			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();
 				const url = `action://to_home/`;
@@ -490,6 +567,10 @@ https://oss-mbh5.colormaprun.com/card/#/pages/bm/style1/rankList
 				// console.log(this.$refs.mypopup);
 				this.$refs.mypopup.popupOpen();
 			},
+			btnMessage() {
+				// console.log(this.$refs.mypopup);
+				this.$refs.mypopupMessage.popupOpen();
+			},
 			onClickTabItem(e) {
 				if (this.tabCurrent != e.currentIndex) {
 					this.tabCurrent = e.currentIndex;
@@ -520,31 +601,8 @@ https://oss-mbh5.colormaprun.com/card/#/pages/bm/style1/rankList
 		background-size: auto 27vh, auto 22vh , cover;
 	}
 	
-	.topbar {
-		width: 90%;
-		justify-content: space-between;
-	}
-
-	.topbar-back {
-		width: 43rpx;
-		height: 43rpx;
-		/* opacity: 0; */
-	}
-
-	.topbar-info {
-		width: 46rpx;
-		height: 46rpx;
-	}
-
-	.topbar-rule {
-		color: white;
-		font-size: 32rpx;
-	}
-	
-	.mcName {
+	.topbar-color {
 		color: white;
-		font-size: 39rpx;
-		font-weight: bold;
 	}
 	
 	.topcontent {

card/pages/bm/style1/signup.vue

@@ -7,12 +7,8 @@ https://oss-mbh5.colormaprun.com/card/#/pages/bm/style1/signup
 	<view class="body">
 		<view class="content uni-column">
 			<view class="uni-column" :class="cssTop">
-				<view class="topbar uni-row">
-					<image mode="aspectFit" class="topbar-back" @click="btnBack" src="/static/default/back.png"></image>
-					<text class="mcName">{{mcName}}</text>
-					<text class="topbar-rule" @click="btnInfo">规则</text>
-					<!-- <image mode="aspectFit" class="topbar-info" @click="btnInfo" src="/static/default/info.png"></image> -->
-				</view>
+				<my-topbar :mcName="mcName" class="topbar-color"
+					@btnBackClick="btnBack" @btnInfoClick="btnInfo"></my-topbar>
 				<view :class="cssLogo"></view>
 				<view class="toptime uni-row">
 					<image mode="aspectFit" class="clock" src="/static/default/clock.png"></image>
@@ -29,7 +25,7 @@ https://oss-mbh5.colormaprun.com/card/#/pages/bm/style1/signup
 					:localdata="teamList"></uni-data-select>
 				<view class="introduce uni-column">
 					<text class="introduce-title">{{introduce.title}}</text>
-					<text class="introduce-content">{{introduce.content}}</text>
+					<text class="introduce-content" v-html="introduce.content"></text>					
 				</view>
 				<button class="btnSignup btnSignup-enable" v-if="mcState<=1" @click="btnSignup">报 名</button>
 				<button class="btnSignup btnSignup-disable" v-if="mcState==2">活动已结束</button>
@@ -583,34 +579,10 @@ https://oss-mbh5.colormaprun.com/card/#/pages/bm/style1/signup
 		background-size: contain;
 	}
 
-	.topbar {
-		width: 90%;
-		padding: 0rpx 30rpx;
-		justify-content: space-between;
-	}
-
-	.topbar-back {
-		width: 43rpx;
-		height: 43rpx;
-		/* opacity: 0; */
-	}
-
-	.topbar-info {
-		width: 46rpx;
-		height: 46rpx;
-	}
-
-	.topbar-rule {
+	.topbar-color {
 		color: white;
-		font-size: 32rpx;
 	}
-
-	.mcName {
-		color: white;
-		font-size: 40rpx;
-		font-weight: 550;
-	}
-
+	
 	.toptime {
 		/* width: 90%; */
 		height: 65rpx;
@@ -660,7 +632,7 @@ https://oss-mbh5.colormaprun.com/card/#/pages/bm/style1/signup
 	.introduce-content {
 		color: #333333;
 		font-size: 25rpx;
-		line-height: 36rpx;
+		line-height: 46rpx;
 	}
 
 	.btnSignup {

card/pages/bm/style2/cardconfig.md

@@ -51,16 +51,16 @@
 			}
 		},
 		{
-			type: 2,
-			data: {
-				title: "规则",
-				img: "/static/common/guize.png",
+			"type": 2,
+			"data": {
+				"title": "规则",
+				"img": "/static/common/guize.png"
 			}
 		}, {
-			type: 2,
-			data: {
-				title: "奖励",
-				img: "/static/common/jiangli.png",
+			"type": 2,
+			"data": {
+				"title": "奖励",
+				"img": "/static/common/jiangli.png"
 			}
 		},
 		"default"
@@ -88,7 +88,7 @@
 	",
 	"pathList": {
 		"row1": [{
-				"type": 2, // 1: 比赛路线  2: 导航到指定地点
+				"type": 2,
 				"img": "/static/common/dhdqdwz.png",
 				"point": {
 					"longitude": 117.022194,
@@ -97,28 +97,28 @@
 				}
 			},
 			{
-				"type": 1, // 1: 比赛路线  2: 导航到指定地点
+				"type": 1,
 				"img": "/static/common/cjlx12dw.png",
 				"path": {
 					"ocaId": 1,
-					"mcType": 3 // 赛事类型 1 普通活动 2 线下赛 3 线上赛
+					"mcType": 3
 				}
 			}
 		],
 		"row2": [{
-				"type": 1, // 1: 比赛路线  2: 导航到指定地点
+				"type": 1,
 				"img": "/static/common/zjlx16dw.png",
 				"path": {
 					"ocaId": 2,
-					"mcType": 3 // 赛事类型 1 普通活动 2 线下赛 3 线上赛
+					"mcType": 3
 				}
 			},
 			{
-				"type": 1, // 1: 比赛路线  2: 导航到指定地点
+				"type": 1,
 				"img": "/static/common/gjlx20dw.png",
 				"path": {
 					"ocaId": 3,
-					"mcType": 3 // 赛事类型 1 普通活动 2 线下赛 3 线上赛
+					"mcType": 3
 				}
 			}
 		]
@@ -132,17 +132,17 @@
 			}
 		},
 		{
-			type: 2,
-			data: {
-				title: "规则",
-				img: "/static/common/guize.png",
+			"type": 2,
+			"data": {
+				"title": "规则",
+				"img": "/static/common/guize.png"
 			}
 		},
 		{
-			type: 2,
-			data: {
-				title: "奖励",
-				img: "/static/common/jiangli.png",
+			"type": 2,
+			"data": {
+				"title": "奖励",
+				"img": "/static/common/jiangli.png"
 			}
 		},
 		"default"
@@ -170,17 +170,17 @@
 			}
 		},
 		{
-			type: 2,
-			data: {
-				title: "规则",
-				img: "/static/common/guize.png",
+			"type": 2,
+			"data": {
+				"title": "规则",
+				"img": "/static/common/guize.png"
 			}
 		},
 		{
-			type: 2,
-			data: {
-				title: "奖励",
-				img: "/static/common/jiangli.png",
+			"type": 2,
+			"data": {
+				"title": "奖励",
+				"img": "/static/common/jiangli.png"
 			}
 		},
 		"default"

card/pages/bm/style2/index.vue

@@ -244,18 +244,15 @@ https://oss-mbh5.colormaprun.com/card/#/pages/bm/style2/index
 								background: url('static/cardbg/xfl3.jpg');
 								background-size: cover;
 							}
-							
 							.logo{
 								width: 40vw;
 								height: 40vw;
 								background: url('static/logo/xfl.png') no-repeat center;
 								background-size: contain;
 							}
-							
 							.mod-text {
 								color: #FF6203 !important;
 							}
-							
 							.mod-button {
 								color: #ffffff !important;
 								background-color: #FF6203 !important;

card/pages/bm/style2/rankList.vue

@@ -7,12 +7,8 @@ https://oss-mbh5.colormaprun.com/card/#/pages/bm/style2/rankList
 	<view class="body">
 		<view class="content uni-column">
 			<view class="uni-column" :class="cssTop">
-				<view class="topbar uni-row" :class="cssTopbarColor">
-					<uni-icons type="left" class="topbar-back" @click="btnBack"></uni-icons>
-					<text class="mcName">{{mcName}}</text>
-					<text class="topbar-rule" @click="btnInfo">规则</text>
-					<!-- <image mode="aspectFit" class="topbar-info" @click="btnInfo" src="/static/default/info.png"></image> -->
-				</view>
+				<my-topbar :mcName="mcName" :class="cssTopbarColor" :showMessage="popupMessageList.length > 0"
+					@btnBackClick="btnBack" @btnInfoClick="btnInfo" @btnMessageClick="btnMessage"></my-topbar>
 				
 				<view class="topbtm uni-column">
 					<text class="topbtm-name">姓名：{{nickName}}</text>
@@ -40,6 +36,7 @@ https://oss-mbh5.colormaprun.com/card/#/pages/bm/style2/rankList
 			</view>
 			
 			<my-popup ref="mypopup" :dataList="popupDataList" :acttime="acttime"></my-popup>
+			<my-popup ref="mypopupMessage" :dataList="popupMessageList"></my-popup>
 			
 		</view>
 	</view>
@@ -55,6 +52,8 @@ https://oss-mbh5.colormaprun.com/card/#/pages/bm/style2/rankList
 		apiCardConfigQuery,
 		apiUserCurrentRankNumQuery,
 		apiIsAllowMcSignUp,
+		apiUnReadMessageQuery,
+		apiReadMessage,
 		checkResCode
 	} from '/common/api';
 	
@@ -64,6 +63,7 @@ https://oss-mbh5.colormaprun.com/card/#/pages/bm/style2/rankList
 				pageName: "rankList",
 				firstEnterKey: 'firstEnter-bm-style2',
 				rankKey: "rank-bm-style2",
+				messageKey: "message-bm-style2",
 				queryObj: {},
 				queryString: "",
 				token: "",
@@ -102,13 +102,15 @@ https://oss-mbh5.colormaprun.com/card/#/pages/bm/style2/rankList
 				
 				teamType: 0, // 队伍类型
 				dispArrStr: "totalDistance,totalCp,totalSysPoint,fastPace", // 要显示的集合范围
-				tabItems: ["总距离", "打点数", "百味豆", "配速"],
+				tabItems: ["里程", "打点数", "百味豆", "配速"],
 				tabCurrent: 0,
 				tabActiveColor: "#81cd00",
 				
 				cssTop: "",
 				cssTopbarColor: "",
 				popupDataList: [],
+				popupMessageList: [],
+				// mqIdListStr: "", // 已读消息id列表 逗号分隔
 			}
 		},
 		computed: {},
@@ -127,6 +129,9 @@ https://oss-mbh5.colormaprun.com/card/#/pages/bm/style2/rankList
 			this.rankKey += "-" + this.ecId;
 			console.log("rankKey:", this.rankKey);
 			
+			this.messageKey += "-" + this.ecId;
+			console.log("messageKey:", this.messageKey);
+			
 			tools.removeCssCode();
 			
 			this.getCardConfigQuery();
@@ -341,6 +346,7 @@ https://oss-mbh5.colormaprun.com/card/#/pages/bm/style2/rankList
 						}; */
 						
 						this.loadConfig(config);
+						this.getUnReadMessageQuery();
 						this.matchRsDetailQuery();
 						
 						setTimeout(this.dealFirstEnter, 500);
@@ -511,6 +517,77 @@ https://oss-mbh5.colormaprun.com/card/#/pages/bm/style2/rankList
 					},
 				});
 			},
+			// 未读消息列表查询
+			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 += ",";
+								// }
+							}
+			
+							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);
+					},
+				});
+			},
+			// 标记消息已读
+			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({
@@ -531,6 +608,10 @@ https://oss-mbh5.colormaprun.com/card/#/pages/bm/style2/rankList
 				// console.log(this.$refs.mypopup);
 				this.$refs.mypopup.popupOpen();
 			},
+			btnMessage() {
+				// console.log(this.$refs.mypopup);
+				this.$refs.mypopupMessage.popupOpen();
+			},
 			onClickTabItem(e) {
 				if (this.tabCurrent != e.currentIndex) {
 					this.tabCurrent = e.currentIndex;
@@ -557,37 +638,10 @@ https://oss-mbh5.colormaprun.com/card/#/pages/bm/style2/rankList
 		background-size: cover;
 	}
 	
-	.topbar {
-		width: 90%;
-		justify-content: space-between;
-	}
-
 	.topbar-color-default {
 		color: #5b9100;
 	}
-	
-	.topbar-back {
-		width: 43rpx;
-		height: 43rpx;
-		color: inherit !important;
-		font-size: 48rpx !important;
-		/* opacity: 0; */
-	}
-	
-	.topbar-info {
-		width: 46rpx;
-		height: 46rpx;
-	}
-	
-	.topbar-rule {
-		font-size: 32rpx;
-	}
-	
-	.mcName {
-		font-size: 40rpx;
-		font-weight: 550;
-	}
-	
+		
 	.topbtm {
 		width: 100%;
 		margin-bottom: 5px;

card/pages/bm/style2/rankOverview.vue

@@ -7,12 +7,8 @@ https://oss-mbh5.colormaprun.com/card/#/pages/bm/style2/rankOverview
 	<view class="body">
 		<view class="content">
 			<view class="uni-column" :class="cssTop">
-				<view class="topbar uni-row" :class="cssTopbarColor">
-					<uni-icons type="left" class="topbar-back" @click="btnBack"></uni-icons>
-					<text class="mcName" @click="playMusic">{{mcName}}</text>
-					<text class="topbar-rule" @click="btnInfo">规则</text>
-					<!-- <image mode="aspectFit" class="topbar-info" @click="btnInfo" src="/static/default/info.png"></image> -->
-				</view>
+				<my-topbar :mcName="mcName" :class="cssTopbarColor"
+					@btnBackClick="btnBack" @btnInfoClick="btnInfo"></my-topbar>
 
 				<view class="topbtm uni-column">
 					<text class="topbtm-name">姓名：{{nickName}}</text>
@@ -87,7 +83,7 @@ https://oss-mbh5.colormaprun.com/card/#/pages/bm/style2/rankOverview
 
 				ecId: 0, // 卡片id
 				mcId: 0, // 赛事id
-				mcType: 0, // 赛事类型 1 普通活动 2 线下赛 3 线上赛
+				mcType: 0,
 				mcName: "", // 赛事名称
 				acttime: "", // 活动时间
 				beginSecond: null, // 活动或赛事开始时间戳，单位秒
@@ -363,7 +359,7 @@ https://oss-mbh5.colormaprun.com/card/#/pages/bm/style2/rankOverview
 							`,
 							"pathList": {
 								"row1": [{
-										"type": 2, // 1: 比赛路线  2: 导航到指定地点
+										"type": 2,
 										"img": "/static/common/dhdqdwz.png",
 										"point": {
 											"longitude": 117.022194,
@@ -372,28 +368,28 @@ https://oss-mbh5.colormaprun.com/card/#/pages/bm/style2/rankOverview
 										}
 									},
 									{
-										"type": 1, // 1: 比赛路线  2: 导航到指定地点
+										"type": 1,
 										"img": "/static/common/cjlx12dw.png",
 										"path": {
 											"ocaId": 1,
-											"mcType": 3 // 赛事类型 1 普通活动 2 线下赛 3 线上赛
+											"mcType": 3
 										}
 									}
 								],
 								"row2": [{
-										"type": 1, // 1: 比赛路线  2: 导航到指定地点
+										"type": 1,
 										"img": "/static/common/zjlx16dw.png",
 										"path": {
 											"ocaId": 2,
-											"mcType": 3 // 赛事类型 1 普通活动 2 线下赛 3 线上赛
+											"mcType": 3
 										}
 									},
 									{
-										"type": 1, // 1: 比赛路线  2: 导航到指定地点
+										"type": 1,
 										"img": "/static/common/gjlx20dw.png",
 										"path": {
 											"ocaId": 3,
-											"mcType": 3 // 赛事类型 1 普通活动 2 线下赛 3 线上赛
+											"mcType": 3
 										}
 									}
 								]
@@ -411,16 +407,16 @@ https://oss-mbh5.colormaprun.com/card/#/pages/bm/style2/rankOverview
 									}
 								},
 								{
-									type: 2,
-									data: {
-										title: "规则",
-										img: "/static/common/guize.png",
+									"type": 2,
+									"data": {
+										"title": "规则",
+										"img": "/static/common/guize.png"
 									}
 								}, {
-									type: 2,
-									data: {
-										title: "奖励",
-										img: "/static/common/jiangli.png",
+									"type": 2,
+									"data": {
+										"title": "奖励",
+										"img": "/static/common/jiangli.png"
 									}
 								},
 								"default"
@@ -556,37 +552,10 @@ https://oss-mbh5.colormaprun.com/card/#/pages/bm/style2/rankOverview
 		pointer-events: auto;
 	}
 
-	.topbar {
-		width: 90%;
-		justify-content: space-between;
-	}
-
 	.topbar-color-default {
 		color: #5b9100;
 	}
 
-	.topbar-back {
-		width: 43rpx;
-		height: 43rpx;
-		color: inherit !important;
-		font-size: 48rpx !important;
-		/* opacity: 0; */
-	}
-
-	.topbar-info {
-		width: 46rpx;
-		height: 46rpx;
-	}
-
-	.topbar-rule {
-		font-size: 32rpx;
-	}
-
-	.mcName {
-		font-size: 40rpx;
-		font-weight: 550;
-	}
-
 	.topbtm {
 		width: 100%;
 		/* height: 60rpx; */

card/pages/bm/style2/signup.vue

@@ -7,11 +7,8 @@ https://oss-mbh5.colormaprun.com/card/#/pages/bm/style2/signup
 	<view class="body">
 		<view class="content uni-column">
 			<view class="uni-column" :class="cssTop">
-				<view class="topbar uni-row" :class="cssTopbarColor">
-					<uni-icons type="left" class="topbar-back" @click="btnBack"></uni-icons>
-					<text class="mcName">{{mcName}}</text>
-					<text class="topbar-rule" @click="btnInfo">规则</text>
-				</view>
+				<my-topbar :mcName="mcName" :class="cssTopbarColor"
+					@btnBackClick="btnBack" @btnInfoClick="btnInfo"></my-topbar>
 			</view>
 			<view class="main uni-column">
 				<view class="timebar uni-row">
@@ -23,7 +20,7 @@ https://oss-mbh5.colormaprun.com/card/#/pages/bm/style2/signup
 
 				<view class="introduce uni-column">
 					<text class="introduce-title">{{introduce.title}}</text>
-					<text class="introduce-content">{{introduce.content}}</text>
+					<text class="introduce-content" v-html="introduce.content"></text>
 				</view>
 				<button class="btnSignup btnSignup-enable" v-if="mcState<=1" @click="btnSignup">报 名</button>
 				<button class="btnSignup btnSignup-disable" v-if="mcState==2">活动已结束</button>
@@ -545,32 +542,10 @@ https://oss-mbh5.colormaprun.com/card/#/pages/bm/style2/signup
 		background-size: cover;
 	}
 
-	.topbar {
-		width: 90%;
-		justify-content: space-between;
-	}
-
 	.topbar-color-default {
 		color: #5b9100;
 	}
 
-	.topbar-back {
-		width: 43rpx;
-		height: 43rpx;
-		color: inherit !important;
-		font-size: 48rpx !important;
-		/* opacity: 0; */
-	}
-
-	.topbar-rule {
-		font-size: 32rpx;
-	}
-
-	.mcName {
-		font-size: 40rpx;
-		font-weight: 550;
-	}
-
 	.main {
 		width: 76%;
 		min-height: 800rpx;
@@ -633,7 +608,7 @@ https://oss-mbh5.colormaprun.com/card/#/pages/bm/style2/signup
 	.introduce-content {
 		color: #333333;
 		font-size: 25rpx;
-		line-height: 36rpx;
+		line-height: 46rpx;
 	}
 
 	.btnSignup {

card/pages/bm/style3/cardconfig.md

@@ -54,16 +54,17 @@
 			}
 		},
 		{
-			type: 2,
-			data: {
-				title: "规则",
-				img: "/static/common/guize.png",
+			"type": 2,
+			"data": {
+				"title": "规则",
+				"img": "/static/common/guize.png"
 			}
-		}, {
-			type: 2,
-			data: {
-				title: "奖励",
-				img: "/static/common/jiangli.png",
+		},
+		{
+			"type": 2,
+			"data": {
+				"title": "奖励",
+				"img": "/static/common/jiangli.png"
 			}
 		},
 		"default"
@@ -91,11 +92,11 @@
 	",
 	"pathList": {
 		"row1": [{
-				"type": 3, // 1: 比赛路线  2: 导航到指定地点  3: 比赛路线 + 导航
+				"type": 3,
 				"pathImg": "/static/common/lingxiucheng.png",
 				"path": {
 					"ocaId": 1,
-					"mcType": 3 // 赛事类型 1 普通活动 2 线下赛 3 线上赛
+					"mcType": 3
 				},
 				"navImg": "/static/common/nav.png",
 				"point": {
@@ -105,11 +106,11 @@
 				}
 			},
 			{
-				"type": 3, // 1: 比赛路线  2: 导航到指定地点  3: 比赛路线 + 导航
+				"type": 3,
 				"pathImg": "/static/common/quanchenggongyuan.png",
 				"path": {
 					"ocaId": 1,
-					"mcType": 3 // 赛事类型 1 普通活动 2 线下赛 3 线上赛
+					"mcType": 3
 				},
 				"navImg": "/static/common/nav.png",
 				"point": {
@@ -120,11 +121,11 @@
 			}
 		],
 		"row2": [{
-				"type": 3, // 1: 比赛路线  2: 导航到指定地点  3: 比赛路线 + 导航
+				"type": 3,
 				"pathImg": "/static/common/baihuagongyuan.png",
 				"path": {
 					"ocaId": 1,
-					"mcType": 3 // 赛事类型 1 普通活动 2 线下赛 3 线上赛
+					"mcType": 3
 				},
 				"navImg": "/static/common/nav.png",
 				"point": {
@@ -134,11 +135,11 @@
 				}
 			},
 			{
-				"type": 3, // 1: 比赛路线  2: 导航到指定地点  3: 比赛路线 + 导航
+				"type": 3,
 				"pathImg": "/static/common/aotizhongxin.png",
 				"path": {
 					"ocaId": 1,
-					"mcType": 3 // 赛事类型 1 普通活动 2 线下赛 3 线上赛
+					"mcType": 3
 				},
 				"navImg": "/static/common/nav.png",
 				"point": {
@@ -149,11 +150,11 @@
 			}
 		],
 		"row3": [{
-			"type": 3, // 1: 比赛路线  2: 导航到指定地点  3: 比赛路线 + 导航
+			"type": 3,
 			"pathImg": "/static/common/muniushan.png",
 			"path": {
 				"ocaId": 1,
-				"mcType": 3 // 赛事类型 1 普通活动 2 线下赛 3 线上赛
+				"mcType": 3
 			},
 			"navImg": "/static/common/nav.png",
 			"point": {
@@ -176,17 +177,17 @@
 			}
 		},
 		{
-			type: 2,
-			data: {
-				title: "规则",
-				img: "/static/common/guize.png",
+			"type": 2,
+			"data": {
+				"title": "规则",
+				"img": "/static/common/guize.png"
 			}
 		},
 		{
-			type: 2,
-			data: {
+			"type": 2,
+			"data": {
 				title: "奖励",
-				img: "/static/common/jiangli.png",
+				img: "/static/common/jiangli.png"
 			}
 		},
 		"default"
@@ -239,17 +240,17 @@
 			}
 		},
 		{
-			type: 2,
-			data: {
+			"type": 2,
+			"data": {
 				title: "规则",
-				img: "/static/common/guize.png",
+				img: "/static/common/guize.png"
 			}
 		},
 		{
-			type: 2,
-			data: {
-				title: "奖励",
-				img: "/static/common/jiangli.png",
+			"type": 2,
+			"data": {
+				"title": "奖励",
+				"img": "/static/common/jiangli.png"
 			}
 		},
 		"default"
@@ -268,3 +269,409 @@
 		}
 	]
 }
+
+
+[领秀城]
+
+index卡片URL参数：type=欢度国庆节&btnText=我要比赛
+
+"index": {
+	"css": "
+		.content-bg{
+			background: url('static/cardbg/guoqing.png');
+			background-size: cover;
+		}
+		.logo{
+			width: 60vw;
+			height: 50vw;
+			background: url('static/logo/building.png') no-repeat center;
+			background-size: contain;
+		}
+		.mod-text{
+			color: #ffffff !important;
+		}
+		.mod-button{
+			color: #ffffff !important;
+			background-color: #990000 !important;
+		}
+	"
+},
+"signup": {
+	"css": "
+		.top{
+			width: 100%;
+			height: 170px;
+			padding-top: 36px;
+			justify-content: space-between;
+			background-image: url('static/backgroud/top_bg_guoqing.png');
+			background-repeat: no-repeat;
+			background-position-y: 20%;
+			background-size: cover;
+		}
+		.topbar-color{
+			color: #ffffff;
+		}
+		.btnSignup-enable {
+			background-color: #ff0000 !important;
+		}
+		.swiper-item-button {
+			background-color: #ff0000 !important;
+		}
+		.uni-swiper-dot-active {
+			background: #ff0000 !important;
+		}
+	",
+	"popupDataList": [
+		{
+			"type": 2,
+			"data": {
+				"title": "基本图例",
+				"img": "/static/common/jbtl.png"
+			}
+		}, {
+			"type": 2,
+			"data": {
+				"title": "基本标识",
+				"img": "/static/common/jbbs2.png"
+			}
+		},
+		{
+			"type": 7,
+			"data": {
+				"title": "活动规则",
+				"content": "<li>赛期内随时参赛、不限完赛次数、起点任选、实时排名 <li>起点-各途经点-结束点完整打卡为1次有效完赛 <li>赛事如有疑问，请咨询微信客服",
+				"imageList": [
+					{
+						"src": "/static/common/qrcode_wxkf.png",
+						"width": "100px",
+						"height": "100px"
+					}
+				]
+			}
+		},
+		{
+			"type": 7,
+			"data": {
+				"title": "活动奖励",
+				"content": "<li>途经点打卡1次，获1个百味豆<br><li>每次正确答题，再获1个百味豆<br><li>20个百味豆兑换1个鸡蛋<br><li>上不封顶！随时兑换！<br><text style='font-size:12px;color:#999999;'>(限本次活动百味豆，兑换以“蛋叔券”为准)</text><br><li>健身又能“薅羊毛”~",
+				"imageList": [
+					{
+						"src": "/static/common/jidanquan.png",
+						"width": "80px",
+						"height": "80px"
+					}
+				]
+			}
+		}
+	],
+	"introduce": {
+		"title": "介绍：",
+		"content": "<li>领秀城社区欢乐定向赛来袭 \r\n <li>领秀城 A、B、C、D、E、F 区及商业街、贵和购物广场等8个起点任选。\r\n <li>跑的多，得蛋多，神秘蛋叔赞助！\r\n <li>还等什么？火速报名吧！\r\n <li>定向赛场上，每一个人都是主角~"
+	}
+},
+"rankOverview": {
+	"css": "
+		.top{
+			position: relative;
+			z-index: 10;
+			width: 100%;
+			height: 270px;
+			padding-top: 36px;
+			justify-content: space-between;
+			background-image: url('static/backgroud/top_bg_guoqing.png');
+			background-repeat: no-repeat;
+			background-position-x: center;
+			background-position-y: -8px;
+			background-size: 100% 100%;
+		}
+		.topbar-color{
+			color: #ffffff;
+		}
+	",
+	"pathList": {
+		"row1": [{
+				"type": 3,
+				"pathImg": "/static/common/领秀城A区.png",
+				"path": {
+					"ocaId": 1,
+					"mcType": 3
+				},
+				"navImg": "/static/common/nav.png",
+				"point": {
+					"longitude": 117.022194,
+					"latitude": 36.661612,
+					"name": "领秀城A区起始点"
+				}
+			},
+			{
+				"type": 3,
+				"pathImg": "/static/common/领秀城B区.png",
+				"path": {
+					"ocaId": 1,
+					"mcType": 3
+				},
+				"navImg": "/static/common/nav.png",
+				"point": {
+					"longitude": 117.022194,
+					"latitude": 36.661612,
+					"name": "领秀城B区起始点"
+				}
+			}
+		],
+		"row2": [{
+				"type": 3,
+				"pathImg": "/static/common/领秀城C区.png",
+				"path": {
+					"ocaId": 1,
+					"mcType": 3
+				},
+				"navImg": "/static/common/nav.png",
+				"point": {
+					"longitude": 117.022194,
+					"latitude": 36.661612,
+					"name": "领秀城C区起始点"
+				}
+			},
+			{
+				"type": 3,
+				"pathImg": "/static/common/领秀城D区.png",
+				"path": {
+					"ocaId": 1,
+					"mcType": 3
+				},
+				"navImg": "/static/common/nav.png",
+				"point": {
+					"longitude": 117.022194,
+					"latitude": 36.661612,
+					"name": "领秀城D区起始点"
+				}
+			}
+		],
+		"row3": [{
+				"type": 3,
+				"pathImg": "/static/common/领秀城E区.png",
+				"path": {
+					"ocaId": 1,
+					"mcType": 3
+				},
+				"navImg": "/static/common/nav.png",
+				"point": {
+					"longitude": 117.022194,
+					"latitude": 36.661612,
+					"name": "领秀城E区起始点"
+				}
+			},
+			{
+				"type": 3,
+				"pathImg": "/static/common/领秀城F区.png",
+				"path": {
+					"ocaId": 1,
+					"mcType": 3
+				},
+				"navImg": "/static/common/nav.png",
+				"point": {
+					"longitude": 117.022194,
+					"latitude": 36.661612,
+					"name": "领秀城F区起始点"
+				}
+			}
+		],
+		"row4": [{
+				"type": 3,
+				"pathImg": "/static/common/贵和购物中心.png",
+				"path": {
+					"ocaId": 1,
+					"mcType": 3
+				},
+				"navImg": "/static/common/nav.png",
+				"point": {
+					"longitude": 117.022194,
+					"latitude": 36.661612,
+					"name": "贵和购物中心起始点"
+				}
+			},
+			{
+				"type": 3,
+				"pathImg": "/static/common/中心花园.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;"
+	},
+	"popupDataList": [
+		{
+			"type": 2,
+			"data": {
+				"title": "基本图例",
+				"img": "/static/common/jbtl.png"
+			}
+		}, {
+			"type": 2,
+			"data": {
+				"title": "基本标识",
+				"img": "/static/common/jbbs2.png"
+			}
+		},
+		{
+			"type": 7,
+			"data": {
+				"title": "活动规则",
+				"content": "<li>赛期内随时参赛、不限完赛次数、起点任选、实时排名 <li>起点-各途经点-结束点完整打卡为1次有效完赛 <li>赛事如有疑问，请咨询微信客服",
+				"imageList": [
+					{
+						"src": "/static/common/qrcode_wxkf.png",
+						"width": "100px",
+						"height": "100px"
+					}
+				]
+			}
+		},
+		{
+			"type": 7,
+			"data": {
+				"title": "活动奖励",
+				"content": "<li>途经点打卡1次，获1个百味豆<br><li>每次正确答题，再获1个百味豆<br><li>20个百味豆兑换1个鸡蛋<br><li>上不封顶！随时兑换！<br><text style='font-size:12px;color:#999999;'>(限本次活动百味豆，兑换以“蛋叔券”为准)</text><br><li>健身又能“薅羊毛”~",
+				"imageList": [
+					{
+						"src": "/static/common/jidanquan.png",
+						"width": "80px",
+						"height": "80px"
+					}
+				]
+			}
+		},
+		{
+			"type": 5,
+			"data": {
+				"title": "兑换地点",
+				"img": "/static/common/wslgwcs.png",
+				"point": {
+					"longitude": 117.022194,
+					"latitude": 36.661612,
+					"name": "万盛隆购物超市"
+				}
+			}
+		}
+	]
+},
+"rankList": {
+	"css": "
+		.top{
+			width: 100%;
+			height: 170px;
+			padding-top: 36px;
+			justify-content: space-between;
+			background-image: url('static/backgroud/top_bg_guoqing.png');
+			background-repeat: no-repeat;
+			background-position-y: 20%;
+			background-size: cover;
+		}
+		.topbar-color{
+			color: #ffffff;
+		}
+		.topbtm-name{
+			background-color: #e68328 !important;
+			color: #ffffff !important;
+			opacity: 0.9;
+		}
+		.topbtm-egg{
+			background-color: #e68328 !important;
+			color: #ffffff !important;
+			opacity: 0.9;
+		}
+		.btnBack{
+			background-color: #ff0000 !important;
+		}
+		.main-bar{
+			background-color: #ffd1d1 !important;
+			color: #C40000 !important;
+		}
+		.swiper-item-button {
+			background-color: #C40000 !important;
+		}
+		.uni-swiper-dot-active {
+			background: #C40000 !important;
+		}
+	",
+	"tabActiveColor": "#ff0000",
+	"popupDataList": [
+		{
+			"type": 2,
+			"data": {
+				"title": "基本图例",
+				"img": "/static/common/jbtl.png"
+			}
+		}, {
+			"type": 2,
+			"data": {
+				"title": "基本标识",
+				"img": "/static/common/jbbs2.png"
+			}
+		},
+		{
+			"type": 7,
+			"data": {
+				"title": "活动规则",
+				"content": "<li>赛期内随时参赛、不限完赛次数、起点任选、实时排名 <li>起点-各途经点-结束点完整打卡为1次有效完赛 <li>赛事如有疑问，请咨询微信客服",
+				"imageList": [
+					{
+						"src": "/static/common/qrcode_wxkf.png",
+						"width": "100px",
+						"height": "100px"
+					}
+				]
+			}
+		},
+		{
+			"type": 7,
+			"data": {
+				"title": "活动奖励",
+				"content": "<li>途经点打卡1次，获1个百味豆<br><li>每次正确答题，再获1个百味豆<br><li>20个百味豆兑换1个鸡蛋<br><li>上不封顶！随时兑换！<br><text style='font-size:12px;color:#999999;'>(限本次活动百味豆，兑换以“蛋叔券”为准)</text><br><li>健身又能“薅羊毛”~",
+				"imageList": [
+					{
+						"src": "/static/common/jidanquan.png",
+						"width": "80px",
+						"height": "80px"
+					}
+				]
+			}
+		},
+		{
+			"type": 5,
+			"data": {
+				"title": "兑换地点",
+				"img": "/static/common/wslgwcs.png",
+				"point": {
+					"longitude": 117.022194,
+					"latitude": 36.661612,
+					"name": "万盛隆购物超市"
+				}
+			}
+		}
+	],
+	"popupExchgList": [{
+			"type": 5,
+			"data": {
+				"title": "兑换地点",
+				"img": "/static/common/wslgwcs.png",
+				"point": {
+					"longitude": 117.022194,
+					"latitude": 36.6 61612,
+					"name": "万盛隆购物超市"
+				}
+			}
+		}
+	]
+}

card/pages/bm/style3/index.vue

@@ -241,24 +241,21 @@ https://oss-mbh5.colormaprun.com/card/#/pages/bm/style3/index
 						/* const config = {
 						"css": `
 							.content-bg{
-								background: url('static/cardbg/xfl5.png');
+								background: url('static/cardbg/guoqing.png');
 								background-size: cover;
 							}
-							
 							.logo{
-								width: 40vw;
-								height: 40vw;
-								background: url('static/logo/xfl2.png') no-repeat center;
+								width: 60vw;
+								height: 50vw;
+								background: url('static/logo/building.png') no-repeat center;
 								background-size: contain;
 							}
-							
 							.mod-text{
-								color: #000000 !important;
+								color: #ffffff !important;
 							}
-							
 							.mod-button{
 								color: #ffffff !important;
-								background-color: #9d4f00 !important;
+								background-color: #990000 !important;
 							}
 						`
 						}; */

card/pages/bm/style3/rankList.vue

@@ -1,776 +1,919 @@
-<!-- 
-[报名] 样式3 - 排名列表
-http://localhost:5173/card/#/pages/bm/style3/rankList
-https://oss-mbh5.colormaprun.com/card/#/pages/bm/style3/rankList
- -->
-<template>
-	<view class="body">
-		<view class="content uni-column">
-			<view class="uni-column" :class="cssTop">
-				<view class="topbar uni-row" :class="cssTopbarColor">
-					<uni-icons type="left" class="topbar-back" @click="btnBack"></uni-icons>
-					<text class="mcName">{{mcName}}</text>
-					<text class="topbar-rule" @click="btnInfo">规则</text>
-					<!-- <image mode="aspectFit" class="topbar-info" @click="btnInfo" src="/static/default/info.png"></image> -->
-				</view>
-				
-				<view class="topbtm uni-row">
-					<!-- <view class="topbtm-null"></view> -->
-					<view class="topbtm-egg" @click="btnMyEgg">蛋叔券</view>
-					<text class="topbtm-name">{{nickName}}</text>
-					<view class="topbtm-egg" @click="btnExchg">兑换地址</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>
-				
-				<uni-segmented-control class="main-tab" :current="tabCurrent" :values="tabItems"
-					@clickItem="onClickTabItem" styleType="button" :activeColor="tabActiveColor"></uni-segmented-control>
-				<view class="tab-view uni-column">
-					<!-- 总距离 -->
-					<my-ranklist v-show="tabCurrent === 0" :rankRs="rankList.totalDistanceRs" rank-type="totalDistance"></my-ranklist>
-
-					<!-- 打点数 -->
-					<my-ranklist v-show="tabCurrent === 1" :rankRs="rankList.totalCpRs" rank-type="totalCp"></my-ranklist>
-					
-					<!-- 百味豆 -->
-					<my-ranklist v-show="tabCurrent === 2" :rankRs="rankList.totalSysPointRs" rank-type="totalSysPoint"></my-ranklist>
-					
-					<!-- 配速 -->
-					<my-ranklist v-show="tabCurrent === 3" :rankRs="rankList.fastPaceRs" rank-type="fastPace"></my-ranklist>
-				</view>
-
-				<button class="btnBack" @click="btnStartGame">我要比赛</button>
-				<!-- <button class="btnBack" @click="btnBack">返回</button> -->
-			</view>
-			
-			<my-popup ref="mypopup" :dataList="popupDataList" :acttime="acttime"></my-popup>
-			<my-popup ref="mypopupExchg" :dataList="popupExchgList"></my-popup>
-			
-		</view>
-	</view>
-</template>
-
-<script>
-	import tools from '/common/tools';
-	import { teamName, defaultPopUpDataList } from '/common/define';
-	import {
-		token,
-		apiMatchRsDetailQuery,
-		apiCardRankDetailQuery,
-		apiCardConfigQuery,
-		apiUserCurrentRankNumQuery,
-		apiCompStatisticQuery,
-		apiIsAllowMcSignUp,
-		checkResCode
-	} from '/common/api';
-	
-	export default {
-		data() {
-			return {
-				pageName: "rankList",
-				firstEnterKey: 'firstEnter-bm-style3',
-				rankKey: "rank-bm-style3",
-				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: "", // 昵称
-				totalNum: null, // 总场次
-				totalDistanct: null, // 总距离,单位米
-				totalDistanctRankNum: null, // 总距离排名
-				totalCp: null, // 总打点数
-				totalCpRankNum: null, // 总打点数排名
-				totalSysPoint: null, // 总百味豆
-				totalSysPointRankNum: null, // 总百味豆排名
-				fastPace: null, // 个人最快配速
-				fastPaceRankNum: null, // 个人最快配速排名
-				// ocaRs: [], // 卡片对应活动集合
-				
-				all_totalDistance: 0, // 赛事所有人累计里程，单位米
-				all_totalRightAnswerNum: 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", // 要显示的集合范围
-				tabItems: ["总距离", "打点数", "百味豆", "配速"],
-				tabCurrent: 0,
-				tabActiveColor: "#81cd00",
-				
-				cssTop: "",
-				cssTopbarColor: "",
-				popupDataList: [],
-				popupExchgList: []
-			}
-		},
-		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);
-			
-			tools.removeCssCode();
-			
-			this.getCardConfigQuery();
-			this.dealOvtype();
-		},
-		// 页面初次渲染完成，此时组件已挂载完成，DOM 树($el)已可用
-		onReady() {
-			// this.dealFirstEnter();
-		},
-		onUnload() {
-			this.clear();
-		},
-		methods: {
-			dealOvtype() {
-				if (this.ovtype == "totalDistance") {
-					this.tabCurrent = 0;
-				} else if (this.ovtype == "totalCp") {
-					this.tabCurrent = 1;
-				} else if (this.ovtype == "totalSysPoint") {
-					this.tabCurrent = 2;
-				} else if (this.ovtype == "fastPace") {
-					this.tabCurrent = 3;
-				}
-				console.log(`dealOvtype: ${this.ovtype} tabCurrent: ${this.tabCurrent}`);
-			},
-			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 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);
-			},
-			// 获取倒计时
-			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 * 10 / 1000) / 10;
-				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_egg3.png');
-								background-repeat: no-repeat;
-								background-position: center;
-								background-size: cover;
-							}
-							.topbar-color{
-								color: #333333;
-							}
-							.topbtm-name{
-								background-color: #c77f34 !important;
-								color: #ffffff !important;
-							}
-							.topbtm-egg{
-								background-color: #c6690a !important;
-								color: #ffffff !important;
-							}
-							.btnBack{
-								background-color: #ff870d !important;
-							}
-							.main-bar{
-								background-color: #FFEDDB !important;
-								color: #ff870d !important;
-							}
-							.swiper-item-button {
-								background-color: #ff870e !important;
-							}
-							.uni-swiper-dot-active {
-								background: #ff870e !important;
-							}
-						`,
-						"tabActiveColor": "#ff870d",
-						"popupDataList": [{
-								"type": 1,
-								"data": {
-									"title": "小飞龙定向赛",
-									"img": "/static/common/egg.png",
-									"content": "济南奥体中心“一场三馆”包括体育场、体育馆、网球馆和游泳馆，呈现出“东荷西柳”的总体布局。 体育场以济南的“市树”柳树为母题，将垂柳柔美飘逸的形态固化为建筑语言。"
-								}
-							},
-							"default"
-						],
-						"popupExchgList": [{
-								"type": 5,
-								"data": {
-									"title": "兑换地点",
-									"img": "/static/common/wslgwcs.png",
-									"point": {
-										"longitude": 117.022194,
-										"latitude": 36.661612,
-										"name": "万盛隆购物超市"
-									}
-								}
-							}
-						]
-						}; */
-						
-						this.loadConfig(config);
-						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.compStatisticQuery();
-							this.getCardRankDetailQuery();
-				
-							this.clear();
-							this.interval = setInterval(this.getCountdown, 60000);
-						}
-					},
-					fail: (err) => {
-						console.log("matchRsDetailQuery 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,
-						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;
-					},
-					fail: (err) => {
-						console.log("getCardRankDetailQuery 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_totalCp = data.totalCp;
-							this.all_totalSysPoint = data.totalSysPoint;
-						}
-					},
-					fail: (err) => {
-						console.log("compStatisticQuery 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)
-					},
-				});
-			},
-			btnBack() {
-				// window.history.back();
-				/* uni.navigateTo({
-					url: "/pages/bm/style3/rankOverview?" + this.queryString
-				}); */
-				
-				const url = `action://to_home/`;
-				tools.appAction(url);
-			},
-			btnStartGame() {
-				// uni.navigateTo({
-				// 	url: "/pages/bm/style3/rankOverview?" + this.queryString
-				// });
-				const url = "/pages/bm/style3/rankOverview?" + this.queryString;
-				tools.appAction(url, "uni.navigateTo");
-			},
-			btnInfo() {
-				// console.log(this.$refs.mypopup);
-				this.$refs.mypopup.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();
-			},
-			onClickTabItem(e) {
-				if (this.tabCurrent != e.currentIndex) {
-					this.tabCurrent = e.currentIndex;
-				}
-			}
-		}
-	}
-</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_bg2.png");
-		background-repeat: no-repeat;
-		background-position: center;
-		background-size: cover;
-	}
-	
-	.topbar {
-		width: 90%;
-		justify-content: space-between;
-	}
-
-	.topbar-color-default {
-		color: #5b9100;
-	}
-	
-	.topbar-back {
		width: 43rpx;
		height: 43rpx;
		color: inherit !important;
		font-size: 48rpx !important;
		/* opacity: 0; */
	}
-	
-	.topbar-info {
-		width: 46rpx;
-		height: 46rpx;
-	}
-	
-	.topbar-rule {
-		font-size: 32rpx;
-	}
-	
-	.mcName {
-		font-size: 40rpx;
-		font-weight: 550;
-	}
-	
-	.topbtm {
-		width: 100%;
-		margin-bottom: 5px;
-		justify-content: space-around;
-	}
-	
-	.topbtm-name {
-		padding: 3px 12px;
-		background-color: #9fda39;
-		border-radius: 5px;
-		text-align: center;
-		font-weight: 500;
-		color: #497400;
-		font-size: 14px;
-	}
-	
-	.topbtm-egg {
-		width: 60px;
-		padding: 3px 12px;
-		background-color: #9fda39;
-		border-radius: 50px;
-		text-align: center;
-		color: #497400;
-		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 {
-		width: 100%;
-		height: 21px;
-		background-color: #d8e8c6;
-		
-		font-size: 10px;
-		font-weight: 500;
-		color: #3d6706;
-	}
-
-	.main-tab {
-		width: 90%;
-		margin-top: 20rpx;
-	}
-
-	.tab-view {
-		width: 100%;
-		/* height: 69vh; */
-		flex-grow: 1;
-	}
-
-	.btnBack {
-		width: 70%;
-		/* height: 6vh; */
-		height: 80rpx;
-		/* margin-bottom: 1vh; */
-		margin-bottom: 20rpx;
-		/* font-weight: bold; */
-		color: white;
-		font-size: 32rpx;
-		line-height: 80rpx;
-		border-radius: 27px;
-		background-color: #81cd00;
-	}
-	
+<!-- 
+[报名] 样式3 - 排名列表
+http://localhost:5173/card/#/pages/bm/style3/rankList
+https://oss-mbh5.colormaprun.com/card/#/pages/bm/style3/rankList
+ -->
+<template>
+	<view class="body">
+		<view 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="topbar uni-row" :class="cssTopbarColor">
+					<uni-icons type="left" class="topbar-back" @click="btnBack"></uni-icons>
+					<text class="mcName">{{mcName}}</text>
+					<text class="topbar-rule" @click="btnInfo">规则</text>
+				</view> -->
+				
+				<view class="topbtm uni-row">
+					<!-- <view class="topbtm-null"></view> -->
+					<view class="topbtm-egg" @click="btnMyEgg">蛋叔券</view>
+					<text class="topbtm-name">{{nickName}}</text>
+					<view class="topbtm-egg" @click="btnExchg">兑换地址</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>
+				
+				<uni-segmented-control class="main-tab" :current="tabCurrent" :values="tabItems"
+					@clickItem="onClickTabItem" styleType="button" :activeColor="tabActiveColor"></uni-segmented-control>
+				<view class="tab-view uni-column">
+					<!-- 里程 -->
+					<my-ranklist v-show="tabCurrent === 0" :rankRs="rankList.totalDistanceRs" rank-type="totalDistance"></my-ranklist>
+
+					<!-- 打点数 -->
+					<my-ranklist v-show="tabCurrent === 1" :rankRs="rankList.totalCpRs" rank-type="totalCp"></my-ranklist>
+					
+					<!-- 百味豆 -->
+					<my-ranklist v-show="tabCurrent === 2" :rankRs="rankList.totalSysPointRs" rank-type="totalSysPoint"></my-ranklist>
+					
+					<!-- 配速 -->
+					<my-ranklist v-show="tabCurrent === 3" :rankRs="rankList.fastPaceRs" rank-type="fastPace"></my-ranklist>
+				</view>
+
+				<button class="btnBack" @click="btnStartGame">我要比赛</button>
+				<!-- <button class="btnBack" @click="btnBack">返回</button> -->
+			</view>
+			
+			<my-popup ref="mypopup" :dataList="popupDataList" :acttime="acttime"></my-popup>
+			<my-popup ref="mypopupExchg" :dataList="popupExchgList"></my-popup>
+			<my-popup ref="mypopupMessage" :dataList="popupMessageList"></my-popup>
+			
+		</view>
+	</view>
+</template>
+
+<script>
+	import tools from '/common/tools';
+	import { teamName, defaultPopUpDataList } from '/common/define';
+	import {
+		token,
+		apiMatchRsDetailQuery,
+		apiCardRankDetailQuery,
+		apiCardConfigQuery,
+		apiUserCurrentRankNumQuery,
+		apiCompStatisticQuery,
+		apiIsAllowMcSignUp,
+		apiUnReadMessageQuery,
+		apiReadMessage,
+		checkResCode
+	} from '/common/api';
+	
+	export default {
+		data() {
+			return {
+				pageName: "rankList",
+				firstEnterKey: 'firstEnter-bm-style3',
+				rankKey: "rank-bm-style3",
+				messageKey: "message-bm-style3",
+				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: "", // 昵称
+				totalNum: null, // 总场次
+				totalDistanct: null, // 总距离,单位米
+				totalDistanctRankNum: null, // 总距离排名
+				totalCp: null, // 总打点数
+				totalCpRankNum: null, // 总打点数排名
+				totalSysPoint: null, // 总百味豆
+				totalSysPointRankNum: null, // 总百味豆排名
+				fastPace: null, // 个人最快配速
+				fastPaceRankNum: null, // 个人最快配速排名
+				// ocaRs: [], // 卡片对应活动集合
+				
+				all_totalDistance: 0, // 赛事所有人累计里程，单位米
+				all_totalRightAnswerNum: 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", // 要显示的集合范围
+				tabItems: ["里程", "打点数", "百味豆", "配速"],
+				tabCurrent: 0,
+				tabActiveColor: "#81cd00",
+				
+				cssTop: "",
+				cssTopbarColor: "",
+				popupDataList: [],
+				popupExchgList: [],
+				popupMessageList: [],
+				/* popupMessageList: [
+					{
+						type: 6,	// 6: 通知
+						data: {
+							mqType: 3,
+							title: "赛事续期通知",
+							message: `因为感受到了各位小伙伴的热情，结合即将来临的国庆假期，当然，小飞龙强力出击～“挟持”蛋叔继续赞助鸡蛋………
+	
+								1. 现决定，将本次小飞龙定向赛延期至<text style="color:red">10月8日</text>，希望各位在漫步秋日的同时，放松心情，好好享受定向运动的奇妙历程。
+								
+								2. 最后的领蛋截止日，顺延至<text style="color:red">10月20日</text>～
+								
+								最后总结一句：
+								蛋叔！我们都爱你!
+								everybody，加油！`
+							}
+					},
+					{
+						type: 6,	// 6: 通知
+						data: {
+							mqType: 2,
+							title: "赛事续期通知",
+							message: "/static/common/jiangli.png"
+							}
+					}
+				], */
+				// 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.messageKey += "-" + this.ecId;
+			console.log("messageKey:", this.messageKey);
+			
+			tools.removeCssCode();
+			
+			this.getCardConfigQuery();
+			this.dealOvtype();
+		},
+		// 页面初次渲染完成，此时组件已挂载完成，DOM 树($el)已可用
+		onReady() {
+			// this.dealFirstEnter();
+			this.$refs.mypopupMessage.popupOpen();
+		},
+		onUnload() {
+			this.clear();
+		},
+		methods: {
+			dealOvtype() {
+				if (this.ovtype == "totalDistance") {
+					this.tabCurrent = 0;
+				} else if (this.ovtype == "totalCp") {
+					this.tabCurrent = 1;
+				} else if (this.ovtype == "totalSysPoint") {
+					this.tabCurrent = 2;
+				} else if (this.ovtype == "fastPace") {
+					this.tabCurrent = 3;
+				}
+				console.log(`dealOvtype: ${this.ovtype} tabCurrent: ${this.tabCurrent}`);
+			},
+			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 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);
+			},
+			// 获取倒计时
+			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 * 10 / 1000) / 10;
+				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_guoqing.png');
+								background-repeat: no-repeat;
+								background-position-y: 20%;
+								background-size: cover;
+							}
+							.topbar-color{
+								color: #ffffff;
+							}
+							.topbtm-name{
+								background-color: #e68328 !important;
+								color: #ffffff !important;
+								opacity: 0.9;
+							}
+							.topbtm-egg{
+								background-color: #e68328 !important;
+								color: #ffffff !important;
+								opacity: 0.9;
+							}
+							.btnBack{
+								background-color: #ff0000 !important;
+							}
+							.main-bar{
+								background-color: #ffd1d1 !important;
+								color: #C40000 !important;
+							}
+							.swiper-item-button {
+								background-color: #C40000 !important;
+							}
+							.uni-swiper-dot-active {
+								background: #C40000 !important;
+							}
+						`,
+						"tabActiveColor": "#ff0000",
+						"popupDataList": [
+							{
+								"type": 2,
+								"data": {
+									"title": "基本图例",
+									"img": "/static/common/jbtl.png"
+								}
+							}, {
+								"type": 2,
+								"data": {
+									"title": "基本标识",
+									"img": "/static/common/jbbs2.png"
+								}
+							},
+							{
+								"type": 7,
+								"data": {
+									"title": "活动规则",
+									"content": "<li>赛期内随时参赛、不限完赛次数、起点任选、实时排名 <li>起点-各途经点-结束点完整打卡为1次有效完赛 <li>赛事如有疑问，请咨询微信客服",
+									"imageList": [
+										{
+											"src": "/static/common/qrcode_wxkf.png",
+											"width": "100px",
+											"height": "100px"
+										}
+									]
+								}
+							},
+							{
+								"type": 7,
+								"data": {
+									"title": "活动奖励",
+									"content": "<li>途经点打卡1次，获1个百味豆<br><li>每次正确答题，再获1个百味豆<br><li>20个百味豆兑换1个鸡蛋<br><li>上不封顶！随时兑换！<br><text style='font-size:12px;color:#999999;'>(限本次活动百味豆，兑换以“蛋叔券”为准)</text><br><li>健身又能“薅羊毛”~",
+									"imageList": [
+										{
+											"src": "/static/common/jidanquan.png",
+											"width": "80px",
+											"height": "80px"
+										}
+									]
+								}
+							},
+							{
+								"type": 5,
+								"data": {
+									"title": "兑换地点",
+									"img": "/static/common/wslgwcs.png",
+									"point": {
+										"longitude": 117.022194,
+										"latitude": 36.661612,
+										"name": "万盛隆购物超市"
+									}
+								}
+							}
+						],
+						"popupExchgList": [
+							{
+								"type": 5,
+								"data": {
+									"title": "兑换地点",
+									"img": "/static/common/wslgwcs.png",
+									"point": {
+										"longitude": 117.022194,
+										"latitude": 36.661612,
+										"name": "万盛隆购物超市"
+									}
+								}
+							}
+						]
+						}; */
+						
+						this.loadConfig(config);
+						this.getUnReadMessageQuery();
+						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.compStatisticQuery();
+							this.getCardRankDetailQuery();
+				
+							this.clear();
+							this.interval = setInterval(this.getCountdown, 60000);
+						}
+					},
+					fail: (err) => {
+						console.log("matchRsDetailQuery 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,
+						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;
+					},
+					fail: (err) => {
+						console.log("getCardRankDetailQuery 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_totalCp = data.totalCp;
+							this.all_totalSysPoint = data.totalSysPoint;
+						}
+					},
+					fail: (err) => {
+						console.log("compStatisticQuery 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)
+					},
+				});
+			},
+			// 未读消息列表查询
+			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 += ",";
+								// }
+							}
+			
+							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);
+					},
+				});
+			},
+			// 标记消息已读
+			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/style3/rankOverview?" + this.queryString
+				}); */
+				
+				const url = `action://to_home/`;
+				tools.appAction(url);
+			},
+			btnStartGame() {
+				// uni.navigateTo({
+				// 	url: "/pages/bm/style3/rankOverview?" + this.queryString
+				// });
+				const url = "/pages/bm/style3/rankOverview?" + 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();
+			},
+			onClickTabItem(e) {
+				if (this.tabCurrent != e.currentIndex) {
+					this.tabCurrent = e.currentIndex;
+				}
+			}
+		}
+	}
+</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_bg2.png");
+		background-repeat: no-repeat;
+		background-position: center;
+		background-size: cover;
+	}
+
+	.topbar-color-default {
+		color: #5b9100;
+	}
+	
+	.topbtm {
+		width: 100%;
+		margin-bottom: 5px;
+		justify-content: space-around;
+	}
+	
+	.topbtm-name {
+		max-width: 300rpx;
+		padding: 3px 12px;
+		background-color: #9fda39;
+		border-radius: 5px;
+		text-align: center;
+		font-weight: 500;
+		color: #497400;
+		font-size: 14px;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+	
+	.topbtm-egg {
+		width: 60px;
+		padding: 3px 12px;
+		background-color: #9fda39;
+		border-radius: 50px;
+		text-align: center;
+		color: #497400;
+		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 {
+		width: 100%;
+		height: 21px;
+		background-color: #d8e8c6;
+		
+		font-size: 10px;
+		font-weight: 500;
+		color: #3d6706;
+	}
+
+	.main-tab {
+		width: 90%;
+		margin-top: 20rpx;
+	}
+
+	.tab-view {
+		width: 100%;
+		/* height: 69vh; */
+		flex-grow: 1;
+	}
+
+	.btnBack {
+		width: 70%;
+		/* height: 6vh; */
+		height: 80rpx;
+		/* margin-bottom: 1vh; */
+		margin-bottom: 20rpx;
+		/* font-weight: bold; */
+		color: white;
+		font-size: 32rpx;
+		line-height: 80rpx;
+		border-radius: 27px;
+		background-color: #81cd00;
+	}
+	
 </style>

card/pages/bm/style3/rankOverview.vue

@@ -1,756 +1,811 @@
-<!-- 
-[报名] 样式3 - 排名总览
-http://localhost:5173/card/#/pages/bm/style3/rankOverview
-https://oss-mbh5.colormaprun.com/card/#/pages/bm/style3/rankOverview
- -->
-<template>
-	<view class="body">
-		<view class="content uni-column">
-			<view class="uni-column" :class="cssTop">
-				<view class="topbar uni-row" :class="cssTopbarColor">
-					<uni-icons type="left" class="topbar-back" @click="btnBack"></uni-icons>
-					<text class="mcName" @click="playMusic">{{mcName}}</text>
-					<text class="topbar-rule" @click="btnInfo">规则</text>
-					<!-- <image mode="aspectFit" class="topbar-info" @click="btnInfo" src="/static/default/info.png"></image> -->
-				</view>
-			</view>
-			
-			<view class="mid uni-column">
-				<view class="mid-1 uni-row uni-jcsb">
-					<text>{{nickName}}</text>
-					<text>总场次：{{totalNum}}</text>
-				</view>
-				<view class="mid-2 uni-row uni-jcsa">
-					<view class="uni-column">
-						<text class="mid-2-value" style="color: #ff0045;">{{totalSysPoint}}</text>
-						<text class="mid-2-text">百味豆(个)</text>
-					</view>
-
-					<view class="mid-line"></view>
-
-					<view class="uni-column">
-						<text class="mid-2-value">{{fmtDistanct(totalDistanct)}}</text>
-						<text class="mid-2-text">总里程km</text>
-					</view>
-
-					<view class="mid-line"></view>
-					<view class="uni-column">
-						<text class="mid-2-value">{{totalCp}}</text>
-						<text class="mid-2-text">打点数(个)</text>
-					</view>
-
-					<view class="mid-line"></view>
-
-					<view class="uni-column">
-						<text class="mid-2-value">{{fmtPace(fastPace)}}</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" :mcState="mcState" :showLine="pathListStyle.showLine"></my-pathList>
-			</view>
-
-			<my-popup ref="mypopup" :dataList="popupDataList" :acttime="acttime"></my-popup>
-			<!-- <my-popup-map ref="mypopupmap" :point="navPoint"></my-popup-map> -->
-		</view>
-	</view>
-</template>
-
-<script>
-	import tools from '/common/tools';
-	import {
-		defaultPopUpDataList
-	} from '/common/define';
-	import {
-		token,
-		apiMatchRsDetailQuery,
-		apiCardConfigQuery,
-		checkResCode
-	} from '/common/api';
-
-	export default {
-		data() {
-			return {
-				// 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-style3',
-				rankKey: "rank-bm-style3",
-				queryObj: {},
-				queryString: "",
-				token: "",
-
-				ecId: 0, // 卡片id
-				mcId: 0, // 赛事id
-				mcType: 0, // 赛事类型 1 普通活动 2 线下赛 3 线上赛
-				mcName: "", // 赛事名称
-				acttime: "", // 活动时间
-				beginSecond: null, // 活动或赛事开始时间戳，单位秒
-				endSecond: null, // 活动或赛事结束时间戳，单位秒
-				nickName: "", // 昵称
-				totalNum: null, // 总场次
-				totalDistanct: null, // 总距离,单位米
-				totalDistanctRankNum: null, // 总距离排名
-				totalCp: null, // 总打点数
-				totalCpRankNum: null, // 总打点数排名
-				totalSysPoint: null, // 总百味豆
-				totalSysPointRankNum: null, // 总百味豆排名
-				fastPace: null, // 个人最快配速
-				fastPaceRankNum: null, // 个人最快配速排名
-				ocaRs: [], // 卡片对应活动集合
-
-				interval: null,
-				mcState: 0, // 赛事/活动状态 0: 未开始  1: 进行中  2: 已结束
-				cssTop: "",
-				cssTopbarColor: "",
-				pathList: {},
-				pathListStyle: {},
-				popupDataList: [],
-				navPoint: {},
-			}
-		},
-		computed: {
-			pathListLen() {
-				return Object.keys(this.pathList).length;
-			}
-		},
-		onLoad(query) { // 类型非必填，可自动推导
-			// 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);
-
-			tools.removeCssCode();
-
-			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 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);
-			},
-			// 获取倒计时
-			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 < 1000)
-					return Math.round(val * 10 / 1000) / 10;
-				else
-					return Math.round(val / 1000);
-			},
-			// 格式化 配速
-			fmtPace(val) {
-				return tools.convertSecondsToHMS(val, 2);
-			},
-			fmtMcTime(timestamp) {
-				return tools.fmtMcTime(timestamp);
-			},
-			// 获取活动时间
-			getActtime() {
-				this.acttime = tools.getActtime(this.beginSecond, this.endSecond);
-			},
-			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;
-									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%;
-								}
-							`,
-							"pathList": {
-								"row1": [{
-										"type": 3, // 1: 比赛路线  2: 导航到指定地点  3: 比赛路线 + 导航
-										"pathImg": "/static/common/lingxiucheng.png",
-										"path": {
-											"ocaId": 1,
-											"mcType": 3 // 赛事类型 1 普通活动 2 线下赛 3 线上赛
-										},
-										"navImg": "/static/common/nav.png",
-										"point": {
-											"longitude": 117.022194,
-											"latitude": 36.661612,
-											"name": "领秀城起始点"
-										}
-									},
-									{
-										"type": 3, // 1: 比赛路线  2: 导航到指定地点  3: 比赛路线 + 导航
-										"pathImg": "/static/common/quanchenggongyuan.png",
-										"path": {
-											"ocaId": 1,
-											"mcType": 3 // 赛事类型 1 普通活动 2 线下赛 3 线上赛
-										},
-										"navImg": "/static/common/nav.png",
-										"point": {
-											"longitude": 117.022194,
-											"latitude": 36.661612,
-											"name": "泉城公园起始点"
-										}
-									}
-								],
-								"row2": [{
-										"type": 3, // 1: 比赛路线  2: 导航到指定地点  3: 比赛路线 + 导航
-										"pathImg": "/static/common/baihuagongyuan.png",
-										"path": {
-											"ocaId": 1,
-											"mcType": 3 // 赛事类型 1 普通活动 2 线下赛 3 线上赛
-										},
-										"navImg": "/static/common/nav.png",
-										"point": {
-											"longitude": 117.022194,
-											"latitude": 36.661612,
-											"name": "百花公园起始点"
-										}
-									},
-									{
-										"type": 3, // 1: 比赛路线  2: 导航到指定地点  3: 比赛路线 + 导航
-										"pathImg": "/static/common/aotizhongxin.png",
-										"path": {
-											"ocaId": 1,
-											"mcType": 3 // 赛事类型 1 普通活动 2 线下赛 3 线上赛
-										},
-										"navImg": "/static/common/nav.png",
-										"point": {
-											"longitude": 117.022194,
-											"latitude": 36.661612,
-											"name": "奥体中心起始点"
-										}
-									}
-								],
-								"row3": [{
-									"type": 3, // 1: 比赛路线  2: 导航到指定地点  3: 比赛路线 + 导航
-									"pathImg": "/static/common/muniushan.png",
-									"path": {
-										"ocaId": 1,
-										"mcType": 3 // 赛事类型 1 普通活动 2 线下赛 3 线上赛
-									},
-									"navImg": "/static/common/nav.png",
-									"point": {
-										"longitude": 117.022194,
-										"latitude": 36.661612,
-										"name": "牧牛山起始点"
-									}
-								}]
-							},
-							"pathListStyle" : {
-								"showLine" : true,
-								"style": "justify-content: flex-start;"
-							},
-							"popupDataList": [{
-									"type": 1,
-									"data": {
-										"title": "小飞龙定向赛",
-										"img": "/static/logo/xfl.png",
-										"content": "济南奥体中心“一场三馆”包括体育场、体育馆、网球馆和游泳馆，呈现出“东荷西柳”的总体布局。 体育场以济南的“市树”柳树为母题，将垂柳柔美飘逸的形态固化为建筑语言。"
-									}
-								},
-								{
-									type: 2,
-									data: {
-										title: "规则",
-										img: "/static/common/guize.png",
-									}
-								}, {
-									type: 2,
-									data: {
-										title: "奖励",
-										img: "/static/common/jiangli.png",
-									}
-								},
-								"default"
-							]
-						}; */
-
-						this.loadConfig(config);
-						this.matchRsDetailQuery();
-
-						setTimeout(this.dealFirstEnter, 500);
-					},
-					fail: (err) => {
-						console.log("getCardConfigQuery 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);
-
-							const rank = JSON.stringify(data);
-							this.dealNotice(rank);
-
-							this.getCountdown();
-							this.getActtime();
-
-							this.clear();
-							this.interval = setInterval(this.getCountdown, 60000);
-						}
-					},
-					fail: (err) => {
-						console.log("matchRsDetailQuery err", err)
-					},
-				});
-			},
-			btnBack() {
-				// const url = `action://to_home/`;
-				// tools.appAction(url);
-
-				// uni.navigateTo({
-				// 	url: "/pages/bm/style3/rankList?" + this.queryString
-				// });
-				const url = "/pages/bm/style3/rankList?" + this.queryString;
-				tools.appAction(url, "uni.navigateTo");
-			},
-			btnInfo() {
-				// console.log(this.$refs.mypopup);
-				this.$refs.mypopup.popupOpen();
-			},
-			onOverviewClick(ovtype) {
-				this.queryObj.ovtype = ovtype;
-				this.queryString = tools.objectToQueryString(this.queryObj);
-				// uni.navigateTo({
-				// 	url: "/pages/bm/style3/rankList?" + this.queryString
-				// });
-				const url = "/pages/bm/style3/rankList?" + this.queryString;
-				tools.appAction(url, "uni.navigateTo");
-			},
-		}
-	}
-</script>
-
-<style scoped>
-	.content {
-		width: 100vw;
-		/* 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; */
-	}
-
-	/* .top-oval {
-		position: relative;
-		z-index: 0;
-		margin-top: -180px;
-		margin-left: -10%;
-		width: 120%;
-		height: 280px;
-		background: linear-gradient(180deg, #ffffff 12.18%, #eeeeee 100%);
-		border-radius: 50%;
-		text-align: center;
-	}
-
-	.top-oval-text {
-		color: #333333;
-		font-size: 13px;
-		line-height: 386px;
-		pointer-events: auto;
-	}
- */
-	.topbar {
-		width: 90%;
-		justify-content: space-between;
-	}
-
-	.topbar-color-default {
-		color: #333333;
-	}
-
-	.topbar-back {
-		width: 43rpx;
-		height: 43rpx;
-		color: inherit !important;
-		font-size: 48rpx !important;
-		/* opacity: 0; */
-	}
-
-	.topbar-info {
-		width: 46rpx;
-		height: 46rpx;
-	}
-
-	.topbar-rule {
-		font-size: 32rpx;
-	}
-
-	.mcName {
-		font-size: 40rpx;
-		font-weight: 550;
-	}
-
-	.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;
-	}
-
-	.mid {
-		width: 90%;
-		height: 120px;
-		position: relative;
-		z-index: 20;
-		margin-top: -100px;
-		background: #ffffff;
-		border-radius: 9px;
-		box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.13);
-		font-family: Source Han Sans CN;
-	}
-
-	.mid-1 {
-		width: 90%;
-		margin: 12px;
-		font-weight: 500;
-		color: #8e8e8e;
-		font-size: 14px;
-	}
-
-	.mid-2 {
-		width: 92%;
-		/* margin: 0 10px; */
-	}
-
-	.mid-2-value {
-		font-weight: 900;
-		font-size: 22px;
-	}
-
-	.mid-2-text {
-		color: #989898;
-		font-size: 12px;
-	}
-
-	.mid-line {
-		width: 0px;
-		height: 45.04px;
-		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: 10px;
-		/* height: 70vh; */
-		justify-content: space-around;
-		/* justify-content: space-between; */
-	}
-
-	.main-title {
-		margin-bottom: 10px;
-		font-weight: 550;
-		color: #333333;
-		font-size: 16px;
-	}
+<!-- 
+[报名] 样式3 - 排名总览
+http://localhost:5173/card/#/pages/bm/style3/rankOverview
+https://oss-mbh5.colormaprun.com/card/#/pages/bm/style3/rankOverview
+ -->
+<template>
+	<view class="body">
+		<view class="content uni-column">
+			<view class="uni-column" :class="cssTop">
+				<my-topbar :mcName="mcName" :class="cssTopbarColor"
+					@btnBackClick="btnBack" @btnInfoClick="btnInfo"></my-topbar>
+			</view>
+			
+			<view class="mid uni-column">
+				<view class="mid-1 uni-row uni-jcsb">
+					<text class="mid-1-name">{{nickName}}</text>
+					<text>总场次：{{totalNum}}</text>
+				</view>
+				<view class="mid-2 uni-row uni-jcsa">
+					<view class="uni-column">
+						<text class="mid-2-value" style="color: #ff0045;">{{totalSysPoint}}</text>
+						<text class="mid-2-text">百味豆(个)</text>
+					</view>
+
+					<view class="mid-line"></view>
+
+					<view class="uni-column">
+						<text class="mid-2-value">{{fmtDistanct(totalDistanct)}}</text>
+						<text class="mid-2-text">总里程km</text>
+					</view>
+
+					<view class="mid-line"></view>
+					<view class="uni-column">
+						<text class="mid-2-value">{{totalCp}}</text>
+						<text class="mid-2-text">打点数(个)</text>
+					</view>
+
+					<view class="mid-line"></view>
+
+					<view class="uni-column">
+						<text class="mid-2-value">{{fmtPace(fastPace)}}</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" :mcState="mcState" :showLine="pathListStyle.showLine"></my-pathList>
+			</view>
+
+			<my-popup ref="mypopup" :dataList="popupDataList" :acttime="acttime"></my-popup>
+			<!-- <my-popup-map ref="mypopupmap" :point="navPoint"></my-popup-map> -->
+		</view>
+	</view>
+</template>
+
+<script>
+	import tools from '/common/tools';
+	import {
+		defaultPopUpDataList
+	} from '/common/define';
+	import {
+		token,
+		apiMatchRsDetailQuery,
+		apiCardConfigQuery,
+		checkResCode
+	} from '/common/api';
+
+	export default {
+		data() {
+			return {
+				// 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-style3',
+				rankKey: "rank-bm-style3",
+				queryObj: {},
+				queryString: "",
+				token: "",
+
+				ecId: 0, // 卡片id
+				mcId: 0, // 赛事id
+				mcType: 0, // 赛事类型 1 普通活动 2 线下赛 3 线上赛
+				mcName: "", // 赛事名称
+				acttime: "", // 活动时间
+				beginSecond: null, // 活动或赛事开始时间戳，单位秒
+				endSecond: null, // 活动或赛事结束时间戳，单位秒
+				nickName: "", // 昵称
+				totalNum: null, // 总场次
+				totalDistanct: null, // 总距离,单位米
+				totalDistanctRankNum: null, // 总距离排名
+				totalCp: null, // 总打点数
+				totalCpRankNum: null, // 总打点数排名
+				totalSysPoint: null, // 总百味豆
+				totalSysPointRankNum: null, // 总百味豆排名
+				fastPace: null, // 个人最快配速
+				fastPaceRankNum: null, // 个人最快配速排名
+				ocaRs: [], // 卡片对应活动集合
+
+				interval: null,
+				mcState: 0, // 赛事/活动状态 0: 未开始  1: 进行中  2: 已结束
+				cssTop: "",
+				cssTopbarColor: "",
+				pathList: {},
+				pathListStyle: {},
+				popupDataList: [],
+				navPoint: {},
+			}
+		},
+		computed: {
+			pathListLen() {
+				return Object.keys(this.pathList).length;
+			}
+		},
+		onLoad(query) { // 类型非必填，可自动推导
+			// 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);
+
+			tools.removeCssCode();
+
+			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 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);
+			},
+			// 获取倒计时
+			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 < 1000)
+					return Math.round(val * 10 / 1000) / 10;
+				else
+					return Math.round(val / 1000);
+			},
+			// 格式化 配速
+			fmtPace(val) {
+				return tools.convertSecondsToHMS(val, 2);
+			},
+			fmtMcTime(timestamp) {
+				return tools.fmtMcTime(timestamp);
+			},
+			// 获取活动时间
+			getActtime() {
+				this.acttime = tools.getActtime(this.beginSecond, this.endSecond);
+			},
+			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;
+									z-index: 10;
+									width: 100%;
+									height: 270px;
+									padding-top: 36px;
+									justify-content: space-between;
+									background-image: url('static/backgroud/top_bg_guoqing.png');
+									background-repeat: no-repeat;
+									background-position-x: center;
+									background-position-y: -8px;
+									background-size: 100% 100%;
+								}
+								.topbar-color{
+									color: #ffffff;
+								}
+							`,
+							"pathList": {
+								"row1": [{
+										"type": 3,
+										"pathImg": "/static/common/领秀城A区.png",
+										"path": {
+											"ocaId": 1,
+											"mcType": 3
+										},
+										"navImg": "/static/common/nav.png",
+										"point": {
+											"longitude": 117.022194,
+											"latitude": 36.661612,
+											"name": "领秀城A区起始点"
+										}
+									},
+									{
+										"type": 3,
+										"pathImg": "/static/common/领秀城B区.png",
+										"path": {
+											"ocaId": 1,
+											"mcType": 3
+										},
+										"navImg": "/static/common/nav.png",
+										"point": {
+											"longitude": 117.022194,
+											"latitude": 36.661612,
+											"name": "领秀城B区起始点"
+										}
+									}
+								],
+								"row2": [{
+										"type": 3,
+										"pathImg": "/static/common/领秀城C区.png",
+										"path": {
+											"ocaId": 1,
+											"mcType": 3
+										},
+										"navImg": "/static/common/nav.png",
+										"point": {
+											"longitude": 117.022194,
+											"latitude": 36.661612,
+											"name": "领秀城C区起始点"
+										}
+									},
+									{
+										"type": 3,
+										"pathImg": "/static/common/领秀城D区.png",
+										"path": {
+											"ocaId": 1,
+											"mcType": 3
+										},
+										"navImg": "/static/common/nav.png",
+										"point": {
+											"longitude": 117.022194,
+											"latitude": 36.661612,
+											"name": "领秀城D区起始点"
+										}
+									}
+								],
+								"row3": [{
+										"type": 3,
+										"pathImg": "/static/common/领秀城E区.png",
+										"path": {
+											"ocaId": 1,
+											"mcType": 3
+										},
+										"navImg": "/static/common/nav.png",
+										"point": {
+											"longitude": 117.022194,
+											"latitude": 36.661612,
+											"name": "领秀城E区起始点"
+										}
+									},
+									{
+										"type": 3,
+										"pathImg": "/static/common/领秀城F区.png",
+										"path": {
+											"ocaId": 1,
+											"mcType": 3
+										},
+										"navImg": "/static/common/nav.png",
+										"point": {
+											"longitude": 117.022194,
+											"latitude": 36.661612,
+											"name": "领秀城F区起始点"
+										}
+									}
+								],
+								"row4": [{
+										"type": 3,
+										"pathImg": "/static/common/贵和购物中心.png",
+										"path": {
+											"ocaId": 1,
+											"mcType": 3
+										},
+										"navImg": "/static/common/nav.png",
+										"point": {
+											"longitude": 117.022194,
+											"latitude": 36.661612,
+											"name": "贵和购物中心起始点"
+										}
+									},
+									{
+										"type": 3,
+										"pathImg": "/static/common/中心花园.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;"
+							},
+							"popupDataList": [
+								{
+									"type": 2,
+									"data": {
+										"title": "基本图例",
+										"img": "/static/common/jbtl.png"
+									}
+								}, {
+									"type": 2,
+									"data": {
+										"title": "基本标识",
+										"img": "/static/common/jbbs2.png"
+									}
+								},
+								{
+									"type": 7,
+									"data": {
+										"title": "活动规则",
+										"content": "<li>赛期内随时参赛、不限完赛次数、起点任选、实时排名 <li>起点-各途经点-结束点完整打卡为1次有效完赛 <li>赛事如有疑问，请咨询微信客服",
+										"imageList": [
+											{
+												"src": "/static/common/qrcode_wxkf.png",
+												"width": "100px",
+												"height": "100px"
+											}
+										]
+									}
+								},
+								{
+									"type": 7,
+									"data": {
+										"title": "活动奖励",
+										"content": "<li>途经点打卡1次，获1个百味豆<br><li>每次正确答题，再获1个百味豆<br><li>20个百味豆兑换1个鸡蛋<br><li>上不封顶！随时兑换！<br><text style='font-size:12px;color:#999999;'>(限本次活动百味豆，兑换以“蛋叔券”为准)</text><br><li>健身又能“薅羊毛”~",
+										"imageList": [
+											{
+												"src": "/static/common/jidanquan.png",
+												"width": "80px",
+												"height": "80px"
+											}
+										]
+									}
+								},
+								{
+									"type": 5,
+									"data": {
+										"title": "兑换地点",
+										"img": "/static/common/wslgwcs.png",
+										"point": {
+											"longitude": 117.022194,
+											"latitude": 36.661612,
+											"name": "万盛隆购物超市"
+										}
+									}
+								}
+							]
+						}; */
+
+						this.loadConfig(config);
+						this.matchRsDetailQuery();
+
+						setTimeout(this.dealFirstEnter, 500);
+					},
+					fail: (err) => {
+						console.log("getCardConfigQuery 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);
+
+							const rank = JSON.stringify(data);
+							this.dealNotice(rank);
+
+							this.getCountdown();
+							this.getActtime();
+
+							this.clear();
+							this.interval = setInterval(this.getCountdown, 60000);
+						}
+					},
+					fail: (err) => {
+						console.log("matchRsDetailQuery err", err)
+					},
+				});
+			},
+			btnBack() {
+				// const url = `action://to_home/`;
+				// tools.appAction(url);
+
+				// uni.navigateTo({
+				// 	url: "/pages/bm/style3/rankList?" + this.queryString
+				// });
+				const url = "/pages/bm/style3/rankList?" + this.queryString;
+				tools.appAction(url, "uni.navigateTo");
+			},
+			btnInfo() {
+				// console.log(this.$refs.mypopup);
+				this.$refs.mypopup.popupOpen();
+			},
+			onOverviewClick(ovtype) {
+				this.queryObj.ovtype = ovtype;
+				this.queryString = tools.objectToQueryString(this.queryObj);
+				// uni.navigateTo({
+				// 	url: "/pages/bm/style3/rankList?" + this.queryString
+				// });
+				const url = "/pages/bm/style3/rankList?" + this.queryString;
+				tools.appAction(url, "uni.navigateTo");
+			},
+		}
+	}
+</script>
+
+<style scoped>
+	.content {
+		width: 100vw;
+		/* 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; */
+	}
+
+	/* .top-oval {
+		position: relative;
+		z-index: 0;
+		margin-top: -180px;
+		margin-left: -10%;
+		width: 120%;
+		height: 280px;
+		background: linear-gradient(180deg, #ffffff 12.18%, #eeeeee 100%);
+		border-radius: 50%;
+		text-align: center;
+	}
+
+	.top-oval-text {
+		color: #333333;
+		font-size: 13px;
+		line-height: 386px;
+		pointer-events: auto;
+	}
+ */
+	.topbar-color-default {
+		color: #333333;
+	}
+
+	.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;
+	}
+
+	.mid {
+		width: 90%;
+		height: 120px;
+		position: relative;
+		z-index: 20;
+		margin-top: -100px;
+		background: #ffffff;
+		border-radius: 9px;
+		box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.13);
+		font-family: Source Han Sans CN;
+	}
+
+	.mid-1 {
+		width: 90%;
+		margin: 12px;
+		font-weight: 500;
+		color: #8e8e8e;
+		font-size: 14px;
+	}
+	
+	.mid-1-name {
+		max-width: 360rpx;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.mid-2 {
+		width: 92%;
+		/* margin: 0 10px; */
+	}
+
+	.mid-2-value {
+		font-weight: 900;
+		font-size: 22px;
+	}
+
+	.mid-2-text {
+		color: #989898;
+		font-size: 12px;
+	}
+
+	.mid-line {
+		width: 0px;
+		height: 45.04px;
+		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: 10px;
+		/* height: 70vh; */
+		justify-content: space-around;
+		/* justify-content: space-between; */
+	}
+
+	.main-title {
+		margin-bottom: 10px;
+		font-weight: 550;
+		color: #333333;
+		font-size: 16px;
+	}
 </style>

card/pages/bm/style3/signup.vue

@@ -7,11 +7,8 @@ https://oss-mbh5.colormaprun.com/card/#/pages/bm/style3/signup
 	<view class="body">
 		<view class="content uni-column">
 			<view class="uni-column" :class="cssTop">
-				<view class="topbar uni-row" :class="cssTopbarColor">
-					<uni-icons type="left" class="topbar-back" @click="btnBack"></uni-icons>
-					<text class="mcName">{{mcName}}</text>
-					<text class="topbar-rule" @click="btnInfo">规则</text>
-				</view>
+				<my-topbar :mcName="mcName" :class="cssTopbarColor"
+					@btnBackClick="btnBack" @btnInfoClick="btnInfo"></my-topbar>
 			</view>
 			<view class="main uni-column">
 				<view class="timebar uni-row">
@@ -23,7 +20,7 @@ https://oss-mbh5.colormaprun.com/card/#/pages/bm/style3/signup
 
 				<view class="introduce uni-column">
 					<text class="introduce-title">{{introduce.title}}</text>
-					<text class="introduce-content">{{introduce.content}}</text>
+					<text class="introduce-content" v-html="introduce.content"></text>
 				</view>
 				<button class="btnSignup btnSignup-enable" v-if="mcState<=1" @click="btnSignup">报 名</button>
 				<button class="btnSignup btnSignup-disable" v-if="mcState==2">活动已结束</button>
@@ -286,34 +283,70 @@ https://oss-mbh5.colormaprun.com/card/#/pages/bm/style3/signup
 									height: 170px;
 									padding-top: 36px;
 									justify-content: space-between;
-									background-image: url('static/backgroud/top_bg_egg3.png');
+									background-image: url('static/backgroud/top_bg_guoqing.png');
 									background-repeat: no-repeat;
-									background-position: center;
+									background-position-y: 20%;
 									background-size: cover;
 								}
 								.topbar-color{
-									color: #333333;
+									color: #ffffff;
 								}
 								.btnSignup-enable {
-									background-color: #ff870e !important;
+									background-color: #ff0000 !important;
 								}
 								.swiper-item-button {
-									background-color: #ff870e !important;
+									background-color: #ff0000 !important;
+								}
+								.uni-swiper-dot-active {
+									background: #ff0000 !important;
 								}
 							`,
-							"popupDataList": [{
-									"type": 1,
+							"popupDataList": [
+								{
+									"type": 2,
+									"data": {
+										"title": "基本图例",
+										"img": "/static/common/jbtl.png"
+									}
+								}, {
+									"type": 2,
 									"data": {
-										"title": "小飞龙定向赛",
-										"img": "/static/common/egg.png",
-										"content": "济南奥体中心“一场三馆”包括体育场、体育馆、网球馆和游泳馆，呈现出“东荷西柳”的总体布局。 体育场以济南的“市树”柳树为母题，将垂柳柔美飘逸的形态固化为建筑语言。"
+										"title": "基本标识",
+										"img": "/static/common/jbbs2.png"
 									}
 								},
-								"default"
+								{
+									"type": 7,
+									"data": {
+										"title": "活动规则",
+										"content": "<li>赛期内随时参赛、不限完赛次数、起点任选、实时排名 <li>起点-各途经点-结束点完整打卡为1次有效完赛 <li>赛事如有疑问，请咨询微信客服",
+										"imageList": [
+											{
+												"src": "/static/common/qrcode_wxkf.png",
+												"width": "100px",
+												"height": "100px"
+											}
+										]
+									}
+								},
+								{
+									"type": 7,
+									"data": {
+										"title": "活动奖励",
+										"content": "<li>途经点打卡1次，获1个百味豆<br><li>每次正确答题，再获1个百味豆<br><li>20个百味豆兑换1个鸡蛋<br><li>上不封顶！随时兑换！<br><text style='font-size:12px;color:#999999;'>(限本次活动百味豆，兑换以“蛋叔券”为准)</text><br><li>健身又能“薅羊毛”~",
+										"imageList": [
+											{
+												"src": "/static/common/jidanquan.png",
+												"width": "80px",
+												"height": "80px"
+											}
+										]
+									}
+								}
 							],
 							"introduce": {
 								"title": "介绍：",
-								"content": " · 小飞龙定向赛再次来袭！这次有五个场地哟~\r\n · 神秘“蛋叔”闪亮登场~\r\n · 蛋叔放大招，百味豆换鸡蛋！\r\n · 时不可待！冲鸭！\r\n\r\n · 能不能把蛋叔整郁闷，就看你的啦~\r\n · 还等啥？火速报名吧！"
+								"content": "<li>领秀城社区欢乐定向赛来袭 \r\n <li>领秀城 A、B、C、D、E、F 区及商业街、贵和购物广场等8个起点任选。\r\n <li>跑的多，得蛋多，神秘蛋叔赞助！\r\n <li>还等什么？火速报名吧！\r\n <li>定向赛场上，每一个人都是主角~"
 							}
 						}; */
 
@@ -548,32 +581,10 @@ https://oss-mbh5.colormaprun.com/card/#/pages/bm/style3/signup
 		background-size: cover;
 	}
 
-	.topbar {
-		width: 90%;
-		justify-content: space-between;
-	}
-
 	.topbar-color-default {
 		color: #333333;
 	}
 
-	.topbar-back {
-		width: 43rpx;
-		height: 43rpx;
-		color: inherit !important;
-		font-size: 48rpx !important;
-		/* opacity: 0; */
-	}
-
-	.topbar-rule {
-		font-size: 32rpx;
-	}
-
-	.mcName {
-		font-size: 40rpx;
-		font-weight: 550;
-	}
-
 	.main {
 		width: 76%;
 		min-height: 800rpx;
@@ -638,7 +649,7 @@ https://oss-mbh5.colormaprun.com/card/#/pages/bm/style3/signup
 	.introduce-content {
 		color: #333333;
 		font-size: 25rpx;
-		line-height: 36rpx;
+		line-height: 46rpx;
 		font-family: Source Han Sans CN;
 	}
 

card/pages/bm/style4/cardconfig.md

@@ -65,16 +65,16 @@ index卡片URL参数：type=团建活动&btnText=进入活动
 			}
 		},
 		{
-			type: 2,
-			data: {
-				title: "规则",
-				img: "/static/common/guize.png",
+			"type": 2,
+			"data": {
+				"title": "规则",
+				"img": "/static/common/guize.png"
 			}
 		}, {
-			type: 2,
-			data: {
-				title: "奖励",
-				img: "/static/common/jiangli.png",
+			"type": 2,
+			"data": {
+				"title": "奖励",
+				"img": "/static/common/jiangli.png"
 			}
 		},
 		"default"
@@ -129,11 +129,11 @@ index卡片URL参数：type=团建活动&btnText=进入活动
 	",
 	"pathList": {
 		"row1": [{
-				"type": 3, // 1: 比赛路线  2: 导航到指定地点  3: 比赛路线 + 导航
+				"type": 3,
 				"pathImg": "/static/common/sdzxxq.png",
 				"path": {
 					"ocaId": 1,
-					"mcType": 3 // 赛事类型 1 普通活动 2 线下赛 3 线上赛
+					"mcType": 3
 				},
 				"navImg": "/static/common/nav.png",
 				"point": {
@@ -143,11 +143,11 @@ index卡片URL参数：type=团建活动&btnText=进入活动
 				}
 			},
 			{
-				"type": 3, // 1: 比赛路线  2: 导航到指定地点  3: 比赛路线 + 导航
+				"type": 3,
 				"pathImg": "/static/common/sdbtqxq.png",
 				"path": {
 					"ocaId": 1,
-					"mcType": 3 // 赛事类型 1 普通活动 2 线下赛 3 线上赛
+					"mcType": 3
 				},
 				"navImg": "/static/common/nav.png",
 				"point": {
@@ -158,11 +158,11 @@ index卡片URL参数：type=团建活动&btnText=进入活动
 			}
 		],
 		"row2": [{
-				"type": 3, // 1: 比赛路线  2: 导航到指定地点  3: 比赛路线 + 导航
+				"type": 3,
 				"pathImg": "/static/common/sdhjlxq.png",
 				"path": {
 					"ocaId": 1,
-					"mcType": 3 // 赛事类型 1 普通活动 2 线下赛 3 线上赛
+					"mcType": 3
 				},
 				"navImg": "/static/common/nav.png",
 				"point": {
@@ -172,11 +172,11 @@ index卡片URL参数：type=团建活动&btnText=进入活动
 				}
 			},
 			{
-				"type": 3, // 1: 比赛路线  2: 导航到指定地点  3: 比赛路线 + 导航
+				"type": 3,
 				"pathImg": "/static/common/sdrjyxq.png",
 				"path": {
 					"ocaId": 1,
-					"mcType": 3 // 赛事类型 1 普通活动 2 线下赛 3 线上赛
+					"mcType": 3
 				},
 				"navImg": "/static/common/nav.png",
 				"point": {
@@ -187,11 +187,11 @@ index卡片URL参数：type=团建活动&btnText=进入活动
 			}
 		],
 		"row3": [{
-				"type": 3, // 1: 比赛路线  2: 导航到指定地点  3: 比赛路线 + 导航
+				"type": 3,
 				"pathImg": "/static/common/sdxlsxq.png",
 				"path": {
 					"ocaId": 1,
-					"mcType": 3 // 赛事类型 1 普通活动 2 线下赛 3 线上赛
+					"mcType": 3
 				},
 				"navImg": "/static/common/nav.png",
 				"point": {
@@ -201,11 +201,11 @@ index卡片URL参数：type=团建活动&btnText=进入活动
 				}
 			},
 			{
-				"type": 3, // 1: 比赛路线  2: 导航到指定地点  3: 比赛路线 + 导航
+				"type": 3,
 				"pathImg": "/static/common/sdqfsxq.png",
 				"path": {
 					"ocaId": 1,
-					"mcType": 3 // 赛事类型 1 普通活动 2 线下赛 3 线上赛
+					"mcType": 3
 				},
 				"navImg": "/static/common/nav.png",
 				"point": {
@@ -229,17 +229,17 @@ index卡片URL参数：type=团建活动&btnText=进入活动
 			}
 		},
 		{
-			type: 2,
-			data: {
-				title: "规则",
-				img: "/static/common/guize.png",
+			"type": 2,
+			"data": {
+				"title": "规则",
+				"img": "/static/common/guize.png"
 			}
 		},
 		{
-			type: 2,
-			data: {
-				title: "奖励",
-				img: "/static/common/jiangli.png",
+			"type": 2,
+			"data": {
+				"title": "奖励",
+				"img": "/static/common/jiangli.png"
 			}
 		},
 		"default"
@@ -290,17 +290,17 @@ index卡片URL参数：type=团建活动&btnText=进入活动
 			}
 		},
 		{
-			type: 2,
-			data: {
-				title: "规则",
-				img: "/static/common/guize.png",
+			"type": 2,
+			"data": {
+				"title": "规则",
+				"img": "/static/common/guize.png"
 			}
 		},
 		{
-			type: 2,
-			data: {
-				title: "奖励",
-				img: "/static/common/jiangli.png",
+			"type": 2,
+			"data": {
+				"title": "奖励",
+				"img": "/static/common/jiangli.png"
 			}
 		},
 		"default"
@@ -319,6 +319,6 @@ index卡片URL参数：type=团建活动&btnText=进入活动
 		}
 	],
 	"param": {
-		"labelRightAnswerNum": "校园文化输出"
+		"labelRightAnswerNum": "文化输出"
 	}
 }

card/pages/bm/style4/rankList.vue

@@ -7,13 +7,9 @@ https://oss-mbh5.colormaprun.com/card/#/pages/bm/style4/rankList
 	<view class="body">
 		<view class="content uni-column">
 			<view class="uni-column" :class="cssTop">
-				<view class="topbar uni-row" :class="cssTopbarColor">
-					<uni-icons type="left" class="topbar-back" @click="btnBack"></uni-icons>
-					<text class="mcName">{{mcName}}</text>
-					<text class="topbar-rule" @click="btnInfo">规则</text>
-					<!-- <image mode="aspectFit" class="topbar-info" @click="btnInfo" src="/static/default/info.png"></image> -->
-				</view>
-
+				<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="logo"></view>
 					<view class="tcbar uni-row uni-jcsb">
@@ -54,6 +50,7 @@ https://oss-mbh5.colormaprun.com/card/#/pages/bm/style4/rankList
 
 			<my-popup ref="mypopup" :dataList="popupDataList" :acttime="acttime"></my-popup>
 			<my-popup ref="mypopupExchg" :dataList="popupExchgList"></my-popup>
+			<my-popup ref="mypopupMessage" :dataList="popupMessageList"></my-popup>
 
 		</view>
 	</view>
@@ -74,6 +71,8 @@ https://oss-mbh5.colormaprun.com/card/#/pages/bm/style4/rankList
 		apiIsAllowMcSignUp,
 		apiMapListQuery,
 		apiCompStatisticQuery,
+		apiUnReadMessageQuery,
+		apiReadMessage,
 		checkResCode
 	} from '/common/api';
 
@@ -84,6 +83,7 @@ https://oss-mbh5.colormaprun.com/card/#/pages/bm/style4/rankList
 				firstEnterKey: 'firstEnter-bm-style4',
 				rankKey: "rank-bm-style4",
 				mapKey: "rank-bm-style4-map",
+				messageKey: "message-bm-style4",
 				queryObj: {},
 				queryString: "",
 				token: "",
@@ -130,8 +130,8 @@ https://oss-mbh5.colormaprun.com/card/#/pages/bm/style4/rankList
 				// 		{text: "个人(兴隆校区)", value: 3}
 				// 	]}
 				// ],
-				// tab2Items: ["总距离", "打点数", "百味豆", "配速"],
-				tab2Items: ["总里程", "累计打点", "校园文化", "最快配速", "单场用时"],
+				// tab2Items: ["打点数", "总里程", "百味豆", "配速"],
+				tab2Items: ["累计积分", "总里程", "校园文化", "最快配速", "单场用时"],
 				tab2ItemsMark: [{
 					textColor: "#ff6203",
 					icon: "static/common/award.png"
@@ -139,11 +139,11 @@ https://oss-mbh5.colormaprun.com/card/#/pages/bm/style4/rankList
 				tabActiveColor: "#81cd00",
 
 				// 成绩类型列表
-				rankTypeList: ["totalDistance", "totalCp", "rightAnswerPer", "fastPace", "fastPace"],
+				rankTypeList: ["totalCp", "totalDistance", "rightAnswerPer", "fastPace", "fastPace"],
 				// 团体成绩列表
-				rank1List: ["teamDistanceRs", "teamCpRs", "teamRightAnswerPerRs", "teamPaceRs", "teamSpeedRs"],
+				rank1List: ["teamCpRs", "teamDistanceRs", "teamRightAnswerPerRs", "teamPaceRs", "teamSpeedRs"],
 				// 个人成绩列表
-				rank2List: ["regionDistanceRs", "regionCpRs", "regionRightAnswerPerRs", "regionPaceRs", "regionSpeedRs"],
+				rank2List: ["regionCpRs", "regionDistanceRs", "regionRightAnswerPerRs", "regionPaceRs", "regionSpeedRs"],
 
 				cssTop: "",
 				cssTopbarColor: "",
@@ -152,7 +152,9 @@ https://oss-mbh5.colormaprun.com/card/#/pages/bm/style4/rankList
 				},
 				// selectedMapId: 0, // 用户选择的地图ID
 				popupDataList: [],
-				popupExchgList: []
+				popupExchgList: [],
+				popupMessageList: [],
+				// mqIdListStr: "", // 已读消息id列表 逗号分隔
 			}
 		},
 		computed: {},
@@ -174,6 +176,9 @@ https://oss-mbh5.colormaprun.com/card/#/pages/bm/style4/rankList
 			this.mapKey += "-" + this.ecId;
 			console.log("mapKey:", this.mapKey);
 
+			this.messageKey += "-" + this.ecId;
+			console.log("messageKey:", this.messageKey);
+			
 			tools.removeCssCode();
 
 			const mapValue = uni.getStorageSync(this.mapKey);
@@ -446,6 +451,7 @@ https://oss-mbh5.colormaprun.com/card/#/pages/bm/style4/rankList
 						}; */
 
 						this.loadConfig(config);
+						this.getUnReadMessageQuery();
 						this.matchRsDetailQuery();
 
 						setTimeout(this.dealFirstEnter, 500);
@@ -690,6 +696,77 @@ https://oss-mbh5.colormaprun.com/card/#/pages/bm/style4/rankList
 					},
 				});
 			},
+			// 未读消息列表查询
+			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 += ",";
+								// }
+							}
+			
+							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);
+					},
+				});
+			},
+			// 标记消息已读
+			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({
@@ -710,6 +787,10 @@ https://oss-mbh5.colormaprun.com/card/#/pages/bm/style4/rankList
 				// 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
@@ -729,7 +810,7 @@ https://oss-mbh5.colormaprun.com/card/#/pages/bm/style4/rankList
 				this.tab2Current = val;
 			},
 			onSelectChange(val) {
-				console.log("onSelectChange: ", val);
+				// console.log("onSelectChange: ", val);
 				this.ocaId = val.value;
 				this.getCardRankDetailQuery();
 				
@@ -756,32 +837,6 @@ https://oss-mbh5.colormaprun.com/card/#/pages/bm/style4/rankList
 		background-size: cover;
 	}
 
-	.topbar {
-		width: 90%;
-		justify-content: space-between;
-	}
-
-	.topbar-color-default {
-		color: #ffffff !important;
-	}
-
-	.topbar-back {
-		width: 43rpx;
-		height: 43rpx;
-		color: inherit !important;
-		font-size: 48rpx !important;
-		/* opacity: 0; */
-	}
-
-	.topbar-info {
-		width: 46rpx;
-		height: 46rpx;
-	}
-
-	.topbar-rule {
-		font-size: 32rpx;
-	}
-
 	.topcontent {
 		width: 90%;
 		/* height: 90%; */

card/pages/bm/style4/rankOverview.vue

@@ -7,12 +7,9 @@ https://oss-mbh5.colormaprun.com/card/#/pages/bm/style4/rankOverview
 	<view class="body">
 		<view class="content uni-column">
 			<view class="uni-column" :class="cssTop">
-				<view class="topbar uni-row" :class="cssTopbarColor">
-					<uni-icons type="left" class="topbar-back" @click="btnBack"></uni-icons>
-					<text class="mcName" @click="playMusic">{{mcName}}</text>
-					<text class="topbar-rule" @click="btnInfo">规则</text>
-					<!-- <image mode="aspectFit" class="topbar-info" @click="btnInfo" src="/static/default/info.png"></image> -->
-				</view>
+				<my-topbar :mcName="mcName" :class="cssTopbarColor"
+					@btnBackClick="btnBack" @btnInfoClick="btnInfo"></my-topbar>
+				
 				<view class="topcontent uni-column uni-jcsa">
 					<view class="logo"></view>
 					<text class="top-acttime">{{fmtMcTime2(beginSecond, endSecond)}}</text>
@@ -519,16 +516,16 @@ https://oss-mbh5.colormaprun.com/card/#/pages/bm/style4/rankOverview
 									}
 								},
 								{
-									type: 2,
-									data: {
-										title: "规则",
-										img: "/static/common/guize.png",
+									"type": 2,
+									"data": {
+										"title": "规则",
+										"img": "/static/common/guize.png"
 									}
 								}, {
-									type: 2,
-									data: {
-										title: "奖励",
-										img: "/static/common/jiangli.png",
+									"type": 2,
+									"data": {
+										"title": "奖励",
+										"img": "/static/common/jiangli.png"
 									}
 								},
 								"default"
@@ -752,37 +749,10 @@ https://oss-mbh5.colormaprun.com/card/#/pages/bm/style4/rankOverview
 		/* background-size: cover; */
 	}
 
-	.topbar {
-		width: 90%;
-		justify-content: space-between;
-	}
-
 	.topbar-color-default {
 		color: #333333;
 	}
 
-	.topbar-back {
-		width: 43rpx;
-		height: 43rpx;
-		color: inherit !important;
-		font-size: 48rpx !important;
-		/* opacity: 0; */
-	}
-
-	.topbar-info {
-		width: 46rpx;
-		height: 46rpx;
-	}
-
-	.topbar-rule {
-		font-size: 32rpx;
-	}
-
-	.mcName {
-		font-size: 40rpx;
-		font-weight: 550;
-	}
-
 	.topcontent {
 		height: 90%;
 		margin-bottom: 50px;

card/pages/bm/style4/signup.vue

@@ -7,11 +7,9 @@ https://oss-mbh5.colormaprun.com/card/#/pages/bm/style4/signup
 	<view class="body">
 		<view class="content uni-column">
 			<view class="uni-column" :class="cssTop">
-				<view class="topbar uni-row" :class="cssTopbarColor">
-					<uni-icons type="left" class="topbar-back" @click="btnBack"></uni-icons>
-					<text class="mcName">{{mcName}}</text>
-					<text class="topbar-rule" @click="btnInfo">规则</text>
-				</view>
+				<my-topbar :mcName="mcName" :class="cssTopbarColor"
+					@btnBackClick="btnBack" @btnInfoClick="btnInfo"></my-topbar>
+
 				<view class="topcontent uni-column uni-jcsa">
 					<view class="logo"></view>
 					<text class="top-acttime">{{fmtMcTime2(beginSecond, endSecond)}}</text>
@@ -29,7 +27,7 @@ https://oss-mbh5.colormaprun.com/card/#/pages/bm/style4/signup
 
 				<view class="introduce uni-column">
 					<text class="introduce-title">{{introduce.title}}</text>
-					<text class="introduce-content">{{introduce.content}}</text>
+					<text class="introduce-content" v-html="introduce.content"></text>
 				</view>
 				
 				<button class="btnSignup btnSignup-enable" v-if="mcState<=1" @click="btnSignup">报 名</button>
@@ -634,27 +632,10 @@ https://oss-mbh5.colormaprun.com/card/#/pages/bm/style4/signup
 		background-size: cover;
 	}
 
-	.topbar {
-		width: 90%;
-		justify-content: space-between;
-	}
-
 	.topbar-color-default {
 		color: #333333;
 	}
 
-	.topbar-back {
-		width: 43rpx;
-		height: 43rpx;
-		color: inherit !important;
-		font-size: 48rpx !important;
-		/* opacity: 0; */
-	}
-
-	.topbar-rule {
-		font-size: 32rpx;
-	}
-
 	.topcontent {
 		height: 90%;
 		margin-bottom: 30px;
@@ -752,7 +733,7 @@ https://oss-mbh5.colormaprun.com/card/#/pages/bm/style4/signup
 	.introduce-content {
 		color: #333333;
 		font-size: 25rpx;
-		line-height: 36rpx;
+		line-height: 46rpx;
 		font-family: Source Han Sans CN;
 	}
 

card/pages/jbs/rankList.vue

@@ -269,7 +269,6 @@ https://oss-mbh5.colormaprun.com/card/#/pages/jbs/rankList
 								background-position: center, 0px 0px;
 								background-size: auto 22vh , cover;
 							}
-							
 							.logo{
 								width: 150px;
 								height: 150px;