JenkinsTest/page/act/wzry.vue

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

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

        
        <section class="act-mod-app">
            <h2 class="mod-title mod-title1"></h2>
            <i class="logo"></i>
            <p>解说电影APP</p>
            <p>5分钟呈现电影的精彩</p>
        </section>

        <section class="act-mod-act">
    
            <h2 class="mod-title mod-title2"></h2>
            <p class="mod-time">活动时间：2017.11.01-2017.11.10</p>
            <div class="mod-intro">
                <p><b>1.</b>下载微剧院，并完成注册，可获得1次抽奖机会</p>
                <p><b>2.</b>邀请一个好友，额外获得一次抽奖机会，邀请越多，中奖机率越高。</p>
                <p class="tip">注：好友必须安装微剧院，填写您的邀请码，并登录</p>
            </div>

            <h2 class="mod-title mod-title3"></h2>
            <div class="mod-intro">
                <p><b>第一步：</b>下载微剧院</p>
                <p><b>第二步：</b>使用微信登录（一定要使用微信登录，否则系统无法识别）</p>
                <p><b>第三步：</b>回到本页面参与抽奖</p>
            </div>
            <div class="btns">
                <span class="btn btn-share" @click="showModGuide()"  v-if="glanceId>0">分享好友</span>
                <a class="btn btn-dl" :href="downloadUrl">安装微剧院</a>
            </div>
        </section>

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

            <div class="tip-wrap" v-if="!isLoginedWjy">
                <a class="tip-login" :href="downloadUrl">您还未登录过微剧院</a>
                <p class="tip-login2">一定要使用微信登录哦!</p>
            </div>

            <div class="lottery-wrap">
                <p class="tip-lottery">
                    <span>剩余<em>{{gachaCount}}</em>次抽奖机会</span>
                    <span class="btn-award" v-if="isLoginedWjy" @click="showModAward">我的奖品»</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="0">
                         <p>谢谢<br>参与</p>
                    </li>
                    <li class="lottery-item lottery-item4" data-order="7" data-score="1">
                         <p>1Q币</p>
                    </li>
                    <li :class='"lottery-item btn-lottery "+(gachaCount==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="0">
                         <p>谢谢<br>参与</p>
                    </li>
                </ul>
            </div>
        </section>

        <section class="act-mod-share" v-if="glanceId>0">
            <h2 class="mod-title mod-title5"></h2>
            <div class="btn-share" @click="showModGuide">马上去邀请好友</div>
            <p class="tip">已邀请<em>{{invitedList.length}}</em>位好友，额外获得<em>{{invitedList.length}}</em>次抽奖机会</p>
            <ul>
                <li v-for="(user,index) in invitedList" :key="index">
                    <img :src='user.head ? user.head : "/_src/img/pic-head.png"'>
                    <p>{{user.nick ? user.nick : "游客"+user.id}}</p>
                </li>
            </ul>
        </section>

        <section class="act-mod-menu" v-if="bingoList.length>0">
            <h2 class="mod-title mod-title6"></h2>
            <ul class="list-menu">
                <li v-for="(bingo,index) in bingoList" :key="index">
                    <p class="item-name">{{bingo.nick}}</p>
                    <p class="item-line"></p>
                    <p class="item-gif">{{bingo.reward}}</p>
                </li>
            </ul>
        </section>

        <section class="act-mod-guide" @click="closeModGuide" v-show="isShowGuide">
            <div class="mask"></div>
            <div class="cont">
                <p>已为您生成专属邀请码，从这里分享给你的微信好友吧!</p>
            </div>
        </section>

        <section class="act-mod-award" v-show="isShowAward">
            <div class="mask"  @click="closeModAward"></div>
            <div class="cont">
                <section class="box-award" v-if="userBingo.length>0">
                    <h2>领奖方式：关注微信“duowanmall”，回复“领奖”领取</h2>
                    <ul class="list-award">
                        <li v-for="(bingo,index) in userBingo" :key="index">
                            {{bingo.reward}}
                        </li>
                    </ul>
                </section>

                <section class="box-noaward" v-else>暂无中奖</section>
            </div>
        </section>
    </div>
</template>

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