uniapp 九宫格抽奖

<template><view class="container"><view class="navleft" @click="navback"><image src="@/static/cj/left.png" mode=""></image></view><view class="navtitle">抽奖</view><view class="bg"><image src="https://szcc.test03.qcw800.com/uploads/images/20240708/kIKHgR1pGuYUwq0D9AhTXcl9ufcKmwsVuXn0lKUp.png" mode=""></image></view><view class="title">幸运大抽奖</view><view class="cont"><viewclass="cont_item":class="{ 'no-margin': index % 3 === 2, highlight: index === highlightIndex }"v-for="(item, index) in drawList":key="index"@click="changeCont(item)"><view class="cont_img" v-if="item.text !== '抽奖'"><image src="@/static/cj/jp.png" mode=""></image></view><view class="cont_cj" v-if="item.text == '抽奖'">{{ item.text }}</view><view class="cont_txt" v-if="item.text !== '抽奖'">{{ item.title }}</view></view></view><view class="sycj"><view class="sycj_txt">剩余抽奖次数：{{ luck }}</view></view><view class="foot"><view class="foot_title"><view class="foot_left"></view><view class="foot_title">活动规则</view><view class="foot_right"></view></view><view class="foot_txt">活动最终解释权归平台所有，活动最终解释权归平台所有，活动最终解释权归平台所有活动最终解释权归平台所有，活动最终解释权归平台所有，活动最终解释权归平台</view></view><view><!-- 弹窗 --><uni-popup ref="popup" background-color="#fff"><view class="popup-con" v-if="result.title !== '谢谢惠顾'"><view class="con_title">提示</view><view class="con_text">恭喜您本次抽中{{ result.title }},是否需要快递邮寄？</view><view class="title_btns"><view class="title_err" @click="popupClose">不需要</view><view class="title_res" @click="goAddress">需要</view></view></view><view class="popup-con" v-else><view class="con_title">提示</view><view class="con_text">您本次抽中谢谢惠顾,继续努力</view><view class="conbut" @click="popupClose">确定</view><!-- <view class="title_btns"><view class="title_err" @click="popupClose">不需要</view><view class="title_res" @click="goAddress">需要</view></view> --></view></uni-popup></view></view>
</template><script>
import { get, post } from '@/utils/request.js';
export default {data() {return {luck: '', //抽奖次数drawList: '', //抽奖列表isAnimating: false,currentIndex: null, // 用于追踪当前正在高亮的列表项的索引isLuckyDrawAnimating: false,winningItemId: null, // 存储从服务器返回的中奖IDhighlightIndex: null, // 初始化 highlightIndexresult: '' //中奖结果};},created() {this.getDrawList();},onShow() {this.getDrawNum();},// 方法部分methods: {async getDrawNum() {const res = await get('/api/user/luckDrawNum', { api_token: uni.getStorageSync('api_token') });console.log('抽奖次数', res.data.num);this.luck = res.data.num;},async getDrawList() {const res = await get('/api/public/luckDrawList');console.log(res);this.drawList = res.data;// 抽奖按钮配置const drawButton = {text: '抽奖',image: null};// 在第5项位置插入抽奖按钮if (this.drawList.length >= 5) {this.drawList.splice(4, 0, drawButton);} else {// 如果当前列表长度不足5项，可以考虑直接添加到末尾或不做任何操作this.drawList.push(drawButton);}},navback() {uni.navigateBack();},popupOpen() {this.$refs.popup.open();},popupClose() {this.$refs.popup.close();this.getDrawNum();},goAddress() {this.$refs.popup.close();this.getDrawNum();uni.navigateTo({url: '/pages/draw/address'});},changeCont(item) {if (item.text === '抽奖') {if (this.luck > 0) {this.luckyDraw();} else {uni.showToast({title: '没有抽奖次数了',icon: 'none',duration: 2000});}}},startLuckyDrawAnimation() {this.highlightIndex = 0; // 在这里重置 highlightIndexthis.isLuckyDrawAnimating = true;this.cycleHighlight();},cycleHighlight() {if (this.isLuckyDrawAnimating && this.highlightIndex < this.drawList.length) {if (this.drawList[this.highlightIndex].text === '抽奖') {// 直接跳过抽奖按钮，不进行高亮this.highlightIndex++;// 使用立即执行的函数表达式确保在抽奖按钮跳过后，立即进行下一次高亮处理(() => {setTimeout(() => {this.cycleHighlight();}, 200);})();} else {// 应用高亮样式this.$nextTick(() => {// 更新highlightIndex之后再设置高亮，确保DOM更新完成setTimeout(() => {this.highlightIndex++;this.cycleHighlight();}, 200);});}} else {this.stopAtWinningItem();}},stopAtWinningItem() {if (this.winningItemId !== null) {this.highlightIndex = this.drawList.findIndex((item) => item.id === this.winningItemId);this.result = this.drawList.find((item) => item.id === this.winningItemId);console.log('执行', this.result);// 这里可以添加额外的中奖动画效果this.isLuckyDrawAnimating = false;//获取中奖的那一项数据this.popupOpen(); // 显示中奖弹窗}},luckyDraw() {this.startLuckyDrawAnimation();uni.request({url: 'https://szcc.test03.qcw800.com/api/user/LuckDraw',method: 'GET',data: { api_token: uni.getStorageSync('api_token') },success: (res) => {console.log(res); //{luck_id: "8", luck_draw_record_id: "4"} luck_draw_record_id是中奖idthis.winningItemId = res.data.data.luck_id;// this.winningItemId = '4';}});}}
};
</script><style lang="scss" scoped>
.highlight {box-shadow: 0 0 10rpx 5rpx rgba(255, 255, 0, 0.8) !important;
}
::v-deep .uni-popup__wrapper {width: 662rpx;height: 424rpx;background: #ffffff;border-radius: 16rpx;
}
.popup-con {.con_title {margin-top: 40rpx;font-size: 34rpx;font-family: PingFang SC, PingFang SC-Medium;font-weight: 500;text-align: center;color: #1d2129;letter-spacing: -0.44rpx;}.con_text {width: 540rpx;margin: 62rpx auto;font-size: 30rpx;font-family: PingFang SC, PingFang SC-Medium;font-weight: 500;text-align: center;color: #1b1b1b;line-height: 48rpx;}.conbut {margin: auto;width: 286rpx;height: 82rpx;background: linear-gradient(82deg, #d93624 13%, #f09072 80%);border-radius: 16rpx;text-align: center;line-height: 82rpx;color: #fff;}.title_btns {margin: auto;width: 602rpx;display: flex;justify-content: space-between;.title_err {width: 286rpx;height: 82rpx;background: #f6f7f9;border-radius: 16rpx;text-align: center;line-height: 82rpx;color: #666666;}.title_res {width: 286rpx;height: 82rpx;background: linear-gradient(82deg, #d93624 13%, #f09072 80%);border-radius: 16rpx;text-align: center;line-height: 82rpx;color: #ffffff;}}
}
.navleft {position: absolute;top: 108rpx;left: 24rpx;width: 48rpx;height: 48rpx;z-index: 2;image {width: 100%;height: 100%;}
}
.navtitle {z-index: 2;position: absolute;top: 108rpx;left: 342rpx;width: 68rpx;height: 48rpx;font-size: 34rpx;font-family: PingFang SC, PingFang SC-Medium;font-weight: 500;color: #ffffff;
}
.bg {position: relative;width: 750rpx;height: 1624rpx;image {width: 100%;height: 100%;}
}
.title {position: absolute;top: 194rpx;left: 126rpx;width: 496rpx;height: 140rpx;font-size: 90rpx;font-family: YouSheBiaoTiHei, YouSheBiaoTiHei-Regular;font-weight: 400;color: #fdf1b8;
}
.cont_cj {width: 148rpx;height: 148rpx;background: radial-gradient(#d94235, #e54f2c 55%, #eb7854);border-radius: 12rpx;box-shadow: 0rpx 6rpx 16rpx 0rpx rgba(237, 102, 60, 0.56);font-size: 48rpx;font-family: PingFang SC, PingFang SC-Medium;font-weight: 500;text-align: center;color: #fdf1b8;line-height: 148rpx;margin-right: 30rpx;
}.cont {position: absolute;top: 366rpx;left: 66rpx;background: url(https://szcc.test03.qcw800.com/uploads/images/20240709/POqESSmKSQmWtm5XekLxwZu9zI0bXIGuIXoEbC8V.png) center;width: 504rpx;height: 500rpx;background-size: 100% 100%;padding: 60rpx;display: flex;flex-wrap: wrap;.cont_item {width: 148rpx;height: 148rpx;background: url(https://szcc.test03.qcw800.com/uploads/images/20240709/yIVTR4jIGECShJpwQzOquyntD08ZgshWV2cPAOZK.png);background-size: 100% 100%;margin-right: 30rpx;&.no-margin {margin-right: 0;}.cont_img {width: 76rpx;height: 76rpx;margin: auto;image {margin-top: 24rpx;width: 100%;height: 100%;}}.cont_txt {margin-top: 24rpx;height: 32rpx;font-size: 22rpx;font-family: PingFang SC, PingFang SC-Medium;font-weight: 500;text-align: center;color: #fd9440;}}
}
.sycj {position: absolute;top: 1016rpx;left: 66rpx;width: 618rpx;height: 90rpx;background: url(https://szcc.test03.qcw800.com/uploads/images/20240709/d3MRq1bYG9Uy7hdLFvMkk7nvfM7z4jPFj5p97W8E.png) center;background-size: 100% 100%;.sycj_txt {margin-left: 34rpx;font-size: 30rpx;font-family: PingFang SC, PingFang SC-Semibold;font-weight: 600;text-align: left;line-height: 90rpx;color: #ffffff;}
}
.foot {position: absolute;top: 1136rpx;left: 66rpx;background-color: #fff;border-radius: 12rpx;width: 572rpx;height: 410rpx;padding: 24rpx 22rpx 0 24rpx;.foot_title {display: flex;align-items: center;justify-content: center;.foot_left {width: 114rpx;height: 6rpx;background: linear-gradient(270deg, #eb592b, rgba(240, 144, 114, 0));}.foot_title {margin: 0 24rpx;width: 160rpx;height: 56rpx;font-size: 40rpx;font-family: PingFang SC, PingFang SC-Semibold;font-weight: 600;text-align: left;color: #ed581d;}.foot_right {width: 114rpx;height: 6rpx;background: linear-gradient(90deg, #eb592b, rgba(240, 144, 114, 0));}}.foot_txt {margin-top: 22rpx;width: 572rpx;height: 256rpx;font-size: 26rpx;font-family: PingFang SC, PingFang SC-Regular;font-weight: 400;text-align: left;color: #333333;line-height: 44rpx;}
}
</style>

 

 

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

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

相关文章

SAP S4 销售组的定义和分配

SAP S4 销售组的定义和分配

spro-企业结构-定义-销售与分销-维护销售组 新增一个记录 spro-企业结构-分配-销售与分销-给销售办公室分配销售组
阅读更多...
JavaScript-map方法

JavaScript-map方法

map可以遍历数组处理数据&#xff0c;并返回新的数组 语法&#xff1a; ​const arr[元素1&#xff0c;元素2&#xff0c;元素3] const newarrarr.map(function(数组的元素,数组的索引)){return 新元素 } const arr[blue,red,green]const newarrarr.map(function(ele,index){co…
阅读更多...
应用案例 | 台积电为保证光罩运输质量选择MSR冲击振动记录仪！内含台积电工程师专访

应用案例 | 台积电为保证光罩运输质量选择MSR冲击振动记录仪！内含台积电工程师专访

晶圆运输需要注意什么&#xff1f; 晶圆运输是半导体制造过程中极为关键和敏感的一环。在晶圆运输过程中&#xff0c;需要注意以下几点&#xff1a; 1.静电防护 晶圆非常容易受到静电的干扰&#xff0c;因此在运输过程中需要遵守严格的静电防护措施。使用适当的静电防护包装…
阅读更多...
Blender 中导出模型fbx

Blender 中导出模型fbx

准备模型&#xff1a;确保你的模型已经完成&#xff0c;并且所有的材质、纹理等都已设置好。 应用所有变换&#xff1a; 选择模型&#xff0c;按下 CtrlA&#xff0c;选择 "All Transforms" 以应用所有的变换&#xff08;位置、旋转和缩放&#xff09;。 导出模型&a…
阅读更多...
Java面试八股之Redis有哪些数据类型？底层实现分别是什么

Java面试八股之Redis有哪些数据类型？底层实现分别是什么

Redis有哪些数据类型&#xff1f;底层实现分别是什么 Redis数据类型概述 Redis作为一款键值存储系统&#xff0c;提供了丰富多样的数据类型以满足不同场景的需求。以下是Redis支持的主要数据类型及其基本用途&#xff1a; String&#xff08;字符串&#xff09; 存储单个键…
阅读更多...
windows系统上python3安装open3d第三方库

windows系统上python3安装open3d第三方库

打开命令提示符&#xff0c;输入&#xff0c; pip install open3d -i https://pypi.tuna.tsinghua.edu.cn/simple成功页面&#xff0c;
阅读更多...
CSDN回顾与前行：我的创作纪念日——2048天的技术成长与感悟

CSDN回顾与前行：我的创作纪念日——2048天的技术成长与感悟

CSDN回顾与前行&#xff1a;我的创作纪念日——2048天的技术成长与感悟 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; 前言 时光荏苒&#xff0c;岁月如梭。转眼间&#xff0c;从我在CSDN上写下第一篇技术博客《2-6 带头结点的链式表操作…
阅读更多...
MVC 控制器 中Action 不能同名，参数不一样，路由器寻找不到对应的，要加特性

MVC 控制器 中Action 不能同名，参数不一样，路由器寻找不到对应的，要加特性

//1 方法不可能完全相同&#xff0c;参数不同//2 那还需要特性吗&#xff1f;需要的&#xff0c;因为MVC选择方法时&#xff0c;不是按参数选择&#xff1a;http请求发送很多数据&#xff0c;其实没法识别&#xff0c;//因为mvc找方法是通过反射来的&#xff0c;GetMethods(nam…
阅读更多...
vue 自定义(hook)--(模块化)

vue 自定义(hook)--(模块化)

文章目录 定义示例代码 定义 什么是hook&#xff1f;—— 本质是一个函数&#xff0c;把setup函数中使用的Composition API进行了封装&#xff0c;类似于vue2.x中的mixin。 自定义hook的优势&#xff1a;复用代码, 让setup中的逻辑更清楚易懂。 示例代码 useSum.ts中内容如下…
阅读更多...
mavlink协议解析

mavlink协议解析

1. mavlink数据包格式 字节索引C 版本内容值说明0uint8_t magic数据包启动标记0xFE特定于协议的文本启动 (stx) 标记, 用于指示新数据包的开始。 任何不识别协议版本的系统都将跳过数据包。1uint8_t len载荷长度0 - 255指示以下 payload 部分的长度 (为特定消息固定)。2uint8_t…
阅读更多...
java并发编程概述

java并发编程概述

java并发编程概述 一. 进程和线程的概念 进程是计算机中的程序关于某数据集合上的一次运行活动&#xff0c;是系统进行资源分配的基本单位。进程是程序运行的实例&#xff0c;每当操作系统在运行一个程序时&#xff0c;会为其创建一个进程。每个进程都拥有自己的一整套变量。…
阅读更多...
python:openpyxl DataBarRule 制作数据条

python:openpyxl DataBarRule 制作数据条

技术文档&#xff1a; 条件格式 — openpyxl 3.0.7 文档 openpyxl.formatting.rule module — openpyxl 3.1.3 documentation 但是&#xff0c;想让单元格数值按比例显示&#xff08;右边正确&#xff09;只能按data_bar_rule_2编写&#xff1a; from openpyxl import Workb…
阅读更多...
技校专业群的生成机制研究

技校专业群的生成机制研究

一、引言 随着我国经济的快速发展和产业结构的不断优化&#xff0c;技术型人才的需求日益旺盛。技工学校&#xff08;简称技校&#xff09;作为培养技术型人才的摇篮&#xff0c;其专业群的构建与发展显得尤为重要。专业群作为技校战略发展的核心&#xff0c;不仅能够优化教学…
阅读更多...
大模型之战进入新赛季，开始卷应用

大模型之战进入新赛季，开始卷应用

最近一段时间&#xff0c;国产大模型Kimi彻底火了&#xff0c;而这波爆火&#xff0c;某种意义上也展示了一个问题&#xff0c;即大模型的落地场景可能比技术比拼&#xff0c;更重要。 国产大模型Kimi突然爆火&#xff0c;与Kimi相关的产业链甚至被冠上“Kimi概念股”之名&…
阅读更多...
【初阶数据结构】树与二叉树：从零开始的奇幻之旅

【初阶数据结构】树与二叉树：从零开始的奇幻之旅

初阶数据结构相关知识点可以通过点击以下链接进行学习一起加油&#xff01;时间与空间复杂度的深度剖析深入解析顺序表:探索底层逻辑深入解析单链表:探索底层逻辑深入解析带头双向循环链表:探索底层逻辑深入解析栈:探索底层逻辑深入解析队列:探索底层逻辑深入解析循环队列:探索…
阅读更多...
51单片机：如何使用串口波特率计算器及其详解

51单片机：如何使用串口波特率计算器及其详解

目录 一、如何使用串口波特率计算器 1.以此为例： 2.生成代码如下： 3.需要手动配置中断系统 1.原理图 2.配置代码 二、如何理解软件生成的波特率 1.以该代码为例子进行分析 2.串口模式图 三、如何计算波特率 参考STC89C52手册P235 四、如何调用串口中断函数 一、如何…
阅读更多...
HBase 在统一内容平台业务的优化实践

HBase 在统一内容平台业务的优化实践

作者&#xff1a;来自 vivo 互联网服务器团队-Leng Jianyu、Huang Haitao HBase是一款开源高可靠性、扩展性、高性能和灵活性的分布式非关系型数据库&#xff0c;本文围绕数据库选型以及使用HBase的痛点展开&#xff0c;从四个方面对HBase的使用进行优化&#xff0c;取得了一些…
阅读更多...
基于jeecgboot-vue3的Flowable流程-集成仿钉钉流程（五）仿钉钉流程的json数据保存与显示

基于jeecgboot-vue3的Flowable流程-集成仿钉钉流程（五）仿钉钉流程的json数据保存与显示

因为这个项目license问题无法开源&#xff0c;更多技术支持与服务请加入我的知识星球。 1、需要做一个界面保存与显示仿钉钉的流程&#xff0c;先建一个表&#xff0c;用online建 2、通过上面生成代码&#xff0c;放入到相应的前后端工程里 3、修改前端仿钉钉流程的设计功能&a…
阅读更多...
spark基于Spark的对招聘信息的分析与设计-计算机毕业设计源码50716

spark基于Spark的对招聘信息的分析与设计-计算机毕业设计源码50716

目 录 摘要 1 绪论 1.1 研究背景 1.2 研究意义 1.3论文结构与章节安排 2 系统分析 2.1 可行性分析 2.2.1 数据新增流程 2.2.2 数据删除流程 2.3 系统功能分析 2.3.1 功能性分析 2.3.2 非功能性分析 2.4 系统用例分析 2.5本章小结 3 系统总体设计 3.1 系统架构设…
阅读更多...
Vue2/Vue3实现全局/局部添加防篡改水印的效果。删除元素无效！更改元素属性无效！支持图片、元素、视频等等。

Vue2/Vue3实现全局/局部添加防篡改水印的效果。删除元素无效！更改元素属性无效！支持图片、元素、视频等等。

水印目的 版权保护：水印可以在图片、文档或视频中嵌入作者、品牌或版权所有者的信息，以防止未经授权的复制、传播或使用。当其他人使用带有水印的内容时，可以追溯到原始作者或版权所有者，从而加强版权保护。 身份识别：水印可以用作作者或品牌的标识符，使观众能够轻松识…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023