效果圖如下:
前端全棧學習交流圈:866109386,面向1-3經驗年前端開發人員,幫助突破技術瓶頸,提升思維能力,羣內有大量PDF可供自取,更有乾貨實戰項目視頻進羣免費領取。
HTML代碼:
<template>
<div class="luckDraw">
<title-bar :title="title"></title-bar>
<div class="container">
<div class="turntable-wrapper">
<div class="luck-wrapper">
<p class="integral">我的積分: <span>1000</span></p>
<ul class="nineGrid">
<li class="row">
<div v-for="(n, key) in 3" :key="n" :class="index === key ? `active` : ``">
<div class="wrapper">
<img src="../../assets/luck-icon.png" alt="">
<p>8金轉</p>
</div>
<div class="mask"></div>
</div>
</li>
<li class="row">
<div :class="index === 7 ? 'active': ''">
<div class="wrapper">
<img src="../../assets/luck-icon.png" alt="">
<p>128金轉</p>
</div>
<div class="mask"></div>
</div>
<div class="getLuck" @click="startLottery">
<p>立即<br>抽獎</p>
</div>
<div :class="index === 3 ? 'active': ''">
<div class="wrapper">
<img src="../../assets/luck-icon.png" alt="">
<p>128金轉</p>
</div>
<div class="mask"></div>
</div>
</li>
<li class="row">
<div v-for="(n, key) in 3" :key="n" :class="index === 6-key ? `active` : ``">
<div class="wrapper">
<img src="../../assets/luck-icon.png" alt="">
<p>256金轉</p>
</div>
<div class="mask"></div>
</div>
</li>
</ul>
</div>
<p class="share">分享領積分 <i class="icon-go"></i></p>
<div class="rule">
<p class="rule-title">活動規則</p>
<ul class="rule-main">
<li>1、活動時間:2017年9月8日起;</li>
<li>2、活動期間,股事匯用戶每次抽獎消耗20積分,抽獎次數不限</li>
<li>3、金鑽可用於向投顧提問、送禮、讚賞;</li>
<li>4、積分賺取:每日簽到、分享文章/問答/直播間、點贊、金鑽充值均可獲得積分哦</li>
<li>5、活動最終解釋權歸股事匯所有。</li>
</ul>
</div>
<div></div>
</div>
<LuckToast :showToast="showToast" :toastType="toastType" @closeToast="closeToast" @startLottery="startLottery"></LuckToast>
</div>
</div>
</template>
前端全棧學習交流圈:866109386,面向1-3經驗年前端開發人員,幫助突破技術瓶頸,提升思維能力,羣內有大量PDF可供自取,更有乾貨實戰項目視頻進羣免費領取。
SCSS樣式:
@import "~base";
.luckDraw {
.turntable-wrapper {
padding: 0 px3rem(38);
position: relative;
@include background-cover("background-luck.png");
padding-top: px3rem(121);
.luck-wrapper {
width: px3rem(300);
height: px3rem(377);
margin: 0 auto;
position: relative;
@include background-cover("background-turntable.png");
.integral {
width: 100%;
color: #6d2d00;
font-size: px3rem(16);
font-weight: normal;
text-align: center;
position: absolute;
top: px3rem(58);
span {
font-weight: 600;
color: #ff2f4d;
}
}
.nineGrid {
position: absolute;
top: px3rem(86);
left: 50%;
margin-left: px3rem(-130);
width: px3rem(260);
height: px3rem(260);
li {
height: px3rem(80);
display: flex;
margin-top: px3rem(5);
> div {
flex: 1;
margin-right: px3rem(5);
height: 100%;
text-align: center;
position: relative;
.wrapper {
width: 100%;
height: 100%;
margin: 0;
@include background-cover("background-grid.png");
}
img {
width: px3rem(46);
height: px3rem(38);
vertical-align: middle;
margin-top: px3rem(8);
}
.mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.5;
border-radius: px3rem(10);
background-color: #000;
display: none;
}
}
> div.active {
.mask {
display: block;
}
}
> div:first-child {
margin-left: px3rem(5);
}
> div.getLuck {
@include background-cover("background-getLuck.png");
font-size: 0;
p {
font-size: px3rem(20);
font-weight: 600;
color: #fff;
line-height: 1.1;
margin-top: px3rem(11);
}
}
}
li:last-child {
margin-bottom: px3rem(5);
}
}
}
.share {
width: px3rem(160);
height: px3rem(42);
margin: 0 auto;
text-align: center;
line-height:px3rem(42);
@include background-cover("luckShrae.png");
margin-top: px3rem(22);
color: #6d2d00;
font-size: px3rem(16);
font-weight: 600;
.icon-go {
@include size(30);
@include background-cover("goShare-icon.png");
display: inline-block;
vertical-align: middle;
margin-bottom: px3rem(2);
}
}
.rule {
margin-top: px3rem(14);
color: #fff;
font-size: px3rem(14);
padding-bottom: px3rem(39);
.rule-title {
text-align: center;
position: relative;
font-size: px3rem(16);
margin-bottom: px3rem(14);
}
.rule-title:before,
.rule-title:after {
content: '';
position: absolute;
top: 52%;
background: #fff;
width: 30%;
height: px3rem(1);
}
.rule-title:before {
left: 0;
}
.rule-title:after {
right: 0;
}
}
}
}
前端全棧學習交流圈:866109386,面向1-3經驗年前端開發人員,幫助突破技術瓶頸,提升思維能力,羣內有大量PDF可供自取,更有乾貨實戰項目視頻進羣免費領取。
JS代碼:
// import Utils from 'utils'
import TitleBar from 'components/TitleBar.vue'
import LuckToast from 'components/luckToast.vue'
export default {
name: 'luckDraw',
components: {
TitleBar,
LuckToast,
},
data () {
return {
title: '積分轉盤',
index: -1, // 當前轉動到哪個位置,起點位置
count: 8, // 總共有多少個位置
timer: 0, // 每次轉動定時器
speed: 200, // 初始轉動速度
times: 0, // 轉動次數
cycle: 50, // 轉動基本次數:即至少需要轉動多少次再進入抽獎環節
prize: -1, // 中獎位置
click: true,
showToast: false,
toastType: 'luck',
}
},
props: {
},
methods: {
// 開始抽獎
startLottery () {
if (!this.click) {
return
}
this.closeToast()
this.speed = 200
this.click = false
this.startRoll()
},
// 開始轉動
startRoll () {
this.times += 1 // 轉動次數
this.oneRoll() // 轉動過程調用的每一次轉動方法,這裏是第一次調用初始化
// 如果當前轉動次數達到要求 && 目前轉到的位置是中獎位置
if (this.times > this.cycle + 10 && this.prize === this.index) {
clearTimeout(this.timer) // 清除轉動定時器,停止轉動
this.prize = -1
this.times = 0
this.click = true
this.showToast = true
this.toastType = 'comeOn'
console.log('你已經中獎了')
} else {
if (this.times < this.cycle) {
this.speed -= 10 // 加快轉動速度
} else if (this.times === this.cycle) { // 隨機獲得一箇中獎位置
const index = parseInt(Math.random() * 10, 0) || 0
this.prize = index
if (this.prize > 7) {
this.prize = 7
}
console.log(`中獎位置${this.prize}`)
} else if (this.times > this.cycle + 10 &&
((this.prize === 0 && this.index === 7) || this.prize === this.index + 1)) {
this.speed += 110
} else {
this.speed += 20
}
if (this.speed < 40) {
this.speed = 40
}
this.timer = setTimeout(this.startRoll, this.speed)
}
},
// 每一次轉動
oneRoll () {
let index = this.index // 當前轉動到哪個位置
const count = this.count // 總共有多少個位置
index += 1
if (index > count - 1) {
index = 0
}
this.index = index
},
// 關閉彈出框
closeToast () {
this.showToast = false
},
},
beforeMount () {
},
created () {
},
beforeDestroy () {
},
}