From 66b12684e596037291319cbd73c7e5e56dd4cf51 Mon Sep 17 00:00:00 2001 From: zpc Date: Mon, 19 May 2025 01:38:02 +0800 Subject: [PATCH] =?UTF-8?q?=E4=B8=B4=E6=97=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- common/common.js | 2 +- common/platform/AppPlatform.js | 2 +- common/platform/BasePlatform.js | 10 +- common/platform/H5Platform.js | 2 +- common/platform/MiniProgramPlatform.js | 42 ++- components/detail-lucky/detail-lucky.vue | 317 ++++++++++------------- package/index/leitai.vue | 2 +- package/index/lian-ji.vue | 2 +- pages/infinite/bonus_house_details.vue | 2 +- pages/mall/index.vue | 4 +- pages/sangdai/sangdai.vue | 2 +- pages/shouye/detail.vue | 2 +- pages/shouye/detail_wuxian.vue | 2 +- pages/user/recharge-page.vue | 2 +- 14 files changed, 190 insertions(+), 203 deletions(-) diff --git a/common/common.js b/common/common.js index 1d9636d..db4abc7 100644 --- a/common/common.js +++ b/common/common.js @@ -156,7 +156,7 @@ export default { provider = 'weixin', data }) { - console.log('wxdata', data) + console.log('wxdata', data,this) // #ifdef H5 console.log('进入h5支付', data) return new Promise((resolve, reject) => { diff --git a/common/platform/AppPlatform.js b/common/platform/AppPlatform.js index 37cd38f..6434590 100644 --- a/common/platform/AppPlatform.js +++ b/common/platform/AppPlatform.js @@ -8,7 +8,7 @@ class AppPlatform extends BasePlatform { getPayData(url,data) { return data; } - pay({ data }) { + pay({ data }, event) { return new Promise((resolve) => { console.log(`App支付：${data.amount}分，订单号：${data.orderId}`); // 模拟调用H5支付SDK diff --git a/common/platform/BasePlatform.js b/common/platform/BasePlatform.js index 31c6c2f..227d9f0 100644 --- a/common/platform/BasePlatform.js +++ b/common/platform/BasePlatform.js @@ -11,7 +11,13 @@ class BasePlatform { this.code = ''; // 平台代码（WEB/MP/APP） this.env = ''; // 运行环境标识 } - + /** + * 获取配置 + * @returns + */ + async getConfig() { + return {}; + } getPayData(url, data) { throw new Error('子类必须实现 getPayData 方法'); } @@ -30,7 +36,7 @@ class BasePlatform { */ pay({ data - }) { + }, event) { throw new Error('子类必须实现 pay 方法'); } diff --git a/common/platform/H5Platform.js b/common/platform/H5Platform.js index c935e26..d0df1cd 100644 --- a/common/platform/H5Platform.js +++ b/common/platform/H5Platform.js @@ -38,7 +38,7 @@ class H5Platform extends BasePlatform { console.log('处理数据', data); return data; } - pay({ data }) { + pay({ data }, event) { console.log('支付1111'); return new Promise((resolve) => { diff --git a/common/platform/MiniProgramPlatform.js b/common/platform/MiniProgramPlatform.js index c84c28e..b7f550e 100644 --- a/common/platform/MiniProgramPlatform.js +++ b/common/platform/MiniProgramPlatform.js @@ -7,14 +7,44 @@ class MiniProgramPlatform extends BasePlatform { super(); this.code = 'MP-WEIXIN'; this.env = 'miniProgram'; + this.config = null; + + } + async getConfig() { + if (this.config) { + return this.config; + } + this.config = { isWebPay: true }; + return this.config; } getPayData(url, data) { return data; } pay({ data - }) { - return new Promise((resolve, reject) => { + }, event) { + console.log(this,event); + + return new Promise(async (resolve, reject) => { + let config = await this.getConfig(); + if (config.isWebPay) { + console.log('开启H5支付', data); + console.log(data); + uni.showModal({ + title: '支付提示', + content: data.tips ? data.tips : "您即将进入客服聊天界面完成支付，也可前往「我的」页面下载官方APP，享受更便捷的购物及充值服务。", + confirmText: "前往支付", + cancelText: "关闭", + success: function (res) { + if (res.confirm) { + console.log('用户点击确定'); + } else if (res.cancel) { + console.log('用户点击取消'); + } + } + }); + + } let provider = "weixin"; uni.requestPayment({ provider, @@ -139,7 +169,7 @@ class MiniProgramPlatform extends BasePlatform { resolve(null); }); } - delOrderNo(){} + delOrderNo() { } /** * 重写获取用户中心菜单列表，添加微信小程序特有菜单 @@ -148,7 +178,7 @@ class MiniProgramPlatform extends BasePlatform { getUserMenuList() { // 获取基础菜单列表 const baseMenuList = super.getUserMenuList(); - + // 添加客服菜单项（仅微信小程序） const customServiceMenu = { id: 9, @@ -158,9 +188,9 @@ class MiniProgramPlatform extends BasePlatform { path: '', isCustomService: true, // 客服按钮不需要处理函数，由微信小程序原生组件处理 - handler: () => {} + handler: () => { } }; - + // 将客服菜单插入到第二个位置 return [...baseMenuList.slice(0, 1), customServiceMenu, ...baseMenuList.slice(1)]; } diff --git a/components/detail-lucky/detail-lucky.vue b/components/detail-lucky/detail-lucky.vue index 26bc56c..581b3e0 100644 --- a/components/detail-lucky/detail-lucky.vue +++ b/components/detail-lucky/detail-lucky.vue @@ -69,12 +69,21 @@ export default { currentPrizeIndex: -1, internalMode: 1, // 内部存储模式的状态 skipButtonOpacity: 0, // 跳过按钮的透明度 + isSkip: false, isBatchMode: false, // 是否为批次模式 batchCount: 0, // 当前批次 batchResults: [], // 保存批次结果 batchCallback: null, // 批次模式回调 batchIndices: [], // 批次索引 chaoShenIndex: -1, + timers: { + skipButton: null, // 控制跳过按钮渐显的定时器 + firstBatch: null, // 第一批次抽奖的定时器，用于控制第一批次停止时间 + secondBatch: null, // 第二批次抽奖的定时器，用于控制第二批次停止时间 + drawResult: null, // 抽奖结果显示的定时器，用于延迟显示抽奖结果 + showDelay: null, // 组件显示延迟的定时器，用于确保DOM渲染完成 + playDelay: null // 开始播放抽奖动画的延迟定时器 + }, }; }, computed: { @@ -98,8 +107,8 @@ export default { 10: "800rpx" // 模式10使用与模式5相同的高度 }; // 使用计算后的currentMode，而不是直接使用internalMode - console.log(modeMap[this.currentMode],"modeMap[this.currentMode]"); - + console.log(modeMap[this.currentMode], "modeMap[this.currentMode]"); + return modeMap[this.currentMode] || "480rpx"; }, // 根据模式获取背景图 @@ -115,21 +124,21 @@ export default { }, // 跳过按钮样式 skipButtonStyle() { - return ()=>{ + return () => { return { - opacity: this.skipButtonOpacity, - transition: 'opacity 0.5s ease' + opacity: this.skipButtonOpacity, + transition: 'opacity 0.5s ease' + }; }; - }; - + } - + }, methods: { onLuckyEnd1() { // 发送中奖信息到父组件 - this.$emit("end",[]); + this.$emit("end", []); // 调用startDrawWithResult方法中保存的回调函数 if (this.drawResultCallback && typeof this.drawResultCallback === 'function') { @@ -330,7 +339,9 @@ export default { try { console.log("[批次抽奖] endCallBack 被调用，批次模式:", this.isBatchMode, "当前模式:", this.internalMode, "批次计数:", this .batchCount); - + if (this.isSkip) { + return; + } // 准备中奖信息 const prizeData = this.prizes[this.currentPrizeIndex]?.data || this.prizes[0]?.data; @@ -389,7 +400,7 @@ export default { if (this.batchCount < 2) { // 第一批次完成，延时开始第二批次 console.log("[批次抽奖] 第一批次完成，准备开始第二批次"); - setTimeout(() => { + this.timers.firstBatch = setTimeout(() => { console.log("[批次抽奖] 即将调用startSecondBatch"); this.startSecondBatch(); }, 800); @@ -420,7 +431,7 @@ export default { this.$refs.detailGrandPrize.show(); return; } - setTimeout(() => { + this.timers.drawResult = setTimeout(() => { // 发送中奖信息到父组件 this.$emit("end", batchResult); @@ -449,7 +460,7 @@ export default { return; } - setTimeout(() => { + this.timers.drawResult = setTimeout(() => { // 发送中奖信息到父组件 this.$emit("end", result); @@ -502,113 +513,36 @@ export default { 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; + let stopIndex = 0; + if (this.internalMode > 1) { + stopIndex = []; + let maxIndex = this.internalMode; + if (maxIndex > 5) { + maxIndex = 5; } - - // 重置批次状态 - 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 // 标记为跳过动画 - }; - if (this.bgmCtx && this.bgmCtx.slotBgm) { - this.bgmCtx.slotBgm.pause(); - } - // 发送事件到父组件 - this.$emit("end", result); - - // 调用startDrawWithResult方法中保存的回调函数 - if (this.drawResultCallback && typeof this.drawResultCallback === 'function') { - this.drawResultCallback(result); - // 清除回调，避免重复调用 - this.drawResultCallback = null; - } + for (let i = 0; i < maxIndex; i++) { + stopIndex.push(0); } } - + // 调用stop方法停止旋转 + this.$refs.myLucky.stop(stopIndex); + // 发送事件到父组件 + this.$emit("end", []); return this; // 返回this以支持链式调用 }, // 跳过动画 skipAnimation() { + this.isSkip = true; + // 清理所有定时器 + Object.values(this.timers).forEach(timer => { + if (timer) { + clearTimeout(timer); + } + }); // 强制结束抽奖 this.forceEndDraw(); + }, // 开始抽奖方法 @@ -618,6 +552,9 @@ export default { console.error("抽奖特效尚未初始化，请先调用init方法"); return this; } + if (this.isSkip) { + this.isSkip = false; + } // 保存回调函数 this.drawResultCallback = typeof callback === 'function' ? callback : null; @@ -658,14 +595,14 @@ export default { } // 渐显跳过按钮 - setTimeout(() => { + this.timers.skipButton = setTimeout(() => { this.skipButtonOpacity = 1; }, 1000); // 批次模式下自动停止第一批次 if (this.isBatchMode && this.internalMode === 10) { console.log("[批次抽奖] 设置2秒后自动停止第一批次"); - setTimeout(() => { + this.timers.firstBatch = setTimeout(() => { // 使用前5个索引作为第一批次结果 const firstBatchIndices = this.batchIndices.slice(0, 5); console.log("[批次抽奖] 停止第一批次抽奖，使用索引:", firstBatchIndices); @@ -757,6 +694,7 @@ export default { this.prizes = []; this.prizeList = []; this.currentPrizeIndex = -1; + this.isSkip = false; return this; }, @@ -772,7 +710,11 @@ export default { console.error("抽奖特效尚未初始化，请先调用init方法"); return this; } - + if (this.isSkip) { + this.isSkip = false; + } + // 重置跳过按钮透明度 + this.skipButtonOpacity = 0; // 检查参数 if (!resultIndices || !Array.isArray(resultIndices)) { console.error("抽奖结果必须是数组"); @@ -829,12 +771,12 @@ export default { } // 渐显跳过按钮 - setTimeout(() => { + this.timers.skipButton = setTimeout(() => { this.skipButtonOpacity = 1; }, 1000); // 2秒后停止第一批次抽奖 - setTimeout(() => { + this.timers.firstBatch = setTimeout(() => { // 使用前5个索引作为第一批次结果 const firstBatchIndices = resultIndices.slice(0, 5); console.log("[批次抽奖] 停止第一批次抽奖，使用索引:", firstBatchIndices); @@ -885,12 +827,12 @@ export default { } // 渐显跳过按钮 - setTimeout(() => { + this.timers.skipButton = setTimeout(() => { this.skipButtonOpacity = 1; }, 1000); // 2秒后自动停止抽奖 - setTimeout(() => { + this.timers.drawResult = setTimeout(() => { // 停止抽奖并显示结果 this.stopDraw(resultIndices); }, 2000); @@ -967,12 +909,12 @@ export default { } // 渐显跳过按钮 - setTimeout(() => { + this.timers.skipButton = setTimeout(() => { this.skipButtonOpacity = 1; }, 1000); // 2秒后停止第二批次抽奖 - setTimeout(() => { + this.timers.secondBatch = setTimeout(() => { // 为第二批次生成随机索引或使用预设索引 let indices = []; if (this.batchIndices && this.batchIndices.length > 5) { @@ -1012,6 +954,14 @@ export default { }); }, }, + beforeDestroy() { + // 清理所有定时器 + Object.values(this.timers).forEach(timer => { + if (timer) { + clearTimeout(timer); + } + }); + }, mounted() { // 不再自动初始化 }, @@ -1047,77 +997,78 @@ export default { left: 0; z-index: 999; } -.detail-lucky{ -// 抽奖特效容器样式 -.slot-container { - width: 100%; - display: flex; - flex-direction: column; - align-items: center; - position: relative; -} -.slot-icon { - padding-bottom: 25rpx; -} +.detail-lucky { -// 抽奖特效视图样式 -.slot-view { - background-size: 100% 100%; - width: 100%; - padding-top: 80rpx; - padding-bottom: 80rpx; - display: flex; - justify-content: center; - align-items: center; -} + // 抽奖特效容器样式 + .slot-container { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + position: relative; + } -// 根据模式设置不同的背景 -.slot-view-1 { - background: url("https://image.zfunbox.cn/static/image/lucky/di_5.png") no-repeat; - background-size: 100% 100%; -} + .slot-icon { + padding-bottom: 25rpx; + } -.slot-view-3 { - background: url("https://image.zfunbox.cn/static/image/lucky/di_3.png") no-repeat; - background-size: 100% 100%; -} + // 抽奖特效视图样式 + .slot-view { + background-size: 100% 100%; + width: 100%; + padding-top: 80rpx; + padding-bottom: 80rpx; + display: flex; + justify-content: center; + align-items: center; + } -.slot-view-5 { - background: url("https://image.zfunbox.cn/static/image/lucky/di_5.png") no-repeat; - background-size: 100% 100%; -} + // 根据模式设置不同的背景 + .slot-view-1 { + background: url("https://image.zfunbox.cn/static/image/lucky/di_5.png") no-repeat; + background-size: 100% 100%; + } -// 抽奖项样式 -.item-lottry { - height: 152.78rpx; - width: 152.78rpx; - display: flex; - justify-content: center; - align-items: center; - font-size: 30rpx; - border-radius: 16rpx; - color: black; - box-sizing: border-box; - background-color: rgba(255, 255, 255, 1); -} + .slot-view-3 { + background: url("https://image.zfunbox.cn/static/image/lucky/di_3.png") no-repeat; + background-size: 100% 100%; + } -// 跳过动画按钮样式 -.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; -} + .slot-view-5 { + background: url("https://image.zfunbox.cn/static/image/lucky/di_5.png") no-repeat; + background-size: 100% 100%; + } -.skip-animation:active { - opacity: 0.7; -} -} + // 抽奖项样式 + .item-lottry { + height: 152.78rpx; + width: 152.78rpx; + display: flex; + justify-content: center; + align-items: center; + font-size: 30rpx; + border-radius: 16rpx; + color: black; + 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; + } +} \ No newline at end of file diff --git a/package/index/leitai.vue b/package/index/leitai.vue index 8484c46..a2af6a2 100644 --- a/package/index/leitai.vue +++ b/package/index/leitai.vue @@ -675,7 +675,7 @@ export default { if (res.data.status == 1) { const status = await this.$platform.pay({ data: res.data.res - }) + },this) if (status == "success") { this.getPrize(res.data.order_num); this.doRefresh(); diff --git a/package/index/lian-ji.vue b/package/index/lian-ji.vue index f48375a..18d4a31 100644 --- a/package/index/lian-ji.vue +++ b/package/index/lian-ji.vue @@ -813,7 +813,7 @@ if (res.data.status == 1) { const status = await this.$platform.pay({ data: res.data.res - }) + },this); if (status == 'success') { this.getPrize(res.data.order_num) diff --git a/pages/infinite/bonus_house_details.vue b/pages/infinite/bonus_house_details.vue index 4e7089a..ab902c0 100644 --- a/pages/infinite/bonus_house_details.vue +++ b/pages/infinite/bonus_house_details.vue @@ -383,7 +383,7 @@ export default { if (res.data.status == 1) { const status = await this.$platform.pay({ data: res.data.res - }); + },this); if (status == "success") { this.load(this.goods_id); diff --git a/pages/mall/index.vue b/pages/mall/index.vue index 284d8de..104d839 100644 --- a/pages/mall/index.vue +++ b/pages/mall/index.vue @@ -334,7 +334,7 @@ export default { const status = await this.$platform.pay({ data: res.data.res - }) + },this) if (status == 'success') { // that.getPrize(res.data.order_num) that.getData(); @@ -399,7 +399,7 @@ export default { const status = await this.$platform.pay({ data: res.data.res - }) + },this) if (status == 'success') { // that.getPrize(res.data.order_num) that.getData(); diff --git a/pages/sangdai/sangdai.vue b/pages/sangdai/sangdai.vue index 39b5968..450f5cd 100644 --- a/pages/sangdai/sangdai.vue +++ b/pages/sangdai/sangdai.vue @@ -631,7 +631,7 @@ export default { if (res.data.status == 1) { const status = await this.$platform.pay({ data: res.data.res - }) + },this) if (status == 'success') { this.tabChange(this.tabCur) diff --git a/pages/shouye/detail.vue b/pages/shouye/detail.vue index a902d9e..1edb7bf 100644 --- a/pages/shouye/detail.vue +++ b/pages/shouye/detail.vue @@ -579,7 +579,7 @@ export default { if (res.data.status == 1) { const status = await this.$platform.pay({ data: res.data.res - }) + },this) if (status == "success") { this.getPrize(res.data.order_num); diff --git a/pages/shouye/detail_wuxian.vue b/pages/shouye/detail_wuxian.vue index 16c8190..d8b659d 100644 --- a/pages/shouye/detail_wuxian.vue +++ b/pages/shouye/detail_wuxian.vue @@ -733,7 +733,7 @@ export default { // 需要支付 const status = await this.$platform.pay({ data: res.data.res - }) + },this) if (status == 'success') { // 支付成功 diff --git a/pages/user/recharge-page.vue b/pages/user/recharge-page.vue index cbdcbe5..28f9617 100644 --- a/pages/user/recharge-page.vue +++ b/pages/user/recharge-page.vue @@ -104,7 +104,7 @@ export default { const res = await createOrderProducts(pro.products_id); console.log(res); this.order_num = res.order_num; - const status = await this.$platform.pay({ data: res.res }); + const status = await this.$platform.pay({ data: res.res },this); if (status == 'success') { this.getPrizeLog(res.order_num); }