XinLingKeJi/jdt-game
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(custom): 澳拾改版

Browse Source
This commit is contained in:
YuanHuakk
2024-01-21 18:49:48 +08:00
parent a55d5ee914
commit c468127ffb
39 changed files with 1476 additions and 638 deletions
Download Patch File Download Diff File Expand all files Collapse all files

676
src/pages/aoshi/index/index.vue
View File

@@ -1,287 +1,455 @@
<template>
<view class="container">
<view class="header">
<view class="left">公告：开奖结果同步傲拾</view>
<view class="right">
<view class="btn" @click="toPage(2)">投注记录</view>
<view class="btn" @click="toPage(1)">开奖记录</view>
</view>
</view>
<view class="user-info">
<view class="left">
<view class="avatar">
<image :src="userInfo.avatarUrl || require('../../../static/tx.png')" />
</view>
<view class="info">
<view class="name">{{ userInfo.nickName || '用户' }}</view>
<!-- <view class="level">积分: {{ userInfo.integral || 0 }}</view> -->
<view class="level">积分: {{ `${jfStr}w` || 0 }}</view>
</view>
</view>
<view class="right">
<view class="image"></view>
<!-- <text>{{ dzStr || 0 }}w</text> -->
<text>{{ userInfo.pulse || 0 }}</text>
</view>
<!-- <view class="game_btn" @click="handleRule">游戏规则</view> -->
</view>
<view class="kj-box">
<view class="title">
第
<text class="num">{{ kjData.nowPeriods || 0 }}</text>
期已开奖:
</view>
<view class="title-sub">
<view class="item" v-for="(item, index) in kjNums" :key="index">
{{ item }}
</view>
</view>
</view>
<view class="turntable">
<view class="num-box">
<view
class="item"
v-for="(item, index) in nums"
:key="index"
:style="{
color: item.active ? '#ff0000' : '#833E16',
backgroundColor: item.optActive ? '#FBEDBC' : '#ffeeee',
}"
@click="handleClick(item)"
>
<text>{{ item.value }}</text>
</view>
</view>
<view class="bet-btn" @click="handleBet">
<view>点击</view>
<view>投注</view>
</view>
</view>
<view class="countdown">
<text v-if="isKj">正在开奖中，已停止投注!!!</text>
<text v-else>
{{ Number(kjData.nowPeriods) + 1 || 0 }}期开奖还剩: {{ timeStr || '0分0秒' }}
</text>
</view>
<view class="bet-opt">
<view
class="item"
v-for="(item, index) in betOpts"
:key="index"
:style="{
backgroundColor: item.isActive ? '#FBDD36' : '#fbedbc',
}"
@click="handleBetOpt(item)"
>
{{ item.value }}豆子
</view>
</view>
</view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { get_turntable_list, get_user_info, turntable_bet } from '@/api'
import { onMounted, ref } from 'vue'
import Taro from '@tarojs/taro'
import Lottie from 'lottie-web'
import * as dayjs from 'dayjs'
const userInfo = ref<any>({})
interface NumsType {
ID: number
name: string
optActive?: boolean
active?: boolean
value?: string
list?: number[]
}
const nums = ref<NumsType[]>([])
const kjNums = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
const betOpts = ref([
{
isActive: false,
value: 100,
},
{
isActive: false,
value: 500,
},
{
isActive: false,
value: 1000,
},
{
isActive: false,
value: 2000,
},
{
isActive: false,
value: 3000,
},
{
isActive: false,
value: 5000,
},
])
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(() => {
get_info()
get_list()
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 timeId = ref<NodeJS.Timeout>()
const get_list = async () => {
const res = await get_turntable_list()
kjData.value = res.data || {}
kjNums.value = kjData.value.nowDraw.split(',').map((item) => Number(item))
nums.value = kjData.value.list.map((item) => ({
optActive: false,
active: false,
value: item.name,
ID: item.ID,
list: item.list.split(/[,-.]/).map((item: string) => Number(item)),
}))
nums.value.forEach((item) => {
item.list?.forEach((itm) => {
if (itm === Number(kjData.value.drawNumber)) {
item.active = true
}
})
})
timeId.value = setInterval(() => {
countdownFn()
}, 1000)
}
const bet_index = ref<number | null>(null)
const timeStr = ref('')
const isKj = ref(false)
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 offColorChange = ref(false)
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 = kjData.value.drawTime * 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'))
isKj.value = m === 0 && s < 40 ? true : false
if (m === 0 && s === 0) {
clearInterval(timeId.value)
clearInterval(time_i.value)
startRun(list.value[0].name)
}
}
if (m === 0 && s < 40 && !offColorChange.value) {
startColorFn()
}
const startRun = (name: string) => {
if (!name)
return Taro.showToast({
title: '未知开奖结果',
mask: true,
icon: 'none',
duration: 1000,
})
isRunning.value = true
if (m === 0 && s === 0) {
clearInterval(timeId.value)
clearInterval(time_i.value)
offColorChange.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(() => {
get_list()
get_info()
}, 3000)
}
}
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)
const startColorFn = () => {
nums.value.forEach((item) => {
item.active = false
})
// 随机选中一个
const randomNum = Math.floor(Math.random() * nums.value.length)
nums.value[randomNum].active = true
}
const dzStr = ref('')
const jfStr = ref('')
const get_info = async () => {
const res = await get_user_info(Taro.getStorageSync('uid'))
userInfo.value = res.data.data || {}
dzStr.value = String((userInfo.value.pulse / 10000).toFixed(2))
jfStr.value = String((userInfo.value.integral / 10000).toFixed(2))
}
const handleClick = (itemOpt) => {
nums.value.forEach((item) => {
item.optActive = false
})
itemOpt.optActive = true
}
const handleBetOpt = (item) => {
betOpts.value.forEach((item) => {
item.isActive = false
})
item.isActive = true
}
const handleBet = () => {
const newNums = nums.value.filter((item) => item.optActive === true)
if (newNums.length === 0)
return Taro.showToast({
title: '请选择投注项',
icon: 'none',
})
const item = betOpts.value.filter((item) => item.isActive === true)
if (item.length === 0)
return Taro.showToast({
title: '请选择投注豆子',
icon: 'none',
})
Taro.showModal({
title: '确认投注吗？',
content: `投注豆子：${item[0].value}`,
success: async (res) => {
if (res.confirm) {
const game_info = Taro.getStorageSync('gameItem')
const uid = Taro.getStorageSync('uid')
const res = await turntable_bet({
uid: uid,
aid: nums.value.filter((item) => item.optActive === true)[0].ID,
number: item[0].value,
game_id: game_info.ID,
})
Taro.showToast({
title: res.msg,
icon: 'none',
})
setTimeout(() => {
isRunning.value = false
getBetJl()
setTimeout(() => {
get_info()
bgUrl.value = wu
getUserInfo()
}, 2000)
}
},
})
}, rotateSpeed * 1000)
}
// const handleRule = () => {
// Taro.showToast({
// title: '暂无规则',
// icon: 'none',
// })
// }
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}`,
})
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>
<style lang="scss" scoped>
@import './index.scss';
</style>
<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>