uniapp：九宫格，简单易上手，拿来即用
<template>
<view class="index">
<u-navbar title="" :is-back="false" :border-bottom="false" title-color="#333" :background="{background:''}">
<view class="page_navbar_warp">
<image src="../../static/icon/0.png" mode="" class="page_navbar_commonImg" @click="$go(1,1)">image>
view>
u-navbar>
<div class="gameBox">
<view class="top">
<view class="user">
<view class="left">
<image src="../../static/logo.png" mode="">image>
<view class="text">某某某店铺view>
view>
<view class="right">进入店铺view>
view>
<view class="num">剩余抽奖次数：1view>
view>
<view class="content">
<image src="../../static/img/196.png" mode="" class="start" @click="move">image>
<view class="ul">
<view v-for="(item,i) in list" :key="i" class="li" :class="['item' + (i+1), {'active': index == i}]">
<image src="../../static/img/199.png" mode="">image>
<view class="text1">+{{item.number}}{{item.prize_name}}view>
view>
view>
view>
<view class="bom">
<image src="../../static/img/193.png" mode="">image>
<image src="../../static/img/194.png" mode="">image>
view>
div>
<view class="list">
<view class="box">
<view class="title">中奖名单view>
<view class="item" v-for="(item,index) in 13" :key="index">
<view class="text">4-13 13:21view>
<view class="text">用户昵称view>
<view class="text">华为手机*1view>
view>
view>
view>
view>
template>
<script>
export default {
data() {
return {
list: [],//奖品列表
index: 0, // 当前转动到哪个位置，第一次起点位置0,对应页面item1位置
count: 8, // 总共有多少个位置
times: 0, // 转动跑格子次数,
cycle: 100, // 转动基本次数：即至少需要转动多少次再进入抽奖环节
speed: 40, // 初始转动速度
timer: 0, // 转动定时器
prize: 0, // 中奖位置，接口返回
number_of_draws:0,//限制每天抽奖次数，接口返回
prize_data: {//中奖信息
id:Number,//奖品ID
name:'',//奖品名称
number:Number,//奖品数量
image:'',//奖品图片
type:Number,// 奖品类型
},
}
},
mounted() {
//获取奖品列表
this.list = [
{
id:1,
number:1,
prize_name:'乐豆'
},
{
id:2,
number:2,
prize_name:'乐豆'
},
{
id:3,
number:3,
prize_name:'乐豆'
},
{
id:4,
number:4,
prize_name:'乐豆'
},
{
id:5,
number:5,
prize_name:'乐豆'
},
{
id:6,
number:6,
prize_name:'乐豆'
},
{
id:7,
number:7,
prize_name:'乐豆'
},
{
id:8,
number:8,
prize_name:'乐豆'
}
]; // 奖品列表数据
this.number_of_draws = 2; // 该用户剩余抽奖次数
},
methods: {
//点击开始抽奖
move() {
if( this.number_of_draws == 0){
this.$toast('今日抽奖次数已用完,明天再来吧');
}else if(this.times != 0){
this.$toast('正在抽奖中，请勿重复点击')
} else{
this.number_of_draws--;//抽奖开始，次数-1
this.speed = 40;//每次抽奖速度初始化为200
this.prize_data = 1;//已经拿到中奖信息，页面展示，等抽奖结束后，将弹窗弹出
this.prize = 1;//中奖位置赋值，跑马灯最终停留位置，这里实际位置需要-1
this.startRoll();//执行抽奖
}
},
// 开始转动
startRoll() {
this.times += 1; // 转动次数
this.oneRoll(); // 转动过程调用的每一次转动方法，这里是第一次调用初始化
this.usePrize();
},
// 每一次转动
oneRoll() {
let index = this.index; // 当前转动到哪个位置
const count = 8; // 总共有多少个位置
index += 1;
if (index > count - 1) {
index = 0;
}
this.index = index;
},
usePrize() {
// 如果当前转动次数达到要求 && 目前转到的位置是中奖位置
if (this.times > this.cycle-20 && this.prize === this.index) {
clearTimeout(this.timer); // 清除转动定时器
this.times = 0; // 转动跑格子次数初始化为0，可以开始下次抽奖
if(this.prize_data.type == 0){
console.log('未中奖，谢谢参与');//未中奖提示弹出，
}else{
console.log('中奖啦');//中奖弹出提示
}
} else {
if(this.times>60){
this.speed += 20; // 抽奖即将结束，放慢转动速度
}
this.timer = setTimeout(this.startRoll, this.speed);//开始转动
}
},
},
}
script>
<style scoped lang="scss">
.index{
min-height: 100vh;
background: url('../../static/img/190.png')no-repeat left top;
background-size: 750rpx 1916rpx;
.gameBox {
width: 750rpx;
height: 1066rpx;
background: url('../../static/img/191.png')no-repeat left top;
background-size: 750rpx 1066rpx;
margin-top: 300rpx;
.top{
height: 280rpx;
.user{
display: flex;
align-items: center;
justify-content: space-between;
padding: 85rpx 50rpx 67rpx;
.left{
display: flex;
align-items: center;
uni-image{
width: 68rpx;
height: 68rpx;
margin-right: 20rpx;
border-radius: 50%;
}
.text{
font-size: 30rpx;
font-weight: bold;
color: #6E160A;
}
}
.right{
padding-right: 20rpx;
font-size: 26rpx;
font-weight: bold;color: #C52722;
background: url('../../static/img/198.png')no-repeat right center;
background-size: 16rpx 16rpx;
}
}
.num{
text-align: center;
font-size: 26rpx;
font-weight: bold;
color: #FDFBB9;
}
}
.content{
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 570rpx;
height: 570rpx;
margin: auto;
.start {
position: absolute;
width: 164rpx;
height: 164rpx;
left: 210rpx;top: 200rpx;
}
.ul {
.li {
position: absolute;
width: 164rpx;
height: 164rpx;
background: url('../../static/img/195.png')no-repeat center;
background-size: 164rpx 164rpx;
border-radius: 8px;
padding-top: 20rpx;
uni-image{
display: block;
width: 80rpx;
height: 80rpx;
margin: 0 auto 10rpx;
}
.text1 {
text-align: center;
font-size: 20rpx;
color: #B53319;
}
}
.item1 {left: 25rpx;top: 20rpx;}
.item2 {left: 210rpx;top: 20rpx;}
.item3 {left: 390rpx;top: 20rpx;}
.item4 {left: 390rpx;top: 200rpx;}
.item5 {left: 390rpx;top: 380rpx;}
.item6 {left: 210rpx;top: 380rpx;}
.item7 {left: 25rpx;top: 380rpx;}
.item8 {left: 25rpx;top: 200rpx;}
.active {background: #FFF2B1;}
}
}
.bom{
display: flex;
align-items: center;
justify-content: center;
height: 220rpx;
uni-image{
width: 262rpx;
height: 104rpx;
margin: 0 5rpx;
}
}
}
.list{
width: 750rpx;
height: 544rpx;
background: url('../../static/img/192.png')no-repeat left top;
background-size: 750rpx 544rpx;
overflow: hidden;
.box{
padding-top: 70rpx;
margin-top: 80rpx;
height: 400rpx;
overflow-y: scroll;
.title{
text-align: center;
font-size: 32rpx;
font-weight: bold;
color: #FEE3BD;
margin-bottom: 30rpx;
}
.item{
width: 690rpx;
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 auto 20rpx;
.text{
text-align: center;
width: 33.33%;
font-size: 26rpx;
color: #FFD9A5;
}
}
}
}
}
style>
页面中的背景图，图标：
