312
This commit is contained in:
zpc
parent
de731b9c15
commit
45cc6ce368
|
|
@ -6,11 +6,12 @@
|
|||
<view style="height:52rpx;"></view>
|
||||
<view class="neiquan">
|
||||
<view class="grid-container">
|
||||
<view class="jiangping" v-for="(item, index) in 9"
|
||||
<view class="jiangping" v-for="(item, index) in prizes"
|
||||
:class="{ 'xuanzhong': currentIndex === index && !isFinalWin, 'win-flash': currentIndex === index && isFinalWin }"
|
||||
:key="index">
|
||||
<!-- 奖品图片将在这里显示 -->
|
||||
<image src="https://image.zfunbox.cn/huodong/kuang.png" style="width:95%;height:95%;margin-left: 1rpx;border-radius: 25rpx;">
|
||||
<image :src="item.image"
|
||||
style="width:95%;height:95%;margin-left: 1rpx;border-radius: 25rpx;">
|
||||
</image>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -18,6 +19,17 @@
|
|||
<view class="draw-btn-container">
|
||||
<view class="draw-btn" @click="startDraw"></view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="bottom-buttons">
|
||||
<view class="button-item gzsm" @click="showRules">
|
||||
<image src="https://image.zfunbox.cn/huodong/gzsm.png" style="width: 136.11rpx;height: 53.47rpx;">
|
||||
</image>
|
||||
</view>
|
||||
<view class="button-item zjjl" @click="showRecords">
|
||||
<image src="https://image.zfunbox.cn/huodong/zbtn.png" style="width: 136.11rpx;height: 53.47rpx;">
|
||||
</image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</page-container>
|
||||
|
|
@ -26,12 +38,14 @@
|
|||
<script>
|
||||
import PageContainer from '@/components/page-container/page-container.vue'
|
||||
|
||||
|
||||
export default {
|
||||
components: {
|
||||
PageContainer
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
goods_id: 0,
|
||||
isDrawing: false,
|
||||
prizes: [
|
||||
// 这里可以放置奖品数据
|
||||
|
|
@ -49,25 +63,82 @@ export default {
|
|||
FIGURE_EIGHT: 2 // 8字形走法
|
||||
},
|
||||
pathFigureEight: [0, 1, 2, 5, 4, 3, 6, 7, 8, 5, 4, 3], // 8字形路径
|
||||
goods: null,
|
||||
useMoney: true,
|
||||
useIntegral: true,
|
||||
useMoney2: true,
|
||||
selectPrizes: null
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
this.load();
|
||||
},
|
||||
methods: {
|
||||
startDraw() {
|
||||
async load() {
|
||||
let goods_id = this.$config.getAppSetting('daily_free_draw_id');
|
||||
this.goods_id = goods_id;
|
||||
//infinite_goodsdetail
|
||||
const { status, data, msg } = await this.$request.post('infinite_goodsdetail', { goods_id: goods_id });
|
||||
console.log(status, data, msg);
|
||||
let { goods, goods_list } = data;
|
||||
this.goods = goods;
|
||||
let p = [];
|
||||
goods_list.data.map(item => {
|
||||
console.log(item);
|
||||
p.push({
|
||||
image: item.imgurl,
|
||||
title: item.title,
|
||||
id: item.id
|
||||
});
|
||||
});
|
||||
this.prizes = p;
|
||||
console.log(goods_list);
|
||||
},
|
||||
|
||||
async startDraw() {
|
||||
if (this.isDrawing) return;
|
||||
this.isDrawing = true;
|
||||
this.isFinalWin = false; // 重置中奖闪烁状态
|
||||
|
||||
|
||||
// 清除可能存在的定时器
|
||||
if (this.timer) {
|
||||
clearInterval(this.timer);
|
||||
this.timer = null;
|
||||
}
|
||||
|
||||
if (this.goods == null && this.goods.price == '') {
|
||||
this.isDrawing = false;
|
||||
this.$c.msg('抽奖失败')
|
||||
return false;
|
||||
}
|
||||
console.log('免费');
|
||||
try {
|
||||
const goods_list_Id = await this.confirmSubmit([1, 1]);
|
||||
let targetIndex = 0;
|
||||
// console.log(goods_list_Id, targetIndex, this.prizes);
|
||||
let selectPrizes = null;
|
||||
this.prizes.forEach((item, index, array) => {
|
||||
// console.log(item); // 当前元素
|
||||
// console.log(index); // 当前索引
|
||||
// console.log(array); // 数组本身
|
||||
if (item.id == goods_list_Id) {
|
||||
targetIndex = index;
|
||||
selectPrizes = item;
|
||||
}
|
||||
});
|
||||
|
||||
this.selectPrizes = selectPrizes;
|
||||
console.log(this.selectPrizes);
|
||||
this.targetIndex = targetIndex;
|
||||
} catch (error) {
|
||||
this.$c.msg(error)
|
||||
this.isDrawing = false;
|
||||
return;
|
||||
}
|
||||
// 重置计数和速度
|
||||
this.times = 0;
|
||||
this.speed = 100;
|
||||
this.path8Index = 0;
|
||||
|
||||
|
||||
// 随机选择动画类型：1-2之间
|
||||
this.animationType = Math.floor(Math.random() * 2) + 1;
|
||||
let animationName = "顺序遍历";
|
||||
|
|
@ -75,18 +146,18 @@ export default {
|
|||
animationName = "8字形";
|
||||
}
|
||||
console.log('抽奖动画类型：', animationName);
|
||||
|
||||
|
||||
// 随机生成中奖索引（0-8之间）
|
||||
this.targetIndex = Math.floor(Math.random() * 9);
|
||||
|
||||
// this.targetIndex = Math.floor(Math.random() * 9);
|
||||
|
||||
// 开始动画
|
||||
this.runAnimation();
|
||||
},
|
||||
|
||||
|
||||
runAnimation() {
|
||||
this.timer = setInterval(() => {
|
||||
this.times++;
|
||||
|
||||
|
||||
// 根据不同的动画类型选择下一个格子
|
||||
if (this.animationType === this.animationTypes.SEQUENTIAL) {
|
||||
// 顺序遍历方式
|
||||
|
|
@ -96,13 +167,13 @@ export default {
|
|||
this.path8Index = (this.path8Index + 1) % this.pathFigureEight.length;
|
||||
this.currentIndex = this.pathFigureEight[this.path8Index];
|
||||
}
|
||||
|
||||
|
||||
// 动画速度控制
|
||||
if (this.times > 20) { // 前20次保持高速
|
||||
if (this.times > 30) { // 30次后开始减速
|
||||
this.speed += 10; // 速度递减
|
||||
}
|
||||
|
||||
|
||||
// 如果速度减到一定程度，并且当前索引接近中奖索引，则停止
|
||||
if (this.speed > 300 && this.currentIndex === this.targetIndex) {
|
||||
clearInterval(this.timer);
|
||||
|
|
@ -110,7 +181,7 @@ export default {
|
|||
this.startWinAnimation();
|
||||
return; // 重要：确保不再继续执行
|
||||
}
|
||||
|
||||
|
||||
// 只有在需要改变速度时才重新设置定时器
|
||||
clearInterval(this.timer);
|
||||
this.timer = null;
|
||||
|
|
@ -118,30 +189,114 @@ export default {
|
|||
}
|
||||
}, this.speed);
|
||||
},
|
||||
|
||||
|
||||
startWinAnimation() {
|
||||
// 开始中奖闪烁动画
|
||||
this.isFinalWin = true;
|
||||
|
||||
|
||||
// 播放闪烁效果后显示结果
|
||||
setTimeout(() => {
|
||||
this.showResult();
|
||||
}, 1500); // 闪烁1.5秒后显示结果
|
||||
},
|
||||
|
||||
|
||||
showResult() {
|
||||
// 动画结束后的操作
|
||||
setTimeout(() => {
|
||||
this.isDrawing = false;
|
||||
if (this.selectPrizes == null) {
|
||||
uni.showToast({
|
||||
title: '获取奖品失败',
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
});
|
||||
return;
|
||||
}
|
||||
uni.showToast({
|
||||
title: '恭喜获得奖品！',
|
||||
title: '恭喜获得' + this.selectPrizes.title + '奖品！',
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
});
|
||||
|
||||
|
||||
// 这里可以添加中奖弹窗或其他效果
|
||||
}, 500);
|
||||
}
|
||||
},
|
||||
|
||||
// 显示规则说明
|
||||
showRules() {
|
||||
if (this.isDrawing) {
|
||||
uni.showToast({
|
||||
title: '请等待抽奖完成',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
uni.showToast({
|
||||
title: '规则说明功能待实现',
|
||||
icon: 'none'
|
||||
});
|
||||
},
|
||||
|
||||
// 显示中奖记录
|
||||
showRecords() {
|
||||
if (this.isDrawing) {
|
||||
uni.showToast({
|
||||
title: '请等待抽奖完成',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
uni.showToast({
|
||||
title: '中奖记录功能待实现',
|
||||
icon: 'none'
|
||||
});
|
||||
},
|
||||
|
||||
async confirmSubmit([type, num, flag]) {
|
||||
|
||||
let url = 'infinite_ordermoney'
|
||||
if (type == 1) {
|
||||
url = 'infinite_orderbuy'
|
||||
}
|
||||
let psotData = {
|
||||
goods_id: this.goods_id,
|
||||
prize_num: num,
|
||||
use_money_is: 1,
|
||||
use_integral_is: 2,
|
||||
use_money2_is: 2,
|
||||
coupon_id: '',
|
||||
};
|
||||
let res = await this.$request.post(url, psotData);
|
||||
const { status, data, msg } = res;
|
||||
if (status !== 1) {
|
||||
// this.$c.msg(msg);
|
||||
throw msg;
|
||||
}
|
||||
console.log(data.order_num);
|
||||
if (data.order_num != null) {
|
||||
const prize = await this.getPrize(data.order_num);
|
||||
console.log(prize);//goodslist_id
|
||||
if (prize.goodslist_id != null) {
|
||||
return prize.goodslist_id;
|
||||
}
|
||||
}
|
||||
throw '出现异常';
|
||||
},
|
||||
async getPrize(order_num) {
|
||||
if (!order_num) {
|
||||
return
|
||||
}
|
||||
const res = await this.$request.post('infinite_prizeorderlog', {
|
||||
order_num
|
||||
});
|
||||
let { status, data, msg } = res;
|
||||
if (status !== 1) {
|
||||
throw msg;
|
||||
}
|
||||
return data.data[0];
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -182,7 +337,7 @@ export default {
|
|||
// background: url($baseurl+'huodong/kuang.png') no-repeat center center;
|
||||
// background-size: 100% 100%;
|
||||
// border: 1px dashed #75C5FF;
|
||||
|
||||
|
||||
border-radius: 12rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -225,6 +380,8 @@ export default {
|
|||
//box-shadow: 0 2rpx 4rpx rgba(255, 87, 34, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.xuanzhong {
|
||||
|
|
@ -233,7 +390,7 @@ export default {
|
|||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
|
||||
.win-flash {
|
||||
background: url($baseurl+'huodong/xuanzhong.png') no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
|
|
@ -241,22 +398,66 @@ export default {
|
|||
height: 100% !important;
|
||||
animation: win-blink 0.3s 5 alternate;
|
||||
}
|
||||
|
||||
|
||||
.bottom-buttons {
|
||||
position: relative;
|
||||
top: -20rpx;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
padding: 10rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.button-item {
|
||||
width: 136.11rpx;
|
||||
height: 53.47rpx;
|
||||
font-size: 28rpx;
|
||||
|
||||
border-radius: 35rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.3s;
|
||||
// box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
// background-color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gzsm {
|
||||
|
||||
animation: pulse 0.3s 5 alternate;
|
||||
width: 136.11rpx;
|
||||
height: 53.47rpx;
|
||||
}
|
||||
|
||||
.zjjl {
|
||||
|
||||
animation: pulse 0.3s 5 alternate;
|
||||
width: 136.11rpx;
|
||||
height: 53.47rpx;
|
||||
}
|
||||
|
||||
@keyframes win-blink {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0.5;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes pulse {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user