|
|
@@ -0,0 +1,1064 @@
|
|
|
+<template>
|
|
|
+ <div class="content">
|
|
|
+ <template v-if="isLoading">
|
|
|
+ <img
|
|
|
+ class="loading"
|
|
|
+ src="../static/svg/icon-loading.svg" />
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <template v-if="isMobile">
|
|
|
+ <!-- 手机端 -->
|
|
|
+ <div class="small" :class="{ bg: status === 'not-open' }">
|
|
|
+ <template v-if="status === 'not-open'">
|
|
|
+ <img class="lottery" :src=" require('../static/svg/icon-luck-mark.svg') " />
|
|
|
+ <div class="head">
|
|
|
+ <img :src="detail.postBizData.postUserInfo.avatarUrl" />
|
|
|
+ <span>{{ detail.postBizData.postUserInfo.nickName }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="price">
|
|
|
+ <div class="usdt">{{ detail.postBizData.currencySymbol }} GIVEAWAY</div>
|
|
|
+ <div class="money">
|
|
|
+ <img :src="detail.postBizData.currencyIconPath" />
|
|
|
+ <font-amount :fontSize="60" :amount="detail.postBizData.amountValue"></font-amount>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="time">
|
|
|
+ <span class="t">🕒 {{ validity || '00:00:00' }}</span>
|
|
|
+ <span class="w">🏆 {{ detail.postBizData.totalCount }} WINNERS</span>
|
|
|
+ </div>
|
|
|
+ <div class="box">
|
|
|
+ <img src="../static/subject/icon-box.png" />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <div class="succTop">
|
|
|
+ <template v-if="status === 'opened'">
|
|
|
+ <img class="img" :src=" require('../static/svg/icon-luck-rabbit.svg') " />
|
|
|
+ <p class="tips">Good Luck Next Time!</p>
|
|
|
+ </template>
|
|
|
+ <template v-else-if="status === 'expire'">
|
|
|
+ <!-- <img class="img" :src=" require('../static/svg/icon-luck-complete.svg') " />
|
|
|
+ <p class="tips">This Draw is Complete</p> -->
|
|
|
+ <p class="expire">This Giveaways<br/>expired on {{ formatTime(detail.postBizData.endTimestamp, 'MM-DD') }}</p>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <p class="win">🎉 Awesome! You are Winner!</p>
|
|
|
+ <div class="win-money">
|
|
|
+ <img :src="detail.postBizData.currencyIconPath" />
|
|
|
+ <font-amount :fontSize="46" :amount="receiveAmount"></font-amount>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ <div class="succTitle">
|
|
|
+ <span>{{ detail.postBizData.receiveCount || 0 }}/{{ detail.postBizData.totalCount || 0 }} Winners</span>
|
|
|
+ <span>{{ detail.postBizData.receiveAmountValue }} / {{ detail.postBizData.amountValue || '' }} {{ detail.postBizData.currencySymbol || '' }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="luck-list" @scroll="handleScroll($event)">
|
|
|
+ <div class="luck-item" v-for="item, i in luck_list" v-bind:key="i">
|
|
|
+ <div class="userLogo">
|
|
|
+ <img class="medal" v-if="i < 2" :src=" require('../static/svg/icon-medal-' + i + '.svg') " />
|
|
|
+ <img class="header" v-if="item.simpleUserInfoVO.avatarUrl" :src="item.simpleUserInfoVO.avatarUrl" alt />
|
|
|
+ <img class="header" v-else src="/svg/icon-twitter.svg" alt />
|
|
|
+ </div>
|
|
|
+ <div class="luck-content">
|
|
|
+ <div class="luck-title">{{ item.simpleUserInfoVO.nickName || 'Twitter User' }}</div>
|
|
|
+ <div class="luck-time">{{ formatTime(item.receiveTimestamp, 'MM-DD HH:mm') }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="luck-money">
|
|
|
+ <img :src="item.currencyIconPath" alt />
|
|
|
+ <div class="luck-money-txt">{{ item.amountValue || 0 }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="luck-king" v-if="item.maxAmount">
|
|
|
+ <img src="/svg/icon-king-hat.svg" alt />
|
|
|
+ <span>Luckiest Draw</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div class="area-cp-link">
|
|
|
+ <div class="area-list">
|
|
|
+ <div class="item">
|
|
|
+ <div class="icon"><img :src=" require('../static/subject/01.svg') " /></div>
|
|
|
+ <div class="font">Complete the tasks on tweet</div>
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <div class="icon"><img :src=" require('../static/subject/02.svg') " /></div>
|
|
|
+ <div class="font">Open link on PC to draw</div>
|
|
|
+ <div class="pc"><img :src=" require('../static/subject/pc.svg') " /></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="area-content">
|
|
|
+ {{ linkHref }}
|
|
|
+ </div>
|
|
|
+ <div class="area-btn">
|
|
|
+ <div class="btn" :data-clipboard-text="linkHref">Copy Link</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="layer" v-show="layer_show">
|
|
|
+ <div class="layer-box">
|
|
|
+ <div class="layer-txt">Unable to copy, please enter the link manually</div>
|
|
|
+ <div class="layer-btn" @click="layer_show = false">Done</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 手机端 -->
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <div class="logo">
|
|
|
+ <img src="/img/icon-logo.png" />
|
|
|
+ </div>
|
|
|
+ <div class="show">
|
|
|
+ <div class="center">
|
|
|
+ <div class="giveaway" :class="{ bg: status === 'not-open' }">
|
|
|
+ <template v-if="status === 'not-open'">
|
|
|
+ <img class="lottery" :src=" require('../static/svg/icon-luck-mark.svg') " />
|
|
|
+ <div class="head">
|
|
|
+ <img :src="detail.postBizData.postUserInfo.avatarUrl" />
|
|
|
+ <span>{{ detail.postBizData.postUserInfo.nickName }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="price">
|
|
|
+ <div class="usdt">{{ detail.postBizData.currencySymbol }} GIVEAWAY</div>
|
|
|
+ <div class="money">
|
|
|
+ <img :src="detail.postBizData.currencyIconPath" />
|
|
|
+ <font-amount :fontSize="60" :amount="detail.postBizData.amountValue"></font-amount>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="time">
|
|
|
+ <span class="t">🕒 {{ validity || '00:00:00' }}</span>
|
|
|
+ <span class="w">🏆 {{ detail.postBizData.totalCount }} WINNERS</span>
|
|
|
+ </div>
|
|
|
+ <div class="box">
|
|
|
+ <img src="../static/subject/icon-box.png" />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <div class="succTop">
|
|
|
+ <template v-if="status === 'opened'">
|
|
|
+ <img class="img" :src=" require('../static/svg/icon-luck-rabbit.svg') " />
|
|
|
+ <p class="tips">Good Luck Next Time!</p>
|
|
|
+ </template>
|
|
|
+ <template v-else-if="status === 'expire'">
|
|
|
+ <!-- <img class="img" :src=" require('../static/svg/icon-luck-complete.svg') " />
|
|
|
+ <p class="tips">This Draw is Complete</p> -->
|
|
|
+ <p class="expire">This Giveaways<br/>expired on {{ formatTime(detail.postBizData.endTimestamp, 'MM-DD') }}</p>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <p class="win">🎉 Awesome! You are Winner!</p>
|
|
|
+ <div class="win-money">
|
|
|
+ <img :src="detail.postBizData.currencyIconPath" />
|
|
|
+ <font-amount :fontSize="46" :amount="receiveAmount"></font-amount>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ <div class="succTitle">
|
|
|
+ <span>{{ detail.postBizData.receiveCount || 0 }}/{{ detail.postBizData.totalCount || 0 }} Winners</span>
|
|
|
+ <span>{{ detail.postBizData.receiveAmountValue }} / {{ detail.postBizData.amountValue || '' }} {{ detail.postBizData.currencySymbol || '' }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="luck-list" @scroll="handleScroll($event)">
|
|
|
+ <div class="luck-item" v-for="item, i in luck_list" v-bind:key="i">
|
|
|
+ <div class="userLogo">
|
|
|
+ <img class="medal" v-if="i < 2" :src=" require('../static/svg/icon-medal-' + i + '.svg') " />
|
|
|
+ <img class="header" v-if="item.simpleUserInfoVO.avatarUrl" :src="item.simpleUserInfoVO.avatarUrl" alt />
|
|
|
+ <img class="header" v-else src="/svg/icon-twitter.svg" alt />
|
|
|
+ </div>
|
|
|
+ <div class="luck-content">
|
|
|
+ <div class="luck-title">{{ item.simpleUserInfoVO.nickName || 'Twitter User' }}</div>
|
|
|
+ <div class="luck-time">{{ formatTime(item.receiveTimestamp, 'MM-DD HH:mm') }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="luck-money">
|
|
|
+ <img :src="item.currencyIconPath" alt />
|
|
|
+ <div class="luck-money-txt">{{ item.amountValue || 0 }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="luck-king" v-if="item.maxAmount">
|
|
|
+ <img src="/svg/icon-king-hat.svg" alt />
|
|
|
+ <span>Luckiest Draw</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ <div class="desc">
|
|
|
+ <template v-if="isChrome">
|
|
|
+ <template v-if="status === 'not-open'">
|
|
|
+ <div class="title">Install DeNet Plugin<br/>to Draw Prizes</div>
|
|
|
+ <div class="issue">DeNet will detect task situation to issue Giveaway</div>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <div class="title">Install the Denet plugin<br/>to not miss the next draw</div>
|
|
|
+ </template>
|
|
|
+ <img class="button" @click="installExtension" src="../static/svg/icon-install-nft-plugin.svg" />
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <div class="title">Get Giveaway<br />with chrome</div>
|
|
|
+ <div class="issue">Only supports getting Giveaways through chrome</div>
|
|
|
+ <img class="button" @click="clickOpenChrome" src="../static/svg/icon-install-nft-chrome.svg" />
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import axios from 'axios'
|
|
|
+import Cookies from 'js-cookie'
|
|
|
+import { Toast } from 'vant';
|
|
|
+import { isBrowser, appType, appVersionCode, formatSecondsAsTime } from '../utils/help.js'
|
|
|
+import FontAmount from '../components/FontAmount.vue'
|
|
|
+
|
|
|
+var moment = require('moment');
|
|
|
+var ClipboardJS = require('clipboard')
|
|
|
+
|
|
|
+const api = {
|
|
|
+ prod: 'https://api.denetme.net',
|
|
|
+ pre: 'https://preapi.denetme.net',
|
|
|
+ test: 'https://testapi.denetme.net'
|
|
|
+}
|
|
|
+const page = {
|
|
|
+ prod: "https://h5.denetme.net",
|
|
|
+ pre: "https://preh5.denetme.net",
|
|
|
+ test: 'https://testh5.denetme.net'
|
|
|
+}
|
|
|
+const jumpUrl = page[process.env.NUXT_ENV.MODE] + '/'
|
|
|
+const baseURL = api[process.env.NUXT_ENV.MODE]
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'luckdraw',
|
|
|
+ components: {
|
|
|
+ FontAmount,
|
|
|
+ },
|
|
|
+ head() {
|
|
|
+ return {
|
|
|
+ type: '',
|
|
|
+ title: this.title,
|
|
|
+ appVersionCode: 3,
|
|
|
+ meta: [
|
|
|
+ // facebook
|
|
|
+ {
|
|
|
+ name: 'og:url',
|
|
|
+ content: this.jumpUrl + 'luckdraw/' + this.detail.postId
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'og:title',
|
|
|
+ content: this.metaTitle
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'og:image',
|
|
|
+ content: this.detail.postBizData.imagePath || ''
|
|
|
+ },
|
|
|
+ // twitter
|
|
|
+ {
|
|
|
+ name: 'twitter:card',
|
|
|
+ content: 'summary_large_image'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'twitter:url',
|
|
|
+ content: this.jumpUrl + 'luckdraw/' + this.detail.postId
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'twitter:title',
|
|
|
+ content: this.metaTitle
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'twitter:image',
|
|
|
+ content: this.detail.postBizData.imagePath || ''
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ detail: {
|
|
|
+ postId: '',
|
|
|
+ postBizData: {
|
|
|
+ imagePath: '',
|
|
|
+ postUserInfo: {},
|
|
|
+ amountValue: '0',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ luck_list: [],
|
|
|
+ luck_list_end: false,
|
|
|
+ layer_show: false,
|
|
|
+ isLoading: true,
|
|
|
+ isMobile: false,
|
|
|
+ isChrome: false,
|
|
|
+ config: {},
|
|
|
+ mid: '',
|
|
|
+ status: '', // not-open->未打开 opened->没有抽中 success->抽中了 expire->过期
|
|
|
+ page_index: 1,
|
|
|
+ page_size: 20,
|
|
|
+ validity: '',
|
|
|
+ receiveAmount: '0',
|
|
|
+ title: 'DeNet Giveaway',
|
|
|
+ jumpUrl: jumpUrl,
|
|
|
+ metaTitle: 'DeNet: An Easy Web3 Tool For GIVEAWAY / AIRDROP',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getConfig()
|
|
|
+ this.setCookieMid()
|
|
|
+ this.checkBrowser()
|
|
|
+ this.handleStatusPage()
|
|
|
+ this.isLoading = false;
|
|
|
+
|
|
|
+ // 复制链接
|
|
|
+ var clipboard = new ClipboardJS('.btn');
|
|
|
+ clipboard.on('success', function (e) {
|
|
|
+ Toast('copy success');
|
|
|
+ e.clearSelection();
|
|
|
+ });
|
|
|
+ clipboard.on('error', function (e) {
|
|
|
+ this.layer_show = true
|
|
|
+ });
|
|
|
+ },
|
|
|
+ async asyncData(params) {
|
|
|
+ let { route } = params;
|
|
|
+ let { data } = await axios.post(`${baseURL}/denet/post/getDetail`, {
|
|
|
+ baseInfo: {
|
|
|
+ appVersionCode: appVersionCode,
|
|
|
+ mid: function () {
|
|
|
+ return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
|
|
|
+ var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
|
|
|
+ return v.toString(16);
|
|
|
+ });
|
|
|
+ }()
|
|
|
+ },
|
|
|
+ params: {
|
|
|
+ postId: route.params.id || ''
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if (data.code == 0) {
|
|
|
+ if (data.data && data.data.postBizData && typeof data.data.postBizData == 'string') {
|
|
|
+ data.data.postBizData = JSON.parse(data.data.postBizData)
|
|
|
+ }
|
|
|
+ if(data.data.postBizData === null) {
|
|
|
+ data.data.postBizData = {
|
|
|
+ postUserInfo: {}
|
|
|
+ }
|
|
|
+ }
|
|
|
+ console.log('detail', data.data)
|
|
|
+
|
|
|
+ return {
|
|
|
+ detail: data.data,
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ checkBrowser() {
|
|
|
+ this.linkHref = window.location.href;
|
|
|
+ this.isChrome = isBrowser() == 'chrome';
|
|
|
+ this.isMobile = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
|
|
|
+ if (!this.isChrome) {
|
|
|
+ this.status = 'no-chrome'
|
|
|
+ } else {
|
|
|
+ this.setPickupInfo()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async getConfig() {
|
|
|
+ let { data } = await axios.post(`${baseURL}/denet/base/config/getFrontConfig`, {
|
|
|
+ baseInfo: {
|
|
|
+ appVersionCode: appVersionCode,
|
|
|
+ mid: this.mid
|
|
|
+ },
|
|
|
+ params: {}
|
|
|
+ })
|
|
|
+ if (data.code == 0) {
|
|
|
+ this.config = data.data;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ setCookieMid() {
|
|
|
+ let _cookie_mid_arr = Cookies.get('mid') || []
|
|
|
+ if (_cookie_mid_arr.length > 0) {
|
|
|
+ this.mid = JSON.parse(_cookie_mid_arr)[0].mid
|
|
|
+ } else {
|
|
|
+ this.mid = this.guid()
|
|
|
+ Cookies.set('mid', JSON.stringify([{ mid: this.mid }]), { expires: 1000 })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ guid() {
|
|
|
+ return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
|
|
|
+ var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
|
|
|
+ return v.toString(16);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ clickOpenChrome() {
|
|
|
+ window.open('https://www.google.com/chrome')
|
|
|
+ },
|
|
|
+ installExtension() {
|
|
|
+ let { extensionsInstallChannel, extensionsInstallUrl } = this.config;
|
|
|
+ switch (extensionsInstallChannel) {
|
|
|
+ case "officeDownload":
|
|
|
+ location.href = url;
|
|
|
+ this.$router.push({
|
|
|
+ path: '/install'
|
|
|
+ })
|
|
|
+ break;
|
|
|
+ case "chromeAppStore":
|
|
|
+ window.open(extensionsInstallUrl)
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ setPickupInfo() {
|
|
|
+ let pickupInfo = {
|
|
|
+ srcContentId: this.detail.srcContentId,
|
|
|
+ postNickName: this.detail.postBizData.postUserInfo.nickName,
|
|
|
+ createTime: Date.now(),
|
|
|
+ };
|
|
|
+ Cookies.set('pickup_info', JSON.stringify(pickupInfo), { expires: 100 });
|
|
|
+ },
|
|
|
+ formatTime(time, _type = 'MM-DD HH:mm:ss') {
|
|
|
+ return moment(time).format(_type)
|
|
|
+ },
|
|
|
+ getValidity(end_time) {
|
|
|
+ let timer = setInterval(() => {
|
|
|
+ let time = moment(new Date().getTime())
|
|
|
+ let endTime = moment(end_time + 5000)
|
|
|
+ let downTime = (endTime - time) || 0
|
|
|
+ if (downTime > 0) {
|
|
|
+ this.validity = formatSecondsAsTime(downTime / 1000);
|
|
|
+ } else {
|
|
|
+ this.validity = `00:00:00`
|
|
|
+ this.getDetail(() => {
|
|
|
+ this.handleStatusPage()
|
|
|
+ })
|
|
|
+ clearInterval(timer)
|
|
|
+ }
|
|
|
+ }, 1000)
|
|
|
+ },
|
|
|
+ handleScroll(e) {
|
|
|
+ e = e.target
|
|
|
+ if (this.luck_list_end) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if ((e.clientHeight + e.scrollTop) / e.scrollHeight > .8) {
|
|
|
+ this.luck_list_end = false
|
|
|
+ this.page_index++
|
|
|
+ this.getReceivedList()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleStatusPage() {
|
|
|
+ // 如果 我领取过了
|
|
|
+ // taskFinishStatus 任务完成状态（0:未完成，1:已完成，2:已过期）
|
|
|
+ if (this.detail.postBizData.myReceived) {
|
|
|
+ this.receiveAmount = this.detail.postBizData.myReceived.amountValue || 0
|
|
|
+ // 如果 任务完成状态 = 未完成
|
|
|
+ if (this.detail.postBizData.myReceived.taskFinishStatus == 0) {
|
|
|
+ // 显示任务未完成页面
|
|
|
+ this.status = `opened`
|
|
|
+ } else if (this.detail.postBizData.myReceived.taskFinishStatus == 1) {
|
|
|
+ //如果 任务完成状态 = 已经完成
|
|
|
+ if (this.receiveAmount == 0) {
|
|
|
+ // 领取到空红包
|
|
|
+ this.status = `opened`
|
|
|
+ } else {
|
|
|
+ // 显示成功页面
|
|
|
+ this.status = `success`
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // 如果 任务完成状态 = 已经过期
|
|
|
+ if (this.detail.postBizData.status == 1) {
|
|
|
+ // 显示未打开页面
|
|
|
+ this.status = 'not-open'
|
|
|
+ } else {
|
|
|
+ // 显示已经过期页面
|
|
|
+ this.status = 'expire'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // 如果 我没有领取过
|
|
|
+ // 如果 红包状态 = 进行中
|
|
|
+ if (this.detail.postBizData.status == 1) {
|
|
|
+ // 如果 过了红包的领取截止时间 = true
|
|
|
+ if (this.detail.postBizData.receiveTimeExpired) {
|
|
|
+ // 显示过期页面
|
|
|
+ this.status = 'expire'
|
|
|
+ } else {
|
|
|
+ // 如果 过了红包的领取截止时间 = false
|
|
|
+ // 显示未打开页面
|
|
|
+ this.status = 'not-open'
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // 红包状态 = 已经结束了 ｜ 已经终止 ｜ 终止退款中
|
|
|
+ // 显示过期页面
|
|
|
+ this.status = 'expire'
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // this.status = 'not-open'
|
|
|
+
|
|
|
+ // getList
|
|
|
+ if (this.status !== 'not-open') {
|
|
|
+ this.getReceivedList()
|
|
|
+ } else {
|
|
|
+ this.getValidity(this.detail.postBizData.endTimestamp)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async getDetail(fn) {
|
|
|
+ let { data } = await axios.post(`${baseURL}/denet/post/getDetail`, {
|
|
|
+ baseInfo: {
|
|
|
+ appVersionCode: appVersionCode,
|
|
|
+ mid: this.mid
|
|
|
+ },
|
|
|
+ params: {
|
|
|
+ postId: this.detail.postId
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if (data.code == 0) {
|
|
|
+ this.detail.postBizData = JSON.parse(data.data.postBizData)
|
|
|
+ if (fn) fn();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async getReceivedList() {
|
|
|
+ let { data } = await axios.post(`${baseURL}/denet/post/luckdrop/getReceivedList`, {
|
|
|
+ baseInfo: {
|
|
|
+ appVersionCode: appVersionCode,
|
|
|
+ mid: this.mid
|
|
|
+ },
|
|
|
+ params: {
|
|
|
+ pageNum: this.page_index,
|
|
|
+ pageSize: this.page_size,
|
|
|
+ postId: this.detail.postId || ''
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if (data.code == 0) {
|
|
|
+ if (data.data.length > 0) {
|
|
|
+ this.luck_list = this.luck_list.concat(data.data)
|
|
|
+ this.luck_list_end = false
|
|
|
+ } else {
|
|
|
+ this.luck_list_end = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+html,
|
|
|
+body,
|
|
|
+#__nuxt,
|
|
|
+#__layout {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.content {
|
|
|
+ overflow: hidden;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: #F5FAFF;
|
|
|
+ .loading {
|
|
|
+ position: absolute;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ margin: auto;
|
|
|
+ width: 40px;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ .logo {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 70px;
|
|
|
+ margin-left: 25px;
|
|
|
+ img {
|
|
|
+ width: 99px;
|
|
|
+ height: 32px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .show {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: calc(100% - 70px);
|
|
|
+ .center {
|
|
|
+ display: flex;
|
|
|
+ margin: -50px auto 0;
|
|
|
+ justify-content: space-between;
|
|
|
+ width: 1000px;
|
|
|
+ .giveaway {
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ width: 375px;
|
|
|
+ height: 500px;
|
|
|
+ border-radius: 20px;
|
|
|
+ background-color: #fff;
|
|
|
+ box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.1);
|
|
|
+ &.bg {
|
|
|
+ background: linear-gradient(17.98deg, #3438FF 3.69%, #8B56FC 74.32%);
|
|
|
+ }
|
|
|
+ .lottery {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ width: 110px;
|
|
|
+ height: 94px;
|
|
|
+ }
|
|
|
+ .head {
|
|
|
+ display: flex;
|
|
|
+ height: 50px;
|
|
|
+ align-items: center;
|
|
|
+ img {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin: 0 10px 0 15px;
|
|
|
+ border: solid 2px #fff;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ color: #fff;
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: 700;
|
|
|
+ line-height: 16px;
|
|
|
+ letter-spacing: 0.005em;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .price {
|
|
|
+ text-align: center;
|
|
|
+ .usdt {
|
|
|
+ margin: 10px 0;
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 20px;
|
|
|
+ text-align: center;
|
|
|
+ letter-spacing: 0.3px;
|
|
|
+ }
|
|
|
+ .money {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ img {
|
|
|
+ width: 46px;
|
|
|
+ height: 46px;
|
|
|
+ margin-right: 15px;
|
|
|
+ border-radius: 50%;
|
|
|
+ border: solid 3px #fff;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ color: #fff;
|
|
|
+ font-size: 60px;
|
|
|
+ font-weight: 800;
|
|
|
+ line-height: 76px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .time {
|
|
|
+ display: flex;
|
|
|
+ height: 30px;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 17px;
|
|
|
+ line-height: 22px;
|
|
|
+ text-align: center;
|
|
|
+ .t {
|
|
|
+ color: #fff;
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+ .w {
|
|
|
+ color: #fcc74e;
|
|
|
+ margin-left: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .box {
|
|
|
+ margin: auto;
|
|
|
+ width: 200px;
|
|
|
+ height: 200px;
|
|
|
+ margin-top: 27px;
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .desc {
|
|
|
+ width: 520px;
|
|
|
+ .title {
|
|
|
+ color: #2C2C2C;
|
|
|
+ font-size: 36px;
|
|
|
+ line-height: 40px;
|
|
|
+ font-weight: 900;
|
|
|
+ margin-top: 90px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+ .issue {
|
|
|
+ font-size: 15px;
|
|
|
+ color: #A4A4A4;
|
|
|
+ }
|
|
|
+ .button {
|
|
|
+ cursor: pointer;
|
|
|
+ height: 64px;
|
|
|
+ margin-top: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.small {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
+ background-color: #fff;
|
|
|
+ &.bg {
|
|
|
+ background: linear-gradient(17.98deg, #3438FF 3.69%, #8B56FC 74.32%);
|
|
|
+ }
|
|
|
+ .lottery {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ width: 110px;
|
|
|
+ height: 94px;
|
|
|
+ }
|
|
|
+ .luck-list {
|
|
|
+ height: calc(100% - 430px);
|
|
|
+ }
|
|
|
+ .head {
|
|
|
+ display: flex;
|
|
|
+ height: 50px;
|
|
|
+ align-items: center;
|
|
|
+ img {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin: 0 10px 0 15px;
|
|
|
+ border: solid 2px #fff;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ color: #fff;
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: 700;
|
|
|
+ line-height: 16px;
|
|
|
+ letter-spacing: 0.005em;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .price {
|
|
|
+ text-align: center;
|
|
|
+ .usdt {
|
|
|
+ margin: 10px 0;
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 20px;
|
|
|
+ text-align: center;
|
|
|
+ letter-spacing: 0.3px;
|
|
|
+ }
|
|
|
+ .money {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ img {
|
|
|
+ width: 46px;
|
|
|
+ height: 46px;
|
|
|
+ margin-right: 15px;
|
|
|
+ border-radius: 50%;
|
|
|
+ border: solid 3px #fff;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ color: #fff;
|
|
|
+ font-size: 60px;
|
|
|
+ font-weight: 800;
|
|
|
+ line-height: 76px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .time {
|
|
|
+ display: flex;
|
|
|
+ height: 30px;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 17px;
|
|
|
+ line-height: 22px;
|
|
|
+ text-align: center;
|
|
|
+ .t {
|
|
|
+ color: #fff;
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+ .w {
|
|
|
+ color: #fcc74e;
|
|
|
+ margin-left: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .box {
|
|
|
+ margin: auto;
|
|
|
+ width: 200px;
|
|
|
+ height: 200px;
|
|
|
+ margin-top: 27px;
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .area-cp-link {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ background: #fff;
|
|
|
+ overflow: hidden;
|
|
|
+ width: 100%;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ height: 238px;
|
|
|
+ box-shadow: 0px -4px 10px rgba(0, 0, 0, 0.1);
|
|
|
+ border-top-left-radius: 10px;
|
|
|
+ border-top-right-radius: 10px;
|
|
|
+
|
|
|
+ .area-list {
|
|
|
+ clear: both;
|
|
|
+ margin: 15px;
|
|
|
+ .item {
|
|
|
+ clear: both;
|
|
|
+ overflow: hidden;
|
|
|
+ margin: 7px 0;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+ .icon {
|
|
|
+ float: left;
|
|
|
+ margin-right: 8px;
|
|
|
+ margin-top: -2px;
|
|
|
+ }
|
|
|
+ .font {
|
|
|
+ float: left;
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+ .pc {
|
|
|
+ float: left;
|
|
|
+ margin-top: -2px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .area-content {
|
|
|
+ margin: 0 15px;
|
|
|
+ color: #4B4B4B;
|
|
|
+ padding: 7px 10px;
|
|
|
+ font-size: 13px;
|
|
|
+ border-radius: 5px;
|
|
|
+ background: #F4F4F4;
|
|
|
+ word-break: break-all;
|
|
|
+ }
|
|
|
+
|
|
|
+ .area-btn {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ margin: 15px 15px 0 15px;
|
|
|
+ display: inline-block;
|
|
|
+ width: 100%;
|
|
|
+ height: 47px;
|
|
|
+ font-size: 18px;
|
|
|
+ line-height: 34px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ border-radius: 100px;
|
|
|
+ background: #389AFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.layer {
|
|
|
+ position: fixed;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ background: rgba(0, 0, 0, .5);
|
|
|
+
|
|
|
+ .layer-box {
|
|
|
+ width: 300px;
|
|
|
+ height: 170px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 11px;
|
|
|
+ opacity: 1;
|
|
|
+ position: absolute;
|
|
|
+ top: 250px;
|
|
|
+ left: 50%;
|
|
|
+ margin-left: -150px;
|
|
|
+
|
|
|
+ .layer-txt {
|
|
|
+ margin: 30px 0;
|
|
|
+ width: 100%;
|
|
|
+ padding: 0 27px;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 18px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .layer-btn {
|
|
|
+ width: 190px;
|
|
|
+ height: 40px;
|
|
|
+ background: #389AFF;
|
|
|
+ border-radius: 100px;
|
|
|
+ margin: 0 auto;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 40px;
|
|
|
+ color: #fff;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.luck-list {
|
|
|
+ flex: 1;
|
|
|
+ width: 100%;
|
|
|
+ height: 310px;
|
|
|
+ overflow-y: auto;
|
|
|
+ .luck-item {
|
|
|
+ display: flex;
|
|
|
+ padding: 12px 0;
|
|
|
+ margin: 0 16px;
|
|
|
+ border-bottom: 1px solid #F2F2F2;
|
|
|
+ justify-content: space-between;
|
|
|
+ position: relative;
|
|
|
+ .header {
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ .luck-king {
|
|
|
+ position: absolute;
|
|
|
+ top: 36px;
|
|
|
+ right: 0px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ img {
|
|
|
+ width: 22px;
|
|
|
+ height: 19px;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 14px;
|
|
|
+ letter-spacing: 0.3px;
|
|
|
+ color: #f5b945;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .userLogo {
|
|
|
+ position: relative;
|
|
|
+ width: 42px;
|
|
|
+ height: 42px;
|
|
|
+ margin-right: 12px;
|
|
|
+ .medal {
|
|
|
+ position: absolute;
|
|
|
+ right: -5px;
|
|
|
+ bottom: -5px;
|
|
|
+ width: 18px;
|
|
|
+ height: 18px;
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .luck-content {
|
|
|
+ flex: auto;
|
|
|
+ .luck-title {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 16px;
|
|
|
+ letter-spacing: 0.3px;
|
|
|
+ color: #444444;
|
|
|
+ }
|
|
|
+ .luck-time {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 14px;
|
|
|
+
|
|
|
+ color: #9b9b9b;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .luck-money {
|
|
|
+ display: flex;
|
|
|
+ height: 17px;
|
|
|
+ align-items: center;
|
|
|
+ img {
|
|
|
+ width: 14px;
|
|
|
+ height: 14px;
|
|
|
+ margin-right: 6px;
|
|
|
+ }
|
|
|
+ .luck-money-txt {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 14px;
|
|
|
+ /* identical to box height */
|
|
|
+ text-align: right;
|
|
|
+ letter-spacing: 0.3px;
|
|
|
+ color: #444444;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .luck-item:last-child {
|
|
|
+ border: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.succTop {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ height: 150px;
|
|
|
+ margin-bottom: 13px;
|
|
|
+ background: #7D52FD;
|
|
|
+ border-radius: 0 586px 586px/0 0 104px 104px;
|
|
|
+ .img {
|
|
|
+ height: 62px;
|
|
|
+ }
|
|
|
+ .expire {
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-size: 22px;
|
|
|
+ font-weight: 800;
|
|
|
+ line-height: 36px;
|
|
|
+ margin-top: 15px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .tips {
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-size: 22px;
|
|
|
+ font-weight: 800;
|
|
|
+ line-height: 26px;
|
|
|
+ margin-top: 15px;
|
|
|
+ }
|
|
|
+ .win {
|
|
|
+ font-size: 21px;
|
|
|
+ font-weight: 800;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .win-money {
|
|
|
+ display: flex;
|
|
|
+ margin-top: -10px;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ img {
|
|
|
+ width: 44px;
|
|
|
+ height: 44px;
|
|
|
+ margin-right: 15px;
|
|
|
+ border-radius: 50%;
|
|
|
+ border: solid 3px #fff;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ color: #fff;
|
|
|
+ font-size: 60px;
|
|
|
+ font-weight: 800;
|
|
|
+ line-height: 76px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.succTitle {
|
|
|
+ display: flex;
|
|
|
+ padding: 5px 0;
|
|
|
+ justify-content: space-between;
|
|
|
+ box-shadow: inset 0px -1px 0px #F2F2F2;
|
|
|
+ span {
|
|
|
+ margin: 0 16px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #B0B0B0;
|
|
|
+ &:last-child {
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
