diff --git a/App.vue b/App.vue index 27ba6ed..306a209 100644 --- a/App.vue +++ b/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; + diff --git a/components/detail-lucky/detail-grand-prize.vue b/components/detail-lucky/detail-grand-prize.vue new file mode 100644 index 0000000..747bc68 --- /dev/null +++ b/components/detail-lucky/detail-grand-prize.vue @@ -0,0 +1,113 @@ + + + + + diff --git a/components/detail-lucky/detail-lucky.vue b/components/detail-lucky/detail-lucky.vue index ce6df87..f591ccc 100644 --- a/components/detail-lucky/detail-lucky.vue +++ b/components/detail-lucky/detail-lucky.vue @@ -2,29 +2,18 @@ - + - + - 动画结果因设备差异可能会显示异常，获得赏品以（恭喜获得）结果为准 - 跳过动画 + + 动画结果因设备差异可能会显示异常，获得赏品以（恭喜获得）结果为准 + 跳过动画 @@ -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; +} diff --git a/pages/shouye/detail.vue b/pages/shouye/detail.vue index 4945988..febe678 100644 --- a/pages/shouye/detail.vue +++ b/pages/shouye/detail.vue @@ -38,8 +38,9 @@ - + + + @@ -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() { diff --git a/pages/shouye/detail_wuxian.vue b/pages/shouye/detail_wuxian.vue index d3455ed..d567827 100644 --- a/pages/shouye/detail_wuxian.vue +++ b/pages/shouye/detail_wuxian.vue @@ -141,8 +141,8 @@ - + @@ -241,31 +241,10 @@ - - - - - - - - - - - - - - - 动画结果因设备差异可能会显示异常，获得赏品以（恭喜获得）结果为准 - - - + @@ -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) - } - }) - } - } } } } diff --git a/pages/shouye/index.vue b/pages/shouye/index.vue index 123c587..3c5fc52 100644 --- a/pages/shouye/index.vue +++ b/pages/shouye/index.vue @@ -43,18 +43,8 @@ - - - diff --git a/pages/shouye/slots.vue b/pages/shouye/slots.vue index 5a40b5f..b3869e2 100644 --- a/pages/shouye/slots.vue +++ b/pages/shouye/slots.vue @@ -5,15 +5,20 @@ + + + + +