vue適配3到8個大轉盤抽獎
阿新 • • 發佈：2019-02-10
vue實現適配獎品不固定的大轉盤抽獎，裡面的實現程式碼就是vue+js，不需要jq，原理就是根據介面傳過來的獎品數量，計算出來每個獎品應該旋轉的角度，然後渲染到頁面上
<template>
<div class="content">
<div class="conts">
<div class="box">
<div class="pointer" @click="chou()">
<p>立即</p>
<p>抽獎</p>
</div export default {
data() {
return {
winnum: '0', //中獎的下標
indexa: '', //中獎的下標在第一個ul下li的index下標，背景變深顏色
indexb: '', //中獎的下標在第二個ul下li的index下標，背景變深顏色
toast_control: false, //抽獎結果和活動規則彈出框控制器
click_flag: true, //是否可以旋轉抽獎
start_rotating_degree: 0, //轉盤初始旋轉角度
rotate_angle: 0, //轉盤將要旋轉的角度
start_rotating_degree_pointer: 0, //指標初始旋轉角度
rotate_angle_pointer: 0, //指標將要旋轉的度數
rotate_transition: "", //初始化選中的過度屬性控制
rotate_transition_pointer: "transform 12s ease-in-out", //初始化指標過度屬性控制
prize_list: [{
prizeType: 1, // 獎品數量
prizeName: "獎品000", // 獎品名稱
},
{
prizeType: 3,
prizeName: "獎品111",
},
{
prizeType: 2,
prizeName: "獎品222",
},
{prizeType: 2,
prizeName: "獎品333"
},
{prizeType: 3,
prizeName: "獎品444"
},
// {prizeType: 3,
// prizeName: "獎品555"
// },
// {prizeType: 3,
// prizeName: "獎品666"
// },
// {prizeType: 3,
// prizeName: "獎品777"
// }
], //獎品列表
arrOne: [],
arrTwo: [],
shopUid: '',
userinfo: '',
prizeinfo: {
isGet: '',
prizeInfos: [{
validTime: '',
invalidTime: '',
type: ''
}]
}, //中獎優惠券或實物的資訊
hasPrize: {}, //抽獎之後彈出框資訊
}
},
mounted() {
let _this = this;
_this.setSan()
},
methods: {
chou() {
let _this = this;
_this.indexa = ''
_this.indexb = ''
_this.winnum = Math.floor(Math.random() * Number(_this.prize_list.length - 1));
console.log(_this.winnum)
_this.rotating(_this.winnum)
},
setSan() {
let _this = this
_this.arrOne = [];
_this.arrTwo = [];
_this.rotate_angle = "rotate(" + Math.floor(-360 * 100 / _this.prize_list.length) / 200 + "deg)";
_this.start_rotating_degree = Math.floor(-360 * 100 / _this.prize_list.length) / 200;
for(var i = 0; i < _this.prize_list.length; i++) {
_this.prize_list[i].troter = "rotate(" + Math.floor(360 * 100 / _this.prize_list.length) / 100 * (0.5 + Number(i)) + "deg) translateX(-50%)"
_this.prize_list[i].width = Math.floor(3.14 * 5.6 / this.prize_list.length) + "rem"
var item = {
value: _this.prize_list[i].name,
zIndex: Number(i) + 1,
deg: "rotate(" + Math.floor(360 * 100 / this.prize_list.length) * i / 100 + "deg)",
degnum: i,
}
if(i < _this.prize_list.length / 2) {
_this.arrOne.push(item)
} else {
_this.arrTwo.push(item)
}
}
},
rotating(index) { //轉盤轉動函式，index值為中獎的下標，後臺會返回中獎的id，這邊會首先for迴圈判斷中獎的下標
let _this = this;
_this.rotate_transition = "transform 6s cubic-bezier(0.25,0.1,0.01,1)";
if(!_this.click_flag) return;
var type = 0; // 預設為 0 轉盤轉動 1 箭頭和轉盤都轉動(暫且遺留)
var during_time = 5; // 預設為1s
var result_index = index; // 最終要旋轉到哪一塊，對應prize_list的下標
var rand_circle = 6; // 附加多轉幾圈，2-3
_this.click_flag = false; // 旋轉結束前，不允許再次觸發
if(type == 0) {
if(this.start_rotating_degree < 0) {
this.start_rotating_degree = 0
} else {
this.start_rotating_degree = this.start_rotating_degree + Math.floor(360 * 100 / _this.prize_list.length) / 200
}
var rotate_angle = this.start_rotating_degree + 360 * 10 + Math.floor(-360 * 100 / this.prize_list.length) / 200 - Math.floor(360 * 100 / this.prize_list.length) * result_index / 100;
this.start_rotating_degree = rotate_angle;
_this.rotate_angle = "rotate(" + rotate_angle + "deg)";
// 旋轉結束後，允許再次觸發
setTimeout(function() {
_this.click_flag = true;
if(_this.winnum < _this.prize_list.length / 2) {
_this.indexb = ''
_this.indexa = _this.winnum;
} else {
_this.indexa = ''
_this.indexb = _this.winnum - (_this.arrOne.length);
}
setTimeout(function() {
_this.game_over();
}, 100)
}, during_time * 1000 + 1500); // 延時，保證轉盤轉完
}
},
game_over() {
let _this = this;
_this.prizetype = 1
if(_this.prizetype != -1) {
_this.toast_control = true;
} else {
Alert.show("獎品已領完，下次請早到哦！")
}
var obj = {}
if(_this.prize_list[_this.winnum].prizeType == 0) {
obj = {
type: 0,
words1: '謝謝參與',
words2: "不要氣餒！",
words3: '還有更多大獎等著你~'
}
} else if(_this.prize_list[_this.winnum].prizeType == 1 || _this.prize_list[_this.winnum].prizeType == 2) {
obj = {
type: 1,
words1: '恭喜您！',
words2: "獲得" + _this.prize_list[_this.winnum].prizeName,
words3: '可在“個人中心”檢視'
}
} else if(_this.prize_list[_this.winnum].prizeType == 3) {
obj = {
type: 1,
words1: '恭喜您！',
words2: "獲得" + _this.prize_list[_this.winnum].prizeName,
words3: ''
}
}
_this.hasPrize = obj
},
}
}.content {
.conts {
min-height: 11.5rem;
.activitytime {
height: 0.5rem;
width: 100%;
position: absolute;
.timebg {
width: 100%;
height: 100%;
background: #000000;
opacity: 0.3;
position: absolute;
left: 0;
top: 0;
}
.time {
color: #ffffff;
line-height: 0.5rem;
padding-left: 0.2rem;
font-size: 0.24rem;
position: relative;
z-index: 2;
}
}
.rule {
height: 0.69rem;
margin-bottom: 2.37rem;
position: relative;
.ruletop {
width: 1.35rem;
height: 0.46rem;
position: absolute;
right: 0;
bottom: 3px;
.rulebg {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
background: #1201d5;
opacity: 0.3;
border-top-left-radius: 0.23rem;
border-bottom-left-radius: 0.23rem;
}
.ruletitle {
text-align: center;
line-height: 0.46rem;
font-size: 0.24rem;
color: #fff;
position: relative;
z-index: 3;
border-top-left-radius: 0.23rem;
border-bottom-left-radius: 0.23rem;
border-bottom: 3px solid #1201d5;
}
}
}
.title {
height: 0.46rem;
text-align: center;
color: #464ff4;
font-size: 0.28rem;
line-height: 0.46rem;
font-weight: 700;
margin-bottom: 0.24rem;
}
.box {
width: 6.68rem;
height: 6.67rem;
margin: auto;
position: relative;
overflow: hidden;
.pointer {
width: 1.81rem;
height: 2.07rem;
position: absolute;
top: 50%;
left: 50%;
z-index: 20;
transform: translate(-50%, -55%);
background: url(../../static/img/pointer.png) top center no-repeat;
background-size: 100%;
p {
font-size: 0.36rem;
color: #ff4027;
font-weight: 700;
text-align: center;
}
p:first-of-type {
margin-top: 0.6rem;
}
}
.boxbg {
width: 5.60rem;
height: 5.60rem;
background: url(../../static/img/box.png) top center no-repeat;
background-size: 100%;
padding: 0.54rem;
.turn {
width: 5.60rem;
height: 5.60rem;
border-radius: 50%;
overflow: hidden;
.slice {
box-sizing: border-box;
border: 1px solid #ffd8ad;
}
.win {
background: #fff4c9!important;
}
.wheel-bg6 {
width: 100%;
height: 100%;
position: relative;
div {
text-align: center;
}
.prize-list {
width: 100%;
height: 100%;
position: absolute;
ul {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
margin: 0;
padding: 0;
li {
position: absolute;
top: 0px;
left: 50%;
width: 50%;
height: 50%;
transform-origin: 0 100%;
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
border-left: 1px solid #ffd8ae;
background: #fff;
}
}
.ulOne {
clip: rect(0, 5.6rem, 5.6rem, 2.8rem);
}
.ulTwo {
clip: rect(0, 2.8rem, 5.6rem, 0);
}
.prize-item {
position: absolute;
top: 0;
z-index: 12;
height: 2.8rem;
left: 50%;
transform: translateX(-50%);
transform-origin: 0 100%;
.prize-pic {
padding-top: 0.3rem;
text-align: center;
img {
width: 0.75rem;
}
}
.prize-name {
font-size: 0.24rem;
color: #ff6600;
}
}
}
}
}
}
.money {
position: absolute;
width: 0.57rem;
height: 0.55rem;
top: 2.17rem;
right: -0.2rem;
}
}
.prizebox {
margin: 0.3rem;
position: relative;
border-radius: 4px;
overflow: hidden;
padding: 0 0.27rem 0.28rem;
.prizebg {
position: absolute;
border-radius: 4px;
background: #fff;
height: 100%;
width: 100%;
top: 0;
left: 0;
opacity: 0.2;
}
.pri {
.titname {
color: #fff;
font-size: 0.32rem;
text-align: center;
margin: 0.07rem;
span {
img {
width: 1.51rem;
height: 0.14rem;
margin: 0 0.2rem 0.03rem;
}
}
.xuanz {
img {
transform: rotate(180deg);
}
}
}
.prizez {
width: 100%;
border: 1px solid #fa54a7;
border-radius: 4px;
background: #fff;
display: flex;
.couponleft {
padding-left: 0.3rem;
width: 3.9rem;
position: relative;
height: 100%;
.iconright {
div {
line-height: 1.1;
}
.couponname {
font-size: 0.32rem;
color: #333333;
margin: 0.45rem 0 0.2rem;
}
.timevalidity {
font-size: 0.24rem;
color: #999999;
margin-bottom: 0.2rem;
}
.timevalidity:last-of-type {
margin-bottom: 0.45rem;
}
}
}
.couponright {
flex: 1;
line-height: 1.2rem;
text-align: center;
font-size: 0.24rem;
color: #ff4745;
vertical-align: top;
position: relative;
.money {
position: relative;
bottom: 0.02rem;
margin-right: 0.02rem;
}
.moneynum {
font-size: 0.5rem;
}
a {
position: absolute;
left: 0;
right: 0;
bottom: 0.3rem;
width: 1.5rem;
height: 0.54rem;
color: #fff;
background: #ff4745;
border-radius: 2px;
line-height: 0.54rem;
text-align: center;
font-size: 0.28rem;
margin: auto;
display: block;
}
.tel {
bottom: 0;
top: 0;
}
div {
position: absolute;
right: -0.2rem;
top: 0;
bottom: 0;
margin: auto;
width: 1.28rem;
height: 1.28rem;
img {
width: 100%;
height: 100%;
}
}
}
}
}
}
}
.popup {
width: 100%;
height: 100%;
position: fixed;
z-index: 30;
top: 0;
left: 0;
.popbg {
width: 100%;
height: 100%;
background: #000;
opacity: 0.7;
}
.popbox {
width: 5.54rem;
height: 4.98rem;
position: absolute;
top: 27%;
left: 0;
right: 0;
margin: auto;
background: url(../../static/img/giftboxbg.png) top center no-repeat;
background-size: 100%;
text-align: center;
.img {
width: 3.06rem;
height: 1.4rem;
margin: auto;
margin-top: 1.07rem;
margin-left: 1.1rem;
background: url(../../static/img/gift.png) top center no-repeat;
background-size: 100%;
}
.img1 {
background: url(../../static/img/regret.png) top center no-repeat;
background-size: 100%;
}
.words1 {
font-size: 0.4rem;
color: #ff7d12;
margin-top: 0.2rem;
}
.words2 {
font-size: 0.28rem;
color: #ff8422;
}
.words3 {
font-size: 0.24rem;
color: #999999;
margin-top: 0.07rem;
}
}
.activityrule {
width: 5.54rem;
height: 6.32rem;
position: absolute;
top: 20%;
left: 0;
right: 0;
margin: auto;
background: url(../../static/img/rulebg.png) top center no-repeat;
background-size: 100%;
.rulecnt {
padding: 1.3rem 0.77rem 0;
p {
font-size: 0.24rem;
line-height: 0.4rem;
text-align: justify;
color: #333333;
}
p:last-of-type {
color: #ff4928;
}
}
}
.close {
width: 0.5rem;
height: 0.5rem;
background: url(../../static/img/close.png) top center no-repeat;
background-size: 100%;
position: absolute;
top: 75%;
left: 0;
right: 0;
margin: auto;
}
}
}效果圖：
