uni-app,H5抽奖

<template><view class='lottery'><view class="lotteryTop">会员每日幸运抽奖</view><view class="roulette"><view class="surplus">剩余抽奖次数：{{surplus}}</view><view class="turntable" id="rotary_table"><view v-for="(item , index) in awards" :key="item.id" :class="['award' + index, { active: index == current }]" class="award"><image :src='item.images' mode='widthFix' class='image'></image><view class="mask" v-if="index == current"></view></view><view id="start-btn" class="" @click="start"><view class="luck"><view class="">立即</view><view class="">抽奖</view></view></view></view></view><view class="winningList">中奖名单</view></view>
</template><script>
export default {components: {},data() {return {surplus: 0,loadingPrize: true,awards: [],current: 1, // 当前索引值speed: 200, // 时间->速度diff: 15, // 基数award: {}, // 抽中的奖品time: 0, // 当前时间戳timer: null, // 定时器isPrize: false,records: [],};},onLoad(opt) {this.loadData();},//监听属性 类似于data概念computed: {},//监控data中的数据变化watch: {},//方法集合methods: {// 开始抽奖start() {if (this.isPrize) return;if (this.surplus <= 0) {uni.showModal({title: "抽奖提醒",content: "剩余抽奖次数为" + this.surplus + "次",success: function (res) {if (res.confirm) {} else if (res.cancel) {}},});return;}this.isPrize = true;this.getLottery();this.time = Date.now();this.speed = 200;this.diff = 12;},// 调接口获取奖品getLottery() {this.loadingPrize = true;this.http.get(getApp().globalData.prizeAction, {}).then((res) => {console.log(res, "===321==");this.award.name = res.data.title;this.award.id = res.data.prizeId;this.award.identification = res.data.identification;this.record = res.data;this.loadingPrize = false;this.move();}).catch((err) => {this.loadingPrize = false;this.isPrize = false;});},// 开始转动move() {this.timer = setTimeout(() => {this.current++;if (this.current > 7) {this.current = 0;}// 若抽中的奖品id存在，则开始减速转动if (this.award.id && (Date.now() - this.time) / 1000 > 2) {this.speed += this.diff; // 转动减速// 若转动时间超过4秒，并且奖品id等于小格子的奖品id，则停下来if ((Date.now() - this.time) / 1000 > 4 &&this.award.id == this.awards[this.current].id) {clearTimeout(this.timer);setTimeout(() => {this.surplus--;this.isPrize = false;this.records.push(this.record);console.log(this.award.id, "=====");uni.showModal({title: "中奖通知",content: `恭喜您中奖 “${this.award.name}”`,success: function (res) {if (res.confirm) {} else if (res.cancel) {}},});//   if (this.record.identification.indexOf("address") != -1) {//     //中奖实物奖品，需填写联系信息发货//     // this.handleShoppClose();//   }}, 0);return;}} else {// 若抽中的奖品不存在，则加速转动this.speed -= this.diff;}this.move();}, this.speed);},//抽奖次数loadData() {this.http.get(getApp().globalData.prizeSurplus, {}).then(({ data }) => {this.surplus = data;});this.http.get(getApp().globalData.prizeAll, {}).then(({ data }) => {this.awards = data;console.log(data, "===123==");});},},created() {},mounted() {},
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.lottery {width: 100vw;height: 100vh;background: no-repeat top center/100%url(http://192.168.0.87/file/image/prize-back.png);
}
.lotteryTop {font-size: 52upx;color: #fff;text-align: center;padding: 100upx 0 40upx;
}
.roulette {width: 80vw;height: 90vw;margin: 0 auto;border: 1px solid #6255cc;background-color: rgba(54, 43, 170, 0.404);padding: 36upx;.surplus {color: #fff;font-size: 32upx;text-align: center;}.turntable {width: 100px;color: red;}
}
#rotary_table {width: 70vw;height: 70vw;position: relative;margin-top: 24upx;// background-color: antiquewhite;//background-image: url('../../assets/images/prize-back.png');.award {width: 23vw;height: 23vw;text-align: center;float: left;background-color: red;position: absolute;overflow: hidden;image {position: absolute;width: 23vw;top: 0;left: 0;height: 23vw;}.prize-title {z-index: 99;position: absolute;font-size: 28upx;text-align: center;background: #000000;opacity: 0.7;width: 318upx;bottom: 0;padding: 0 20upx;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;color: #e8d639;}&.active {.mask {width: 23vw;height: 23vw;position: absolute;border-radius: 10px;opacity: 0.8;background-color: #fff0bd;}}&.award0 {top: 0;left: 0;border-top-left-radius: 10upx;}&.award1 {top: 0upx;left: calc(1vw / 2 + 23vw);}&.award2 {top: 0;right: 0;border-top-right-radius: 10upx;}&.award3 {top: calc(1vw / 2 + 23vw);right: 0;}&.award4 {bottom: 0;right: 0;border-bottom-right-radius: 10upx;}&.award5 {bottom: 0;right: calc(1vw / 2 + 23vw);}&.award6 {bottom: 0;left: 0;border-bottom-left-radius: 10upx;}&.award7 {top: calc(1vw / 2 + 23vw);left: 0;}}#start-btn {position: absolute;width: 23vw;height: 23vw;top: calc(1vw / 2 + 23vw);left: calc(1vw / 2 + 23vw);text-align: center;border-radius: calc(23vw / 2);background: #6c5ab7;color: #fff;//background: #000;cursor: pointer;opacity: 1;display: flex;justify-content: center;align-items: center;// background-image: url('../../assets/images/lottery1.png');.luck {width: 19vw;height: 19vw;background-image: linear-gradient(to bottom right, #f6d0b0, #ef2e26);border-radius: calc(19vw / 2);display: flex;flex-direction: column;justify-content: center;align-items: center;font-weight: 700;font-size: 38upx;}.prize-title {z-index: 99;position: absolute;font-size: 28upx;font-weight: bold;text-align: center;width: 318upx;bottom: 16upx;padding: 0 20upx;color: #ffffff;span {color: #ffffff;}}}#start-btn:hover {opacity: 0.9;}
}
</style>

背景图和请求接口根据情况修改,

抽中是后端返回的

uni-app,H5抽奖相关推荐

uni App+H5 实现人脸识别
uni App+H5 实现人脸识别通过h5的视频video管理设备摄像头(不要关),在打开视频摄像时快照截取人脸照片传送到后台通过API接口调用百度人脸识别结果并通过返回数据解析自己业务需求. 1. ...
uni app(H5)中软键盘弹出,固定定位绝对定位元素位置发生错乱
一.问题如下最近用uni app写项目,发现H5软键盘弹起,导致我固定定位的按钮被顶了上去,如图二.解决方法 1.让其在输入框获取焦点时隐藏百度了许多,有让输入框获取焦点时让按钮隐藏的方法,失去 ...
uni.app H5(微信公众号定位) uni.getLocation
最近在开发公众号,由于之前经常使用uni,app写APP,索性就用uni.app来开发公众号了, 不过也遇到了一个问题,就是在公众号的首页要获取用户的定位.我看了看官网的API 有个uni.getLo ...
省钱兄同城跑腿小程序源码uniapp前端模版源码（小程序+APP+H5）
开源省钱兄同城跑腿源码,目前只开源用户端V2版本部分核心模块源码提供学习研究使用uniapp技术,提供学习使用不可商业适配支持公众号+APP+H5+小程序,使用Hbuilder导入即可运行 #功能 ...
uni app 视频播放功能
视频播放功能,需求:编译成纯h5网页,运行在任意容器里,如浏览器.安卓原生和iOS等媒体组件video 首先使用video组件,然后高度需要自己设置 uni.createVideoContext 官 ...
uni app 开发微信小程序及上线体验
uni app 开发微信小程序及上线体验项目创建及微信小程序AppId的申请本次开发的是电商类的微信小程序,这里用到的是HBuilderX这个编辑器.之前用的Visual Studio Code ...
uni app实现WIFI功能(只支持安卓APP)
uni app实现WIFI功能一.前言二.使用 uni-WIFI 三.使用h5+ api 一.前言最近需要在uniapp上实现WiFi功能,将个人的研究结果记录如下(都只支持安卓APP) 使用 ...
切换 uniapp_万能前端框架uni app初探03：底部导航开发
前言本节我们使用uni app的底部导航功能,点击不同tab会显示不同页面,这个功能在实际项目开发中几乎是必备的. 一.基础知识 1.tabBar 如果应用是一个多 tab 应用,可以通过 tabB ...
uni app map 地图漂浮问题及方案
uni app map 地图漂浮问题及方案文章页有图片导致的问题,图片没加载出来,导致文章内容高度不固定,如果图片没加载出来,高度就是0,如果此时开始加载map,那么map就在那里加载,map原生 ...
HBuilder X ——Uni app 学习笔记（一）
HBuilder X --Uni app 学习笔记(一) 1.pages.json配置 *pages数组中第一项表示应用启动页,数组中其他项为项目中所有页面路径. enablePullDownRefr ...

uni-app,H5抽奖

uni-app,H5抽奖相关推荐

最新文章

热门文章