vue模仿新年集福活动（移动端）

自己随便写着玩的一个“集福”活动，没有后端配合，只是前端的一个效果展示，没有写入缓存，刷新后数据就没有了，主要功能有抽卡，点击卡片查看介绍，集齐之后合成卡片，增加抽卡次数，直接获取稀缺卡，增加稀缺卡获取概率等功能。
下面是截图和源码；

在线预览(不保证一直能打开)

缺少图片，补齐图片后就正常了
https://jsfiddle.net/zhoou/4y6nqwsf/2/

PS：一些小问题：有时打开后li的高度没有及时撑开，会显示成一坨，刷新一下就可以了，不知道有没有更好的控制高度的解决方案（翻转效果元素要绝对定位，导致li的高度不能动态调整，我使用js算的）

下面是代码：

<div class='wrap' id="app">
    <template v-if='!isPageFlag'>
        <div class="mask" v-if='isMaskFlag'></div>
        <div class="alert-wrap" :class="{'alert-active':isActiveClass}" v-if='isMaskFlag'>
            <div class="close" @click='close'>X</div>
            <img src="img/blank2.png" v-if='type == 0'>
            <img src="img/ql.png" v-if='type == 1'>
            <img src="img/bh.png" v-if='type == 2'>
            <img src="img/zq.png" v-if='type == 3'>
            <img src="img/xw.png" v-if='type == 4'>
            <img src="img/qilin.png" v-if='type == 5'>
        </div>

        <div class='info-link' @click='isPageFlag = true'>碎碎念</div>
        <h3 class="card-title">集神兽，迎祥瑞</h3>

        <ul class="card-list">
            <li v-for='item in list' :style="{'height':imgHeight}">
                <template v-if='item.nums <= 0'>
                    <img src="img/blank.png" v-if='!item.isEmpty'>
                </template>
                <template v-else>
                    <div class="font">
                        <div class="nums">{{item.nums}}</div>
                        <img :src="item.src">
                    </div>
                    <div class="back" :style="{'height':imgHeight}">
                        <h3 class="tc">{{item.name}}</h3>
                        {{item.info}}
                    </div>
                </template>
            </li>
            <li v-if='type == 5' :style="{'height':imgHeight}">
                <div class="font">
                    <img src="img/qilin.png">
                </div>
                <div class="back" :style="{height:imgHeight}">
                    <h3 class="tc">麒麟</h3>
                    集狮头、鹿角，虎眼、麋身、龙鳞、牛尾就于一体，中国传统瑞兽，性情温和，主太平、长寿。古人认为，麒麟出没处，必有祥瑞。
                </div>
            </li>
        </ul>
        <center>
            <div class="btn" @click='choose' v-if='!isAllFlag'>抽卡({{times}})</div>
            <div class="btn" @click='compose' v-else>合成</div>
        </center>
        <center class='anxiang'>&nbsp;</center>
        <div class="btn" @click='addTimes'>增加次数</div>
        <div class="btn" @click='addChance'>+稀缺卡概率({{rate}})</div>
        <div class="btn" @click='sendXW'>送玄武卡</div>
        <div class="btn" @click='window.location.reload()'>重置</div>
        <br>
    </template>
    <template v-else>
        <ul class='info-con'>
            <li>
                1、除一年一度的支付宝“集福”活动之外，今年很多公司都相继推出新年“集福”活动：百度的十二生肖卡片，今日头条的“发财中国年”金卡和“家和万事兴”钻卡、抖音的“哆唻咪发嗖拉嘻”音符卡等等，难易不同，玩法各异。想着年后自己也试一下，没有后台小伙伴支持下的纯前端简单实现，因此索要卡片、赠送朋友，沾别人卡片，广告合作（也没人跟我合作）等都没有，玩法和色调搭配主要借鉴支付宝；
            </li>
            <li>
                2、每个活动都有自己的卡片内容，我不能跟他们一样，取古代中国传说的四大神兽：青龙，白虎，朱雀，玄武。也是比较吉利的动物，百度搜了相关图片素材一股浓重的中二风，终于在站酷中找全了我要的素材，下面是资源出处(如有侵权请联系我立即删除):
                <p><a href='https://www.zcool.com.cn/work/ZMjE2ODQ2MDA=.html' target='_blank'>四张神兽图</a></p>
                <p><a href='https://www.zcool.com.cn/work/ZMjM4NTU1MDg=.html' target='_blank'>一张背景图</a></p>
                <p><a href='https://www.zcool.com.cn/work/ZMjUxMDQzOTI=.html' target='_blank'>祥瑞图</a></p>
            </li>
            <li>
                3、玩法介绍：
                <p>(1)点击抽卡按钮随机获取神兽卡;</p>
                <p>(2)最后的一张神兽卡玄武卡作为稀缺卡，如果你想快速走完流程可直接点击“送玄武卡”按钮；</p>
                <p>(3)集齐之后会多出一个“合成”按钮，点击它你就收获一枚新年祥瑞;</p>
                <p>(4)点击卡片可以查看该卡介绍。</p>
            </li>
        </ul>
        <br>
        <center><div class="btn" @click='isPageFlag = false'>返回</div></center>
    </template>
    
    <center>技术支持：ZHOOU</center>
</div>

[v-cloak] {display: none; }
*{ margin:0; padding:0; font-size: 12px;}
html,body{background: #bb2628;position: relative;}
ul,li,ol{ list-style: none;}
.clearfix:after{ display: block; content: ''; clear: both;}
a,.info-con,.info-link{color:#f39987;}
.mb15{margin-bottom:15px;}
.tc{text-align: center;}

.wrap{ min-width:320px; max-width: 640px;padding:15px;}
.mask{position: fixed;z-index: 10; top:0;right:0;bottom:0;left:0; background: rgba(0,0,0,.7);color:red}
.info-link{text-align:right;}
.info-con li{text-indent:15px;line-height:24px;margin-bottom:8px; word-break:break-word;}
.card-title{text-align: center; color: #f39987; font-size: 20px; margin-bottom: 20px;}
.card-list{overflow: hidden;margin-bottom: 10px;}
.card-list li{float: left; width: 45%; margin: 0 2.5% 20px; font-size: 0; box-shadow:0 0 8px 0 #666; position: relative;transform-style:preserve-3d;transition:1s;}
.font,.back{position: absolute;top:0;right:0;backface-visibility:hidden;width:100%;}
.back{transform:rotateY(180deg);z-index:6;background: #f39987; border-radius: 5px; overflow: hidden;padding:10px; box-sizing: border-box;color:#5b2e19}
.card-list li:hover{transform:rotateY(180deg);}
.card-list li img{ width: 100%;}
.nums{ position: absolute; right:2px; top:2px; width: 20px; height: 20px; border-radius: 50%; background: #de1e2b; z-index: 5; text-align: center;line-height: 20px; font-size: 14px; color: #f5ba45; overflow: hidden;}
.btn{ display: inline-block; border-radius: 15px; line-height: 30px; text-align: center; width: 40%; background: #ebc26a;color:#5b2e19; font-size: 14px; cursor: pointer; margin:0 4.5% 15px;}
.btn a{text-decoration:none;color:#5b2e19;}
.anxiang{color: #fff; border-bottom:1px solid #ebc26a; padding-bottom: 5px; margin-bottom: 15px;}
.alert-wrap{ position: fixed; z-index: 15; left:50%; top:45%; width: 300px; height: 300px; border-radius: 5px; overflow: hidden; background: #edce95; margin-left: -150px; margin-top: -150px;}
.close{position: absolute; right:2px; top:2px; width: 35px; height: 35px; border-radius: 50%; background: rgba(237,206,149,.7); text-align: center;line-height: 35px; font-size: 18px; color: #de1e2b;z-index: 20}
.alert-wrap{transform:scale(0);animation:alertimg .5s forwards;-webkit-animation:alertimg .5s forwards;}
@keyframes alertimg
{
0% {transform:scale(0.5) rotateZ(0);}
100% {transform:scale(1) rotateZ(360deg)}
}

@-webkit-keyframes alertimg
{
0% {transform:scale(0.5) rotateZ(0);}
100% {transform:scale(1) rotateZ(360deg)}
} 

var app=new Vue({
    el:'#app',
    mounted:function(){
        var that=this;
        setTimeout(function(){
            that.imgHeight = document.querySelector(".card-list li img").height+'px';
        }, 200);
    },
    data:{
        imgHeight:'155px',
        isPageFlag:false,
        isActiveClass:false,
        isMaskFlag:false,
        isAllFlag:false,
        type:0,
        times:10,
        chance:100,//玄武卡分界点，影响获得该卡的概率
        rate:'2%',
        list:[
            {src:'img/ql.png',nums:0,name:'青龙',info:'代表太昊与东方七宿的东方之神，于五行主木，四季中的春季。'},
            {src:'img/bh.png',nums:0,name:'白虎',info:'代表少昊与西方七宿的西方之神，于五行主金，四季中的秋季。象征着威武和军队。'},
            {src:'img/zq.png',nums:0,name:'朱雀',info:'代表炎帝与南方七宿的南方之神，于五行主火，四季中的夏季。在先秦被认为能接引死者灵魂上升于天，后世认为其能予人长生。'},
            {src:'img/xw.png',nums:0,name:'玄武',info:'代表颛顼与北方七宿的北方之神，于五行主水，四季中的冬季。龟蛇合体，象征长生不老。'}
        ]
    },
    methods:{
        choose:function(){//抽卡
            var that=this;
            var randomNums;
            if(that.times > 0){
                //  动态修改稀缺卡的概率——通过增加区间范围来实现
                randomNums = Math.floor(Math.random()*that.chance);
                if(randomNums >= 0 && randomNums < 24){
                    that.type = 0;
                }else if(randomNums >= 24 && randomNums < 48){
                    that.type = 1;
                }else if(randomNums >= 48 && randomNums < 72){
                    that.type = 2;
                }else if(randomNums >= 72 && randomNums < 98){
                    that.type = 3;
                }else if(randomNums >= 98 && randomNums < that.chance){
                    that.type = 4;
                }
                that.isMaskFlag=true;
                if(that.type != 0){
                    that.list[that.type - 1].nums++;
                }
                that.isAll();
                that.times--;
            }else{
                alert('今天抽卡次数已经用完，请明天再试！');
            }
        },
        addTimes:function(){//增加抽卡数
            //this.times = this.times + 5;
            this.times = 5;
        },
        sendXW:function(){//送卡
            this.list[3].nums++;
            this.isAll();
        },
        isAll:function(){//判断卡片是否已经集满
            var that=this;
            var flag=true;
            for(var i=0;i<4;i++){
                if(that.list[i].nums == 0){
                    flag=false;
                    break;
                }
            }
            if(flag){
                that.isAllFlag=true;
            }
        },
        compose:function(){//合成祥瑞
            var that=this;
            if(that.type == 5){
                alert('已经合成过一次了，不能再合成！');
            }else{
                for(var i=0;i<4;i++){
                    that.list[i].nums--;
                }
                that.type=5;
                that.isMaskFlag=true;
            }
        },
        close:function(){//关闭弹窗
            this.isMaskFlag=false;
        },
        addChance:function(){
            this.chance+=20;
            this.rate=parseInt((this.chance-98)/this.chance*100)+'%';
            
        }
    }
});