|
|
@@ -1,94 +1,94 @@
|
|
|
<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>
|
|
|
+ <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 === 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 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>
|
|
|
@@ -97,64 +97,64 @@ import { getMid } from '../utils/help';
|
|
|
import FontZoomMobile from './FontZoomMobile';
|
|
|
|
|
|
export default {
|
|
|
- name: 'mobileGuidePage',
|
|
|
- props: {
|
|
|
- detail: {
|
|
|
- type: Object,
|
|
|
- },
|
|
|
- postBizData: {
|
|
|
- type: Object,
|
|
|
- },
|
|
|
- postUserInfo: {
|
|
|
- type: Object,
|
|
|
- },
|
|
|
- playType: {
|
|
|
+ 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;
|
|
|
- }
|
|
|
+ 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: {
|
|
|
+ Report.reportLog({
|
|
|
+ baseInfo: {
|
|
|
mid: getMid(),
|
|
|
pageSource: Report.pageSource.mobileLandingPage,
|
|
|
machineCode: getMid(),
|
|
|
@@ -164,120 +164,136 @@ export default {
|
|
|
businessType: Report.businessType.buttonClick,
|
|
|
objectType: Report.objectType.rtButton,
|
|
|
postId: this.detail.postId,
|
|
|
- redPacketType,
|
|
|
- ...this.reportMore,
|
|
|
+ redPacketType,
|
|
|
+ ...this.reportMore,
|
|
|
},
|
|
|
},
|
|
|
- })
|
|
|
+ });
|
|
|
|
|
|
- // jump
|
|
|
- setTimeout(() => {
|
|
|
- window.location.href = `https://twitter.com/intent/retweet?tweet_id=${this.detail.repostSrcContentId || this.detail.srcContentId}`;
|
|
|
- }, 300)
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+ // 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;
|
|
|
- }
|
|
|
- }
|
|
|
+ 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>
|
