uniapp 九宫格抽奖功能

<template><view class="bg"><view class="container"><view class="limitbean">剩余抽奖次数 {{free}}</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><!-- 抽奖 --><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 style="margin-top: 30upx;">免费抽奖</p></view><view class="luckfive" @click="clickLuckFive"><p style="margin-top: 30upx;">分享加一次</p></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">我是活动规则</view></view><view class="ruleinof" v-if="isif" v-show="nowIndex==1"><view style="width: 100%;height: 496rpx;  margin-top: 40rpx;overflow-y:auto;"><view class="recordlist"><view>时间:{{cjtime}}</view><view>{{prize}}</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></view>
</template><script>//计数器var interval = null;//值越大旋转时间越长  即旋转速度var intime = 100;export default {data() {return {//抽奖记录的显示isif: false,cjtime: "",// nowIndex为0的时候显示抽奖规则，nowIndex为1的时候显示抽奖记录nowIndex: 0,// 九宫格初始化的位置color: [0, 0, 0, 0, 0, 0, 0, 0],//chance中奖率   award: [{img: 'https://cdnapp.jixianzhilu.cn/circle_image/2021_06_8_14_34_47_2.png',name: '谢谢参与',chance: 0,},{img: 'https://cdnapp.jixianzhilu.cn/circle_image/2021_06_8_14_35_36_10.png',name: '洗衣机',chance: 100,},{img: 'https://cdnapp.jixianzhilu.cn/circle_image/2021_06_8_14_35_36_10.png',name: '谢谢参与',chance: 0,},{img: 'https://cdnapp.jixianzhilu.cn/circle_image/2021_06_8_14_34_47_2.png',name: '笔记本',chance: 0,},{img: 'https://cdnapp.jixianzhilu.cn/circle_image/2021_06_8_14_35_36_10.png',name: '谢谢参与',chance: 0,},{img: 'https://cdnapp.jixianzhilu.cn/circle_image/2021_06_8_14_34_47_2.png',name: '电脑',chance: 0,},{img: 'https://cdnapp.jixianzhilu.cn/circle_image/2021_06_8_14_35_36_10.png',name: '谢谢参与',chance: 0,},{img: 'https://cdnapp.jixianzhilu.cn/circle_image/2021_06_8_14_35_36_10.png',name: '冰箱',chance: 0,}], //接收数组Luck: true, //防置重复点击lucktype: 2, //判断奖品类型luckPosition: 0, //停止位置prize: '', //奖品，prizeimg: 'https://cdnapp.jixianzhilu.cn/circle_image/2021_06_8_14_35_36_10.png', //奖品图片// 弹窗按钮shareState: false,// tab切换styleObject: {'border-bottom': '3px solid #A24A1E',},styleObject1: '',//免费抽奖次数free: 3,// 判断类型payout: 0};},created() {//获取当前时间戳var date = new Date().getTime();// 把当前的时间戳转换成yyy-MM-dd HH:mm:ssfunction timestampToTime(timestamp) {var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000var Y = date.getFullYear() + '-';var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();return Y + M + D + h + m + s;}var hour = timestampToTime(date)console.log(hour);this.cjtime = hour;},methods: {// 记录切换nowIndex(0)的时候显示活动规则nowIndex(1)的时候显示奖品记录toggleTabs(index) {this.nowIndex = index;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() {//抽奖记录的显示setTimeout(() => {this.isif = true;}, 8000);if (this.Luck == false) { //防止过度点击return;}this.Luck = false;// }//判断免费次数        if (this.free == 0) {this.shareState = truethis.lucktype = 0this.Luck = true;return;}var arr = [];//根据概率循环位置for (var i = 0; i < this.award.length; i++) {for (var k = 0; k < this.award[i].chance; k++) {arr.push(i);}}console.log(arr, "位置");//随机打乱数组for (let i = 0, len = arr.length; i < len; i++) {let index = parseInt(Math.random() * (len - 1));let tempValue = arr[i];arr[i] = arr[index];arr[index] = tempValue;}//从数组中随机抽取一个位置var a = Math.ceil(Math.random() * 10);if (this.free != 0) {this.free = this.free - 1 //抽奖次数减1} if (this.free == 0) {this.payout = 1}this.luckPosition = arr[a]; //位置this.prize = this.award[arr[a]].name //奖品名字this.prizeimg = this.award[arr[a]].img //奖品图片// 设置thisvar e = this;//清空计时器clearInterval(interval);var index = 0;//循环设置每一项的背景图interval = setInterval(function() {var c = [0, 0, 0, 0, 0, 0, 0, 0];if (index > 7) {index = 0;}c[index] = 1;e.color = c;index++;}, intime);e.stop(e.luckPosition);},// 停止stop(which) {var e = this;//清空计数器clearInterval(interval);//初始化当前位置var current = -1;var color = e.color;for (var i = 0; i < color.length; i++) {if (color[i] == 1) {current = i;}}//下标从1开始var index = current + 1;e.stopLuck(which, index, intime, 10);},/*** which:中奖位置* index:当前位置* time：时间标记* splittime：每次增加的时间 值越大减速越快*/stopLuck(which, index, time, splittime) {var e = this;//值越大出现中奖结果后减速时间越长var color = e.color;setTimeout(function() {//重置前一个位置var c = [0, 0, 0, 0, 0, 0, 0, 0];if (index > 7) {index = 0;}//当前位置为选中状态c[index] = 1;e.color = c;//如果旋转时间过短或者当前位置不等于中奖位置则递归执行//直到旋转至中奖位置if (time < 400 || index != which) {//越来越慢splittime++;time += splittime;//当前位置+1index++;e.stopLuck(which, index, time, splittime);} else {//中奖e.shareState = truee.Luck = true;e.lucktype = 1if (e.payout == 1) {e.limitnum = e.limitnum - 3}}}, time);},// 分享加一次clickLuckFive() {this.free = this.free + 1;}},};
</script><style>.bg {width: 100%;min-height: 2200upx;background-color: #136eb7;background-size: 100% 100%;}.container {overflow: hidden;}.limitbean {width: 100%;color: #fff;text-align: center;margin-top: 80rpx;font-size: 30rpx;margin-bottom: 24rpx;}.frame_view {width: 648rpx;height: 688rpx;margin: 0 auto;border-radius: 30rpx;background: url("https://cdnapp.jixianzhilu.cn/circle_image/2021_06_8_14_37_50_4.png") no-repeat;background-size: 100% 100%;overflow: hidden;}.frame_row {width: 520rpx;height: 168rpx;display: flex;flex-direction: row;justify-content: space-between;align-items: center;margin-left: 64rpx;margin-bottom: 20rpx;}.frame_item {width: 168rpx;height: 168rpx;display: flex;align-items: center;justify-content: center;flex-wrap: wrap;font-size: 20px;/* box-sizing:border-box; */background: #FFFFFF;/*    border-radius: 17px; *//*   box-shadow: 0px 6px 0px 0px rgba(236,231,228,1); */background: url("https://cdnapp.jixianzhilu.cn/circle_image/2021_06_8_14_41_5_0.png") no-repeat;background-size: 100% 100%;}.frame_item image {width: 80rpx;height: 80rpx;display: block;}.frame_item text {font-size: 26rpx;display: block;width: 100%;text-align: center;color: #818181;margin-top: -40rpx;}.item1 {background: url("https://cdnapp.jixianzhilu.cn/circle_image/2021_06_8_14_42_16_6.png") no-repeat;background-size: 100% 100%;// box-shadow: 0px 10px 20px 0px rgba(170,56,0,1), 0px 0px 20px 0px rgba(196,58,215,1), 0px 4px 0px 0px rgba(255,255,255,0.29);}.luckbtulist {width: 100%;display: flex;align-items: center;justify-content: center;color: #fff;}.luckone {width: 310upx;height: 100upx;background: linear-gradient(360deg, #E4392C 0%, #F6A261 100%);box-shadow: 0px 10px 20px 0px rgba(153, 0, 0, 0.81), 0px 5px 0px 0px rgba(195, 48, 7, 1), 0px 4px 0px 0px rgba(255, 255, 255, 0.23);border-radius: 50upx;margin-right: 28rpx;text-align: center;}.luckfive {width: 310upx;height: 100upx;background: linear-gradient(180deg, #FFC3AC 0%, #D43EDC 100%);box-shadow: 0px 10px 20px 0px rgba(170, 56, 0, 1), 0px 5px 0px 0px rgba(196, 58, 215, 1), 0px 4px 0px 0px rgba(255, 255, 255, 0.29);border-radius: 50px;text-align: center;}.lucktips {width: 686rpx;height: 800rpx;background: #0d62ad;border-radius: 20rpx;margin: 0 auto;margin-top: 70rpx;}.lucktab {width: 580rpx;height: 104rpx;border-bottom: 1rpx solid #e3672a;margin: 0 auto;display: flex;align-items: center;justify-content: space-around;font-size: 28rpx;color: #e3672a;font-weight: 600;}.lucktab view {height: 100%;line-height: 104rpx;}.action {border-bottom: 3px solid #e3672a;}.ruleinof {width: 584rpx;height: 496rpx;margin: 0 auto;font-size: 28rpx;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #D97645;}.ruleinof .ruleconten {margin-top: 40rpx;line-height: 40rpx;}.recordlist {display: flex;align-items: center;justify-content: space-between;margin-bottom: 20rpx;}.share-box {width: 100%;height: 100%;position: fixed;top: 0rpx;left: 0rpx;bottom: 0rpx;right: 0rpx;background-color: rgba(0, 0, 0, 0.4);transition: .3s;z-index: 999;}.nopop {display: none;width: 470rpx;height: 455rpx;background: #FFFFFF;border-radius: 30px;position: absolute;left: 50%;top: 50%;margin-top: -228rpx;/* 高度的一半 */margin-left: -235rpx;/* 宽度的一半 */}.share-show {display: block !important;}.poptitle {font-size: 28rpx;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #4A4A4A;text-align: center;}.popbtn {width: 310upx;height: 100upx;background: linear-gradient(360deg, #E4392C 0%, #F6A261 100%);box-shadow: 0px 10px 10px 0px rgba(153, 0, 0, 0.81), 0px 5px 0px 0px rgba(195, 48, 7, 1), 0px 4px 0px 0px rgba(255, 255, 255, 0.23);border-radius: 50upx;margin-right: 28rpx;text-align: center;line-height: 100upx;font-size: 32upx;color: #fff;margin: 0 auto;margin-top: 36upx;}.onepop {display: none;width: 696rpx;height: 872rpx;background: url("https://cdnapp.jixianzhilu.cn/circle_image/2021_06_8_14_41_31_5.png") no-repeat;background-size: 100% 100%;position: absolute;left: 50%;top: 50%;margin-top: -438rpx;/* 高度的一半 */margin-left: -350rpx;/* 宽度的一半 */overflow: hidden;}.popconten {width: 470rpx;height: 472rpx;background: url("https://cdnapp.jixianzhilu.cn/circle_image/2021_06_8_14_39_28_5.png") no-repeat;background-size: 100% 100%;margin: 0 auto;margin-top: 340rpx;display: flex;flex-direction: column;align-items: center;justify-content: center;}.popcontenlist {width: 470rpx;height: 300rpx;margin: 0 auto;margin-top: 370rpx;display: flex;align-items: center;flex-wrap: wrap;}.poplucklist {width: 88rpx;height: 180rpx;margin-left: 56rpx;}
</style>

uniapp 九宫格抽奖功能相关推荐

使用vue实现九宫格抽奖功能
使用vue2和vue3分别实现九宫格抽奖功能关于九宫格抽奖的功能,想必大家都见过.外圈为奖品,中间是一个抽奖的按钮,接下来就讲解怎么实现九宫格的抽奖功能. 本demo使用技术:vue2/vue3,作 ...
“淘宝小程序“ 九宫格抽奖功能
淘宝小程序的九宫格抽奖功能,同理功能代码可根据指定小程序规则调整事件,此逻辑可适配所有小程序功能开发. 效果图: index.axml  <view cl ...
js实现九宫格抽奖功能
分享一下js的九宫格抽奖功能首先是html部分: <div class="box"><div class="div2">短裙</ ...
uniapp 九宫格抽奖
git地址去git下载呦!这里直截取了部分代码这里只处理了样式以及js的关键问题!具体内容要对接自己的业务九宫格抽奖 /*func业务逻辑(带返回值)func2 判断(返回值为true/fals ...
uniapp九宫格抽奖
效果如图: 这里用了一个 uniapp的一个插件贴个地址 https://100px.net/usage/uni-app.html npm 安装: npm install uni-luck-draw ...
原生js 实现九宫格抽奖功能
1.先绘制一个九宫格轮盘 <div class="bodydom"><div class="block">鸿蒙紫气*1</div& ...
uniapp实现抽奖功能
效果代码 <template><view class="almost-lottery"><view class="almost-lotte ...
淘宝小程序九宫格抽奖
淘宝小程序的九宫格抽奖功能,同理功能代码可根据指定小程序规则调整事件,此逻辑可适配所有小程序功能开发. 效果图: index.axml  <view cl ...
uni-app - 九宫格老虎机抽奖机插件源码（支持服务端API接口控制最终中奖的奖品，自定义组件可随意配置和控制，带组件文档轻松 DIY 自己的营销页抽奖机）幸运抽奖圆形大转盘插件组件
前言如果您需要圆形大转盘抽奖机(如下图所示),请访问:这篇文章. 关于九宫格式老虎机宫格跳动抽奖,网上的大部分源码非常乱且无注释,根本无法改造, 本文提供的组件源码,代码干净整洁注释详细,并且配备超 ...

uniapp 九宫格抽奖功能

uniapp 九宫格抽奖功能相关推荐

最新文章

热门文章