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.pswp.cn/diannao/44803.shtml
繁體地址，請注明出處：http://hk.pswp.cn/diannao/44803.shtml
英文地址，請注明出處：http://en.pswp.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