JenkinsTest/page/act/gorgelottery.vue

<style lang="sass">
@import "./scss/gorgelottery.scss";
@import "./scss/lottery.scss";
</style>

<template>
    <div class="page-act-gorgelottery">
        <header class="activity-hd">
            <img src="./../../img/act/wzry1801/pic-banner.jpg" />
        </header>


        <section class="act-mod-act">
    
            <h2 class="mod-title mod-title1"></h2>
            <div class="mod-intro">
                <p>活动时间：1月17日-1月26日<br>通过<span class="font-yellow">3种途径</span>获得抽奖机会，最高可获得王者荣耀<span class="font-red">588点</span>券奖励，所有奖励以微信红包的形式发放。</p>
            </div>
            <h2 class="mod-title mod-title2"></h2>
            <ul class="list-step">
                <li>
                    <p class="step">一、关注“<span class="font-yellow">峡谷小助手</span>”微信公众号，获得<span class="font-red">1</span>次抽奖机会。</p>
                    <div class="code-wrap">
                        <div class="code">
                            <img src="./../../img/act/wzry1801/pic-code.jpg" />
                        </div>
                        <p>长按扫描二维码关注</p>
                    </div>
                </li>
                <li>
                    <p class="step">二、每邀请1个好友关注“峡谷小助手”，获得<span class="font-red">1</span>次抽奖机会，邀请越多，奖励越多</p>
                    <p class="step-tip">注：好友关注后必须打开活动页面才算有效，好友取消关注重新邀请无效。</p>
                    <span class="btn-act" @click="toggleModGuide()">邀请好友关注</span>
                </li>
                <li>
                    <p class="step">三、活动期间，下载、安装“<a class="font-yellow" :href="downloadUrl">微剧院APP</a>”，每天用微信号登录然后观看30秒电影解说视频，每天都能获得<span class="font-red">1</span>次抽奖机会。</p>
                    <img src="./../../img/act/wzry1801/pic-wjy.png" />
                    <a class="btn-act" :href="downloadUrl">点击下载</a>
                </li>
            </ul>
        </section>

        <section class="act-mod-lottory">
            <h2 class="mod-title mod-title3"></h2>

            <div class="lottery-wrap">
                <p class="tip-lottery">
                    <span>剩余<em>{{times}}</em>次抽奖机会</span>
                    <span class="btn-award" @click="toggleModAward">我的奖品»</span>
                </p>
                <ul class="lottery-cot" id="lottery">
                    <li class="lottery-item lottery-item1" data-order="0" data-score="0">
                        <p>谢谢<br>参与</p>
                    </li>
                    <li class="lottery-item lottery-item2" data-order="1" data-score="2">
                        <p>6元首<br>充英雄</p>
                    </li>
                    <li class="lottery-item lottery-item3" data-order="2" data-score="1">
                         <p>10点券</p>
                    </li>
                    <li class="lottery-item lottery-item4" data-order="7" data-score="1">
                         <p>10点券</p>
                    </li>
                    <li :class='"lottery-item btn-lottery "+(times==0?"disabled":"")' @click="startLottery()"></li>
                    <li class="lottery-item lottery-item5" data-order="3" data-score="3">
                         <p>588点券</p>
                    </li>
                    <li class="lottery-item lottery-item6" data-order="6" data-score="0">
                         <p>谢谢<br>参与</p>
                    </li>
                    <li class="lottery-item lottery-item7" data-order="5" data-score="4">
                         <p>288点券</p>
                    </li>
                    <li class="lottery-item lottery-item8" data-order="4" data-score="1">
                         <p>10点券</p>
                    </li>
                </ul>
            </div>

            <div class="mod-invite">
                <h2 class="invite-title"></h2>
                <p class="invite-add">已邀请<em>{{friendTotal}}</em>位好友，好友关注后额外获得<em>{{getLotteryCount}}</em>次抽奖机会</p>
                <ul>
                    <li v-for="(user,index) in friends" :key="index">
                    <img :src='user.avatar_url ? user.avatar_url : "/_src/img/pic-head.png"' onerror="this.src='https://pub.dwstatic.com/common/img/blank.png'">
                    <p>{{user.nick_name ? user.nick_name : user.user_name}}</p>
                </li>
                </ul>
            </div>
        </section>

        <section class="act-mod-menu" v-if="bingoList.length>0">
            <h2 class="mod-title mod-title4"></h2>
            <div class="menu-wrap">
                <div class="menu-scroll">
                    <ul class="list-menu" :style='"-webkit-transform: translateY("+scrollHeight+"px);transform: translateY("+scrollHeight+"px)"'>
                        <li v-for="(bingo,index) in bingoList" :key="index">
                            <p class="item-fl">
                                <img :src='bingo.avatar ? bingo.avatar : "/_src/img/pic-head.png"' onerror="this.src='https://pub.dwstatic.com/common/img/blank.png'"> 
                                <span>{{bingo.nick}}</span>
                            </p>
                            <p class="item-fm"></p>
                            <p class="item-fr">{{bingo.reward}}</p>
                        </li>
                    </ul>
                </div>
            </div>
        </section>

        <section class="act-mod-popup popup-guide" @click="toggleModGuide" v-show="isShowGuide">
            <div class="mask"></div>
            <div class="cont-guide">
                <p>点击右上角，从这里分享给你的微信好友吧!</p>
            </div>
        </section>

        <section class="act-mod-popup popup-award" @click="toggleModAward" v-show="isShowAward">
            <div class="mask"></div>
            <div class="cont">
                <section class="box-award" v-if="userBingo.length>0">
                    <ul class="list-award">
                        <li v-for="(bingo,index) in userBingo" :key="index">
                            <h3>{{bingo.rewardName}}</h3>
                            <p><label>领取方式</label>: 微信关注"<span>多玩福利广场</span>",回复"领奖"即可</p>
                        </li>
                    </ul>
                </section>
                <section class="box-noaward" v-else>暂无奖品</section>
            </div>
        </section>

        <section class="act-mod-popup popup-result" v-show="isShowResult && scoreRet.amount>=0 ">
            <div class="mask" @click="toggleModResult"></div>
            <div class="cont">
                <div class="lot-fail" v-if="scoreRet.amount == 0">
                    <h2><i class="icon-lot-fail"></i>抱歉，你没有中奖</h2>
                    <p>邀请1个好友关注“<span class="font-yellow">峡谷小助手</span>”微信公众号，可再抽奖<span class="font-red">1</span>次，邀请越多，中奖几率越高。</p>
                    <span class="btn-act" @click="toggleModGuide">邀请微信好友</span>
                </div>
                <div class="lot-success" v-else>
                    <h2><i class="icon-lot-success"></i>恭喜，中奖啦</h2>
                    <ul>
                        <li><label>奖品</label>：<span class="font-red">获得10点券</span></li>
                        <li><label>领取方式</label>：微信关注“<span  class="font-yellow">多玩福利广场</span>”公众号，回复“领奖”即可。</li>
                    </ul>
                    <p>再邀请1个好友关注，抽588点券！</p>
                    <span class="btn-act" @click="toggleModGuide">邀请微信好友</span>
                </div>
            </div>
        </section>
    </div>
</template>

<script>
    import gorgelottery from './js/gorgelottery.js'
    export default gorgelottery
</script>