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 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>