v1.3.0

card/App.vue

@@ -39,10 +39,26 @@
 		align-items: center;
 	}
 	
+	.uni-jct {
+		justify-content: start;
+	}
+	
 	.uni-jcc {
 		justify-content: center;
 	}
 	
+	.uni-jcsa {
+		justify-content: space-around;
+	}
+	
+	.uni-jcsb {
+		justify-content: space-between;
+	}
+	
+	.uni-jcse {
+		justify-content: space-evenly;
+	}
+	
 	.hidden {
 		visibility: hidden;
 	}

card/common/api.js

@@ -4,7 +4,7 @@ export const apiServer = process.env.VUE_APP_BASE_URL;
 // console.log("apiServer", apiServer);
 
 export const token = '';
-// export const token = '5c654da466ad325c6a1121e6d9e18f21';
+// export const token = '1307af38ab633cd78bccc6d14f5dfa52';
 
 // 卡片基本信息查询
 export const apiCardBaseQuery = apiServer + 'CardBaseQuery';
@@ -12,6 +12,9 @@ export const apiCardBaseQuery = apiServer + 'CardBaseQuery';
 // 卡片对应活动或赛事详情查询
 export const apiCardDetailQuery = apiServer + 'CardDetailQuery';
 
+// 卡片对应线上赛多个活动查询
+export const apiMatchRsDetailQuery = apiServer + 'MatchRsDetailQuery';
+
 // 排名查询
 export const apiCardRankDetailQuery = apiServer + 'CardRankDetailQuery';
 

card/common/openmap.js

@@ -16,6 +16,88 @@ export function getDeviceType() {
 // longitude, latitude  地点经纬度
 // name	地点名称
 export function openNavigation(mapAppId, longitude, latitude, name) {
+	let url = ""; // app url
+	let referer = "彩图奔跑"; //应用名称
+	
+	const deviceType = getDeviceType();
+	
+	switch (mapAppId) {
+		//下面是拼接url,不同系统以及不同地图都有不同的拼接字段
+		case 1: //打开高德地图
+			if (deviceType == "Android") { // 安卓
+				url =
+					`androidamap://viewMap?sourceApplication=appname&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
+			} else { //苹果
+				url =
+					`iosamap://viewMap?sourceApplication=applicationName&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
+			}
+			break;
+		case 2: //打开百度地图
+			if (deviceType == "Android") { // 安卓
+				url =
+					`baidumap://map/marker?location=${latitude},${longitude}&title=${name}&content=${name}&src=andr.baidu.openAPIdemo&coord_type=gcj02`;
+			} else { //苹果
+				url =
+					`iosamap://map/marker?location=${latitude},${longitude}&title=${name}&content=${name}&src=ios.baidu.openAPIdemo&coord_type=gcj02`;
+			}
+			break;
+		case 3: //打开腾讯地图
+			if (deviceType == "Android") { // 安卓
+				url =
+					`qqmap://map/geocoder?coord=${latitude},${longitude}&title${name}&addr=${name}=&referer=${referer}`
+			} else { //苹果
+				url =
+					`qqmap://map/geocoder?coord=${latitude},${longitude}&title${name}&addr=${name}=&referer=${referer}`;
+			}
+			break;
+	}
+	
+	// 如果选中
+	if (url != "") {
+		url = encodeURI(url);
+		// window.open(url);
+		window.location.href = url;
+	}
+}
+
+// 打开指定的地图APP
+// mapAppId 1: 高德地图  2:百度地图  3: 腾讯地图
+// longitude, latitude  地点经纬度
+// name	地点名称
+export function openNavigation2(mapAppId, longitude, latitude, name) {
+	let url = ""; // app url
+	let webUrl = ""; // web url 用来为用户未安装导航软件时打开浏览器所使用url
+	let referer = "彩图奔跑"; //应用名称
+	
+	switch (mapAppId) {
+		//下面是拼接url,不同系统以及不同地图都有不同的拼接字段
+		case 1: //打开高德地图
+			url =
+				`https://uri.amap.com/marker?position=${longitude},${latitude}&name=${name}&src=mypage&coordinate=gaode`
+			break;
+		case 2: //打开百度地图
+			url =
+				`http://api.map.baidu.com/marker?location=${latitude},${longitude}&title=${name}&content=${name}&output=html&src=webapp.baidu.openAPIdemo`
+			break;
+		case 3: //打开腾讯地图
+			url =
+				`https://apis.map.qq.com/uri/v1/marker?marker=coord:${latitude},${longitude}&title=${name}&addr=${name}&referer=${referer}`
+			break;
+	}
+	
+	// 如果选中
+	if (url != "") {
+		url = encodeURI(url);
+		window.open(url);
+		// window.location.href = url;
+	}
+}
+
+// 打开指定的地图APP
+// mapAppId 1: 高德地图  2:百度地图  3: 腾讯地图
+// longitude, latitude  地点经纬度
+// name	地点名称
+export function openNavigation3(mapAppId, longitude, latitude, name) {
 	let url = ""; // app url
 	let webUrl = ""; // web url 用来为用户未安装导航软件时打开浏览器所使用url
 	let referer = "彩图奔跑"; //应用名称
@@ -117,7 +199,7 @@ export function openNavigation(mapAppId, longitude, latitude, name) {
 
 // [App平台] 打开地图
 // 导航 会打开导航菜单供用户选择
-export function openNavigation2(longitude, latitude, name) {
+export function openNavigation4(longitude, latitude, name) {
 	let url = ""; // app url
 	let webUrl = ""; // web url 用来为用户未安装导航软件时打开浏览器所使用url
 	let referer = "SKK"; //应用名称

card/common/tools.js

@@ -86,7 +86,13 @@ 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}″`;
+			else
+				return `${minutes}′${remainingSeconds}″`;
+		}
+		else if (style == 2) {
+			if (hours > 0)
+				return `${hours*60+minutes}′${remainingSeconds}″`;
 			else
 				return `${minutes}′${remainingSeconds}″`;
 		}

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

@@ -8,7 +8,10 @@
 				<view class="item-detail uni-row">
 					<text
 						class="item-userName">{{ teamType >= 0 ? getTeamName(teamType, item.userName) : item.userName}}</text>
-					<text class="item-totalTime">{{fmtTime(item.totalTime)}}</text>
+					<text class="item-totalTime" v-if="rankType == 'totalDistance'">{{fmtDistanct(item.inRankNum)}} km</text>
+					<text class="item-totalTime" v-else-if="rankType == 'fastPace'">{{fmtPace(item.inRankNum)}}</text>
+					<text class="item-totalTime" v-else-if="rankType == 'totalCp' || rankType == 'totalSysPoint'">{{item.inRankNum}} 个</text>
+					<text class="item-totalTime" v-else>{{fmtTime(item.totalTime)}}</text>
 				</view>
 			</template>
 		</uni-list-item>
@@ -29,6 +32,10 @@
 				type: Number,
 				default: -1
 			},
+			rankType: {	// totalDistance:总距离 totalCp:打点数 totalSysPoint:百味豆 fastPace:配速
+				type: String,
+				default: ""
+			},
 			myOldRankNum: { // 我的旧排名
 				type: Number,
 				default: null
@@ -88,6 +95,17 @@
 				else
 					return '--';
 			},
+			// 格式化 距离
+			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);
+			},
 			// 排名上升
 			moveRankUp(i, animation = false) {
 				// console.log("moveRankUp:", i, animation, this.rankRs[i]);
@@ -179,9 +197,10 @@
 	.list {
 		width: 90%;
 		height: 53vh;
-		/* margin-top: 20rpx; */
-		/* margin-top: 1vh; */
+		flex-grow: 1;
 		overflow: scroll;
+		margin-top: 16rpx;
+		margin-bottom: 16rpx;
 	}
 
 	.list-item {

card/manifest.json

@@ -2,8 +2,8 @@
     "name" : "card",
     "appid" : "__UNI__A61F96B",
     "description" : "",
-    "versionName" : "1.2.2",
-    "versionCode" : 122,
+    "versionName" : "1.3.0",
+    "versionCode" : 130,
     "transformPx" : false,
     /* 5+App特有相关 */
     "app-plus" : {

card/pages.json

@@ -53,6 +53,30 @@
 			"style": {
 				"navigationBarTitleText": "[报名] 样式1 - 排名列表"
 			}
+		},
+		{
+			"path": "pages/bm/style2/index",
+			"style": {
+				"navigationBarTitleText": "[报名] 样式2"
+			}
+		},
+		{
+			"path": "pages/bm/style2/signup",
+			"style": {
+				"navigationBarTitleText": "[报名] 样式2 - 报名"
+			}
+		},
+		{
+			"path": "pages/bm/style2/rankOverview",
+			"style": {
+				"navigationBarTitleText": "[报名] 样式2 - 排名总览"
+			}
+		},
+		{
+			"path": "pages/bm/style2/rankList",
+			"style": {
+				"navigationBarTitleText": "[报名] 样式2 - 排名列表"
+			}
 		}
 	],
 	"globalStyle": {

card/pages/achievement/index.vue

@@ -78,6 +78,7 @@ https://oss-mbh5.colormaprun.com/card/#/pages/achievement/index
 	export default {
 		data() {
 			return {
+				queryObj: {},
 				queryString: "",
 				token: "",
 				tokenValid: false,
@@ -97,11 +98,12 @@ https://oss-mbh5.colormaprun.com/card/#/pages/achievement/index
 			}
 		},
 		computed: {},
-		onLoad(event) { // 类型非必填，可自动推导
-			// console.log(event);
-			this.queryString = tools.objectToQueryString(event);
+		onLoad(query) { // 类型非必填，可自动推导
+			// console.log(query);
+			this.queryObj = query;
+			this.queryString = tools.objectToQueryString(this.queryObj);
 			// console.log(queryString);
-			this.token = event["token"] ?? token;
+			this.token = query["token"] ?? token;
 
 			this.getMonthlyChallengeQuery();
 			this.getAchievementQuery();

card/pages/bm/style1/index.vue

@@ -1,5 +1,5 @@
 <!-- 
-[报名] 样式1
+[报名] 样式1 - 卡片页
 http://localhost:5173/card/#/pages/bm/style1/index
 https://oss-mbh5.colormaprun.com/card/#/pages/bm/style1/index
  -->
@@ -42,6 +42,7 @@ https://oss-mbh5.colormaprun.com/card/#/pages/bm/style1/index
 			return {
 				pageName: "index",
 				rankKey: "rank-bm-style1",
+				queryObj: {},
 				queryString: "",
 				token: "",
 				
@@ -69,17 +70,18 @@ https://oss-mbh5.colormaprun.com/card/#/pages/bm/style1/index
 			}
 		},
 		computed: {},
-		onLoad(event) { // 类型非必填，可自动推导
-			// console.log(event);
-			this.queryString = tools.objectToQueryString(event);
+		onLoad(query) { // 类型非必填，可自动推导
+			// console.log(query);
+			this.queryObj = query;
+			this.queryString = tools.objectToQueryString(this.queryObj);
 			// console.log(queryString);
-			this.token = event["token"] ?? token;
-			this.ecId = event["id"] ?? 0;
+			this.token = query["token"] ?? token;
+			this.ecId = query["id"] ?? 0;
 			
-			// this.contentBg = "content-bg-" + (event["bg"] ?? "green");
-			// this.logoSrc = "/static/logo/" + (event["logo"] ?? "jbs") + '.png';
-			this.type = event["type"] ?? "锦标赛";
-			this.btnText = event["btnText"] ?? "开始比赛";
+			// this.contentBg = "content-bg-" + (query["bg"] ?? "green");
+			// this.logoSrc = "/static/logo/" + (query["logo"] ?? "jbs") + '.png';
+			this.type = query["type"] ?? "锦标赛";
+			this.btnText = query["btnText"] ?? "开始比赛";
 			
 			this.rankKey += "-" + this.ecId;
 			console.log("rankKey:", this.rankKey);

card/pages/bm/style1/rankList.vue

@@ -5,12 +5,13 @@ https://oss-mbh5.colormaprun.com/card/#/pages/bm/style1/rankList
  -->
 <template>
 	<view class="body">
-		<view class="content">
+		<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>
-					<image mode="aspectFit" class="topbar-info" @click="btnInfo" src="/static/default/info.png"></image>
+					<text class="topbar-rule" @click="btnInfo" >规则</text>
+					<!-- <image mode="aspectFit" class="topbar-info" @click="btnInfo" src="/static/default/info.png"></image> -->
 				</view>
 
 				<view class="topcontent uni-column">
@@ -83,6 +84,7 @@ https://oss-mbh5.colormaprun.com/card/#/pages/bm/style1/rankList
 				pageName: "rankList",
 				firstEnterKey: 'firstEnter-bm',
 				rankKey: "rank-bm-style1",
+				queryObj: {},
 				queryString: "",
 				token: "",
 
@@ -94,6 +96,7 @@ https://oss-mbh5.colormaprun.com/card/#/pages/bm/style1/rankList
 				beginSecond: null, // 活动或赛事开始时间戳，单位秒
 				endSecond: null, // 活动或赛事结束时间戳，单位秒
 				coiName: "", // 已报名单位名称，可为空
+				ocaId: 0,	// 关联id，带入到App活动详情页面
 				teamNum: 0, // 已报名队伍编号，可为0
 
 				mcState: 0 ,	// 赛事/活动状态 0: 未开始  1: 进行中  2: 已结束
@@ -117,12 +120,13 @@ https://oss-mbh5.colormaprun.com/card/#/pages/bm/style1/rankList
 			}
 		},
 		computed: {},
-		onLoad(event) { // 类型非必填，可自动推导
-			// console.log(event);
-			this.queryString = tools.objectToQueryString(event);
+		onLoad(query) { // 类型非必填，可自动推导
+			// console.log(query);
+			this.queryObj = query;
+			this.queryString = tools.objectToQueryString(this.queryObj);
 			// console.log(queryString);
-			this.token = event["token"] ?? token;
-			this.ecId = event["id"] ?? 0;
+			this.token = query["token"] ?? token;
+			this.ecId = query["id"] ?? 0;
 			
 			this.firstEnterKey += "-" + this.ecId;
 			console.log("firstEnterKey:", this.firstEnterKey);
@@ -375,6 +379,7 @@ https://oss-mbh5.colormaprun.com/card/#/pages/bm/style1/rankList
 						this.endSecond = data.endSecond;
 						this.coiName = data.coiName;
 						this.teamNum = data.teamNum;
+						this.ocaId = data.ocaId;
 						
 						this.mcState = tools.checkMcState(this.beginSecond, this.endSecond);
 						
@@ -471,12 +476,14 @@ https://oss-mbh5.colormaprun.com/card/#/pages/bm/style1/rankList
 				window.location.href = `action://to_home/`;
 			},
 			btnReGroup() {
+				this.queryObj.from = "rankList";
+				this.queryString = tools.objectToQueryString(this.queryObj);
 				uni.navigateTo({
-					url: '/pages/bm/style1/signup?from=rankList&' + this.queryString
+					url: '/pages/bm/style1/signup?' + this.queryString
 				});
 			},
 			btnStart() {
-				window.location.href = `action://to_detail/?id=${this.mcId}&matchType=${this.mcType}`;
+				window.location.href = `action://to_detail/?id=${this.ocaId}&matchType=${this.mcType}`;
 			},
 			btnInfo() {
 				// console.log(this.$refs.mypopup);
@@ -528,12 +535,17 @@ https://oss-mbh5.colormaprun.com/card/#/pages/bm/style1/rankList
 		height: 46rpx;
 	}
 
+	.topbar-rule {
+		color: white;
+		font-size: 32rpx;
+	}
+	
 	.mcName {
 		color: white;
 		font-size: 39rpx;
 		font-weight: bold;
 	}
-
+	
 	.topcontent {
 		/* height: 1300rpx; */
 		/* background-color: #2e85ec; */
@@ -596,7 +608,8 @@ https://oss-mbh5.colormaprun.com/card/#/pages/bm/style1/rankList
 
 	.main {
 		width: 100%;
-		height: 70vh;
+		/* height: 70vh; */
+		flex-grow: 1;
 		justify-content: space-around;
 		/* justify-content: space-between; */
 	}
@@ -609,6 +622,7 @@ https://oss-mbh5.colormaprun.com/card/#/pages/bm/style1/rankList
 	.tab-view {
 		width: 100%;
 		/* height: 69vh; */
+		flex-grow: 1;
 	}
 
 	.btnStart {

card/pages/bm/style1/signup.vue

@@ -10,7 +10,8 @@ https://oss-mbh5.colormaprun.com/card/#/pages/bm/style1/signup
 				<view class="topbar uni-row">
 					<image mode="aspectFit" class="topbar-back" @click="btnBack" src="/static/default/back.png"></image>
 					<text class="mcName">{{mcName}}</text>
-					<image mode="aspectFit" class="topbar-info" @click="btnInfo" src="/static/default/info.png"></image>
+					<text class="topbar-rule" @click="btnInfo" >规则</text>
+					<!-- <image mode="aspectFit" class="topbar-info" @click="btnInfo" src="/static/default/info.png"></image> -->
 				</view>
 				<view :class="cssLogo"></view>
 				<view class="toptime uni-row">
@@ -71,6 +72,7 @@ https://oss-mbh5.colormaprun.com/card/#/pages/bm/style1/signup
 				pageName: "signup",
 				firstEnterKey: 'firstEnter-bm',
 				rankKey: "rank-bm-style1",
+				queryObj: {},
 				queryString: "",
 				from: "", // 来源页面
 				token: "",
@@ -102,13 +104,14 @@ https://oss-mbh5.colormaprun.com/card/#/pages/bm/style1/signup
 		},
 		computed: {
 		},
-		onLoad(event) { // 类型非必填，可自动推导
-			// console.log(event);
-			this.queryString = tools.objectToQueryString(event);
+		onLoad(query) { // 类型非必填，可自动推导
+			// console.log(query);
+			this.queryObj = query;
+			this.queryString = tools.objectToQueryString(this.queryObj);
 			// console.log(queryString);
-			this.from = event["from"] ?? "";
-			this.token = event["token"] ?? token;
-			this.ecId = event["id"] ?? 0;
+			this.from = query["from"] ?? "";
+			this.token = query["token"] ?? token;
+			this.ecId = query["id"] ?? 0;
 			
 			this.firstEnterKey += "-" + this.ecId;
 			console.log("firstEnterKey:", this.firstEnterKey);
@@ -601,6 +604,11 @@ https://oss-mbh5.colormaprun.com/card/#/pages/bm/style1/signup
 		height: 46rpx;
 	}
 
+	.topbar-rule {
+		color: white;
+		font-size: 32rpx;
+	}
+	
 	.mcName {
 		color: white;
 		font-size: 40rpx;

card/pages/bm/style2/cardconfig.md

@@ -0,0 +1,132 @@
+卡片页面定制
+
+[小飞龙]
+
+"index": {
+	"css": "
+		.content-bg{
+			background: url('static/cardbg/xfl2.png');
+			background-size: cover;
+		}
+		
+		.logo{
+			width: 40vw;
+			height: 40vw;
+			background: url('static/logo/xfl.png') no-repeat center;
+			background-size: contain;
+		}
+	"
+},
+
+"signup": {
+	"css": "
+		.top{
+			width: 100%;
+			height: 230px;
+			padding-top: 36px;
+			justify-content: space-between;
+			background-image: url("static/backgroud/top_bg_aoti.png");
+			background-repeat: no-repeat;
+			background-position: center;
+			background-size: cover;
+		}
+		.topbar-color{
+			color: #5b9100;
+		}
+		.swiper-item-button {
+			background-color: #81cd00 !important;
+		}
+	",
+	"popupDataList": [{
+			"type": 1,
+			"data": {
+				"title": "小飞龙定向赛",
+				"img": "/static/logo/xfl.png",
+				"content": "济南奥体中心“一场三馆”包括体育场、体育馆、网球馆和游泳馆，呈现出“东荷西柳”的总体布局。 体育场以济南的“市树”柳树为母题，将垂柳柔美飘逸的形态固化为建筑语言。"
+			}
+		},
+		"default"
+	],
+	"introduce": {
+		"title": "介绍：",
+		"content": "济南奥体中心“一场三馆”包括体育场、体育馆、网球馆和游泳馆，呈现出“东荷西柳”的总体布局。 体育场以济南的“市树”柳树为母题，将垂柳柔美飘逸的形态固化为建筑语言。"
+	}
+},
+
+"rankOverview": {
+	"css": "
+	",
+	"pathList": {
+		"row1": [{
+				"type": 2, // 1: 比赛路线  2: 导航到指定地点
+				"img": "/static/common/dhdqdwz.png",
+				"point": {
+					"longitude": 117.022194,
+					"latitude": 36.661612,
+					"name": "小飞龙定向赛起始点"
+				}
+			},
+			{
+				"type": 1, // 1: 比赛路线  2: 导航到指定地点
+				"img": "/static/common/cjlx12dw.png",
+				"path": {
+					"ocaId": 1,
+					"mcType": 3 // 赛事类型 1 普通活动 2 线下赛 3 线上赛
+				}
+			}
+		],
+		"row2": [{
+				"type": 1, // 1: 比赛路线  2: 导航到指定地点
+				"img": "/static/common/zjlx16dw.png",
+				"path": {
+					"ocaId": 2,
+					"mcType": 3 // 赛事类型 1 普通活动 2 线下赛 3 线上赛
+				}
+			},
+			{
+				"type": 1, // 1: 比赛路线  2: 导航到指定地点
+				"img": "/static/common/gjlx20dw.png",
+				"path": {
+					"ocaId": 3,
+					"mcType": 3 // 赛事类型 1 普通活动 2 线下赛 3 线上赛
+				}
+			}
+		]
+	},
+	"popupDataList": [{
+			"type": 1,
+			"data": {
+				"title": "小飞龙定向赛",
+				"img": "/static/logo/xfl.png",
+				"content": "济南奥体中心“一场三馆”包括体育场、体育馆、网球馆和游泳馆，呈现出“东荷西柳”的总体布局。 体育场以济南的“市树”柳树为母题，将垂柳柔美飘逸的形态固化为建筑语言。"
+			}
+		},
+		"default"
+	]
+},
+
+"rankList": {
+	"css": "
+		.top{
+			width: 100%;
+			height: 170px;
+			padding-top: 36px;
+			justify-content: space-between;
+			background-image: url("static/backgroud/top_bg_aoti3.png");
+			background-repeat: no-repeat;
+			background-position: center;
+			background-size: cover;
+		}
+	",
+	"popupDataList": [{
+			"type": 1,
+			"data": {
+				"title": "小飞龙定向赛",
+				"img": "/static/logo/xfl.png",
+				"content": "济南奥体中心“一场三馆”包括体育场、体育馆、网球馆和游泳馆，呈现出“东荷西柳”的总体布局。 体育场以济南的“市树”柳树为母题，将垂柳柔美飘逸的形态固化为建筑语言。"
+			}
+		},
+		"default"
+	]
+}
+

card/pages/bm/style2/index.vue

@@ -0,0 +1,450 @@
+<!-- 
+[报名] 样式2 - 卡片页
+http://localhost:5173/card/#/pages/bm/style2/index
+https://oss-mbh5.colormaprun.com/card/#/pages/bm/style2/index
+ -->
+<template>
+	<view class="body body-radius">
+		<view class="content" :class="cssContentBg" @click="btnClick">
+			<view class="top uni-row">
+				<view class="top-right uni-row">
+					<image mode="aspectFit" class="clock" src="/static/default/clock.png"></image>
+					<view class="countdown">{{countdown}}</view>
+				</view>
+			</view>
+			<view class="main uni-column">
+				<!-- <image mode="aspectFit" :class="cssLogo" :src="logoSrc"></image> -->
+				<view :class="cssLogo"></view>
+				<view class="uni-row" style="position: relative;">
+					<image v-if="notice" mode="aspectFit" src="/static/common/notice.png" class="notice"></image>
+					<text class="type">{{type}}</text>
+				</view>
+				<text class="name">{{ecName}}</text>
+				<button class="button button-txtcolor">{{btnText}}</button>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import tools from '../../../common/tools';
+	import {
+		token,
+		ossUrl,
+		apiCardBaseQuery,
+		apiUserJoinCardQuery,
+		apiCardConfigQuery,
+		apiMatchRsDetailQuery
+	} from '../../../common/api';
+	
+	export default {
+		data() {
+			return {
+				pageName: "index",
+				rankKey: "rank-bm-style2",
+				queryObj: {},
+				queryString: "",
+				token: "",
+				
+				ecId: 0, // 卡片id
+				ecName: '', // 卡片名称
+				ecDesc: '', // 卡片简介
+				beginSecond: null, // 卡片开始时间戳，单位秒
+				endSecond: null, // 卡片结束时间戳，单位秒
+				
+				isJoin: null, // 是否报名
+				
+				// mcId: 0, // 赛事id
+				// mcType: 0, // 赛事类型 1 普通活动 2 线下赛 3 线上赛
+				// mcName: "", // 赛事名称
+				
+				countdown: "", // 倒计时
+				interval: null,
+				
+				cssContentBg: "",
+				cssLogo: "",
+				// logoSrc: "",
+				type: "",
+				btnText: "",
+				notice: false,	// 是否显示(小红点)通知图标
+			}
+		},
+		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.contentBg = "content-bg-" + (query["bg"] ?? "green");
+			// this.logoSrc = "/static/logo/" + (query["logo"] ?? "jbs") + '.png';
+			this.type = query["type"] ?? "锦标赛";
+			this.btnText = query["btnText"] ?? "开始比赛";
+			
+			this.rankKey += "-" + this.ecId;
+			console.log("rankKey:", this.rankKey);
+			
+			tools.removeCssCode();
+			
+			this.getCardBaseQuery();
+			this.getCardConfigQuery();
+			this.getUserJoinCardQuery();
+			this.matchRsDetailQuery();
+		},
+		onUnload() {
+			this.clear();
+		},
+		methods: {
+			dealNotice(rank) {
+				// console.log('[dealNotice]');
+				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 = true;
+						// 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);
+					},
+				})
+			},
+			clear() {
+				if (this.interval != null) {
+					clearInterval(this.interval);
+					this.interval = null;
+				}
+			},
+			loadConfig(config) {
+				// console.log("config", config);
+				const css = config.css;
+				if (css != undefined && css.length > 0) {
+					tools.loadCssCode(css);
+					
+					if (css.indexOf(".content-bg{") >= 0) {
+						this.cssContentBg = "content-bg";
+					}
+					if (css.indexOf(".logo{") >= 0) {
+						this.cssLogo = "logo";
+					}
+				}
+				
+				if (this.cssContentBg == "") {
+					this.cssContentBg = "content-bg-default";
+				}
+				if (this.cssLogo == "") {
+					this.cssLogo = "logo-default";
+				}
+				console.log("[loadConfig] cssContentBg:", this.cssContentBg);
+				console.log("[loadConfig] cssLogo:", this.cssLogo);
+			},
+			// 获取倒计时
+			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 = "--天--小时";
+				}
+			},
+			// 卡片基本信息查询
+			getCardBaseQuery() {
+				uni.request({
+					url: apiCardBaseQuery,
+					header: {
+						"Content-Type": "application/x-www-form-urlencoded",
+						"token": this.token,
+					},
+					method: "POST",
+					data: {
+						ecId: this.ecId,
+						pageName: this.pageName
+					},
+					success: (res) => {
+						// console.log("getCardBaseQuery", res)
+						const data = res.data.data;
+						
+						this.ecName = data.ecName;
+						this.ecDesc = data.ecDesc;
+						this.beginSecond = data.beginSecond;
+						this.endSecond = data.endSecond;
+						
+						this.getCountdown();
+						
+						this.clear();
+						this.interval = setInterval(this.getCountdown, 60000);
+					},
+					fail: (err) => {
+						console.log("getCardBaseQuery err", err)
+					},
+				});
+			},
+			// 卡片配置信息查询
+			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;
+						const config = data.configJson != "" ? JSON.parse(data.configJson) : "";
+						// console.log("configJson", config);
+						/* const config = {
+						"css": `
+							.content-bg{
+								background: url('static/cardbg/xfl2.png');
+								background-size: cover;
+							}
+							
+							.logo{
+								width: 40vw;
+								height: 40vw;
+								background: url('static/logo/xfl.png') no-repeat center;
+								background-size: contain;
+							}
+						`
+						}; */
+						
+						this.loadConfig(config);
+					},
+					fail: (err) => {
+						console.log("getCardConfigQuery err", err)
+					},
+				});
+			},
+			// 用户是否已经报名卡片对应赛事查询
+			getUserJoinCardQuery() {
+				uni.request({
+					url: apiUserJoinCardQuery,
+					header: {
+						"Content-Type": "application/x-www-form-urlencoded",
+						"token": this.token
+					},
+					method: "POST",
+					data: {
+						ecId: this.ecId
+					},
+					success: (res) => {
+						// console.log("getUserJoinCardQuery", res)
+						const code = res.data.code;
+						const data = res.data.data;
+						if (code == 0) {
+							this.isJoin = data.isJoin;
+							/*if (this.isJoin) {
+								this.btnText = "已报名";
+							} else {
+								this.btnText = "未报名";
+							} */
+						}
+					},
+					fail: (err) => {
+						console.log("getUserJoinCardQuery 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)
+			// 		},
+			// 	});
+			// },
+			// 卡片对应线上赛多个活动查询
+			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 (res.data.code == 0) {
+							const data = res.data.data;
+							const rank = JSON.stringify(data);
+							this.dealNotice(rank);
+						}
+					},
+					fail: (err) => {
+						console.log("matchRsDetailQuery err", err)
+					},
+				});
+			},
+			btnClick() {
+				if (this.isJoin) {	// 已报名
+					// uni.reLaunch({
+					// 	url: '/pages/bm/style1/rankList?full=true&' + this.queryString
+					// });
+					window.location.href = `${ossUrl}#/pages/bm/style2/rankOverview?${this.queryString}&full=true`;
+				}
+				else {	// 未报名
+					// uni.reLaunch({
+					// 	url: '/pages/bm/style1/signup?full=true&' + this.queryString
+					// });
+					window.location.href = `${ossUrl}#/pages/bm/style2/signup?${this.queryString}&full=true`;
+				}
+				
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.content {
+		width: 100vw;
+		height: 100vh;
+	}
+
+	.content-bg-default {
+		background: linear-gradient(180deg, #7aedff 0%, #047200 100%);
+		/* background: linear-gradient(180deg, #178bff 0%, #004d9b 100%); */
+		/* background: linear-gradient(180deg, #7aedff 0%, #8d2219 100%); */
+	}
+	
+	.top {
+		width: 100%;
+		justify-content: flex-end;
+	}
+
+	.top-right {
+		min-width: 180rpx;
+		height: 80rpx;
+		margin-top: 30rpx;
+		margin-right: 30rpx;
+		padding-left: 16rpx;
+		padding-right: 16rpx;
+		background-color: rgba(0, 0, 0, 0.3);
+		border-radius: 12px;
+	}
+
+	.clock {
+		width: 50rpx;
+		height: 50rpx;
+		margin-right: 12rpx;
+	}
+
+	.countdown {
+		min-width: 120rpx;
+		text-align: center;
+		font-family: Roboto;
+		color: #ffffff;
+		font-size: 46rpx;
+		/* letter-spacing: 2rpx; */
+	}
+
+	.main {
+		width: 100%;
+		height: 700rpx;
+		margin-top: 20rpx;
+		justify-content: space-evenly;
+	}
+
+	.logo-default {
+		width: 50vw;
+		height: 50vw;
+		background-image: url('/static/logo/jbs.png');
+		background-repeat: no-repeat;
+		background-position-x: center;
+		background-position-y: center;
+		background-size: contain;
+	}
+
+	.notice {
+		width: 30rpx;
+		height: 30rpx;
+		/* margin-right: 30rpx; */
+		position: absolute;
+		left: -60rpx;
+	}
+	
+	.type {
+		opacity: 60%;
+		/* line-height: 25px; */
+		font-family: Roboto;
+		color: #ffffff;
+		font-size: 40rpx;
+		text-align: center;
+	}
+
+	.name {
+		font-family: Roboto;
+		color: #ffffff;
+		font-size: 50rpx;
+		text-align: center;
+	}
+
+	.button {
+		width: 320rpx;
+		height: 86rpx;
+		margin-top: 30rpx;
+		background: #ffffff;
+		border-radius: 56rpx;
+		font-size: 46rpx;
+		line-height: 80rpx;
+	}
+
+	.button-txtcolor {
+		color: #000000;
+	}
+	
+</style>
+

card/pages/bm/style2/rankList.vue

@@ -0,0 +1,647 @@
+<!-- 
+[报名] 样式2 - 排名列表
+http://localhost:5173/card/#/pages/bm/style2/rankList
+https://oss-mbh5.colormaprun.com/card/#/pages/bm/style2/rankList
+ -->
+<template>
+	<view class="body">
+		<view class="content uni-column">
+			<view class="uni-column" :class="cssTop">
+				<view class="topbar uni-row" :class="cssTopbarColor">
+					<!-- <image mode="aspectFit" class="topbar-back" @click="btnBack" src="/static/default/back.png"></image> -->
+					<text class="topbar-back" @click="btnBack">&lt;</text>
+					<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-column">
+					<text class="topbtm-name">姓名：{{nickName}}</text>
+				</view>
+			</view>
+			<view class="main uni-column">
+				<uni-segmented-control class="main-tab" :current="tabCurrent" :values="tabItems"
+					@clickItem="onClickTabItem" styleType="button" activeColor="#81cd00"></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="btnBack">返回</button>
+			</view>
+			
+			<my-popup ref="mypopup" :dataList="popupDataList" :acttime="acttime"></my-popup>
+			
+		</view>
+	</view>
+</template>
+
+<script>
+	import tools from '/common/tools';
+	import { teamName, defaultPopUpDataList } from '/common/define';
+	import {
+		token,
+		apiMatchRsDetailQuery,
+		apiCardRankDetailQuery,
+		apiCardConfigQuery,
+		apiUserCurrentRankNumQuery,
+		apiIsAllowMcSignUp,
+		checkResCode
+	} from '/common/api';
+	
+	export default {
+		data() {
+			return {
+				pageName: "rankList",
+				firstEnterKey: 'firstEnter-bm-style2',
+				rankKey: "rank-bm-style2",
+				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: [], // 卡片对应活动集合
+
+				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,
+				
+				cssTop: "",
+				cssTopbarColor: "",
+				popupDataList: [],
+			}
+		},
+		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 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 = "距结束 --天--小时";
+				}
+			},
+			fmtMcTime(timestamp) {
+				var date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
+				// var Y = date.getFullYear() + '-';
+				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
+				var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
+				var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
+				var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
+				// var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
+
+				const timeStr = M + D + h + m;
+				// console.log("timeStr", timeStr);
+				return timeStr;
+			},
+			// 获取活动时间
+			getActtime() {
+				this.acttime = this.fmtMcTime(this.beginSecond) + " 至 " + this.fmtMcTime(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_aoti3.png");
+								background-repeat: no-repeat;
+								background-position: center;
+								background-size: cover;
+							}
+						`,
+						"popupDataList": [{
+								"type": 1,
+								"data": {
+									"title": "小飞龙定向赛",
+									"img": "/static/logo/xfl.png",
+									"content": "济南奥体中心“一场三馆”包括体育场、体育馆、网球馆和游泳馆，呈现出“东荷西柳”的总体布局。 体育场以济南的“市树”柳树为母题，将垂柳柔美飘逸的形态固化为建筑语言。"
+								}
+							},
+							"default"
+						]
+						}; */
+						
+						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.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)
+					},
+				});
+			},
+			// 卡片用户当前排名查询
+			// 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();
+				// window.location.href = `action://to_home/`;
+				uni.navigateTo({
+					url: "/pages/bm/style2/rankOverview?" + this.queryString
+				});
+			},
+			// btnReGroup() {
+			// 	uni.navigateTo({
+			// 		url: '/pages/bm/style1/signup?from=rankList&' + this.queryString
+			// 	});
+			// },
+			// btnStart() {
+			// 	window.location.href = `action://to_detail/?id=${this.ocaId}&matchType=${this.mcType}`;
+			// },
+			btnInfo() {
+				// console.log(this.$refs.mypopup);
+				this.$refs.mypopup.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_bg_aoti3.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; */
+		/* opacity: 0; */
+		font-size: 50rpx;
+	}
+	
+	.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-evenly;
+	}
+	
+	.topbtm-name {
+		padding: 3px 12px;
+		background-color: #9fda39;
+		border-radius: 5px;
+		text-align: center;
+		font-weight: 500;
+		color: #497400;
+		font-size: 14px;
+	}
+	
+	.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-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/style2/rankOverview.vue

@@ -0,0 +1,654 @@
+<!-- 
+[报名] 样式2 - 排名总览
+http://localhost:5173/card/#/pages/bm/style2/rankOverview
+https://oss-mbh5.colormaprun.com/card/#/pages/bm/style2/rankOverview
+ -->
+<template>
+	<view class="body">
+		<view class="content">
+			<view class="uni-column" :class="cssTop">
+				<view class="topbar uni-row" :class="cssTopbarColor">
+					<!-- <image mode="aspectFit" class="topbar-back" @click="btnBack" src="/static/default/back.png"></image> -->
+					<text class="topbar-back" @click="btnBack">&lt;</text>
+					<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-column">
+					<text class="topbtm-name">姓名：{{nickName}}</text>
+				</view>
+			</view>
+			<view class="top-oval"></view>
+
+			<view class="mid uni-column">
+				<view class="mid-1 uni-row uni-jcsb">
+					<view class="overview-1 uni-column" @click="onOverviewClick('totalDistanct')">
+						<text class="ovline1">总距离 {{fmtDistanct(totalDistanct)}} km</text>
+						<text class="ovline2">第 {{totalDistanctRankNum}} 名</text>
+					</view>
+					<view class="overview-2 uni-column" @click="onOverviewClick('totalNum')">
+						<text class="">总场次 {{totalNum}}</text>
+					</view>
+					<view class="overview-3 uni-column" @click="onOverviewClick('totalCp')">
+						<text class="ovline1">总打点数 {{totalCp}} 个</text>
+						<text class="ovline2">第 {{totalCpRankNum}} 名</text>
+					</view>
+				</view>
+				<view class="mid-2 uni-row uni-jcse">
+					<view class="overview-4 uni-column" @click="onOverviewClick('totalSysPoint')">
+						<text class="ovline1">总百味豆 {{totalSysPoint}} 个</text>
+						<text class="ovline2">第 {{totalSysPointRankNum}} 名</text>
+					</view>
+					<view class="overview-5 uni-column" @click="onOverviewClick('fastPace')">
+						<text class="ovline1">最快配速 {{fmtPace(fastPace)}}</text>
+						<text class="ovline2">第 {{fastPaceRankNum}} 名</text>
+					</view>
+				</view>
+			</view>
+
+			<view class="main uni-column">
+				<text class="main-title">选择比赛路线</text>
+				<view class="main-path uni-row">
+					<view v-for="(item, index) in pathList.row1" :key="'row1-' + index">
+						<image mode="aspectFit" class="pathimg" :src="item.img" @click="onPathImgClick(item)"></image>
+					</view>
+				</view>
+				<view class="main-path uni-row">
+					<view v-for="(item, index) in pathList.row2" :key="'row2-' + index">
+						<image mode="aspectFit" class="pathimg" :src="item.img" @click="onPathImgClick(item)"></image>
+					</view>
+				</view>
+			</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 {
+				pageName: "rankOverview",
+				firstEnterKey: 'firstEnter-bm-style2',
+				rankKey: "rank-bm-style2",
+				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: {},
+				popupDataList: [],
+				navPoint: {}
+			}
+		},
+		computed: {},
+		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();
+		},
+		onUnload() {
+			this.clear();
+		},
+		methods: {
+			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 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) {
+				var date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
+				// var Y = date.getFullYear() + '-';
+				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
+				var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
+				var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
+				var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
+				// var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
+
+				const timeStr = M + D + h + m;
+				// console.log("timeStr", timeStr);
+				return timeStr;
+			},
+			// 获取活动时间
+			getActtime() {
+				this.acttime = this.fmtMcTime(this.beginSecond) + " 至 " + this.fmtMcTime(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": `
+							`,
+							"pathList": {
+								"row1": [{
+										"type": 2, // 1: 比赛路线  2: 导航到指定地点
+										"img": "/static/common/dhdqdwz.png",
+										"point": {
+											"longitude": 117.022194,
+											"latitude": 36.661612,
+											"name": "小飞龙定向赛起始点"
+										}
+									},
+									{
+										"type": 1, // 1: 比赛路线  2: 导航到指定地点
+										"img": "/static/common/cjlx12dw.png",
+										"path": {
+											"ocaId": 1,
+											"mcType": 3 // 赛事类型 1 普通活动 2 线下赛 3 线上赛
+										}
+									}
+								],
+								"row2": [{
+										"type": 1, // 1: 比赛路线  2: 导航到指定地点
+										"img": "/static/common/zjlx16dw.png",
+										"path": {
+											"ocaId": 2,
+											"mcType": 3 // 赛事类型 1 普通活动 2 线下赛 3 线上赛
+										}
+									},
+									{
+										"type": 1, // 1: 比赛路线  2: 导航到指定地点
+										"img": "/static/common/gjlx20dw.png",
+										"path": {
+											"ocaId": 3,
+											"mcType": 3 // 赛事类型 1 普通活动 2 线下赛 3 线上赛
+										}
+									}
+								]
+							},
+							"popupDataList": [{
+									"type": 1,
+									"data": {
+										"title": "小飞龙定向赛",
+										"img": "/static/logo/xfl.png",
+										"content": "济南奥体中心“一场三馆”包括体育场、体育馆、网球馆和游泳馆，呈现出“东荷西柳”的总体布局。 体育场以济南的“市树”柳树为母题，将垂柳柔美飘逸的形态固化为建筑语言。"
+									}
+								},
+								"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() {
+				// window.history.back();
+				window.location.href = `action://to_home/`;
+			},
+			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/style2/rankList?" + this.queryString
+				});
+			},
+			onPathImgClick(item) {
+				//item.type 1: 比赛路线  2: 导航到指定地点
+				if (item.type == 1) {
+					// 赛事/活动状态 0: 未开始  1: 进行中  2: 已结束
+					if (this.mcState == 1) {
+						window.location.href = `action://to_detail/?id=${item.path.ocaId}&matchType=${item.path.mcType}`;
+					} else if (this.mcState == 0) {
+						uni.showToast({
+							title: '比赛尚未开始',
+							icon: 'none',
+							duration: 3000
+						});
+					} else if (this.mcState == 2) {
+						uni.showToast({
+							title: '比赛已结束',
+							icon: 'none',
+							duration: 3000
+						});
+					}
+				} else if (item.type == 2) {
+					this.navPoint = item.point;
+					// this.$refs.mypopupmap.popupOpen();
+					window.location.href = `action://to_map_app?title=${this.navPoint.name}&latitude=${this.navPoint.latitude}&longitude=${this.navPoint.longitude}`;
+				}
+			},
+		}
+	}
+</script>
+
+<style scoped>
+	.content {
+		width: 100vw;
+		height: 100vh;
+		overflow-x: hidden;
+	}
+
+	.top-default {
+		position: relative;
+		z-index: 10;
+		width: 100%;
+		height: 300px;
+		padding-top: 36px;
+		justify-content: space-between;
+		background-image: url("/static/backgroud/top_bg_aoti2.png");
+		background-repeat: no-repeat;
+		background-position-x: center;
+		background-position-y: bottom;
+		/* 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%;
+	}
+
+	.topbar {
+		width: 90%;
+		justify-content: space-between;
+	}
+
+	.topbar-color-default {
+		color: #5b9100;
+	}
+
+	.topbar-back {
+		/* width: 43rpx; */
+		/* height: 43rpx; */
+		/* opacity: 0; */
+		font-size: 50rpx;
+	}
+
+	.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 {
+		position: relative;
+		z-index: 20;
+		margin-top: -130px;
+	}
+
+	.mid-1 {
+		width: 92%;
+	}
+
+	.mid-2 {
+		width: 66%;
+	}
+
+	.overview-1 {
+		width: 111px;
+		height: 54px;
+		background: #ffb40b;
+		border-radius: 50%;
+	}
+
+	.overview-2 {
+		margin-top: -43px;
+		color: #ffffff;
+		font-size: 18px;
+	}
+
+	.overview-3 {
+		width: 111px;
+		height: 54px;
+		background: #f39509;
+		border-radius: 50%;
+	}
+
+	.overview-4 {
+		width: 111px;
+		height: 54px;
+		background: #81cd00;
+		border-radius: 50%;
+	}
+
+	.overview-5 {
+		width: 111px;
+		height: 54px;
+		background: #64cbb0;
+		border-radius: 50%;
+	}
+
+	.ovline1 {
+		margin-top: 9px;
+		color: #ffffff;
+		font-size: 12px;
+	}
+
+	.ovline2 {
+		color: #ffffff;
+		font-size: 16px;
+	}
+
+	.main {
+		width: 100%;
+		margin-top: 36px;
+		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;
+	}
+
+	.pathimg {
+		width: 127px;
+		height: 115px;
+	}
+
+	.main-path {
+		width: 90%;
+		margin-top: 10px;
+		margin-bottom: 10px;
+		justify-content: space-evenly;
+	}
+</style>

card/pages/bm/style2/signup.vue

@@ -0,0 +1,675 @@
+<!-- 
+[报名] 样式2 - 报名
+http://localhost:5173/card/#/pages/bm/style2/signup
+https://oss-mbh5.colormaprun.com/card/#/pages/bm/style2/signup
+ -->
+<template>
+	<view class="body">
+		<view class="content uni-column">
+			<view class="uni-column" :class="cssTop">
+				<view class="topbar uni-row" :class="cssTopbarColor">
+					<!-- <image mode="aspectFit" class="topbar-back" @click="btnBack" src="/static/default/back.png"></image> -->
+					<text class="topbar-back" @click="btnBack">&lt;</text>
+					<text class="mcName">{{mcName}}</text>
+					<text class="topbar-rule" @click="btnInfo">规则</text>
+				</view>
+			</view>
+			<view class="main uni-column">
+				<view class="timebar uni-row">
+					<image mode="aspectFit" class="clock" src="/static/default/clock.png"></image>
+					<text class="acttime">{{acttime}}</text>
+				</view>
+				
+				<input class="uni-input" maxlength="30" placeholder="请填写姓名" v-model="nickName" />
+
+				<view class="introduce uni-column">
+					<text class="introduce-title">{{introduce.title}}</text>
+					<text class="introduce-content">{{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>
+			</view>
+
+			<my-popup ref="mypopup" :dataList="popupDataList" :acttime="acttime"></my-popup>
+
+			<uni-popup ref="alertDialog" type="dialog">
+				<uni-popup-dialog type="info" cancelText="取消" confirmText="确认" title="您填写的姓名:" @confirm="dialogConfirm"
+					@close="dialogClose">
+					<view class="dialog-content uni-column">
+						<text class="dialog-content-1">{{nickName}}</text>
+					</view>
+				</uni-popup-dialog>
+			</uni-popup>
+		</view>
+	</view>
+</template>
+
+<script>
+	import tools from '../../../common/tools';
+	import {
+		defaultPopUpDataList
+	} from '../../../common/define';
+	import {
+		token,
+		apiCardDetailQuery,
+		apiOnlineMcSignUpDetail,
+		apiOnlineMcSignUp,
+		apiCardConfigQuery,
+		apiMatchRsDetailQuery,
+		checkResCode,
+		checkToken
+	} from '../../../common/api';
+
+	export default {
+		data() {
+			return {
+				pageName: "signup",
+				firstEnterKey: 'firstEnter-bm-style2',
+				rankKey: "rank-bm-style2",
+				queryObj: {},
+				queryString: "",
+				from: "", // 来源页面
+				token: "",
+				ecId: 0, // 卡片id
+				mcId: 0, // 赛事id
+				mcType: 0, // 赛事类型 1 普通活动 2 线下赛 3 线上赛
+				mcName: "", // 赛事名称
+				acttime: "", // 活动时间
+				beginSecond: null, // 活动或赛事开始时间戳，单位秒
+				endSecond: null, // 活动或赛事结束时间戳，单位秒
+				coiId: 0, // 已报名单位id
+				coiName: "", // 已报名单位名称，可为空
+				teamNum: 0, // 已报名队伍编号，可为0
+				nickName: "", // 昵称
+				// coiRs: [], // 组织信息集合
+				// orgList: [], // 分组下拉列表数据源
+				// teamList: [], // 
+				interval: null,
+
+				mcState: 0, // 赛事/活动状态 0: 未开始  1: 进行中  2: 已结束
+				// teamType: 0, // 队伍类型  0: 红黄蓝紫 1: 学生/家长
+				cssTop: "",
+				cssTopbarColor: "",
+				cssLogo: "",
+				introduce: {
+					title: "",
+					content: ""
+				},
+				popupDataList: [],
+			}
+		},
+		computed: {},
+		onLoad(query) { // 类型非必填，可自动推导
+			// console.log(query);
+			this.queryObj = query;
+			this.queryString = tools.objectToQueryString(this.queryObj);
+			// console.log(queryString);
+			this.from = query["from"] ?? "";
+			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();
+			this.getCardDetailQuery();
+			this.matchRsDetailQuery();
+		},
+		// 页面初次渲染完成，此时组件已挂载完成，DOM 树($el)已可用
+		onReady() {
+			// this.dealFirstEnter();
+		},
+		onUnload() {
+			this.clear();
+		},
+		methods: {
+			dealNotice(rank) {
+				// console.log('[dealNotice]');
+				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);
+
+				// 加载队伍类型  0: 红黄蓝紫 1: 学生/家长
+				/* if (config.teamType != undefined && config.teamType >= 0) {
+					this.teamType = config.teamType;
+				} */
+
+				// 加载介绍内容
+				const introduce = config.introduce;
+				if (introduce != undefined) {
+					if (introduce.title != undefined) {
+						this.introduce.title = introduce.title;
+					}
+					if (introduce.content != undefined) {
+						this.introduce.content = introduce.content;
+					}
+				}
+
+				// 加载弹窗数据
+				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);
+			},
+			fmtMcTime(timestamp) {
+				var date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
+				// var Y = date.getFullYear() + '-';
+				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
+				var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
+				var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
+				var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
+				// var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
+
+				const timeStr = M + D + h + m;
+				// console.log("timeStr", timeStr);
+				return timeStr;
+			},
+			// 获取倒计时
+			getActtime() {
+				this.acttime = this.fmtMcTime(this.beginSecond) + " 至 " + this.fmtMcTime(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;
+						const config = data.configJson != "" ? JSON.parse(data.configJson) : "";
+						// console.log("configJson", data.configJson);
+						/* const config = {
+							"css": `
+								.top{
+									width: 100%;
+									height: 230px;
+									padding-top: 36px;
+									justify-content: space-between;
+									background-image: url("static/backgroud/top_bg_aoti.png");
+									background-repeat: no-repeat;
+									background-position: center;
+									background-size: cover;
+								}
+								.topbar-color{
+									color: #5b9100;
+								}
+								.swiper-item-button {
+									background-color: #81cd00 !important;
+								}
+							`,
+							"popupDataList": [{
+									"type": 1,
+									"data": {
+										"title": "小飞龙定向赛",
+										"img": "/static/common/aoti.png",
+										"content": "济南奥体中心“一场三馆”包括体育场、体育馆、网球馆和游泳馆，呈现出“东荷西柳”的总体布局。 体育场以济南的“市树”柳树为母题，将垂柳柔美飘逸的形态固化为建筑语言。"
+									}
+								},
+								"default"
+							],
+							"introduce": {
+								"title": "介绍：",
+								"content": "济南奥体中心“一场三馆”包括体育场、体育馆、网球馆和游泳馆，呈现出“东荷西柳”的总体布局。 体育场以济南的“市树”柳树为母题，将垂柳柔美飘逸的形态固化为建筑语言。"
+							}
+						}; */
+
+						this.loadConfig(config);
+
+						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.coiId = data.coiId;
+						this.coiName = data.coiName;
+						this.teamNum = data.teamNum;
+
+						this.mcState = tools.checkMcState(this.beginSecond, this.endSecond);
+
+						this.getActtime();
+						// this.getOnlineMcSignUpDetail();
+
+						this.clear();
+						this.interval = setInterval(this.getActtime, 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 (res.data.code == 0) {
+							const data = res.data.data;
+							const rank = JSON.stringify(data);
+							this.dealNotice(rank);
+						}
+					},
+					fail: (err) => {
+						console.log("matchRsDetailQuery 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)
+			// 		},
+			// 	});
+			// },
+			// 线上赛报名页面信息详情
+			/* getOnlineMcSignUpDetail() {
+				uni.request({
+					url: apiOnlineMcSignUpDetail,
+					header: {
+						"Content-Type": "application/x-www-form-urlencoded",
+						"token": this.token,
+					},
+					method: "POST",
+					data: {
+						mcId: this.mcId,
+					},
+					success: (res) => {
+						// console.log("getOnlineMcSignUpDetail", res)
+						this.coiRs = res.data.data.coiRs;
+						const rsNum = this.coiRs.length;
+						this.orgList = [];
+						for (let i = 0; i < rsNum; i++) {
+							this.orgList[i] = {};
+							this.orgList[i].value = this.coiRs[i].coiId;
+							this.orgList[i].text = this.coiRs[i].coiName;
+							this.orgList[i].teamNum = this.coiRs[i].teamNum;
+						}
+						// console.log("orgList", this.orgList);
+						if (this.coiId > 0) {
+							this.orgChange(this.coiId, false);
+						}
+					},
+					fail: (err) => {
+						console.log("getOnlineMcSignUpDetail err", err)
+					},
+				});
+			}, */
+			// 线上赛报名
+			onlineMcSignUp() {
+				uni.request({
+					url: apiOnlineMcSignUp,
+					header: {
+						"Content-Type": "application/x-www-form-urlencoded",
+						"token": this.token,
+					},
+					method: "POST",
+					data: {
+						mcId: this.mcId,
+						coiId: this.coiId,
+						selectTeam: this.teamNum,
+						nickName: this.nickName
+					},
+					success: (res) => {
+						// console.log("onlineMcSignUp", res);
+
+						if (checkResCode(res)) {
+							uni.showToast({
+								title: '比赛报名成功！',
+								icon: 'none',
+								duration: 3000
+							});
+
+							uni.navigateTo({
+								url: '/pages/bm/style2/rankList?' + this.queryString
+							});
+						}
+					},
+					fail: (err) => {
+						console.log("onlineMcSignUp err", err);
+						uni.showToast({
+							title: '出错了，报名失败',
+							icon: 'none',
+							duration: 3000
+						});
+					},
+				});
+			},
+			btnBack() {
+				// console.log("from:", this.from)
+				if (this.from != '') {
+					// window.history.back();
+					uni.navigateTo({
+						url: '/pages/bm/style2/rankList?' + this.queryString
+					});
+				} else {
+					window.location.href = `action://to_home/`;
+				}
+			},
+			btnInfo() {
+				this.$refs.mypopup.popupOpen();
+			},
+			btnSignup() {
+				if (!checkToken(this.token)) {
+					return;
+				}
+
+				if (!(this.nickName.trim().length > 0)) {
+					uni.showToast({
+						title: '请填写姓名',
+						icon: 'none',
+						duration: 2000
+					});
+					return;
+				}
+
+				this.nickName = this.nickName.trim();
+				this.$refs.alertDialog.open();
+			},
+			dialogConfirm() {
+				this.onlineMcSignUp();
+			},
+			dialogClose() {}
+		}
+	}
+</script>
+
+<style scoped>
+	.content {
+		width: 100vw;
+		height: 100vh;
+	}
+
+	.top-default {
+		width: 100%;
+		height: 230px;
+		padding-top: 36px;
+		justify-content: space-between;
+		background-image: url("/static/backgroud/top_bg_aoti.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; */
+		/* opacity: 0; */
+		font-size: 50rpx;
+	}
+
+	.topbar-rule {
+		font-size: 32rpx;
+	}
+
+	.mcName {
+		font-size: 40rpx;
+		font-weight: 550;
+	}
+
+	.main {
+		width: 76%;
+		min-height: 800rpx;
+		/* margin-top: 20rpx; */
+		justify-content: space-around;
+	}
+
+	.timebar {
+		width: 80%;
+		height: 65rpx;
+		margin-top: 20rpx;
+		padding: 0 50rpx;
+		justify-content: space-evenly;
+		background: #ffffff;
+		border: 0.5px solid;
+		border-color: #e7e7e7;
+		border-radius: 20px;
+		box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.13);
+	}
+
+	.acttime {
+		font-weight: 550;
+		color: #333333;
+		font-size: 30rpx;
+	}
+
+	.clock {
+		width: 30rpx;
+		height: 30rpx;
+		margin-right: 20rpx;
+	}
+	
+	.uni-input {
+		width: 90%;
+		height: 85rpx;
+		padding: 0 30rpx;
+		background: #f1f1f1;
+		border-radius: 9px;
+	}
+	
+	.input-placeholder {
+		color: #333333;
+		font-size: 16px;
+	}
+
+	.introduce {
+		margin-top: 10rpx;
+		margin-bottom: 80rpx;
+		align-items: flex-start;
+		justify-content: space-around;
+	}
+
+	.introduce-title {
+		color: #333333;
+		font-size: 30rpx;
+		line-height: 60rpx;
+	}
+
+	.introduce-content {
+		color: #333333;
+		font-size: 25rpx;
+		line-height: 36rpx;
+	}
+
+	.btnSignup {
+		width: 100%;
+		height: 100rpx;
+		margin-bottom: 30rpx;
+		color: white;
+		font-weight: bold;
+		line-height: 100rpx;
+		border-radius: 55rpx;
+	}
+
+	.btnSignup-enable {
+		background-color: #81cd00;
+	}
+
+	.btnSignup-disable {
+		background-color: #c3c3c3;
+	}
+
+	.dialog-content {
+		width: 279px;
+		height: 110px;
+		background: #f1f1f1;
+		border-radius: 9px;
+		justify-content: center;
+		text-align: center;
+		font-weight: 550;
+		color: #333333;
+	}
+
+	.dialog-content-1 {
+		font-size: 40rpx;
+	}
+
+</style>

card/pages/index/index.vue

@@ -8,7 +8,7 @@
 			return {
 			}
 		},
-		onLoad(event) { // 类型非必填，可自动推导
+		onLoad(query) { // 类型非必填，可自动推导
 		},
 		methods: {
 		}

card/pages/jbs/index.vue

@@ -1,5 +1,5 @@
 <!-- 
-锦标赛
+锦标赛 - 卡片页
 http://localhost:5173/card/#/pages/jbs/index
 https://oss-mbh5.colormaprun.com/card/#/pages/jbs/index
  -->
@@ -40,6 +40,7 @@ https://oss-mbh5.colormaprun.com/card/#/pages/jbs/index
 			return {
 				pageName: "index",
 				rankKey: "rank-jbs",
+				queryObj: {},
 				queryString: "",
 				token: "",
 				
@@ -60,16 +61,17 @@ https://oss-mbh5.colormaprun.com/card/#/pages/jbs/index
 			}
 		},
 		computed: {},
-		onLoad(event) { // 类型非必填，可自动推导
-			// console.log(event);
-			this.queryString = tools.objectToQueryString(event);
+		onLoad(query) { // 类型非必填，可自动推导
+			// console.log(query);
+			this.queryObj = query;
+			this.queryString = tools.objectToQueryString(this.queryObj);
 			// console.log(queryString);
 
-			this.token = event["token"] ?? token;
-			this.ecId = event["id"] ?? 0;
+			this.token = query["token"] ?? token;
+			this.ecId = query["id"] ?? 0;
 
-			this.type = event["type"] ?? "锦标赛";
-			this.btnText = event["btnText"] ?? "开始比赛";
+			this.type = query["type"] ?? "锦标赛";
+			this.btnText = query["btnText"] ?? "开始比赛";
 			
 			this.rankKey += "-" + this.ecId;
 			console.log("rankKey:", this.rankKey);

card/pages/jbs/rankList.vue

@@ -10,7 +10,8 @@ https://oss-mbh5.colormaprun.com/card/#/pages/jbs/rankList
 				<view class="topbar uni-row">
 					<image mode="aspectFit" class="topbar-back" @click="btnBack" src="/static/default/back.png"></image>
 					<text class="mcName">{{mcName}}</text>
-					<image mode="aspectFit" class="topbar-info" @click="btnInfo" src="/static/default/info.png"></image>
+					<text class="topbar-rule" @click="btnInfo" >规则</text>
+					<!-- <image mode="aspectFit" class="topbar-info" @click="btnInfo" src="/static/default/info.png"></image> -->
 				</view>
 				<view :class="cssLogo"></view>
 				<view class="topcontent uni-row">
@@ -55,6 +56,7 @@ https://oss-mbh5.colormaprun.com/card/#/pages/jbs/rankList
 				pageName: "rankList",
 				firstEnterKey: 'firstEnter-jbs_rankList',
 				rankKey: "rank-jbs",
+				queryObj: {},
 				queryString: "",
 				token: "",
 
@@ -65,6 +67,7 @@ https://oss-mbh5.colormaprun.com/card/#/pages/jbs/rankList
 				mcName: "", // 赛事名称
 				beginSecond: null, // 活动或赛事开始时间戳，单位秒
 				endSecond: null, // 活动或赛事结束时间戳，单位秒
+				ocaId: 0,	// 关联id，带入到App活动详情页面
 
 				mcState: 0, // 赛事/活动状态 0: 未开始  1: 进行中  2: 已结束
 				countdown: "", // 倒计时
@@ -82,12 +85,13 @@ https://oss-mbh5.colormaprun.com/card/#/pages/jbs/rankList
 			}
 		},
 		computed: {},
-		onLoad(event) { // 类型非必填，可自动推导
-			// console.log(event);
-			this.queryString = tools.objectToQueryString(event);
+		onLoad(query) { // 类型非必填，可自动推导
+			// console.log(query);
+			this.queryObj = query;
+			this.queryString = tools.objectToQueryString(this.queryObj);
 			// console.log(queryString);
-			this.token = event["token"] ?? token;
-			this.ecId = event["id"] ?? 0;
+			this.token = query["token"] ?? token;
+			this.ecId = query["id"] ?? 0;
 
 			this.firstEnterKey += "-" + this.ecId;
 			console.log("firstEnterKey:", this.firstEnterKey);
@@ -321,7 +325,8 @@ https://oss-mbh5.colormaprun.com/card/#/pages/jbs/rankList
 						this.mcName = data.mcName;
 						this.beginSecond = data.beginSecond;
 						this.endSecond = data.endSecond;
-
+						this.ocaId = data.ocaId;
+						
 						this.mcState = tools.checkMcState(this.beginSecond, this.endSecond);
 
 						this.getCountdown();
@@ -411,7 +416,7 @@ https://oss-mbh5.colormaprun.com/card/#/pages/jbs/rankList
 							// });
 
 							window.location.href =
-								`action://to_detail/?id=${this.mcId}&matchType=${this.mcType}`;
+								`action://to_detail/?id=${this.ocaId}&matchType=${this.mcType}`;
 						}
 					},
 					fail: (err) => {
@@ -430,7 +435,7 @@ https://oss-mbh5.colormaprun.com/card/#/pages/jbs/rankList
 			},
 			btnStart() {
 				this.onlineMcSignUp();
-				// window.location.href = `action://to_detail/?id=${this.mcId}&matchType=${this.mcType}`;
+				// window.location.href = `action://to_detail/?id=${this.ocaId}&matchType=${this.mcType}`;
 			},
 			btnInfo() {
 				this.$refs.mypopup.popupOpen();
@@ -486,10 +491,17 @@ https://oss-mbh5.colormaprun.com/card/#/pages/jbs/rankList
 		height: 46rpx;
 	}
 
-	.mcName {
+	.topbar-rule {
 		color: white;
 		font-size: 32rpx;
 	}
+	
+	.mcName {
+		color: white;
+		/* font-size: 32rpx; */
+		font-size: 39rpx;
+		font-weight: bold;
+	}
 
 	.topcontent {
 		min-width: 300rpx;

card/pages/mytz/detail.vue

@@ -10,7 +10,8 @@ https://oss-mbh5.colormaprun.com/card/#/pages/mytz/detail
 				<view class="topbar uni-row">
 					<image mode="aspectFit" class="topbar-back" @click="btnBack" src="/static/default/back.png"></image>
 					<text class="mcName">{{ecName}}</text>
-					<image mode="aspectFit" class="topbar-info" @click="btnInfo" src="/static/default/info.png"></image>
+					<text class="topbar-rule" @click="btnInfo" >规则</text>
+					<!-- <image mode="aspectFit" class="topbar-info" @click="btnInfo" src="/static/default/info.png"></image> -->
 				</view>
 				<text class="toplogo">{{curMonth}}</text>
 				<text class="cardDesc">{{ecDesc}}</text>
@@ -73,6 +74,7 @@ https://oss-mbh5.colormaprun.com/card/#/pages/mytz/detail
 			return {
 				pageName: "mytz",
 				rankKey: "rank-mytz",
+				queryObj: {},
 				queryString: "",
 				token: "",
 				tokenValid: false,
@@ -101,12 +103,13 @@ https://oss-mbh5.colormaprun.com/card/#/pages/mytz/detail
 			},
 
 		},
-		onLoad(event) { // 类型非必填，可自动推导
-			// console.log(event);
-			this.queryString = tools.objectToQueryString(event);
+		onLoad(query) { // 类型非必填，可自动推导
+			// console.log(query);
+			this.queryObj = query;
+			this.queryString = tools.objectToQueryString(this.queryObj);
 			// console.log(queryString);
-			this.token = event["token"] ?? token;
-			this.ecId = event["id"] ?? 0;
+			this.token = query["token"] ?? token;
+			this.ecId = query["id"] ?? 0;
 
 			this.getCardBaseQuery();
 			this.getCurrentMonthlyChallengeQuery();
@@ -348,6 +351,11 @@ https://oss-mbh5.colormaprun.com/card/#/pages/mytz/detail
 		/* opacity: 0; */
 	}
 
+	.topbar-rule {
+		color: white;
+		font-size: 32rpx;
+	}
+	
 	.mcName {
 		color: white;
 		font-size: 40rpx;

card/pages/mytz/index.vue

@@ -1,5 +1,5 @@
 <!-- 
-每月挑战
+每月挑战 - 卡片页
 http://localhost:5173/card/#/pages/mytz/index
 https://oss-mbh5.colormaprun.com/card/#/pages/mytz/index
  -->
@@ -33,6 +33,7 @@ https://oss-mbh5.colormaprun.com/card/#/pages/mytz/index
 			return {
 				pageName: "index",
 				rankKey: "rank-mytz",
+				queryObj: {},
 				queryString: "",
 				token: "",
 				
@@ -63,19 +64,20 @@ https://oss-mbh5.colormaprun.com/card/#/pages/mytz/index
 				return `${currentYear}年${currentMonth}月`;
 			}
 		},
-		onLoad(event) { // 类型非必填，可自动推导
-			// console.log(event);
-			this.queryString = tools.objectToQueryString(event);
+		onLoad(query) { // 类型非必填，可自动推导
+			// console.log(query);
+			this.queryObj = query;
+			this.queryString = tools.objectToQueryString(this.queryObj);
 			// console.log(queryString);
 			
-			this.token = event["token"] ?? token;
-			this.ecId = event["id"] ?? 0;
+			this.token = query["token"] ?? token;
+			this.ecId = query["id"] ?? 0;
 			
-			this.contentBg = "content-bg-" + (event["bg"] ?? "blue");
-			this.logoSrc = "/static/logo/" + (event["logo"] ?? "mytz") + '.png';
-			// this.type = event["type"] ?? "每月挑战";
-			this.name = event["name"] ?? this.curYearMonth;
-			this.btnText = event["btnText"] ?? "开始挑战";
+			this.contentBg = "content-bg-" + (query["bg"] ?? "blue");
+			this.logoSrc = "/static/logo/" + (query["logo"] ?? "mytz") + '.png';
+			// this.type = query["type"] ?? "每月挑战";
+			this.name = query["name"] ?? this.curYearMonth;
+			this.btnText = query["btnText"] ?? "开始挑战";
 			
 			this.getCardBaseQuery();
 			this.getCurrentMonthlyChallengeQuery();

card/url.md

@@ -18,4 +18,5 @@ APP内跳转链接
 [每月挑战] (http://t-oss-mbh5.colormaprun.com/card/#/pages/mytz/index)
 [锦标赛] (http://t-oss-mbh5.colormaprun.com/card/#/pages/jbs/index)
 [报名 - 样式1] (http://t-oss-mbh5.colormaprun.com/card/#/pages/bm/style1/index)
+[报名 - 样式2] (http://t-oss-mbh5.colormaprun.com/card/#/pages/bm/style2/index)
 [成就] (http://t-oss-mbh5.colormaprun.com/card/#/pages/achievement/index)