mobile_h5/card/pages/mytz/index.vue

<!-- 
每月挑战 - 卡片页
http://localhost:5173/card/#/pages/mytz/index
https://oss-mbh5.colormaprun.com/card/#/pages/mytz/index
 -->
<template>
	<view class="body body-radius">
		<view class="content uni-column" :class="contentBg" @click="btnClick">
			<view class="main uni-column">
				<image mode="aspectFit" class="logo" :src="logoSrc"></image>
				<view class="uni-row" style="position: relative;">
					<image v-if="notice" mode="aspectFit" src="/static/common/notice.png" class="notice"></image>
					<text class="type">{{ecName}}</text>
				</view>
				<text class="name">{{name}}</text>
				<button class="button button-txtcolor">{{btnText}}</button>
			</view>
		</view>
	</view>
</template>

<script>
	import tools from '../../common/tools';
	import {
		ossUrl,
		token,
		apiCardBaseQuery,
		apiCurrentMonthlyChallengeQuery,
	} from '../../common/api';
	 
	export default {
		data() {
			return {
				pageName: "index",
				rankKey: "rank-mytz",
				queryObj: {},
				queryString: "",
				token: "",
				
				ecId: 0,	// 卡片id
				ecName: '', // 卡片名称
				ecDesc: '', // 卡片简介
				beginSecond: null, // 卡片开始时间戳，单位秒
				endSecond: null, // 卡片结束时间戳，单位秒
				
				month: '', // 月名称
				realNum: 0, // 实际完赛次数
				targetNum: 0, // 要求完赛次数
				
				contentBg: "",
				logoSrc: "",
				type: "",
				name: "",
				btnText: "",
				notice: false,	// 是否显示(小红点)通知图标
			}
		},
		computed: {
			curYearMonth() {
				var currentDate = new Date();
				var currentYear = currentDate.getFullYear();
				var currentMonth = currentDate.getMonth() + 1; // 月份从0开始，所以要加1
				 
				return `${currentYear}年${currentMonth}月`;
			}
		},
		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"] ?? "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();
		},
		onUnload() {
		},
		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 = 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);
					},
				})
			},
			// 卡片基本信息查询
			getCardBaseQuery() {
				uni.request({
					url: apiCardBaseQuery,
					header: {
						"Content-Type": "application/x-www-form-urlencoded",
						"token": this.token,
					},
					method: "POST",
					data: {
						ecId: this.ecId
					},
					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;
					},
					fail: (err) => {
						console.log("getCardBaseQuery err", err)
					},
				});
			},
			// 玩家当前月挑战记录查询
			getCurrentMonthlyChallengeQuery() {
				uni.request({
					url: apiCurrentMonthlyChallengeQuery,
					header: {
						"Content-Type": "application/x-www-form-urlencoded",
						"token": this.token,
					},
					method: "POST",
					data: {},
					success: (res) => {
						// console.log("getCurrentMonthlyChallengeQuery", res);
						
						if (res.data.code == 0) {
							const data = res.data.data;
			
							this.month = data.month;
							this.realNum = data.realNum;
							this.targetNum = data.targetNum;
							
							this.dealNotice(this.realNum);
						}
					},
					fail: (err) => {
						console.log("getCurrentMonthlyChallengeQuery err", err)
					},
				});
			},
			btnClick() {
				// uni.reLaunch({
				// 	url: '/pages/mytz/detail?full=true&' + this.queryString
				// });
				window.location.href = `${ossUrl}#/pages/mytz/detail?${this.queryString}&full=true`;
			}
		}
	}
</script>

<style scoped>
	.content {
		width: 100vw;
		height: 100vh;
		justify-content: center;
	}
	
	.content-bg-blue {
		background: linear-gradient(180deg,#178bff 0%,#004d9b 100%);
	}
	
	.content-bg-green {
		background: linear-gradient(180deg,#7aedff 0%,#047200 100%);
	}
	
	.content-bg-brown {
		background: linear-gradient(180deg,#ad4301 0%,#8d2219 100%);
	}

	.main {
		width: 100%;
		height: 700rpx;
		/* margin-top: 20rpx; */
		justify-content: space-evenly;
	}

	.logo {
		/* width: 230rpx; */
		height: 230rpx;
	}
	
	.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: 20rpx;
		background: #ffffff;
		border-radius: 56rpx;
		font-size: 46rpx;
		line-height: 80rpx;
	}
	
	.button-txtcolor {
		color: #0458ad;
	}
	
</style>