feat(custom): 大转盘第一版
This commit is contained in:
426
src/pages/turntable/index/index.vue
Normal file
426
src/pages/turntable/index/index.vue
Normal file
@@ -0,0 +1,426 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue'
|
||||
import Taro from '@tarojs/taro'
|
||||
import Lottie from 'lottie-web'
|
||||
import dan from '../static/dan.png'
|
||||
import he from '../static/he.png'
|
||||
import shuang from '../static/shuang.png'
|
||||
import './index.scss'
|
||||
|
||||
Taro.useDidShow(() => {
|
||||
getUserInfo()
|
||||
getBetList()
|
||||
getList()
|
||||
initWs()
|
||||
|
||||
Lottie.loadAnimation({
|
||||
container: document.getElementById('lottie') as Element,
|
||||
renderer: 'svg',
|
||||
loop: true,
|
||||
autoplay: true,
|
||||
animationData: require('../static/wzj.json'),
|
||||
})
|
||||
})
|
||||
|
||||
const ws = ref<null | WebSocket>(null)
|
||||
|
||||
// const lottery_list = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
|
||||
|
||||
const user_info = ref<{
|
||||
nickName: string
|
||||
avatarUrl: string
|
||||
pulse: number
|
||||
integral: number
|
||||
}>({
|
||||
nickName: '游客',
|
||||
avatarUrl: '',
|
||||
pulse: 0,
|
||||
integral: 0,
|
||||
})
|
||||
|
||||
const bet_options = ref([
|
||||
{
|
||||
id: 1,
|
||||
name: 600,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 1000,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: 1200,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: 2000,
|
||||
},
|
||||
])
|
||||
|
||||
const list = ref<
|
||||
{
|
||||
Periods?: number
|
||||
Name?: string
|
||||
}[]
|
||||
>([])
|
||||
|
||||
const bet_index = ref<number | null>(null)
|
||||
|
||||
const timeStr = ref('')
|
||||
|
||||
const initWs = () => {
|
||||
ws.value = new WebSocket(
|
||||
`${process.env.TARO_APP_TURNTABLE_WS}?uid=${Taro.getStorageSync('uid')}&game_id=${
|
||||
Taro.getStorageSync('gameItem').ID
|
||||
}`
|
||||
)
|
||||
ws.value.onopen = () => {
|
||||
Taro.showToast({
|
||||
title: '连接游戏服务器成功',
|
||||
mask: true,
|
||||
icon: 'none',
|
||||
duration: 2000,
|
||||
})
|
||||
}
|
||||
ws.value.onmessage = ({ data }) => {
|
||||
let res = JSON.parse(data)
|
||||
switch (res.code) {
|
||||
case 200:
|
||||
timeStr.value = res.data
|
||||
break
|
||||
case 5:
|
||||
Taro.showToast({
|
||||
title: res.msg,
|
||||
mask: true,
|
||||
icon: 'none',
|
||||
duration: 1000,
|
||||
})
|
||||
break
|
||||
case 301:
|
||||
Taro.showToast({
|
||||
title: res.msg,
|
||||
mask: true,
|
||||
icon: 'none',
|
||||
duration: 1000,
|
||||
})
|
||||
break
|
||||
default:
|
||||
startRun(res[0].name)
|
||||
if (res.msg) {
|
||||
Taro.showToast({
|
||||
title: res.msg,
|
||||
mask: true,
|
||||
icon: 'none',
|
||||
duration: 1000,
|
||||
})
|
||||
}
|
||||
break
|
||||
}
|
||||
}
|
||||
ws.value.onclose = () => {
|
||||
console.log('连接关闭')
|
||||
}
|
||||
|
||||
ws.value.onerror = () => {
|
||||
setTimeout(() => {
|
||||
Taro.showToast({
|
||||
title: '连接游戏服务器失败，正在重试',
|
||||
mask: true,
|
||||
icon: 'none',
|
||||
duration: 1000,
|
||||
})
|
||||
initWs()
|
||||
}, 3000)
|
||||
}
|
||||
}
|
||||
|
||||
const getUserInfo = async () => {
|
||||
Taro.request({
|
||||
url: `${process.env.TARO_APP_TURNTABLE_API}/userTurntableInfo?uid=${Taro.getStorageSync(
|
||||
'uid'
|
||||
)}`,
|
||||
method: 'GET',
|
||||
success: ({ data: res }) => {
|
||||
user_info.value = res.data.data || {}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
const getList = async () => {
|
||||
Taro.request({
|
||||
url: `${process.env.TARO_APP_TURNTABLE_API}/draw`,
|
||||
method: 'GET',
|
||||
success: ({ data: res }) => {
|
||||
list.value = res.data.data || []
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
const handelBetClick = (index: number) => {
|
||||
bet_index.value = index
|
||||
}
|
||||
|
||||
// 转盘相关
|
||||
const light = ref({
|
||||
container: null,
|
||||
num: 8,
|
||||
itemNum: 6,
|
||||
})
|
||||
|
||||
const turntable_light = ref()
|
||||
const turntable = ref()
|
||||
const isRunning = ref(false)
|
||||
|
||||
const turntable_list = ref([
|
||||
{
|
||||
id: 3,
|
||||
url: he,
|
||||
name: '和',
|
||||
isActive: false,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
url: null,
|
||||
isActive: false,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '双',
|
||||
url: shuang,
|
||||
isActive: false,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
url: null,
|
||||
isActive: false,
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
url: dan,
|
||||
name: '单',
|
||||
isActive: false,
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
url: null,
|
||||
isActive: false,
|
||||
},
|
||||
])
|
||||
|
||||
const bet_list = ref([])
|
||||
|
||||
const getBetList = () => {
|
||||
Taro.request({
|
||||
url: `${process.env.TARO_APP_TURNTABLE_API}/turntable`,
|
||||
method: 'GET',
|
||||
success: ({ data: res }) => {
|
||||
bet_list.value = res.data.data || []
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
const handelDzClick = (index: number) => {
|
||||
turntable_list.value.forEach((item) => {
|
||||
item.isActive = false
|
||||
})
|
||||
turntable_list.value[index].isActive = true
|
||||
}
|
||||
|
||||
const init = () => {
|
||||
// 初始化轮盘灯
|
||||
let lightFragment = document.createDocumentFragment()
|
||||
for (let i = 0; i < light.value.num; i++) {
|
||||
let lightItem = document.createElement('view')
|
||||
let deg = (360 / light.value.num) * i
|
||||
lightItem.className = 'lightItem'
|
||||
lightItem.style.transform = `rotate(${deg}deg)`
|
||||
lightFragment.appendChild(lightItem)
|
||||
}
|
||||
turntable_light.value.appendChild(lightFragment)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
turntable_light.value = document.querySelector('#turntable_light')
|
||||
turntable.value = document.querySelector('#turntable')
|
||||
init()
|
||||
})
|
||||
|
||||
const startRun = (name: string, isShow = false) => {
|
||||
isRunning.value = true
|
||||
|
||||
turntable_list.value.forEach((item) => {
|
||||
item.isActive = false
|
||||
})
|
||||
|
||||
let kj_num = 0
|
||||
|
||||
switch (name) {
|
||||
case '单':
|
||||
kj_num = 6
|
||||
break
|
||||
case '双':
|
||||
kj_num = 2
|
||||
break
|
||||
case '和':
|
||||
kj_num = 4
|
||||
break
|
||||
}
|
||||
|
||||
let rotateItemDeg = (kj_num - 1) * (360 / turntable_list.value.length)
|
||||
|
||||
let rotate = rotateItemDeg + 5 * 360
|
||||
|
||||
const rotateSpeed = Number((rotateItemDeg / 360 + 5).toFixed(2))
|
||||
|
||||
turntable.value.removeAttribute('style')
|
||||
setTimeout(() => {
|
||||
turntable.value.style.transform = `translate(-50%, -50%) rotate(${rotate}deg)`
|
||||
turntable.value.style.transition = `transform ${rotateSpeed}s ease-out`
|
||||
}, 10)
|
||||
|
||||
setTimeout(() => {
|
||||
isRunning.value = false
|
||||
if (isShow) {
|
||||
console.log(`中奖结果: ${name}`)
|
||||
}
|
||||
setTimeout(() => {
|
||||
getList()
|
||||
getUserInfo()
|
||||
}, 2000)
|
||||
}, rotateSpeed * 1000)
|
||||
}
|
||||
|
||||
const betFn = () => {
|
||||
if (bet_index.value === null)
|
||||
return Taro.showToast({
|
||||
title: '请选择豆子',
|
||||
icon: 'none',
|
||||
})
|
||||
const arr = turntable_list.value.filter((item) => item.isActive === true && item.url !== null)
|
||||
|
||||
const betArr = bet_list.value.filter((item) => item['name'] === arr[0].name)
|
||||
|
||||
console.log(betArr)
|
||||
|
||||
if (betArr.length === 0)
|
||||
return Taro.showToast({
|
||||
title: '请选择投注项',
|
||||
icon: 'none',
|
||||
})
|
||||
ws.value?.send(
|
||||
JSON.stringify({
|
||||
type: 1,
|
||||
data: [
|
||||
{
|
||||
number: bet_options.value[bet_index.value].name,
|
||||
bid: betArr[0]['ID'],
|
||||
name: betArr[0]['name'],
|
||||
},
|
||||
],
|
||||
})
|
||||
)
|
||||
setTimeout(() => {
|
||||
getUserInfo()
|
||||
}, 500)
|
||||
}
|
||||
|
||||
// 前往开奖和投注记录
|
||||
const toPage = (type: number) => {
|
||||
Taro.navigateTo({
|
||||
url: `/pages/turntable/records/index?type=${type}`,
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="page">
|
||||
<view class="header">
|
||||
<view class="left-box">
|
||||
<text class="text">公告: 祝您好运连连</text>
|
||||
</view>
|
||||
<view class="right-box">
|
||||
<view class="btn tz-btn" @click="toPage(2)"></view>
|
||||
<view class="btn kj-btn" @click="toPage(1)"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="user-box">
|
||||
<view class="avatar-box">
|
||||
<view class="bg"></view>
|
||||
<image
|
||||
class="avatar"
|
||||
:src="user_info.avatarUrl || '../static/default_avatar.png'"
|
||||
/>
|
||||
</view>
|
||||
<view class="user-info">
|
||||
<view class="name">{{ user_info.nickName }}</view>
|
||||
<view class="jf">积分: {{ user_info.integral || 0 }}</view>
|
||||
</view>
|
||||
<view class="dz-box">
|
||||
<view class="dz-bg"></view>
|
||||
<view class="text">{{ user_info.pulse || 0 }}</view>
|
||||
</view>
|
||||
<view class="rule-btn"></view>
|
||||
</view>
|
||||
<view class="kj-box">
|
||||
<text class="title">第{{ list[0]?.Periods || 0 }}期已开奖</text>
|
||||
<!-- <view class="num-box">
|
||||
<view class="item" v-for="(item, index) in lottery_list" :key="index">
|
||||
{{ item }}
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="num-box" style="justify-content: center">
|
||||
<view class="item">
|
||||
{{ list[0]?.Name }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
style="display: flex; justify-content: flex-end; flex-direction: column; margin-top: 6%"
|
||||
>
|
||||
<view class="turntable-box">
|
||||
<view class="star star-1"></view>
|
||||
<view class="star star-2"></view>
|
||||
<view class="star star-3"></view>
|
||||
<view class="star star-4"></view>
|
||||
|
||||
<view class="turntable-wrap" id="turntable-wrap">
|
||||
<view class="light" id="turntable_light"></view>
|
||||
<view class="turntable" id="turntable">
|
||||
<view class="prize" v-if="turntable_list && turntable_list.length">
|
||||
<view
|
||||
class="item"
|
||||
v-for="(item, index) in turntable_list"
|
||||
:key="index"
|
||||
@click="handelDzClick(index)"
|
||||
>
|
||||
<image class="img" :src="item.url" />
|
||||
<view v-if="item.url" :class="item.isActive ? 'icon' : ''"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bet-btn" @click="betFn"></view>
|
||||
<view class="pointer"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="countdown-box">
|
||||
<text class="title" v-if="!isRunning">
|
||||
第{{ (list[0]?.Periods as number) + 1 || 1 }}期开奖还剩:{{ timeStr || '00' }}秒
|
||||
</text>
|
||||
<text v-else class="title">正在开奖中...</text>
|
||||
</view>
|
||||
<view class="footer-box">
|
||||
<view
|
||||
class="item"
|
||||
v-for="(item, index) in bet_options"
|
||||
:key="index"
|
||||
:class="bet_index === index ? 'item-active' : 'item-no-active'"
|
||||
@click="handelBetClick(index)"
|
||||
>
|
||||
<view class="icon"></view>
|
||||
<view class="name">{{ item.name }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view id="lottie"></view> -->
|
||||
</view>
|
||||
</template>
|
||||
Reference in New Issue
Block a user