222
This commit is contained in:
zpc
parent
47899ec619
commit
758198ec71
164
components/detail-lucky/README.md
Normal file
164
components/detail-lucky/README.md
Normal file
|
|
@ -0,0 +1,164 @@
|
|||
# 老虎机抽奖组件使用指南
|
||||
|
||||
## 组件简介
|
||||
|
||||
本组件是一个整合了1列、3列和5列老虎机功能的抽奖组件，可根据传入的参数动态切换不同列数的老虎机模式。
|
||||
|
||||
## 使用方法
|
||||
|
||||
### 1. 引入组件
|
||||
|
||||
```vue
|
||||
import DetailLucky from "@/components/detail-lucky/detail-lucky.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
DetailLucky
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 2. 在模板中使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<DetailLucky ref="luckySlot" :mode="3"></DetailLucky>
|
||||
</template>
|
||||
```
|
||||
|
||||
### 3. 组件属性
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
|-------|------|-------|------|
|
||||
| mode | Number/String | 1 | 老虎机模式，可选值：1, 3, 5 |
|
||||
|
||||
### 4. 组件方法
|
||||
|
||||
#### 初始化老虎机
|
||||
|
||||
```js
|
||||
// 初始化老虎机，传入奖品列表和模式
|
||||
this.$refs.luckySlot.init(prizeList, mode);
|
||||
|
||||
// 例如：初始化3列老虎机
|
||||
this.$refs.luckySlot.init(myPrizes, 3);
|
||||
|
||||
// 也可以仅传入奖品列表，使用组件默认的模式
|
||||
this.$refs.luckySlot.init(myPrizes);
|
||||
```
|
||||
|
||||
#### 开始抽奖
|
||||
|
||||
```js
|
||||
// 开始抽奖，可选传入回调函数
|
||||
this.$refs.luckySlot.startDraw(() => {
|
||||
console.log('老虎机开始旋转');
|
||||
});
|
||||
```
|
||||
|
||||
#### 停止抽奖并指定中奖结果
|
||||
|
||||
```js
|
||||
// 停止抽奖，传入中奖索引数组
|
||||
// 对于1列老虎机，传入1个索引
|
||||
this.$refs.luckySlot.stopDraw([5]);
|
||||
|
||||
// 对于3列老虎机，传入3个索引
|
||||
this.$refs.luckySlot.stopDraw([3, 2, 8]);
|
||||
|
||||
// 对于5列老虎机，传入5个索引
|
||||
this.$refs.luckySlot.stopDraw([1, 2, 3, 4, 5]);
|
||||
|
||||
// 也可以不传入索引，组件会随机生成
|
||||
this.$refs.luckySlot.stopDraw();
|
||||
```
|
||||
|
||||
#### 其他方法
|
||||
|
||||
```js
|
||||
// 强制结束抽奖
|
||||
this.$refs.luckySlot.forceEndDraw();
|
||||
|
||||
// 隐藏老虎机
|
||||
this.$refs.luckySlot.hide();
|
||||
|
||||
// 显示老虎机
|
||||
this.$refs.luckySlot.show();
|
||||
|
||||
// 重置组件状态
|
||||
this.$refs.luckySlot.reset();
|
||||
```
|
||||
|
||||
### 5. 组件事件
|
||||
|
||||
| 事件名 | 说明 | 返回值 |
|
||||
|-------|------|-------|
|
||||
| start | 开始抽奖时触发 | - |
|
||||
| end | 结束抽奖时触发 | 中奖信息对象 |
|
||||
|
||||
### 使用示例
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<button @click="startLottery">开始抽奖</button>
|
||||
<DetailLucky ref="luckySlot" :mode="slotMode"></DetailLucky>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DetailLucky from "@/components/detail-lucky/detail-lucky.vue";
|
||||
|
||||
export default {
|
||||
components: { DetailLucky },
|
||||
data() {
|
||||
return {
|
||||
slotMode: 3,
|
||||
prizeList: [] // 奖品列表
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 获取奖品列表
|
||||
this.getPrizeList();
|
||||
},
|
||||
methods: {
|
||||
// 获取奖品列表
|
||||
async getPrizeList() {
|
||||
// 这里可以从API获取奖品列表
|
||||
this.prizeList = [...]; // 示例奖品列表
|
||||
},
|
||||
|
||||
// 开始抽奖
|
||||
startLottery() {
|
||||
// 初始化老虎机
|
||||
this.$refs.luckySlot.init(this.prizeList, this.slotMode);
|
||||
|
||||
// 开始抽奖
|
||||
this.$refs.luckySlot.startDraw();
|
||||
|
||||
// 模拟3秒后停止抽奖
|
||||
setTimeout(() => {
|
||||
// 这里可以调用API获取中奖结果
|
||||
const winIndex = Math.floor(Math.random() * this.prizeList.length);
|
||||
|
||||
// 停止抽奖并指定中奖索引
|
||||
if (this.slotMode === 1) {
|
||||
this.$refs.luckySlot.stopDraw([winIndex]);
|
||||
} else if (this.slotMode === 3) {
|
||||
this.$refs.luckySlot.stopDraw([winIndex, winIndex, winIndex]);
|
||||
} else {
|
||||
this.$refs.luckySlot.stopDraw([winIndex, winIndex, winIndex, winIndex, winIndex]);
|
||||
}
|
||||
}, 3000);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. 使用前必须先调用`init`方法初始化组件
|
||||
2. 中奖索引数组的长度应与当前模式的列数匹配，如果不匹配会自动补足或截取
|
||||
3. 组件高度会根据模式自动调整
|
||||
4. 如果不传入奖品列表，将使用默认的奖品列表
|
||||
|
|
@ -1,7 +1,570 @@
|
|||
<template></template>
|
||||
|
||||
<script>
|
||||
<template>
|
||||
<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>
|
||||
</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>
|
||||
</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>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 导入老虎机组件
|
||||
import SlotMachine from "@/components/@lucky-canvas/uni/slot-machine";
|
||||
|
||||
function shuffle(array) {
|
||||
for (let i = array.length - 1; i > 0; i--) {
|
||||
// 生成一个 0 到 i 之间的随机整数
|
||||
const j = Math.floor(Math.random() * (i + 1));
|
||||
// 交换 array[i] 和 array[j]
|
||||
[array[i], array[j]] = [array[j], array[i]];
|
||||
}
|
||||
return array;
|
||||
}
|
||||
|
||||
export default {
|
||||
components: { SlotMachine },
|
||||
props: {
|
||||
// 老虎机模式: 1, 3, 5 (分别代表1列、3列、5列)
|
||||
mode: {
|
||||
type: [Number, String],
|
||||
default: 1,
|
||||
validator: function(value) {
|
||||
return [1, 3, 5, '1', '3', '5'].includes(value);
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isVisible: false, // 控制组件显示/隐藏
|
||||
isInitialized: false, // 控制是否已初始化
|
||||
windowWidth: "0px",
|
||||
blocks: [],
|
||||
slots: [],
|
||||
prizes: [],
|
||||
prizeList: [], // 移到data中
|
||||
defaultConfig: {
|
||||
mode: "horizontal", // 水平模式
|
||||
rowSpacing: "10px", // 行间距
|
||||
colSpacing: "10px", // 列间距
|
||||
accelerationTime: 1500,
|
||||
},
|
||||
luckyMessage: "恭喜您获得奖品",
|
||||
luckyPrize: null,
|
||||
currentPrizeIndex: -1,
|
||||
internalMode: 1, // 内部存储模式的状态
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 计算抽奖项尺寸
|
||||
lotteryItemSize() {
|
||||
let height = uni.upx2px(220);
|
||||
let width = uni.upx2px(170);
|
||||
return [width, height];
|
||||
},
|
||||
// 计算当前模式
|
||||
currentMode() {
|
||||
return parseInt(this.internalMode);
|
||||
},
|
||||
// 根据模式计算高度
|
||||
slotHeight() {
|
||||
const modeMap = {
|
||||
1: "160rpx",
|
||||
3: "480rpx",
|
||||
5: "800rpx"
|
||||
};
|
||||
return modeMap[this.currentMode] || "480rpx";
|
||||
},
|
||||
// 根据模式获取背景图
|
||||
backgroundImage() {
|
||||
const modeMap = {
|
||||
1: "di_5.png",
|
||||
3: "di_3.png",
|
||||
5: "di_5.png"
|
||||
};
|
||||
return modeMap[this.currentMode] || "di_3.png";
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 初始化老虎机组件
|
||||
init(prizeList, mode) {
|
||||
// 如果传入了模式，更新当前模式
|
||||
if (mode !== undefined && [1, 3, 5].includes(parseInt(mode))) {
|
||||
this.internalMode = parseInt(mode);
|
||||
} else {
|
||||
// 没有传入模式时使用props中的mode初始化内部模式
|
||||
this.internalMode = parseInt(this.mode);
|
||||
}
|
||||
|
||||
// 设置奖品列表
|
||||
if (prizeList && Array.isArray(prizeList) && prizeList.length > 0) {
|
||||
this.prizeList = prizeList;
|
||||
} else {
|
||||
this.prizeList = this.getDefaultPrizes();
|
||||
}
|
||||
|
||||
let windowWidth = uni.getSystemInfoSync().windowWidth;
|
||||
let t = this.prizeList;
|
||||
|
||||
let prizes = [];
|
||||
for (let i = 0; i < t.length; i++) {
|
||||
prizes.push({
|
||||
imgs: [
|
||||
{
|
||||
src: t[i].imgurl,
|
||||
width: "152.78rpx",
|
||||
height: "152.78rpx",
|
||||
},
|
||||
],
|
||||
background: "#ffffff",
|
||||
data: t[i], // 将原始数据保存到prize中，方便后续使用
|
||||
});
|
||||
}
|
||||
|
||||
// 根据当前模式创建slots
|
||||
const arr = Array.from({ length: t.length }, (_, i) => i);
|
||||
let slots = [];
|
||||
|
||||
// 根据模式创建对应数量的列
|
||||
for (let i = 0; i < this.currentMode; i++) {
|
||||
slots.push({ order: shuffle([...arr]), speed: 20 });
|
||||
}
|
||||
|
||||
this.windowWidth = windowWidth + "px";
|
||||
this.slots = slots;
|
||||
this.prizes = prizes;
|
||||
|
||||
// 标记为已初始化
|
||||
this.isInitialized = true;
|
||||
|
||||
return this; // 返回this以支持链式调用
|
||||
},
|
||||
|
||||
// 显示老虎机组件
|
||||
show() {
|
||||
if (!this.isInitialized) {
|
||||
console.error("老虎机尚未初始化，请先调用init方法");
|
||||
return this;
|
||||
}
|
||||
this.isVisible = true;
|
||||
return this;
|
||||
},
|
||||
|
||||
// 隐藏老虎机组件
|
||||
hide() {
|
||||
this.isVisible = false;
|
||||
return this;
|
||||
},
|
||||
|
||||
// 获取默认奖品列表
|
||||
getDefaultPrizes() {
|
||||
return [
|
||||
{
|
||||
id: 1128,
|
||||
title: "兹琪露娜提亚斯",
|
||||
imgurl:
|
||||
"https://image.zfunbox.cn/topic/20250515/2986e27e673ef675e02771cdebd9b822.jpg",
|
||||
price: "350.00",
|
||||
real_pro: "0.02000",
|
||||
goods_type: 1,
|
||||
doubling: 1,
|
||||
is_lingzhu: 0,
|
||||
},
|
||||
{
|
||||
id: 1129,
|
||||
title: "月岗恋钟",
|
||||
imgurl:
|
||||
"https://image.zfunbox.cn/topic/20250515/2c5ed2097716db6bef01da718bc3c091.jpg",
|
||||
price: "132.00",
|
||||
real_pro: "0.02000",
|
||||
goods_type: 1,
|
||||
doubling: 3,
|
||||
is_lingzhu: 0,
|
||||
},
|
||||
{
|
||||
id: 1130,
|
||||
title: "BANDAI万代拼装模型 1/100 MG 机动战士高达 倒A 逆A-15岁以上",
|
||||
imgurl:
|
||||
"https://image.zfunbox.cn/topic/20250515/e35da49b4976f156f2f98dec002274a5.png",
|
||||
price: "305.00",
|
||||
real_pro: "0.03000",
|
||||
goods_type: 1,
|
||||
doubling: 1,
|
||||
is_lingzhu: 0,
|
||||
},
|
||||
{
|
||||
id: 1131,
|
||||
title: "BANDAI 万代拼装模型 MG 主天使-15岁以上",
|
||||
imgurl:
|
||||
"https://image.zfunbox.cn/topic/20250515/77302c6f1ea9ea6a8516cc1208174aee.png",
|
||||
price: "289.00",
|
||||
real_pro: "0.03000",
|
||||
goods_type: 1,
|
||||
doubling: 1,
|
||||
is_lingzhu: 0,
|
||||
},
|
||||
{
|
||||
id: 1132,
|
||||
title: "BANDAI万代 HG00 09 1/144 座天使高达一型-15岁以上",
|
||||
imgurl:
|
||||
"https://image.zfunbox.cn/topic/20250515/55e816c93b5e4103a30682c586816b11.jpg",
|
||||
price: "114.00",
|
||||
real_pro: "0.50000",
|
||||
goods_type: 1,
|
||||
doubling: 3,
|
||||
is_lingzhu: 0,
|
||||
},
|
||||
{
|
||||
id: 1133,
|
||||
title: "BANDAI万代拼装模型 HGUC 130 机动战士高达 杰斯塔-15岁以上",
|
||||
imgurl:
|
||||
"https://image.zfunbox.cn/topic/20250515/aeb6bfb8b4aa8a29796b242e4f5d56d9.png",
|
||||
price: "113.00",
|
||||
real_pro: "1.50000",
|
||||
goods_type: 1,
|
||||
doubling: 1,
|
||||
is_lingzhu: 0,
|
||||
},
|
||||
{
|
||||
id: 1134,
|
||||
title: "BANDAI万代拼装模型HG26 1/144 凯列班高达 异灵高达-15岁以上",
|
||||
imgurl:
|
||||
"https://image.zfunbox.cn/topic/20250515/329e3a7e21772a63cea03d31f948345d.png",
|
||||
price: "112.00",
|
||||
real_pro: "1.00000",
|
||||
goods_type: 1,
|
||||
doubling: 2,
|
||||
is_lingzhu: 0,
|
||||
},
|
||||
{
|
||||
id: 1135,
|
||||
title: "梦幻",
|
||||
imgurl:
|
||||
"https://image.zfunbox.cn/topic/20250515/d2c7e48515d393084000595074209042.jpg",
|
||||
price: "41.00",
|
||||
real_pro: "2.50000",
|
||||
goods_type: 1,
|
||||
doubling: 2,
|
||||
is_lingzhu: 0,
|
||||
},
|
||||
{
|
||||
id: 1136,
|
||||
title: "谜拟丘",
|
||||
imgurl:
|
||||
"https://image.zfunbox.cn/topic/20250515/6031827bc455cbf86ff778d74ddffbd3.jpg",
|
||||
price: "38.00",
|
||||
real_pro: "1.50000",
|
||||
goods_type: 1,
|
||||
doubling: 1,
|
||||
is_lingzhu: 0,
|
||||
},
|
||||
{
|
||||
id: 1137,
|
||||
title: "小提琴模型1个",
|
||||
imgurl:
|
||||
"https://image.zfunbox.cn/topic/20250515/22846dea5a933ab314998afc51abb7bb.jpg",
|
||||
price: "13.80",
|
||||
real_pro: "92.90000",
|
||||
goods_type: 1,
|
||||
doubling: 1,
|
||||
is_lingzhu: 0,
|
||||
},
|
||||
];
|
||||
},
|
||||
|
||||
// 老虎机开始回调
|
||||
startCallBack() {
|
||||
console.log("开始抽奖");
|
||||
this.$emit("start");
|
||||
},
|
||||
|
||||
// 抽奖结束回调
|
||||
endCallBack(prize) {
|
||||
// 奖品详情
|
||||
console.log("抽奖结束", prize);
|
||||
|
||||
try {
|
||||
// 准备中奖信息
|
||||
const prizeData =
|
||||
this.prizes[this.currentPrizeIndex]?.data || this.prizes[0]?.data;
|
||||
|
||||
if (!prizeData) {
|
||||
console.error("无法获取奖品数据");
|
||||
return;
|
||||
}
|
||||
|
||||
// 获取所有中奖奖品
|
||||
let allPrizes = [];
|
||||
|
||||
// 检查prize是否是数组，如果是则使用map，否则只使用当前prize
|
||||
if (Array.isArray(prize)) {
|
||||
allPrizes = prize
|
||||
.map((item) => {
|
||||
const index = typeof item.index === "number" ? item.index : 0;
|
||||
return this.prizes[index]?.data || this.prizes[0]?.data;
|
||||
})
|
||||
.filter((item) => !!item);
|
||||
} else if (prize && typeof prize.index === "number") {
|
||||
// 如果prize是单个对象
|
||||
const index = prize.index;
|
||||
const itemData = this.prizes[index]?.data;
|
||||
if (itemData) {
|
||||
allPrizes.push(itemData);
|
||||
}
|
||||
} else {
|
||||
// 都不符合则使用当前索引的奖品
|
||||
allPrizes.push(prizeData);
|
||||
}
|
||||
|
||||
// 发送中奖信息到父组件
|
||||
this.$emit("end", {
|
||||
prize: prize,
|
||||
prizeData: prizeData, // 主要奖品数据
|
||||
allPrizes: allPrizes, // 所有中奖奖品数据
|
||||
message: `恭喜您获得 ${prizeData.title}`,
|
||||
prizeInfo: {
|
||||
name: prizeData.title,
|
||||
image: prizeData.imgurl,
|
||||
description: `价值：${prizeData.price} 元`,
|
||||
data: prizeData,
|
||||
},
|
||||
});
|
||||
|
||||
// // 延迟隐藏组件
|
||||
// setTimeout(() => {
|
||||
// this.hide();
|
||||
// }, 2000);
|
||||
} catch (error) {
|
||||
console.error("处理抽奖结果时出错:", error);
|
||||
this.hide();
|
||||
}
|
||||
},
|
||||
|
||||
// 开始抽奖方法
|
||||
startDraw(callback) {
|
||||
// 检查是否已初始化
|
||||
if (!this.isInitialized) {
|
||||
console.error("老虎机尚未初始化，请先调用init方法");
|
||||
return this;
|
||||
}
|
||||
|
||||
// 不再自动初始化，需要先手动调用init
|
||||
this.show();
|
||||
|
||||
setTimeout(() => {
|
||||
// 确保DOM已渲染完成后再调用play方法
|
||||
this.$nextTick(() => {
|
||||
// 检查组件是否已初始化
|
||||
if (this.$refs.myLucky) {
|
||||
// 开始旋转
|
||||
this.$refs.myLucky.play();
|
||||
if (this.bgmCtx && this.bgmCtx.slotBgm) {
|
||||
this.bgmCtx.slotBgm.play();
|
||||
}
|
||||
|
||||
if (typeof callback === "function") {
|
||||
callback();
|
||||
}
|
||||
} else {
|
||||
console.error("老虎机组件未初始化");
|
||||
}
|
||||
});
|
||||
}, 100);
|
||||
|
||||
return this; // 返回this以支持链式调用
|
||||
},
|
||||
|
||||
// 停止抽奖并指定中奖索引
|
||||
stopDraw(prizeIndices) {
|
||||
// 检查是否已初始化
|
||||
if (!this.isInitialized) {
|
||||
console.error("老虎机尚未初始化，请先调用init方法");
|
||||
return this;
|
||||
}
|
||||
|
||||
if (!this.$refs.myLucky) {
|
||||
console.error("老虎机组件未初始化");
|
||||
return this;
|
||||
}
|
||||
|
||||
// 如果没有传入奖品索引数组或传入的不是数组
|
||||
if (
|
||||
!prizeIndices ||
|
||||
!Array.isArray(prizeIndices) ||
|
||||
prizeIndices.length === 0
|
||||
) {
|
||||
// 生成与当前模式对应数量的随机索引
|
||||
const randomIndices = [];
|
||||
for (let i = 0; i < this.currentMode; i++) {
|
||||
randomIndices.push(Math.floor(Math.random() * this.prizes.length));
|
||||
}
|
||||
this.currentPrizeIndex = randomIndices[0]; // 使用第一个作为主要中奖索引
|
||||
this.$refs.myLucky.stop(randomIndices);
|
||||
return this;
|
||||
}
|
||||
|
||||
// 如果传入的数组长度不够当前模式需要的数量，补足
|
||||
let indices = [...prizeIndices];
|
||||
while (indices.length < this.currentMode) {
|
||||
indices.push(indices[indices.length - 1] || 0);
|
||||
}
|
||||
|
||||
// 确保所有索引都在有效范围内
|
||||
indices = indices.map((index) => {
|
||||
if (index < 0 || index >= this.prizes.length) {
|
||||
return Math.floor(Math.random() * this.prizes.length);
|
||||
}
|
||||
return index;
|
||||
});
|
||||
|
||||
// 记录第一个索引作为主要中奖索引
|
||||
this.currentPrizeIndex = indices[0];
|
||||
|
||||
// 如果传入的索引超过当前模式，只使用前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);
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
// 强制结束抽奖
|
||||
forceEndDraw() {
|
||||
if (!this.isInitialized) {
|
||||
console.error("老虎机尚未初始化，请先调用init方法");
|
||||
return this;
|
||||
}
|
||||
|
||||
this.hide();
|
||||
return this; // 返回this以支持链式调用
|
||||
},
|
||||
|
||||
// 重置组件状态
|
||||
reset() {
|
||||
this.isInitialized = false;
|
||||
this.isVisible = false;
|
||||
this.slots = [];
|
||||
this.prizes = [];
|
||||
this.prizeList = [];
|
||||
this.currentPrizeIndex = -1;
|
||||
return this;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
// 不再自动初始化
|
||||
},
|
||||
watch: {
|
||||
// 监听外部mode变化，同步到内部状态
|
||||
mode: {
|
||||
immediate: true,
|
||||
handler(newVal) {
|
||||
if ([1, 3, 5, '1', '3', '5'].includes(newVal)) {
|
||||
this.internalMode = parseInt(newVal);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
|
||||
<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($imgurl + "common/slot_bg.webp");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
// 老虎机容器样式
|
||||
.slot-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.slot-icon {
|
||||
padding-bottom: 25rpx;
|
||||
}
|
||||
|
||||
// 老虎机视图样式
|
||||
.slot-view {
|
||||
background-size: 100% 100%;
|
||||
width: 100%;
|
||||
padding-top: 80rpx;
|
||||
padding-bottom: 80rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// 根据模式设置不同的背景
|
||||
.slot-view-1 {
|
||||
background: url("https://image.zfunbox.cn/static/image/lucky/di_5.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.slot-view-3 {
|
||||
background: url("https://image.zfunbox.cn/static/image/lucky/di_3.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.slot-view-5 {
|
||||
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);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
489
components/detail-lucky/detail-lucky_1.vue
Normal file
489
components/detail-lucky/detail-lucky_1.vue
Normal file
|
|
@ -0,0 +1,489 @@
|
|||
<template>
|
||||
<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>
|
||||
</view>
|
||||
<view class="slot-view">
|
||||
<!-- 老虎机组件 -->
|
||||
<SlotMachine
|
||||
ref="myLucky"
|
||||
:width="windowWidth"
|
||||
height="160rpx"
|
||||
:blocks="blocks"
|
||||
:slots="slots"
|
||||
:prizes="prizes"
|
||||
:defaultConfig="defaultConfig"
|
||||
@start="startCallBack"
|
||||
@end="endCallBack"
|
||||
>
|
||||
</SlotMachine>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 导入老虎机组件
|
||||
import SlotMachine from "@/components/@lucky-canvas/uni/slot-machine";
|
||||
|
||||
function shuffle(array) {
|
||||
for (let i = array.length - 1; i > 0; i--) {
|
||||
// 生成一个 0 到 i 之间的随机整数
|
||||
const j = Math.floor(Math.random() * (i + 1));
|
||||
// 交换 array[i] 和 array[j]
|
||||
[array[i], array[j]] = [array[j], array[i]];
|
||||
}
|
||||
return array;
|
||||
}
|
||||
|
||||
export default {
|
||||
components: { SlotMachine },
|
||||
props: {
|
||||
// 移除prizeList props
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isVisible: false, // 控制组件显示/隐藏
|
||||
isInitialized: false, // 控制是否已初始化
|
||||
windowWidth: "0px",
|
||||
blocks: [],
|
||||
slots: [],
|
||||
prizes: [],
|
||||
prizeList: [], // 移到data中
|
||||
defaultConfig: {
|
||||
mode: "horizontal", // 水平模式
|
||||
rowSpacing: "10px", // 行间距
|
||||
colSpacing: "10px", // 列间距
|
||||
accelerationTime: 1500,
|
||||
},
|
||||
luckyMessage: "恭喜您获得奖品",
|
||||
luckyPrize: null,
|
||||
currentPrizeIndex: -1,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 计算抽奖项尺寸
|
||||
lotteryItemSize() {
|
||||
let height = uni.upx2px(220);
|
||||
let width = uni.upx2px(170);
|
||||
return [width, height];
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 初始化老虎机组件
|
||||
init(prizeList) {
|
||||
// 设置奖品列表
|
||||
if (prizeList && Array.isArray(prizeList) && prizeList.length > 0) {
|
||||
this.prizeList = prizeList;
|
||||
} else {
|
||||
this.prizeList = this.getDefaultPrizes();
|
||||
}
|
||||
|
||||
let windowWidth = uni.getSystemInfoSync().windowWidth;
|
||||
let t = this.prizeList;
|
||||
|
||||
let prizes = [];
|
||||
for (let i = 0; i < t.length; i++) {
|
||||
prizes.push({
|
||||
imgs: [
|
||||
{
|
||||
src: t[i].imgurl,
|
||||
width: "152.78rpx",
|
||||
height: "152.78rpx",
|
||||
},
|
||||
],
|
||||
background: "#ffffff",
|
||||
data: t[i], // 将原始数据保存到prize中，方便后续使用
|
||||
});
|
||||
}
|
||||
const arr = Array.from({ length: t.length }, (_, i) => i);
|
||||
let slots = [
|
||||
{ order: shuffle([...arr]), speed: 20 }, // 第一列速度
|
||||
];
|
||||
|
||||
this.windowWidth = windowWidth + "px";
|
||||
this.slots = slots;
|
||||
this.prizes = prizes;
|
||||
|
||||
// 标记为已初始化
|
||||
this.isInitialized = true;
|
||||
|
||||
return this; // 返回this以支持链式调用
|
||||
},
|
||||
|
||||
// 显示老虎机组件
|
||||
show() {
|
||||
if (!this.isInitialized) {
|
||||
console.error("老虎机尚未初始化，请先调用init方法");
|
||||
return this;
|
||||
}
|
||||
this.isVisible = true;
|
||||
return this;
|
||||
},
|
||||
|
||||
// 隐藏老虎机组件
|
||||
hide() {
|
||||
this.isVisible = false;
|
||||
return this;
|
||||
},
|
||||
|
||||
// 获取默认奖品列表
|
||||
getDefaultPrizes() {
|
||||
return [
|
||||
{
|
||||
id: 1128,
|
||||
title: "兹琪露娜提亚斯",
|
||||
imgurl:
|
||||
"https://image.zfunbox.cn/topic/20250515/2986e27e673ef675e02771cdebd9b822.jpg",
|
||||
price: "350.00",
|
||||
real_pro: "0.02000",
|
||||
goods_type: 1,
|
||||
doubling: 1,
|
||||
is_lingzhu: 0,
|
||||
},
|
||||
{
|
||||
id: 1129,
|
||||
title: "月岗恋钟",
|
||||
imgurl:
|
||||
"https://image.zfunbox.cn/topic/20250515/2c5ed2097716db6bef01da718bc3c091.jpg",
|
||||
price: "132.00",
|
||||
real_pro: "0.02000",
|
||||
goods_type: 1,
|
||||
doubling: 3,
|
||||
is_lingzhu: 0,
|
||||
},
|
||||
{
|
||||
id: 1130,
|
||||
title: "BANDAI万代拼装模型 1/100 MG 机动战士高达 倒A 逆A-15岁以上",
|
||||
imgurl:
|
||||
"https://image.zfunbox.cn/topic/20250515/e35da49b4976f156f2f98dec002274a5.png",
|
||||
price: "305.00",
|
||||
real_pro: "0.03000",
|
||||
goods_type: 1,
|
||||
doubling: 1,
|
||||
is_lingzhu: 0,
|
||||
},
|
||||
{
|
||||
id: 1131,
|
||||
title: "BANDAI 万代拼装模型 MG 主天使-15岁以上",
|
||||
imgurl:
|
||||
"https://image.zfunbox.cn/topic/20250515/77302c6f1ea9ea6a8516cc1208174aee.png",
|
||||
price: "289.00",
|
||||
real_pro: "0.03000",
|
||||
goods_type: 1,
|
||||
doubling: 1,
|
||||
is_lingzhu: 0,
|
||||
},
|
||||
{
|
||||
id: 1132,
|
||||
title: "BANDAI万代 HG00 09 1/144 座天使高达一型-15岁以上",
|
||||
imgurl:
|
||||
"https://image.zfunbox.cn/topic/20250515/55e816c93b5e4103a30682c586816b11.jpg",
|
||||
price: "114.00",
|
||||
real_pro: "0.50000",
|
||||
goods_type: 1,
|
||||
doubling: 3,
|
||||
is_lingzhu: 0,
|
||||
},
|
||||
{
|
||||
id: 1133,
|
||||
title: "BANDAI万代拼装模型 HGUC 130 机动战士高达 杰斯塔-15岁以上",
|
||||
imgurl:
|
||||
"https://image.zfunbox.cn/topic/20250515/aeb6bfb8b4aa8a29796b242e4f5d56d9.png",
|
||||
price: "113.00",
|
||||
real_pro: "1.50000",
|
||||
goods_type: 1,
|
||||
doubling: 1,
|
||||
is_lingzhu: 0,
|
||||
},
|
||||
{
|
||||
id: 1134,
|
||||
title: "BANDAI万代拼装模型HG26 1/144 凯列班高达 异灵高达-15岁以上",
|
||||
imgurl:
|
||||
"https://image.zfunbox.cn/topic/20250515/329e3a7e21772a63cea03d31f948345d.png",
|
||||
price: "112.00",
|
||||
real_pro: "1.00000",
|
||||
goods_type: 1,
|
||||
doubling: 2,
|
||||
is_lingzhu: 0,
|
||||
},
|
||||
{
|
||||
id: 1135,
|
||||
title: "梦幻",
|
||||
imgurl:
|
||||
"https://image.zfunbox.cn/topic/20250515/d2c7e48515d393084000595074209042.jpg",
|
||||
price: "41.00",
|
||||
real_pro: "2.50000",
|
||||
goods_type: 1,
|
||||
doubling: 2,
|
||||
is_lingzhu: 0,
|
||||
},
|
||||
{
|
||||
id: 1136,
|
||||
title: "谜拟丘",
|
||||
imgurl:
|
||||
"https://image.zfunbox.cn/topic/20250515/6031827bc455cbf86ff778d74ddffbd3.jpg",
|
||||
price: "38.00",
|
||||
real_pro: "1.50000",
|
||||
goods_type: 1,
|
||||
doubling: 1,
|
||||
is_lingzhu: 0,
|
||||
},
|
||||
{
|
||||
id: 1137,
|
||||
title: "小提琴模型1个",
|
||||
imgurl:
|
||||
"https://image.zfunbox.cn/topic/20250515/22846dea5a933ab314998afc51abb7bb.jpg",
|
||||
price: "13.80",
|
||||
real_pro: "92.90000",
|
||||
goods_type: 1,
|
||||
doubling: 1,
|
||||
is_lingzhu: 0,
|
||||
},
|
||||
];
|
||||
},
|
||||
|
||||
// 老虎机开始回调
|
||||
startCallBack() {
|
||||
console.log("开始抽奖");
|
||||
this.$emit("start");
|
||||
},
|
||||
|
||||
// 抽奖结束回调
|
||||
endCallBack(prize) {
|
||||
// 奖品详情
|
||||
console.log("抽奖结束", prize);
|
||||
|
||||
try {
|
||||
// 准备中奖信息
|
||||
const prizeData =
|
||||
this.prizes[this.currentPrizeIndex]?.data || this.prizes[0]?.data;
|
||||
|
||||
if (!prizeData) {
|
||||
console.error("无法获取奖品数据");
|
||||
return;
|
||||
}
|
||||
|
||||
// 获取所有中奖奖品
|
||||
let allPrizes = [];
|
||||
|
||||
// 检查prize是否是数组，如果是则使用map，否则只使用当前prize
|
||||
if (Array.isArray(prize)) {
|
||||
allPrizes = prize
|
||||
.map((item) => {
|
||||
const index = typeof item.index === "number" ? item.index : 0;
|
||||
return this.prizes[index]?.data || this.prizes[0]?.data;
|
||||
})
|
||||
.filter((item) => !!item);
|
||||
} else if (prize && typeof prize.index === "number") {
|
||||
// 如果prize是单个对象
|
||||
const index = prize.index;
|
||||
const itemData = this.prizes[index]?.data;
|
||||
if (itemData) {
|
||||
allPrizes.push(itemData);
|
||||
}
|
||||
} else {
|
||||
// 都不符合则使用当前索引的奖品
|
||||
allPrizes.push(prizeData);
|
||||
}
|
||||
|
||||
// 发送中奖信息到父组件
|
||||
this.$emit("end", {
|
||||
prize: prize,
|
||||
prizeData: prizeData, // 主要奖品数据
|
||||
allPrizes: allPrizes, // 所有中奖奖品数据
|
||||
message: `恭喜您获得 ${prizeData.title}`,
|
||||
prizeInfo: {
|
||||
name: prizeData.title,
|
||||
image: prizeData.imgurl,
|
||||
description: `价值：${prizeData.price} 元`,
|
||||
data: prizeData,
|
||||
},
|
||||
});
|
||||
|
||||
// 延迟隐藏组件
|
||||
setTimeout(() => {
|
||||
this.hide();
|
||||
}, 2000);
|
||||
} catch (error) {
|
||||
console.error("处理抽奖结果时出错:", error);
|
||||
this.hide();
|
||||
}
|
||||
},
|
||||
|
||||
// 开始抽奖方法
|
||||
startDraw(callback) {
|
||||
// 检查是否已初始化
|
||||
if (!this.isInitialized) {
|
||||
console.error("老虎机尚未初始化，请先调用init方法");
|
||||
return this;
|
||||
}
|
||||
|
||||
// 不再自动初始化，需要先手动调用init
|
||||
this.show();
|
||||
|
||||
setTimeout(() => {
|
||||
// 确保DOM已渲染完成后再调用play方法
|
||||
this.$nextTick(() => {
|
||||
// 检查组件是否已初始化
|
||||
if (this.$refs.myLucky) {
|
||||
// 开始旋转
|
||||
this.$refs.myLucky.play();
|
||||
if (this.bgmCtx && this.bgmCtx.slotBgm) {
|
||||
this.bgmCtx.slotBgm.play();
|
||||
}
|
||||
|
||||
if (typeof callback === "function") {
|
||||
callback();
|
||||
}
|
||||
} else {
|
||||
console.error("老虎机组件未初始化");
|
||||
}
|
||||
});
|
||||
}, 100);
|
||||
|
||||
return this; // 返回this以支持链式调用
|
||||
},
|
||||
|
||||
// 停止抽奖并指定中奖索引
|
||||
stopDraw(prizeIndices) {
|
||||
// 检查是否已初始化
|
||||
if (!this.isInitialized) {
|
||||
console.error("老虎机尚未初始化，请先调用init方法");
|
||||
return this;
|
||||
}
|
||||
|
||||
if (!this.$refs.myLucky) {
|
||||
console.error("老虎机组件未初始化");
|
||||
return this;
|
||||
}
|
||||
|
||||
// 如果没有传入奖品索引数组或传入的不是数组
|
||||
if (
|
||||
!prizeIndices ||
|
||||
!Array.isArray(prizeIndices) ||
|
||||
prizeIndices.length === 0
|
||||
) {
|
||||
// 生成5个随机索引
|
||||
const randomIndices = [];
|
||||
for (let i = 0; i < 5; i++) {
|
||||
randomIndices.push(Math.floor(Math.random() * this.prizes.length));
|
||||
}
|
||||
this.currentPrizeIndex = randomIndices[0]; // 使用第一个作为主要中奖索引
|
||||
this.$refs.myLucky.stop(randomIndices);
|
||||
return this;
|
||||
}
|
||||
|
||||
// 如果传入的数组长度不够5个，补足到5个
|
||||
let indices = [...prizeIndices];
|
||||
while (indices.length < 5) {
|
||||
indices.push(indices[indices.length - 1] || 0);
|
||||
}
|
||||
|
||||
// 确保所有索引都在有效范围内
|
||||
indices = indices.map((index) => {
|
||||
if (index < 0 || index >= this.prizes.length) {
|
||||
return Math.floor(Math.random() * this.prizes.length);
|
||||
}
|
||||
return index;
|
||||
});
|
||||
|
||||
// 记录第一个索引作为主要中奖索引
|
||||
this.currentPrizeIndex = indices[0];
|
||||
|
||||
// 调用stop方法停止旋转
|
||||
this.$refs.myLucky.stop(indices[0]);
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
// 强制结束抽奖
|
||||
forceEndDraw() {
|
||||
if (!this.isInitialized) {
|
||||
console.error("老虎机尚未初始化，请先调用init方法");
|
||||
return this;
|
||||
}
|
||||
|
||||
this.hide();
|
||||
return this; // 返回this以支持链式调用
|
||||
},
|
||||
|
||||
// 重置组件状态
|
||||
reset() {
|
||||
this.isInitialized = false;
|
||||
this.isVisible = false;
|
||||
this.slots = [];
|
||||
this.prizes = [];
|
||||
this.prizeList = [];
|
||||
this.currentPrizeIndex = -1;
|
||||
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($imgurl + "common/slot_bg.webp");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
// 老虎机容器样式
|
||||
.slot-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
.slot-icon {
|
||||
padding-bottom: 25rpx;
|
||||
}
|
||||
// 老虎机视图样式
|
||||
.slot-view {
|
||||
background: url("https://image.zfunbox.cn/static/image/lucky/di_5.png")
|
||||
no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 100%;
|
||||
padding-top: 80rpx;
|
||||
padding-bottom: 80rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// 抽奖项样式
|
||||
.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);
|
||||
}
|
||||
</style>
|
||||
493
components/detail-lucky/detail-lucky_3.vue
Normal file
493
components/detail-lucky/detail-lucky_3.vue
Normal file
|
|
@ -0,0 +1,493 @@
|
|||
<template>
|
||||
<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>
|
||||
</view>
|
||||
<view class="slot-view">
|
||||
<!-- 老虎机组件 -->
|
||||
<SlotMachine
|
||||
ref="myLucky"
|
||||
:width="windowWidth"
|
||||
height="480rpx"
|
||||
:blocks="blocks"
|
||||
:slots="slots"
|
||||
:prizes="prizes"
|
||||
:defaultConfig="defaultConfig"
|
||||
@start="startCallBack"
|
||||
@end="endCallBack"
|
||||
>
|
||||
</SlotMachine>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 导入老虎机组件
|
||||
import SlotMachine from "@/components/@lucky-canvas/uni/slot-machine";
|
||||
|
||||
function shuffle(array) {
|
||||
for (let i = array.length - 1; i > 0; i--) {
|
||||
// 生成一个 0 到 i 之间的随机整数
|
||||
const j = Math.floor(Math.random() * (i + 1));
|
||||
// 交换 array[i] 和 array[j]
|
||||
[array[i], array[j]] = [array[j], array[i]];
|
||||
}
|
||||
return array;
|
||||
}
|
||||
|
||||
export default {
|
||||
components: { SlotMachine },
|
||||
props: {
|
||||
// 移除prizeList props
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isVisible: false, // 控制组件显示/隐藏
|
||||
isInitialized: false, // 控制是否已初始化
|
||||
windowWidth: "0px",
|
||||
blocks: [],
|
||||
slots: [],
|
||||
prizes: [],
|
||||
prizeList: [], // 移到data中
|
||||
defaultConfig: {
|
||||
mode: "horizontal", // 水平模式
|
||||
rowSpacing: "10px", // 行间距
|
||||
colSpacing: "10px", // 列间距
|
||||
accelerationTime: 1500,
|
||||
},
|
||||
luckyMessage: "恭喜您获得奖品",
|
||||
luckyPrize: null,
|
||||
currentPrizeIndex: -1,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 计算抽奖项尺寸
|
||||
lotteryItemSize() {
|
||||
let height = uni.upx2px(220);
|
||||
let width = uni.upx2px(170);
|
||||
return [width, height];
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 初始化老虎机组件
|
||||
init(prizeList) {
|
||||
// 设置奖品列表
|
||||
if (prizeList && Array.isArray(prizeList) && prizeList.length > 0) {
|
||||
this.prizeList = prizeList;
|
||||
} else {
|
||||
this.prizeList = this.getDefaultPrizes();
|
||||
}
|
||||
|
||||
let windowWidth = uni.getSystemInfoSync().windowWidth;
|
||||
let t = this.prizeList;
|
||||
|
||||
let prizes = [];
|
||||
for (let i = 0; i < t.length; i++) {
|
||||
prizes.push({
|
||||
imgs: [
|
||||
{
|
||||
src: t[i].imgurl,
|
||||
width: "152.78rpx",
|
||||
height: "152.78rpx",
|
||||
},
|
||||
],
|
||||
background: "#ffffff",
|
||||
data: t[i], // 将原始数据保存到prize中，方便后续使用
|
||||
});
|
||||
}
|
||||
const arr = Array.from({ length: t.length }, (_, i) => i);
|
||||
let slots = [
|
||||
{ order: shuffle([...arr]), speed: 20 }, // 第一列速度
|
||||
{ order: shuffle([...arr]), speed: 20 }, // 第二列速度
|
||||
{ order: shuffle([...arr]), speed: 20 }, // 第三列速度
|
||||
];
|
||||
|
||||
this.windowWidth = windowWidth + "px";
|
||||
this.slots = slots;
|
||||
this.prizes = prizes;
|
||||
|
||||
// 标记为已初始化
|
||||
this.isInitialized = true;
|
||||
|
||||
return this; // 返回this以支持链式调用
|
||||
},
|
||||
|
||||
// 显示老虎机组件
|
||||
show() {
|
||||
if (!this.isInitialized) {
|
||||
console.error("老虎机尚未初始化，请先调用init方法");
|
||||
return this;
|
||||
}
|
||||
this.isVisible = true;
|
||||
return this;
|
||||
},
|
||||
|
||||
// 隐藏老虎机组件
|
||||
hide() {
|
||||
this.isVisible = false;
|
||||
return this;
|
||||
},
|
||||
|
||||
// 获取默认奖品列表
|
||||
getDefaultPrizes() {
|
||||
return [
|
||||
{
|
||||
id: 1128,
|
||||
title: "兹琪露娜提亚斯",
|
||||
imgurl:
|
||||
"https://image.zfunbox.cn/topic/20250515/2986e27e673ef675e02771cdebd9b822.jpg",
|
||||
price: "350.00",
|
||||
real_pro: "0.02000",
|
||||
goods_type: 1,
|
||||
doubling: 1,
|
||||
is_lingzhu: 0,
|
||||
},
|
||||
{
|
||||
id: 1129,
|
||||
title: "月岗恋钟",
|
||||
imgurl:
|
||||
"https://image.zfunbox.cn/topic/20250515/2c5ed2097716db6bef01da718bc3c091.jpg",
|
||||
price: "132.00",
|
||||
real_pro: "0.02000",
|
||||
goods_type: 1,
|
||||
doubling: 3,
|
||||
is_lingzhu: 0,
|
||||
},
|
||||
{
|
||||
id: 1130,
|
||||
title: "BANDAI万代拼装模型 1/100 MG 机动战士高达 倒A 逆A-15岁以上",
|
||||
imgurl:
|
||||
"https://image.zfunbox.cn/topic/20250515/e35da49b4976f156f2f98dec002274a5.png",
|
||||
price: "305.00",
|
||||
real_pro: "0.03000",
|
||||
goods_type: 1,
|
||||
doubling: 1,
|
||||
is_lingzhu: 0,
|
||||
},
|
||||
{
|
||||
id: 1131,
|
||||
title: "BANDAI 万代拼装模型 MG 主天使-15岁以上",
|
||||
imgurl:
|
||||
"https://image.zfunbox.cn/topic/20250515/77302c6f1ea9ea6a8516cc1208174aee.png",
|
||||
price: "289.00",
|
||||
real_pro: "0.03000",
|
||||
goods_type: 1,
|
||||
doubling: 1,
|
||||
is_lingzhu: 0,
|
||||
},
|
||||
{
|
||||
id: 1132,
|
||||
title: "BANDAI万代 HG00 09 1/144 座天使高达一型-15岁以上",
|
||||
imgurl:
|
||||
"https://image.zfunbox.cn/topic/20250515/55e816c93b5e4103a30682c586816b11.jpg",
|
||||
price: "114.00",
|
||||
real_pro: "0.50000",
|
||||
goods_type: 1,
|
||||
doubling: 3,
|
||||
is_lingzhu: 0,
|
||||
},
|
||||
{
|
||||
id: 1133,
|
||||
title: "BANDAI万代拼装模型 HGUC 130 机动战士高达 杰斯塔-15岁以上",
|
||||
imgurl:
|
||||
"https://image.zfunbox.cn/topic/20250515/aeb6bfb8b4aa8a29796b242e4f5d56d9.png",
|
||||
price: "113.00",
|
||||
real_pro: "1.50000",
|
||||
goods_type: 1,
|
||||
doubling: 1,
|
||||
is_lingzhu: 0,
|
||||
},
|
||||
{
|
||||
id: 1134,
|
||||
title: "BANDAI万代拼装模型HG26 1/144 凯列班高达 异灵高达-15岁以上",
|
||||
imgurl:
|
||||
"https://image.zfunbox.cn/topic/20250515/329e3a7e21772a63cea03d31f948345d.png",
|
||||
price: "112.00",
|
||||
real_pro: "1.00000",
|
||||
goods_type: 1,
|
||||
doubling: 2,
|
||||
is_lingzhu: 0,
|
||||
},
|
||||
{
|
||||
id: 1135,
|
||||
title: "梦幻",
|
||||
imgurl:
|
||||
"https://image.zfunbox.cn/topic/20250515/d2c7e48515d393084000595074209042.jpg",
|
||||
price: "41.00",
|
||||
real_pro: "2.50000",
|
||||
goods_type: 1,
|
||||
doubling: 2,
|
||||
is_lingzhu: 0,
|
||||
},
|
||||
{
|
||||
id: 1136,
|
||||
title: "谜拟丘",
|
||||
imgurl:
|
||||
"https://image.zfunbox.cn/topic/20250515/6031827bc455cbf86ff778d74ddffbd3.jpg",
|
||||
price: "38.00",
|
||||
real_pro: "1.50000",
|
||||
goods_type: 1,
|
||||
doubling: 1,
|
||||
is_lingzhu: 0,
|
||||
},
|
||||
{
|
||||
id: 1137,
|
||||
title: "小提琴模型1个",
|
||||
imgurl:
|
||||
"https://image.zfunbox.cn/topic/20250515/22846dea5a933ab314998afc51abb7bb.jpg",
|
||||
price: "13.80",
|
||||
real_pro: "92.90000",
|
||||
goods_type: 1,
|
||||
doubling: 1,
|
||||
is_lingzhu: 0,
|
||||
},
|
||||
];
|
||||
},
|
||||
|
||||
// 老虎机开始回调
|
||||
startCallBack() {
|
||||
console.log("开始抽奖");
|
||||
this.$emit("start");
|
||||
},
|
||||
|
||||
// 抽奖结束回调
|
||||
endCallBack(prize) {
|
||||
// 奖品详情
|
||||
console.log("抽奖结束", prize);
|
||||
|
||||
try {
|
||||
// 准备中奖信息
|
||||
const prizeData =
|
||||
this.prizes[this.currentPrizeIndex]?.data || this.prizes[0]?.data;
|
||||
|
||||
if (!prizeData) {
|
||||
console.error("无法获取奖品数据");
|
||||
return;
|
||||
}
|
||||
|
||||
// 获取所有中奖奖品
|
||||
let allPrizes = [];
|
||||
|
||||
// 检查prize是否是数组，如果是则使用map，否则只使用当前prize
|
||||
if (Array.isArray(prize)) {
|
||||
allPrizes = prize
|
||||
.map((item) => {
|
||||
const index = typeof item.index === "number" ? item.index : 0;
|
||||
return this.prizes[index]?.data || this.prizes[0]?.data;
|
||||
})
|
||||
.filter((item) => !!item);
|
||||
} else if (prize && typeof prize.index === "number") {
|
||||
// 如果prize是单个对象
|
||||
const index = prize.index;
|
||||
const itemData = this.prizes[index]?.data;
|
||||
if (itemData) {
|
||||
allPrizes.push(itemData);
|
||||
}
|
||||
} else {
|
||||
// 都不符合则使用当前索引的奖品
|
||||
allPrizes.push(prizeData);
|
||||
}
|
||||
|
||||
// 发送中奖信息到父组件
|
||||
this.$emit("end", {
|
||||
prize: prize,
|
||||
prizeData: prizeData, // 主要奖品数据
|
||||
allPrizes: allPrizes, // 所有中奖奖品数据
|
||||
message: `恭喜您获得 ${prizeData.title}`,
|
||||
prizeInfo: {
|
||||
name: prizeData.title,
|
||||
image: prizeData.imgurl,
|
||||
description: `价值：${prizeData.price} 元`,
|
||||
data: prizeData,
|
||||
},
|
||||
});
|
||||
|
||||
// 延迟隐藏组件
|
||||
setTimeout(() => {
|
||||
this.hide();
|
||||
}, 2000);
|
||||
} catch (error) {
|
||||
console.error("处理抽奖结果时出错:", error);
|
||||
this.hide();
|
||||
}
|
||||
},
|
||||
|
||||
// 开始抽奖方法
|
||||
startDraw(callback) {
|
||||
// 检查是否已初始化
|
||||
if (!this.isInitialized) {
|
||||
console.error("老虎机尚未初始化，请先调用init方法");
|
||||
return this;
|
||||
}
|
||||
|
||||
// 不再自动初始化，需要先手动调用init
|
||||
this.show();
|
||||
|
||||
setTimeout(() => {
|
||||
// 确保DOM已渲染完成后再调用play方法
|
||||
this.$nextTick(() => {
|
||||
// 检查组件是否已初始化
|
||||
if (this.$refs.myLucky) {
|
||||
// 开始旋转
|
||||
this.$refs.myLucky.play();
|
||||
if (this.bgmCtx && this.bgmCtx.slotBgm) {
|
||||
this.bgmCtx.slotBgm.play();
|
||||
}
|
||||
|
||||
if (typeof callback === "function") {
|
||||
callback();
|
||||
}
|
||||
} else {
|
||||
console.error("老虎机组件未初始化");
|
||||
}
|
||||
});
|
||||
}, 100);
|
||||
|
||||
return this; // 返回this以支持链式调用
|
||||
},
|
||||
|
||||
// 停止抽奖并指定中奖索引
|
||||
stopDraw(prizeIndices) {
|
||||
// 检查是否已初始化
|
||||
if (!this.isInitialized) {
|
||||
console.error("老虎机尚未初始化，请先调用init方法");
|
||||
return this;
|
||||
}
|
||||
|
||||
if (!this.$refs.myLucky) {
|
||||
console.error("老虎机组件未初始化");
|
||||
return this;
|
||||
}
|
||||
|
||||
// 如果没有传入奖品索引数组或传入的不是数组
|
||||
if (
|
||||
!prizeIndices ||
|
||||
!Array.isArray(prizeIndices) ||
|
||||
prizeIndices.length === 0
|
||||
) {
|
||||
// 生成5个随机索引
|
||||
const randomIndices = [];
|
||||
for (let i = 0; i < 5; i++) {
|
||||
randomIndices.push(Math.floor(Math.random() * this.prizes.length));
|
||||
}
|
||||
this.currentPrizeIndex = randomIndices[0]; // 使用第一个作为主要中奖索引
|
||||
this.$refs.myLucky.stop(randomIndices);
|
||||
return this;
|
||||
}
|
||||
|
||||
// 如果传入的数组长度不够5个，补足到5个
|
||||
let indices = [...prizeIndices];
|
||||
while (indices.length < 5) {
|
||||
indices.push(indices[indices.length - 1] || 0);
|
||||
}
|
||||
|
||||
// 确保所有索引都在有效范围内
|
||||
indices = indices.map((index) => {
|
||||
if (index < 0 || index >= this.prizes.length) {
|
||||
return Math.floor(Math.random() * this.prizes.length);
|
||||
}
|
||||
return index;
|
||||
});
|
||||
|
||||
// 记录第一个索引作为主要中奖索引
|
||||
this.currentPrizeIndex = indices[0];
|
||||
if (indices.length > 3) {
|
||||
indices = indices.slice(0, 3);
|
||||
}
|
||||
// 调用stop方法停止旋转
|
||||
this.$refs.myLucky.stop(indices);
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
// 强制结束抽奖
|
||||
forceEndDraw() {
|
||||
if (!this.isInitialized) {
|
||||
console.error("老虎机尚未初始化，请先调用init方法");
|
||||
return this;
|
||||
}
|
||||
|
||||
this.hide();
|
||||
return this; // 返回this以支持链式调用
|
||||
},
|
||||
|
||||
// 重置组件状态
|
||||
reset() {
|
||||
this.isInitialized = false;
|
||||
this.isVisible = false;
|
||||
this.slots = [];
|
||||
this.prizes = [];
|
||||
this.prizeList = [];
|
||||
this.currentPrizeIndex = -1;
|
||||
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($imgurl + "common/slot_bg.webp");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
}
|
||||
.slot-icon {
|
||||
padding-bottom: 25rpx;
|
||||
}
|
||||
// 老虎机容器样式
|
||||
.slot-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// 老虎机视图样式
|
||||
.slot-view {
|
||||
background: url("https://image.zfunbox.cn/static/image/lucky/di_3.png")
|
||||
no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 100%;
|
||||
padding-top: 80rpx;
|
||||
padding-bottom: 80rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// 抽奖项样式
|
||||
.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);
|
||||
}
|
||||
</style>
|
||||
485
components/detail-lucky/detail-lucky_5.vue
Normal file
485
components/detail-lucky/detail-lucky_5.vue
Normal file
|
|
@ -0,0 +1,485 @@
|
|||
<template>
|
||||
<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>
|
||||
</view>
|
||||
<view class="slot-view">
|
||||
<!-- 老虎机组件 -->
|
||||
<SlotMachine
|
||||
ref="myLucky"
|
||||
:width="windowWidth"
|
||||
height="800rpx"
|
||||
:blocks="blocks"
|
||||
:slots="slots"
|
||||
:prizes="prizes"
|
||||
:defaultConfig="defaultConfig"
|
||||
@start="startCallBack"
|
||||
@end="endCallBack"
|
||||
>
|
||||
</SlotMachine>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 导入老虎机组件
|
||||
import SlotMachine from "@/components/@lucky-canvas/uni/slot-machine";
|
||||
|
||||
function shuffle(array) {
|
||||
for (let i = array.length - 1; i > 0; i--) {
|
||||
// 生成一个 0 到 i 之间的随机整数
|
||||
const j = Math.floor(Math.random() * (i + 1));
|
||||
// 交换 array[i] 和 array[j]
|
||||
[array[i], array[j]] = [array[j], array[i]];
|
||||
}
|
||||
return array;
|
||||
}
|
||||
|
||||
export default {
|
||||
components: { SlotMachine },
|
||||
props: {
|
||||
// 移除prizeList props
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isVisible: false, // 控制组件显示/隐藏
|
||||
isInitialized: false, // 控制是否已初始化
|
||||
windowWidth: "0px",
|
||||
blocks: [],
|
||||
slots: [],
|
||||
prizes: [],
|
||||
prizeList: [], // 移到data中
|
||||
defaultConfig: {
|
||||
mode: "horizontal", // 水平模式
|
||||
rowSpacing: "10px", // 行间距
|
||||
colSpacing: "10px", // 列间距
|
||||
accelerationTime: 1500,
|
||||
},
|
||||
luckyMessage: "恭喜您获得奖品",
|
||||
luckyPrize: null,
|
||||
currentPrizeIndex: -1,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 计算抽奖项尺寸
|
||||
lotteryItemSize() {
|
||||
let height = uni.upx2px(220);
|
||||
let width = uni.upx2px(170);
|
||||
return [width, height];
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 初始化老虎机组件
|
||||
init(prizeList) {
|
||||
// 设置奖品列表
|
||||
if (prizeList && Array.isArray(prizeList) && prizeList.length > 0) {
|
||||
this.prizeList = prizeList;
|
||||
} else {
|
||||
this.prizeList = this.getDefaultPrizes();
|
||||
}
|
||||
|
||||
let windowWidth = uni.getSystemInfoSync().windowWidth;
|
||||
let t = this.prizeList;
|
||||
|
||||
let prizes = [];
|
||||
for (let i = 0; i < t.length; i++) {
|
||||
prizes.push({
|
||||
imgs: [
|
||||
{
|
||||
src: t[i].imgurl,
|
||||
width: "152.78rpx",
|
||||
height: "152.78rpx",
|
||||
},
|
||||
],
|
||||
background: "#ffffff",
|
||||
data: t[i], // 将原始数据保存到prize中，方便后续使用
|
||||
});
|
||||
}
|
||||
const arr = Array.from({ length: t.length }, (_, i) => i);
|
||||
let slots = [
|
||||
{ order: shuffle([...arr]), speed: 20 }, // 第一列速度
|
||||
{ order: shuffle([...arr]), speed: 20 }, // 第二列速度
|
||||
{ order: shuffle([...arr]), speed: 20 }, // 第三列速度
|
||||
{ order: shuffle([...arr]), speed: 20 }, // 第四列速度
|
||||
{ order: shuffle([...arr]), speed: 20 }, // 第五列速度
|
||||
];
|
||||
|
||||
this.windowWidth = windowWidth + "px";
|
||||
this.slots = slots;
|
||||
this.prizes = prizes;
|
||||
|
||||
// 标记为已初始化
|
||||
this.isInitialized = true;
|
||||
|
||||
return this; // 返回this以支持链式调用
|
||||
},
|
||||
|
||||
// 显示老虎机组件
|
||||
show() {
|
||||
if (!this.isInitialized) {
|
||||
console.error('老虎机尚未初始化，请先调用init方法');
|
||||
return this;
|
||||
}
|
||||
this.isVisible = true;
|
||||
return this;
|
||||
},
|
||||
|
||||
// 隐藏老虎机组件
|
||||
hide() {
|
||||
this.isVisible = false;
|
||||
return this;
|
||||
},
|
||||
|
||||
// 获取默认奖品列表
|
||||
getDefaultPrizes() {
|
||||
return [
|
||||
{
|
||||
id: 1128,
|
||||
title: "兹琪露娜提亚斯",
|
||||
imgurl:
|
||||
"https://image.zfunbox.cn/topic/20250515/2986e27e673ef675e02771cdebd9b822.jpg",
|
||||
price: "350.00",
|
||||
real_pro: "0.02000",
|
||||
goods_type: 1,
|
||||
doubling: 1,
|
||||
is_lingzhu: 0,
|
||||
},
|
||||
{
|
||||
id: 1129,
|
||||
title: "月岗恋钟",
|
||||
imgurl:
|
||||
"https://image.zfunbox.cn/topic/20250515/2c5ed2097716db6bef01da718bc3c091.jpg",
|
||||
price: "132.00",
|
||||
real_pro: "0.02000",
|
||||
goods_type: 1,
|
||||
doubling: 3,
|
||||
is_lingzhu: 0,
|
||||
},
|
||||
{
|
||||
id: 1130,
|
||||
title: "BANDAI万代拼装模型 1/100 MG 机动战士高达 倒A 逆A-15岁以上",
|
||||
imgurl:
|
||||
"https://image.zfunbox.cn/topic/20250515/e35da49b4976f156f2f98dec002274a5.png",
|
||||
price: "305.00",
|
||||
real_pro: "0.03000",
|
||||
goods_type: 1,
|
||||
doubling: 1,
|
||||
is_lingzhu: 0,
|
||||
},
|
||||
{
|
||||
id: 1131,
|
||||
title: "BANDAI 万代拼装模型 MG 主天使-15岁以上",
|
||||
imgurl:
|
||||
"https://image.zfunbox.cn/topic/20250515/77302c6f1ea9ea6a8516cc1208174aee.png",
|
||||
price: "289.00",
|
||||
real_pro: "0.03000",
|
||||
goods_type: 1,
|
||||
doubling: 1,
|
||||
is_lingzhu: 0,
|
||||
},
|
||||
{
|
||||
id: 1132,
|
||||
title: "BANDAI万代 HG00 09 1/144 座天使高达一型-15岁以上",
|
||||
imgurl:
|
||||
"https://image.zfunbox.cn/topic/20250515/55e816c93b5e4103a30682c586816b11.jpg",
|
||||
price: "114.00",
|
||||
real_pro: "0.50000",
|
||||
goods_type: 1,
|
||||
doubling: 3,
|
||||
is_lingzhu: 0,
|
||||
},
|
||||
{
|
||||
id: 1133,
|
||||
title: "BANDAI万代拼装模型 HGUC 130 机动战士高达 杰斯塔-15岁以上",
|
||||
imgurl:
|
||||
"https://image.zfunbox.cn/topic/20250515/aeb6bfb8b4aa8a29796b242e4f5d56d9.png",
|
||||
price: "113.00",
|
||||
real_pro: "1.50000",
|
||||
goods_type: 1,
|
||||
doubling: 1,
|
||||
is_lingzhu: 0,
|
||||
},
|
||||
{
|
||||
id: 1134,
|
||||
title: "BANDAI万代拼装模型HG26 1/144 凯列班高达 异灵高达-15岁以上",
|
||||
imgurl:
|
||||
"https://image.zfunbox.cn/topic/20250515/329e3a7e21772a63cea03d31f948345d.png",
|
||||
price: "112.00",
|
||||
real_pro: "1.00000",
|
||||
goods_type: 1,
|
||||
doubling: 2,
|
||||
is_lingzhu: 0,
|
||||
},
|
||||
{
|
||||
id: 1135,
|
||||
title: "梦幻",
|
||||
imgurl:
|
||||
"https://image.zfunbox.cn/topic/20250515/d2c7e48515d393084000595074209042.jpg",
|
||||
price: "41.00",
|
||||
real_pro: "2.50000",
|
||||
goods_type: 1,
|
||||
doubling: 2,
|
||||
is_lingzhu: 0,
|
||||
},
|
||||
{
|
||||
id: 1136,
|
||||
title: "谜拟丘",
|
||||
imgurl:
|
||||
"https://image.zfunbox.cn/topic/20250515/6031827bc455cbf86ff778d74ddffbd3.jpg",
|
||||
price: "38.00",
|
||||
real_pro: "1.50000",
|
||||
goods_type: 1,
|
||||
doubling: 1,
|
||||
is_lingzhu: 0,
|
||||
},
|
||||
{
|
||||
id: 1137,
|
||||
title: "小提琴模型1个",
|
||||
imgurl:
|
||||
"https://image.zfunbox.cn/topic/20250515/22846dea5a933ab314998afc51abb7bb.jpg",
|
||||
price: "13.80",
|
||||
real_pro: "92.90000",
|
||||
goods_type: 1,
|
||||
doubling: 1,
|
||||
is_lingzhu: 0,
|
||||
},
|
||||
];
|
||||
},
|
||||
|
||||
// 老虎机开始回调
|
||||
startCallBack() {
|
||||
console.log("开始抽奖");
|
||||
this.$emit('start');
|
||||
},
|
||||
|
||||
// 抽奖结束回调
|
||||
endCallBack(prize) {
|
||||
// 奖品详情
|
||||
console.log("抽奖结束", prize);
|
||||
|
||||
try {
|
||||
// 准备中奖信息
|
||||
const prizeData = this.prizes[this.currentPrizeIndex]?.data || this.prizes[0]?.data;
|
||||
|
||||
if (!prizeData) {
|
||||
console.error('无法获取奖品数据');
|
||||
return;
|
||||
}
|
||||
|
||||
// 获取所有中奖奖品
|
||||
let allPrizes = [];
|
||||
|
||||
// 检查prize是否是数组，如果是则使用map，否则只使用当前prize
|
||||
if (Array.isArray(prize)) {
|
||||
allPrizes = prize.map(item => {
|
||||
const index = typeof item.index === 'number' ? item.index : 0;
|
||||
return this.prizes[index]?.data || this.prizes[0]?.data;
|
||||
}).filter(item => !!item);
|
||||
} else if (prize && typeof prize.index === 'number') {
|
||||
// 如果prize是单个对象
|
||||
const index = prize.index;
|
||||
const itemData = this.prizes[index]?.data;
|
||||
if (itemData) {
|
||||
allPrizes.push(itemData);
|
||||
}
|
||||
} else {
|
||||
// 都不符合则使用当前索引的奖品
|
||||
allPrizes.push(prizeData);
|
||||
}
|
||||
|
||||
// 发送中奖信息到父组件
|
||||
this.$emit('end', {
|
||||
prize: prize,
|
||||
prizeData: prizeData, // 主要奖品数据
|
||||
allPrizes: allPrizes, // 所有中奖奖品数据
|
||||
message: `恭喜您获得 ${prizeData.title}`,
|
||||
prizeInfo: {
|
||||
name: prizeData.title,
|
||||
image: prizeData.imgurl,
|
||||
description: `价值：${prizeData.price} 元`,
|
||||
data: prizeData,
|
||||
}
|
||||
});
|
||||
|
||||
// 延迟隐藏组件
|
||||
setTimeout(() => {
|
||||
this.hide();
|
||||
}, 2000);
|
||||
} catch (error) {
|
||||
console.error('处理抽奖结果时出错:', error);
|
||||
this.hide();
|
||||
}
|
||||
},
|
||||
|
||||
// 开始抽奖方法
|
||||
startDraw(callback) {
|
||||
// 检查是否已初始化
|
||||
if (!this.isInitialized) {
|
||||
console.error('老虎机尚未初始化，请先调用init方法');
|
||||
return this;
|
||||
}
|
||||
|
||||
// 不再自动初始化，需要先手动调用init
|
||||
this.show();
|
||||
|
||||
setTimeout(() => {
|
||||
// 确保DOM已渲染完成后再调用play方法
|
||||
this.$nextTick(() => {
|
||||
// 检查组件是否已初始化
|
||||
if (this.$refs.myLucky) {
|
||||
// 开始旋转
|
||||
this.$refs.myLucky.play();
|
||||
if (this.bgmCtx && this.bgmCtx.slotBgm) {
|
||||
this.bgmCtx.slotBgm.play();
|
||||
}
|
||||
|
||||
if (typeof callback === 'function') {
|
||||
callback();
|
||||
}
|
||||
} else {
|
||||
console.error('老虎机组件未初始化');
|
||||
}
|
||||
});
|
||||
}, 100);
|
||||
|
||||
return this; // 返回this以支持链式调用
|
||||
},
|
||||
|
||||
// 停止抽奖并指定中奖索引
|
||||
stopDraw(prizeIndices) {
|
||||
// 检查是否已初始化
|
||||
if (!this.isInitialized) {
|
||||
console.error('老虎机尚未初始化，请先调用init方法');
|
||||
return this;
|
||||
}
|
||||
|
||||
if (!this.$refs.myLucky) {
|
||||
console.error('老虎机组件未初始化');
|
||||
return this;
|
||||
}
|
||||
|
||||
// 如果没有传入奖品索引数组或传入的不是数组
|
||||
if (!prizeIndices || !Array.isArray(prizeIndices) || prizeIndices.length === 0) {
|
||||
// 生成5个随机索引
|
||||
const randomIndices = [];
|
||||
for (let i = 0; i < 5; i++) {
|
||||
randomIndices.push(Math.floor(Math.random() * this.prizes.length));
|
||||
}
|
||||
this.currentPrizeIndex = randomIndices[0]; // 使用第一个作为主要中奖索引
|
||||
this.$refs.myLucky.stop(randomIndices);
|
||||
return this;
|
||||
}
|
||||
|
||||
// 如果传入的数组长度不够5个，补足到5个
|
||||
let indices = [...prizeIndices];
|
||||
while (indices.length < 5) {
|
||||
indices.push(indices[indices.length - 1] || 0);
|
||||
}
|
||||
|
||||
// 确保所有索引都在有效范围内
|
||||
indices = indices.map(index => {
|
||||
if (index < 0 || index >= this.prizes.length) {
|
||||
return Math.floor(Math.random() * this.prizes.length);
|
||||
}
|
||||
return index;
|
||||
});
|
||||
|
||||
// 记录第一个索引作为主要中奖索引
|
||||
this.currentPrizeIndex = indices[0];
|
||||
|
||||
// 调用stop方法停止旋转
|
||||
this.$refs.myLucky.stop(indices);
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
// 强制结束抽奖
|
||||
forceEndDraw() {
|
||||
if (!this.isInitialized) {
|
||||
console.error('老虎机尚未初始化，请先调用init方法');
|
||||
return this;
|
||||
}
|
||||
|
||||
this.hide();
|
||||
return this; // 返回this以支持链式调用
|
||||
},
|
||||
|
||||
// 重置组件状态
|
||||
reset() {
|
||||
this.isInitialized = false;
|
||||
this.isVisible = false;
|
||||
this.slots = [];
|
||||
this.prizes = [];
|
||||
this.prizeList = [];
|
||||
this.currentPrizeIndex = -1;
|
||||
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($imgurl + "common/slot_bg.webp");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
}
|
||||
.slot-icon {
|
||||
padding-bottom: 25rpx;
|
||||
}
|
||||
// 老虎机容器样式
|
||||
.slot-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// 老虎机视图样式
|
||||
.slot-view {
|
||||
background: url("https://image.zfunbox.cn/static/image/lucky/di_5.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 100%;
|
||||
padding-top: 80rpx;
|
||||
padding-bottom: 80rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// 抽奖项样式
|
||||
.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);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -264,7 +264,8 @@
|
|||
</view>
|
||||
|
||||
</uni-popup>
|
||||
|
||||
<!-- 使用抽取的老虎机组件 -->
|
||||
<DetailLucky ref="detailLucky" @end="onLuckyEnd" />
|
||||
</page-container>
|
||||
</template>
|
||||
|
||||
|
|
@ -278,7 +279,8 @@ 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";
|
||||
export default {
|
||||
components: {
|
||||
PageContainer,
|
||||
|
|
@ -287,7 +289,8 @@ export default {
|
|||
DetailButton,
|
||||
DetailPreviewPopup,
|
||||
DetailWuxianLingzhu,
|
||||
DetailWuxianRage // 注册新组件
|
||||
DetailWuxianRage, // 注册新组件
|
||||
DetailLucky
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -415,6 +418,14 @@ export default {
|
|||
},
|
||||
|
||||
methods: {
|
||||
// 老虎机结束抽奖回调
|
||||
onLuckyEnd(data) {
|
||||
console.log("抽奖结束", data);
|
||||
|
||||
// 获取所有中奖奖品
|
||||
console.log("所有中奖奖品:", data.allPrizes);
|
||||
this.$refs.detailLucky.hide();
|
||||
},
|
||||
previewDetail(item, a) {
|
||||
|
||||
const obj = {
|
||||
|
|
@ -545,7 +556,7 @@ export default {
|
|||
return
|
||||
}
|
||||
// console.log(' res.data.prize_num', res.data.prize_num);
|
||||
|
||||
|
||||
if (that.buyNum == 0 || that.buyNum == null) {
|
||||
if (res.data.prize_num != null) {
|
||||
that.buyNum = res.data.prize_num;
|
||||
|
|
@ -657,8 +668,9 @@ export default {
|
|||
})
|
||||
|
||||
if (status == 'success') {
|
||||
this.getPrize(res.data.order_num)
|
||||
this.getPrize(res.data.order_num);
|
||||
this.doRefresh()
|
||||
// this.$refs.detailLucky.init([], this.buyNum);
|
||||
}
|
||||
} else {
|
||||
this.$c.toast({
|
||||
|
|
|
|||
|
|
@ -1,312 +1,154 @@
|
|||
<template>
|
||||
<page-container title="抽奖特效" :showBack="true">
|
||||
<view class="content-container">
|
||||
<view>
|
||||
<view class="slot-view">
|
||||
<!-- 老虎机组件 -->
|
||||
<SlotMachine
|
||||
ref="myLucky"
|
||||
:width="windowWidth"
|
||||
height="800rpx"
|
||||
:blocks="blocks"
|
||||
:slots="slots"
|
||||
:prizes="prizes"
|
||||
:defaultConfig="defaultConfig"
|
||||
@start="startCallBack"
|
||||
@end="endCallBack"
|
||||
>
|
||||
</SlotMachine>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 使用抽取的老虎机组件 -->
|
||||
<DetailLucky ref="detailLucky" @start="onLuckyStart" @end="onLuckyEnd" />
|
||||
|
||||
<!-- 开始抽奖按钮 -->
|
||||
<button
|
||||
style="
|
||||
margin-top: 20rpx;
|
||||
position: absolute;
|
||||
bottom: 20rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
"
|
||||
@click="onStartDraw"
|
||||
>
|
||||
开始抽奖
|
||||
</button>
|
||||
<!-- 页面上的开始抽奖按钮 -->
|
||||
<button class="start-draw-btn" @click="startDrawing">开始抽奖</button>
|
||||
</page-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 导入老虎机组件
|
||||
import SlotMachine from "@/components/@lucky-canvas/uni/slot-machine";
|
||||
function shuffle(array) {
|
||||
for (let i = array.length - 1; i > 0; i--) {
|
||||
// 生成一个 0 到 i 之间的随机整数
|
||||
const j = Math.floor(Math.random() * (i + 1));
|
||||
// 交换 array[i] 和 array[j]
|
||||
[array[i], array[j]] = [array[j], array[i]];
|
||||
}
|
||||
return array;
|
||||
}
|
||||
// import SlotMachine from '@lucky-canvas/uni/slot-machine' // 老虎机
|
||||
// 导入抽取的老虎机组件
|
||||
import DetailLucky from "@/components/detail-lucky/detail-lucky.vue";
|
||||
|
||||
export default {
|
||||
components: { SlotMachine },
|
||||
components: { DetailLucky },
|
||||
data() {
|
||||
let windowWidth = uni.getSystemInfoSync().windowWidth;
|
||||
console.log(windowWidth);
|
||||
let t = [
|
||||
{
|
||||
id: 1128,
|
||||
title: "兹琪露娜提亚斯",
|
||||
imgurl:
|
||||
"https://image.zfunbox.cn/topic/20250515/2986e27e673ef675e02771cdebd9b822.jpg",
|
||||
price: "350.00",
|
||||
real_pro: "0.02000",
|
||||
goods_type: 1,
|
||||
doubling: 1,
|
||||
is_lingzhu: 0,
|
||||
},
|
||||
{
|
||||
id: 1129,
|
||||
title: "月岗恋钟",
|
||||
imgurl:
|
||||
"https://image.zfunbox.cn/topic/20250515/2c5ed2097716db6bef01da718bc3c091.jpg",
|
||||
price: "132.00",
|
||||
real_pro: "0.02000",
|
||||
goods_type: 1,
|
||||
doubling: 3,
|
||||
is_lingzhu: 0,
|
||||
},
|
||||
{
|
||||
id: 1130,
|
||||
title: "BANDAI万代拼装模型 1/100 MG 机动战士高达 倒A 逆A-15岁以上",
|
||||
imgurl:
|
||||
"https://image.zfunbox.cn/topic/20250515/e35da49b4976f156f2f98dec002274a5.png",
|
||||
price: "305.00",
|
||||
real_pro: "0.03000",
|
||||
goods_type: 1,
|
||||
doubling: 1,
|
||||
is_lingzhu: 0,
|
||||
},
|
||||
{
|
||||
id: 1131,
|
||||
title: "BANDAI 万代拼装模型 MG 主天使-15岁以上",
|
||||
imgurl:
|
||||
"https://image.zfunbox.cn/topic/20250515/77302c6f1ea9ea6a8516cc1208174aee.png",
|
||||
price: "289.00",
|
||||
real_pro: "0.03000",
|
||||
goods_type: 1,
|
||||
doubling: 1,
|
||||
is_lingzhu: 0,
|
||||
},
|
||||
{
|
||||
id: 1132,
|
||||
title: "BANDAI万代 HG00 09 1/144 座天使高达一型-15岁以上",
|
||||
imgurl:
|
||||
"https://image.zfunbox.cn/topic/20250515/55e816c93b5e4103a30682c586816b11.jpg",
|
||||
price: "114.00",
|
||||
real_pro: "0.50000",
|
||||
goods_type: 1,
|
||||
doubling: 3,
|
||||
is_lingzhu: 0,
|
||||
},
|
||||
{
|
||||
id: 1133,
|
||||
title: "BANDAI万代拼装模型 HGUC 130 机动战士高达 杰斯塔-15岁以上",
|
||||
imgurl:
|
||||
"https://image.zfunbox.cn/topic/20250515/aeb6bfb8b4aa8a29796b242e4f5d56d9.png",
|
||||
price: "113.00",
|
||||
real_pro: "1.50000",
|
||||
goods_type: 1,
|
||||
doubling: 1,
|
||||
is_lingzhu: 0,
|
||||
},
|
||||
{
|
||||
id: 1134,
|
||||
title: "BANDAI万代拼装模型HG26 1/144 凯列班高达 异灵高达-15岁以上",
|
||||
imgurl:
|
||||
"https://image.zfunbox.cn/topic/20250515/329e3a7e21772a63cea03d31f948345d.png",
|
||||
price: "112.00",
|
||||
real_pro: "1.00000",
|
||||
goods_type: 1,
|
||||
doubling: 2,
|
||||
is_lingzhu: 0,
|
||||
},
|
||||
{
|
||||
id: 1135,
|
||||
title: "梦幻",
|
||||
imgurl:
|
||||
"https://image.zfunbox.cn/topic/20250515/d2c7e48515d393084000595074209042.jpg",
|
||||
price: "41.00",
|
||||
real_pro: "2.50000",
|
||||
goods_type: 1,
|
||||
doubling: 2,
|
||||
is_lingzhu: 0,
|
||||
},
|
||||
{
|
||||
id: 1136,
|
||||
title: "谜拟丘",
|
||||
imgurl:
|
||||
"https://image.zfunbox.cn/topic/20250515/6031827bc455cbf86ff778d74ddffbd3.jpg",
|
||||
price: "38.00",
|
||||
real_pro: "1.50000",
|
||||
goods_type: 1,
|
||||
doubling: 1,
|
||||
is_lingzhu: 0,
|
||||
},
|
||||
{
|
||||
id: 1137,
|
||||
title: "小提琴模型1个",
|
||||
imgurl:
|
||||
"https://image.zfunbox.cn/topic/20250515/22846dea5a933ab314998afc51abb7bb.jpg",
|
||||
price: "13.80",
|
||||
real_pro: "92.90000",
|
||||
goods_type: 1,
|
||||
doubling: 1,
|
||||
is_lingzhu: 0,
|
||||
},
|
||||
];
|
||||
let prizes = [];
|
||||
for (let i = 0; i < t.length; i++) {
|
||||
prizes.push({
|
||||
imgs: [
|
||||
{
|
||||
src: t[i].imgurl,
|
||||
width: "152.78rpx",
|
||||
height: "152.78rpx",
|
||||
},
|
||||
],
|
||||
background: "#ffffff",
|
||||
});
|
||||
}
|
||||
const arr = Array.from({ length: t.length }, (_, i) => i);
|
||||
let slots = [
|
||||
{ order:shuffle([...arr]), speed: 20 }, // 第一列速度
|
||||
{ order:shuffle([...arr]), speed: 20 }, // 第二列速度
|
||||
{ order:shuffle([...arr]), speed: 20 }, // 第三列速度
|
||||
{ order:shuffle([...arr]), speed: 20 }, // 第三列速度
|
||||
{ order:shuffle([...arr]), speed: 20 }, // 第三列速度
|
||||
]
|
||||
console.log(slots);
|
||||
|
||||
return {
|
||||
windowWidth: windowWidth + "px",
|
||||
// 外部边框配置
|
||||
blocks: [
|
||||
// { padding: "100px 0px 0px 0px", imgs:[{src:"https://image.zfunbox.cn/di.png",width:"100%",height:"100%"}]},
|
||||
//https://image.zfunbox.cn/di.png
|
||||
// {background:"#238E71"},
|
||||
// { padding: "0px", background: "transparent" }, // 外边框
|
||||
// { padding: "0px", background: "transparent" }, // 内边框
|
||||
// 示例奖品列表
|
||||
prizeList: [
|
||||
{
|
||||
id: 1001,
|
||||
title: "iPhone 15 Pro Max",
|
||||
imgurl:
|
||||
"https://image.zfunbox.cn/topic/20250515/2986e27e673ef675e02771cdebd9b822.jpg",
|
||||
price: "9999.00",
|
||||
real_pro: "0.01000",
|
||||
goods_type: 1,
|
||||
doubling: 1,
|
||||
is_lingzhu: 0,
|
||||
},
|
||||
{
|
||||
id: 1002,
|
||||
title: "AirPods Pro",
|
||||
imgurl:
|
||||
"https://image.zfunbox.cn/topic/20250515/2c5ed2097716db6bef01da718bc3c091.jpg",
|
||||
price: "1999.00",
|
||||
real_pro: "0.05000",
|
||||
goods_type: 1,
|
||||
doubling: 1,
|
||||
is_lingzhu: 0,
|
||||
},
|
||||
// 可以添加更多奖品...
|
||||
],
|
||||
// 老虎机各列的速度配置
|
||||
slots: slots,
|
||||
// 奖品列表配置
|
||||
prizes: prizes,
|
||||
// 老虎机默认配置
|
||||
defaultConfig: {
|
||||
mode: "horizontal", // 水平模式
|
||||
rowSpacing: "10px", // 行间距
|
||||
colSpacing: "10px", // 列间距
|
||||
accelerationTime:1500
|
||||
},
|
||||
// 弹窗相关数据
|
||||
luckyMessage: "恭喜您获得奖品",
|
||||
luckyPrize: null,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 计算抽奖项尺寸
|
||||
lotteryItemSize() {
|
||||
let height = uni.upx2px(220);
|
||||
let width = uni.upx2px(170);
|
||||
return [width, height];
|
||||
},
|
||||
mounted() {
|
||||
// 在组件挂载后初始化老虎机
|
||||
this.initLuckyMachine();
|
||||
},
|
||||
methods: {
|
||||
// 点击抽奖按钮触发回调
|
||||
startCallBack() {
|
||||
console.log("开始抽奖");
|
||||
// 初始化老虎机
|
||||
initLuckyMachine() {
|
||||
try {
|
||||
// 初始化并传入奖品列表（也可以使用默认奖品）
|
||||
this.$refs.detailLucky.init([], 1);
|
||||
console.log("老虎机初始化完成");
|
||||
} catch (error) {
|
||||
console.error("初始化老虎机时出错:", error);
|
||||
}
|
||||
},
|
||||
// 抽奖结束触发回调
|
||||
endCallBack(prize) {
|
||||
// 奖品详情
|
||||
console.log("抽奖结束", prize);
|
||||
},
|
||||
// 开始抽奖方法
|
||||
onStartDraw() {
|
||||
let windowWidth = uni.getSystemInfoSync().windowWidth;
|
||||
console.log(windowWidth);
|
||||
|
||||
// 开始旋转
|
||||
this.$refs.myLucky.play();
|
||||
this.bgmCtx.slotBgm.play()
|
||||
// 使用定时器来模拟请求接口
|
||||
setTimeout(() => {
|
||||
// 生成随机中奖索引
|
||||
const index = Math.floor(Math.random() * this.prizes.length);
|
||||
// 调用stop停止旋转并传递中奖索引
|
||||
this.$refs.myLucky.stop([0, 1, 2,3,4]);
|
||||
}, 2000); // 3秒后停止
|
||||
// 点击按钮开始抽奖
|
||||
startDrawing() {
|
||||
try {
|
||||
// 按照初始化->开始->结束的顺序调用
|
||||
|
||||
// 开始抽奖
|
||||
this.$refs.detailLucky.startDraw(() => {
|
||||
console.log("抽奖开始了");
|
||||
|
||||
// 模拟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);
|
||||
} catch (error) {
|
||||
console.error("停止抽奖时出错:", error);
|
||||
uni.showToast({
|
||||
title: "抽奖异常，请重试",
|
||||
icon: "none",
|
||||
});
|
||||
}
|
||||
}, 2000);
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("开始抽奖时出错:", error);
|
||||
uni.showToast({
|
||||
title: "抽奖异常，请重试",
|
||||
icon: "none",
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 老虎机开始抽奖回调
|
||||
onLuckyStart() {
|
||||
console.log("父组件接收到开始抽奖事件");
|
||||
},
|
||||
|
||||
// 老虎机结束抽奖回调
|
||||
onLuckyEnd(data) {
|
||||
console.log("抽奖结束", data);
|
||||
|
||||
// 获取所有中奖奖品
|
||||
console.log("所有中奖奖品:", data.allPrizes);
|
||||
this.$refs.detailLucky.hide();
|
||||
// 设置弹窗数据
|
||||
this.luckyMessage = data.message;
|
||||
this.luckyPrize = data.prizeInfo;
|
||||
|
||||
// 打开弹窗
|
||||
this.$refs.luckyPopup && this.$refs.luckyPopup.open();
|
||||
},
|
||||
|
||||
// 弹窗确认按钮点击处理
|
||||
onPrizeConfirm(prize) {
|
||||
uni.showToast({
|
||||
title: "奖品已领取",
|
||||
icon: "success",
|
||||
});
|
||||
},
|
||||
|
||||
// 弹窗取消按钮点击处理
|
||||
onPrizeCancel() {
|
||||
uni.showToast({
|
||||
title: "已关闭弹窗",
|
||||
icon: "none",
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
// 内容容器样式
|
||||
.content-container {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
background-image: url($imgurl + "common/slot_bg.webp");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
.slot-title{
|
||||
background: url('https://image.zfunbox.cn/di.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 100vw;
|
||||
height: 100rpx;
|
||||
}
|
||||
// 老虎机视图样式
|
||||
.slot-view {
|
||||
// background: linear-gradient(to right, #0c1b21, #218c78, #0c1b21);
|
||||
background: url('https://image.zfunbox.cn/di.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
// background-size: cover;
|
||||
// background-position: center;
|
||||
width: 100vw;
|
||||
padding-top: 200rpx;
|
||||
padding-bottom: 80rpx;
|
||||
// height: 520rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
// padding: 0rpx;
|
||||
}
|
||||
|
||||
// 中心线样式
|
||||
.view-center-line {
|
||||
position: absolute;
|
||||
width: 1rpx;
|
||||
background-color: red;
|
||||
height: 300rpx;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
// 抽奖项样式
|
||||
.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);
|
||||
// 开始抽奖按钮样式
|
||||
.start-draw-btn {
|
||||
margin: 20rpx;
|
||||
background-color: #ff6b6b;
|
||||
color: #fff;
|
||||
border-radius: 50rpx;
|
||||
padding: 20rpx 40rpx;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user