JenkinsTest/page/act/uplottory.vue

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

<template>
    <div class="page-act-uplottory">
        <section class="mod-primary">
            <div class="head-wrap">
                <img :src="upInfo.img">
            </div>

            <div v-if="lottoryId!=0">
                <div class="code status1" v-if="lotteryStatus==2" @click="doLottery()">
                    点击获取抽奖码
                </div>
                <div class="code status1" v-if="lotteryStatus==3">
                    <div class="code-inner">
                    抽奖码：<em>{{scrollCode}}</em>
                    </div>
                </div>

                <div class="code status2" v-if="lotteryStatus==5">很遗憾你没有中奖</div>
                <div class="code status3" v-if="lotteryStatus==6">
                    恭喜你中奖了
                    <p>电影票券码为{{userRecord.cdkey}}</p>    
                </div>
                <div class="code status4" v-if="lotteryStatus==4">
                    今天已开奖
                    <p>每日抽奖参与时间0{{reward.dayStartHour}}:00-{{reward.dayEndHour}}:00</p>    
                </div>
            </div>

            <p class="tip">{{lottoryTip}}</p>
        </section>

        <section class="mod-gif">
            <h2 class="mod-title mod-title1"></h2>
            <img :src="reward.rewardIcon">
            <p>{{reward.rewardName}}</p>
        </section>

        <section class="mod-rule">
            <h2 class="mod-title mod-title2"></h2>
            <ul class="list-cont">
                <li><label>1.</label>关注UP主可参与抽奖，每天一次抽奖机会。</li>
                <li><label>2.</label>兑换券为电影票电子兑换券，仅限在淘票票平台在线选座时使用。</li>
                <li><label>3.</label>兑换券仅限兑换售价2\3D不高于75元的场次，有效期至2018年3月28日。</li>
                <li><label>4.</label>兑换券仅支持中国大陆地区影院，支持影院以淘票票平台展示为准</li>
                <li><label>5.</label>兑换券使用说明：<a href="https://h5.m.taopiaopiao.com/app/dianying/pages/alfheim/content.html?id=11389&interact=no&hidetitle=yes">点击查看</a></li>
            </ul>
        </section>

        <section class="mod-time">
            <h2 class="mod-title mod-title3"></h2>
            <ul class="list-cont">
                <li><label>1.</label>活动时间：{{reward.startTime | cutTime}}至{{reward.endTime | cutTime}}</li>
                <li><label>2.</label>每日报名时间：每日{{reward.dayStartHour}}：00-{{reward.dayEndHour}}：00</li>
                <li><label>3.</label>每日开奖时间：每日{{reward.rewardHour}}：00</li>
            </ul>
        </section>

        <section class="mod-menu" v-if="bingoUsers.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="(user,index) in bingoUsers" :key="index">
                            <div class="item-info">
                                <img :src="user.avatar">
                                {{user.nick}}
                            </div>
                            <div class="item-time">{{user.day}}</div>
                        </li>

                    </ul>
                </div>
            </div>
        </section>
      
    </div>
</template>

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