i
This commit is contained in:
473
src/pages/yaotouzi/index/index.vue
Normal file
473
src/pages/yaotouzi/index/index.vue
Normal file
@@ -0,0 +1,473 @@
|
||||
<template>
|
||||
<view class="index">
|
||||
<!-- 公告 -->
|
||||
<view class="subColor tips"></view>
|
||||
<!-- 用户信息 -->
|
||||
<view class="subColor userInfo">
|
||||
<view class="left">
|
||||
<image :src="userInfo.avatarUrl"></image>
|
||||
<view class="userText">
|
||||
<view class="userName">{{ userInfo.nickName || '用户' }}</view>
|
||||
<view class="userScore">积分: {{ userInfo.integral || 0 }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="right">
|
||||
<view class="icon"></view>
|
||||
<view class="bean">{{ userInfo.pulse || 0 }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 游戏信息 -->
|
||||
<view class="subColor gameInfo">
|
||||
<view class="left">
|
||||
<image src="../../../static/tx.png"></image>
|
||||
<view class="game_box">
|
||||
<view class="gameName">第{{ kJData[0]?.Periods || 0 }}期开奖</view>
|
||||
<view class="lottery">
|
||||
<text class="text">{{ kJData[0]?.Start || 0 }}</text>
|
||||
<text class="text">{{ kJData[0]?.End || 0 }}</text>
|
||||
<!-- <text class="text">6</text>-->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="right">
|
||||
<view class="btn" @click="toPage(1)">开奖记录</view>
|
||||
<view class="btn mt-15" @click="toPage(2)">投注记录</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 选项区 -->
|
||||
<view class="opt">
|
||||
<view class="subColor item" :class="{flicker: item.flicker}" v-for="item in odds" :key="item.id"
|
||||
@click.stop="addNum(item)">
|
||||
<view class="name">{{ item.name }}</view>
|
||||
<view class="odd">赢{{ item.odds }}倍</view>
|
||||
<view class="mask" v-if="item.status">
|
||||
<view class="text">{{ item.markNum }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view style="height: 8px"></view>
|
||||
<view class="opt1" v-if="odds1.length > 0">
|
||||
<view>
|
||||
<view class="subColor item" :class="{flicker: odds1[0].flicker}" @click.stop="addNum(odds1[0])">
|
||||
<view class="name">{{ odds1[0].name }}</view>
|
||||
<view class="odd">赢{{ odds1[0].odds }}倍</view>
|
||||
<view class="mask" v-if="odds1[0].status">
|
||||
<view class="text">{{ odds1[0].markNum }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="subColor item" :class="{flicker: odds1[1].flicker}" @click.stop="addNum(odds1[1])">
|
||||
<view class="name">{{ odds1[1].name }}</view>
|
||||
<view class="odd">赢{{ odds1[1].odds }}倍</view>
|
||||
<view class="mask" v-if="odds1[1].status">
|
||||
<view class="text">{{ odds1[1].markNum }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="base">
|
||||
<view class="qz">
|
||||
<view :class="{ activeQz: isExpanding }">
|
||||
{{ qzTitle }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="expanding-div" v-if="isShow">{{ nowKJInfo.Start }} - {{ nowKJInfo.End }}</view>
|
||||
</view>
|
||||
<view>
|
||||
<view class="subColor item" :class="{flicker: odds1[2].flicker}" @click.stop="addNum(odds1[2])">
|
||||
<view class="name">{{ odds1[2].name }}</view>
|
||||
<view class="odd">赢{{ odds1[2].odds }}倍</view>
|
||||
<view class="mask" v-if="odds1[2].status">
|
||||
<view class="text">{{ odds1[2].markNum }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="subColor item" :class="{flicker: odds1[3].flicker}" @click.stop="addNum(odds1[3])">
|
||||
<view class="name">{{ odds1[3].name }}</view>
|
||||
<view class="odd">赢{{ odds1[3].odds }}倍</view>
|
||||
<view class="mask" v-if="odds1[3].status">
|
||||
<view class="text">{{ odds1[3].markNum }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view style="height: 4px"></view>
|
||||
<view class="opt">
|
||||
<view
|
||||
class="subColor item"
|
||||
:class="{flicker: item.flicker}"
|
||||
style="margin-bottom: 10px"
|
||||
v-for="item in odds2"
|
||||
:key="item.id"
|
||||
@click.stop="addNum(item)"
|
||||
>
|
||||
<view class="name">{{ item.name }}</view>
|
||||
<view class="odd">赢{{ item.odds }}倍</view>
|
||||
<view class="mask" v-if="item.status">
|
||||
<view class="text">{{ item.markNum }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view style="width: 18%;"></view>
|
||||
</view>
|
||||
<!-- 底部操作栏 -->
|
||||
<view class="subColor bottomBar">
|
||||
<view class="btn1" @click="clearBet">重置</view>
|
||||
<view class="btn2" @click="changeOdd">X{{ oddVal }}</view>
|
||||
<view class="btn3" @click="verifyBet">投注</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {ref} from 'vue'
|
||||
import Taro from '@tarojs/taro'
|
||||
import {app} from '@/config'
|
||||
import {getGameOption, getKaiJiangList, getJfDz} from '@/api'
|
||||
|
||||
const ws = ref<null | WebSocket>(null)
|
||||
|
||||
// 是否显示开奖动画
|
||||
const isShow = ref(false)
|
||||
|
||||
// 是否开启文字放大动画
|
||||
const isExpanding = ref(false)
|
||||
|
||||
interface Odd {
|
||||
id?: number
|
||||
name?: string
|
||||
odds?: number
|
||||
markNum?: number
|
||||
status?: boolean
|
||||
flicker?: boolean
|
||||
}
|
||||
|
||||
const odds = ref<Odd[]>([])
|
||||
|
||||
const odds1 = ref<Odd[]>([])
|
||||
|
||||
const odds2 = ref<Odd[]>([])
|
||||
|
||||
const qzTitle = ref('请投注')
|
||||
|
||||
const nowKJInfo = ref<{
|
||||
Start?: string
|
||||
End?: string
|
||||
Periods?: number
|
||||
}>({})
|
||||
|
||||
const userInfo = ref<{
|
||||
pulse?: number
|
||||
integral?: number
|
||||
nickName?: string
|
||||
avatarUrl?: string
|
||||
}>({})
|
||||
|
||||
const zjObj = ref({})
|
||||
|
||||
const iMsgNum = ref(0)
|
||||
|
||||
Taro.useLoad(() => {
|
||||
initWs()
|
||||
initData()
|
||||
})
|
||||
|
||||
const initData = () => {
|
||||
qzTitle.value = '请投注'
|
||||
getOddList()
|
||||
getKJList()
|
||||
getUserInfo()
|
||||
}
|
||||
|
||||
const arr = ['2+2', '3+3', '4+4', '5+5', '6+6']
|
||||
const arr1 = ['大', '小', '单', '双']
|
||||
const arr2 = ['和', '3', '4', '5', '6', '8', '9', '10', '11']
|
||||
|
||||
// 投注列表
|
||||
const getOddList = async () => {
|
||||
const res = await getGameOption()
|
||||
odds.value = []
|
||||
odds1.value = []
|
||||
odds2.value = []
|
||||
res.data.data.forEach((item: any) => {
|
||||
const {name, ID, odds: odd} = item
|
||||
const newItem = {
|
||||
id: ID,
|
||||
name: name,
|
||||
odds: odd,
|
||||
markNum: 0,
|
||||
status: false,
|
||||
flicker: false
|
||||
}
|
||||
if (arr1.includes(name)) {
|
||||
odds1.value.push(newItem)
|
||||
} else if (arr.includes(name)) {
|
||||
odds.value.push(newItem)
|
||||
} else if (arr2.includes(name)) {
|
||||
odds2.value.push(newItem)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 获取个人信息
|
||||
const getUserInfo = async () => {
|
||||
const res = await getJfDz(Taro.getStorageSync('uid'))
|
||||
userInfo.value = res.data.data
|
||||
}
|
||||
|
||||
const kJData = ref<any>([])
|
||||
|
||||
// 开奖列表
|
||||
const getKJList = async () => {
|
||||
const res = await getKaiJiangList()
|
||||
kJData.value = res.data.data
|
||||
}
|
||||
|
||||
// 初始化游戏
|
||||
const initWs = () => {
|
||||
ws.value = new WebSocket(`${app.API_WS()}`)
|
||||
ws.value.onopen = async () => {
|
||||
Taro.showToast({
|
||||
title: '连接游戏服务器成功',
|
||||
mask: true,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
|
||||
ws.value.onmessage = async (e: any) => {
|
||||
const res = JSON.parse(e.data)
|
||||
switch (res.code) {
|
||||
case 200:
|
||||
let num = Number(res.data)
|
||||
if (num === 5) {
|
||||
openDraw()
|
||||
}
|
||||
break
|
||||
case 401:
|
||||
Taro.showToast({
|
||||
title: '未登录',
|
||||
mask: true,
|
||||
icon: 'none'
|
||||
})
|
||||
break
|
||||
case 403:
|
||||
Taro.showToast({
|
||||
title: '未能操作',
|
||||
mask: true,
|
||||
icon: 'none'
|
||||
})
|
||||
break
|
||||
case 400:
|
||||
Taro.showToast({
|
||||
title: '豆子不足',
|
||||
mask: true,
|
||||
icon: 'none'
|
||||
})
|
||||
break
|
||||
case 5:
|
||||
Taro.showToast({
|
||||
title: '投注成功',
|
||||
mask: true,
|
||||
icon: 'none'
|
||||
})
|
||||
break
|
||||
case 666:
|
||||
iMsgNum.value++
|
||||
const newObj = JSON.parse(res.data)
|
||||
const arr = Object.values(newObj)
|
||||
// zjObj.value = {
|
||||
// ...zjObj.value,
|
||||
// ...newObj
|
||||
// }
|
||||
console.log(arr)
|
||||
if (iMsgNum.value === 19) {
|
||||
iMsgNum.value = 0
|
||||
startFlicker()
|
||||
}
|
||||
break
|
||||
}
|
||||
}
|
||||
ws.value.onerror = () => {
|
||||
console.log('连接游戏服务器失败')
|
||||
Taro.showToast({
|
||||
title: '连接游戏服务器失败',
|
||||
mask: true,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const isKj = ref(false)
|
||||
// 开奖倒计时
|
||||
const openDraw = () => {
|
||||
isExpanding.value = true
|
||||
isKj.value = true
|
||||
for (let i = 5; i > 0; i--) {
|
||||
setTimeout(() => {
|
||||
// i <= 3 && (fontColor.value = "red");
|
||||
qzTitle.value = i.toString()
|
||||
}, 1000 * (5 - i))
|
||||
}
|
||||
setTimeout(async () => {
|
||||
isExpanding.value = false
|
||||
const res = await getKaiJiangList()
|
||||
nowKJInfo.value = res.data.data[0]
|
||||
qzTitle.value = `第${nowKJInfo.value?.Periods || 0}期开奖`
|
||||
playAminExpand()
|
||||
isKj.value = false
|
||||
}, 5000)
|
||||
}
|
||||
|
||||
const oddVal = ref(1)
|
||||
const changeOdd = () => {
|
||||
switch (oddVal.value) {
|
||||
case 1:
|
||||
oddVal.value = 10
|
||||
break
|
||||
case 10:
|
||||
oddVal.value = 100
|
||||
break
|
||||
case 100:
|
||||
oddVal.value = 1
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
const clearBet = () => {
|
||||
clearItems(odds.value)
|
||||
clearItems(odds1.value)
|
||||
clearItems(odds2.value)
|
||||
}
|
||||
|
||||
const clearItems = (items: any[]) => {
|
||||
items.forEach((item: any) => {
|
||||
item.markNum = 0
|
||||
item.status = false
|
||||
})
|
||||
}
|
||||
|
||||
const addNum = (item: any) => {
|
||||
if (item.markNum >= 1000) return Taro.showToast({
|
||||
title: '单注不能超过1000',
|
||||
icon: 'none'
|
||||
})
|
||||
if (isKj.value) return Taro.showToast({
|
||||
title: '正在开奖，不能下注',
|
||||
icon: 'none'
|
||||
})
|
||||
item.status = true
|
||||
item.markNum += oddVal.value
|
||||
}
|
||||
|
||||
// 投注
|
||||
const verifyBet = () => {
|
||||
let numCount = 0
|
||||
|
||||
odds.value.forEach((item: any) => {
|
||||
if (item.markNum > 0) {
|
||||
numCount += item.markNum
|
||||
}
|
||||
})
|
||||
|
||||
odds1.value.forEach((item: any) => {
|
||||
if (item.markNum > 0) {
|
||||
numCount += item.markNum
|
||||
}
|
||||
})
|
||||
|
||||
odds2.value.forEach((item: any) => {
|
||||
if (item.markNum > 0) {
|
||||
numCount += item.markNum
|
||||
}
|
||||
})
|
||||
|
||||
if (numCount === 0) return Taro.showToast({
|
||||
title: '请选择选项，再投注',
|
||||
icon: 'none'
|
||||
})
|
||||
|
||||
if (numCount > (userInfo.value?.pulse as number)) return Taro.showToast({
|
||||
title: '投注豆子不足',
|
||||
icon: 'none'
|
||||
})
|
||||
|
||||
const data: any[] = []
|
||||
|
||||
odds.value.forEach((item: any) => {
|
||||
if (item.markNum > 0) {
|
||||
data.push({
|
||||
bid: item.id,
|
||||
number: item.markNum,
|
||||
name: item.name
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
odds1.value.forEach((item: any) => {
|
||||
if (item.markNum > 0) {
|
||||
data.push({
|
||||
bid: item.id,
|
||||
number: item.markNum,
|
||||
name: item.name
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
odds2.value.forEach((item: any) => {
|
||||
if (item.markNum > 0) {
|
||||
data.push({
|
||||
bid: item.id,
|
||||
number: item.markNum,
|
||||
name: item.name
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
ws.value?.send(JSON.stringify({
|
||||
type: 1,
|
||||
data: data
|
||||
}))
|
||||
|
||||
getUserInfo()
|
||||
|
||||
qzTitle.value = '已投注'
|
||||
clearBet()
|
||||
}
|
||||
|
||||
// 前往开奖和投注记录
|
||||
const toPage = (type: number) => {
|
||||
Taro.navigateTo({
|
||||
url: `/pages/yaotouzi/records/index?type=${type}`
|
||||
})
|
||||
}
|
||||
|
||||
// 播放展开动画
|
||||
const playAminExpand = () => {
|
||||
isShow.value = true
|
||||
setTimeout(() => {
|
||||
isShow.value = false
|
||||
initData()
|
||||
}, 10000)
|
||||
}
|
||||
|
||||
// 开始闪烁
|
||||
const startFlicker = () => {
|
||||
console.log('开始闪烁', zjObj.value)
|
||||
flickerItems(odds.value)
|
||||
flickerItems(odds1.value)
|
||||
flickerItems(odds2.value)
|
||||
}
|
||||
|
||||
const flickerItems = (items: any[]) => {
|
||||
items.forEach((item) => {
|
||||
for (const val in zjObj.value) {
|
||||
if (item.name === zjObj.value[val]) {
|
||||
item.flicker = true
|
||||
setTimeout(() => {
|
||||
item.flicker = false
|
||||
}, 3000)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "./index.scss";
|
||||
</style>
|
||||
Reference in New Issue
Block a user