de-net-official/pages/course/index.vue

<!-- 移动端 教程页面 -->
<template>
	<div class="course-page">
		<div class="course-page-tips">
			<img class="tip-icon" src="./../../static/img/icon-h5-topc.png" />
			<span class="tip-text">{{ tipTextCpd }}</span>
		</div>
		<div class="course-page-pics-contail">
			<div class="course-page-pics-contail-wrap" :style="{ transform: translastCpd }">
				<img class="pic" v-for="(item, index) in course" :key="index" :src="item" />
			</div>
		</div>
		<div class="course-page-pagination">
			<div class="spon" v-for="(item, index) in course" :key="index" :class="active === index ? 'active' : ''"></div>
		</div>
		<div class="course-page-btns">
			<div v-if="active > 0" class="course-page-btns-btn back" @click="back">Back</div>
			<div v-if="active < this.course.length - 1" class="course-page-btns-btn next" @click="next">Next</div>
			<div v-if="active === this.course.length - 1 && isUsefulCpd && (isLottaryCpd || isTreasureCpd || isCommonCpd)" @click="retweer" class="course-page-btns-btn retweer">Retweet</div>
		</div>
	</div>
</template>

<script>
import { PlayType, UsefulType } from '../../types';
import Report from '../../log-center/log';
import { getQueryString, baseURL, getMid, getStorage, removeStorage, getDetailSSR } from '../../utils/help';

export default {
	name: 'course',
	data() {
		return {
			active: 0,
			useful: '',
			course: [],
		};
	},
	computed: {
		translastCpd() {
			return `translateX(${-this.active * 100}vw)`;
		},
		isLottaryCpd() {
			return +this.playType === PlayType.lottery;
		},
		isCommonCpd() {
			return +this.playType === PlayType.common;
		},
		isTreasureCpd() {
			return +this.playType === PlayType.Treasure;
		},
		isNFTCpd() {
			return +this.playType === PlayType.NFT;
		},
		isUsefulCpd() {
			return this.useful === '1';
		},
		tipTextCpd() {
			if (!this.isUsefulCpd) {
				return 'How to install Denet Chrome Extension';
			} else if (this.isCommonCpd) {
				return 'Install DeNet chrome extension to claim your prize';
			} else if (this.isLottaryCpd || this.isTreasureCpd) {
				return 'Install Denet Chrome Extension to complete the quest';
			} else {
				return 'How to install Denet Chrome Extension';
			}
		},
	},
	methods: {
		next() {
			this.active++;
			this.reportLog();
		},
		back() {
			this.active--;
			this.reportLog();
		},
		retweer() {
			let logData = {
				baseInfo: {
					mid: getMid(),
					pageSource: Report.pageSource.tutorialPage,
					machineCode: getMid(),
				},
				params: {
					eventData: {
						businessType: Report.businessType.buttonClick,
						objectType: Report.objectType.rtButton,
						postId: getQueryString('postId'),
					},
				},
			};
			Report.reportLog(logData);
			if (getQueryString('srcContentId')) {
				window.location.href = `https://twitter.com/intent/retweet?tweet_id=${getQueryString('srcContentId')}`;
			}
		},
		reportLog() {
			let logData = {
				baseInfo: {
					mid: getMid(),
					pageSource: Report.pageSource.tutorialPage,
					machineCode: getMid(),
				},
				params: {
					eventData: {
						businessType: Report.businessType.pageView,
						postId: getQueryString('postId'),
					},
					extParams: {
						pageindex: this.active + 1,
					},
				},
			};
			if (this.isNFTCpd) {
				delete logData.params.eventData.postId;
				logData.params.eventData.nftProjectId = getQueryString('nftProjectId');
			}
			Report.reportLog(logData);
		},
	},
	async asyncData(context) {
		let { route, error } = context;
		let result = await getDetailSSR({
			context,
			url: `${baseURL}/denet/base/guide/getAllMobilePageGuide`,
		});
		if (result.code == 0) {
			return {
				useful: route.query.useful,
				playType: route.query.playType,
				course: route.query.useful === UsefulType.unUseful || route.query.playType === PlayType.NFT ? result.data.withoutRewardGuideImages : result.data.withRewardGuideImages,
			};
		} else {
			return error({
				message: result.msg,
				statusCode: 301,
			});
		}
	},
	mounted() {
		this.reportLog();
		const landPageLog = getStorage('land-page-log');
		if (landPageLog) {
			Report.reportLog(JSON.parse(landPageLog));
			removeStorage('land-page-log');
		}
	},
};
</script>

<style lang="scss">
html,
body,
#__nuxt,
#__layout {
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
}
</style>

<style lang="scss" scoped>
body {
	background-color: #f5f5f5;
}

.course-page {
	min-height: 100%;
	max-height: 100%;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;

	&-tips {
		width: 100%;
		height: 80px;
		background: #94a7b6;
		display: flex;
		padding: 0 20px;
		align-items: center;
		font-weight: 600;
		font-size: 16px;
		line-height: 22px;
		color: #fff;
		z-index: 1;

		.tip-icon {
			width: 36px;
			margin-right: 20px;
		}
	}

	&-pics-contail {
		flex: 1;
		overflow: hidden;

		&-wrap {
			display: flex;
			transition: all 0.5s;

			.pic {
				width: 100%;
			}
		}
	}

	&-pagination {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 16px 0;

		.spon {
			width: 8px;
			height: 8px;
			background: #d9d9d9;
			margin: 0 3px;
			border-radius: 50%;
		}

		.active {
			background: #1d9bf0;
		}
	}

	&-btns {
		width: 100%;
		display: flex;
		padding: 0 8px 30px;

		&-btn {
			flex: 1;
			margin: 0 8px;
			height: 54px;
			line-height: 54px;
			text-align: center;
			border-radius: 60px;
		}

		&-btn:active {
			-webkit-tap-highlight-color: transparent;
		}

		.back {
			background: rgba(29, 155, 240, 0.01);
			border: 1px solid #e8e8e8;
			color: #3d3d3d;
		}

		.next {
			background: rgba(0, 0, 0, 0.01);
			border: 1px solid #b5e1ff;
			color: #1d9bf0;
		}

		.retweer {
			background: #1d9bf0;
			border: 1px solid #1d9bf0;
			color: #fff;
		}
	}
}
</style>