抽奖代码
<template>
<a-spin :spinning="spinning">
<div class="logo-top">
<img class="img" src="http://h5.u2sy.cn/img/cj2.png" alt="" />
<!-- 抽奖页面 -->
<div :style="{ width: (width * 340) / 375 + 'px' }" class="lottery-box">
<!-- <div :style="{ marginTop: (height * -60) / 707 + 'px' }" class="nav-title">
积分抽奖
</div> -->
<!-- <p @click="rule = !rule" style=" font-size: 0.5rem;color: #9b2816;">规则</p> -->
<p class="p"><strong @click="rule = !rule" style=" font-size: 0.5rem;color: #9b2816;">查看规则</strong></p>
<div :style="{width: (width * 340) / 375 + 'px',height: (width * 340) / 375 + 'px', }" class="lottery">
<div class="lottery-item" :style="{width: (width * 310) / 375 + 'px',height: (width * 310) / 375 + 'px', }">
<div class="lottery-start" :style="{width: (width * 310 / 375)/3 + 'px'}">
<div v-if="personal.residualIntegral < 200" class="box2" :style="{width: (width * 94 / 375) + 'px',height: (width * 94 / 375) + 'px' }">
<p><b>积分</b></p>
<p><b>不足</b></p>
</div>
<div v-else-if="personal.residualIntegral > 200 || personal.residualIntegral == 200" :style="{width: (width * 94 / 375) + 'px',height: (width * 94 / 375) + 'px' }">
<div class="box" @click="startLottery" v-if="isStart === 1 && aa" :style="{width: (width * 94 / 375) + 'px',height: (width * 94 / 375) + 'px' }">
<p><b>开始</b></p>
<p><b>抽奖</b></p>
</div>
<div class="box1" v-if="isStart === 1 && aab" :style="{width: (width * 94 / 375) + 'px',height: (width * 94 / 375) + 'px' }">
<p><b>正在</b></p>
<p><b>抽奖</b></p>
</div>
</div>
<div v-else class="box2" :style="{width: (width * 94 / 375) + 'px',height: (width * 94 / 375) + 'px' }">
<p><b>正在</b></p>
<p><b>加载</b></p>
</div>
</div>
<ul>
<!-- :style="{width: (width * 310 / 375)/3 + 'px',height: (width * 310 / 375)/3 + 'px', }" -->
<li :style="{width: (width * 310 / 375)/3 + 'px',height: (width * 310 / 375)/3 + 'px', }" v-for="(item, i) in list" :key="i" :class="i == index ? 'on' : ''">
<div class="box" :style="{width: (width * 94 / 375) + 'px',height: (width * 94 / 375) + 'px' }">
<div class="sm">
<p><img :src="item.img" alt="" /></p>
<p>{{ item.title }}</p>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="mask" v-if="showToast"></div>
<div class="lottery-alert" v-if="showToast">
<h1>恭喜您</h1>
<p><img :src="list[index].img" alt="" /></p>
<h2>获得{{ list[index].title }}</h2>
<div class="btnsave" @click="get">确定</div>
</div>
</div>
<!-- 规则 -->
<div class="bxjp" v-show="rule">
<div style="text-align: center;"><img src="../assets/images/gze.jpg" alt="" /></div>
<div class="prize-content">
<strong style="color:#9b2816;">道友悉知</strong>
<ol type="disc">
<li>每200积分可抽奖一次。</li>
<li>请去道友·封神榜填写正确的实物奖品收货信息，提交后不可修改。</li>
<li>抽中的实物奖品将在30个工作日内由京东商城发出。</li>
<li>物流信息可在道友·封神榜内查询。</li>
</ol>
</div>
<p><button @click="rule =!rule">取消</button></p>
</div>
</div>
</a-spin>
</template>
<script>
import http from "../services/http-service";
export default {
name: "HelloWorld",
props: {
msg: String,
},
data() {
return {
rule: false,
spinning: true, // 加载
width: window.innerWidth,
height: window.innerHeight,
activity: false,
personal: [], // 个人基本信息总积分
TotalPoints: null, // 总积分
aa: true,
aab: false,
wxuser: window.localStorage.getItem("wxUser"), // 本地用户账号缓存
isStart: 1,
score: 10, //消耗积分
list: [
{ img: require("../assets/img/cj1.png"), title: "100积分" },
{ img: require("../assets/img/cj1.png"), title: "300积分" },
{ img: require("../assets/img/cj2.png"), title: "500元京东卡" },
{ img: require("../assets/img/cj4.png"), title: "100元京东卡" },
{ img: require("../assets/img/cj7.png"), title: "罗技机械鼠标" },
{ img: require("../assets/img/cj6.png"), title: "Cherry机械键盘" },
{ img: require("../assets/img/cj5.png"), title: "Swicth" },
{ img: require("../assets/img/cj3.png"), title: "AirPods Pro" },
], //奖品1-9
index: -1, // 当前转动到哪个位置，起点位置
count: 8, // 总共有多少个位置
timer: 0, // 每次转动定时器
speed: 200, // 初始转动速度
times: 0, // 转动次数
cycle: 50, // 转动基本次数：即至少需要转动多少次再进入抽奖环节
prize: -1, // 中奖位置
click: true,
showToast: false, //显示中奖弹窗
jiangp: null,
};
},
component: {
// personal.residualIntegral
},
mounted() {
// this.postLuckDraw(this.wxuser)
this.Postper(this.wxuser);
},
methods: {
// 个人基本信息总积分
async Postper(wxUser) {
let temp = await http.PostWx(wxUser);
// console.log(temp);
this.personal = temp;
this.spinning = false;
// console.log(this.personal);
},
// 抽奖获取数据
async postLuckDraw(user) {
let temp = await http.luckDraw(user);
// console.log(temp.toString().substring(4));
if (temp.toString().substring(4) === "1") {
this.jiangp = 0;
} else if (temp.toString().substring(4) === "2") {
this.jiangp = 1;
} else if (temp.toString().substring(4) === "4") {
this.jiangp = 3;
} else if (temp.toString().substring(4) === "3") {
this.jiangp = 2;
} else if (temp.toString().substring(4) === "5") {
this.jiangp = 4;
} else if (temp.toString().substring(4) === "6") {
this.jiangp = 5;
} else if (temp.toString().substring(4) === "8") {
this.jiangp = 7;
} else if (temp.toString().substring(4) === "7") {
this.jiangp = 6;
}
// console.log(temp);
// console.log(this.jiangp)
},
get() {
window.location.reload();
this.showToast = false;
this.aa = true;
this.prize = -1;
this.aab = false;
},
startLottery() {
this.postLuckDraw(this.wxuser);
if (!this.click) {
return;
}
this.startRoll();
},
// 开始转动
startRoll() {
this.aa = false;
this.aab = true;
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.speed = 200;
this.click = true;
var that = this;
setTimeout(() => {
// console.log(res);
that.showToast = true;
}, 500);
} 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 = this.jiangp; //中奖位置,可由后台返回
if (this.prize > 7) {
// clearTimeout(this.timer)
this.prize = this.jiangp;
}
} 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;
},
},
};
</script>
<style scoped lang="less">
@import "../style/helloworld";
</style>
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.p{
margin-left: 0.4rem;
strong{
color: #9B2816;
font-size: 0.38rem;
}
span{
color: #552D0A;
font-size: 0.4rem;
}
}
img {
border: 0px;
}
ul,
li {
list-style-type: none;
}
.nav-title{
// border: 1px solid red;
// position: absolute;
// top: 6rem;
margin-top:-2.3rem ;
}
.lottery-box {
// width: 92%;
// width: 340px;
position: absolute;
bottom:1.1rem;
}
.lottery {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
// width: 340px;
// height: 340px;
border-radius: 0.2rem;
background-color: #E3B97F;
.lottery-item {
// border: 1px solid red;
width: 8.3rem;
height: 8.5rem;
width: 310px;
height: 315px;
position: relative;
// margin-top: 0.5rem;
// margin-bottom: 0.4rem;
ul li {
width: 33.33333333%;
position: absolute;
padding-right: 0.27rem;
}
ul li:nth-child(2) {
left: 33.33333333%;
}
ul li:nth-child(3) {
left: 66.66666666%;
}
ul li:nth-child(4) {
left: 66.66666666%;
top:33%;
}
ul li:nth-child(5) {
left: 66.66666666%;
bottom: 0;
}
ul li:nth-child(6) {
left: 33.33333333%;
bottom: 0;
}
ul li:nth-child(7) {
left: 0;
bottom: 0;
}
ul li:nth-child(8) {
left: 0;
top:33%;
}
ul li div {
.sm{
position: absolute;
left:50%;
top: 50%;
transform: translate(-50% ,-50%);
}}
ul li .box {
// line-height: 36%;
// height: 2.5rem;
position: relative;
text-align: center;
overflow: hidden;
border-radius: 0.2rem;
background-color: #f0e5c8;
background-size: 100% 100%;
}
ul li .box img {
display: block;
// width: 1.4rem;
height: 1rem;
margin: 0 auto;
margin-top: 0.29rem;
margin-bottom: 0.2rem;
}
ul li .box p {
color: #708abf;
color: #b05d49;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 0.4rem;
}
ul li.on .box {
background-size: 100% 100%;
background-color: #9b2816;
}
ul li.on .box p {
color: #fff;
}
.lottery-start {
position: absolute;
left: 33.33333333%;
width: 33.33333333%;
top:33%;
padding-right: 0.26rem;
.box,.box1,.box2 {
height: 2.5rem;
font-size: 0.4rem;
color: #fff;
cursor: pointer;
text-align: center;
overflow: hidden;
border-radius: 0.3rem;
background-size: 100% 100%;
}
.box1,.box2{
background-color: rgb(102, 98, 98);
}
.box{
height: 3.6rem;
background-color: #9b2816;
}
.box p b,.box1 p b,.box2 p b {
// border: 1px solid red;
font-size: 0.75rem;
margin-top: 15%;
// margin-bottom: 0.3rem;
line-height: 0.7rem;
display: block;
}
.box:active {
opacity: 0.7;
}
.box.gray p {
color: #708abf;
font-weight: bold;
}
}
}
}
.mask {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
position: fixed;
overflow: hidden;
z-index: 222;
top: 0;
left: 0;
}
.lottery-alert {
max-width: 8.5rem;
text-align: center;
z-index: 10000;
border-radius: 0.3rem;
background: #fff;
padding: 0.8rem;
position: fixed;
left: 0;
right: 0;
margin: auto;
top: 50%;
transform: translateY(-50%);
img {
display: block;
height: 2.5rem;
margin: 0 auto;
}
h2 {
font-weight: normal;
color: #d92b2f;
font-size: 0.4rem;
padding-top: 0.4rem;
}
p {
color: #666;
font-size: 0.4rem;
padding-top: 0.1rem;
}
.btnsave {
border-radius: 0.2rem;
box-shadow: none;
height: 1.2rem;
cursor: pointer;
line-height: 1.2rem;
color: #fff;
margin-top: 0.3rem;
background: linear-gradient(
180deg,
rgba(213, 60, 63, 1) 0%,
rgba(201, 20, 24, 1) 100%
);
font-size: 0.5rem;
}
}
本文来自博客园，作者：zjxgdq，转载请注明原文链接：https://www.cnblogs.com/zjxzhj/p/14788390.html
浙公网安备 33010602011771号