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