456 lines
12 KiB
Vue
456 lines
12 KiB
Vue
<script setup lang="ts">
|
|
import { onMounted, ref } from 'vue'
|
|
import Taro from '@tarojs/taro'
|
|
import Lottie from 'lottie-web'
|
|
import * as dayjs from 'dayjs'
|
|
import dan from '../../../static/dan.png'
|
|
import he from '../../../static/he.png'
|
|
import shuang from '../../../static/shuang.png'
|
|
import kd from '../../../static/kd.png'
|
|
import kh from '../../../static/kh.png'
|
|
import ks from '../../../static/ks.png'
|
|
import wu from '../../../static/wu.png'
|
|
import wzj from '../../../static/wzj.json'
|
|
import zj from '../../../static/zj.json'
|
|
import './index.scss'
|
|
|
|
Taro.useDidShow(() => {
|
|
getUserInfo()
|
|
getBetList()
|
|
getList()
|
|
})
|
|
|
|
const user_info = ref<{
|
|
nickName: string
|
|
avatarUrl: string
|
|
pulse: number
|
|
integral: number
|
|
}>({
|
|
nickName: '游客',
|
|
avatarUrl: '',
|
|
pulse: 0,
|
|
integral: 0,
|
|
})
|
|
|
|
const bet_options = ref<
|
|
{
|
|
ID: number
|
|
max: number
|
|
}[]
|
|
>([])
|
|
|
|
const newKjNum = ref(1)
|
|
|
|
const list = ref<
|
|
{
|
|
name: string
|
|
preDrawIssue: number
|
|
preDrawCode: string
|
|
}[]
|
|
>([])
|
|
|
|
const kjData = ref<any>({})
|
|
|
|
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 || {}
|
|
},
|
|
})
|
|
}
|
|
|
|
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
|
|
},
|
|
})
|
|
}
|
|
|
|
const handelBetClick = (index: number) => {
|
|
bet_index.value = index
|
|
}
|
|
|
|
// 转盘相关
|
|
const light = ref({
|
|
container: null,
|
|
num: 8,
|
|
itemNum: 3,
|
|
})
|
|
|
|
const turntable_light = ref()
|
|
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,
|
|
},
|
|
])
|
|
|
|
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
|
|
|
|
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
|
|
}
|
|
|
|
const init = () => {
|
|
// 初始化轮盘灯
|
|
let lightFragment = document.createDocumentFragment()
|
|
for (let i = 0; i < light.value.num; i++) {
|
|
let lightItem = document.createElement('view')
|
|
let deg = (360 / light.value.num) * i
|
|
lightItem.className = 'lightItem'
|
|
lightItem.style.transform = `rotate(${deg}deg)`
|
|
lightFragment.appendChild(lightItem)
|
|
}
|
|
turntable_light.value.appendChild(lightFragment)
|
|
}
|
|
|
|
onMounted(() => {
|
|
turntable_light.value = document.querySelector('#turntable_light')
|
|
turntable.value = document.querySelector('#turntable')
|
|
init()
|
|
|
|
// startRun('单')
|
|
})
|
|
|
|
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 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)
|
|
}
|
|
}
|
|
|
|
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
|
|
})
|
|
|
|
bet_index.value = null
|
|
|
|
let kj_num = 0
|
|
|
|
switch (name) {
|
|
case '单':
|
|
kj_num = 1
|
|
break
|
|
case '双':
|
|
kj_num = 2
|
|
break
|
|
case '和':
|
|
kj_num = 3
|
|
break
|
|
}
|
|
|
|
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(() => {
|
|
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',
|
|
})
|
|
},
|
|
})
|
|
setTimeout(() => {
|
|
getUserInfo()
|
|
}, 500)
|
|
}
|
|
|
|
// 前往开奖和投注记录
|
|
const toPage = (type: number) => {
|
|
Taro.navigateTo({
|
|
url: `/pages/aoshi/records/index?type=${type}`,
|
|
})
|
|
}
|
|
|
|
// 动画相关
|
|
const isLottie = ref(false) // 是否显示动画
|
|
|
|
const lottieFn = (type: number, num: number = 0) => {
|
|
isLottie.value = true
|
|
|
|
const lottieEle = document.getElementById('lottie') as HTMLDivElement
|
|
|
|
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]
|
|
|
|
for (const i in els) {
|
|
lottieEle.appendChild(els[i])
|
|
}
|
|
}
|
|
|
|
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')
|
|
|
|
// 是否为今天
|
|
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>
|
|
<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 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>
|
|
</template>
|