uniapp小程序砸金蛋抽奖

砸之前是金蛋png图片，点击砸完之后切换砸金蛋动效gif图片；

当前代码封装为砸金蛋的组件；

vue代码： 

<template><view class="page" v-if="merchantInfo.cdn_static"><image class="bg" :src="merchantInfo.cdn_static +'statistics/luckDrawImg/smashGoldenEggs/page_bg.png'" mode="aspectFill"></image><view class="content"><view class="logo"><image :src="merchantInfo.logo" mode="heightFix"></image></view><view class="title"><image :src="merchantInfo.cdn_static +'statistics/luckDrawImg/smashGoldenEggs/title.png'" mode="heightFix"></image></view><view class="notification"><image :src="merchantInfo.cdn_static +'statistics/luckDrawImg/smashGoldenEggs/notification.png'" mode="heightFix"></image><text>欢乐砸金蛋，一起瓜分好礼</text></view><view class="box"><view class="eggs"><image class="egg" v-for="(item,index) in eggList" :key="index" :src="merchantInfo.cdn_static + 'statistics/luckDrawImg/smashGoldenEggs/'+ item.eggUrl" @click="startPlay(index)"></image></view><view class="count"><image :src="merchantInfo.cdn_static +'statistics/luckDrawImg/smashGoldenEggs/count.png'"></image><view class="tip">您今天还有<text>{{total}}</text>次抽奖机会</view></view><view class="btns"><view class="btn" @click="rule_show=true"><image :src="merchantInfo.cdn_static +'statistics/luckDrawImg/smashGoldenEggs/rule.png'"></image><text>活动规则</text></view><view class="btn" @click="getResult()"><image :src="merchantInfo.cdn_static +'statistics/luckDrawImg/smashGoldenEggs/prize.png'"></image><text>我的奖品</text></view></view></view></view><view class="win" v-if="rule_show"><scroll-view scroll-y class="win_box .win_box_bg"><mp-html :content="luckDrawInfo.rule" /></scroll-view><text class="iconfont iconcolseIcon theme-font-white" @click="rule_show=false"></text></view><view class="win" v-if="result_show"><view class="win_box1"><image class="win_bg" :src="merchantInfo.cdn_static +'statistics/luckDrawImg/result_bg.png'" mode=""></image><view class="win_content"><view class="win_tips theme-font-white">{{currentPrize.desc}}</view><view class="win_title">{{currentPrize.title}}</view><view class="win_btn" @click="choiseAddress()">{{currentPrize.is_address==1?'选择地址':'确定'}}</view></view></view></view><view class="win" v-if="prize_show"><view class="win_tit theme-font-white">我的奖品</view><view class="win_box2"><view class="items"><view class="left i_title">奖品</view><view class="right i_title">中奖时间</view></view><scroll-view scroll-y class="list"><view class="item" v-for="(item,index) in list" :key="index"><view class="left">{{item.lottery_prize_title}}</view><view class="right" v-if="item.is_address==1&&!item.address_id"><view class="r_btn"  @click="choiseAddress1(item)">去领奖</view></view><view class="right" v-else>{{item.created_time}}</view></view></scroll-view></view><text class="iconfont iconcolseIcon theme-font-white" @click="prize_show=false"></text></view></view></template><script>import { luckDrawInfo } from '@/api/luckDraw.js';import colors from '@/mixins/color';export default {mixins: [colors],data() {return {//https://cdn.dev.scrm.juplus.cn/InQLzDLoAl2S9LyNJUXQ45gpA.pngmask: true,wtf:true,luckDrawInfo: {},rule_show:false,result_show:false,prize_show:false,total:0,currentPrize:{},list:[],id: "",eggList: []}},props: {userId: {type: [Number,String]},type:{type: [Number,String]}},//渲染完了mounted() {this.id = this.userId;this.setEggList(); this.init();},methods: {/*** 设置金蛋数据*/setEggList() {this.eggList = [];for (let i = 0; i < 3; i++) {this.eggList.push({eggUrl: `goldEgg.png`})}},init(){if(this.userInfo){this.getInfo()}else{setTimeout(()=>{this.init()},500)}},getInfo(){luckDrawInfo.getDetail({id:this.id}).then(res => {this.luckDrawInfo=res.datathis.total=res.data.my_can_numthis.action('lottery',this.id,0,2,this.luckDrawInfo.title,'','lottery')})},choiseAddress(){this.currentPrize.is_address==1?uni.navigateTo({url:'/pages/address/address'}):''this.result_show=false},choiseAddress1(data){this.currentPrize=datauni.navigateTo({url:'/pages/address/address'})this.prize_show=false},setAddress(id){luckDrawInfo.setAddress({address_id:id,history_id:this.currentPrize.history_id||this.currentPrize.id}).then(res => {uni.showToast({title:"地址设置成功",icon:'none'})})},getResult(){if(!this.wtf){return false}luckDrawInfo.getResult({lottery_id:this.id}).then(res => {this.list=res.data.datathis.prize_show=true})},// 点击开始,请求接口抽奖startPlay(index) {if(this.luckDrawInfo.is_register==1&&!this.userInfo.type){uni.navigateTo({url:'/pages/login/login'})return false}if(this.luckDrawInfo.is_form==1&&this.luckDrawInfo.user_form_count==0){uni.navigateTo({url:'/pages/form/form?id='+this.luckDrawInfo.form_id+'&type_id=' + this.id + '&type=lottery'})return false}if(!this.wtf){return false}// 活动未开始或活动已结束let startTimeMs = new Date(this.luckDrawInfo.start_time).getTime();let endTimeMs = new Date(this.luckDrawInfo.end_time).getTime();let nowTimeMs = new Date().getTime();if (nowTimeMs < startTimeMs) {uni.showToast({icon: "none",title: "活动未开始"})return false;}if (nowTimeMs > endTimeMs) {uni.showToast({icon: "none",title: "活动已结束"})return false;}this.mask = false;this.wtf = false;luckDrawInfo.run({id:this.id}).then(res => {this.currentPrize = res.data;this.total = res.data.row_lottery_new.my_can_num;this.eggList[index].eggUrl = `breakOpenGoldEgg.gif`;setTimeout(()=>{this.eggList[index].eggUrl = `goldEgg.png`;this.result_show = true;this.wtf = true;},2000)}).catch(err => {this.wtf = true;});}}}
</script><style scoped lang="scss">@import 'index.scss';/**/
</style>

scss代码：


.page{width: 750rpx;height: 100vh;position: relative;
}.bg{width: 750rpx;height: 100vh;
}.content{width: 750rpx;min-height: 100vh;height: 1448rpx;position: absolute;top: 0;left: 0;
}.logo{height: 60rpx;display: flex;justify-content: center;margin-top: 90rpx;image{height: 60rpx;}
}.title{height: 194rpx;display: flex;justify-content: center;margin-top: 20rpx;image{height: 194rpx;}
}.notification{margin-top: 170rpx;height: 40rpx;display: flex;justify-content: center;align-items: center;image{height: 32rpx;margin-right: 16rpx;}text{font-size: 28rpx;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #FFFFFF;}
}.box{width: 680rpx;height: 360rpx;margin: 0 auto;margin-top: 160rpx;.egg {width: 220rpx;height: 300rpx;margin-top: 80rpx;}.egg:first-of-type{margin-left: 20rpx;}.count{display: flex;justify-content: center;margin-top: 14rpx;position: relative;image{width: 424rpx;height: 108rpx;}.tip{position: absolute;top: 50%;transform: translateY(-50%);font-size: 28rpx;font-family: PingFangSC-Medium, PingFang SC;font-weight: 500;color: #FFFFFF;text{color: #FF9611;}} }.btns{display: flex;align-items: center;justify-content: space-between;margin-top: 58rpx;}.btn{width: 292rpx;height: 116rpx;position: relative;image{width: 100%;height: 100%;}text{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);font-size: 36rpx;font-family: PingFangSC-Medium, PingFang SC;font-weight: 500;color: #FFFFFF;}}}.win{width: 750rpx;height: 100vh;background: rgba(0, 0, 0, 0.8);position: fixed;top: 0;left: 0;z-index: 2;display: flex;flex-direction: column;align-items: center;justify-content: center;
}.win_box{width: 662rpx;height: 60%;padding: 40rpx;box-sizing: border-box;border-radius: 24rpx;
}.win_box_bg{background: #FFCE2B;
}.bg3{background: #C3E5FE;
}.iconcolseIcon{font-size: 58rpx;margin-top: 98rpx;
}.win_box1{width: 630rpx;height: 922rpx;position: relative;
}.win_bg{width: 630rpx;height: 922rpx;
}.win_content{width: 630rpx;height: 922rpx;position: absolute;left: 0;top: 0;display: flex;flex-direction: column;align-items: center;
}.win_tips{font-size: 48rpx;font-family: SourceHanSansSC-Medium, SourceHanSansSC;font-weight: bold;margin-top: 290rpx;
}.win_title{font-size: 48rpx;font-family: SourceHanSansSC-Medium, SourceHanSansSC;font-weight: bold;color: #FE6631;margin: 170rpx 0;
}.win_btn{width: 280rpx;height: 80rpx;line-height: 80rpx;text-align: center;background: #FFE047;border-radius: 46rpx;font-size: 32rpx;font-family: SourceHanSansSC-Medium, SourceHanSansSC;font-weight: bold;color: #13112C;
}.win_tit{font-size: 48rpx;font-family: SourceHanSansSC-Medium, SourceHanSansSC;font-weight: bold;margin-bottom: 32rpx;
}.win_box2{width: 662rpx;height: 900rpx;background: #FFFFFF;border-radius: 24rpx;display: flex;flex-direction: column;
}.items{width: 662rpx;height: 108rpx;background: #C3E5FE;border-radius: 24rpx 24rpx 0rpx 0rpx;display: flex;align-items: center;flex-shrink:0
}.left,.right{width: 50%;text-align: center;font-family: SourceHanSansSC-Medium, SourceHanSansSC;font-weight: bold;
}.i_title{font-size: 36rpx;
}.list{height: 792rpx;padding-bottom: 20rpx;overflow: hidden;
}.item{width: 662rpx;height: 88rpx;display: flex;align-items: center;justify-content: space-around;
}.item:nth-child(2n){background-color: #F4F4F4;
}.r_btn{width: 160rpx;height: 60rpx;line-height: 60rpx;text-align: center;background: #FFC659;border-radius: 46rpx;font-family: SourceHanSansSC-Medium, SourceHanSansSC;font-weight: bold;font-size: 32rpx;margin:0 auto;
}

效果:

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/129417.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Jmeter只能做性能测试吗？

Jmeter只能做性能测试吗？

Jmeter除了可以性能测试&#xff0c;还能做接口测试 1、Jmeter和Fiddler&#xff0c;Postman有什么区别? Fiddler&#xff1a;虽然有接口测试功能&#xff0c;很少用来做接口测试。 一般用Fiddle来做抓包和异常测试&#xff0c;辅助接口测试。Postman&#xff1a; 是接口调试…
阅读更多...
利用maven的dependency插件分析工程的依赖

利用maven的dependency插件分析工程的依赖

dependency:analyze https://maven.apache.org/plugins/maven-dependency-plugin/analyze-mojo.html 分析项目的依赖&#xff0c;确定哪些&#xff1a;用了并且声明了、用了但没有声明、没有使用但声明了。 dependency:analyze可以单独使用&#xff0c;所以它总是会执行test-…
阅读更多...
浅谈开口互感器在越南美的工业云系统中的应用

浅谈开口互感器在越南美的工业云系统中的应用

摘 要&#xff1a;分析低压开口式电流互感器的原理&#xff0c;结合工程实例分析开口电流互感器在低压配电系统中&#xff0c;主要是改造项目中的应用及施工细节&#xff0c;为用户快速实现智能配电提供解决方案&#xff0c;该方案具有成本低、投资少、安装接线简便等优点&…
阅读更多...
数据库存储引擎和锁

数据库存储引擎和锁

存储引擎&#xff1a; mysal当中数据用各种不同的技术存储在文件中&#xff0c;每一种技术都使用不同的存储机制&#xff0c;索引技巧&#xff0c;锁定水平以及最终提供的不同功能和能力&#xff0c;这些就是我们说的存储引擎。 功能&#xff1a; 1、mysql将数据存储在文件系…
阅读更多...
JavaScript基础知识点速通

JavaScript基础知识点速通

0 前言 本文是近期我学习JavaScript网课的笔记&#xff0c;一是方便自己速查回忆&#xff0c;二是希望帮到同样有需求的朋友们。 1 介绍 1.1 基本情况 JavaScript是一种编程语言&#xff0c;运行在客户端&#xff08;浏览器&#xff09;上&#xff0c;实现人机交互效果&…
阅读更多...
面试知识储备-Vue3篇

面试知识储备-Vue3篇

1.ref和reactive Vue3为什么推荐使用ref而不是reactive ref: 将内部值包装在特殊对象中&#xff0c;是内部值具有响应性 reactive使对象本身具有响应性 若我们将同样的函数定义为一个方法而不是计算属性&#xff0c;两种方式在结果上确实是完全相同的&#xff0c;然而&#xf…
阅读更多...
路由器基础（五）： OSPF原理与配置

路由器基础（五）： OSPF原理与配置

开放式最短路径优先 (Open Shortest Path First,OSPF) 是一个内部网关协议 (Interior Gateway Protocol,IGP),用于在单一自治系统(Autonomous System,AS) 内决策路由。OSPF 适合小型、中型、较大规模网络。OSPF 采用Dijkstra的最短路径优先算法 (Shortest Pat…
阅读更多...
explicit MainWindow(QWidget *parent=nullptr)

explicit MainWindow(QWidget *parent=nullptr)

阅读更多...
Java高级互联网架构师之路：垃圾回收器的介绍

Java高级互联网架构师之路：垃圾回收器的介绍

本文重点 从本文开始我们将开启垃圾回收器的介绍了，我们知道垃圾回收算法是逻辑改变，而垃圾回收器是具体的实现。我们前面介绍的垃圾回收器有7个，本文将在添加三个，但是这三个目前来看不是很常用，我们只了解一下，我们主要还是讲解这7个垃圾回收器。 十个垃圾回收器 目…
阅读更多...
nodejs+springboot+elementui+python的Sd球鞋销售平台的设计与实现-毕业设计

nodejs+springboot+elementui+python的Sd球鞋销售平台的设计与实现-毕业设计

此网站系统的开发方式和信息管理方式&#xff0c;借鉴前人设计的信息和研发。以网站商品信息为主&#xff0c;购物商品为核心功能来进行设计和研发&#xff0c;把网站信息和技术整合&#xff0c;开发出一套Sd球鞋销售平台。用目前现有的新技术进行系统开发&#xff0c;提供后台…
阅读更多...
HiveSQL中last_value函数的应用

HiveSQL中last_value函数的应用

一、背景 在以下数据中如何实现对每一个列按照更新时间取最新的非null值&#xff1f; 1 a a null 202301 202301 1 b b null null 202302 1 null c null null 202303 1 d null null null 202304如何实现…
阅读更多...
安装虚拟机后ifconfig不显示IP地址及设置静态IP地址ssh连接

安装虚拟机后ifconfig不显示IP地址及设置静态IP地址ssh连接

ifconfig不显示IP地址 可以看到ens160并没有显示IP地址&#xff0c;刚刚装好的虚拟机是很干净的&#xff0c;连网卡都没有&#xff0c;我们修改一个配置文件&#xff1a; vim /etc/sysconfig/network-scripts/ifcfg-ens160将文件中的onboot修改为yes&#xff0c;即启动时需不需…
阅读更多...
pytorch学习第五篇：NN与CNN代码实例

pytorch学习第五篇：NN与CNN代码实例

这篇文章详细介绍了全链接神经网络实现方法，以及卷积的实现方法。最后我们发现，卷积的实现方法与全链接大同小异，因为 torch 为我们做了很多工作，我们来看看这两个有什么区别。 我们使用 torch 框架来实现两种神经网络，来对图形进行分类。 NN 首先我们引入依赖包 impor…
阅读更多...
远程设备常用工具：向日葵、Todesk

远程设备常用工具：向日葵、Todesk

其实按理说远程工具例如向日葵、Todesk如果是计算机专业、计算机从业者是必须知道的一个东西&#xff0c;但是在大学期间身边知道的人是少之又少的。 向日葵、Todesk工具的优势&#xff1a;方便、快捷、速度快等等我就不过多阐述了 PS:现在我就是在学校用远程写这篇 很多时候…
阅读更多...
YOLO V1学习笔记

YOLO V1学习笔记

为什么要学YOLOV1_哔哩哔哩_bilibili 这个视频讲解的很好&#xff0c;建议在看这个之前看看卷积神经网络&#xff0c;会对卷积后的结果理解更加深刻一点。 一 背景 目标检测分为单阶段和两阶段模型。 之前的目标检测DPM、R-CNN、Fast-RCNN、Faster-RCNN都是双阶段模型&…
阅读更多...
ElasticSearch集群架构实战及其原理剖析

ElasticSearch集群架构实战及其原理剖析

ES集群架构 为什么要使用ES集群架构 分布式系统的可用性与扩展性&#xff1a; 高可用性 服务可用性&#xff1a;允许有节点停止服务&#xff1b;数据可用性&#xff1a;部分节点丢失&#xff0c;不会丢失数据&#xff1b; 可扩展性 请求量提升/数据的不断增长(将数据分布…
阅读更多...
用android studio调试react native中的原生代码(windows+android)

用android studio调试react native中的原生代码(windows+android)

要用Android Studio调试React Native原生代码&#xff0c; 1. 需要先在终端中运行react-native start命令启动React Native服务器。 2. 然后&#xff0c;在Android Studio中打开你的React Native项目&#xff08;\android\build.gradle&#xff09;&#xff0c;连接你的设备或…
阅读更多...
[极客大挑战 2019]LoveSQL 1

[极客大挑战 2019]LoveSQL 1

题目环境&#xff1a;判断注入类型是否为数字型注入 admin 1 回显结果 否 是否为字符型注入 admin 1 回显结果 是 判断注入手法类型 使用堆叠注入 采用密码参数进行注入 爆数据库1; show database();#回显结果 这里猜测注入语句某字段被过滤&#xff0c;或者是’;被过滤导致不能…
阅读更多...
linux jdk配置

linux jdk配置

1.下载jdk &#xff0c;以jdk1.8为例子 Java Downloads | Oracle JDK 8 Update Release Notes (oracle.com) 2.配置环境变量 1.下载相关jdk版本&#xff0c;执行以下命令安装jdk tar -zxvf jdk-8u144-linux-x64.tar.gz 2.编辑命令 vi /etc/profile 3.在最后加入下面配置 e…
阅读更多...
硬件测试（二）：波形质量

硬件测试（二）：波形质量

一、信号质量测试 信号在传输的过程中&#xff0c;一般不是标准的矩形波信号&#xff0c;信号质量测试即通过示波器测试单板硬件的数字信号和模拟信号的各项指标&#xff0c;包括电源、时钟、复位、CPU小系统、外部接口&#xff08;USB、网口、串口&#xff09;、逻辑芯片(CPLD…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023