v2.2.2

card/App.vue

@@ -1,11 +1,26 @@
 <script>
 	export default {
-		data() {
-			return {
-			}
+		globalData: {
+			// 默认赛事LOGO
+			defaultMatchLogo: "https://oss-mbh5.colormaprun.com/static/logo/default.png",
+			// 默认赛事BANNER
+			defaultMatchBanner: "https://oss-mbh5.colormaprun.com/static/banner/banner1.png"
 		},
 		onLaunch: function() {
 			// console.log('App Launch')
+
+			const style = document.documentElement.style;
+			
+			// 通过JS设置CSS变量值
+			const defaultMatchLogoUrl = `url("${this.globalData.defaultMatchLogo}")`;
+			style.setProperty('--default-matchLogo-url', defaultMatchLogoUrl);
+			
+			const defaultMatchBannerUrl = `url("${this.globalData.defaultMatchBanner}")`;
+			style.setProperty('--default-matchBanner-url', defaultMatchBannerUrl);
+
+			// 通过JS获取CSS变量值
+			// console.log("--default-matchLogo-url:", style.getPropertyValue('--default-matchLogo-url'));
+			// console.log("--default-matchBanner-url:", style.getPropertyValue('--default-matchBanner-url'));
 		},
 		onShow: function() {
 			// console.log('App Show')
@@ -15,88 +30,11 @@
 			// console.log('App Hide')
 			// this.$audio.pause();
 		},
-		methods: {
-		}
+		methods: {}
 	}
 </script>
 
 <style>
 	/*每个页面公共css */
-	
-	.body {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-	}
-	
-	.body-radius {
-		border-radius: 50rpx;
-		overflow: hidden; /* 确保边框圆角不会溢出 */
-	}
-	
-	.uni-row {
-		display: flex;
-		flex-direction: row;
-		align-items: center;
-	}
-	
-	.uni-column {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-	}
-	
-	.uni-jct {
-		justify-content: flex-start;
-	}
-	
-	.uni-jcc {
-		justify-content: center;
-	}
-	
-	.uni-jce {
-		justify-content: flex-end;
-	}
-	
-	.uni-jcsa {
-		justify-content: space-around;
-	}
-	
-	.uni-jcsb {
-		justify-content: space-between;
-	}
-	
-	.uni-jcse {
-		justify-content: space-evenly;
-	}
-	
-	.uni-ais {
-		align-items: flex-start;
-	}
-	
-	.uni-aie {
-		align-items: flex-end;
-	}
-	
-	.uni-aibl {
-		align-items: baseline;
-	}
-	
-	.uni-hidden {
-		visibility: hidden;
-	}
-	
-	.uni-nowrap {
-		white-space: nowrap;
-	}
-	
-	.uni-ovf-hidden {
-		overflow: hidden;
-	}
-	
-	.uni-ovf-ellipsis {
-		text-overflow: ellipsis;
-	}
-	
-</style>
+	@import "global.css";
+</style>

card/common/api.js

@@ -3,8 +3,8 @@ export const apiServer = process.env.API_BASE_URL;
 // console.log("ossUrl", ossUrl);
 // console.log("apiServer", apiServer);
 
-export const token = '';
-// export const token = '96ba3c924394934f7d30fa869a94ce0d';
+// export const token = '';
+export const token = '96ba3c924394934f7d30fa869a94ce0d';
 // export const token = '9db42d9fe9c9635c85e6fc04f08e898f';
 // export const token = '39de263745caccbb183703987b1c21eb';
 // export const token = 'd4dd6b57a15b4abaccf6cb6adcd4fd44';

card/common/cardfunc.js

@@ -200,12 +200,17 @@ var cardfunc = {
 			const contact = `联系人：${matchInfo.contactName} &nbsp;&nbsp; 电话：<a href='tel:${matchInfo.phone}' style='color: #ff5500;'>${matchInfo.phone}</a>`;
 			const content = `${hint}<br><br>${contact}`;
 			// const content = `${matchInfo.description}<br><br>${contact}`;
+			
+			const defaultMatchLogo = getApp().globalData.defaultMatchLogo;
+			// console.log(defaultMatchLogo);
+			const logoSrc = (tplInfo.matchLogo != undefined && tplInfo.matchLogo != "") ? tplInfo.matchLogo : defaultMatchLogo;
+			
 			const popupRule = [{
 				"type": 1,
 				"data": {
 					"title": matchInfo.compName,
 					"logo": {
-						"src": tplInfo.matchLogo,
+						"src": logoSrc,
 						"width": "260px",
 						 "height": "90px"
 					},
@@ -288,7 +293,7 @@ var cardfunc = {
 				pageName: "all"
 			},
 			success: (res) => {
-				console.log("[cardConfigQuery]", res);
+				// console.log("[cardConfigQuery]", res);
 				const data = res.data.data;
 				const config = data.configJson;
 				// console.log("[cardConfigQuery] config", config);

card/global.css

@@ -0,0 +1,81 @@
+:root {
+	--default-matchLogo-url: ;
+	--default-matchBanner-url: ;
+}
+
+.body {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+}
+
+.body-radius {
+	border-radius: 50rpx;
+	overflow: hidden;
+	/* 确保边框圆角不会溢出 */
+}
+
+.uni-row {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+}
+
+.uni-column {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+.uni-jct {
+	justify-content: flex-start;
+}
+
+.uni-jcc {
+	justify-content: center;
+}
+
+.uni-jce {
+	justify-content: flex-end;
+}
+
+.uni-jcsa {
+	justify-content: space-around;
+}
+
+.uni-jcsb {
+	justify-content: space-between;
+}
+
+.uni-jcse {
+	justify-content: space-evenly;
+}
+
+.uni-ais {
+	align-items: flex-start;
+}
+
+.uni-aie {
+	align-items: flex-end;
+}
+
+.uni-aibl {
+	align-items: baseline;
+}
+
+.uni-hidden {
+	visibility: hidden;
+}
+
+.uni-nowrap {
+	white-space: nowrap;
+}
+
+.uni-ovf-hidden {
+	overflow: hidden;
+}
+
+.uni-ovf-ellipsis {
+	text-overflow: ellipsis;
+}

card/manifest.json

@@ -2,8 +2,8 @@
     "name" : "card",
     "appid" : "__UNI__A61F96B",
     "description" : "",
-    "versionName" : "2.2.0",
-    "versionCode" : 220,
+    "versionName" : "2.2.2",
+    "versionCode" : 222,
     "transformPx" : false,
     /* 5+App特有相关 */
     "app-plus" : {

card/pages/mytz/detail.vue

@@ -98,10 +98,8 @@ https://oss-mbh5.colormaprun.com/card/#/pages/mytz/detail
 			curMonth() {
 				var currentDate = new Date();
 				var currentMonth = currentDate.getMonth() + 1; // 月份从0开始，所以要加1
-
 				return `${currentMonth}月`;
 			},
-
 		},
 		onLoad(query) { // 类型非必填，可自动推导
 			// console.log(query);

card/pages/mytz/rankList.vue

@@ -1,17 +1,20 @@
 <!-- 
 每月挑战 - 月排名列表
-http://localhost:5173/card/#/pages/mytz/rankList
+http://localhost:5173/card/#/pages/mytz/rankList?id=3
 https://oss-mbh5.colormaprun.com/card/#/pages/mytz/rankList
  -->
 <template>
 	<view class="body">
 		<view v-if="pageReady" class="content uni-column">
 			<view class="page-top uni-column">
-				<my-topbar :mcName="ecName" class="topbar-color" @btnBackClick="btnBack"
+				<my-topbar :mcName="title" class="topbar-color" @btnBackClick="btnBack"
 					@btnInfoClick="btnInfo"></my-topbar>
 
 				<view class="topContent uni-row uni-jcse">
-					<view class="tc-month">{{curMonth}}</view>
+					<view class="tc-monthBox uni-column uni-jcc" @click="onMonthBoxClick">
+						<view class="tc-monthName">{{selectMonthName}}</view>
+						<view class="tc-monthRank">查询排行榜</view>
+					</view>
 					<view class="tc-count uni-column">
 						<text>挑战次数</text>
 						<text>{{realNum}}/{{targetNum}}</text>
@@ -36,6 +39,19 @@ https://oss-mbh5.colormaprun.com/card/#/pages/mytz/rankList
 			<my-popup ref="mypopup" :config="cardConfigData.popupRuleConfig"
 				:dataList="cardConfigData.popupRuleList"></my-popup>
 
+			<uni-popup ref="popupMonthPick" :mask-click="false" maskBackgroundColor="rgba(0, 0, 0, 0.6)">
+				<view class="uni-column uni-jcse popupMonthPick">
+					<view class="uni-row uni-jcsb pmp-top">
+						<view class="pmp-title">选择月排行榜</view>
+						<view class="pmp-fullyear" @click="onMonthPick(0)">查看全年</view>
+					</view>
+					<view class="uni-row uni-jcsa pmp-main">
+						<view v-for="index in 12" :key="index" :class="index <= currentMonth ? 'tc-monthBox-small' : 'tc-monthBox-small-gray'">
+							<view class="tc-monthName-small" @click="onMonthPick(index)">{{index}}月</view>
+						</view>
+					</view>
+				</view>
+			</uni-popup>
 		</view>
 	</view>
 </template>
@@ -71,7 +87,10 @@ https://oss-mbh5.colormaprun.com/card/#/pages/mytz/rankList
 				ecName: '', // 卡片名称
 				ecDesc: '', // 卡片简介
 
-				month: '', // 月名称
+				currentYear: 0,
+				currentMonth: 0,
+				selectYear: 0,
+				selectMonth: 0,
 				realNum: 0, // 实际完赛次数
 				targetNum: 0, // 要求完赛次数
 
@@ -90,11 +109,22 @@ https://oss-mbh5.colormaprun.com/card/#/pages/mytz/rankList
 			}
 		},
 		computed: {
-			curMonth() {
-				var currentDate = new Date();
-				var currentMonth = currentDate.getMonth() + 1; // 月份从0开始，所以要加1
-				return `${currentMonth}月`;
-			}
+			selectMonthName() {
+				if (this.selectMonth > 0) {
+					return `${this.selectMonth}月`;
+				}
+				else {
+					return this.selectYear;
+				}
+			},
+			title() {
+				if (this.selectMonth > 0) {
+					return `${this.selectMonth}月挑战赛`;
+				}
+				else {
+					return `${this.selectYear}年挑战赛`;
+				}
+			},
 		},
 		onLoad(query) { // 类型非必填，可自动推导
 			// console.log(query);
@@ -110,6 +140,8 @@ https://oss-mbh5.colormaprun.com/card/#/pages/mytz/rankList
 			this.rankKey += "-" + this.ecId;
 			console.log("rankKey:", this.rankKey);
 
+			this.getCurYearMonth();
+
 			cardfunc.init(this, this.token, this.ecId);
 			cardfunc.getCardConfig(this.cardConfigQueryCallback, localCardConfig);
 		},
@@ -117,6 +149,16 @@ https://oss-mbh5.colormaprun.com/card/#/pages/mytz/rankList
 		onReady() {},
 		onUnload() {},
 		methods: {
+			getCurYearMonth() {
+				const currentDate = new Date();
+				const currentYear = currentDate.getFullYear();
+				const currentMonth = currentDate.getMonth() + 1; // 月份从0开始，所以要加1
+				// console.log("[getCurYearMonth]", currentYear, currentMonth);
+				this.currentYear = currentYear;
+				this.currentMonth = currentMonth;
+				this.selectYear = currentYear;
+				this.selectMonth = currentMonth;
+			},
 			cardConfigQueryCallback(cardconfig) {
 				this.loadConfig(cardconfig);
 				this.getCardBaseQuery();
@@ -257,15 +299,15 @@ https://oss-mbh5.colormaprun.com/card/#/pages/mytz/rankList
 				// console.log("cupProgress:", this.cupProgress);
 			},
 			getCupStyle(type) {
-				if (!(this.month > 0)) {
+				if (!(this.selectMonth >= 0)) {
 					return '';
 				}
 
 				let group = 1;
 				if (type == 'cup') {
-					return `background-image: url("static/cup/${group}/${this.month}.png")`;
+					return `background-image: url("static/cup/${group}/${this.selectMonth}.png")`;
 				} else if (type == 'cup-gray') {
-					return `background-image: url("static/cup/${group}/${this.month}h.png"); height:${this.cupProgress}% ;`;
+					return `background-image: url("static/cup/${group}/${this.selectMonth}h.png"); height:${this.cupProgress}% ;`;
 				}
 			},
 			// 卡片基本信息查询
@@ -300,7 +342,10 @@ https://oss-mbh5.colormaprun.com/card/#/pages/mytz/rankList
 						"token": this.token,
 					},
 					method: "POST",
-					data: {},
+					data: {
+						year: this.selectYear,
+						month: this.selectMonth,
+					},
 					success: (res) => {
 						// console.log("getCurrentMonthlyChallengeQuery", res);
 						if (checkResCode(res)) {
@@ -311,7 +356,6 @@ https://oss-mbh5.colormaprun.com/card/#/pages/mytz/rankList
 							}
 
 							const data = res.data.data;
-							this.month = data.month;
 							this.realNum = data.realNum;
 							// this.realNum = 2;
 							this.targetNum = data.targetNum;
@@ -335,6 +379,8 @@ https://oss-mbh5.colormaprun.com/card/#/pages/mytz/rankList
 					},
 					method: "POST",
 					data: {
+						year: this.selectYear,
+						month: this.selectMonth,
 						dispArrStr: this.dispArrStr
 					},
 					success: (res) => {
@@ -358,6 +404,25 @@ https://oss-mbh5.colormaprun.com/card/#/pages/mytz/rankList
 			onTabClick(val) {
 				// console.log("onTabClick: ", val);
 				this.tabCurrent = val;
+			},
+			onMonthBoxClick() {
+				this.$refs.popupMonthPick.open();
+			},
+			onMonthPick(month) {
+				// console.log("[onMonthPick] month", month);
+				if (month <= this.currentMonth) {
+					this.selectMonth = month;
+					this.$refs.popupMonthPick.close();
+					
+					this.getCurrentMonthlyChallengeQuery();
+					this.monthRankDetailQuery();
+				} else {
+					uni.showToast({
+						icon: "none",
+						title: "暂无该月记录",
+						duration: 1000
+					})
+				}
 			}
 		}
 	}
@@ -389,16 +454,23 @@ https://oss-mbh5.colormaprun.com/card/#/pages/mytz/rankList
 		height: 130px;
 	}
 
-	.tc-month {
+	.tc-monthBox {
 		width: 80px;
 		height: 80px;
 		background: url("/static/mytz/month_bg.png") no-repeat center;
 		background-size: contain;
 		color: #ff870d;
+	}
+
+	.tc-monthName {
+		margin-top: 18px;
 		font-size: 22px;
 		font-weight: 700;
-		text-align: center;
-		line-height: 100px;
+	}
+
+	.tc-monthRank {
+		font-size: 12px;
+		font-weight: 500;
 	}
 
 	.tc-count {
@@ -440,4 +512,59 @@ https://oss-mbh5.colormaprun.com/card/#/pages/mytz/rankList
 		width: 100%;
 		flex-grow: 1;
 	}
+
+	.popupMonthPick {
+		width: 90vw;
+		height: 200px;
+		background-color: #FEFBF6;
+		border-radius: 25px;
+	}
+
+	.pmp-top {
+		width: 90%;
+		font-size: 16px;
+	}
+
+	.pmp-main {
+		width: 90%;
+		height: 120px;
+		flex-wrap: wrap;
+	}
+
+	.pmp-title {
+		font-weight: 500;
+	}
+
+	.pmp-fullyear {
+		padding: 5px 10px;
+		border-radius: 8px;
+		border: 1px solid rgba(255, 135, 13, 1);
+		color: #FF870D;
+		font-weight: 500;
+	}
+
+	.tc-monthBox-small {
+		width: 50px;
+		height: 50px;
+		flex-shrink: 0;
+		background: url("/static/mytz/month_bg.png") no-repeat center;
+		background-size: contain;
+		color: #ff870d;
+	}
+
+	.tc-monthBox-small-gray {
+		width: 50px;
+		height: 50px;
+		flex-shrink: 0;
+		background: url("/static/mytz/month_bg_gray.png") no-repeat center;
+		background-size: contain;
+		color: #C4C4C4;
+	}
+
+	.tc-monthName-small {
+		margin-top: 20px;
+		font-size: 16px;
+		font-weight: 700;
+		text-align: center;
+	}
 </style>

card/pages/tpl/style1/cardconfig/test_user.js

@@ -3,7 +3,7 @@ export const localUserConfig = `{
 		"tplTypeId": 1,
 		"ssctId": 1,
 		"styleId": 1,
-		"matchLogo": "https://oss-mbh5.colormaprun.com/static/logo/default.png",
+		"matchLogo2": "https://oss-mbh5.colormaprun.com/static/logo/default.png",
 		"matchBanner": ""
 	},
 	"matchInfo": {

card/pages/tpl/style1/index.vue

@@ -98,6 +98,7 @@ https://oss-mbh5.colormaprun.com/card/#/pages/tpl/style1/index
 
 			this.getCardBaseQuery();
 			this.matchRsDetailQuery();
+			
 		},
 		onShow() {
 			this.getUserJoinCardQuery();
@@ -188,12 +189,13 @@ https://oss-mbh5.colormaprun.com/card/#/pages/tpl/style1/index
 				}
 				
 				const config = cardfunc.parseCardConfig(userconfig);
-				console.log("[loadUserConfig] userconfig:", config);
+				// console.log("[loadUserConfig] userconfig:", config);
 
 				// 加载CSS样式
 				let css = "";
 				const tplInfo = config.tplInfo;
-				if (tplInfo.matchLogo != '') {
+				if (tplInfo.matchLogo != undefined && tplInfo.matchLogo != '') {
+					// console.log("[loadUserConfig] tplInfo.matchLogo", tplInfo.matchLogo);
 					css = `.logo{
 						width: 80vw !important;
 						height: 40vw !important;
@@ -388,7 +390,7 @@ https://oss-mbh5.colormaprun.com/card/#/pages/tpl/style1/index
 	.logo {
 		width: 50vw;
 		height: 50vw;
-		background-image: url('https://oss-mbh5.colormaprun.com/static/logo/default.png');
+		background-image: var(--default-matchLogo-url);
 		background-repeat: no-repeat;
 		background-position-x: center;
 		background-position-y: center;