From ff3d0e5028b610e606d0314fe57da7195f6ddf9f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=A7=A6=E5=BD=A6=E7=A5=96?= <605893810@qq.com> Date: Fri, 15 Aug 2025 00:35:43 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E4=B9=9D=E5=AE=AB=E6=A0=BC=E5=AE=8C?= =?UTF-8?q?=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- api/raffle.js | 32 +-- pages/home/home.vue | 5 +- pages/mine/mine.vue | 2 +- .../nine-grid/components/LotteryGrid.vue | 82 ++++--- .../nine-grid/components/ResultModal.vue | 140 ++++++----- pages/other_package/nine-grid/nine-grid.vue | 224 ++++++++++++++---- 6 files changed, 332 insertions(+), 153 deletions(-) diff --git a/api/raffle.js b/api/raffle.js index 89cf4b7..15a6fd6 100644 --- a/api/raffle.js +++ b/api/raffle.js @@ -5,9 +5,9 @@ import request from '@/utils/request.js'; // 引入封装的方法 export function getActivityList(data) { // return request.post('/common/getSmsCode',qs.stringify(params)); return request({ - url: "/raffle/getActivityList", - method: "get", - data, + url: "/raffle/getActivityList", + method: "get", + data, }); } @@ -17,19 +17,19 @@ export function getActivityList(data) { */ export function raffleExecute(params) { return request({ - url: "/raffle/execute", - method: "post", - data:params, - isShowLoading:false, + url: "/raffle/execute", + method: "post", + data: params, + isShowLoading: false, }); } // 查询中奖记录 export function getWinningList(data) { return request({ - url: "/raffle/getWinningList", - method: "get", - data, + url: "/raffle/getWinningList", + method: "get", + data, }); } /** @@ -38,17 +38,17 @@ export function getWinningList(data) { */ export function takeGoods(params) { return request({ - url: "/raffle/takeGoods", - method: "post", - data:params, + url: "/raffle/takeGoods", + method: "post", + data: params, }); } // 查询抽奖加速次数 export function getQuickenTimes(data) { return request({ - url: "/raffle/getQuickenTimes", - method: "get", - data, + url: "/raffle/getQuickenTimes", + method: "get", + data, }); } \ No newline at end of file diff --git a/pages/home/home.vue b/pages/home/home.vue index 9b778f1..acb80ca 100644 --- a/pages/home/home.vue +++ b/pages/home/home.vue @@ -407,8 +407,11 @@ export default { }) }, jumpTurntable() { + // uni.navigateTo({ + // url: '/pages/other_package/turntable/turntable?backPath=home', + // }) uni.navigateTo({ - url: '/pages/other_package/turntable/turntable?backPath=home', + url: '/pages/other_package/nine-grid/nine-grid?backPath=home', }) }, jumpPrdference() { diff --git a/pages/mine/mine.vue b/pages/mine/mine.vue index da63a4a..02b5c45 100644 --- a/pages/mine/mine.vue +++ b/pages/mine/mine.vue @@ -218,7 +218,7 @@ export default { id: 2, title: "抽奖", url: 'https://cex-pub.s3.ap-southeast-1.amazonaws.com/static/apply_prize.png', - path: "/pages/other_package/turntable/turntable" + path: "/pages/other_package/nine-grid/nine-grid" }, { id: 4, diff --git a/pages/other_package/nine-grid/components/LotteryGrid.vue b/pages/other_package/nine-grid/components/LotteryGrid.vue index 310f6d9..1b1b8cb 100644 --- a/pages/other_package/nine-grid/components/LotteryGrid.vue +++ b/pages/other_package/nine-grid/components/LotteryGrid.vue @@ -12,15 +12,14 @@ @@ -30,15 +29,20 @@ export default { props: { // 奖品数据数组 - prizes: { - type: Array, + prizesObj: { + type: Object, required: true, - default: () => [] + default: () => ({ prizes: [] }) }, // 是否禁用抽奖 isDisabled: { type: Boolean, default: false + }, + // 指定停止的位置索引 (0-7) + targetIndex: { + type: Number, + default: null } }, data() { @@ -66,8 +70,8 @@ export default { moveHighlight(index) { const row = Math.floor(index / 3) // 计算行 const col = index % 3 // 计算列 - this.highlightTop = `${row * 200}rpx` - this.highlightLeft = `${col * 200}rpx` + this.highlightTop = `${row * 202}rpx` + this.highlightLeft = `${col * 202}rpx` }, /** * 执行抽奖动画 @@ -113,7 +117,7 @@ export default { this.isRotating = false this.animationTimer = null // 触发抽奖完成事件，返回中奖奖品 - this.$emit('complete', this.prizes[this.LOTTERY_PATH[nextStep]]) + this.$emit('complete', this.prizesObj.prizes[this.LOTTERY_PATH[nextStep]]) return } @@ -128,6 +132,18 @@ export default { }) }, nextSpeed) }, + /** + * 获取目标位置 + * @returns {number} 目标位置索引 + */ + getTargetStep() { + // 如果传入了targetIndex，则使用传入的值 + if (this.targetIndex !== null && this.targetIndex >= 0 && this.targetIndex < this.LOTTERY_PATH.length) { + return this.targetIndex + } + // 否则随机生成目标位置（带权重） + return this.getRandomTarget() + }, /** * 随机生成目标位置（带权重） * @returns {number} 目标位置索引 @@ -158,7 +174,7 @@ export default { } // 通知父组件开始抽奖 - this.$emit('start') + this.$emit('start', 1) // 开始抽奖动画（无论父组件做了什么处理） this.startLotteryAnimation() @@ -177,7 +193,7 @@ export default { this.runAnimation({ currentStep: 0, speed: this.INITIAL_SPEED, - targetStep: this.getRandomTarget(), + targetStep: this.getTargetStep(), cycleCount: 0, totalSteps: 0 }) @@ -195,34 +211,36 @@ export default { \ No newline at end of file diff --git a/pages/other_package/nine-grid/components/ResultModal.vue b/pages/other_package/nine-grid/components/ResultModal.vue index ba7ba97..469db09 100644 --- a/pages/other_package/nine-grid/components/ResultModal.vue +++ b/pages/other_package/nine-grid/components/ResultModal.vue @@ -2,10 +2,16 @@ - 恭喜您获得 - - {{ prize.name || '未知奖品' }} - + + + + ¥ {{ item.parValue }} + + {{ item.prizeName }} + + + + 立即领取 @@ -20,10 +26,20 @@ export default { }, // 中奖奖品信息 prize: { - type: Object, - default: () => ({}) + type: Array, + default: () => ([ + + ]) } - } + }, + methods: { + jumpGetFun(item) { + this.$emit('close') + // uni.navigateTo({ + // url: '/pages/other_package/get_prize/get_prize?id=' + item.id, + // }) + }, + }, } @@ -42,63 +58,69 @@ export default { } .modal-content { - width: 500rpx; - background-color: #fff; - border-radius: 20rpx; - padding: 40rpx; - display: flex; - flex-direction: column; - align-items: center; - /* 添加弹窗动画 */ - animation: popup 0.3s ease-out; -} + width: 650rpx; + height: 1000rpx; -@keyframes popup { - 0% { - transform: scale(0.8); - opacity: 0; + background: url('https://cex-pub.s3.ap-southeast-1.amazonaws.com/static/lottery-pop.png') no-repeat center center; + background-size: 100% auto; + position: relative; + + .confirm-btn { + width: 436rpx; + height: 76rpx; + background: linear-gradient(180deg, #FFE361 0%, #FF7B21 70%, #FFB931 91%, #FFB245 100%); + box-shadow: inset 0px 0 24rpx 0px rgba(255, 255, 255, 0.5); + border-radius: 38rpx; + font-weight: 500; + font-size: 32rpx; + color: #FFFFFF; + display: flex; + justify-content: center; + align-items: center; + position: absolute; + bottom: 230rpx; + left: 50%; + transform: translateX(-50%); } - 100% { - transform: scale(1); - opacity: 1; + .modal-content-result { + position: absolute; + bottom: 450rpx; + left: 50%; + transform: translateX(-50%); + width: 420rpx; + display: flex; + justify-content: space-around; + + .modal-content-result-item { + + .par-value { + font-weight: bold; + font-size: 42rpx; + color: #D0010D; + text-align: center; + + .moeny { + font-size: 28rpx; + } + } + + .prize-name { + font-size: 36rpx; + color: #000000; + text-align: center; + margin-top: 15rpx; + } + } } -} -.result-title { - font-size: 36rpx; - color: #e63946; - font-weight: bold; - margin-bottom: 30rpx; -} + .close { + width: 120rpx; + height: 120rpx; + position: absolute; + top: 130rpx; + right: 40rpx; + } -.result-img { - width: 150rpx; - height: 150rpx; - margin-bottom: 30rpx; - object-fit: contain; -} - -.result-desc { - font-size: 32rpx; - color: #333; - margin-bottom: 40rpx; - font-weight: bold; -} - -.confirm-btn { - width: 300rpx; - height: 80rpx; - line-height: 80rpx; - background-color: #e63946; - color: #fff; - border-radius: 40rpx; - font-size: 32rpx; - border: none; - transition: background-color 0.2s; -} - -.confirm-btn:active { - background-color: #c72c3a; } \ No newline at end of file diff --git a/pages/other_package/nine-grid/nine-grid.vue b/pages/other_package/nine-grid/nine-grid.vue index f7b72ba..4aea247 100644 --- a/pages/other_package/nine-grid/nine-grid.vue +++ b/pages/other_package/nine-grid/nine-grid.vue @@ -1,12 +1,30 @@