VUE游戏九宫格

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">刚刚用户铃**小，抽中了小米手机</div></div><div class="wrap"><div class="jifen">我的积分96756</div></div><div class="pan"><divclass="item"v-for="item in  [1,2,3,4,5,6,7,8,9]":key="item":class="[index===item && item!==5?'active':'',item===5?'anniu':'']"><div class="img" v-if="item!==5"><img :src="require('../../assets/images/activity/l'+item+'.png')" alt /></div><div class="now" v-if="item===5" @click="startLottery">立即抽奖</div><div class="n-txt" v-if="item===5">消耗1500积分</div><div class="txt" v-if="item!==5">{{item}}</div></div></div></div></div>
</template><script>
export default {data() {return {title: "积分转盘",index: 0, // 当前转动到哪个位置，起点位置count: 10, // 总共有多少个位置timer: 0, // 每次转动定时器speed: 200, // 初始转动速度times: 0, // 转动次数cycle: 50, // 转动基本次数：即至少需要转动多少次再进入抽奖环节prize: -1, // 中奖位置click: true,showToast: false,toastType: "luck"};},//生命周期 - 创建完成（访问当前this实例）created() {},//生命周期 - 挂载完成（访问DOM元素）mounted() {},methods: {backFn() {this.$getBackPathData();},// 开始抽奖startLottery() {if (!this.click) {//避免多次点击return;}this.closeToast(); //关闭提示this.speed = 200; //初始化速度this.click = false; //重新开始点击(这里要优化)this.startRoll(); //开始转动},// 开始转动startRoll() {this.times += 1; // 转动次数Roll(); // 转动过程调用的每一次转动方法，这里是第一次调用初始化// 如果当前转动次数达到要求 && 目前转到的位置是中奖位置if (this.times > le + 10 && this.prize === this.index) {clearTimeout(this.timer); // 清除转动定时器，停止转动this.prize = -1;this.times = 0;this.click = true;this.showToast = astType = "comeOn";console.log("你已经中奖了");} else {if (this.times < le) {this.speed -= 10; // 加快转动速度} else if (this.times === le) {// 随机获得一个中奖位置(调接口获取)const index = parseInt(Math.random() * 10, 0);this.prize = index;//   if (this.prize > 7) {//     this.prize = 7;//   }console.log(`中奖位置${this.prize}`);} else if (this.times > le + 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.index; // 当前转动到哪个位置const count = unt; // 总共有多少个位置index += 1;if (index > count - 1) {index = 0;}this.index = 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;}}.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-repeatcenter/100%;&.active {background: url("../../assets/images/activity/zhong.png") no-repeatcenter/100%;}&.anniu {background: url("../../assets/images/activity/chou.png") no-repeatcenter/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);}}}}
}
</style>