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-wrap" :style="{ transform: translastCpd }">
			<img class="pic" v-for="(item, index) in course" :key="index" :src="item" />
		</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 } from '../../types';
import axios from 'axios';
import { getQueryString, baseURL, appVersionCode } from '../../utils/help';

export default {
	name: 'course',
	data() {
		return {
			active: 0,
			course: [],
		};
	},
	computed: {
		translastCpd() {
			return `translateX(${-this.active * 100}vw)`;
		},
		isLottaryCpd() {
			return +getQueryString('playType') === PlayType.lottery;
		},
		isCommonCpd() {
			return +getQueryString('playType') === PlayType.common;
		},
		isTreasureCpd() {
			return +getQueryString('playType') === PlayType.Treasure;
		},
		isUsefulCpd() {
			return getQueryString('useful') === '1';
		},
		tipTextCpd() {
			if (this.isLottaryCpd) {
				return 'Install DeNet chrome extension to claim your prize';
			} else if (this.isCommonCpd || this.isTreasureCpd) {
				return 'Install Denet Chrome Extension to complete the quest';
			} else {
				return 'How to install Denet Chrome Extension';
			}
		},
	},
	methods: {
		next() {
			this.active++;
		},
		back() {
			this.active--;
		},
		retweer() {
			if (getQueryString('postId')) {
				window.open(`https://twitter.com/intent/retweet?tweet_id=${getQueryString('postId')}`);
			}
		},
	},
	async asyncData(params) {
		let { route } = params;
		let { data } = await axios.post(`${baseURL}/denet/base/guide/getAllMobilePageGuide`, {
			baseInfo: {
				appVersionCode: appVersionCode,
				mid: '00000000-0000-0000-0000-000000000000',
			},
		});
		if (data.code == 0) {
			console.log('detail', data.data, route);
			return {
				course: route.query.useful === '1' ? data.data.withRewardGuideImages : data.data.withoutRewardGuideImages,
			};
		}
	},
};
</script>

<style lang="scss" scoped>
body {
	background-color: #f5f5f5;
}
.course-page {
	min-height: 100vh;
	max-height: 100vh;
	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;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1;
		.tip-icon {
			width: 36px;
			margin-right: 20px;
		}
	}
	&-pics-wrap {
		display: flex;
		transition: all 0.5s;
		.pic {
			width: 100%;
		}
	}
	&-pagination {
		display: flex;
		justify-content: center;
		align-items: center;
		.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>