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

時間 2019-11-08

原文原文鏈接

本身隨便寫着玩的一個「集福」活動，沒有後端配合，只是前端的一個效果展現，沒有寫入緩存，刷新後數據就沒有了，主要功能有抽卡，點擊卡片查看介紹，集齊以後合成卡片，增長抽卡次數，直接獲取稀缺卡，增長稀缺卡獲取機率等功能。
下面是截圖和源碼；html

在線預覽(不保證一直能打開)前端

缺乏圖片，補齊圖片後就正常了
https://jsfiddle.net/zhoou/4y...web

源碼下載地址：
連接: https://pan.baidu.com/s/10rNR... 提取碼: gk22 後端

PS：一些小問題：有時打開後li的高度沒有及時撐開，會顯示成一坨，刷新一下就能夠了，不知道有沒有更好的控制高度的解決方案（翻轉效果元素要絕對定位，致使li的高度不能動態調整，我使用js算的）緩存

下面是代碼：app

<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>
                一、除一年一度的支付寶「集福」活動以外，今年不少公司都相繼推出新年「集福」活動：百度的十二生肖卡片，今日頭條的「發財中國年」金卡和「家和萬事興」鑽卡、抖音的「哆唻咪發嗖拉嘻」音符卡等等，難易不一樣，玩法各異。想着年後本身也試一下，沒有後臺小夥伴支持下的純前端簡單實現，所以索要卡片、贈送朋友，沾別人卡片，廣告合做（也沒人跟我合做）等都沒有，玩法和色調搭配主要借鑑支付寶；
            </li>
            <li>
                二、每一個活動都有本身的卡片內容，我不能跟他們同樣，取古代中國傳說的四大神獸：青龍，白虎，朱雀，玄武。也是比較吉利的動物，百度搜了相關圖片素材一股濃重的中二風，終於在站酷中找全了我要的素材，下面是資源出處(若有侵權請聯繫我當即刪除):
                <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>
                三、玩法介紹：
                <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)+'%';
            
        }
    }
});