uniapp:幸运大转盘demo

2023-10-13 04:30
文章标签 uniapp demo 大转盘 幸运

本文主要是介绍uniapp:幸运大转盘demo,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

在这里插入图片描述

<template><view class="index"><image src="../../static/img/158.png" mode="" class="banner"></image><view class="title">绿色积分加倍卡拿到手软</view><almost-lottery :lotteryBg="lotteryBg" :actionBg="actionBg" :colors="['#fff','#FFDFD4']":strFontColors="['#FF4100','#FF4100']":strMarginOutside="30":imgMarginStr="50":imgWidth="62":imgHeight="38":imgCircled="false":lottery-size="lotteryConfig.lotterySize":action-size="lotteryConfig.actionSize" :ring-count="6" :duration="4" :self-rotaty="false":img-circled="true" :canvasCached="true" :prize-list="prizeList" :prize-index="prizeIndex"@reset-index="prizeIndex = -1" @draw-before="handleDrawBefore" @draw-start="handleDrawStart"@draw-end="handleDrawEnd" @finish="handleDrawFinish" v-if="prizeList.length" /><u-button :ripple="true" class="btn" @click="submit" :loading="loading">立即抽奖({{freeNum}}次)</u-button></view>
</template><script>import AlmostLottery from '@/uni_modules/almost-lottery/components/almost-lottery/almost-lottery.vue'import {clearCacheFile,clearStore} from '@/uni_modules/almost-lottery/utils/almost-utils.js'export default {name: 'Home',components: {AlmostLottery},data() {return {// 开启调试模式isDev: false,// 以下是转盘配置相关数据lotteryConfig: {lotterySize: 600, // 抽奖转盘的整体尺寸,单位rpxactionSize: 200 // 抽奖按钮的尺寸,单位rpx},lotteryBg: require('../../static/img/156.png'), // 转盘外环图,如有需要,请参考替换为自己的设计稿actionBg: require('../../static/img/157.png'), // 抽奖按钮图prizeList: [], // 奖品数据prizeIndex: -1, // 中奖下标prizeing: false, // 是否正在抽奖中,避免重复触发freeNum: 0, // 抽奖次数loading:false,rules:[]}},onLoad() {this.prizeList = []this.getPrizeList()},onShow() {this.$http.get('/api/turntable/index').then(res=>{if(res.code == 1){this.freeNum = res.data.lottery_count;this.rules = res.data.rules;}})},onUnload() {uni.hideLoading()},methods: {// 获取奖品列表async getPrizeList() {uni.showLoading({title: '奖品准备中...'})this.$http.get('/api/turntable/prizes').then(res=>{if(res.code == 1){res.data.prizes.forEach(item=>{if(item.multiple == 0){this.prizeList.push({prizeId: item.id,prizeName: '谢谢参与',prizeImage: item.image,name:item.name})}else{this.prizeList.push({prizeId: item.id,prizeName: item.name,prizeImage: item.image,name:item.name})}})}})},// 抽奖开始之前handleDrawBefore(callback) {// 还有免费数次或者剩余金币足够抽一次if (this.freeNum > 0) {this.handleDrawStart()} else {this.$toast('抽奖次数已用完')}},// 本次抽奖开始handleDrawStart() {console.log('触发抽奖按钮')if (this.prizeing) returnthis.prizeing = truethis.tryLotteryDraw()},// 尝试发起抽奖tryLotteryDraw() {this.$http.post('/api/turntable/lottery').then(res=>{if(res.code == 1){this.freeNum--this.prizeList.forEach((item,index)=>{if(item.prizeId == res.data.prize_id){this.prizeIndex = index; // 中奖的数据下标}})console.log('本次抽中奖品 =>', this.prizeList[this.prizeIndex].prizeName)}})},// 本次抽奖结束handleDrawEnd() {console.log('旋转结束,执行拿到结果后到逻辑')// 旋转结束后,开始处理拿到结果后的逻辑let prizeName = this.prizeList[this.prizeIndex].namelet tipContent = ''if (prizeName === '谢谢参与') {tipContent = '很遗憾,没有中奖,请再接再厉!'} else {tipContent = `恭喜您,获得 ${prizeName}`}uni.showModal({content: tipContent,showCancel: false,complete: () => {this.prizeing = false}})},// 抽奖转盘绘制完成handleDrawFinish(res) {console.log('抽奖转盘绘制完成', res)if (res.ok) {// 计算结束绘制的时间if (console.timeEnd) {console.timeEnd('绘制转盘用时')}}let stoTimer = setTimeout(() => {stoTimer = nulluni.hideLoading()uni.showToast({title: res.msg,mask: true,icon: 'none'})}, 50)},submit(){if (this.freeNum > 0) {this.handleDrawStart()} else {this.$toast('抽奖次数已用完')}},},}
</script><style lang="scss" scoped>.index {min-height: 100vh;background: url('../../static/img/153.png')no-repeat left top #D8231C;background-size:750rpx 1334rpx ;.navRight{width: 144rpx;height: 46rpx;background: rgba(0,0,0,0.1);border-radius: 40rpx 0rpx 0rpx 40rpx;padding-left: 20rpx;display: flex;align-items: center;uni-text{font-size: 24rpx;color: #fff;}uni-image{width: 10rpx;height: 17rpx;margin-left: 4rpx;}}.banner{display: block;width: 586rpx;height: 93rpx;margin: 20rpx auto 40rpx;}.title{text-align: center;font-size: 48rpx;font-weight: bold;color: #fff;margin-bottom: 20rpx;}.btn{width: 596rpx;height: 120rpx;background: url('../../static/img/154.png')no-repeat center;background-size: 596rpx 120rpx;margin: 40rpx auto 35rpx;font-size: 40rpx;color: #BF3100;font-weight: bold;}.tips{padding: 30rpx 30rpx;.til{font-size: 28rpx;color: #fff;margin-bottom: 30rpx;}.text{line-height: 1.6;margin-bottom: 10rpx;font-size: 26rpx;color: #fff;}}}
</style>

这篇关于uniapp:幸运大转盘demo的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/200760

相关文章

uniapp设置微信小程序的交互反馈

链接:uni.showToast(OBJECT) | uni-app官网 (dcloud.net.cn) 设置操作成功的弹窗: title是我们弹窗提示的文字 showToast是我们在加载的时候进入就会弹出的提示。 2.设置失败的提示窗口和标签 icon:'error'是设置我们失败的logo 设置的文字上限是7个文字,如果需要设置的提示文字过长就需要设置icon并给

基于SpringBoot的宠物服务系统+uniapp小程序+LW参考示例

系列文章目录 1.基于SSM的洗衣房管理系统+原生微信小程序+LW参考示例 2.基于SpringBoot的宠物摄影网站管理系统+LW参考示例 3.基于SpringBoot+Vue的企业人事管理系统+LW参考示例 4.基于SSM的高校实验室管理系统+LW参考示例 5.基于SpringBoot的二手数码回收系统+原生微信小程序+LW参考示例 6.基于SSM的民宿预订管理系统+LW参考示例 7.基于

linux 内核提权总结(demo+exp分析) -- 任意读写(四)

hijack_modprobe_path篇 本文转自网络文章,内容均为非盈利,版权归原作者所有。 转载此文章仅为个人收藏,分享知识,如有侵权,马上删除。 原文作者:jmpcall 专栏地址:https://zhuanlan.kanxue.com/user-815036.htm     原理同hijack_prctl, 当用户执行错误格式的elf文件时内核调用call_usermod

linux 内核提权总结(demo+exp分析) -- 任意读写(三)

hijack_prctl篇 本文转自网络文章,内容均为非盈利,版权归原作者所有。 转载此文章仅为个人收藏,分享知识,如有侵权,马上删除。 原文作者:jmpcall 专栏地址:https://zhuanlan.kanxue.com/user-815036.htm   prctl函数: 用户态函数,可用于定制进程参数,非常适合和内核进行交互 用户态执行prctl函数后触发prctl系统

linux 内核提权总结(demo+exp分析) -- 任意读写(二)

hijack_vdso篇 本文转自网络文章,内容均为非盈利,版权归原作者所有。 转载此文章仅为个人收藏,分享知识,如有侵权,马上删除。 原文作者:jmpcall 专栏地址:https://zhuanlan.kanxue.com/user-815036.htm     vdso: 内核实现的一个动态库,存在于内核,然后映射到用户态空间,可由用户态直接调用 内核中的vdso如果被修改

linux 内核提权总结(demo+exp分析) -- 任意读写(一)

cred篇 本文转自网络文章,内容均为非盈利,版权归原作者所有。 转载此文章仅为个人收藏,分享知识,如有侵权,马上删除。 原文作者:jmpcall 专栏地址:https://zhuanlan.kanxue.com/user-815036.htm   每个线程在内核中都对应一个线程结构块thread_infothread_info中存在task_struct类型结构体 struct t

linux 内核提权总结(demo+exp分析) -- ROP(二)

ret2usr CR4篇 本文转自网络文章,内容均为非盈利,版权归原作者所有。 转载此文章仅为个人收藏,分享知识,如有侵权,马上删除。 原文作者:jmpcall 专栏地址:https://zhuanlan.kanxue.com/user-815036.htm   smep: smep是内核的一种保护措施, 使得内核不可执行用户态代码 内核通过CR4寄存器的第20位来控制smep,

linux 内核提权总结(demo+exp分析) -- ROP(一)

基础ROP篇(linux 5.0.21) 本文转自网络文章,内容均为非盈利,版权归原作者所有。 转载此文章仅为个人收藏,分享知识,如有侵权,马上删除。 原文作者:jmpcall 专栏地址:https://zhuanlan.kanxue.com/user-815036.htm   内核提权与用户态攻击的区别 攻击流程 用户态攻击: 执行 system("/bin/sh") 获得shel

基于springboot+vue+uniapp的“共享书角”图书借还管理系统小程序

开发语言:Java框架:springboot+uniappJDK版本:JDK1.8服务器:tomcat7数据库:mysql 5.7(一定要5.7版本)数据库工具:Navicat11开发软件:eclipse/myeclipse/ideaMaven包:Maven3.3.9 系统展示 后台登录界面 管理员功能界面 出借者管理 图书信息管理 图书归还管理 出租收入管理

uniapp小程序下载缓存服务器上的图片

1. 使用uni.downloadFile,但是注意下载图片的地址里的域名,需要在微信公众平台里面的downloadFile合法域名进行配置。 export default function downloadAndCacheImage(imageUrl, name) {return new Promise((resolve, reject) => {console.log("imageUrl",