mobile_h5/card/pages/mytz/detail.vue

<!-- 
每月挑战 - 详情
http://localhost:5173/card/#/pages/mytz/detail
https://oss-mbh5.colormaprun.com/card/#/pages/mytz/detail
 -->
<template>
	<view class="body">
		<view class="content uni-column">
			<view class="top uni-column">
				<view class="topbar uni-row">
					<image mode="aspectFit" class="topbar-back" @click="btnBack" src="/static/default/back.png"></image>
					<text class="mcName">{{ecName}}</text>
					<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>
			</view>
			<view class="main uni-column">
				<view class="cupview uni-column">
					<view class="cup" :style="getCupStyle('cup')">
						<view class="cup-gray" :style="getCupStyle('cup-gray')"></view>
					</view>
					<text class="cup-text"><text style="font-weight: 600;">{{month}}月</text> |
						{{realNum}}/{{targetNum}}</text>
					<text class="cup-text2">{{progressText}}</text>
				</view>
				<button class="btnStart" @click="btnStart">{{btnText}}</button>
			</view>
		</view>

		<uni-popup ref="popup" :mask-click="false" maskBackgroundColor="rgba(0, 0, 0, 0.6)">
			<view class="popup">
				<swiper ref="swiper" class="swiper" :current="swiperCurrent" @change="swiperChange"
					:indicator-dots="false" indicator-active-color="rgba(46, 133, 236, 1)" :autoplay="false"
					:interval="5000">
					<swiper-item class="swiper-item uni-column">
						<view class="introduce uni-column">
							<text class="introduce-title">挑战赛规则</text>
							<view>
								<text class="introduce-sn">①</text>
								<text class="introduce-content">选任意定向地图，完成{{targetNum}}次挑战，你就胜利啦！</text>
							</view>
							<view>
								<text class="introduce-sn">②</text>
								<text class="introduce-content">挑战成功，会点亮你的电子奖杯！</text>
							</view>
							<view>
								<text class="introduce-sn">③</text>
								<text class="introduce-content">定向里程累计5千米，就有一枚奖章等你哦！</text>
							</view>
						</view>
						<image class="main-pic" mode="aspectFit" src="/static/mytz/main_pic.png"></image>
						<button class="swiper-item-button" @click="popupClose">确定</button>
					</swiper-item>
				</swiper>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import tools from '../../common/tools';
	import {
		token,
		apiCardBaseQuery,
		apiCurrentMonthlyChallengeQuery,
		checkResCode,
		checkToken
	} from '../../common/api';

	export default {
		data() {
			return {
				pageName: "mytz",
				rankKey: "rank-mytz",
				queryObj: {},
				queryString: "",
				token: "",
				tokenValid: false,
				ecId: 0, // 卡片id
				ecName: '', // 卡片名称
				ecDesc: '', // 卡片简介

				month: '', // 月名称
				realNum: 0, // 实际完赛次数
				targetNum: 0, // 要求完赛次数

				// mcType: 0, // 赛事类型 1 普通活动 2 线下赛 3 线上赛
				// mcName: "", // 赛事名称
				swiperCurrent: 0, // swiper当前所在滑块的 index
				cupProgress: 100, // 奖杯进度 （100 - 实际进度，初始值为100）
				progressText: "",
				btnText: "",
			}
		},
		computed: {
			curMonth() {
				var currentDate = new Date();
				var currentMonth = currentDate.getMonth() + 1; // 月份从0开始，所以要加1

				return `${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.getCardBaseQuery();
			this.getCurrentMonthlyChallengeQuery();
		},
		// 页面初次渲染完成，此时组件已挂载完成，DOM 树($el)已可用
		onReady() {
			this.dealFirstEnter();
		},
		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 = 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);
					},
				})
			},
			getCupProgress() {
				if (this.targetNum > 0 && this.realNum > 0) {
					if (this.realNum < this.targetNum) {
						const progress = this.realNum / this.targetNum * 100;
						this.cupProgress = 100 - progress;
					} else {
						this.cupProgress = 0;
					}
				} else {
					this.cupProgress = 100;
				}
				// console.log("cupProgress:", this.cupProgress);
			},
			getText() {
				if (!this.tokenValid) {
					this.progressText = `您尚未登录，欢迎参加挑战！！`;
					this.btnText = "开始挑战";
				}
				else if (this.realNum == 0) {
					this.progressText = `您尚未开始，欢迎参加挑战！！`;
					this.btnText = "开始挑战";
				}
				else if (this.realNum > 0 && this.realNum < this.targetNum) {
					this.progressText = `您已完成了${this.realNum}次挑战，继续加油！！`;
					this.btnText = "继续挑战";
				} else if (this.realNum > 0 && this.realNum >= this.targetNum){
					this.progressText = `恭喜，挑战成功！！`;
					this.btnText = "继续挑战";
				} else {
					this.progressText = ``;
					this.btnText = "开始挑战";
				}
			},
			getCupStyle(type) {
				if (! (this.month > 0)) {
					return '';
				}
				
				let group = 1;
				if (type == 'cup') {
					return `background-image: url("static/cup/${group}/${this.month}.png")`;
				} else if (type == 'cup-gray') {
					return `background-image: url("static/cup/${group}/${this.month}h.png"); height:${this.cupProgress}% ;`;
				}
			},
			// 卡片基本信息查询
			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;
					},
					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 (checkResCode(res)) {
							if (res.statusCode == 401) { // 未登录
								this.tokenValid = false;
							} else {
								this.tokenValid = true;
							}
							
							const data = res.data.data;

							this.month = data.month;
							this.realNum = data.realNum;
							this.targetNum = data.targetNum;
							
							this.dealNotice(this.realNum);
							
							this.getCupProgress();
							this.getText();
						}
					},
					fail: (err) => {
						console.log("getCurrentMonthlyChallengeQuery err", err)
					},
				});
			},
			btnBack() {
				// window.history.back();
				const url = `action://to_home/`;
				// window.location.href = url;
				tools.appAction(url);
			},
			btnInfo() {
				this.swiperCurrent = 0;
				this.$refs.popup.open();
			},
			btnStart() {
				const url = `action://to_map_list/`;
				// window.location.href = url;
				tools.appAction(url);
			},
			//当前轮播索引
			swiperChange(e) {
				const curIndex = e.detail.current;
				this.swiperCurrent = curIndex;
			},
			swiperNext() {
				this.swiperCurrent++;
			},
			popupClose() {
				this.$refs.popup.close()
			}
		}
	}
</script>

<style scoped>
	.content {
		width: 100vw;
		height: 100vh;
	}

	.top {
		width: 100%;
		height: 350rpx;
		padding-top: 36px;
		padding-bottom: 30px;
		justify-content: space-between;
		background-image: url("/static/backgroud/top_run.png"), linear-gradient(180deg, #178bff 0%, #004d9b 100%);
		background-repeat: no-repeat;
		background-position: 50rpx 50rpx, 0rpx 0rpx;
		/* background-position-x: center; */
		/* background-position-y: center; */
		background-size: auto 430rpx, contain;
	}

	.topbar {
		width: 90%;
		padding: 0rpx 30rpx;
		justify-content: space-between;
	}

	.topbar-back {
		width: 43rpx;
		height: 43rpx;
		/* opacity: 0; */
	}

	.topbar-info {
		width: 46rpx;
		height: 46rpx;
		/* opacity: 0; */
	}

	.topbar-rule {
		color: white;
		font-size: 32rpx;
	}
	
	.mcName {
		color: white;
		font-size: 40rpx;
		font-weight: 550;
	}

	.toplogo {
		width: 180rpx;
		height: 180rpx;
		/* margin-top: 20rpx; */
		background: url("/static/mytz/month_bg.png") no-repeat center;
		background-size: contain;
		color: #ff870d;
		font-size: 24px;
		font-weight: 700;
		text-align: center;
		line-height: 220rpx;
	}

	.cardDesc {
		/* font-weight: 550; */
		color: white;
		font-size: 32rpx;
	}

	.main {
		width: 80%;
		/* height: 800rpx; */
		flex-grow: 0.5;
		justify-content: space-between;
	}

	.cupview {
		height: 500rpx;
		margin-top: 150rpx;
	}
	
	.cup {
		width: 320rpx;
		height: 320rpx;
		/* background-image: url("/static/cup/004.png"); */
		background-position-x: center;
		background-repeat: no-repeat;
		background-size: 300rpx auto;
	}

	.cup-gray {
		width: 320rpx;
		/* height: 30%; */
		/* background-image: url("/static/cup/004h.png"); */
		background-position-x: center;
		background-repeat: no-repeat;
		background-size: 300rpx auto;
		overflow: hidden;
		/* filter: grayscale(1); */
	}

	.cup-text {
		color: #818181;
		font-size: 28rpx;
		line-height: 100rpx;
	}

	.cup-text2 {
		color: #333333;
		font-size: 28rpx;
		line-height: 100rpx;
	}

	.introduce {
		width: 80%;
		align-items: flex-start;
		justify-content: space-around;
	}

	.introduce-title {
		margin-top: 70rpx;
		margin-bottom: 60rpx;
		width: 100%;
		color: #333333;
		font-size: 36rpx;
		font-weight: 700;
		/* line-height: 60rpx; */
		text-align: center;
	}

	.introduce-sn {
		margin-right: 10rpx;
		color: #a16221;
		font-size: 38rpx;
		font-weight: 550;
	}

	.introduce-content {
		color: #333333;
		font-size: 28rpx;
		line-height: 72rpx;
	}

	.main-pic {
		width: 90%;
		height: 200rpx;
	}

	.btnStart {
		width: 100%;
		height: 100rpx;
		margin-bottom: 30rpx;
		color: white;
		font-weight: bold;
		line-height: 100rpx;
		background-color: #2e85ec;
		border-radius: 55rpx;
	}

	.popup {
		width: 90vw;
		height: 900rpx;
		background-color: #FEFBF6;
		border-radius: 50rpx;
	}

	.swiper {
		height: 100%;
	}

	.swiper-item {
		/* height: 80vh; */
		justify-content: space-between;
		/* background-color: lightblue; */
	}

	.swiper-item-title {
		margin-top: 80rpx;
		font-size: 40rpx;
	}

	.swiper-item-image {
		height: 300rpx;
	}

	.swiper-item-content {
		height: 100rpx;
		justify-content: start;
	}

	.swiper-item-button {
		width: 80%;
		height: 106rpx;
		margin-bottom: 80rpx;
		color: #ffffff;
		/* font-weight: bold; */
		line-height: 106rpx;
		background-color: #2e85ec;
		border-radius: 27px;
	}

	::v-deep .uni-swiper-dots-horizontal {
		bottom: 230rpx;
	}
</style>