charles/frontend-app
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

feat: 九宫格位置偏差修改

Browse Source
This commit is contained in:
黄泽群
2025-09-29 14:27:40 +08:00
parent f6b00cbe7e
commit 1732dfb48b
1 changed files with 119 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/other_package/nine-grid/components/LotteryGrid.vue
+105 -83
View File
@@ -1,62 +1,77 @@
<template> <template>
<!-- 九宫格容器 --> <!-- 九宫格容器 -->
<view> <view> </view>
</view>
<view class="lottery-grid"> <view class="lottery-grid">
<!-- 高亮选中框 --> <!-- 高亮选中框 -->
<view class="highlight-box" :style="{ <view
class="highlight-box"
:style="{
top: highlightTop, top: highlightTop,
left: highlightLeft, left: highlightLeft,
transition: isRotating ? 'all 0.07s linear' : 'none' transition: isRotating ? 'all 0.07s linear' : 'none',
}"></view> }"
></view>
<!-- 9个格子 --> <!-- 9个格子 -->
<view class="grid-item" v-for="(item, index) in 9" :key="index"> <view class="grid-item" v-for="(item, index) in 9" :key="index">
<!-- 中间格子作为抽奖按钮 (索引4) --> <!-- 中间格子作为抽奖按钮 (索引4) -->
<template v-if="index === 4"> <template v-if="index === 4">
<image :src="prizesObj.prizes[index]?.iconUrl" class="prize-img-button" mode="widthFix" <image
@click="handleStartLottery(1)"></image> :src="prizesObj.prizes[index]?.iconUrl"
class="prize-img-button"
mode="widthFix"
@click="handleStartLottery(1)"
></image>
</template> </template>
<!-- 其他8个奖品格子 --> <!-- 其他8个奖品格子 -->
<template v-else> <template v-else>
<image :src="prizesObj.prizes[index]?.iconUrl" class="prize-img" mode="widthFix"></image> <image
:src="prizesObj.prizes[index]?.iconUrl"
class="prize-img"
mode="widthFix"
></image>
<text class="prize-name">{{ prizesObj.prizes[index]?.name }}</text> <text class="prize-name">{{ prizesObj.prizes[index]?.name }}</text>
</template> </template>
</view> </view>
</view> </view>
<view class="coiled-lottery" v-if="prizesObj.times > 9" @click="handleStartLottery(10)"> 连续抽奖10次 </view> <view
class="coiled-lottery"
v-if="prizesObj.times > 9"
@click="handleStartLottery(10)"
>
连续抽奖10次
</view>
</template> </template>
<script> <script>
import { raffleExecute } from '@/api/raffle.js'; import { raffleExecute } from "@/api/raffle.js";
import { getUserInfo } from '@/api/auth.js'; import { getUserInfo } from "@/api/auth.js";
export default { export default {
props: { props: {
// 奖品数据数组 // 奖品数据数组
prizesObj: { prizesObj: {
type: Object, type: Object,
required: true, required: true,
default: () => ({ prizes: [] }) default: () => ({ prizes: [] }),
}, },
// 是否禁用抽奖 // 是否禁用抽奖
isDisabled: { isDisabled: {
type: Boolean, type: Boolean,
default: false default: false,
}, },
remainCount: { remainCount: {
type: Number, type: Number,
default: 0 default: 0,
} },
}, },
data() { data() {
return { return {
isRotating: false, // 是否正在旋转 isRotating: false, // 是否正在旋转
highlightTop: '0rpx', // 高亮框顶部位置 highlightTop: "0rpx", // 高亮框顶部位置
highlightLeft: '0rpx', // 高亮框左侧位置 highlightLeft: "0rpx", // 高亮框左侧位置
// 抽奖配置常量 // 抽奖配置常量
LOTTERY_PATH: [0, 1, 2, 5, 8, 7, 6, 3], // 抽奖路径顺序（顺时针） LOTTERY_PATH: [0, 1, 2, 5, 8, 7, 6, 3], // 抽奖路径顺序（顺时针）
INITIAL_SPEED: 100, // 初始速度(ms) - 调慢以便观察 INITIAL_SPEED: 100, // 初始速度(ms) - 调慢以便观察
@@ -69,8 +84,8 @@ export default {
animationTimer: null, // 动画计时器 animationTimer: null, // 动画计时器
targetIndex: 0, targetIndex: 0,
currentPrize: [], currentPrize: [],
currentUserData:{} currentUserData: {},
} };
}, },
mounted() { mounted() {
this.getUserInfo(); this.getUserInfo();
@@ -89,57 +104,62 @@ export default {
* @param {number} index - 格子索引 * @param {number} index - 格子索引
*/ */
moveHighlight(index) { moveHighlight(index) {
const row = Math.floor(index / 3) // 计算行 const row = Math.floor(index / 3); // 计算行
const col = index % 3 // 计算列 const col = index % 3; // 计算列
this.highlightTop = `${row * 202}rpx` this.highlightTop = `${row * 194}rpx`; // 使用高度值194rpx而不是宽度值203rpx
this.highlightLeft = `${col * 202}rpx` this.highlightLeft = `${col * 203}rpx`; // 水平位置使用宽度值203rpx保持不变
}, },
/** /**
* 执行抽奖动画 * 执行抽奖动画
* @param {Object} options - 动画参数 * @param {Object} options - 动画参数
*/ */
runAnimation(options) { runAnimation(options) {
const { currentStep, speed, targetStep, cycleCount, totalSteps } = options const { currentStep, speed, targetStep, cycleCount, totalSteps } =
options;
// 清除之前的计时器 // 清除之前的计时器
if (this.animationTimer) { if (this.animationTimer) {
clearTimeout(this.animationTimer) clearTimeout(this.animationTimer);
} }
// 计算下一步 // 计算下一步
const nextStep = (currentStep + 1) % this.LOTTERY_PATH.length const nextStep = (currentStep + 1) % this.LOTTERY_PATH.length;
const nextTotalSteps = totalSteps + 1 const nextTotalSteps = totalSteps + 1;
let nextCycleCount = cycleCount let nextCycleCount = cycleCount;
let nextSpeed = speed let nextSpeed = speed;
// 计算循环次数 // 计算循环次数
if (nextStep === 0) { if (nextStep === 0) {
nextCycleCount++ nextCycleCount++;
} }
// 速度控制逻辑 // 速度控制逻辑
if (nextCycleCount < 1 && nextTotalSteps < this.ACCELERATE_STEPS) { if (nextCycleCount < 1 && nextTotalSteps < this.ACCELERATE_STEPS) {
// 加速阶段 // 加速阶段
nextSpeed = Math.max(this.MIN_SPEED, nextSpeed - this.SPEED_DECREMENT) nextSpeed = Math.max(this.MIN_SPEED, nextSpeed - this.SPEED_DECREMENT);
} else { } else {
// 减速阶段 // 减速阶段
nextSpeed += this.SPEED_INCREMENT nextSpeed += this.SPEED_INCREMENT;
} }
// 移动高亮框到当前步骤位置 // 移动高亮框到当前步骤位置
this.moveHighlight(this.LOTTERY_PATH[nextStep]) this.moveHighlight(this.LOTTERY_PATH[nextStep]);
// 检查是否应该停止 // 检查是否应该停止
const shouldStop = const shouldStop =
(nextSpeed > this.STOP_SPEED && nextStep === targetStep) || nextTotalSteps > this.MAX_STEPS (nextSpeed > this.STOP_SPEED && nextStep === targetStep) ||
nextTotalSteps > this.MAX_STEPS;
if (shouldStop) { if (shouldStop) {
// 动画结束 // 动画结束
this.isRotating = false this.isRotating = false;
this.animationTimer = null this.animationTimer = null;
// 触发抽奖完成事件，返回中奖奖品 // 触发抽奖完成事件，返回中奖奖品
this.$emit('complete', this.prizesObj.prizes[this.LOTTERY_PATH[nextStep]]) this.$emit(
return "complete",
this.prizesObj.prizes[this.LOTTERY_PATH[nextStep]]
);
return;
} }
// 继续下一帧动画 // 继续下一帧动画
@@ -149,21 +169,19 @@ export default {
speed: nextSpeed, speed: nextSpeed,
targetStep, targetStep,
cycleCount: nextCycleCount, cycleCount: nextCycleCount,
totalSteps: nextTotalSteps totalSteps: nextTotalSteps,
}) });
}, nextSpeed) }, nextSpeed);
}, },
/** /**
* 处理开始抽奖事件 * 处理开始抽奖事件
*/ */
async handleStartLottery(num) { async handleStartLottery(num) {
if(this.currentUserData.contractStatus != 4){ if (this.currentUserData.contractStatus != 4) {
uni.showToast({ uni.showToast({
title: `您当前尚未签署合同，请先签署合同再参与抽奖～`, title: `您当前尚未签署合同，请先签署合同再参与抽奖～`,
icon: 'none' icon: "none",
}); });
return; return;
} }
@@ -171,7 +189,7 @@ export default {
if (this.prizesObj.times <= 0) { if (this.prizesObj.times <= 0) {
uni.showToast({ uni.showToast({
title: `您当前未获取到抽奖次数，快去获取吧～`, title: `您当前未获取到抽奖次数，快去获取吧～`,
icon: 'none' icon: "none",
}); });
return; return;
} }
@@ -180,19 +198,24 @@ export default {
return; return;
} }
const params = { const params = {
id: this.prizesObj.id, id: this.prizesObj.id,
times: num, times: num,
} };
const { data } = await raffleExecute(params); const { data } = await raffleExecute(params);
this.targetIndex = this.prizesObj.prizes.findIndex(ele => ele.id === data.idList[0]); this.targetIndex = this.prizesObj.prizes.findIndex(
console.log("0------", this.prizesObj.prizes, data.idList, this.targetIndex) (ele) => ele.id === data.idList[0]
);
console.log(
"0------",
this.prizesObj.prizes,
data.idList,
this.targetIndex
);
this.currentPrize = data.prizeList; this.currentPrize = data.prizeList;
this.handleStartClick(num) this.handleStartClick(num);
}, },
/** /**
@@ -201,34 +224,32 @@ export default {
handleStartClick(num) { handleStartClick(num) {
// 如果正在抽奖或被禁用，则不执行 // 如果正在抽奖或被禁用，则不执行
if (this.isDisabled || this.isRotating) { if (this.isDisabled || this.isRotating) {
console.log('抽奖被禁用或正在进行中') console.log("抽奖被禁用或正在进行中");
return return;
} }
// 减少抽奖次数 // 减少抽奖次数
if (this.remainCount <= 0) { if (this.remainCount <= 0) {
uni.showToast({ uni.showToast({
title: '抽奖次数不足', title: "抽奖次数不足",
icon: 'none' icon: "none",
}) });
return return;
} }
// 标记为正在抽奖 // 标记为正在抽奖
this.isRotating = true this.isRotating = true;
// 通知父组件开始抽奖 // 通知父组件开始抽奖
this.$emit('start', num, this.currentPrize) this.$emit("start", num, this.currentPrize);
// 开始抽奖动画（无论父组件做了什么处理） // 开始抽奖动画（无论父组件做了什么处理）
this.startLotteryAnimation() this.startLotteryAnimation();
}, },
/** /**
* 开始抽奖动画 * 开始抽奖动画
*/ */
startLotteryAnimation() { startLotteryAnimation() {
// 重置动画参数 // 重置动画参数
clearTimeout(this.animationTimer) clearTimeout(this.animationTimer);
// 开始动画 // 开始动画
this.runAnimation({ this.runAnimation({
@@ -236,18 +257,18 @@ export default {
speed: this.INITIAL_SPEED, speed: this.INITIAL_SPEED,
targetStep: this.targetIndex, targetStep: this.targetIndex,
cycleCount: 0, cycleCount: 0,
totalSteps: 0 totalSteps: 0,
}) });
} },
}, },
beforeDestroy() { beforeDestroy() {
// 组件销毁时清理计时器 // 组件销毁时清理计时器
if (this.animationTimer) { if (this.animationTimer) {
clearTimeout(this.animationTimer) clearTimeout(this.animationTimer);
this.animationTimer = null this.animationTimer = null;
} }
} },
} };
</script> </script>
<style scoped> <style scoped>
@@ -267,14 +288,14 @@ export default {
width: 203rpx; width: 203rpx;
height: 194rpx; height: 194rpx;
box-sizing: border-box; box-sizing: border-box;
border: 8rpx solid #FF4646; border: 8rpx solid #ff4646;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
position: relative; position: relative;
flex-shrink: 0; flex-shrink: 0;
background: linear-gradient(180deg, #FFF7E7 0%, #FFDAB2 100%); background: linear-gradient(180deg, #fff7e7 0%, #ffdab2 100%);
box-shadow: inset 0px 0 24rpx 0px rgba(255, 129, 9, 0.5); box-shadow: inset 0px 0 24rpx 0px rgba(255, 129, 9, 0.5);
border-radius: 20rpx; border-radius: 20rpx;
} }
@@ -313,7 +334,6 @@ export default {
.prize-img-button { .prize-img-button {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.prize-name { .prize-name {
@@ -328,25 +348,27 @@ export default {
.highlight-box { .highlight-box {
position: absolute; position: absolute;
width: 200rpx; width: 203rpx;
height: 194rpx; height: 194rpx;
box-sizing: border-box; box-sizing: border-box;
border: 6rpx solid #FFDAB2; border: 6rpx solid #ffdab2;
background-color: rgba(255, 64, 129, 0.4); background-color: rgba(255, 64, 129, 0.4);
z-index: 1; z-index: 1;
pointer-events: none; pointer-events: none;
border-radius: 20rpx; border-radius: 20rpx;
/* 增加高亮动画效果 */
/* box-shadow: 0 0 15rpx 2rpx rgba(255, 64, 129, 0.5); */
/* background: linear-gradient(180deg, #FFF7E7 0%, #FFDAB2 100%); */
box-shadow: inset 0px 0 24px 0px rgba(255, 129, 9, 0.5); box-shadow: inset 0px 0 24px 0px rgba(255, 129, 9, 0.5);
} }
.coiled-lottery { .coiled-lottery {
width: 670rpx; width: 670rpx;
height: 88rpx; height: 88rpx;
background: linear-gradient(180deg, #FFE361 0%, #FF7B21 70%, #FFB931 91%, #FFB245 100%); 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); box-shadow: inset 0px 0 24rpx 0px rgba(255, 255, 255, 0.5);
border-radius: 44rpx; border-radius: 44rpx;
margin: 120rpx auto 0; margin: 120rpx auto 0;
@@ -355,6 +377,6 @@ export default {
justify-content: center; justify-content: center;
font-weight: 500; font-weight: 500;
font-size: 32rpx; font-size: 32rpx;
color: #FFFFFF; color: #ffffff;
} }
</style> </style>