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…
阅读更多...
详细介绍TS中的枚举

详细介绍TS中的枚举

在 TypeScript 中&#xff0c;枚举&#xff08;Enums&#xff09;是一个用于表示常见常量集合的便利特性。枚举是一种特殊的类型&#xff0c;它们允许你为一组值定义一个固定的命名空间。枚举常用于模式匹配的 switch 语句和提供更可读的类型检查。 枚举的基本语法&#xff1a…
阅读更多...
应用案例 | 台积电为保证光罩运输质量选择MSR冲击振动记录仪！内含台积电工程师专访

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

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

Bugly并非无所不能

在 iOS 应用因为内存占用过大而被系统 killed 的情况下&#xff0c;Bugly 以及大多数崩溃报告工具是无法捕获到这种类型的崩溃信息的。原因在于&#xff0c;当系统由于内存压力过大而终止应用时&#xff0c;是直接将应用进程杀死&#xff0c;不会触发常规的崩溃处理流程&#x…
阅读更多...
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…
阅读更多...
【SQL】InnoDB中的行锁

【SQL】InnoDB中的行锁

InnoDB 里的行锁机制主要通过索引来实现&#xff0c;而不是直接对表中的记录加锁。具体来说&#xff0c;InnoDB 使用以下几种锁定机制来实现行锁&#xff1a; 记录锁 (Record Lock)&#xff1a;锁定单个索引记录。间隙锁 (Gap Lock)&#xff1a;锁定索引记录之间的间隙&#x…
阅读更多...
vue 自定义(hook)--(模块化)

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

文章目录 定义示例代码 定义 什么是hook&#xff1f;—— 本质是一个函数&#xff0c;把setup函数中使用的Composition API进行了封装&#xff0c;类似于vue2.x中的mixin。 自定义hook的优势&#xff1a;复用代码, 让setup中的逻辑更清楚易懂。 示例代码 useSum.ts中内容如下…
阅读更多...
react学习——26redux实现求和案例（异步action）

react学习——26redux实现求和案例（异步action）

1、安装redux-thunk npm install redux-thunk npm install redux-thunk2、redux/store.js 引入redux-thunk /*该文件专门用于创建一个为Count组件服务的store对象*/ //引入createStore,专门创建redux中最为核心的store对象 import {createStore,applyMiddleware} from redux …
阅读更多...
Python:引号应用、字符串应用

Python:引号应用、字符串应用

# 把前面的引号理解为起始符&#xff0c;后面的理解为终止符 # 单双引号的灵活运用 想输出"hello,Q" 用单引号 # 想输出 This is Qs 用双引号 # 想输出既有单引号又有双引号或者特定格式 用三对单引号### word "hello,Q" word2 "This is Qs" …
阅读更多...
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…
阅读更多...
微服务中的 “客户端负载均衡” 简介

微服务中的 “客户端负载均衡” 简介

微服务中的客户端负载均衡是指将负载&#xff08;即工作任务或访问请求&#xff09;在客户端进行分配&#xff0c;以决定由哪个服务实例来处理这些请求。这种负载均衡方式与服务端负载均衡相对&#xff0c;后者是在服务端&#xff08;如服务器或负载均衡器&#xff09;进行请求…
阅读更多...
系统设计题-路由表最长匹配

系统设计题-路由表最长匹配

一、题目 路由表最长匹配&#xff1a;将目标IP地址dstIP与路由为entryIP/掩码长度m&#xff08;比如10.166.50.0/23&#xff09;进行匹配&#xff0c;找出匹配掩码m最长值。 匹配规则&#xff1a; 如果dstIP和entryIP的二进制表示的前m个位相同&#xff0c;则说明是匹配的。 0…
阅读更多...
抖音必备工具！掌握萤瓴优选橱窗带货软件的五大优势，助你快速盈利

抖音必备工具！掌握萤瓴优选橱窗带货软件的五大优势，助你快速盈利

在当今数字化时代&#xff0c;抖音作为一款备受欢迎的短视频社交平台&#xff0c;不仅为人们提供了展示自我的舞台&#xff0c;更成为了众多商家和个人创业者推广产品和服务的重要渠道。然而&#xff0c;要在抖音上实现高效带货&#xff0c;并非易事。幸运的是&#xff0c;萤瓴…
阅读更多...
最新文章

Copyright @ 2022~2023