de-net-official/pages/luckdraw.vue

<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">
                    <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">USDT 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">🕒 18:23:53</span>
                        <span class="w">🏆 3 WINNERS</span>
                    </div>
                    <div class="box">
                        <img src="../static/subject/icon-box.png" />
                    </div>
                    <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" @click="copyLinkHandle">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" alt />
                </div>
                <div class="show">
                    <div class="center">
                        <div class="giveaway" :class="{ bg: false }">
                            <template v-if="false">
                                <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">USDT 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">🕒 18:23:53</span>
                                    <span class="w">🏆 3 WINNERS</span>
                                </div>
                                <div class="box">
                                    <img src="../static/subject/icon-box.png" />
                                </div>
                            </template>
                            <template v-else>
                                <div class="succTop">
                                    <img :src=" require('../static/svg/icon-luck-complete.svg') " />
                                    <p class="tips">This Draw is Complete</p>
                                </div>
                                <div class="succTitle">
                                    <span>3/3 Winners</span>
                                    <span>100/100 USDT</span>
                                </div>
                                <div class="luck-list" @scroll="handleScroll($event)">
                                    <div class="luck-item" v-for="item, i in luck_list" v-bind:key="i">
                                        <img v-if="item.simpleUserInfoVO.avatarUrl" :src="item.simpleUserInfoVO.avatarUrl" alt />
                                        <img v-else src="/svg/icon-twitter.svg" alt />
                                        <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">
                            <div class="title">Install DeNet Plugin<br/>to Draw Prizes</div>
                            <div class="issue">DeNet will detect task situation to issue Giveaway</div>
                            <img class="button" :src=" require('../static/img/icon-install-plugin.svg') " />
                        </div>
                    </div>
                </div>
            </template>
        </template>
    </div>
</template>

<script>
import axios from 'axios'
import Cookies from 'js-cookie'
import { Toast } from 'vant';
import { isBrowser } from '../utils/help.js'
import FontAmount from '../components/FontAmount.vue'

export default {
    name: 'luckdraw',
    components: {
		FontAmount,
	},
    data() {
        return {
            detail: {
                postId: '',
                postBizData: {
                    imagePath: '',
                    postUserInfo: {},
                    amountValue: '0',
                }
            },
            luck_list: [],
            layer_show: true,
            isLoading: false,
            isMobile: false,
            isChrome: false,
        }
    },
    mounted() {
        this.checkBrowser()
    },
    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);
		},
        copyLinkHandle() {
        }
    }
}
</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%;
                    }
                }

                .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 {
                        width: 62px;
                        height: 62px;
                    }
                    .tips {
                        color: #FFFFFF;
                        font-size: 22px;
                        font-weight: 800;
                        line-height: 26px;
                        margin-top: 15px;
                    }
                }
                .succTitle {
                    display: flex;
                    justify-content: space-between;
                    height: 28px;
                    box-shadow: inset 0px -1px 0px #F2F2F2;
                    span {
                        margin: 0 16px;
                        font-size: 12px;
                        color: #B0B0B0;
                    }
                }
                .luck-list {
                    flex: 1;
                    width: 100%;
                    overflow-y: auto;
                    .luck-item {
                        display: flex;
                        padding: 12px 0;
                        margin: 0 16px;
                        border-bottom: 1px solid #F2F2F2;
                        justify-content: space-between;
                        position: relative;
                        img:first-child {
                            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;
                            }
                        }
                        img {
                            width: 42px;
                            height: 42px;
                            margin-right: 12px;
                        }
                        .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;
                    }
                }
            }
            .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 {
                    height: 64px;
                    margin-top: 30px;
                }
            }
        }
    }
}

.small {
    width: 100%;
    height: 100%;
    position: relative;
    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%;
        }
    }
    .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;
        }
    }
}
</style>