提交代码
This commit is contained in:
zpc
parent
758198ec71
commit
9bddcd2b9c
13
App.vue
13
App.vue
|
|
@ -61,7 +61,18 @@ export default {
|
|||
// Vue.prototype.bgmCtx = {};
|
||||
Vue.prototype.bgmCtx.slotBgm = slotBgm;
|
||||
slotBgm.src = src2;
|
||||
|
||||
|
||||
//抽音效
|
||||
let src3 = await that.$config.getAppSettingAsync("win_audio3");
|
||||
if (src3 == null || src3 == "") {
|
||||
src3 = that.$img("/static/mp3/chaoshen.mp3");
|
||||
}
|
||||
//创建中奖音乐
|
||||
const csBgm = uni.createInnerAudioContext();
|
||||
// Vue.prototype.bgmCtx = {};
|
||||
Vue.prototype.bgmCtx.csBgm = csBgm;
|
||||
csBgm.src = src3;
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
113
components/detail-lucky/detail-grand-prize.vue
Normal file
113
components/detail-lucky/detail-grand-prize.vue
Normal file
|
|
@ -0,0 +1,113 @@
|
|||
<template>
|
||||
<view>
|
||||
<!-- <img style="width: 0%; height: 0%;display: none;" :src="webpUrl"> -->
|
||||
<view class="content-container" :class="{'fade-out': isFadingOut}" v-if="isVisible && isInitialized">
|
||||
<img id="animatedWebp" style="width: 100%; height: 100%" :src="webpUrl" alt="超神特效" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
// 移除prizeList props
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isVisible: false, // 控制组件显示/隐藏
|
||||
isInitialized: false, // 控制是否已初始化
|
||||
webpUrl: "https://image.zfunbox.cn/static/image/lucky/grand.webp",
|
||||
isFadingOut: false, // 控制淡出动画
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
// 初始化老虎机组件
|
||||
init() {
|
||||
this.isInitialized = true;
|
||||
this.webpUrl = "";
|
||||
},
|
||||
playWebP() {
|
||||
const webpImg = document.getElementById("animatedWebp");
|
||||
// 重新加载图片实现从头播放
|
||||
webpImg.src = ""; // 先清空
|
||||
webpImg.src = "https://image.zfunbox.cn/static/image/lucky/grand.webp"; // 重新设置相同的URL
|
||||
webpImg.style.animationPlayState = "running";
|
||||
if (this.bgmCtx && this.bgmCtx.csBgm) {
|
||||
this.bgmCtx.csBgm.seek(0);
|
||||
this.bgmCtx.csBgm.play();
|
||||
}
|
||||
},
|
||||
|
||||
pauseWebP() {
|
||||
const webpImg = document.getElementById("animatedWebp");
|
||||
webpImg.style.animationPlayState = "paused";
|
||||
},
|
||||
// 显示老虎机组件
|
||||
show() {
|
||||
if (!this.isInitialized) {
|
||||
console.error("尚未初始化，请先调用init方法");
|
||||
return this;
|
||||
}
|
||||
this.isVisible = true;
|
||||
this.isFadingOut = false; // 重置淡出状态
|
||||
this.webpUrl =
|
||||
"https://image.zfunbox.cn/static/image/lucky/grand.webp?v=" +
|
||||
new Date().getTime();
|
||||
|
||||
if (this.bgmCtx && this.bgmCtx.csBgm) {
|
||||
this.bgmCtx.csBgm.seek(0);
|
||||
this.bgmCtx.csBgm.play();
|
||||
}
|
||||
|
||||
// 设置动画结束后的淡出效果
|
||||
setTimeout(() => {
|
||||
// 开始淡出动画
|
||||
this.isFadingOut = true;
|
||||
|
||||
// 等待淡出动画完成后再隐藏组件
|
||||
setTimeout(() => {
|
||||
if (this.bgmCtx && this.bgmCtx.csBgm) {
|
||||
this.bgmCtx.csBgm.pause();
|
||||
}
|
||||
this.isVisible = false;
|
||||
this.$emit("end");
|
||||
}, 400); // 淡出动画持续800ms
|
||||
|
||||
}, 3800); // 4秒后开始淡出（总时间仍维持在4.2秒左右）
|
||||
|
||||
return this;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
// 不再自动初始化
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// 内容容器样式
|
||||
.content-container {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
//background-image: url('https://image.zfunbox.cn/static/image/lucky/grand.webp');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
opacity: 1;
|
||||
transition: opacity 0.8s ease;
|
||||
}
|
||||
|
||||
// 淡出动画样式
|
||||
.fade-out {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -2,29 +2,18 @@
|
|||
<view class="content-container" v-if="isVisible && isInitialized">
|
||||
<view class="slot-container">
|
||||
<view class="slot-icon">
|
||||
<image
|
||||
src="https://image.zfunbox.cn/static/image/lucky/icon.png"
|
||||
mode="widthFix"
|
||||
style="height: 90rpx; width: 249rpx"
|
||||
></image>
|
||||
<image src="https://image.zfunbox.cn/static/image/lucky/icon.png" mode="widthFix"
|
||||
style="height: 90rpx; width: 249rpx"></image>
|
||||
</view>
|
||||
<view class="slot-view" :class="'slot-view-' + currentMode">
|
||||
<!-- 老虎机组件 -->
|
||||
<SlotMachine
|
||||
ref="myLucky"
|
||||
:width="windowWidth"
|
||||
:height="slotHeight"
|
||||
:blocks="blocks"
|
||||
:slots="slots"
|
||||
:prizes="prizes"
|
||||
:defaultConfig="defaultConfig"
|
||||
@start="startCallBack"
|
||||
@end="endCallBack"
|
||||
>
|
||||
<SlotMachine ref="myLucky" :width="windowWidth" :height="slotHeight" :blocks="blocks" :slots="slots"
|
||||
:prizes="prizes" :defaultConfig="defaultConfig" @start="startCallBack" @end="endCallBack">
|
||||
</SlotMachine>
|
||||
</view>
|
||||
<view style="color: #484848;font-size: 19rpx;text-align: center;padding-top: 20rpx;">动画结果因设备差异可能会显示异常，获得赏品以（恭喜获得）结果为准</view>
|
||||
<view style="color: #249073;font-size: 21rpx;text-align: center;padding-top: 20rpx;">跳过动画</view>
|
||||
<view style="color: #484848;font-size: 19rpx;text-align: center;padding-top: 20rpx;">
|
||||
动画结果因设备差异可能会显示异常，获得赏品以（恭喜获得）结果为准</view>
|
||||
<view class="skip-animation" @click="skipAnimation" :style="skipButtonStyle">跳过动画</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
|
@ -46,12 +35,12 @@ function shuffle(array) {
|
|||
export default {
|
||||
components: { SlotMachine },
|
||||
props: {
|
||||
// 老虎机模式: 1, 3, 5 (分别代表1列、3列、5列)
|
||||
// 老虎机模式: 1, 3, 5, 10 (分别代表1列、3列、5列、10列分两批)
|
||||
mode: {
|
||||
type: [Number, String],
|
||||
default: 1,
|
||||
validator: function(value) {
|
||||
return [1, 3, 5, '1', '3', '5'].includes(value);
|
||||
validator: function (value) {
|
||||
return [1, 3, 5, 10, '1', '3', '5', '10'].includes(value);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -74,6 +63,12 @@ export default {
|
|||
luckyPrize: null,
|
||||
currentPrizeIndex: -1,
|
||||
internalMode: 1, // 内部存储模式的状态
|
||||
skipButtonOpacity: 0, // 跳过按钮的透明度
|
||||
isBatchMode: false, // 是否为批次模式
|
||||
batchCount: 0, // 当前批次
|
||||
batchResults: [], // 保存批次结果
|
||||
batchCallback: null, // 批次模式回调
|
||||
batchIndices: [], // 批次索引
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -85,15 +80,18 @@ export default {
|
|||
},
|
||||
// 计算当前模式
|
||||
currentMode() {
|
||||
return parseInt(this.internalMode);
|
||||
// 当internalMode为10时，显示模式为5
|
||||
return this.internalMode === 10 ? 5 : parseInt(this.internalMode);
|
||||
},
|
||||
// 根据模式计算高度
|
||||
slotHeight() {
|
||||
const modeMap = {
|
||||
1: "160rpx",
|
||||
3: "480rpx",
|
||||
5: "800rpx"
|
||||
5: "800rpx",
|
||||
10: "800rpx" // 模式10使用与模式5相同的高度
|
||||
};
|
||||
// 使用计算后的currentMode，而不是直接使用internalMode
|
||||
return modeMap[this.currentMode] || "480rpx";
|
||||
},
|
||||
// 根据模式获取背景图
|
||||
|
|
@ -101,21 +99,31 @@ export default {
|
|||
const modeMap = {
|
||||
1: "di_5.png",
|
||||
3: "di_3.png",
|
||||
5: "di_5.png"
|
||||
5: "di_5.png",
|
||||
10: "di_5.png" // 模式10使用与模式5相同的背景
|
||||
};
|
||||
// 使用计算后的currentMode，而不是直接使用internalMode
|
||||
return modeMap[this.currentMode] || "di_3.png";
|
||||
},
|
||||
// 跳过按钮样式
|
||||
skipButtonStyle() {
|
||||
return {
|
||||
opacity: this.skipButtonOpacity,
|
||||
transition: 'opacity 0.5s ease'
|
||||
};
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 初始化老虎机组件
|
||||
init(prizeList, mode) {
|
||||
// 如果传入了模式，更新当前模式
|
||||
if (mode !== undefined && [1, 3, 5].includes(parseInt(mode))) {
|
||||
if (mode !== undefined && [1, 3, 5, 10].includes(parseInt(mode))) {
|
||||
this.internalMode = parseInt(mode);
|
||||
} else {
|
||||
// 没有传入模式时使用props中的mode初始化内部模式
|
||||
this.internalMode = parseInt(this.mode);
|
||||
}
|
||||
console.log("初始化模式:", this.internalMode, "显示模式:", this.currentMode);
|
||||
|
||||
// 设置奖品列表
|
||||
if (prizeList && Array.isArray(prizeList) && prizeList.length > 0) {
|
||||
|
|
@ -141,13 +149,15 @@ export default {
|
|||
data: t[i], // 将原始数据保存到prize中，方便后续使用
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// 根据当前模式创建slots
|
||||
const arr = Array.from({ length: t.length }, (_, i) => i);
|
||||
let slots = [];
|
||||
|
||||
|
||||
// 根据模式创建对应数量的列
|
||||
for (let i = 0; i < this.currentMode; i++) {
|
||||
// 模式10也只创建5列，因为显示模式是5
|
||||
const slotColumns = this.currentMode;
|
||||
for (let i = 0; i < slotColumns; i++) {
|
||||
slots.push({ order: shuffle([...arr]), speed: 20 });
|
||||
}
|
||||
|
||||
|
|
@ -301,10 +311,9 @@ export default {
|
|||
|
||||
// 抽奖结束回调
|
||||
endCallBack(prize) {
|
||||
// 奖品详情
|
||||
console.log("抽奖结束", prize);
|
||||
|
||||
try {
|
||||
console.log("[批次抽奖] endCallBack 被调用，批次模式:", this.isBatchMode, "当前模式:", this.internalMode, "批次计数:", this.batchCount);
|
||||
|
||||
// 准备中奖信息
|
||||
const prizeData =
|
||||
this.prizes[this.currentPrizeIndex]?.data || this.prizes[0]?.data;
|
||||
|
|
@ -337,8 +346,8 @@ export default {
|
|||
allPrizes.push(prizeData);
|
||||
}
|
||||
|
||||
// 发送中奖信息到父组件
|
||||
this.$emit("end", {
|
||||
// 准备返回结果
|
||||
const result = {
|
||||
prize: prize,
|
||||
prizeData: prizeData, // 主要奖品数据
|
||||
allPrizes: allPrizes, // 所有中奖奖品数据
|
||||
|
|
@ -349,18 +358,213 @@ export default {
|
|||
description: `价值：${prizeData.price} 元`,
|
||||
data: prizeData,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
// 批次模式处理
|
||||
if (this.isBatchMode && this.internalMode === 10) {
|
||||
this.batchCount++;
|
||||
|
||||
// 添加到批次结果
|
||||
this.batchResults.push(...allPrizes);
|
||||
|
||||
console.log("[批次抽奖] 批次抽奖完成", this.batchCount, "共", this.batchResults.length, "个奖品");
|
||||
|
||||
if (this.batchCount < 2) {
|
||||
// 第一批次完成，延时开始第二批次
|
||||
console.log("[批次抽奖] 第一批次完成，准备开始第二批次");
|
||||
setTimeout(() => {
|
||||
console.log("[批次抽奖] 即将调用startSecondBatch");
|
||||
this.startSecondBatch();
|
||||
}, 800);
|
||||
return;
|
||||
} else {
|
||||
// 两批次都完成
|
||||
console.log("[批次抽奖] 两批次都完成，返回最终结果");
|
||||
const batchResult = {
|
||||
prize: prize,
|
||||
prizeData: prizeData,
|
||||
allPrizes: this.batchResults,
|
||||
message: `恭喜您获得 ${this.batchResults.length} 件奖品`,
|
||||
prizeInfo: {
|
||||
name: "批次抽奖",
|
||||
image: prizeData.imgurl,
|
||||
description: `共获得 ${this.batchResults.length} 件奖品`,
|
||||
data: this.batchResults,
|
||||
},
|
||||
};
|
||||
|
||||
setTimeout(() => {
|
||||
// 发送中奖信息到父组件
|
||||
this.$emit("end", batchResult);
|
||||
|
||||
// 调用保存的批次回调
|
||||
if (this.batchCallback && typeof this.batchCallback === 'function') {
|
||||
console.log("[批次抽奖] 调用批次回调函数");
|
||||
this.batchCallback(batchResult);
|
||||
this.batchCallback = null;
|
||||
}
|
||||
|
||||
// 重置批次状态
|
||||
this.isBatchMode = false;
|
||||
this.batchCount = 0;
|
||||
this.batchResults = [];
|
||||
}, 800);
|
||||
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
// 发送中奖信息到父组件
|
||||
this.$emit("end", result);
|
||||
|
||||
// 调用startDrawWithResult方法中保存的回调函数
|
||||
if (this.drawResultCallback && typeof this.drawResultCallback === 'function') {
|
||||
this.drawResultCallback(result);
|
||||
// 清除回调，避免重复调用
|
||||
this.drawResultCallback = null;
|
||||
}
|
||||
},800);
|
||||
|
||||
// // 延迟隐藏组件
|
||||
// setTimeout(() => {
|
||||
// this.hide();
|
||||
// }, 2000);
|
||||
} catch (error) {
|
||||
console.error("处理抽奖结果时出错:", error);
|
||||
console.error("[批次抽奖] 处理抽奖结果时出错:", error);
|
||||
this.hide();
|
||||
|
||||
// 如果有回调，通知调用者处理出错
|
||||
if (this.drawResultCallback && typeof this.drawResultCallback === 'function') {
|
||||
this.drawResultCallback({ success: false, error: error.message || "处理抽奖结果时出错" });
|
||||
this.drawResultCallback = null;
|
||||
}
|
||||
|
||||
// 批次模式错误处理
|
||||
if (this.isBatchMode && this.batchCallback) {
|
||||
this.batchCallback({ success: false, error: error.message || "批次抽奖出错" });
|
||||
this.isBatchMode = false;
|
||||
this.batchCount = 0;
|
||||
this.batchResults = [];
|
||||
this.batchCallback = null;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 强制结束抽奖
|
||||
forceEndDraw() {
|
||||
if (!this.isInitialized) {
|
||||
console.error("老虎机尚未初始化，请先调用init方法");
|
||||
return this;
|
||||
}
|
||||
if (this.bgmCtx && this.bgmCtx.slotBgm) {
|
||||
this.bgmCtx.slotBgm.stop();
|
||||
}
|
||||
|
||||
console.log("[跳过动画] 批次模式:", this.isBatchMode, "当前模式:", this.internalMode, "批次计数:", this.batchCount);
|
||||
|
||||
this.hide();
|
||||
|
||||
// 批次模式特殊处理
|
||||
if (this.isBatchMode && this.internalMode === 10) {
|
||||
// 如果是批次模式，且有批次回调，直接返回当前已有的结果
|
||||
if (this.batchCallback && typeof this.batchCallback === 'function') {
|
||||
console.log("[跳过动画] 批次模式下跳过动画，准备返回结果");
|
||||
|
||||
// 如果没有任何结果，生成一些随机结果
|
||||
if (this.batchResults.length === 0) {
|
||||
console.log("[跳过动画] 没有现有结果，创建随机结果");
|
||||
|
||||
// 使用批次索引或随机生成索引
|
||||
let indices = [];
|
||||
if (this.batchIndices && this.batchIndices.length > 0) {
|
||||
indices = this.batchIndices;
|
||||
} else {
|
||||
// 生成10个随机索引
|
||||
for (let i = 0; i < 10; i++) {
|
||||
indices.push(Math.floor(Math.random() * this.prizes.length));
|
||||
}
|
||||
}
|
||||
|
||||
// 根据索引填充结果
|
||||
for (let i = 0; i < indices.length; i++) {
|
||||
const index = indices[i];
|
||||
if (index >= 0 && index < this.prizes.length) {
|
||||
const prizeData = this.prizes[index].data;
|
||||
if (prizeData) {
|
||||
this.batchResults.push(prizeData);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 创建结果对象
|
||||
let firstPrize = this.batchResults[0] || null;
|
||||
const result = {
|
||||
allPrizes: this.batchResults,
|
||||
message: `抽奖已跳过，共获得 ${this.batchResults.length} 件奖品`,
|
||||
skipped: true,
|
||||
prizeData: firstPrize,
|
||||
prizeInfo: firstPrize ? {
|
||||
name: firstPrize.title,
|
||||
image: firstPrize.imgurl,
|
||||
description: `价值：${firstPrize.price} 元`,
|
||||
data: firstPrize,
|
||||
} : null
|
||||
};
|
||||
|
||||
// 发送事件到父组件
|
||||
this.$emit("end", result);
|
||||
|
||||
console.log("[跳过动画] 调用批次回调函数");
|
||||
this.batchCallback(result);
|
||||
this.batchCallback = null;
|
||||
}
|
||||
|
||||
// 重置批次状态
|
||||
this.isBatchMode = false;
|
||||
this.batchCount = 0;
|
||||
this.batchResults = [];
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
// 通知父组件抽奖被强制结束
|
||||
if (this.currentPrizeIndex >= 0 && this.prizes.length > 0) {
|
||||
const prizeData = this.prizes[this.currentPrizeIndex]?.data || this.prizes[0]?.data;
|
||||
|
||||
if (prizeData) {
|
||||
const result = {
|
||||
prize: { index: this.currentPrizeIndex },
|
||||
prizeData: prizeData,
|
||||
allPrizes: [prizeData],
|
||||
message: `恭喜您获得 ${prizeData.title}`,
|
||||
prizeInfo: {
|
||||
name: prizeData.title,
|
||||
image: prizeData.imgurl,
|
||||
description: `价值：${prizeData.price} 元`,
|
||||
data: prizeData,
|
||||
},
|
||||
skipped: true // 标记为跳过动画
|
||||
};
|
||||
|
||||
// 发送事件到父组件
|
||||
this.$emit("end", result);
|
||||
|
||||
// 调用startDrawWithResult方法中保存的回调函数
|
||||
if (this.drawResultCallback && typeof this.drawResultCallback === 'function') {
|
||||
this.drawResultCallback(result);
|
||||
// 清除回调，避免重复调用
|
||||
this.drawResultCallback = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return this; // 返回this以支持链式调用
|
||||
},
|
||||
|
||||
// 跳过动画
|
||||
skipAnimation() {
|
||||
// 强制结束抽奖
|
||||
this.forceEndDraw();
|
||||
},
|
||||
|
||||
// 开始抽奖方法
|
||||
startDraw(callback) {
|
||||
// 检查是否已初始化
|
||||
|
|
@ -369,7 +573,30 @@ export default {
|
|||
return this;
|
||||
}
|
||||
|
||||
// 不再自动初始化，需要先手动调用init
|
||||
// 保存回调函数
|
||||
this.drawResultCallback = typeof callback === 'function' ? callback : null;
|
||||
|
||||
// 重置跳过按钮透明度
|
||||
this.skipButtonOpacity = 0;
|
||||
|
||||
// 如果是模式10，启用批次模式
|
||||
if (this.internalMode === 10) {
|
||||
console.log("[批次抽奖] 检测到模式10，启用批次模式");
|
||||
this.isBatchMode = true;
|
||||
this.batchCount = 0;
|
||||
this.batchResults = [];
|
||||
this.batchCallback = this.drawResultCallback; // 保存批次回调
|
||||
this.drawResultCallback = null; // 清空普通回调
|
||||
|
||||
// 为批次模式生成随机索引
|
||||
this.batchIndices = [];
|
||||
for (let i = 0; i < 10; i++) {
|
||||
this.batchIndices.push(Math.floor(Math.random() * this.prizes.length));
|
||||
}
|
||||
console.log("[批次抽奖] 生成随机索引:", this.batchIndices);
|
||||
}
|
||||
|
||||
// 显示老虎机
|
||||
this.show();
|
||||
|
||||
setTimeout(() => {
|
||||
|
|
@ -380,10 +607,27 @@ export default {
|
|||
// 开始旋转
|
||||
this.$refs.myLucky.play();
|
||||
if (this.bgmCtx && this.bgmCtx.slotBgm) {
|
||||
this.bgmCtx.slotBgm.seek(0);
|
||||
this.bgmCtx.slotBgm.play();
|
||||
}
|
||||
|
||||
if (typeof callback === "function") {
|
||||
// 渐显跳过按钮
|
||||
setTimeout(() => {
|
||||
this.skipButtonOpacity = 1;
|
||||
}, 1000);
|
||||
|
||||
// 批次模式下自动停止第一批次
|
||||
if (this.isBatchMode && this.internalMode === 10) {
|
||||
console.log("[批次抽奖] 设置2秒后自动停止第一批次");
|
||||
setTimeout(() => {
|
||||
// 使用前5个索引作为第一批次结果
|
||||
const firstBatchIndices = this.batchIndices.slice(0, 5);
|
||||
console.log("[批次抽奖] 停止第一批次抽奖，使用索引:", firstBatchIndices);
|
||||
this.stopDraw(firstBatchIndices);
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
if (typeof callback === "function" && !this.isBatchMode) {
|
||||
callback();
|
||||
}
|
||||
} else {
|
||||
|
|
@ -397,6 +641,8 @@ export default {
|
|||
|
||||
// 停止抽奖并指定中奖索引
|
||||
stopDraw(prizeIndices) {
|
||||
console.log("stopDraw",prizeIndices);
|
||||
|
||||
// 检查是否已初始化
|
||||
if (!this.isInitialized) {
|
||||
console.error("老虎机尚未初始化，请先调用init方法");
|
||||
|
|
@ -408,6 +654,11 @@ export default {
|
|||
return this;
|
||||
}
|
||||
|
||||
// 如果是批次模式，添加日志
|
||||
if (this.isBatchMode && this.internalMode === 10) {
|
||||
console.log("[批次抽奖] 停止抽奖，批次:", this.batchCount + 1, "索引:", prizeIndices);
|
||||
}
|
||||
|
||||
// 如果没有传入奖品索引数组或传入的不是数组
|
||||
if (
|
||||
!prizeIndices ||
|
||||
|
|
@ -442,13 +693,9 @@ export default {
|
|||
this.currentPrizeIndex = indices[0];
|
||||
|
||||
// 如果传入的索引超过当前模式，只使用前currentMode个
|
||||
if(indices.length > this.currentMode){
|
||||
indices=indices.slice(0,this.currentMode)
|
||||
if (indices.length > this.currentMode) {
|
||||
indices = indices.slice(0, this.currentMode)
|
||||
}
|
||||
// // 如果模式是3，且传入的索引超过3个，只使用前3个
|
||||
// if (this.currentMode === 3 && indices.length > 3) {
|
||||
// indices = indices.slice(0, 3);
|
||||
// }
|
||||
|
||||
// 调用stop方法停止旋转
|
||||
this.$refs.myLucky.stop(indices);
|
||||
|
|
@ -456,17 +703,6 @@ export default {
|
|||
return this;
|
||||
},
|
||||
|
||||
// 强制结束抽奖
|
||||
forceEndDraw() {
|
||||
if (!this.isInitialized) {
|
||||
console.error("老虎机尚未初始化，请先调用init方法");
|
||||
return this;
|
||||
}
|
||||
|
||||
this.hide();
|
||||
return this; // 返回this以支持链式调用
|
||||
},
|
||||
|
||||
// 重置组件状态
|
||||
reset() {
|
||||
this.isInitialized = false;
|
||||
|
|
@ -477,6 +713,247 @@ export default {
|
|||
this.currentPrizeIndex = -1;
|
||||
return this;
|
||||
},
|
||||
|
||||
/**
|
||||
* 开始抽奖并传入抽奖结果，2秒后自动停止
|
||||
* @param {Array} resultIndices 抽奖结果索引数组
|
||||
* @param {Function} callback 抽奖结束后的回调函数
|
||||
* @return {Object} this 返回组件实例，支持链式调用
|
||||
*/
|
||||
startDrawWithResult(resultIndices, callback) {
|
||||
// 检查是否已初始化
|
||||
if (!this.isInitialized) {
|
||||
console.error("老虎机尚未初始化，请先调用init方法");
|
||||
return this;
|
||||
}
|
||||
|
||||
// 检查参数
|
||||
if (!resultIndices || !Array.isArray(resultIndices)) {
|
||||
console.error("抽奖结果必须是数组");
|
||||
return this;
|
||||
}
|
||||
|
||||
// 模式10特殊处理（批次模式）
|
||||
if (this.internalMode === 10) {
|
||||
// 检查是否有足够的索引
|
||||
if (resultIndices.length < 10) {
|
||||
console.error("模式10需要至少10个索引，当前只有", resultIndices.length);
|
||||
// 自动补足到10个
|
||||
const originalLength = resultIndices.length;
|
||||
for (let i = originalLength; i < 10; i++) {
|
||||
resultIndices.push(Math.floor(Math.random() * this.prizes.length));
|
||||
}
|
||||
console.log("[批次抽奖] 自动补足索引到10个:", resultIndices);
|
||||
}
|
||||
|
||||
console.log("[批次抽奖] 检测到模式10，启用批次模式，共", resultIndices.length, "个索引");
|
||||
|
||||
// 保存回调函数
|
||||
this.drawResultCallback = null;
|
||||
this.batchCallback = typeof callback === 'function' ? callback : null;
|
||||
|
||||
// 初始化批次模式
|
||||
this.isBatchMode = true;
|
||||
this.batchCount = 0;
|
||||
this.batchResults = [];
|
||||
this.batchIndices = resultIndices;
|
||||
|
||||
// 重置跳过按钮透明度
|
||||
this.skipButtonOpacity = 0;
|
||||
|
||||
// 显示老虎机
|
||||
this.show();
|
||||
let that=this;
|
||||
setTimeout(() => {
|
||||
// 确保DOM已渲染完成后再调用play方法
|
||||
this.$nextTick(() => {
|
||||
// 检查组件是否已初始化
|
||||
if (this.$refs.myLucky) {
|
||||
console.log("[批次抽奖] 开始第一批次抽奖");
|
||||
// 开始第一批次抽奖
|
||||
this.$refs.myLucky.play();
|
||||
|
||||
// 播放抽奖音乐
|
||||
if (that.bgmCtx && that.bgmCtx.slotBgm) {
|
||||
console.log("[批次抽奖] 播放第一批次抽奖音乐");
|
||||
that.bgmCtx.slotBgm.seek(0);
|
||||
that.bgmCtx.slotBgm.play();
|
||||
} else {
|
||||
console.log("[批次抽奖] 未找到音乐上下文，无法播放音乐");
|
||||
}
|
||||
|
||||
// 渐显跳过按钮
|
||||
setTimeout(() => {
|
||||
this.skipButtonOpacity = 1;
|
||||
}, 1000);
|
||||
|
||||
// 2秒后停止第一批次抽奖
|
||||
setTimeout(() => {
|
||||
// 使用前5个索引作为第一批次结果
|
||||
const firstBatchIndices = resultIndices.slice(0, 5);
|
||||
console.log("[批次抽奖] 停止第一批次抽奖，使用索引:", firstBatchIndices);
|
||||
this.stopDraw(firstBatchIndices);
|
||||
}, 2000);
|
||||
} else {
|
||||
console.error("[批次抽奖] 老虎机组件未初始化");
|
||||
if (this.batchCallback) {
|
||||
this.batchCallback({ success: false, error: "老虎机组件未初始化" });
|
||||
this.batchCallback = null;
|
||||
}
|
||||
this.isBatchMode = false;
|
||||
}
|
||||
});
|
||||
}, 200);
|
||||
|
||||
return this; // 返回this以支持链式调用
|
||||
}
|
||||
|
||||
// 非批次模式的普通处理（原有逻辑）
|
||||
// 保存回调函数
|
||||
this.drawResultCallback = typeof callback === 'function' ? callback : null;
|
||||
|
||||
// 重置跳过按钮透明度
|
||||
this.skipButtonOpacity = 0;
|
||||
|
||||
// 显示老虎机
|
||||
this.show();
|
||||
|
||||
setTimeout(() => {
|
||||
// 确保DOM已渲染完成后再调用play方法
|
||||
this.$nextTick(() => {
|
||||
// 检查组件是否已初始化
|
||||
if (this.$refs.myLucky) {
|
||||
// 开始旋转
|
||||
this.$refs.myLucky.play();
|
||||
|
||||
// 播放抽奖音乐
|
||||
if (this.bgmCtx && this.bgmCtx.slotBgm) {
|
||||
console.log("播放抽奖音乐");
|
||||
this.bgmCtx.slotBgm.seek(0);
|
||||
this.bgmCtx.slotBgm.play();
|
||||
} else {
|
||||
console.log("未找到音乐上下文，无法播放音乐");
|
||||
}
|
||||
|
||||
// 渐显跳过按钮
|
||||
setTimeout(() => {
|
||||
this.skipButtonOpacity = 1;
|
||||
}, 1000);
|
||||
|
||||
// 2秒后自动停止抽奖
|
||||
setTimeout(() => {
|
||||
// 停止抽奖并显示结果
|
||||
this.stopDraw(resultIndices);
|
||||
}, 2000);
|
||||
} else {
|
||||
console.error("老虎机组件未初始化");
|
||||
// 如果有回调，通知调用者初始化失败
|
||||
if (this.drawResultCallback) {
|
||||
this.drawResultCallback({ success: false, error: "老虎机组件未初始化" });
|
||||
this.drawResultCallback = null;
|
||||
}
|
||||
}
|
||||
});
|
||||
}, 200);
|
||||
|
||||
return this; // 返回this以支持链式调用
|
||||
},
|
||||
|
||||
// 开始第二批次抽奖
|
||||
startSecondBatch() {
|
||||
console.log("[批次抽奖] 尝试开始第二批次，批次模式:", this.isBatchMode, "当前模式:", this.internalMode);
|
||||
|
||||
if (!this.isBatchMode || this.internalMode !== 10) {
|
||||
console.error("[批次抽奖] 不是批次模式或模式不是10，无法开始第二批次");
|
||||
return;
|
||||
}
|
||||
|
||||
console.log("[批次抽奖] 开始第二批次抽奖");
|
||||
|
||||
// 重置跳过按钮透明度
|
||||
this.skipButtonOpacity = 0;
|
||||
|
||||
// 重新准备老虎机组件状态
|
||||
try {
|
||||
// 重置老虎机状态，为第二次抽奖准备
|
||||
console.log("[批次抽奖] 重置老虎机状态，准备第二批次抽奖");
|
||||
|
||||
// 重新生成随机排序的抽奖列
|
||||
const arr = Array.from({ length: this.prizes.length }, (_, i) => i);
|
||||
let slots = [];
|
||||
|
||||
// 根据模式创建对应数量的列
|
||||
const slotColumns = this.currentMode;
|
||||
for (let i = 0; i < slotColumns; i++) {
|
||||
slots.push({ order: shuffle([...arr]), speed: 20 });
|
||||
}
|
||||
|
||||
// 更新slots
|
||||
this.slots = slots;
|
||||
} catch (error) {
|
||||
console.error("[批次抽奖] 重置老虎机状态失败:", error);
|
||||
}
|
||||
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs.myLucky) {
|
||||
// 开始第二批次抽奖
|
||||
console.log("[批次抽奖] 调用play方法开始第二批次");
|
||||
this.$refs.myLucky.play();
|
||||
|
||||
// 播放抽奖音乐
|
||||
if (this.bgmCtx && this.bgmCtx.slotBgm) {
|
||||
console.log("[批次抽奖] 播放第二批次抽奖音乐");
|
||||
this.bgmCtx.slotBgm.seek(0);
|
||||
this.bgmCtx.slotBgm.play();
|
||||
} else {
|
||||
console.log("[批次抽奖] 未找到音乐上下文，无法播放音乐");
|
||||
}
|
||||
|
||||
// 渐显跳过按钮
|
||||
setTimeout(() => {
|
||||
this.skipButtonOpacity = 1;
|
||||
}, 1000);
|
||||
|
||||
// 2秒后停止第二批次抽奖
|
||||
setTimeout(() => {
|
||||
// 为第二批次生成随机索引或使用预设索引
|
||||
let indices = [];
|
||||
if (this.batchIndices && this.batchIndices.length > 5) {
|
||||
// 使用预设的第二批次索引
|
||||
indices = this.batchIndices.slice(5, 10);
|
||||
console.log("[批次抽奖] 使用预设的第二批次索引", indices);
|
||||
} else {
|
||||
// 生成随机索引
|
||||
for (let i = 0; i < 5; i++) {
|
||||
indices.push(Math.floor(Math.random() * this.prizes.length));
|
||||
}
|
||||
console.log("[批次抽奖] 生成随机第二批次索引", indices);
|
||||
}
|
||||
this.stopDraw(indices);
|
||||
}, 2000);
|
||||
} else {
|
||||
console.error("[批次抽奖] 第二批次无法启动，老虎机组件未找到");
|
||||
|
||||
// 如果组件未找到，直接结束批次并返回结果
|
||||
if (this.batchCallback && typeof this.batchCallback === 'function') {
|
||||
const result = {
|
||||
allPrizes: this.batchResults,
|
||||
message: `第二批次抽奖失败，返回已有结果`,
|
||||
error: "老虎机组件未找到",
|
||||
success: false
|
||||
};
|
||||
|
||||
this.batchCallback(result);
|
||||
this.batchCallback = null;
|
||||
|
||||
// 重置批次状态
|
||||
this.isBatchMode = false;
|
||||
this.batchCount = 0;
|
||||
this.batchResults = [];
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
// 不再自动初始化
|
||||
|
|
@ -486,7 +963,7 @@ export default {
|
|||
mode: {
|
||||
immediate: true,
|
||||
handler(newVal) {
|
||||
if ([1, 3, 5, '1', '3', '5'].includes(newVal)) {
|
||||
if ([1, 3, 5, 10, '1', '3', '5', '10'].includes(newVal)) {
|
||||
this.internalMode = parseInt(newVal);
|
||||
}
|
||||
}
|
||||
|
|
@ -567,4 +1044,21 @@ export default {
|
|||
box-sizing: border-box;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
// 跳过动画按钮样式
|
||||
.skip-animation {
|
||||
color: #249073;
|
||||
font-size: 21rpx;
|
||||
text-align: center;
|
||||
padding-top: 20rpx;
|
||||
padding-bottom: 10rpx;
|
||||
display: inline-block;
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s ease;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.skip-animation:active {
|
||||
opacity: 0.7;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -38,8 +38,9 @@
|
|||
</text>
|
||||
</view>
|
||||
|
||||
<collect-btn v-if="pageData && pageData.goods" :goods-id="pageData.goods.id"
|
||||
:goods-num="pageData.goods.num" :is-collected="pageData.goods.collection_is"
|
||||
<collect-btn v-if="pageData && pageData.goods && pageData.goods.collection_is != null"
|
||||
:goods-id="pageData.goods.id" :goods-num="pageData.goods.num"
|
||||
:is-collected="pageData.goods.collection_is ? true : false"
|
||||
@collection-changed="onCollectionChanged"></collect-btn>
|
||||
|
||||
<view
|
||||
|
|
@ -163,6 +164,9 @@
|
|||
<coupon-pop ref="couponPop"></coupon-pop>
|
||||
<!-- 添加直接引用的预览组件 -->
|
||||
<detail-preview-popup ref="localPreviewPopup"></detail-preview-popup>
|
||||
<!-- 使用抽取的老虎机组件 -->
|
||||
<DetailLucky ref="detailLucky" @end="onLuckyEnd" />
|
||||
<DetailGrandPrize ref="detailGrandPrize" @end="onLuckyEnd" />
|
||||
</view>
|
||||
</page-container>
|
||||
</template>
|
||||
|
|
@ -175,14 +179,19 @@ import DetailButton from '@/components/detail-button/detail-button.vue'
|
|||
// 导入预览组件和方法
|
||||
import DetailPreviewPopup from '@/components/detail-preview-popup/detail-preview-popup.vue'
|
||||
import preview from '@/components/detail-preview-popup/index.js'
|
||||
|
||||
// 导入抽取的抽奖组件
|
||||
import DetailLucky from "@/components/detail-lucky/detail-lucky.vue";
|
||||
//超神特效
|
||||
import DetailGrandPrize from "@/components/detail-lucky/detail-grand-prize.vue";
|
||||
export default {
|
||||
components: {
|
||||
PageContainer,
|
||||
OrderConfirmPopup,
|
||||
DetailListItem,
|
||||
DetailButton,
|
||||
DetailPreviewPopup // 注册预览组件
|
||||
DetailPreviewPopup,
|
||||
DetailLucky,
|
||||
DetailGrandPrize
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -239,12 +248,21 @@ export default {
|
|||
useMoney: true,
|
||||
useIntegral: true,
|
||||
useMoney2: true,
|
||||
isPrizeLoading: false // 是否显示抽奖loading
|
||||
};
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
computed: {},
|
||||
computed: {
|
||||
getGoodList() {
|
||||
if (this.pageData?.goodslist == null) {
|
||||
return [];
|
||||
}
|
||||
return this.pageData.goodslist;
|
||||
}
|
||||
|
||||
},
|
||||
onShareAppMessage() {
|
||||
if (this.$refs["couponPop"] != null) {
|
||||
var co = this.$refs["couponPop"].getfengxiaodata();
|
||||
|
|
@ -309,6 +327,17 @@ export default {
|
|||
},
|
||||
|
||||
methods: {
|
||||
// 老虎机结束抽奖回调
|
||||
onLuckyEnd(data) {
|
||||
console.log("抽奖结束", data);
|
||||
|
||||
// 获取所有中奖奖品
|
||||
// console.log("所有中奖奖品:", data.allPrizes);
|
||||
|
||||
this.$refs.detailLucky.hide();
|
||||
this.bgmCtx.openBgm.play()
|
||||
this.open('resPop')
|
||||
},
|
||||
previewDetail(item) {
|
||||
console.log(item);
|
||||
// 使用本地引入的方法调用预览弹窗
|
||||
|
|
@ -367,41 +396,68 @@ export default {
|
|||
});
|
||||
},
|
||||
|
||||
getPrize(order_num) {
|
||||
async getPrize(order_num) {
|
||||
if (!order_num) {
|
||||
return;
|
||||
}
|
||||
let that = this;
|
||||
setTimeout(() => {
|
||||
this.req({
|
||||
url: "prizeorderlog",
|
||||
data: {
|
||||
order_num,
|
||||
},
|
||||
success: (res) => {
|
||||
if (res.status == 1) {
|
||||
this.prizeData = res.data;
|
||||
|
||||
if (res.data.data.length <= 0) {
|
||||
this.getPrize(order_num);
|
||||
return;
|
||||
}
|
||||
if (that.buyNum == 0 || that.buyNum == null) {
|
||||
if (res.data.prize_num != null) {
|
||||
that.buyNum = res.data.prize_num;
|
||||
}
|
||||
}
|
||||
// this.aniShow = true
|
||||
// setTimeout(() => {
|
||||
// this.aniShow = false
|
||||
this.bgmCtx.openBgm.stop();
|
||||
this.bgmCtx.openBgm.play();
|
||||
this.open("resPop");
|
||||
// }, 1300)
|
||||
let that = this;
|
||||
if (!this.isPrizeLoading) {
|
||||
this.isPrizeLoading = true;
|
||||
uni.showLoading({ title: '加载中...' });
|
||||
}
|
||||
|
||||
|
||||
setTimeout(async () => {
|
||||
const res = await this.$request.post('prizeorderlog', { order_num }, false);
|
||||
if (res.status == 1) {
|
||||
res.data.data.map(item => {
|
||||
item.isChoose = false
|
||||
})
|
||||
console.log(res.data);
|
||||
|
||||
this.prizeData = res.data
|
||||
|
||||
if (res.data.data.length <= 0) {
|
||||
this.getPrize(order_num)
|
||||
return
|
||||
}
|
||||
this.$refs.detailLucky.init(this.getGoodList, this.buyNum);
|
||||
if (that.buyNum == 0 || that.buyNum == null) {
|
||||
if (res.data.prize_num != null) {
|
||||
that.buyNum = res.data.prize_num;
|
||||
}
|
||||
},
|
||||
});
|
||||
}, 500);
|
||||
}
|
||||
if (this.prizeData.data.length > 10) {
|
||||
this.$refs.detailLucky.hide();
|
||||
this.bgmCtx.openBgm.play()
|
||||
this.open('resPop')
|
||||
return;
|
||||
}
|
||||
let chaoshen = this.prizeData.data.findIndex(it => it.shang_id == 34);
|
||||
if (chaoshen != -1) {
|
||||
console.log('抽中超神');
|
||||
uni.hideLoading();
|
||||
this.$refs.detailGrandPrize.init();
|
||||
this.$refs.detailGrandPrize.show();
|
||||
return;
|
||||
}
|
||||
//获取奖品下标
|
||||
let resultIndices = this.prizeData.data.map(it => {
|
||||
// console.log(it.id);
|
||||
const index = this.getGoodList.findIndex(item => item.id == it.goodslist_id);
|
||||
// console.log(index);
|
||||
return index;
|
||||
});
|
||||
// console.log(resultIndices,this.getGoodList, this.prizeData.data, "resultIndices");
|
||||
this.$refs.detailLucky.startDrawWithResult(resultIndices, () => {
|
||||
console.log("抽奖结束");
|
||||
});
|
||||
this.isPrizeLoading = false;
|
||||
uni.hideLoading();
|
||||
}
|
||||
}, 500)
|
||||
|
||||
},
|
||||
|
||||
changePay(e) {
|
||||
|
|
@ -416,15 +472,69 @@ export default {
|
|||
},
|
||||
|
||||
confirmSubmit([type, num, fromNotice = false]) {
|
||||
let url = "ordermoney";
|
||||
if (type === 0) {
|
||||
// 计算订单
|
||||
this.calculateOrder(num);
|
||||
} else if (type === 1) {
|
||||
// 提交订单
|
||||
this.submitOrder(num, fromNotice);
|
||||
}
|
||||
},
|
||||
|
||||
if (type == 1) {
|
||||
url = "orderbuy";
|
||||
calculateOrder(num) {
|
||||
this.buyNum = num;
|
||||
let coupon_id = (this.couponData && this.couponData.id) || ''
|
||||
if (coupon_id != '' && this.useIntegral) {
|
||||
this.useIntegral = false;
|
||||
} else if (this.useIntegral && coupon_id != '') {
|
||||
this.couponData = null;
|
||||
coupon_id = '';
|
||||
}
|
||||
let data = {
|
||||
goods_id: this.pageData.goods.id,
|
||||
prize_num: this.buyNum,
|
||||
goods_num: this.pageData.goods.num,
|
||||
use_money_is: this.useMoney ? 1 : 2,
|
||||
use_integral_is: this.useIntegral ? 1 : 2,
|
||||
coupon_id: coupon_id,
|
||||
use_money2_is: this.useMoney2 ? 1 : 2
|
||||
};
|
||||
|
||||
if (this.$refs.buyNotice.getIsShow() && !fromNotice) {
|
||||
this.$refs.buyNotice.getRule(6);
|
||||
return;
|
||||
}
|
||||
if (this.pageData.goods.type == 5) {
|
||||
data.coupon_id = "";
|
||||
}
|
||||
|
||||
this.req({
|
||||
url: "ordermoney",
|
||||
data,
|
||||
success: (res) => {
|
||||
if (res.status == 1) {
|
||||
if (res.data.coupon_id) {
|
||||
this.couponData = {
|
||||
id: res.data.coupon_id,
|
||||
price: res.data.coupon_price,
|
||||
};
|
||||
}
|
||||
|
||||
this.orderData = res.data;
|
||||
|
||||
// 使用this.$nextTick确保视图已更新，组件已挂载
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs.buyPop) {
|
||||
this.$refs.buyPop.open();
|
||||
} else {
|
||||
console.error('buyPop组件引用不存在');
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
submitOrder(num, fromNotice = false) {
|
||||
if (this.$refs.buyNotice.getIsShow() && !fromNotice) {
|
||||
this.$refs.buyNotice.getRule(6);
|
||||
return;
|
||||
}
|
||||
|
||||
this.buyNum = num;
|
||||
|
|
@ -449,60 +559,35 @@ export default {
|
|||
data.coupon_id = "";
|
||||
}
|
||||
|
||||
this.close("buyPop");
|
||||
|
||||
this.req({
|
||||
url,
|
||||
url: "orderbuy",
|
||||
data,
|
||||
success: async (res) => {
|
||||
if (res.status == 1) {
|
||||
if (type == 0) {
|
||||
if (res.data.coupon_id) {
|
||||
this.couponData = {
|
||||
id: res.data.coupon_id,
|
||||
price: res.data.coupon_price,
|
||||
};
|
||||
if (res.data.status == 1) {
|
||||
const status = await this.$platform.pay({
|
||||
data: res.data.res
|
||||
})
|
||||
|
||||
if (status == "success") {
|
||||
this.getPrize(res.data.order_num);
|
||||
this.doRefresh();
|
||||
}
|
||||
|
||||
this.orderData = res.data;
|
||||
|
||||
// 使用this.$nextTick确保视图已更新，组件已挂载
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs.buyPop) {
|
||||
this.$refs.buyPop.open();
|
||||
} else {
|
||||
console.error('buyPop组件引用不存在');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (type == 1) {
|
||||
this.close("buyPop");
|
||||
|
||||
if (res.data.status == 1) {
|
||||
const status = await this.$platform.pay({
|
||||
data: res.data.res
|
||||
})
|
||||
|
||||
if (status == "success") {
|
||||
} else {
|
||||
this.$c.toast({
|
||||
title: res.msg,
|
||||
duration: 500,
|
||||
success: () => {
|
||||
this.getPrize(res.data.order_num);
|
||||
this.doRefresh();
|
||||
}
|
||||
} else {
|
||||
this.$c.toast({
|
||||
title: res.msg,
|
||||
duration: 500,
|
||||
success: () => {
|
||||
this.getPrize(res.data.order_num);
|
||||
this.doRefresh();
|
||||
},
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
if (type == 1) {
|
||||
this.close("buyPop");
|
||||
}
|
||||
},
|
||||
|
||||
onCollectionChanged() {
|
||||
|
|
|
|||
|
|
@ -141,8 +141,8 @@
|
|||
</template>
|
||||
|
||||
<!-- 选项按钮 冲一发-->
|
||||
<detail-button v-if="pageData" :pageData="pageData" :isWuxian="true" @button-click="confirmSubmit"
|
||||
@button-wx-click="wuxianchou"></detail-button>
|
||||
<detail-button v-if="pageData" :pageData="pageData" :isWuxian="true"
|
||||
@button-click="confirmSubmit"></detail-button>
|
||||
|
||||
<!-- 抽奖结果 -->
|
||||
<uni-popup ref="resPop" type="center" mask-background-color="rgba(0,0,0,0.8)">
|
||||
|
|
@ -241,31 +241,10 @@
|
|||
<detail-preview-popup ref="localPreviewPopup"></detail-preview-popup>
|
||||
</view>
|
||||
|
||||
<!-- 老虎机 -->
|
||||
<uni-popup ref="slotPop" type="center">
|
||||
|
||||
<view class="slot-pop" style="">
|
||||
|
||||
<view class="slot-view">
|
||||
<view class=""
|
||||
style="width: 100%; height: 152.78rpx; background-color: aquamarine; margin-top: 195rpx;">
|
||||
|
||||
<tiner-swiper-loop ref="lottryRef" :items="productList" :aTime="5" :isLottry="true"
|
||||
:excessCount="0" :disableTouch="true" style="height: 152.78rpx; width: 100%;">
|
||||
<template v-slot="{ item, index }">
|
||||
<view class="item-lottry">{{ item.title }}</view>
|
||||
</template>
|
||||
</tiner-swiper-loop>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<text style="color: #484848; font-size: 19rpx;">动画结果因设备差异可能会显示异常，获得赏品以（恭喜获得）结果为准</text>
|
||||
</view>
|
||||
|
||||
</uni-popup>
|
||||
<!-- 使用抽取的老虎机组件 -->
|
||||
<DetailLucky ref="detailLucky" @end="onLuckyEnd" />
|
||||
<DetailGrandPrize ref="detailGrandPrize" @end="onLuckyEnd" />
|
||||
</page-container>
|
||||
</template>
|
||||
|
||||
|
|
@ -279,8 +258,10 @@ import DetailPreviewPopup from '@/components/detail-preview-popup/detail-preview
|
|||
import preview from '@/components/detail-preview-popup/index.js'
|
||||
import DetailWuxianLingzhu from '@/components/detail-wuxian-lingzhu/detail-wuxian-lingzhu.vue'
|
||||
import DetailWuxianRage from '@/components/detail-wuxian-rage/detail-wuxian-rage.vue'
|
||||
// 导入抽取的老虎机组件
|
||||
// 导入抽取的抽奖组件
|
||||
import DetailLucky from "@/components/detail-lucky/detail-lucky.vue";
|
||||
//超神特效
|
||||
import DetailGrandPrize from "@/components/detail-lucky/detail-grand-prize.vue";
|
||||
export default {
|
||||
components: {
|
||||
PageContainer,
|
||||
|
|
@ -290,7 +271,8 @@ export default {
|
|||
DetailPreviewPopup,
|
||||
DetailWuxianLingzhu,
|
||||
DetailWuxianRage, // 注册新组件
|
||||
DetailLucky
|
||||
DetailLucky,
|
||||
DetailGrandPrize
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -336,7 +318,8 @@ export default {
|
|||
logList: [],
|
||||
choujiangloading: false,
|
||||
goods: null,
|
||||
productList: []
|
||||
productList: [],
|
||||
isPrizeLoading: false // 是否显示抽奖loading
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -350,6 +333,12 @@ export default {
|
|||
console.log(arr.length)
|
||||
|
||||
return arr.length
|
||||
},
|
||||
getGoodList() {
|
||||
if (this.pageData?.goods_list?.data == null) {
|
||||
return [];
|
||||
}
|
||||
return this.pageData.goods_list.data;
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -423,8 +412,10 @@ export default {
|
|||
console.log("抽奖结束", data);
|
||||
|
||||
// 获取所有中奖奖品
|
||||
console.log("所有中奖奖品:", data.allPrizes);
|
||||
// console.log("所有中奖奖品:", data.allPrizes);
|
||||
this.$refs.detailLucky.hide();
|
||||
this.bgmCtx.openBgm.play()
|
||||
this.open('resPop')
|
||||
},
|
||||
previewDetail(item, a) {
|
||||
|
||||
|
|
@ -532,43 +523,60 @@ export default {
|
|||
})
|
||||
},
|
||||
|
||||
getPrize(order_num) {
|
||||
async getPrize(order_num) {
|
||||
if (!order_num) {
|
||||
return
|
||||
}
|
||||
|
||||
if (!this.isPrizeLoading) {
|
||||
this.isPrizeLoading = true;
|
||||
uni.showLoading({ title: '加载中...' });
|
||||
}
|
||||
|
||||
let that = this;
|
||||
setTimeout(() => {
|
||||
this.req({
|
||||
url: 'infinite_prizeorderlog',
|
||||
data: {
|
||||
order_num
|
||||
},
|
||||
success: res => {
|
||||
if (res.status == 1) {
|
||||
res.data.data.map(item => {
|
||||
item.isChoose = false
|
||||
})
|
||||
|
||||
this.prizeData = res.data
|
||||
setTimeout(async () => {
|
||||
const res = await this.$request.post('infinite_prizeorderlog', { order_num }, false);
|
||||
if (res.status == 1) {
|
||||
res.data.data.map(item => {
|
||||
item.isChoose = false
|
||||
})
|
||||
console.log(res.data);
|
||||
|
||||
if (res.data.data.length <= 0) {
|
||||
this.getPrize(order_num)
|
||||
return
|
||||
}
|
||||
// console.log(' res.data.prize_num', res.data.prize_num);
|
||||
this.prizeData = res.data
|
||||
|
||||
if (that.buyNum == 0 || that.buyNum == null) {
|
||||
if (res.data.prize_num != null) {
|
||||
that.buyNum = res.data.prize_num;
|
||||
}
|
||||
}
|
||||
// that.nu
|
||||
this.bgmCtx.openBgm.play()
|
||||
this.open('resPop')
|
||||
// }, 1300)
|
||||
if (res.data.data.length <= 0) {
|
||||
this.getPrize(order_num)
|
||||
return
|
||||
}
|
||||
this.$refs.detailLucky.init(this.getGoodList, this.buyNum);
|
||||
if (that.buyNum == 0 || that.buyNum == null) {
|
||||
if (res.data.prize_num != null) {
|
||||
that.buyNum = res.data.prize_num;
|
||||
}
|
||||
}
|
||||
})
|
||||
let chaoshen = this.prizeData.data.findIndex(it => it.shang_id == 34);
|
||||
if (chaoshen != -1) {
|
||||
console.log('抽中超神');
|
||||
uni.hideLoading();
|
||||
this.$refs.detailGrandPrize.init();
|
||||
this.$refs.detailGrandPrize.show();
|
||||
return;
|
||||
}
|
||||
//获取奖品下标
|
||||
let resultIndices = this.prizeData.data.map(it => {
|
||||
// console.log(it.id);
|
||||
const index = this.getGoodList.findIndex(item => item.id == it.goodslist_id);
|
||||
// console.log(index);
|
||||
return index;
|
||||
});
|
||||
// console.log(resultIndices,this.getGoodList, this.prizeData.data, "resultIndices");
|
||||
this.$refs.detailLucky.startDrawWithResult(resultIndices, () => {
|
||||
console.log("抽奖结束");
|
||||
});
|
||||
this.isPrizeLoading = false;
|
||||
uni.hideLoading();
|
||||
}
|
||||
}, 500)
|
||||
},
|
||||
|
||||
|
|
@ -587,32 +595,24 @@ export default {
|
|||
},
|
||||
|
||||
confirmSubmit([type, num, flag]) {
|
||||
if (type === 0) {
|
||||
// 计算订单
|
||||
this.calculateOrder(num);
|
||||
} else if (type === 1) {
|
||||
// 提交订单
|
||||
this.submitOrder(num, flag).then(res => {
|
||||
console.log(res);
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// this.$refs.slotPop.open();
|
||||
// this.bgmCtx.slotBgm.play()
|
||||
// this.$refs.lottryRef.startDraw();
|
||||
// return;
|
||||
|
||||
this.choujiangloading = true;
|
||||
uni.showLoading({
|
||||
title: '加载中'
|
||||
});
|
||||
|
||||
let data = {
|
||||
goods_id: this.optData.goods_id,
|
||||
goods_num: this.pageData.goods.num,
|
||||
num: num,
|
||||
use_money: this.useMoney ? 1 : 0,
|
||||
use_integral: this.useIntegral ? 1 : 0,
|
||||
use_money2: this.useMoney2 ? 1 : 0,
|
||||
prize_id: this.optData.prize_id,
|
||||
};
|
||||
|
||||
let url = 'infinite_ordermoney'
|
||||
console.log(type);
|
||||
// 计算订单金额
|
||||
calculateOrder(num) {
|
||||
uni.showLoading({ title: '计算中...' });
|
||||
|
||||
this.buyNum = num;
|
||||
|
||||
// 处理优惠券与积分互斥
|
||||
let coupon_id = (this.couponData && this.couponData.id) || ''
|
||||
if (coupon_id != '' && this.useIntegral) {
|
||||
this.useIntegral = false;
|
||||
|
|
@ -620,6 +620,8 @@ export default {
|
|||
this.couponData = null;
|
||||
coupon_id = '';
|
||||
}
|
||||
|
||||
// 构建请求数据
|
||||
let postData = {
|
||||
goods_id: this.pageData.goods.id,
|
||||
prize_num: this.buyNum,
|
||||
|
|
@ -628,67 +630,105 @@ export default {
|
|||
use_money2_is: this.useMoney2 ? 1 : 2,
|
||||
coupon_id: coupon_id,
|
||||
};
|
||||
if (type == 1) {
|
||||
url = 'infinite_orderbuy'
|
||||
|
||||
if (this.$refs.buyNotice.getIsShow() && !flag) {
|
||||
this.$refs.buyNotice.getRule(6)
|
||||
return
|
||||
}
|
||||
postData = this.$platform.getPayData(url, postData);
|
||||
}
|
||||
|
||||
// 发送请求
|
||||
this.req({
|
||||
url,
|
||||
url: 'infinite_ordermoney',
|
||||
data: postData,
|
||||
success: async res => {
|
||||
success: res => {
|
||||
if (res.status == 1) {
|
||||
if (type == 0) {
|
||||
if (res.data.coupon_id) {
|
||||
this.couponData = {
|
||||
id: res.data.coupon_id,
|
||||
price: res.data.coupon_price
|
||||
}
|
||||
// 保存服务器返回的优惠券信息
|
||||
if (res.data.coupon_id) {
|
||||
this.couponData = {
|
||||
id: res.data.coupon_id,
|
||||
price: res.data.coupon_price
|
||||
}
|
||||
this.orderData = res.data
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs.buyPop) {
|
||||
this.$refs.buyPop.open()
|
||||
} else {
|
||||
console.error('buyPop组件未找到')
|
||||
}
|
||||
})
|
||||
}
|
||||
if (type == 1) {
|
||||
this.close('buyPop')
|
||||
|
||||
if (res.data.status == 1) {
|
||||
const status = await this.$platform.pay({
|
||||
data: res.data.res
|
||||
})
|
||||
|
||||
if (status == 'success') {
|
||||
this.getPrize(res.data.order_num);
|
||||
this.doRefresh()
|
||||
// this.$refs.detailLucky.init([], this.buyNum);
|
||||
}
|
||||
// 保存订单数据
|
||||
this.orderData = res.data
|
||||
// 显示订单确认弹窗
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs.buyPop) {
|
||||
this.$refs.buyPop.open()
|
||||
} else {
|
||||
this.$c.toast({
|
||||
title: res.msg,
|
||||
duration: 500,
|
||||
success: () => {
|
||||
this.getPrize(res.data.order_num)
|
||||
this.doRefresh()
|
||||
}
|
||||
})
|
||||
console.error('buyPop组件未找到')
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
uni.hideLoading();
|
||||
}
|
||||
})
|
||||
if (type == 1) {
|
||||
this.close('buyPop')
|
||||
});
|
||||
},
|
||||
|
||||
// 支付订单
|
||||
async submitOrder(num, flag) {
|
||||
this.choujiangloading = true;
|
||||
uni.showLoading({ title: '提交订单中' });
|
||||
|
||||
this.buyNum = num;
|
||||
|
||||
// 处理优惠券与积分互斥
|
||||
let coupon_id = (this.couponData && this.couponData.id) || ''
|
||||
if (coupon_id != '' && this.useIntegral) {
|
||||
this.useIntegral = false;
|
||||
} else if (this.useIntegral && coupon_id != '') {
|
||||
this.couponData = null;
|
||||
coupon_id = '';
|
||||
}
|
||||
|
||||
// 检查是否需要显示购买提示
|
||||
if (this.$refs.buyNotice.getIsShow() && !flag) {
|
||||
this.$refs.buyNotice.getRule(6)
|
||||
uni.hideLoading();
|
||||
this.choujiangloading = false;
|
||||
return
|
||||
}
|
||||
|
||||
// 构建基础数据
|
||||
let baseData = {
|
||||
goods_id: this.pageData.goods.id,
|
||||
prize_num: this.buyNum,
|
||||
use_money_is: this.useMoney ? 1 : 2,
|
||||
use_integral_is: this.useIntegral ? 1 : 2,
|
||||
use_money2_is: this.useMoney2 ? 1 : 2,
|
||||
coupon_id: coupon_id,
|
||||
};
|
||||
|
||||
// 获取支付数据
|
||||
let postData = this.$platform.getPayData('infinite_orderbuy', baseData);
|
||||
|
||||
// 关闭确认弹窗
|
||||
this.close('buyPop');
|
||||
const res = await this.$request.post('infinite_orderbuy', postData);
|
||||
console.log(res);
|
||||
uni.hideLoading();
|
||||
if (res.status == 1) {
|
||||
if (res.data.status == 1) {
|
||||
// 需要支付
|
||||
const status = await this.$platform.pay({
|
||||
data: res.data.res
|
||||
})
|
||||
|
||||
if (status == 'success') {
|
||||
// 支付成功
|
||||
this.getPrize(res.data.order_num);
|
||||
this.getData(false)
|
||||
// this.doRefresh();
|
||||
}
|
||||
} else {
|
||||
// 无需支付（如使用积分等）
|
||||
this.$c.toast({
|
||||
title: res.msg,
|
||||
duration: 500,
|
||||
success: () => {
|
||||
this.getPrize(res.data.order_num);
|
||||
this.getData(false)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
this.choujiangloading = false;
|
||||
|
||||
},
|
||||
|
||||
doRefresh() {
|
||||
|
|
@ -760,42 +800,25 @@ export default {
|
|||
})
|
||||
},
|
||||
|
||||
getData() {
|
||||
this.req({
|
||||
url: 'infinite_goodsdetail',
|
||||
data: {
|
||||
goods_id: this.optData.goods_id
|
||||
},
|
||||
success: res => {
|
||||
if (res.status == 1) {
|
||||
this.goods = res.data.goods;
|
||||
res.data.goodslist.forEach(item => {
|
||||
this.$set(item, 'open', false)
|
||||
})
|
||||
if (res.data.goods.type_text) {
|
||||
this.title = res.data.goods.type_text
|
||||
}
|
||||
this.pageData = res.data
|
||||
let goodType = this.$config.getGoodTypeFind(this.pageData.goods.type);
|
||||
this.useMoney = goodType.pay_balance == 1 ? true : false;
|
||||
this.useIntegral = goodType.pay_currency == 1 ? true : false;
|
||||
this.useMoney2 = goodType.pay_currency2 == 1 ? true : false;
|
||||
async getData(isLoading = true) {
|
||||
|
||||
console.log(this.pageData);
|
||||
|
||||
this.pageData.goodslist.forEach(item => {
|
||||
|
||||
item.goods_list.forEach(item => {
|
||||
this.productList.push(item);
|
||||
})
|
||||
|
||||
});
|
||||
|
||||
console.log("productList", this.productList);
|
||||
|
||||
}
|
||||
const res = await this.$request.post("infinite_goodsdetail", { goods_id: this.optData.goods_id }, isLoading);
|
||||
if (res.status == 1) {
|
||||
this.goods = res.data.goods;
|
||||
res.data.goodslist.forEach(item => {
|
||||
this.$set(item, 'open', false)
|
||||
})
|
||||
if (res.data.goods.type_text) {
|
||||
this.title = res.data.goods.type_text
|
||||
}
|
||||
})
|
||||
this.pageData = res.data;
|
||||
let goodType = this.$config.getGoodTypeFind(this.pageData.goods.type);
|
||||
this.useMoney = goodType.pay_balance == 1 ? true : false;
|
||||
this.useIntegral = goodType.pay_currency == 1 ? true : false;
|
||||
this.useMoney2 = goodType.pay_currency2 == 1 ? true : false;
|
||||
console.log(this.pageData);
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
close(e) {
|
||||
|
|
@ -851,72 +874,6 @@ export default {
|
|||
return "#FFEFB4";
|
||||
break;
|
||||
}
|
||||
},
|
||||
async wuxianchou() {
|
||||
this.useMoney = true;
|
||||
this.useIntegral = false;
|
||||
this.useMoney2 = false;
|
||||
if (this.choujiangloading) {
|
||||
this.choujiangloading = false;
|
||||
|
||||
} else {
|
||||
this.choujiangloading = true;
|
||||
this.wuxianchou1();
|
||||
}
|
||||
},
|
||||
async wuxianchou1() {
|
||||
|
||||
|
||||
uni.showLoading({
|
||||
title: '加载中'
|
||||
});
|
||||
let url = 'infinite_orderbuy'
|
||||
this.buyNum = 10;
|
||||
const {
|
||||
status,
|
||||
data,
|
||||
msg
|
||||
} = await this.req({
|
||||
url,
|
||||
data: {
|
||||
goods_id: this.pageData.goods.id,
|
||||
prize_num: this.buyNum,
|
||||
use_money_is: this.useMoney ? 1 : 2,
|
||||
use_integral_is: this.useIntegral ? 1 : 2,
|
||||
use_money2_is: this.useMoney2 ? 1 : 2,
|
||||
coupon_id: 0,
|
||||
}
|
||||
});
|
||||
if (status == 0) {
|
||||
this.$c.msg(msg);
|
||||
return;
|
||||
}
|
||||
if (status == 1) {
|
||||
if (data.status == 1) {
|
||||
const status = await this.$c.wxMpPay({
|
||||
data: data.res
|
||||
})
|
||||
|
||||
if (status == 'success') {
|
||||
this.getPrize(data.order_num)
|
||||
|
||||
}
|
||||
} else {
|
||||
this.$c.toast({
|
||||
title: msg,
|
||||
duration: 500,
|
||||
success: () => {
|
||||
this.getPrize(data.order_num)
|
||||
setTimeout(() => {
|
||||
if (this.choujiangloading) {
|
||||
this.close('resPop');
|
||||
this.wuxianchou1();
|
||||
}
|
||||
}, 2000)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -43,18 +43,8 @@
|
|||
<image class="" style="width: 200rpx; height: 200rpx; border-radius: 10rpx" :src="item.imgurl"
|
||||
@click="$c.navTo(item, index)"></image>
|
||||
</view>
|
||||
<!-- <view class="" style="width: 181rpx; height: 181rpx; background-color: aquamarine;"></view>
|
||||
<view class="" style="width: 181rpx; height: 181rpx; background-color: aquamarine;"></view> -->
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- <scroll-view scroll-x class="tab-list">
|
||||
<view @click="getlist(i)"
|
||||
:style="{background:tabCur == i? 'url('+ $img1('index/tabCheck.png')+') no-repeat 0 0 / 100% 100%':'none'}"
|
||||
v-for="(v, i) in tabList" :key="i" class="tab-list-item center">
|
||||
<text :class="{active: tabCur == i}">{{ v.title }}</text>
|
||||
</view>
|
||||
</scroll-view> -->
|
||||
<scroll-view class="tab" scroll-x>
|
||||
<view class="tab-item" v-for="(item, i) in tabList" :key="i" :class="{ act: tabCur == i }"
|
||||
@click="getlist(i)">
|
||||
|
|
|
|||
|
|
@ -5,15 +5,20 @@
|
|||
|
||||
<!-- 页面上的开始抽奖按钮 -->
|
||||
<button class="start-draw-btn" @click="startDrawing">开始抽奖</button>
|
||||
|
||||
<!-- 新增的传入结果抽奖按钮 -->
|
||||
<button class="start-draw-btn custom-draw-btn" @click="startCustomDraw">自定义结果抽奖</button>
|
||||
<button class="start-draw-btn custom-draw-btn" @click="startGrandPrize" >超神特效</button>
|
||||
<DetailGrandPrize ref="detailGrandPrize" @end="onLuckyEnd" />
|
||||
</page-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 导入抽取的老虎机组件
|
||||
import DetailLucky from "@/components/detail-lucky/detail-lucky.vue";
|
||||
|
||||
import DetailGrandPrize from "@/components/detail-lucky/detail-grand-prize.vue";
|
||||
export default {
|
||||
components: { DetailLucky },
|
||||
components: { DetailLucky, DetailGrandPrize },
|
||||
data() {
|
||||
return {
|
||||
// 示例奖品列表
|
||||
|
|
@ -52,6 +57,10 @@ export default {
|
|||
this.initLuckyMachine();
|
||||
},
|
||||
methods: {
|
||||
startGrandPrize() {
|
||||
this.$refs.detailGrandPrize.init();
|
||||
this.$refs.detailGrandPrize.show();
|
||||
},
|
||||
// 初始化老虎机
|
||||
initLuckyMachine() {
|
||||
try {
|
||||
|
|
@ -75,13 +84,6 @@ export default {
|
|||
// 模拟2秒后停止抽奖
|
||||
setTimeout(() => {
|
||||
try {
|
||||
// 生成5个随机中奖索引或指定特定奖品
|
||||
// 方法1：随机生成 - 不传参数则自动随机
|
||||
// this.$refs.detailLucky.stopDraw();
|
||||
|
||||
// 方法2：指定相同奖品 - 所有列都显示同一个奖品
|
||||
// this.$refs.detailLucky.stopDraw([0, 0, 0, 0, 0]);
|
||||
|
||||
// 方法3：指定不同奖品 - 每列显示不同奖品
|
||||
const prizeIndices = [0, 1, 0, 1, 0]; // 示例：交替显示两种奖品
|
||||
this.$refs.detailLucky.stopDraw(prizeIndices);
|
||||
|
|
@ -102,6 +104,63 @@ export default {
|
|||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 新增方法：自定义结果抽奖
|
||||
startCustomDraw() {
|
||||
// 调用自定义方法示例
|
||||
const prizeIndices = [1, 1, 1]; // 示例：所有列都显示第二个奖品
|
||||
this.startLuckyDraw(prizeIndices, () => {
|
||||
console.log("自定义抽奖完成的回调执行了");
|
||||
uni.showToast({
|
||||
title: "自定义抽奖完成",
|
||||
icon: "success",
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 开始抽奖并传入抽奖结果
|
||||
* @param {Array} resultIndices 抽奖结果索引数组
|
||||
* @param {Function} callback 抽奖结束后的回调函数
|
||||
*/
|
||||
startLuckyDraw(resultIndices, callback) {
|
||||
try {
|
||||
if (!resultIndices || !Array.isArray(resultIndices)) {
|
||||
console.error("抽奖结果必须是数组");
|
||||
return;
|
||||
}
|
||||
|
||||
// 开始抽奖
|
||||
this.$refs.detailLucky.startDraw(() => {
|
||||
console.log("抽奖开始了，将在2秒后展示指定结果");
|
||||
|
||||
// 2秒后停止抽奖并显示结果
|
||||
setTimeout(() => {
|
||||
try {
|
||||
this.$refs.detailLucky.stopDraw(resultIndices);
|
||||
|
||||
// 如果有回调函数，在onLuckyEnd中触发
|
||||
if (typeof callback === 'function') {
|
||||
// 保存回调以在抽奖结束时调用
|
||||
this.luckyDrawCallback = callback;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("停止抽奖时出错:", error);
|
||||
uni.showToast({
|
||||
title: "抽奖异常，请重试",
|
||||
icon: "none",
|
||||
});
|
||||
}
|
||||
}, 2000);
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("开始抽奖时出错:", error);
|
||||
uni.showToast({
|
||||
title: "抽奖异常，请重试",
|
||||
icon: "none",
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 老虎机开始抽奖回调
|
||||
onLuckyStart() {
|
||||
|
|
@ -113,14 +172,25 @@ export default {
|
|||
console.log("抽奖结束", data);
|
||||
|
||||
// 获取所有中奖奖品
|
||||
console.log("所有中奖奖品:", data.allPrizes);
|
||||
console.log("所有中奖奖品:", data?.allPrizes);
|
||||
|
||||
// 检查是否是跳过动画
|
||||
if (data.skipped) {
|
||||
console.log("用户跳过了动画");
|
||||
}
|
||||
|
||||
this.$refs.detailLucky.hide();
|
||||
// 设置弹窗数据
|
||||
this.luckyMessage = data.message;
|
||||
this.luckyPrize = data.prizeInfo;
|
||||
|
||||
|
||||
// 打开弹窗
|
||||
this.$refs.luckyPopup && this.$refs.luckyPopup.open();
|
||||
|
||||
// 如果存在回调函数，则执行
|
||||
if (this.luckyDrawCallback && typeof this.luckyDrawCallback === 'function') {
|
||||
this.luckyDrawCallback(data);
|
||||
// 清除回调，避免重复调用
|
||||
this.luckyDrawCallback = null;
|
||||
}
|
||||
},
|
||||
|
||||
// 弹窗确认按钮点击处理
|
||||
|
|
@ -151,4 +221,10 @@ export default {
|
|||
border-radius: 50rpx;
|
||||
padding: 20rpx 40rpx;
|
||||
}
|
||||
|
||||
// 自定义抽奖按钮样式
|
||||
.custom-draw-btn {
|
||||
background-color: #4a9eff;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user