uniapp 实现抽奖功能
Posted 水星记_
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了uniapp 实现抽奖功能相关的知识，希望对你有一定的参考价值。
实现效果
wxml代码
<view class="bg">
<view class="container">
<view class="limitbean">剩余极限豆 {{limitnum}}</view>
<view class="frame_view">
<view class="frame_row" style="margin-top: 48rpx;">
<view class="frame_item" :class="'item' + color[0]">
<image :src="award[0].img"></image>
<text>{{ award[0].name }}</text>
</view>
<view class="frame_item" :class="'item' + color[1]">
<image :src="award[1].img"></image>
<text>{{ award[1].name }}</text>
</view>
<view class="frame_item" :class="'item' + color[2]">
<image :src="award[2].img"></image>
<text>{{ award[2].name }}</text>
</view>
</view>
<view class="frame_row">
<view class="frame_item" :class="'item' + color[7]">
<image :src="award[7].img"></image>
<text>{{ award[7].name }}</text>
</view>
<!-- 抽奖 -->
<!-- <image class="frame_item" :src="btnconfirm" @click="clickLuck"></image> -->
<view style="text-align: center;color: #fff;">
<view style="font-size: 36rpx;">{{free}}次</view>
<view style="font-size: 28rpx;">免费次数</view>
</view>
<view class="frame_item" :class="'item' + color[3]">
<image :src="award[3].img"></image>
<text>{{ award[3].name }}</text>
</view>
</view>
<view class="frame_row">
<view class="frame_item" :class="'item' + color[6]">
<image :src="award[6].img"></image>
<text>{{ award[6].name }}</text>
</view>
<view class="frame_item" :class="'item' + color[5]">
<image :src="award[5].img"></image>
<text>{{ award[5].name }}</text>
</view>
<view class="frame_item" :class="'item' + color[4]">
<image :src="award[4].img"></image>
<text>{{ award[4].name }}</text>
</view>
</view>
</view>
<view class="luckbtulist">
<view class="luckone" @click="clickLuck">
<p v-if="payout==0" style="margin-top: 30upx;">免费抽1次</p>
<view v-if="payout==1">
<p style="margin-top: 10upx;">100极限豆</p>
<p>抽1次</p>
</view>
</view>
<view class="luckfive" @click="clickLuckFive">
<p v-if="payout==0" style="margin-top: 30upx;">免费抽5次</p>
<view v-if="payout==1">
<p style="margin-top: 10upx;">400极限豆</p>
<p>抽5次</p>
</view>
</view>
</view>
<view class="lucktips">
<view class="lucktab">
<view class="luckrule" @click="toggleTabs(0)" :style="styleObject">活动规则</view>
<view class="record" @click="toggleTabs(1)" :style="styleObject1">获奖记录</view>
</view>
<view v-show="nowIndex==0" class="ruleinof">
<view class="ruleconten">1、每100极限豆抽一次。</view>
<view class="ruleconten">2、用户每日可免费抽5次，会员L3级以上根据会员权益次数增加。</view>
<view class="ruleconten">3、系统赠送免费抽奖次数仅限当日使用。</view>
<view class="ruleconten">4、抽中金币或疯狂值，实时发放，可在疯狂值明细或金币明细中查看。</view>
<view class="ruleconten">5、抽中实物者，极限之路官方客服将会在3个工作日内通过电话取得联系，请保持手机畅通。</view>
<view class="ruleconten">6、本活动最终解释权归极限之路科技有限公司所有。</view>
</view>
<view class="ruleinof" v-show="nowIndex==1">
<view style="width: 100%;height: 496rpx; margin-top: 40rpx;overflow-y:auto;">
<view class="recordlist">
<view class="">2019-04-18 14:32:39</view>
<view class="">+500 极限豆</view>
</view>
<view class="recordlist">
<view class="">2019-04-18 14:32:39</view>
<view class="">+500 极限豆</view>
</view>
<view class="recordlist">
<view class="">2019-04-18 14:32:39</view>
<view class="">+500 极限豆</view>
</view>
<view class="recordlist">
<view class="">2019-04-18 14:32:39</view>
<view class="">+500 极限豆</view>
</view>
</view>
</view>
</view>
</view>
<!-- 弹出窗口 -->
<view :class="{'share-box': shareState}" @click="handleHiddenShare">
<view v-if="lucktype==0" class="nopop" :class="{'share-show': shareState}">
<view style="margin-top: 60rpx;margin-left: 180rpx;margin-bottom: 30rpx;">
<image src="https://cdnapp.jixianzhilu.cn/circle_image/2021_06_8_14_36_52_5.png" mode=""
style="width: 124rpx;height: 144rpx;"></image>
</view>
<view class="poptitle">抽奖次数不足</view>
<view class="popbtn">确定</view>
</view>
<!-- 单抽 -->
<view v-else-if="lucktype==1" class="onepop" :class="{'share-show': shareState}">
<view class="popconten">
<image :src="prizeimg" mode="" style="width: 190rpx;height: 190rpx;"></image>
<view style="margin-top: 20rpx;color: #4A4A4A;font-size: 28rpx;">{{prize}}</view>
</view>
<view class="popbtn" style="margin-top: -90rpx;">确定</view>
</view>
<!-- 五连抽 -->
<view v-else-if="lucktype==2" class="onepop" :class="{'share-show': shareState}">
<view class="popcontenlist">
<view class="poplucklist">
<image :src="prizeimg" mode="" style="width: 80rpx;height: 80rpx;"></image>
<view style="margin-top: 0rpx;color: #4A4A4A;font-size: 28rpx;">{{prize}}</view>
</view>
<view class="poplucklist">
<image :src="prizeimg" mode="" style="width: 80rpx;height: 80rpx;"></image>
<view style="margin-top: 0rpx;color: #4A4A4A;font-size: 28rpx;">{{prize}}</view>
</view>
<view class="poplucklist">
<image :src="prizeimg" mode="" style="width: 80rpx;height: 80rpx;"></image>
<view style="margin-top: 0rpx;color: #4A4A4A;font-size: 28rpx;">{{prize}}</view>
</view>
<view class="poplucklist">
<image :src="prizeimg" mode="" style="width: 80rpx;height: 80rpx;"></image>
<view style="margin-top: 0rpx;color: #4A4A4A;font-size: 28rpx;">{{prize}}</view>
</view>
<view class="poplucklist">
<image :src="prizeimg" mode="" style="width: 80rpx;height: 80rpx;"></image>
<view style="margin-top: 0rpx;color: #4A4A4A;font-size: 28rpx;">{{prize}}</view>
</view>
</view>
<view class="popbtn" style="margin-top: 60rpx;">确定</view>
</view>
</view>
</view>
js代码
<script>
//计数器
var interval = null;
//值越大旋转时间越长 即旋转速度
var intime = 100;
export default {
data() {
return {
nowIndex: 0,
color: [0, 0, 0, 0, 0, 0, 0, 0],
award: [{
img: 'https://cdnapp.jixianzhilu.cn/circle_image/2021_06_8_14_34_47_2.png',
name: '+1000极限豆',
chance: '0'
},
{
img: 'https://cdnapp.jixianzhilu.cn/circle_image/2021_06_8_14_35_36_10.png',
name: '+150极限值',
chance: '0'
},
{
img: 'https://cdnapp.jixianzhilu.cn/circle_image/2021_06_8_14_35_36_10.png',
name: '+160极限值',
chance: '0'
},
{
img: 'https://cdnapp.jixianzhilu.cn/circle_image/2021_06_8_14_34_47_2.png',
name: '+170极限豆',
chance: '8'
},
{
img: 'https://cdnapp.jixianzhilu.cn/circle_image/2021_06_8_14_35_36_10.png',
name: '+180极限值',
chance: '0'
},
{
img: 'https://cdnapp.jixianzhilu.cn/circle_image/2021_06_8_14_34_47_2.png',
name: '+100极限豆',
chance: '2'
},
{
img: 'https://cdnapp.jixianzhilu.cn/circle_image/2021_06_8_14_35_36_10.png',
name: '+120极限值',
chance: '3'
},
{
img: 'https://cdnapp.jixianzhilu.cn/circle_image/2021_06_8_14_35_36_10.png',
name: '+140极限值',
chance: '2'
}
], //接收数组
Luck: true, //防置重复点击
lucktype: 2, //判断奖品类型
luckPosition: 0, //停止位置
prize: '+2000极限豆', //奖品，
prizeimg: 'https://cdnapp.jixianzhilu.cn/circle_image/2021_06_8_14_35_36_10.png', //奖品图片
// 弹窗按钮
shareState: false,
// 极限豆
limitnum: 100,
// tab切换
styleObject: {
'border-bottom': '3px solid #A24A1E',
},
styleObject1: '',
//免费
free: 2,
// 判断类型
payout: 0
};
},
methods: {
// 记录切换
toggleTabs(index) {
this.nowIndex = index;
// this.shareState=true
if (index == 1) {
this.styleObject1 = {
'border-bottom': '3px solid #A24A1E',
}
this.styleObject = {}
} else {
this.styleObject = {
'border-bottom': '3px solid #A24A1E',
}
this.styleObject1 = {}
}
},
// 关闭中奖弹窗
handleHiddenShare() {
this.shareState = false
},
// 点击抽奖
clickLuck() {
if (this.Luck == false) { //防止过度点击
return;
}
this.Luck = false;
// 判断极限豆
if (this.limitnum < 100) {
this.shareState = true
this.lucktype = 0
this.Luck = true;
return;
}
//判断免费次数
if (this.free == 0 && this.limitnum < 100) {
this.shareState = true
this.lucktype = 0
this.Luck = true;
}
var arr = [];
//根据概率循环位置
for (var i = 0; i < this.award.length; i++) {
for (var k = 0; k < this.award[i].chance; kJS实现随机抽奖功能