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

i

Browse Source
This commit is contained in:
YuanHuakk
2023-09-01 00:13:14 +08:00
parent 6710347935
commit 1b561212e8
12 changed files with 730 additions and 289 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/pages/yaotouzi/index/index.config.ts Normal file
View File

@@ -0,0 +1,3 @@
export default definePageConfig({
navigationBarTitleText: '摇骰子'
})

387
src/pages/yaotouzi/index/index.scss Normal file
View File

@@ -0,0 +1,387 @@
.index {
background-color: #23684B;
width: 100%;
height: 100%;
.tips {
border-radius: 0;
width: 100%;
height: 60px;
}
.userInfo {
width: 680px;
margin: 20px auto;
//margin: auto;
padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
.left {
display: flex;
align-items: center;
image {
width: 100px;
height: 100px;
border-radius: 50%;
border: 2px solid #FFFFFF;
}
.userText {
margin-left: 10px;
width: 250px;
// 文字超出显示省略号
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
.userName {
font-size: 35px;
}
.userScore {
font-size: 25px;
}
}
}
.right {
background-color: #429C78;
border-radius: 50px;
flex: 1;
display: flex;
justify-content: flex-start;
align-items: center;
padding: 10px;
.icon {
background-image: url("../../../static/dz.png");
background-size: 100% 100%;
width: 50px;
height: 50px;
display: inline-block;
}
.bean {
margin-left: 20px;
}
}
}
.gameInfo {
width: 680px;
margin: 20px auto;
padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
.left {
display: flex;
image {
width: 110px;
height: 110px;
}
.game_box {
margin-left: 10px;
width: 250px;
// 文字超出显示省略号
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
.gameName {
font-size: 35px;
}
.lottery {
font-size: 25px;
display: flex;
justify-content: flex-start;
.text {
background-color: #E9422F;
width: 55px;
height: 55px;
text-align: center;
line-height: 55px;
font-size: 40px;
margin-right: 30px;
border-radius: 10px;
}
}
}
}
.right {
.btn {
width: 137px;
background: linear-gradient(-180deg, #FBE039, #FDC413);
font-size: 30px;
text-align: center;
border: 1px solid #FFEDC5;
border-radius: 26px;
}
}
}
.opt {
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
.item {
width: 18%;
text-align: center;
//margin: auto 3px;
border: 1px dashed #228960;
position: relative;
.name {
//font-size: 30px;
font-weight: bold;
}
.odd {
font-size: 25px;
}
.mask {
position: absolute;
//background: #7950f2;
width: 100%;
height: 100%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 10px;
text-align: center;
line-height: 100px;
background-color: rgba(0, 0, 0, 0.4);
.text {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
}
}
}
.opt1 {
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
text-align: center;
.item {
width: 200px;
margin-bottom: 10px;
text-align: center;
padding: 31px 0;
border: 1px dashed #228960;
position: relative;
.name {
font-size: 55px;
font-weight: bold;
}
.odd {
font-size: 25px;
}
.mask {
position: absolute;
//background: #7950f2;
width: 100%;
height: 100%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 10px;
background-color: rgba(0, 0, 0, 0.4);
.text {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
}
}
.base {
background-image: url("../../../static/cais.png");
background-size: 100% 100%;
width: 300px;
height: 400px;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
position: relative;
overflow: hidden;
.qz {
background-image: url("../../../static/qz.png");
background-size: 100% 100%;
width: 300px;
height: 100px;
margin-bottom: 20px;
line-height: 100px;
color: #FBE039;
font-weight: bold;
}
}
}
.bottomBar {
width: 100%;
box-sizing: border-box;
height: 130px;
position: fixed;
bottom: 0;
border-top-left-radius: 40px;
border-top-right-radius: 40px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 50px;
.btn1 {
background-image: url("../../../static/cz.png");
background-size: 100% 100%;
width: 150px;
height: 100px;
text-align: center;
line-height: 95px;
}
.btn2 {
background-image: url("../../../static/ssd.png");
background-size: 100% 100%;
width: 150px;
height: 100px;
text-align: center;
line-height: 100px;
}
.btn3 {
background-image: url("../../../static/tz.png");
background-size: 100% 100%;
width: 150px;
height: 100px;
text-align: center;
line-height: 95px;
}
}
}
.subColor {
background-color: #228960;
color: white;
border-radius: 10px;
}
.btn1, .btn2, .btn3 {
&:active {
animation: btn ease 0.3s;
}
}
@keyframes btn {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
// 虚线边框且闪烁3秒
.flicker {
animation: flicker 1s infinite;
}
@keyframes flicker {
0% {
border: 1px dashed #228960;
}
50% {
border: 1px dashed white;
}
100% {
border: 1px dashed #228960;
}
}
.expanding-div {
width: 10px;
height: 90px;
background-image: url("../../../static/qzzz.png");
background-size: 100% 100%;
position: absolute;
left: 50%;
top: 55%;
transform: translate(-50%, -50%);
animation-name: rotate, expand;
animation-duration: 2s, 3s;
animation-delay: 0s, 2s;
animation-timing-function: linear, ease-in-out;
animation-fill-mode: forwards, forwards;
overflow: hidden;
text-align: center;
line-height: 90px;
color: red;
}
@keyframes rotate {
0% {
top: -100%;
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
top: 50%;
transform: translate(-50%, -50%) rotate(360deg);
}
}
@keyframes expand {
from {
width: 10px;
}
to {
width: 200px;
}
}
// 倒计时动画
.activeQz {
animation: change-size 1s ease-in-out infinite;
font-weight: bold;
}
@keyframes change-size {
0% {
opacity: 1;
}
90% {
font-size: 300px;
opacity: 0;
}
100% {
opacity: 1;
}
}

473
src/pages/yaotouzi/index/index.vue Normal file
View 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>

3
src/pages/yaotouzi/records/index.config.ts Normal file
View File

@@ -0,0 +1,3 @@
export default definePageConfig({
navigationBarBackgroundColor: '#23684B'
})

91
src/pages/yaotouzi/records/index.vue Normal file
View File

@@ -0,0 +1,91 @@
<template>
<view class="app">
<template v-if="typeNum===1">
<view class="card" v-for="(item,index) in list as any[]" :key="index">
<view>
<view>第{{ item.Periods }}期开奖:
<text style="color: red">{{ item.Start }},{{ item.End }}</text>
</view>
<view class="sub">开奖时间:
<text>{{ item.DrawTime }}</text>
</view>
</view>
</view>
</template>
<template v-else>
<view class="card desc" v-for="(item,index) in list as any[]" :key="index">
<view>
<view>第{{ item.Periods }}期投注:
</view>
<view>
点数:
<text style="color: red">{{ item.Name }}</text>
</view>
<view class="sub">投注时间:
<text>{{ item.DrawTime }}</text>
</view>
</view>
<view>
<view style="color: red" v-if="item.State === 1">+{{ item.DrawNum }}积分</view>
<view style="color: green">-{{ item.Number }}</view>
</view>
</view>
</template>
</view>
</template>
<script lang="ts" setup>
import {ref} from 'vue'
import Taro from '@tarojs/taro'
import {getKaiJiangList, getTzJl} from '@/api'
const list = ref<any[]>([])
const typeNum = ref(0)
Taro.useLoad((options) => {
typeNum.value = Number(options.type)
Taro.setNavigationBarTitle({title: options.type === '1' ? '开奖记录' : '投注记录'})
getData(options.type)
})
const getData = async (type: string) => {
let res: any
if (type === '1') {
res = await getKaiJiangList()
} else {
res = await getTzJl(Taro.getStorageSync('uid'))
}
list.value = res.data.data
}
</script>
<style lang="scss" scoped>
.app {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 35px;
}
.card {
width: 90%;
padding: 20px;
background-color: #fff;
margin-top: 10px;
border-radius: 10px;
.sub {
margin-top: 10px;
color: #555555;
}
}
.desc {
display: flex;
justify-content: space-between;
align-items: center;
}
</style>