mobile_h5/card/pages/bm/style3/index.vue

<!-- 
[报名] 样式3 - 卡片页
http://localhost:5173/card/#/pages/bm/style3/index
https://oss-mbh5.colormaprun.com/card/#/pages/bm/style3/index
 -->
<template>
	<view class="body body-radius">
		<view v-if="pageReady" 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 mod-text">{{type}}</text>
				</view>
				<text class="name mod-text">{{ecName}}</text>
				<button class="button mod-button">{{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 {
				pageReady: false,
				// audioSrc: "/static/audio/2.mp3",
				// audioSrc: "https://oss-mbh5.colormaprun.com/card/static/audio/2.mp3",
				// audioSrc: "http://t-oss-mbh5.colormaprun.com/card/static/audio/2.mp3",
				pageName: "index",
				rankKey: "rank-bm-style3",
				queryObj: {},
				queryString: "",
				token: "",
				
				ecId: 0, // 卡片id
				ecName: '', // 卡片名称
				ecDesc: '', // 卡片简介
				beginSecond: null, // 卡片开始时间戳，单位秒
				endSecond: null, // 卡片结束时间戳，单位秒
				secondCardName: '', // 跳转页面名称
				
				isJoin: null, // 是否报名
				isFinished: false, // 赛事是否结束
				
				// 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.matchRsDetailQuery();
		},
		onShow() {
			this.getUserJoinCardQuery();
		},
		onUnload() {
			this.clear();
		},
		methods: {
			playMusic() {
				// if (this.$audio.audioStatus == 0 || this.$audio.audioSrc != this.audioSrc) {
				// 	this.$audio.playAudio(this.audioSrc);
				// }
			},
			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);
				
				this.pageReady = true;
			},
			// 获取倒计时
			getCountdown() {
				// console.log(this.endSecond)
				if (this.endSecond > 0) {
					const now = Date.now() / 1000;
					const dif = this.endSecond - now;
					// const dif = 3600*24 - 60;
					if (dif > 0) {
						this.countdown = "距结束 " + tools.convertSecondsToDHM(dif);
					} else {
						this.countdown = "已结束";
						this.isFinished = true;
					}
					// 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.secondCardName = data.secondCardName;
						
						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/guoqing.png');
								background-size: cover;
							}
							.logo{
								width: 60vw;
								height: 50vw;
								background: url('static/logo/building.png') no-repeat center;
								background-size: contain;
							}
							.mod-text{
								color: #ffffff !important;
							}
							.mod-button{
								color: #ffffff !important;
								background-color: #990000 !important;
							}
						`
						}; */
						
						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() {
				// this.playMusic();
				
				if (this.isJoin) {	// 已报名
					// uni.reLaunch({
					// 	url: '/pages/bm/style1/rankList?full=true&' + this.queryString
					// });
					// const url = `${ossUrl}#/pages/bm/style3/rankOverview?${this.queryString}&full=true`;
					const url = `${ossUrl}#/pages/bm/style3/rankList?${this.queryString}&full=true`;
					tools.appAction(url);
				}
				else {	// 未报名
					// uni.reLaunch({
					// 	url: '/pages/bm/style1/signup?full=true&' + this.queryString
					// });
					if (!this.isFinished) {	// 赛事未结束
						if (this.secondCardName == 'rankList') {
							const url = `${ossUrl}#/pages/bm/style3/rankList?${this.queryString}&full=true`;
							tools.appAction(url);
						} else {
							const url = `${ossUrl}#/pages/bm/style3/signup?${this.queryString}&full=true`;
							tools.appAction(url);
						}
					}
					else {	// 赛事已结束
						// const url = `${ossUrl}#/pages/bm/style3/rankOverview?${this.queryString}&full=true`;
						const url = `${ossUrl}#/pages/bm/style3/rankList?${this.queryString}&full=true`;
						tools.appAction(url);
					}
				}
			}
		}
	}
</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;
		color: #000000;
		background: #ffffff;
		border-radius: 56rpx;
		font-size: 46rpx;
		line-height: 80rpx;
	}
	
	/* .mod-text {
		color: #FF6203 !important;
	}
	
	.mod-button {
		color: #ffffff !important;
		background-color: #FF6203 !important;
	} */
	
</style>