|
|
@@ -0,0 +1,236 @@
|
|
|
+<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">
|
|
|
+ <!-- 普通红包 -->
|
|
|
+ <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>
|
|
|
+ </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">
|
|
|
+ <img src="../static/img/icon-retweet.svg" />
|
|
|
+ <span>Retweet</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: 'mobileGuidePage',
|
|
|
+ props: {
|
|
|
+ detail: {
|
|
|
+ type: Object,
|
|
|
+ },
|
|
|
+ postBizData: {
|
|
|
+ type: Object,
|
|
|
+ },
|
|
|
+ postUserInfo: {
|
|
|
+ type: Object,
|
|
|
+ },
|
|
|
+ playType: {
|
|
|
+ type: Number,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ 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: {
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+</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>
|
