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.rhkb.cn/news/179952.html

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

相关文章

【电路笔记】-相位差和相移

【电路笔记】-相位差和相移

相位差和相移 文章目录 相位差和相移1、概述2、相位差2.1 同频信号2.2 电流与电压信号2.3 相似频率的信号 3、干扰4、总结 当我们听歌曲时&#xff0c;我们将正弦声音波形感知为音乐。 它们的振幅告诉我们信号有多大&#xff0c;频率告诉我们声音是低音还是高音。 然而&#xf…
阅读更多...
超低价：阿里云双11服务器优惠价格表_87元一年起

超低价：阿里云双11服务器优惠价格表_87元一年起

2023阿里云双十一优惠活动已经开启了&#xff0c;轻量2核2G服务器3M带宽优惠价87元一年、2核4G4M带宽优惠价165元一年&#xff0c;云服务器ECS经济型e实例2核2G3M固定带宽优惠价格99元一年&#xff0c;还有2核4G、2核8G、4核8G、4核16G、8核32G等配置报价&#xff0c;云服务器e…
阅读更多...
FRI及相关SNARKs的Fiat-Shamir安全

FRI及相关SNARKs的Fiat-Shamir安全

1. 引言 本文主要参考&#xff1a; Alexander R. Block 2023年论文 Fiat-Shamir Security of FRI and Related SNARKsAlbert Garreta 2023年9月在ZK Summit 10上分享 ZK10: Fiat-Shamir security of FRI and related SNARKs - Albert Garreta (Nethermind) 评估参数用的Sage…
阅读更多...
OpenHarmony 入门——搭建OpenHarmony本地应用开发环境

OpenHarmony 入门——搭建OpenHarmony本地应用开发环境

文章大纲 引言一、应用开发工具下载SDK替换1、本地SDK目录查找2、OpenHarmony SDK编译3、SDK替换4、sdk node_modules依赖包下载5、验证 三、镜像烧写工具及指南1、下载烧录工具2、安装usb驱动3、rk3568镜像编译5、 镜像配置&烧录 引言 OpenHarmony是由开放原子开源基金会…
阅读更多...
uniapp写一个计算器用于记账（微信小程序，APP）

uniapp写一个计算器用于记账（微信小程序，APP）

提要&#xff1a;自己用uniapp写了一个记账小程序&#xff08;目前是小程序&#xff09;&#xff0c;写到计算器部分&#xff0c;在网上找了别人写的计算器&#xff0c;大多数逻辑都是最简单的&#xff0c;都不能满足一个记账计算器的基本逻辑。与其在网上找来找去&#xff0c;…
阅读更多...
[ASP]校无忧在线报名系统 v2.1

[ASP]校无忧在线报名系统 v2.1

校无忧在线报名系统为了满足各地不同的报名人员的需求&#xff0c;为提供更为高效、方便、快捷的报名条件&#xff0c;同时也为减轻管理人员的工作难度&#xff1b;更为协调报名人员与管理人员的关系&#xff0c;快速提高了报名人员与管理人员的工作效率应运而生。系统适用于政…
阅读更多...
java的线程池

java的线程池

线程池 可以做什么怎么创建 先了解下线程的生命周期 解释: 新建:线程创建但未被启动可运行:线程处于可运行的状态,当该线程有cpu的时间片后就可以执行睡眠:线程进入计时等待,等待一段指定的时间,可以通过wait()方法,sleep方法,join()方法等方式等待:线程进入等待模式,直到其…
阅读更多...
【Kubernetes】初识k8s--扫盲阶段

【Kubernetes】初识k8s--扫盲阶段

文章目录 1、k8s概述2、为什么要有k8s2.1 回顾以往的应用部署方式2.2 容器具有的优势 3、k8s能带来什么 1、k8s概述 kubernetes是一个可移植、可扩展的开源平台&#xff0c;用于管理 容器化 的工作负载和服务&#xff0c;可促进申明式配置和自动化。kubernetes拥有一个庞大且快…
阅读更多...
【算法】背包问题——01背包

【算法】背包问题——01背包

题目 有 N 件物品和一个容量是 V 的背包。每件物品只能使用一次。 第 i 件物品的体积是 vi&#xff0c;价值是 wi。 求解将哪些物品装入背包&#xff0c;可使这些物品的总体积不超过背包容量&#xff0c;且总价值最大。 输出最大价值。 输入格式 第一行两个整数&#xff0…
阅读更多...
HTTP/HTTPS、SSL/TLS、WS/WSS 都是什么？

HTTP/HTTPS、SSL/TLS、WS/WSS 都是什么？

有同学问我&#xff0c;HTTP/HTTPS、SSL/TLS、WS/WSS 这都是些什么&#xff1f;那我们就先从概念说起&#xff1a; HTTP 是超文本传输协议&#xff0c;信息是通过明文传输。HTTPS 是在 HTTP 的基础上信息通过加密后再传输。SSL 是实现 HTTPS 信息传输加密的算法。TLS 是 SSL 的…
阅读更多...
Redis学习系统（持续更新中）

Redis学习系统（持续更新中）

RedisExample 课程介绍 目标是提供一个高效、可靠的学习和实践Redis的环境。我们将通过搭建Redis集群、实现缓存数据的持久化存储、制定缓存数据的淘汰策略以及同步缓存数据等步骤来深入了解和学习Redis的特性和功能。通过这个项目&#xff0c;你可以掌握Redis的核心概念和技…
阅读更多...
可视化协作软件有哪些？这10款神器助力团队合作！

可视化协作软件有哪些？这10款神器助力团队合作！

可视化协作已经成为一个时下热门词汇&#xff0c;问题是对其并没有一个清晰的定义。有人认为它代表了一个云端环境&#xff0c;具有能够使办公室、混合办公和远程员工一起工作的功能。其他人则认为可视化协作不过是数字化白板而已。 随着这个术语变得更加流行&#xff0c;许多…
阅读更多...
算法通关村第五关-白银挑战队列经典问题

算法通关村第五关-白银挑战队列经典问题

大家好我是苏麟 , 今天带来几道经典小题 . 大纲 两数之和 两数之和 相信大家对这道题还是很眼熟的 , 打开LeetCode第一道题就是它 , 对它可真的又爱又恨 , 很多新手朋友们想刷LeetCode但又不知道从哪开始就打开了第一题 , 结果就对算法失去了信心 . 这道题找对方法还是很容易…
阅读更多...
OpenShift - 利用容器的特权配置实现对OpenShift攻击

OpenShift - 利用容器的特权配置实现对OpenShift攻击

《OpenShift / RHEL / DevSecOps 汇总目录》 说明&#xff1a;本文已经在 OpenShift 4.13 的环境中验证 本文是《容器安全 - 利用容器的特权配置实现对Kubernetes攻击》的后续篇&#xff0c;来介绍 在 OpenShift 环境中的容器特权配置和攻击过程和 Kubernetes 环境的差异。 文…
阅读更多...
macOS 安装brew

macOS 安装brew

参考链接&#xff1a; https://mirrors4.tuna.tsinghua.edu.cn/help/homebrew/ https://www.yii666.com/blog/429332.html 安装中科大源的&#xff1a; https://zhuanlan.zhihu.com/p/470873649
阅读更多...
cplex基础入门（三）之运行调试debug

cplex基础入门（三）之运行调试debug

聊聊题外话&#xff0c;你用cplex进行代码编写&#xff0c;其实你也可以相当于在编程一样&#xff0c;那对于编程&#xff0c;有一项非常核心的能力就是代码调试以及debug的能力&#xff0c;那你运行以及编写cplex也是一样&#xff0c;同样需要你会使用调试的方式&#xff0c;来…
阅读更多...
前端学习之webpack的使用

前端学习之webpack的使用

概述 webpack是一个流行的前端项目构建工具&#xff08;打包工具&#xff09;&#xff0c;可以解决当前web开发中所面临的问题。 webpack提供了友好的模块化支持&#xff0c;以及代码压缩混淆、处理js兼容问题、性能优化等强大的功能&#xff0c;从而让程序员把工作重心放到具…
阅读更多...
mysql---索引

mysql---索引

概要 索引&#xff1a;排序的列表&#xff0c;列表当中存储的是索引的值和包含这个值的数据所在的行的物理地址 作用&#xff1a;加快查找速度 注&#xff1a;索引要在创建表时尽量创建完全&#xff0c;后期添加影响变动大。 索引也需要占用磁盘空间&#xff0c;innodb表数据…
阅读更多...
常用的Linux远程桌面配置方法

常用的Linux远程桌面配置方法

TigerVNC 是 VNC&#xff08;虚拟网络计算&#xff09;的高性能、平台中立的实现&#xff0c;VNC 是一种客户端/服务器应用程序&#xff0c;允许用户在远程计算机上启动图形应用程序并与之交互。 TigerVNC 提供运行 3D 和视频应用程序所需的性能水平&#xff0c;并尝试在其支持…
阅读更多...
【MongoDB】Windows 安装MongoDB 6.0

【MongoDB】Windows 安装MongoDB 6.0

一、下载安装包 安装包下载地址https://www.mongodb.com/try/download/community这里我选择的是 二、解压并安装 1、解压 这里我将压缩包解压到了D盘&#xff0c;并重命名成了mongodb&#xff0c;解压后的目录如下&#xff1a; 2、创建配置文件 在D:\mongodb下新建conf目录…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023