|
|
@@ -0,0 +1,283 @@
|
|
|
+<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 win up to</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span class="special">${{detail.upGainAmountValue}} for you two!</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: .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>
|
