feat(custom): 增加背景音乐
This commit is contained in:
@@ -15,38 +15,54 @@ import zj from '../../../static/zj.json'
|
||||
import './index.scss'
|
||||
|
||||
Taro.useDidShow(() => {
|
||||
getUserInfo()
|
||||
getBetList()
|
||||
getList()
|
||||
startMusic('https://files.wanzhuanyongcheng.com/file/music/yaotouzi/3.mp3', true)
|
||||
getUserInfo()
|
||||
getBetList()
|
||||
getList()
|
||||
})
|
||||
|
||||
const innerAudioContext = Taro.createInnerAudioContext()
|
||||
|
||||
const startMusic = (path: string, loop: boolean = false) => {
|
||||
// const innerAudioContext = Taro.createInnerAudioContext()
|
||||
innerAudioContext.autoplay = true
|
||||
innerAudioContext.src = path
|
||||
innerAudioContext.loop = loop
|
||||
innerAudioContext.onPlay(() => {
|
||||
console.log('开始播放')
|
||||
})
|
||||
innerAudioContext.onError(() => {
|
||||
console.log('播放失败')
|
||||
})
|
||||
}
|
||||
|
||||
const user_info = ref<{
|
||||
nickName: string
|
||||
avatarUrl: string
|
||||
pulse: number
|
||||
integral: number
|
||||
nickName: string
|
||||
avatarUrl: string
|
||||
pulse: number
|
||||
integral: number
|
||||
}>({
|
||||
nickName: '游客',
|
||||
avatarUrl: '',
|
||||
pulse: 0,
|
||||
integral: 0,
|
||||
nickName: '游客',
|
||||
avatarUrl: '',
|
||||
pulse: 0,
|
||||
integral: 0,
|
||||
})
|
||||
|
||||
const bet_options = ref<
|
||||
{
|
||||
ID: number
|
||||
max: number
|
||||
}[]
|
||||
{
|
||||
ID: number
|
||||
max: number
|
||||
}[]
|
||||
>([])
|
||||
|
||||
const newKjNum = ref(1)
|
||||
|
||||
const list = ref<
|
||||
{
|
||||
name: string
|
||||
preDrawIssue: number
|
||||
preDrawCode: string
|
||||
}[]
|
||||
{
|
||||
name: string
|
||||
preDrawIssue: number
|
||||
preDrawCode: string
|
||||
}[]
|
||||
>([])
|
||||
|
||||
const kjData = ref<any>({})
|
||||
@@ -56,37 +72,35 @@ const bet_index = ref<number | null>(null)
|
||||
const timeStr = ref('')
|
||||
|
||||
const getUserInfo = async () => {
|
||||
Taro.request({
|
||||
url: `${process.env.TARO_APP_AOSHI_API}/australia/user/info?uid=${Taro.getStorageSync(
|
||||
'uid'
|
||||
)}`,
|
||||
method: 'GET',
|
||||
success: ({ data: res }) => {
|
||||
user_info.value = res.data.data || {}
|
||||
},
|
||||
})
|
||||
Taro.request({
|
||||
url: `${process.env.TARO_APP_AOSHI_API}/australia/user/info?uid=${Taro.getStorageSync('uid')}`,
|
||||
method: 'GET',
|
||||
success: ({ data: res }) => {
|
||||
user_info.value = res.data.data || {}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
const getList = () => {
|
||||
Taro.request({
|
||||
url: `${process.env.TARO_APP_AOSHI_API}/australia/history/list`,
|
||||
method: 'GET',
|
||||
success: ({ data: res }) => {
|
||||
list.value = res.data.data.data || []
|
||||
newKjNum.value = (list.value[0]?.preDrawIssue as number) + 1
|
||||
},
|
||||
})
|
||||
Taro.request({
|
||||
url: `${process.env.TARO_APP_AOSHI_API}/australia/history/list`,
|
||||
method: 'GET',
|
||||
success: ({ data: res }) => {
|
||||
list.value = res.data.data.data || []
|
||||
newKjNum.value = (list.value[0]?.preDrawIssue as number) + 1
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
const handelBetClick = (index: number) => {
|
||||
bet_index.value = index
|
||||
bet_index.value = index
|
||||
}
|
||||
|
||||
// 转盘相关
|
||||
const light = ref({
|
||||
container: null,
|
||||
num: 8,
|
||||
itemNum: 3,
|
||||
container: null,
|
||||
num: 8,
|
||||
itemNum: 3,
|
||||
})
|
||||
|
||||
const turntable_light = ref()
|
||||
@@ -94,73 +108,73 @@ const turntable = ref()
|
||||
const isRunning = ref(false)
|
||||
|
||||
const turntable_list = ref([
|
||||
{
|
||||
id: 3,
|
||||
url: he,
|
||||
name: '和',
|
||||
isActive: false,
|
||||
activeUrl: kh,
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
url: dan,
|
||||
name: '单',
|
||||
isActive: false,
|
||||
activeUrl: kd,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '双',
|
||||
url: shuang,
|
||||
isActive: false,
|
||||
activeUrl: ks,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
url: he,
|
||||
name: '和',
|
||||
isActive: false,
|
||||
activeUrl: kh,
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
url: dan,
|
||||
name: '单',
|
||||
isActive: false,
|
||||
activeUrl: kd,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '双',
|
||||
url: shuang,
|
||||
isActive: false,
|
||||
activeUrl: ks,
|
||||
},
|
||||
])
|
||||
|
||||
const getBetList = () => {
|
||||
Taro.request({
|
||||
url: `${process.env.TARO_APP_AOSHI_API}/australia/list`,
|
||||
method: 'GET',
|
||||
success: ({ data: res }) => {
|
||||
bet_options.value = res.data.data || []
|
||||
kjData.value = res.data
|
||||
Taro.request({
|
||||
url: `${process.env.TARO_APP_AOSHI_API}/australia/list`,
|
||||
method: 'GET',
|
||||
success: ({ data: res }) => {
|
||||
bet_options.value = res.data.data || []
|
||||
kjData.value = res.data
|
||||
|
||||
timeId.value = setInterval(() => {
|
||||
countdownFn()
|
||||
}, 1000)
|
||||
},
|
||||
})
|
||||
timeId.value = setInterval(() => {
|
||||
countdownFn()
|
||||
}, 1000)
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
const bgUrl = ref(wu)
|
||||
|
||||
const handelDzClick = (item) => {
|
||||
turntable_list.value.forEach((itm) => {
|
||||
itm.isActive = false
|
||||
})
|
||||
item.isActive = true
|
||||
bgUrl.value = item.activeUrl
|
||||
turntable_list.value.forEach((itm) => {
|
||||
itm.isActive = false
|
||||
})
|
||||
item.isActive = true
|
||||
bgUrl.value = item.activeUrl
|
||||
}
|
||||
|
||||
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)
|
||||
// 初始化轮盘灯
|
||||
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()
|
||||
turntable_light.value = document.querySelector('#turntable_light')
|
||||
turntable.value = document.querySelector('#turntable')
|
||||
init()
|
||||
|
||||
// startRun('单')
|
||||
// startRun('单')
|
||||
})
|
||||
|
||||
const timeId = ref<NodeJS.Timeout>()
|
||||
@@ -168,288 +182,281 @@ const timeId = ref<NodeJS.Timeout>()
|
||||
const time_i = ref<NodeJS.Timeout>()
|
||||
|
||||
const countdownFn = () => {
|
||||
const currentTimestamp = dayjs().valueOf()
|
||||
const timeLeft = dayjs(kjData.value.drawTime).unix() * 1000 - currentTimestamp
|
||||
timeStr.value = dayjs(timeLeft).format('mm分ss秒')
|
||||
const currentTimestamp = dayjs().valueOf()
|
||||
const timeLeft = dayjs(kjData.value.drawTime).unix() * 1000 - currentTimestamp
|
||||
timeStr.value = dayjs(timeLeft).format('mm分ss秒')
|
||||
|
||||
const m = Number(dayjs(timeLeft).format('mm'))
|
||||
const s = Number(dayjs(timeLeft).format('ss'))
|
||||
const m = Number(dayjs(timeLeft).format('mm'))
|
||||
const s = Number(dayjs(timeLeft).format('ss'))
|
||||
|
||||
if (m === 0 && s === 0) {
|
||||
clearInterval(timeId.value)
|
||||
clearInterval(time_i.value)
|
||||
startRun(list.value[0].name)
|
||||
}
|
||||
if (m === 0 && s === 0) {
|
||||
clearInterval(timeId.value)
|
||||
clearInterval(time_i.value)
|
||||
startRun(list.value[0].name)
|
||||
}
|
||||
}
|
||||
|
||||
const startRun = (name: string) => {
|
||||
if (!name)
|
||||
return Taro.showToast({
|
||||
title: '未知开奖结果',
|
||||
mask: true,
|
||||
icon: 'none',
|
||||
duration: 1000,
|
||||
})
|
||||
isRunning.value = true
|
||||
|
||||
turntable_list.value.forEach((item) => {
|
||||
item.isActive = false
|
||||
if (!name)
|
||||
return Taro.showToast({
|
||||
title: '未知开奖结果',
|
||||
mask: true,
|
||||
icon: 'none',
|
||||
duration: 1000,
|
||||
})
|
||||
isRunning.value = true
|
||||
|
||||
bet_index.value = null
|
||||
innerAudioContext.stop()
|
||||
|
||||
let kj_num = 0
|
||||
startMusic('https://files.wanzhuanyongcheng.com/file/music/yaotouzi/1.mp3', false)
|
||||
|
||||
switch (name) {
|
||||
case '单':
|
||||
kj_num = 1
|
||||
break
|
||||
case '双':
|
||||
kj_num = 2
|
||||
break
|
||||
case '和':
|
||||
kj_num = 3
|
||||
break
|
||||
}
|
||||
turntable_list.value.forEach((item) => {
|
||||
item.isActive = false
|
||||
})
|
||||
|
||||
let rotateItemDeg = (kj_num - 1) * (360 / turntable_list.value.length)
|
||||
bet_index.value = null
|
||||
|
||||
let rotate = rotateItemDeg + 5 * 360 - 70
|
||||
let kj_num = 0
|
||||
|
||||
const rotateSpeed = Number((rotateItemDeg / 360 + 5).toFixed(2))
|
||||
switch (name) {
|
||||
case '单':
|
||||
kj_num = 1
|
||||
break
|
||||
case '双':
|
||||
kj_num = 2
|
||||
break
|
||||
case '和':
|
||||
kj_num = 3
|
||||
break
|
||||
}
|
||||
|
||||
turntable.value.removeAttribute('style')
|
||||
let rotateItemDeg = (kj_num - 1) * (360 / turntable_list.value.length)
|
||||
|
||||
let rotate = rotateItemDeg + 5 * 360 - 70
|
||||
|
||||
const rotateSpeed = Number((rotateItemDeg / 360 + 5).toFixed(2))
|
||||
|
||||
turntable.value.removeAttribute('style')
|
||||
setTimeout(() => {
|
||||
turntable.value.style.background = `url(${bgUrl.value}) no-repeat`
|
||||
turntable.value.style.backgroundSize = 'contain'
|
||||
turntable.value.style.transform = `translate(-50%, -50%) rotate(${rotate}deg)`
|
||||
turntable.value.style.transition = `transform ${rotateSpeed}s ease-out`
|
||||
}, 10)
|
||||
|
||||
setTimeout(() => {
|
||||
isRunning.value = false
|
||||
getBetJl()
|
||||
setTimeout(() => {
|
||||
turntable.value.style.background = `url(${bgUrl.value}) no-repeat`
|
||||
turntable.value.style.backgroundSize = 'contain'
|
||||
turntable.value.style.transform = `translate(-50%, -50%) rotate(${rotate}deg)`
|
||||
turntable.value.style.transition = `transform ${rotateSpeed}s ease-out`
|
||||
}, 10)
|
||||
|
||||
setTimeout(() => {
|
||||
isRunning.value = false
|
||||
getBetJl()
|
||||
setTimeout(() => {
|
||||
bgUrl.value = wu
|
||||
getUserInfo()
|
||||
}, 2000)
|
||||
}, rotateSpeed * 1000)
|
||||
bgUrl.value = wu
|
||||
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)
|
||||
|
||||
const betObj = bet_options.value[bet_index.value]
|
||||
|
||||
if (arr.length === 0)
|
||||
return Taro.showToast({
|
||||
title: '请选择投注项',
|
||||
icon: 'none',
|
||||
})
|
||||
Taro.request({
|
||||
url: `${process.env.TARO_APP_AOSHI_API}/australia/user/dice`,
|
||||
method: 'POST',
|
||||
data: {
|
||||
name: arr[0].name,
|
||||
uid: Taro.getStorageSync('uid'),
|
||||
aid: String(betObj.ID),
|
||||
game_id: String(Taro.getStorageSync('gameItem').ID),
|
||||
},
|
||||
success: ({ data: res }) => {
|
||||
Taro.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none',
|
||||
})
|
||||
},
|
||||
if (bet_index.value === null)
|
||||
return Taro.showToast({
|
||||
title: '请选择豆子',
|
||||
icon: 'none',
|
||||
})
|
||||
setTimeout(() => {
|
||||
getUserInfo()
|
||||
}, 500)
|
||||
const arr = turntable_list.value.filter((item) => item.isActive === true)
|
||||
|
||||
const betObj = bet_options.value[bet_index.value]
|
||||
|
||||
if (arr.length === 0)
|
||||
return Taro.showToast({
|
||||
title: '请选择投注项',
|
||||
icon: 'none',
|
||||
})
|
||||
Taro.request({
|
||||
url: `${process.env.TARO_APP_AOSHI_API}/australia/user/dice`,
|
||||
method: 'POST',
|
||||
data: {
|
||||
name: arr[0].name,
|
||||
uid: Taro.getStorageSync('uid'),
|
||||
aid: String(betObj.ID),
|
||||
game_id: String(Taro.getStorageSync('gameItem').ID),
|
||||
},
|
||||
success: ({ data: res }) => {
|
||||
Taro.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none',
|
||||
})
|
||||
},
|
||||
})
|
||||
setTimeout(() => {
|
||||
getUserInfo()
|
||||
}, 500)
|
||||
}
|
||||
|
||||
// 前往开奖和投注记录
|
||||
const toPage = (type: number) => {
|
||||
Taro.navigateTo({
|
||||
url: `/pages/aoshi/records/index?type=${type}`,
|
||||
})
|
||||
Taro.navigateTo({
|
||||
url: `/pages/aoshi/records/index?type=${type}`,
|
||||
})
|
||||
}
|
||||
|
||||
// 动画相关
|
||||
const isLottie = ref(false) // 是否显示动画
|
||||
|
||||
const lottieFn = (type: number, num: number = 0) => {
|
||||
isLottie.value = true
|
||||
isLottie.value = true
|
||||
|
||||
const lottieEle = document.getElementById('lottie') as HTMLDivElement
|
||||
const lottieEle = document.getElementById('lottie') as HTMLDivElement
|
||||
|
||||
const ctx = Lottie.loadAnimation({
|
||||
container: lottieEle,
|
||||
renderer: 'svg',
|
||||
loop: false,
|
||||
autoplay: true,
|
||||
animationData: type === 1 ? zj : wzj,
|
||||
})
|
||||
const ctx = Lottie.loadAnimation({
|
||||
container: lottieEle,
|
||||
renderer: 'svg',
|
||||
loop: false,
|
||||
autoplay: true,
|
||||
animationData: type === 1 ? zj : wzj,
|
||||
})
|
||||
|
||||
if (type === 1) {
|
||||
const text = document.createElement('view')
|
||||
text.className = 'lottie-text'
|
||||
// text.innerHTML = `单`
|
||||
const view = document.createElement('view')
|
||||
view.className = 'lottie-bg'
|
||||
view.innerHTML = `<view class="lottie-num">${num}积分</view>`
|
||||
const els = [view, text]
|
||||
if (type === 1) {
|
||||
const text = document.createElement('view')
|
||||
text.className = 'lottie-text'
|
||||
// text.innerHTML = `单`
|
||||
const view = document.createElement('view')
|
||||
view.className = 'lottie-bg'
|
||||
view.innerHTML = `<view class="lottie-num">${num}积分</view>`
|
||||
const els = [view, text]
|
||||
|
||||
for (const i in els) {
|
||||
lottieEle.appendChild(els[i])
|
||||
}
|
||||
for (const i in els) {
|
||||
lottieEle.appendChild(els[i])
|
||||
}
|
||||
}
|
||||
|
||||
ctx.addEventListener('complete', () => {
|
||||
isLottie.value = false
|
||||
ctx.destroy()
|
||||
})
|
||||
ctx.addEventListener('complete', () => {
|
||||
isLottie.value = false
|
||||
ctx.destroy()
|
||||
})
|
||||
}
|
||||
|
||||
const getBetJl = () => {
|
||||
Taro.request({
|
||||
url: `${process.env.TARO_APP_AOSHI_API}/australia/user/record?uid=${Taro.getStorageSync(
|
||||
'uid'
|
||||
)}`,
|
||||
method: 'GET',
|
||||
success: ({ data: res }) => {
|
||||
const data = res.data.data[0]
|
||||
const t = dayjs().format('YYYY-MM-DD')
|
||||
Taro.request({
|
||||
url: `${process.env.TARO_APP_AOSHI_API}/australia/user/record?uid=${Taro.getStorageSync(
|
||||
'uid'
|
||||
)}`,
|
||||
method: 'GET',
|
||||
success: ({ data: res }) => {
|
||||
const data = res.data.data[0]
|
||||
const t = dayjs().format('YYYY-MM-DD')
|
||||
|
||||
// 是否为今天
|
||||
if (data.DrawTime === t) {
|
||||
console.log('1')
|
||||
// 是否下注
|
||||
if (newKjNum.value - data.Periods === 0) {
|
||||
console.log('2')
|
||||
// 是否中奖
|
||||
if (data.DrawNum > 0) {
|
||||
lottieFn(1, data.DrawNum)
|
||||
console.log('3')
|
||||
} else {
|
||||
lottieFn(2)
|
||||
console.log('4')
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
})
|
||||
getBetList()
|
||||
getList()
|
||||
// 是否为今天
|
||||
if (data.DrawTime === t) {
|
||||
console.log('1')
|
||||
// 是否下注
|
||||
if (newKjNum.value - data.Periods === 0) {
|
||||
console.log('2')
|
||||
// 是否中奖
|
||||
if (data.DrawNum > 0) {
|
||||
lottieFn(1, data.DrawNum)
|
||||
console.log('3')
|
||||
} else {
|
||||
lottieFn(2)
|
||||
console.log('4')
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
})
|
||||
getBetList()
|
||||
getList()
|
||||
}
|
||||
</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 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]?.preDrawIssue || 0 }}期已开奖</text>
|
||||
<view class="num-box">
|
||||
<view class="item" v-for="(item, index) in list[0]?.preDrawCode?.split(',')" :key="index">
|
||||
{{ Number(item) }}
|
||||
</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]?.preDrawIssue || 0 }}期已开奖</text>
|
||||
<view class="num-box">
|
||||
<view
|
||||
class="item"
|
||||
v-for="(item, index) in list[0]?.preDrawCode?.split(',')"
|
||||
:key="index"
|
||||
>
|
||||
{{ Number(item) }}
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="num-box" style="justify-content: center">
|
||||
</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
|
||||
:style="{
|
||||
background: `url(${bgUrl}) no-repeat`,
|
||||
backgroundSize: 'contain',
|
||||
}"
|
||||
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(item)"
|
||||
>
|
||||
<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">
|
||||
第{{ newKjNum }}期开奖还剩:{{ 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.max }}</view>
|
||||
</view>
|
||||
<view class="item"></view>
|
||||
<view class="item"></view>
|
||||
</view>
|
||||
<view id="lottie" v-show="isLottie"></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
|
||||
:style="{
|
||||
background: `url(${bgUrl}) no-repeat`,
|
||||
backgroundSize: 'contain',
|
||||
}"
|
||||
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(item)"
|
||||
>
|
||||
<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">第{{ newKjNum }}期开奖还剩:{{ 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.max }}</view>
|
||||
</view>
|
||||
<view class="item"></view>
|
||||
<view class="item"></view>
|
||||
</view>
|
||||
<view id="lottie" v-show="isLottie"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -15,53 +15,53 @@ import zj from '../../../static/zj.json'
|
||||
import './index.scss'
|
||||
|
||||
Taro.useDidShow(() => {
|
||||
// startMusic('https://files.wanzhuanyongcheng.com/file/music/yaotouzi/3.mp3', true)
|
||||
getUserInfo()
|
||||
getBetList()
|
||||
getList()
|
||||
initWs()
|
||||
startMusic('https://files.wanzhuanyongcheng.com/file/music/yaotouzi/3.mp3', true)
|
||||
getUserInfo()
|
||||
getBetList()
|
||||
getList()
|
||||
initWs()
|
||||
})
|
||||
|
||||
const ws = ref<null | WebSocket>(null)
|
||||
|
||||
const user_info = ref<{
|
||||
nickName: string
|
||||
avatarUrl: string
|
||||
pulse: number
|
||||
integral: number
|
||||
nickName: string
|
||||
avatarUrl: string
|
||||
pulse: number
|
||||
integral: number
|
||||
}>({
|
||||
nickName: '游客',
|
||||
avatarUrl: '',
|
||||
pulse: 0,
|
||||
integral: 0,
|
||||
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,
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: 600,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 1000,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: 1200,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: 2000,
|
||||
},
|
||||
])
|
||||
|
||||
const newKjNum = ref(1)
|
||||
|
||||
const list = ref<
|
||||
{
|
||||
Periods?: number
|
||||
Name?: string
|
||||
}[]
|
||||
{
|
||||
Periods?: number
|
||||
Name?: string
|
||||
}[]
|
||||
>([])
|
||||
|
||||
const bet_index = ref<number | null>(null)
|
||||
@@ -71,116 +71,116 @@ const timeStr = ref('')
|
||||
const innerAudioContext = Taro.createInnerAudioContext()
|
||||
|
||||
const startMusic = (path: string, loop: boolean = false) => {
|
||||
// const innerAudioContext = Taro.createInnerAudioContext()
|
||||
innerAudioContext.autoplay = true
|
||||
innerAudioContext.src = path
|
||||
innerAudioContext.loop = loop
|
||||
innerAudioContext.onPlay(() => {
|
||||
console.log('开始播放')
|
||||
})
|
||||
innerAudioContext.onError(() => {
|
||||
console.log('播放失败')
|
||||
})
|
||||
// const innerAudioContext = Taro.createInnerAudioContext()
|
||||
innerAudioContext.autoplay = true
|
||||
innerAudioContext.src = path
|
||||
innerAudioContext.loop = loop
|
||||
innerAudioContext.onPlay(() => {
|
||||
console.log('开始播放')
|
||||
})
|
||||
innerAudioContext.onError(() => {
|
||||
console.log('播放失败')
|
||||
})
|
||||
}
|
||||
|
||||
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 = () => {
|
||||
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: '连接游戏服务器成功',
|
||||
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: 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
|
||||
duration: 1000,
|
||||
})
|
||||
}
|
||||
break
|
||||
}
|
||||
ws.value.onclose = () => {
|
||||
console.log('连接关闭')
|
||||
}
|
||||
}
|
||||
ws.value.onclose = () => {
|
||||
console.log('连接关闭')
|
||||
}
|
||||
|
||||
ws.value.onerror = () => {
|
||||
setTimeout(() => {
|
||||
Taro.showToast({
|
||||
title: '连接游戏服务器失败，正在重试',
|
||||
mask: true,
|
||||
icon: 'none',
|
||||
duration: 1000,
|
||||
})
|
||||
initWs()
|
||||
}, 5000)
|
||||
}
|
||||
ws.value.onerror = () => {
|
||||
setTimeout(() => {
|
||||
Taro.showToast({
|
||||
title: '连接游戏服务器失败，正在重试',
|
||||
mask: true,
|
||||
icon: 'none',
|
||||
duration: 1000,
|
||||
})
|
||||
initWs()
|
||||
}, 5000)
|
||||
}
|
||||
}
|
||||
|
||||
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 || {}
|
||||
},
|
||||
})
|
||||
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 = () => {
|
||||
Taro.request({
|
||||
url: `${process.env.TARO_APP_TURNTABLE_API}/draw`,
|
||||
method: 'GET',
|
||||
success: ({ data: res }) => {
|
||||
list.value = res.data.data || []
|
||||
newKjNum.value = (list.value[0].Periods as number) + 1
|
||||
},
|
||||
})
|
||||
Taro.request({
|
||||
url: `${process.env.TARO_APP_TURNTABLE_API}/draw`,
|
||||
method: 'GET',
|
||||
success: ({ data: res }) => {
|
||||
list.value = res.data.data || []
|
||||
newKjNum.value = (list.value[0].Periods as number) + 1
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
const handelBetClick = (index: number) => {
|
||||
bet_index.value = index
|
||||
bet_index.value = index
|
||||
}
|
||||
|
||||
// 转盘相关
|
||||
const light = ref({
|
||||
container: null,
|
||||
num: 8,
|
||||
itemNum: 3,
|
||||
container: null,
|
||||
num: 8,
|
||||
itemNum: 3,
|
||||
})
|
||||
|
||||
const turntable_light = ref()
|
||||
@@ -188,337 +188,332 @@ const turntable = ref()
|
||||
const isRunning = ref(false)
|
||||
|
||||
const turntable_list = ref([
|
||||
{
|
||||
id: 3,
|
||||
url: he,
|
||||
name: '和',
|
||||
isActive: false,
|
||||
activeUrl: kh,
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
url: dan,
|
||||
name: '单',
|
||||
isActive: false,
|
||||
activeUrl: kd,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '双',
|
||||
url: shuang,
|
||||
isActive: false,
|
||||
activeUrl: ks,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
url: he,
|
||||
name: '和',
|
||||
isActive: false,
|
||||
activeUrl: kh,
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
url: dan,
|
||||
name: '单',
|
||||
isActive: false,
|
||||
activeUrl: kd,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '双',
|
||||
url: shuang,
|
||||
isActive: false,
|
||||
activeUrl: ks,
|
||||
},
|
||||
])
|
||||
|
||||
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 || []
|
||||
},
|
||||
})
|
||||
Taro.request({
|
||||
url: `${process.env.TARO_APP_TURNTABLE_API}/turntable`,
|
||||
method: 'GET',
|
||||
success: ({ data: res }) => {
|
||||
bet_list.value = res.data.data || []
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
const bgUrl = ref(wu)
|
||||
|
||||
const handelDzClick = (item) => {
|
||||
turntable_list.value.forEach((itm) => {
|
||||
itm.isActive = false
|
||||
})
|
||||
item.isActive = true
|
||||
bgUrl.value = item.activeUrl
|
||||
turntable_list.value.forEach((itm) => {
|
||||
itm.isActive = false
|
||||
})
|
||||
item.isActive = true
|
||||
bgUrl.value = item.activeUrl
|
||||
}
|
||||
|
||||
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)
|
||||
// 初始化轮盘灯
|
||||
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()
|
||||
turntable_light.value = document.querySelector('#turntable_light')
|
||||
turntable.value = document.querySelector('#turntable')
|
||||
init()
|
||||
})
|
||||
|
||||
const startRun = (name: string) => {
|
||||
if (!name)
|
||||
return Taro.showToast({
|
||||
title: '未知开奖结果',
|
||||
mask: true,
|
||||
icon: 'none',
|
||||
duration: 1000,
|
||||
})
|
||||
isRunning.value = true
|
||||
|
||||
innerAudioContext.stop()
|
||||
|
||||
startMusic('https://files.wanzhuanyongcheng.com/file/music/yaotouzi/1.mp3', false)
|
||||
|
||||
turntable_list.value.forEach((item) => {
|
||||
item.isActive = false
|
||||
if (!name)
|
||||
return Taro.showToast({
|
||||
title: '未知开奖结果',
|
||||
mask: true,
|
||||
icon: 'none',
|
||||
duration: 1000,
|
||||
})
|
||||
isRunning.value = true
|
||||
|
||||
bet_index.value = null
|
||||
innerAudioContext.stop()
|
||||
|
||||
let kj_num = 0
|
||||
startMusic('https://files.wanzhuanyongcheng.com/file/music/yaotouzi/1.mp3', false)
|
||||
|
||||
switch (name) {
|
||||
case '单':
|
||||
kj_num = 1
|
||||
break
|
||||
case '双':
|
||||
kj_num = 2
|
||||
break
|
||||
case '和':
|
||||
kj_num = 3
|
||||
break
|
||||
}
|
||||
turntable_list.value.forEach((item) => {
|
||||
item.isActive = false
|
||||
})
|
||||
|
||||
let rotateItemDeg = (kj_num - 1) * (360 / turntable_list.value.length)
|
||||
bet_index.value = null
|
||||
|
||||
let rotate = rotateItemDeg + 5 * 360 - 70
|
||||
let kj_num = 0
|
||||
|
||||
const rotateSpeed = Number((rotateItemDeg / 360 + 5).toFixed(2))
|
||||
switch (name) {
|
||||
case '单':
|
||||
kj_num = 1
|
||||
break
|
||||
case '双':
|
||||
kj_num = 2
|
||||
break
|
||||
case '和':
|
||||
kj_num = 3
|
||||
break
|
||||
}
|
||||
|
||||
turntable.value.removeAttribute('style')
|
||||
let rotateItemDeg = (kj_num - 1) * (360 / turntable_list.value.length)
|
||||
|
||||
let rotate = rotateItemDeg + 5 * 360 - 70
|
||||
|
||||
const rotateSpeed = Number((rotateItemDeg / 360 + 5).toFixed(2))
|
||||
|
||||
turntable.value.removeAttribute('style')
|
||||
setTimeout(() => {
|
||||
turntable.value.style.background = `url(${bgUrl.value}) no-repeat`
|
||||
turntable.value.style.backgroundSize = 'contain'
|
||||
turntable.value.style.transform = `translate(-50%, -50%) rotate(${rotate}deg)`
|
||||
turntable.value.style.transition = `transform ${rotateSpeed}s ease-out`
|
||||
}, 10)
|
||||
|
||||
setTimeout(() => {
|
||||
isRunning.value = false
|
||||
bgUrl.value = wu
|
||||
getBetJl()
|
||||
setTimeout(() => {
|
||||
turntable.value.style.background = `url(${bgUrl.value}) no-repeat`
|
||||
turntable.value.style.backgroundSize = 'contain'
|
||||
turntable.value.style.transform = `translate(-50%, -50%) rotate(${rotate}deg)`
|
||||
turntable.value.style.transition = `transform ${rotateSpeed}s ease-out`
|
||||
}, 10)
|
||||
|
||||
setTimeout(() => {
|
||||
isRunning.value = false
|
||||
bgUrl.value = wu
|
||||
getBetJl()
|
||||
setTimeout(() => {
|
||||
getList()
|
||||
getUserInfo()
|
||||
}, 2000)
|
||||
}, rotateSpeed * 1000)
|
||||
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)
|
||||
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)
|
||||
const betArr = bet_list.value.filter((item) => item['name'] === arr[0].name)
|
||||
|
||||
console.log(betArr)
|
||||
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)
|
||||
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}`,
|
||||
})
|
||||
Taro.navigateTo({
|
||||
url: `/pages/turntable/records/index?type=${type}`,
|
||||
})
|
||||
}
|
||||
|
||||
// 动画相关
|
||||
const isLottie = ref(false) // 是否显示动画
|
||||
|
||||
const lottieFn = (type: number, num: number = 0) => {
|
||||
isLottie.value = true
|
||||
isLottie.value = true
|
||||
|
||||
const lottieEle = document.getElementById('lottie') as HTMLDivElement
|
||||
const lottieEle = document.getElementById('lottie') as HTMLDivElement
|
||||
|
||||
const ctx = Lottie.loadAnimation({
|
||||
container: lottieEle,
|
||||
renderer: 'svg',
|
||||
loop: false,
|
||||
autoplay: true,
|
||||
animationData: type === 1 ? zj : wzj,
|
||||
})
|
||||
const ctx = Lottie.loadAnimation({
|
||||
container: lottieEle,
|
||||
renderer: 'svg',
|
||||
loop: false,
|
||||
autoplay: true,
|
||||
animationData: type === 1 ? zj : wzj,
|
||||
})
|
||||
|
||||
if (type === 1) {
|
||||
const text = document.createElement('view')
|
||||
text.className = 'lottie-text'
|
||||
// text.innerHTML = `单`
|
||||
const view = document.createElement('view')
|
||||
view.className = 'lottie-bg'
|
||||
view.innerHTML = `<view class="lottie-num">${num}积分</view>`
|
||||
const els = [view, text]
|
||||
if (type === 1) {
|
||||
const text = document.createElement('view')
|
||||
text.className = 'lottie-text'
|
||||
// text.innerHTML = `单`
|
||||
const view = document.createElement('view')
|
||||
view.className = 'lottie-bg'
|
||||
view.innerHTML = `<view class="lottie-num">${num}积分</view>`
|
||||
const els = [view, text]
|
||||
|
||||
for (const i in els) {
|
||||
lottieEle.appendChild(els[i])
|
||||
}
|
||||
for (const i in els) {
|
||||
lottieEle.appendChild(els[i])
|
||||
}
|
||||
}
|
||||
|
||||
ctx.addEventListener('complete', () => {
|
||||
isLottie.value = false
|
||||
ctx.destroy()
|
||||
})
|
||||
ctx.addEventListener('complete', () => {
|
||||
isLottie.value = false
|
||||
ctx.destroy()
|
||||
})
|
||||
}
|
||||
|
||||
const getBetJl = () => {
|
||||
Taro.request({
|
||||
url: `${process.env.TARO_APP_TURNTABLE_API}/userTurntableRecord?uid=${Taro.getStorageSync(
|
||||
'uid'
|
||||
)}`,
|
||||
method: 'GET',
|
||||
success: ({ data: res }) => {
|
||||
const data = res.data.data[0]
|
||||
const t = dayjs().format('YYYY-MM-DD')
|
||||
Taro.request({
|
||||
url: `${process.env.TARO_APP_TURNTABLE_API}/userTurntableRecord?uid=${Taro.getStorageSync(
|
||||
'uid'
|
||||
)}`,
|
||||
method: 'GET',
|
||||
success: ({ data: res }) => {
|
||||
const data = res.data.data[0]
|
||||
const t = dayjs().format('YYYY-MM-DD')
|
||||
|
||||
// 是否为今天
|
||||
if (data.DrawTime === t) {
|
||||
// 是否下注
|
||||
if (newKjNum.value - data.Periods === 0) {
|
||||
// 是否中奖
|
||||
if (data.DrawNum > 0) {
|
||||
lottieFn(1, data.DrawNum)
|
||||
} else {
|
||||
lottieFn(2)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
})
|
||||
// 是否为今天
|
||||
if (data.DrawTime === t) {
|
||||
// 是否下注
|
||||
if (newKjNum.value - data.Periods === 0) {
|
||||
// 是否中奖
|
||||
if (data.DrawNum > 0) {
|
||||
lottieFn(1, data.DrawNum)
|
||||
} else {
|
||||
lottieFn(2)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
Taro.useDidHide(() => {
|
||||
ws.value?.close()
|
||||
ws.value?.close()
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
ws.value?.close()
|
||||
ws.value?.close()
|
||||
})
|
||||
</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="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 class="num-box" style="justify-content: center">
|
||||
<view class="item">
|
||||
{{ list[0]?.Name }}
|
||||
</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
|
||||
:style="{
|
||||
background: `url(${bgUrl}) no-repeat`,
|
||||
backgroundSize: 'contain',
|
||||
}"
|
||||
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(item)"
|
||||
>
|
||||
<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">
|
||||
第{{ newKjNum }}期开奖还剩:{{ 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" v-show="isLottie"></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
|
||||
:style="{
|
||||
background: `url(${bgUrl}) no-repeat`,
|
||||
backgroundSize: 'contain',
|
||||
}"
|
||||
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(item)"
|
||||
>
|
||||
<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">
|
||||
第{{ newKjNum }}期开奖还剩:{{ 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" v-show="isLottie"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user