vue九宫格抽奖


<template>
<div class="jiu">
<div class="content">
<div class="head">
<div class="icon" @click="backFn">
<i class="iconfont icon-fanhui1"></i>
</div>
<div class="txt">榜单</div>
</div>
<div class="img">
<img src="../../assets/images/activity/txt.png" alt />
</div>
<div class="tip">

<div class="tip-txt">
<ul class="lb" :class="{marquee_top:animate}">
<li class="lb_text" v-for="(item, index) in list" :key="index">{{item}}</li>
</ul>
</div>
</div>
<div class="wrap">
<div class="jifen">我的积分{{ experis }}</div>
</div>
<div class="pan">
<div
class="item"
v-for="(item, index) in prizelist"
:key="item.id"
:class="[index1===item.id && index!==4?'active':'',index===4?'anniu':'']"
>
<div class="img" v-if="index!==4">
<img :src="item.image" alt />
</div>
<div class="now" v-if="index===4" @click="startLottery">立即抽奖</div>
<div class="n-txt" v-if="index===4" @click="startLottery">消耗1500积分</div>
<div class="txt" v-if="index!==4">{{item.name}}</div>
</div>
</div>
</div>

<div class="mark" v-if="shade"></div>
<div class="outre_item" v-if="shade">
<div class="top">恭喜您获得</div>
<div class="contents" @click="tochakan">
<div class="dazhe">
<span>{{this.prizecont}}</span>

</div>


</div>


<span class="chakan" @click="tochakan">我知道了</span>

</div>
</div>
</template>

<script>
import getHomeApi from "@/api/user.js";
import storage from "../../utils/storage.js";
import aboutUserApi from "@/api/user.js";
export default {
data() {
return {
title: "积分转盘",
index1: 0, // 当前转动到哪个位置，起点位置
count: 10, // 总共有多少个位置
timer: 0, // 每次转动定时器
speed: 200, // 初始转动速度
times: 0, // 转动次数
cycle: 50, // 转动基本次数：即至少需要转动多少次再进入抽奖环节
prize: -1, // 中奖位置
click: true,
showToast: false,
toastType: "luck",
experiences: 0, //积分
prizelist: [],
sourceArr: [], //原奖品列表
animate: false,
list: [],
shade: false, //中奖弹窗
user_info: "",
experis: 0,
prizecont: '' //中奖内容
};
},
//生命周期 - 创建完成（访问当前this实例）
created() {
this.experiences = this.route.query.experiences; this.get_lotteriesData(); this.get_lotteriesDatal(); }, computed: {}, //生命周期 - 挂载完成（访问DOM元素） mounted() { this.user_info = this.storage.getObjItem("user_info");
this.getUserInfo();
let that = this;
const timer = setInterval(() => {
this.animate = true;

  setTimeout(() => {
    that.list.push(this.list[0]);
    that.list.shift();
    that.animate = false;
    // console.log(Math.random());
  }, 500);
}, 2000);
// 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
this.$once("hook:beforeDestroy", () => {
  clearInterval(timer);
});

},
methods: {
// 关闭中奖弹窗
tochakan() {
this.shade = false;
},

//中奖纪录

get_lotteriesDatal() {
  getHomeApi.getlotteriesDatal({ page: 1 }).then(res => {
    this.list = res;
  });
},
//抽奖奖品数据
get_lotteriesData() {
  let _this = this
  getHomeApi.getlotteriesData().then(res => {
    this.prizelist = res;
    this.sourceArr = this.prizelist.slice()
    this.prizelist.splice(4, 0, {});
  });
},

backFn() {
  this.$router.go(-1);
},
// 开始抽奖
startLottery() {
  if (!this.click) {
    //避免多次点击
    return;
  }
  if (this.experis < 1500) {
    alert("积分不足");
    // console.log(this.experis)
    return false;
  } else {
    // this.getUserInfo()
    this.closeToast(); //关闭提示
    this.speed = 200; //初始化速度
    this.click = false; //重新开始点击(这里要优化)
    // if(this.experiences < 200)
    this.startRoll(); //开始转动
  }
},

// 获取用户信息
getUserInfo() {
  aboutUserApi.getUserInfo().then(res => {
    const { errorCode, data } = res;
    if (errorCode === 0) {
      this.userInfo = data;
      this.experis = Number(this.userInfo.experience);
    }
  });
},
// 开始转动
startRoll() {
  this.times += 1; // 转动次数
  this.oneRoll(); // 转动过程调用的每一次转动方法，这里是第一次调用初始化
  // 如果当前转动次数达到要求 && 目前转到的位置是中奖位置
  if (this.times > this.cycle + 10 && this.prize === this.index1) {
    clearTimeout(this.timer); // 清除转动定时器，停止转动
    this.prize = -1;
    this.times = 0;
    this.click = true;
    this.showToast = true;
    this.toastType = "comeOn";
    setTimeout(() => {
      this.shade = true; // 中奖弹框
    },500)       
  } else {
    if (this.times < this.cycle) {
      this.speed -= 10; // 加快转动速度
    } else if (this.times === this.cycle) {
      // 随机获得一个中奖位置(调接口获取)
      getHomeApi
        .getlotteriesDatas()
        .then(res => {
          this.experis = this.experis - 1500
          const {index} = res
          // const index = 4
          // console.log(index,'原数组中奖的位置');
          // console.log(this.sourceArr[index].id,'原列表中奖结果的ID')
          const {id} = this.sourceArr[index]
          this.prizelist.map((item,index)=>{
            if(item.id===id){
              return this.prize = index
            }
          })
          //中奖弹框赋值奖品名字
          this.prizecont = this.prizelist[this.prize].name
        })
        .catch(function(error) {
          console.log("抽奖接口失败",error);
        });

      //   if (this.prize > 7) {
      //     this.prize = 7;
      //   }
      // console.log(`中奖位置${this.prize}`);
    } else if (
      this.times > this.cycle + 10 &&
      ((this.prize === 0 && this.index === 9) ||
        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.index1; // 当前转动到哪个位置
  const count = this.count; // 总共有多少个位置
  index += 1;
  if (index > count - 1) {
    index = 0;
  }
  this.index1 = index;
},
// 关闭弹出框
closeToast() {
  this.showToast = false;
}

}
};
</script>
<style scoped lang="scss">
/* @import url(); 引入css类 /
.jiu {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
background: linear-gradient(
159deg,
rgba(22, 3, 50, 1) 0%,
rgba(38, 0, 65, 1) 100%
);
.content {
background: url("../../assets/images/activity/bgjiu.png") no-repeat;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
.head {
display: flex;
align-items: center;
justify-content: center;
padding: 0 30px;
position: relative;
height: 98px;
box-sizing: border-box;
.icon {
position: absolute;
left: 30px;
> .iconfont {
font-size: 70px;
color: #ffffff;
}
}
.txt {
font-size: 32px;
font-weight: bold;
color: #ffffff;
}
}
.img {
text-align: center;
padding-top: 20px;
img {
width: 646px;
height: 122px;
}
}
.tip {
display: flex;
justify-content: center;
padding-top: 24px;
padding-bottom: 30px;
.tip-txt {
width: 546px;
height: 50px;
background: rgba(255, 255, 255, 0.22);
border-radius: 8px;
font-size: 28px;
color: rgba(254, 189, 215, 1);
text-align: center;
line-height: 50px;
display: flex;
align-items: center;
.lb {
height: 28px;
overflow: hidden;
.lb_text {
font-size: 28px;
font-family: PingFang SC;
font-weight: 400;
color: rgba(254, 189, 215, 1);
}
}
}
}
.wrap {
display: flex;
justify-content: center;
.jifen {
width: 366px;
height: 60px;
background: linear-gradient(
84deg,
rgba(213, 64, 114, 0) 0%,
rgba(200, 56, 114, 0.98) 51%,
rgba(232, 88, 123, -0.16) 100%
);
text-align: center;
line-height: 60px;
color: #ffffff;
}
}
.pan {
margin: 30px 16px;
width: 716px;
height: 716px;
background: url("../../assets/images/activity/abg.png") no-repeat;
background-size: 100% 716px;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
box-sizing: border-box;
padding: 62px 60px;
.item {
width: 186px;
height: 186px;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: url("../../assets/images/activity/chang.png") no-repeat
center/100%;
&.active {
background: url("../../assets/images/activity/zhong.png") no-repeat
center/100%;
}
&.anniu {
background: url("../../assets/images/activity/chou.png") no-repeat
center/100%;
}
.img {
img {
width: 88px;
height: 88px;
}
}
.txt {
font-size: 26px;
color: rgba(127, 62, 62, 1);
line-height: 73px;
}
.now {
font-size: 36px;
font-weight: bold;
color: rgba(236, 64, 46, 1);
line-height: 72px;
}
.n-txt {
font-size: 22px;
color: rgba(236, 64, 46, 1);
}
}
}
}
.mark {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 1);
opacity: 0.7;
z-index: 2;
}
.outre_item {
position: absolute;
top: -400px;
left: 50px;
right: 0;
bottom: 0;
margin: auto;
width: 704px;
height: 672px;
z-index: 2;
background: url("../../assets/images/home/huodong/huod.png") no-repeat
top/704px 672px;
.top {
position: absolute;
top: 200px;
left: 240px;
right: 0;
margin: auto;
height: 28px;
font-size: 30px;
font-family: PingFang SC;
font-weight: 500;
color: rgba(224, 109, 0, 1);
line-height: 31px;
}
.button {
position: absolute;
top: 410px;
left: 190px;
right: 0;
margin: auto;
height: 19px;
font-size: 20px;
font-family: PingFang SC;
color: rgba(177, 128, 53, 1);
line-height: 31px;
}
.contents {
width: 200px;
height: 200px;
position: absolute;
top: 200px;
left: 220px;
margin: auto;
text-align: center;
/background-color: pink;*/
line-height: 240px;
.money {
height: 47px;
font-family: PingFang SC;
font-weight: 400;
color: rgba(227, 57, 58, 1);
// line-height: 180px;
.dazhe {
line-height: 50px;
span:nth-child(1) {
font-size: 60px;
}
span:nth-child(2) {
font-size: 30px;
}
}
.ismoney {
span:nth-child(1) {
font-size: 30px;
}
.val {
font-size: 60px;
}
.val2 {
font-size: 40px;
}
}
}
.name {
height: 19px;
font-size: 20px;
font-family: PingFang SC;
font-weight: 400;
color: rgba(224, 109, 0, 1);
line-height: 220px;
}
}
.chakan {
position: absolute;
top: 550px;
left: 280px;
margin: auto;
height: 29px;
font-size: 30px;
font-family: Adobe Heiti Std;
font-weight: normal;
color: rgba(153, 92, 24, 1);
line-height: 31px;
}
.icon-daguanbi {
font-size: 66px;
color: #fff;
position: absolute;
top: 740px;
left: 290px;
right: 0;
bottom: 0;
margin: auto;
}
}
}
</style>

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 194,242评论 5赞 459
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 81,769评论 2赞 371
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 141,484评论 0赞 319
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,133评论 1赞 263
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 61,007评论 4赞 355
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,080评论 1赞 272
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,496评论 3赞 381
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,190评论 0赞 253
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,464评论 1赞 290
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,549评论 2赞 309
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,330评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,205评论 3赞 312
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,567评论 3赞 298
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,889评论 0赞 17
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,160评论 1赞 250
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,475评论 2赞 341
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,650评论 2赞 335

推荐阅读更多精彩内容