de-net-official/components/MobileGuidePage.vue

<template>
	<div class="guide" v-if="detail">
		<div class="header">
			<div class="tips">
				<img class="icon" :src="postUserInfo.avatarUrl" />
				<span>@{{ postUserInfo.nickName }}</span>
				<span class="special">{{ playType === 3 ? 'Invite You to Hunt the Treasure' : 'Send You Giveaway!' }}</span>
			</div>
			<div class="gif">
				<img :src="gifUrl" />
			</div>
		</div>
		<div class="welcome">
			<FontZoomMobile width="300" style="margin: auto">
				<!-- 普通红包 -->
				<template v-if="playType === 1">
					<template v-if="postBizData.rewardType === 1">
						<div>
							<span>You Won</span>
							<img class="icon" :src="postBizData.currencyIconPath" />
							<span class="special">{{ postBizData.amountValue }} {{ postBizData.currencySymbol }}</span>
							<span class="special">(${{ postBizData.usdAmountValue }})</span>
						</div>
						<div>
							<span>in the Giveaway!</span>
						</div>
					</template>
					<template v-else>
						<div>
							<span>You Won</span>
							<span class="special">{{ postBizData.customizedReward }}</span>
						</div>
						<div>
							<span>in the Giveaway!</span>
						</div>
					</template>
				</template>

				<!-- 抽奖红包 -->
				<template v-if="playType === 2">
					<div>
						<span>You are gifted an entries to earn</span>
					</div>
					<template v-if="postBizData.rewardType === 1">
						<div>
							<img class="icon" :src="postBizData.currencyIconPath" />
							<span class="special">{{ postBizData.amountValue }} {{ postBizData.currencySymbol }}</span>
							<span class="special">(${{ postBizData.usdAmountValue }})</span>
						</div>
					</template>
					<template v-else>
						<div>
							<span class="special">{{ postBizData.customizedReward }}</span>
						</div>
					</template>
				</template>

				<!-- 夺宝红包 -->
				<template v-if="playType === 3">
					<div>
						<span>Complete the quest to</span>
					</div>
					<div>
						<span class="special">Share ${{ detail.amountUsdValue }} </span>
					</div>
				</template>
			</FontZoomMobile>
		</div>
		<div class="footer">
			<div class="item">
				<img class="icon" src="../static/img/icon-item1.svg" />
				<span>First, <span class="special">Retweet</span> this tweet.</span>
			</div>
			<div class="item">
				<img class="icon" src="../static/img/icon-item2.svg" />
				<span>When you have access to your <span class="special">laptop</span>, open <span class="special">Chrome</span> and go to <span class="special">twitter.com.</span></span>
			</div>
			<div class="item">
				<img class="icon" src="../static/img/icon-item3.svg" />
				<span>Go to your profile page by clicking <span class="special">"Profile"</span> on the left column.</span>
			</div>
			<div class="item">
				<img class="icon" src="../static/img/icon-item4.svg" />
				<span>Find the tweet you retweeted, and click the giveaway, you can then install the <span class="special">DeNet Chrome Extension</span> to Get Giveaway.</span>
			</div>
		</div>
		<div class="retweet" @click="retweet">
			<img src="../static/img/icon-retweet.svg" />
			<span>Retweet</span>
		</div>
	</div>
</template>

<script>
import Report from '../log-center/log';
import { getMid } from '../utils/help';
import FontZoomMobile from './FontZoomMobile';

export default {
	name: 'mobileGuidePage',
	props: {
		detail: {
			type: Object,
		},
		postBizData: {
			type: Object,
		},
		postUserInfo: {
			type: Object,
		},
		playType: {
			type: Number,
		},
		reportMore: {
			type: Object,
		},
	},
	components: {
		FontZoomMobile,
	},
	data() {
		return {};
	},
	computed: {
		gifUrl() {
			let url;
			switch (this.playType) {
				case 1:
					url = require('../static/img/icon-gif-redbag.gif');
					break;
				case 2:
					url = require('../static/img/icon-gif-draw.png');
					break;
				case 3:
					url = require('../static/img/icon-gif-treasure.png');
					break;
			}
			return url;
		},
	},
	methods: {
		retweet() {
			let redPacketType;
			switch (this.playType) {
				case 1:
					redPacketType = 0;
					break;
				case 2:
					redPacketType = 1;
					break;
				case 3:
					redPacketType = 4;
					break;
			}

			Report.reportLog({
				baseInfo: {
					mid: getMid(),
					pageSource: Report.pageSource.mobileLandingPage,
					machineCode: getMid(),
				},
				params: {
					eventData: {
						businessType: Report.businessType.buttonClick,
						objectType: Report.objectType.rtButton,
						postId: this.detail.postId,
						redPacketType,
						...this.reportMore,
					},
				},
			});

			// jump
			setTimeout(() => {
				window.location.href = `https://twitter.com/intent/retweet?tweet_id=${this.detail.repostSrcContentId || this.detail.srcContentId}`;
			}, 300);
		},
	},
};
</script>

<style lang="scss" scoped>
.guide {
	width: 100%;
	min-height: 100%;
	background: linear-gradient(180deg, #cceaff 0%, #ffffff 70.42%);

	.header {
		position: relative;
		height: 240px;

		.tips {
			display: inline-block;
			height: 32px;
			color: #ffffff;
			line-height: 30px;
			margin-top: 8px;
			font-size: 12px;
			padding: 0 18px 0 10px;
			background: #1b5277;
			border-radius: 0 32px 32px 0;

			.icon {
				overflow: hidden;
				width: 20px;
				height: 20px;
				margin-right: 6px;
				border-radius: 50%;
				vertical-align: middle;
			}

			.special {
				color: #ff9737;
				font-weight: 700;
			}
		}

		.gif {
			width: 150px;
			height: 150px;
			margin: 40px auto 0;

			img {
				width: 100%;
				height: 100%;
			}
		}
	}

	.welcome {
		padding: 14px 0;
		font-size: 18px;
		font-weight: 700;
		line-height: 24px;
		text-align: center;
		background: rgba($color: #ffffff, $alpha: 0.5);

		.icon {
			overflow: hidden;
			width: 22px;
			height: 22px;
			border-radius: 50%;
			vertical-align: middle;
		}

		.special {
			color: #ff9737;
		}
	}

	.footer {
		padding: 40px 15px 100px;
		color: #6d6d6d;
		font-size: 14px;
		font-weight: 400;
		line-height: 17px;

		.item {
			position: relative;
			padding-left: 38px;
			margin-bottom: 16px;

			&:last-child {
				margin-bottom: 0;
			}

			.icon {
				position: absolute;
				left: 0;
			}

			.special {
				color: #1d9bf0;
			}
		}
	}

	.retweet {
		position: fixed;
		display: flex;
		align-items: center;
		justify-content: center;
		bottom: 26px;
		left: 16px;
		right: 16px;
		height: 52px;
		color: #ffffff;
		font-size: 18px;
		font-weight: 600;
		border-radius: 52px;
		background: #1d9bf0;

		img {
			width: 24px;
			margin-right: 6px;
		}
	}
}
</style>