Compare commits
27 Commits
74bce614f6
...
98cd8e67c9
| Author | SHA1 | Date | |
|---|---|---|---|
| 98cd8e67c9 | |||
| 6550e80e3f | |||
| 0a7075b73c | |||
| 8de14ca720 | |||
| e14cf86631 | |||
| 1be8bca950 | |||
| 42687fd697 | |||
| c468127ffb | |||
| a55d5ee914 | |||
| 2abffd85bb | |||
| 45e2265bb1 | |||
| e4908909bd | |||
| 9f43f1293c | |||
| 25a9f6459e | |||
| 0f7c3d17de | |||
| 3f3cfe0a7a | |||
| 5eab7111cb | |||
| 6ef544992b | |||
| f472206954 | |||
| 511935a6e7 | |||
| f2dd76d5f1 | |||
| b0d33e1076 | |||
| e5141585e3 | |||
| 89a80af70f | |||
| 1defd368f3 | |||
| da572bd282 | |||
| 7b6e0f3754 |
@@ -1,12 +1,12 @@
|
||||
# http://editorconfig.org
|
||||
# EditorConfig is awesome: https://EditorConfig.org
|
||||
|
||||
# top-most EditorConfig file
|
||||
root = true
|
||||
|
||||
[*]
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
end_of_line = lf
|
||||
charset = utf-8
|
||||
trim_trailing_whitespace = true
|
||||
insert_final_newline = true
|
||||
|
||||
[*.md]
|
||||
trim_trailing_whitespace = false
|
||||
insert_final_newline = false
|
||||
|
||||
@@ -2,12 +2,17 @@
|
||||
# TARO_APP_ID="开发环境下的小程序appid"
|
||||
|
||||
|
||||
TARO_APP_API = 'https://game.wanzhuanyongcheng.cn/dice'
|
||||
TARO_APP_API = 'https://game.wanzhuanyongcheng.cn'
|
||||
|
||||
TARO_APP_WS = 'wss://game.wanzhuanyongcheng.cn/dice/home'
|
||||
|
||||
TARO_APP_HOME = 'https://test.wanzhuanyongcheng.cn/app/game'
|
||||
|
||||
TARO_APP_BALLOON_WS = 'wss://balloon.wanzhuanyongcheng.cn/balloon/home'
|
||||
|
||||
TARO_APP_BALLOON_API = 'https://balloon.wanzhuanyongcheng.cn/balloon'
|
||||
# 大转盘
|
||||
TARO_APP_TURNTABLE_WS = 'wss://game2.wanzhuanyongcheng.cn/turntable/home'
|
||||
|
||||
TARO_APP_TURNTABLE_API = 'https://game2.wanzhuanyongcheng.cn/turntable'
|
||||
|
||||
# 澳拾
|
||||
TARO_APP_AOSHI_API = 'https://game3.wanzhuanyongcheng.cn'
|
||||
|
||||
6
.env.one
6
.env.one
@@ -1,6 +0,0 @@
|
||||
|
||||
TARO_APP_API = 'https://www.jdt168.com/dice'
|
||||
|
||||
TARO_APP_WS = 'wss://www.jdt168.com/dice/home'
|
||||
|
||||
TARO_APP_HOME = 'https://www.wanzhuanyongcheng.cn/app/game'
|
||||
14
.env.production
Normal file
14
.env.production
Normal file
@@ -0,0 +1,14 @@
|
||||
|
||||
TARO_APP_API = 'https://www.jdt168.com/dice'
|
||||
|
||||
TARO_APP_WS = 'wss://www.jdt168.com/dice/home'
|
||||
|
||||
TARO_APP_HOME = 'https://www.wanzhuanyongcheng.cn/app/game'
|
||||
|
||||
# 大转盘
|
||||
TARO_APP_TURNTABLE_WS = 'wss://turntable.jdt168.com/turntable/home'
|
||||
|
||||
TARO_APP_TURNTABLE_API = 'https://turntable.jdt168.com/turntable'
|
||||
|
||||
# 澳拾
|
||||
TARO_APP_AOSHI_API = 'https://australia.jdt168.com'
|
||||
11
.env.test
11
.env.test
@@ -1,12 +1,17 @@
|
||||
# TARO_APP_ID="测试环境下的小程序appid"
|
||||
|
||||
|
||||
TARO_APP_API = 'https://game.wanzhuanyongcheng.cn/dice'
|
||||
TARO_APP_API = 'https://game.wanzhuanyongcheng.cn'
|
||||
|
||||
TARO_APP_WS = 'wss://game.wanzhuanyongcheng.cn/dice/home'
|
||||
|
||||
TARO_APP_HOME = 'https://test.wanzhuanyongcheng.cn/app/game'
|
||||
|
||||
TARO_APP_BALLOON_WS = 'wss://balloon.wanzhuanyongcheng.cn/balloon/home'
|
||||
|
||||
TARO_APP_BALLOON_API = 'https://balloon.wanzhuanyongcheng.cn/balloon'
|
||||
# 大转盘
|
||||
TARO_APP_TURNTABLE_WS = 'wss://game2.wanzhuanyongcheng.cn/turntable/home'
|
||||
|
||||
TARO_APP_TURNTABLE_API = 'https://game2.wanzhuanyongcheng.cn/turntable'
|
||||
|
||||
# 澳拾
|
||||
TARO_APP_AOSHI_API = 'https://game3.wanzhuanyongcheng.cn'
|
||||
|
||||
6
.env.tow
6
.env.tow
@@ -1,6 +0,0 @@
|
||||
|
||||
TARO_APP_API = 'https://betting2.wanzhuanyongcheng.com/dice'
|
||||
|
||||
TARO_APP_WS = 'wss://betting2.wanzhuanyongcheng.com/dice/home'
|
||||
|
||||
TARO_APP_HOME = 'https://betting2.wanzhuanyongcheng.com/app/game'
|
||||
40
package.json
40
package.json
@@ -15,8 +15,6 @@
|
||||
"build:tt": "taro build --type tt",
|
||||
"build:h5": "taro build --type h5",
|
||||
"build:h5:test": "taro build --type h5 --mode test",
|
||||
"build:one": "taro build --type h5 --mode one",
|
||||
"build:tow": "taro build --type h5 --mode tow",
|
||||
"build:rn": "taro build --type rn",
|
||||
"build:qq": "taro build --type qq",
|
||||
"build:jd": "taro build --type jd",
|
||||
@@ -61,29 +59,31 @@
|
||||
"@sentry/browser": "^7.81.0",
|
||||
"@sentry/vue": "^7.81.0",
|
||||
"@sentry/webpack-plugin": "^2.10.1",
|
||||
"@tarojs/components": "3.6.20",
|
||||
"@tarojs/helper": "3.6.20",
|
||||
"@tarojs/plugin-framework-vue3": "3.6.20",
|
||||
"@tarojs/plugin-platform-alipay": "3.6.20",
|
||||
"@tarojs/plugin-platform-h5": "3.6.20",
|
||||
"@tarojs/plugin-platform-jd": "3.6.20",
|
||||
"@tarojs/plugin-platform-qq": "3.6.20",
|
||||
"@tarojs/plugin-platform-swan": "3.6.20",
|
||||
"@tarojs/plugin-platform-tt": "3.6.20",
|
||||
"@tarojs/plugin-platform-weapp": "3.6.20",
|
||||
"@tarojs/runtime": "3.6.20",
|
||||
"@tarojs/shared": "3.6.20",
|
||||
"@tarojs/taro": "3.6.20",
|
||||
"@tarojs/components": "3.6.22",
|
||||
"@tarojs/helper": "3.6.22",
|
||||
"@tarojs/plugin-framework-vue3": "3.6.22",
|
||||
"@tarojs/plugin-platform-alipay": "3.6.22",
|
||||
"@tarojs/plugin-platform-h5": "3.6.22",
|
||||
"@tarojs/plugin-platform-jd": "3.6.22",
|
||||
"@tarojs/plugin-platform-qq": "3.6.22",
|
||||
"@tarojs/plugin-platform-swan": "3.6.22",
|
||||
"@tarojs/plugin-platform-tt": "3.6.22",
|
||||
"@tarojs/plugin-platform-weapp": "3.6.22",
|
||||
"@tarojs/runtime": "3.6.22",
|
||||
"@tarojs/shared": "3.6.22",
|
||||
"@tarojs/taro": "3.6.22",
|
||||
"dayjs": "^1.11.10",
|
||||
"lottie-web": "^5.12.2",
|
||||
"vue": "^3.3.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.22.11",
|
||||
"@commitlint/cli": "^18.2.0",
|
||||
"@commitlint/config-conventional": "^18.1.0",
|
||||
"@tarojs/cli": "3.6.20",
|
||||
"@tarojs/taro-loader": "3.6.20",
|
||||
"@tarojs/cli": "3.6.22",
|
||||
"@tarojs/taro-loader": "3.6.22",
|
||||
"@tarojs/test-utils-vue3": "^0.1.1",
|
||||
"@tarojs/webpack5-runner": "3.6.20",
|
||||
"@tarojs/webpack5-runner": "3.6.22",
|
||||
"@types/jest": "^29.5.4",
|
||||
"@types/node": "^20.5.7",
|
||||
"@types/webpack-env": "^1.18.1",
|
||||
@@ -91,12 +91,12 @@
|
||||
"@typescript-eslint/parser": "^6.5.0",
|
||||
"@vue/babel-plugin-jsx": "^1.1.5",
|
||||
"@vue/compiler-sfc": "^3.3.4",
|
||||
"babel-preset-taro": "3.6.20",
|
||||
"babel-preset-taro": "3.6.22",
|
||||
"commitizen": "^4.3.0",
|
||||
"css-loader": "6.8.1",
|
||||
"cz-customizable": "^7.0.0",
|
||||
"eslint": "^8.48.0",
|
||||
"eslint-config-taro": "3.6.20",
|
||||
"eslint-config-taro": "3.6.22",
|
||||
"eslint-plugin-vue": "^9.17.0",
|
||||
"husky": "^8.0.0",
|
||||
"jest": "^29.6.4",
|
||||
|
||||
617
pnpm-lock.yaml
generated
617
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@@ -2,16 +2,37 @@ import request from '@/utils/request'
|
||||
|
||||
export const getGameOption = () =>
|
||||
request({
|
||||
url: '/betting',
|
||||
url: '/dice/betting',
|
||||
method: 'GET',
|
||||
})
|
||||
|
||||
export const getKaiJiangList = () => request({ url: '/draw', method: 'GET' })
|
||||
export const getKaiJiangList = () => request({ url: '/dice/draw', method: 'GET' })
|
||||
|
||||
// 用户信息
|
||||
export const getJfDz = (uid: string) =>
|
||||
request({ url: `/userBettingInfo?uid=${uid}`, method: 'GET' })
|
||||
request({ url: `/dice/userBettingInfo?uid=${uid}`, method: 'GET' })
|
||||
|
||||
// 用户投注记录
|
||||
export const getTzJl = (uid: string) =>
|
||||
request({ url: `/userBettingRecord?uid=${uid}`, method: 'GET' })
|
||||
request({ url: `/dice/userBettingRecord?uid=${uid}`, method: 'GET' })
|
||||
|
||||
// 大转盘相关api
|
||||
|
||||
// 获取开奖记录
|
||||
export const get_turntable_list = () => request({ url: '/australia/list', method: 'GET' })
|
||||
|
||||
// 获取个人信息
|
||||
export const get_user_info = (uid: string) =>
|
||||
request({ url: `/australia/user/info?uid=${uid}`, method: 'GET' })
|
||||
|
||||
// 大转盘投注
|
||||
export const turntable_bet = (data: any) =>
|
||||
request({ url: '/australia/user/dice', method: 'POST', data })
|
||||
|
||||
// 获取大转盘投注记录
|
||||
export const get_turntable_bet_record = (uid: string, date: string) =>
|
||||
request({ url: `/australia/user/record?uid=${uid}&date=${date}`, method: 'GET' })
|
||||
|
||||
// 获取大转盘开奖记录
|
||||
export const get_turntable_open_record = () =>
|
||||
request({ url: `/australia/history/list`, method: 'GET' })
|
||||
|
||||
@@ -1,17 +1,21 @@
|
||||
export default defineAppConfig({
|
||||
pages: [
|
||||
'pages/index/index',
|
||||
'pages/yaotouzi/index/index',
|
||||
'pages/game_detail/index',
|
||||
'pages/yaotouzi/records/index',
|
||||
'pages/balloon/index/index',
|
||||
'pages/balloon/records/index',
|
||||
],
|
||||
window: {
|
||||
backgroundTextStyle: 'light',
|
||||
navigationBarBackgroundColor: '#fff',
|
||||
navigationBarTitleText: 'Game',
|
||||
navigationBarTextStyle: 'black',
|
||||
},
|
||||
animation: false,
|
||||
pages: [
|
||||
'pages/index/index',
|
||||
'pages/yaotouzi/index/index',
|
||||
'pages/game_detail/index',
|
||||
'pages/yaotouzi/records/index',
|
||||
'pages/balloon/index/index',
|
||||
'pages/balloon/records/index',
|
||||
'pages/aoshi/index/index',
|
||||
'pages/aoshi/records/index',
|
||||
'pages/turntable/index/index',
|
||||
'pages/turntable/records/index',
|
||||
],
|
||||
window: {
|
||||
backgroundTextStyle: 'light',
|
||||
navigationBarBackgroundColor: '#fff',
|
||||
navigationBarTitleText: 'Game',
|
||||
navigationBarTextStyle: 'black',
|
||||
},
|
||||
animation: false,
|
||||
})
|
||||
|
||||
10
src/app.scss
10
src/app.scss
@@ -1,7 +1,9 @@
|
||||
.taro_page {
|
||||
background-color: #f5f5f5 !important;
|
||||
// width: 100vw !important;
|
||||
// height: 100vh !important;
|
||||
// .taro_page {
|
||||
// background-color: #f5f5f5 !important;
|
||||
// }
|
||||
|
||||
body {
|
||||
// line-height: 1;
|
||||
}
|
||||
|
||||
.mt-15 {
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="white" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
<meta http-equiv="Cache-control" content="no-cache" />
|
||||
<title>newGameHome</title>
|
||||
<title>捷兑通-游戏</title>
|
||||
<script>
|
||||
<%= htmlWebpackPlugin.options.script %>
|
||||
</script>
|
||||
|
||||
287
src/pages/aoshi/index/index copy.vue
Normal file
287
src/pages/aoshi/index/index copy.vue
Normal file
@@ -0,0 +1,287 @@
|
||||
<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 Taro from '@tarojs/taro'
|
||||
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,
|
||||
},
|
||||
])
|
||||
|
||||
Taro.useDidShow(() => {
|
||||
get_info()
|
||||
get_list()
|
||||
})
|
||||
|
||||
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 timeStr = ref('')
|
||||
|
||||
const isKj = ref(false)
|
||||
|
||||
const offColorChange = ref(false)
|
||||
|
||||
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 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 < 40 && !offColorChange.value) {
|
||||
startColorFn()
|
||||
}
|
||||
|
||||
if (m === 0 && s === 0) {
|
||||
clearInterval(timeId.value)
|
||||
clearInterval(time_i.value)
|
||||
offColorChange.value = true
|
||||
setTimeout(() => {
|
||||
get_list()
|
||||
get_info()
|
||||
}, 3000)
|
||||
}
|
||||
}
|
||||
|
||||
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(() => {
|
||||
get_info()
|
||||
}, 2000)
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
// const handleRule = () => {
|
||||
// Taro.showToast({
|
||||
// title: '暂无规则',
|
||||
// icon: 'none',
|
||||
// })
|
||||
// }
|
||||
|
||||
// 前往开奖和投注记录
|
||||
const toPage = (type: number) => {
|
||||
Taro.navigateTo({
|
||||
url: `/pages/aoshi/records/index?type=${type}`,
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './index.scss';
|
||||
</style>
|
||||
3
src/pages/aoshi/index/index.config.ts
Normal file
3
src/pages/aoshi/index/index.config.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '大转盘',
|
||||
})
|
||||
557
src/pages/aoshi/index/index.scss
Normal file
557
src/pages/aoshi/index/index.scss
Normal file
@@ -0,0 +1,557 @@
|
||||
body {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.page {
|
||||
background-image: url('../../../static/bg.png');
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
height: 100dvh;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
.header {
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.left-box {
|
||||
width: 378px;
|
||||
height: 40px;
|
||||
background: linear-gradient(90deg, #d19116 65%, #330706 95%);
|
||||
|
||||
.text {
|
||||
background: linear-gradient(180deg, #fffccd 0%, #ffe08e 100%);
|
||||
-webkit-background-clip: text;
|
||||
color: transparent;
|
||||
font-size: 25px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.right-box {
|
||||
display: flex;
|
||||
|
||||
.btn {
|
||||
background-size: 100% 100%;
|
||||
width: 149px;
|
||||
height: 46px;
|
||||
|
||||
&:active {
|
||||
animation: btnClick 0.1s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
.tz-btn {
|
||||
background-image: url('../../../static/tz_btn.png');
|
||||
transform-origin: center center;
|
||||
}
|
||||
|
||||
.kj-btn {
|
||||
background-image: url('../../../static/kj_btn.png');
|
||||
transform-origin: center center;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-box {
|
||||
width: 646px;
|
||||
height: 115px;
|
||||
background: rgba(98, 98, 98, 0.3);
|
||||
border-radius: 30px;
|
||||
margin: 35px auto;
|
||||
position: relative;
|
||||
backdrop-filter: blur(10px);
|
||||
|
||||
.avatar-box {
|
||||
position: absolute;
|
||||
left: -5%;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
|
||||
.bg {
|
||||
background-image: url('../../../static/avatar_border.png');
|
||||
background-size: 100% 100%;
|
||||
border-radius: 50%;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
animation: bgRevolve 10s linear infinite;
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
position: absolute;
|
||||
width: 92px;
|
||||
height: 92px;
|
||||
border-radius: 50%;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
.user-info {
|
||||
position: absolute;
|
||||
left: 100px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: linear-gradient(180deg, #fffccd 0%, #ffe08e 100%);
|
||||
-webkit-background-clip: text;
|
||||
color: transparent;
|
||||
|
||||
.name {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.jf {
|
||||
margin-top: 20px;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
.dz-box {
|
||||
position: absolute;
|
||||
right: 160px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.dz-bg {
|
||||
background-image: url('../../../static/dz.png');
|
||||
background-size: 100% 100%;
|
||||
width: 55px;
|
||||
height: 55px;
|
||||
}
|
||||
|
||||
.text {
|
||||
background: linear-gradient(180deg, #fffccd 0%, #ffe08e 100%);
|
||||
-webkit-background-clip: text;
|
||||
color: transparent;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.rule-btn {
|
||||
position: absolute;
|
||||
right: -8%;
|
||||
top: 45%;
|
||||
transform: translateY(-50%);
|
||||
background-image: url('../../../static/rule_btn.png');
|
||||
background-size: 100% 100%;
|
||||
width: 173px;
|
||||
height: 176px;
|
||||
transform-origin: center center;
|
||||
|
||||
&:active {
|
||||
animation: ruleBtnClick 0.1s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.kj-box {
|
||||
text-align: center;
|
||||
margin-top: -10px;
|
||||
|
||||
.title {
|
||||
background: linear-gradient(180deg, #fffccd 0%, #ffe08e 100%);
|
||||
-webkit-background-clip: text;
|
||||
color: transparent;
|
||||
font-size: 40px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.num-box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 10px;
|
||||
|
||||
.item {
|
||||
background-image: url('../../../static/num.png');
|
||||
background-size: 100% 100%;
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
text-align: center;
|
||||
line-height: 72px;
|
||||
font-weight: bold;
|
||||
color: #b2150b;
|
||||
}
|
||||
|
||||
.item:nth-child(1) {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.item:nth-child(2) {
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.turntable-box {
|
||||
position: relative;
|
||||
height: 670px;
|
||||
overflow: hidden;
|
||||
|
||||
.star {
|
||||
position: absolute;
|
||||
animation: starFlashing 1s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
.star-1 {
|
||||
left: 100px;
|
||||
width: 139px;
|
||||
height: 171px;
|
||||
background-image: url('../../../static/1-1.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.star-2 {
|
||||
top: 100px;
|
||||
width: 205px;
|
||||
height: 251px;
|
||||
background-image: url('../../../static/1-2.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.star-3 {
|
||||
right: 50px;
|
||||
width: 205px;
|
||||
height: 251px;
|
||||
background-image: url('../../../static/2-2.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.star-4 {
|
||||
top: 200px;
|
||||
right: 0;
|
||||
width: 140px;
|
||||
height: 171px;
|
||||
background-image: url('../../../static/2-1.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.turntable-wrap {
|
||||
background-image: url('../../../static/turntable_bg.png');
|
||||
background-size: 100% 100%;
|
||||
width: 650px;
|
||||
height: 650px;
|
||||
position: relative;
|
||||
border-radius: 50%;
|
||||
transform-origin: center center;
|
||||
left: 50%;
|
||||
top: 20px;
|
||||
transform: translateX(-50%);
|
||||
overflow: hidden;
|
||||
//animation: turntableRevolve 5s linear infinite;
|
||||
|
||||
.light {
|
||||
.lightItem {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
width: 10px;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
transform-origin: center center;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border-radius: 50%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.lightItem:nth-of-type(even):before {
|
||||
background: transparent;
|
||||
animation: white-to-yellow 1.5s linear infinite;
|
||||
}
|
||||
|
||||
.lightItem:nth-of-type(odd):before {
|
||||
background: #fefc87;
|
||||
animation: white-to-yellow 1.5s linear reverse infinite;
|
||||
}
|
||||
}
|
||||
|
||||
.turntable {
|
||||
position: absolute;
|
||||
width: 530px;
|
||||
height: 530px;
|
||||
border-radius: 50%;
|
||||
// background: url('../../../static/wu.png') no-repeat;
|
||||
// background-size: contain;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%) rotate(-0.8deg);
|
||||
|
||||
.prize {
|
||||
position: absolute;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%) rotate(-200deg);
|
||||
|
||||
.item {
|
||||
position: absolute;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border-radius: 50%;
|
||||
color: #000;
|
||||
text-align: center;
|
||||
transform-origin: right bottom;
|
||||
|
||||
&:nth-child(1) {
|
||||
top: -10px;
|
||||
transform: rotate(70deg);
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
top: -10px;
|
||||
left: -10px;
|
||||
transform: rotate(-60deg);
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
transform: rotate(190deg);
|
||||
}
|
||||
|
||||
.img {
|
||||
display: block;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
transform: rotate(-45deg) scale(1.1);
|
||||
}
|
||||
|
||||
.icon {
|
||||
position: absolute;
|
||||
background-image: url('../../../static/dz.png');
|
||||
background-size: 100% 100%;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
transform: rotate(-45deg) scale(1.6);
|
||||
top: -10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bet-btn {
|
||||
position: absolute;
|
||||
background-image: url('../../../static/bet_btn.png');
|
||||
background-size: 100% 100%;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
//&:active {
|
||||
// animation: betBtnClick .1s ease-in-out;
|
||||
//}
|
||||
}
|
||||
|
||||
.pointer {
|
||||
position: absolute;
|
||||
background-image: url('../../../static/pointer.png');
|
||||
background-size: 100% 100%;
|
||||
width: 47px;
|
||||
height: 111px;
|
||||
top: 15px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.countdown-box {
|
||||
margin-top: 30px;
|
||||
background-image: url('../../../static/countdown_bg.png');
|
||||
background-size: 100% 100%;
|
||||
width: 750px;
|
||||
height: 96px;
|
||||
text-align: center;
|
||||
line-height: 96px;
|
||||
|
||||
.title {
|
||||
font-size: 38px;
|
||||
font-weight: bold;
|
||||
color: #b81801;
|
||||
text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-box {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-gap: 10px;
|
||||
margin-top: 30px;
|
||||
|
||||
.item {
|
||||
background-size: 100% 100%;
|
||||
width: 220px;
|
||||
min-width: 220px;
|
||||
height: 75px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 10px auto;
|
||||
|
||||
.icon {
|
||||
background-image: url('../../../static/dz.png');
|
||||
background-size: 100% 100%;
|
||||
width: 55px;
|
||||
height: 55px;
|
||||
margin: auto 15px;
|
||||
}
|
||||
|
||||
.name {
|
||||
background: linear-gradient(180deg, #fffccd 0%, #ffe08e 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-stroke: 2px #000;
|
||||
color: transparent;
|
||||
font-size: 40px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.item-active {
|
||||
background-image: url('../../../static/dz_active.png');
|
||||
}
|
||||
|
||||
.item-no-active {
|
||||
background-image: url('../../../static/dz_opt.png');
|
||||
}
|
||||
}
|
||||
|
||||
#lottie {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
|
||||
.lottie-text {
|
||||
position: absolute;
|
||||
top: 59%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
color: #b81801;
|
||||
text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff;
|
||||
font-size: 80px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.lottie-bg {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 5%;
|
||||
transform: translateX(-50%);
|
||||
background-image: url('../../../static/img_0.png');
|
||||
background-size: 100% 100%;
|
||||
// width: 700px;
|
||||
height: 300px;
|
||||
animation: lottie 0.3s linear forwards;
|
||||
text-align: center;
|
||||
line-height: 310px;
|
||||
overflow: hidden;
|
||||
|
||||
.lottie-num {
|
||||
color: #b81801;
|
||||
text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff;
|
||||
font-size: 60px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes btnClick {
|
||||
from {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes betBtnClick {
|
||||
from {
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate(-50%, -50%) scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ruleBtnClick {
|
||||
from {
|
||||
transform: scale(1) translateY(-50%);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: scale(1.1) translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bgRevolve {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes starFlashing {
|
||||
from {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes turntableRevolve {
|
||||
from {
|
||||
transform: translateX(-50%) rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: translateX(-50%) rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes white-to-yellow {
|
||||
0% {
|
||||
background: transparent;
|
||||
}
|
||||
100% {
|
||||
background: #fefc87;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes lottie {
|
||||
0% {
|
||||
width: 0;
|
||||
}
|
||||
100% {
|
||||
width: 700px;
|
||||
}
|
||||
}
|
||||
473
src/pages/aoshi/index/index.vue
Normal file
473
src/pages/aoshi/index/index.vue
Normal file
@@ -0,0 +1,473 @@
|
||||
<script setup lang="ts">
|
||||
import { onBeforeUnmount, 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(() => {
|
||||
startMusic('https://files.wanzhuanyongcheng.com/file/music/yaotouzi/3.mp3', true)
|
||||
getUserInfo()
|
||||
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<{
|
||||
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
|
||||
|
||||
innerAudioContext.stop()
|
||||
|
||||
startMusic('https://files.wanzhuanyongcheng.com/file/music/yaotouzi/1.mp3', false)
|
||||
|
||||
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()
|
||||
startMusic('https://files.wanzhuanyongcheng.com/file/music/yaotouzi/3.mp3', true)
|
||||
}, 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()
|
||||
}
|
||||
|
||||
Taro.useDidHide(() => {
|
||||
clearInterval(timeId.value)
|
||||
clearInterval(time_i.value)
|
||||
innerAudioContext.stop()
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
clearInterval(timeId.value)
|
||||
clearInterval(time_i.value)
|
||||
innerAudioContext.stop()
|
||||
})
|
||||
</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>
|
||||
<view id="lottie" v-show="isLottie"></view>
|
||||
</view>
|
||||
</template>
|
||||
4
src/pages/aoshi/records/index.config.ts
Normal file
4
src/pages/aoshi/records/index.config.ts
Normal file
@@ -0,0 +1,4 @@
|
||||
export default definePageConfig({
|
||||
navigationBarBackgroundColor: '#23684B',
|
||||
enablePullDownRefresh: true,
|
||||
})
|
||||
143
src/pages/aoshi/records/index.vue
Normal file
143
src/pages/aoshi/records/index.vue
Normal file
@@ -0,0 +1,143 @@
|
||||
<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.preDrawIssue }}期开奖:
|
||||
<text
|
||||
:style="{
|
||||
color: numColor(item.name),
|
||||
}"
|
||||
>
|
||||
{{ item.name }}
|
||||
</text>
|
||||
<view>
|
||||
{{ item.preDrawCode }}
|
||||
</view>
|
||||
</view>
|
||||
<view>开奖时间: {{ item.preDrawTime }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<view v-if="list.length > 0">
|
||||
<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 style="text-align: right">
|
||||
<view style="color: red" v-if="item.State === 1">
|
||||
+{{ item.DrawNum }}积分
|
||||
</view>
|
||||
<view style="color: green">-{{ item.Number }}豆子</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else>
|
||||
<view style="margin-top: 100px">暂无记录.....</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
import Taro from '@tarojs/taro'
|
||||
|
||||
const list = ref<any[]>([])
|
||||
|
||||
const typeNum = ref(0)
|
||||
|
||||
Taro.useLoad((options) => {
|
||||
typeNum.value = Number(options.type)
|
||||
Taro.setNavigationBarTitle({
|
||||
title: options.type === '1' ? '开奖记录' : '投注记录',
|
||||
})
|
||||
getData()
|
||||
})
|
||||
|
||||
Taro.usePullDownRefresh(() => {
|
||||
getData()
|
||||
})
|
||||
|
||||
const numColor = (num: string) => {
|
||||
switch (num) {
|
||||
case '单':
|
||||
return 'orange'
|
||||
case '双':
|
||||
return 'blue'
|
||||
case '和':
|
||||
return 'purple'
|
||||
default:
|
||||
return 'black'
|
||||
}
|
||||
}
|
||||
|
||||
const getData = async () => {
|
||||
if (typeNum.value === 1) {
|
||||
Taro.request({
|
||||
url: `${process.env.TARO_APP_AOSHI_API}/australia/history/list`,
|
||||
method: 'GET',
|
||||
success: ({ data: res }) => {
|
||||
list.value = res.data.data.data || []
|
||||
},
|
||||
})
|
||||
} else {
|
||||
Taro.request({
|
||||
url: `${process.env.TARO_APP_AOSHI_API}/australia/user/record?uid=${Taro.getStorageSync(
|
||||
'uid'
|
||||
)}`,
|
||||
method: 'GET',
|
||||
success: ({ data: res }) => {
|
||||
list.value = res.data.data || []
|
||||
},
|
||||
})
|
||||
}
|
||||
Taro.stopPullDownRefresh()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.taro_page {
|
||||
background-color: #f5f5f5 !important;
|
||||
}
|
||||
.app {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
//justify-content: center;
|
||||
font-size: 35px;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 95%;
|
||||
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;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -1,17 +1,17 @@
|
||||
<template>
|
||||
<view class="index">
|
||||
<swiper class="swiper" :circular="true" :autoplay="true">
|
||||
<swiper-item v-for="(item, index) in list" :key="index">
|
||||
<image :src="item" />
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="container">
|
||||
<!-- <view>摇骰子</view> -->
|
||||
<view class="index">
|
||||
<swiper class="swiper" :circular="true" :autoplay="true">
|
||||
<swiper-item v-for="(item, index) in list" :key="index">
|
||||
<image :src="item" />
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="container">
|
||||
<!-- <view>摇骰子</view> -->
|
||||
|
||||
<rich-text :nodes="info.introduction"></rich-text>
|
||||
<view class="btn" @click="startGame()">开始游戏</view>
|
||||
<rich-text :nodes="info.introduction"></rich-text>
|
||||
<view class="btn" @click="startGame()">开始游戏</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
@@ -20,17 +20,16 @@ import Taro from '@tarojs/taro'
|
||||
import './index.scss'
|
||||
|
||||
const info = ref<any>({})
|
||||
const list = ref<string[]>([])
|
||||
|
||||
Taro.useLoad(() => {
|
||||
info.value = Taro.getStorageSync('gameItem')
|
||||
info.value = Taro.getStorageSync('gameItem')
|
||||
list.value.push(info.value.cover)
|
||||
})
|
||||
|
||||
const list = ref(['https://files.wanzhuanyongcheng.com/file/img/yaotouzi/banner/qietu.png'])
|
||||
|
||||
const startGame = () => {
|
||||
console.log(info.value)
|
||||
Taro.navigateTo({
|
||||
url: info.value.url,
|
||||
})
|
||||
Taro.navigateTo({
|
||||
url: info.value.url,
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
border-radius: 20px;
|
||||
text-align: center;
|
||||
line-height: 300px;
|
||||
background-image: url('../../static/qietu.png');
|
||||
// background-image: url('../../static/qietu.png');
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
|
||||
|
||||
@@ -1,13 +1,17 @@
|
||||
<template>
|
||||
<view class="index">
|
||||
<view class="title">游戏大厅</view>
|
||||
<view class="index">
|
||||
<view class="title">游戏大厅</view>
|
||||
|
||||
<view class="card_list">
|
||||
<view class="card_item" v-for="item in list as any[]" :key="item.ID">
|
||||
<view class="btn" @click="toPage(item)"></view>
|
||||
</view>
|
||||
<view class="card_list">
|
||||
<view
|
||||
class="card_item"
|
||||
v-for="item in list as any[]"
|
||||
:key="item.ID"
|
||||
:style="{ backgroundImage: `url(${item.cover})` }"
|
||||
@click="toPage(item)"
|
||||
></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
@@ -16,37 +20,37 @@ import Taro from '@tarojs/taro'
|
||||
import './index.scss'
|
||||
|
||||
Taro.useLoad((options) => {
|
||||
Taro.setStorageSync('uid', options.uid)
|
||||
if (Taro.getStorageSync('uid')) {
|
||||
Taro.showToast({
|
||||
title: `登陆成功`,
|
||||
icon: 'none',
|
||||
})
|
||||
getList()
|
||||
} else {
|
||||
Taro.showToast({
|
||||
title: '登陆失败，请重新进入游戏大厅',
|
||||
icon: 'none',
|
||||
})
|
||||
}
|
||||
Taro.setStorageSync('uid', options.uid)
|
||||
if (Taro.getStorageSync('uid')) {
|
||||
Taro.showToast({
|
||||
title: `登陆成功`,
|
||||
icon: 'none',
|
||||
})
|
||||
getList()
|
||||
} else {
|
||||
Taro.showToast({
|
||||
title: '登陆失败，请重新进入游戏大厅',
|
||||
icon: 'none',
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
const list = ref([])
|
||||
|
||||
const getList = async () => {
|
||||
Taro.request({
|
||||
url: `${process.env.TARO_APP_HOME}`,
|
||||
method: 'POST',
|
||||
success: ({ data: res }) => {
|
||||
list.value = res.data.data || []
|
||||
},
|
||||
})
|
||||
Taro.request({
|
||||
url: `${process.env.TARO_APP_HOME}`,
|
||||
method: 'POST',
|
||||
success: ({ data: res }) => {
|
||||
list.value = res.data.data || []
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
const toPage = (item: any) => {
|
||||
Taro.setStorageSync('gameItem', item)
|
||||
Taro.navigateTo({
|
||||
url: `/pages/game_detail/index?id=${item.ID}`,
|
||||
})
|
||||
Taro.setStorageSync('gameItem', item)
|
||||
Taro.navigateTo({
|
||||
url: `/pages/game_detail/index?id=${item.ID}`,
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
4
src/pages/turntable/index/index.config.ts
Normal file
4
src/pages/turntable/index/index.config.ts
Normal file
@@ -0,0 +1,4 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '大转盘',
|
||||
navigationStyle: 'custom',
|
||||
})
|
||||
557
src/pages/turntable/index/index.scss
Normal file
557
src/pages/turntable/index/index.scss
Normal file
@@ -0,0 +1,557 @@
|
||||
body {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.page {
|
||||
background-image: url('../../../static/bg.png');
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
height: 100dvh;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
.header {
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.left-box {
|
||||
width: 378px;
|
||||
height: 40px;
|
||||
background: linear-gradient(90deg, #d19116 65%, #330706 95%);
|
||||
|
||||
.text {
|
||||
background: linear-gradient(180deg, #fffccd 0%, #ffe08e 100%);
|
||||
-webkit-background-clip: text;
|
||||
color: transparent;
|
||||
font-size: 25px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.right-box {
|
||||
display: flex;
|
||||
|
||||
.btn {
|
||||
background-size: 100% 100%;
|
||||
width: 149px;
|
||||
height: 46px;
|
||||
|
||||
&:active {
|
||||
animation: btnClick 0.1s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
.tz-btn {
|
||||
background-image: url('../../../static/tz_btn.png');
|
||||
transform-origin: center center;
|
||||
}
|
||||
|
||||
.kj-btn {
|
||||
background-image: url('../../../static/kj_btn.png');
|
||||
transform-origin: center center;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-box {
|
||||
width: 646px;
|
||||
height: 115px;
|
||||
background: rgba(98, 98, 98, 0.3);
|
||||
border-radius: 30px;
|
||||
margin: 35px auto;
|
||||
position: relative;
|
||||
backdrop-filter: blur(10px);
|
||||
|
||||
.avatar-box {
|
||||
position: absolute;
|
||||
left: -5%;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
|
||||
.bg {
|
||||
background-image: url('../../../static/avatar_border.png');
|
||||
background-size: 100% 100%;
|
||||
border-radius: 50%;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
animation: bgRevolve 10s linear infinite;
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
position: absolute;
|
||||
width: 92px;
|
||||
height: 92px;
|
||||
border-radius: 50%;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
.user-info {
|
||||
position: absolute;
|
||||
left: 100px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: linear-gradient(180deg, #fffccd 0%, #ffe08e 100%);
|
||||
-webkit-background-clip: text;
|
||||
color: transparent;
|
||||
|
||||
.name {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.jf {
|
||||
margin-top: 20px;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
.dz-box {
|
||||
position: absolute;
|
||||
right: 160px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.dz-bg {
|
||||
background-image: url('../../../static/dz.png');
|
||||
background-size: 100% 100%;
|
||||
width: 55px;
|
||||
height: 55px;
|
||||
}
|
||||
|
||||
.text {
|
||||
background: linear-gradient(180deg, #fffccd 0%, #ffe08e 100%);
|
||||
-webkit-background-clip: text;
|
||||
color: transparent;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.rule-btn {
|
||||
position: absolute;
|
||||
right: -8%;
|
||||
top: 45%;
|
||||
transform: translateY(-50%);
|
||||
background-image: url('../../../static/rule_btn.png');
|
||||
background-size: 100% 100%;
|
||||
width: 173px;
|
||||
height: 176px;
|
||||
transform-origin: center center;
|
||||
|
||||
&:active {
|
||||
animation: ruleBtnClick 0.1s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.kj-box {
|
||||
text-align: center;
|
||||
margin-top: -10px;
|
||||
|
||||
.title {
|
||||
background: linear-gradient(180deg, #fffccd 0%, #ffe08e 100%);
|
||||
-webkit-background-clip: text;
|
||||
color: transparent;
|
||||
font-size: 40px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.num-box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 10px;
|
||||
|
||||
.item {
|
||||
background-image: url('../../../static/num.png');
|
||||
background-size: 100% 100%;
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
text-align: center;
|
||||
line-height: 72px;
|
||||
font-weight: bold;
|
||||
color: #b2150b;
|
||||
}
|
||||
|
||||
.item:nth-child(1) {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.item:nth-child(2) {
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.turntable-box {
|
||||
position: relative;
|
||||
height: 670px;
|
||||
overflow: hidden;
|
||||
|
||||
.star {
|
||||
position: absolute;
|
||||
animation: starFlashing 1s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
.star-1 {
|
||||
left: 100px;
|
||||
width: 139px;
|
||||
height: 171px;
|
||||
background-image: url('../../../static/1-1.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.star-2 {
|
||||
top: 100px;
|
||||
width: 205px;
|
||||
height: 251px;
|
||||
background-image: url('../../../static/1-2.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.star-3 {
|
||||
right: 50px;
|
||||
width: 205px;
|
||||
height: 251px;
|
||||
background-image: url('../../../static/2-2.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.star-4 {
|
||||
top: 200px;
|
||||
right: 0;
|
||||
width: 140px;
|
||||
height: 171px;
|
||||
background-image: url('../../../static/2-1.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.turntable-wrap {
|
||||
background-image: url('../../../static/turntable_bg.png');
|
||||
background-size: 100% 100%;
|
||||
width: 650px;
|
||||
height: 650px;
|
||||
position: relative;
|
||||
border-radius: 50%;
|
||||
transform-origin: center center;
|
||||
left: 50%;
|
||||
top: 20px;
|
||||
transform: translateX(-50%);
|
||||
overflow: hidden;
|
||||
//animation: turntableRevolve 5s linear infinite;
|
||||
|
||||
.light {
|
||||
.lightItem {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
width: 10px;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
transform-origin: center center;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border-radius: 50%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.lightItem:nth-of-type(even):before {
|
||||
background: transparent;
|
||||
animation: white-to-yellow 1.5s linear infinite;
|
||||
}
|
||||
|
||||
.lightItem:nth-of-type(odd):before {
|
||||
background: #fefc87;
|
||||
animation: white-to-yellow 1.5s linear reverse infinite;
|
||||
}
|
||||
}
|
||||
|
||||
.turntable {
|
||||
position: absolute;
|
||||
width: 530px;
|
||||
height: 530px;
|
||||
border-radius: 50%;
|
||||
// background: url('../../../static/wu.png') no-repeat;
|
||||
// background-size: contain;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%) rotate(0deg);
|
||||
|
||||
.prize {
|
||||
position: absolute;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%) rotate(-200deg);
|
||||
|
||||
.item {
|
||||
position: absolute;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border-radius: 50%;
|
||||
color: #000;
|
||||
text-align: center;
|
||||
transform-origin: right bottom;
|
||||
|
||||
&:nth-child(1) {
|
||||
top: -10px;
|
||||
transform: rotate(70deg);
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
top: -10px;
|
||||
left: -10px;
|
||||
transform: rotate(-60deg);
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
transform: rotate(190deg);
|
||||
}
|
||||
|
||||
.img {
|
||||
display: block;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
transform: rotate(-45deg) scale(1.1);
|
||||
}
|
||||
|
||||
.icon {
|
||||
position: absolute;
|
||||
background-image: url('../../../static/dz.png');
|
||||
background-size: 100% 100%;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
transform: rotate(-45deg) scale(1.6);
|
||||
top: -10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bet-btn {
|
||||
position: absolute;
|
||||
background-image: url('../../../static/bet_btn.png');
|
||||
background-size: 100% 100%;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
//&:active {
|
||||
// animation: betBtnClick .1s ease-in-out;
|
||||
//}
|
||||
}
|
||||
|
||||
.pointer {
|
||||
position: absolute;
|
||||
background-image: url('../../../static/pointer.png');
|
||||
background-size: 100% 100%;
|
||||
width: 47px;
|
||||
height: 111px;
|
||||
top: 15px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.countdown-box {
|
||||
margin-top: 30px;
|
||||
background-image: url('../../../static/countdown_bg.png');
|
||||
background-size: 100% 100%;
|
||||
width: 750px;
|
||||
height: 96px;
|
||||
text-align: center;
|
||||
line-height: 96px;
|
||||
|
||||
.title {
|
||||
font-size: 38px;
|
||||
font-weight: bold;
|
||||
color: #b81801;
|
||||
text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-box {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-gap: 10px;
|
||||
margin-top: 30px;
|
||||
|
||||
.item {
|
||||
background-size: 100% 100%;
|
||||
width: 220px;
|
||||
min-width: 220px;
|
||||
height: 75px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 10px auto;
|
||||
|
||||
.icon {
|
||||
background-image: url('../../../static/dz.png');
|
||||
background-size: 100% 100%;
|
||||
width: 55px;
|
||||
height: 55px;
|
||||
margin: auto 15px;
|
||||
}
|
||||
|
||||
.name {
|
||||
background: linear-gradient(180deg, #fffccd 0%, #ffe08e 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-stroke: 2px #000;
|
||||
color: transparent;
|
||||
font-size: 40px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.item-active {
|
||||
background-image: url('../../../static/dz_active.png');
|
||||
}
|
||||
|
||||
.item-no-active {
|
||||
background-image: url('../../../static/dz_opt.png');
|
||||
}
|
||||
}
|
||||
|
||||
#lottie {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
|
||||
.lottie-text {
|
||||
position: absolute;
|
||||
top: 59%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
color: #b81801;
|
||||
text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff;
|
||||
font-size: 80px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.lottie-bg {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 5%;
|
||||
transform: translateX(-50%);
|
||||
background-image: url('../../../static/img_0.png');
|
||||
background-size: 100% 100%;
|
||||
// width: 700px;
|
||||
height: 300px;
|
||||
animation: lottie 0.3s linear forwards;
|
||||
text-align: center;
|
||||
line-height: 310px;
|
||||
overflow: hidden;
|
||||
|
||||
.lottie-num {
|
||||
color: #b81801;
|
||||
text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff;
|
||||
font-size: 60px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes btnClick {
|
||||
from {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes betBtnClick {
|
||||
from {
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate(-50%, -50%) scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ruleBtnClick {
|
||||
from {
|
||||
transform: scale(1) translateY(-50%);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: scale(1.1) translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bgRevolve {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes starFlashing {
|
||||
from {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes turntableRevolve {
|
||||
from {
|
||||
transform: translateX(-50%) rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: translateX(-50%) rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes white-to-yellow {
|
||||
0% {
|
||||
background: transparent;
|
||||
}
|
||||
100% {
|
||||
background: #fefc87;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes lottie {
|
||||
0% {
|
||||
width: 0;
|
||||
}
|
||||
100% {
|
||||
width: 700px;
|
||||
}
|
||||
}
|
||||
522
src/pages/turntable/index/index.vue
Normal file
522
src/pages/turntable/index/index.vue
Normal file
@@ -0,0 +1,522 @@
|
||||
<script setup lang="ts">
|
||||
import { onBeforeUnmount, 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-1.png'
|
||||
import kh from '../../../static/kh-1.png'
|
||||
import ks from '../../../static/kX.png'
|
||||
import wu from '../../../static/kk.png'
|
||||
import wzj from '../../../static/wzj.json'
|
||||
import zj from '../../../static/zj.json'
|
||||
import './index.scss'
|
||||
|
||||
Taro.useDidShow(() => {
|
||||
startMusic('https://files.wanzhuanyongcheng.com/file/music/yaotouzi/3.mp3', true)
|
||||
getUserInfo()
|
||||
getBetList()
|
||||
getList()
|
||||
initWs()
|
||||
})
|
||||
|
||||
const ws = ref<null | WebSocket>(null)
|
||||
|
||||
const user_info = ref<{
|
||||
nickName: string
|
||||
avatarUrl: string
|
||||
pulse: number
|
||||
integral: number
|
||||
}>({
|
||||
nickName: '游客',
|
||||
avatarUrl: '',
|
||||
pulse: 0,
|
||||
integral: 0,
|
||||
})
|
||||
|
||||
const bet_options = ref([
|
||||
{
|
||||
id: 1,
|
||||
name: 600,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 1000,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: 1200,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: 2000,
|
||||
},
|
||||
])
|
||||
|
||||
const newKjNum = ref(1)
|
||||
|
||||
const list = ref<
|
||||
{
|
||||
Periods?: number
|
||||
Name?: string
|
||||
}[]
|
||||
>([])
|
||||
|
||||
const bet_index = ref<number | null>(null)
|
||||
|
||||
const timeStr = ref('')
|
||||
|
||||
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 initWs = () => {
|
||||
ws.value = new WebSocket(
|
||||
`${process.env.TARO_APP_TURNTABLE_WS}?uid=${Taro.getStorageSync('uid')}&game_id=${
|
||||
Taro.getStorageSync('gameItem').ID
|
||||
}`
|
||||
)
|
||||
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({
|
||||
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
|
||||
}
|
||||
}
|
||||
ws.value.onclose = () => {
|
||||
console.log('连接关闭')
|
||||
}
|
||||
|
||||
ws.value.onerror = () => {
|
||||
setTimeout(() => {
|
||||
Taro.showToast({
|
||||
title: '连接游戏服务器失败，正在重试',
|
||||
mask: true,
|
||||
icon: 'none',
|
||||
duration: 1000,
|
||||
})
|
||||
initWs()
|
||||
}, 5000)
|
||||
}
|
||||
}
|
||||
|
||||
const getUserInfo = async () => {
|
||||
Taro.request({
|
||||
url: `${process.env.TARO_APP_TURNTABLE_API}/userTurntableInfo?uid=${Taro.getStorageSync(
|
||||
'uid'
|
||||
)}`,
|
||||
method: 'GET',
|
||||
success: ({ data: res }) => {
|
||||
user_info.value = res.data.data || {}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
const getList = () => {
|
||||
Taro.request({
|
||||
url: `${process.env.TARO_APP_TURNTABLE_API}/draw`,
|
||||
method: 'GET',
|
||||
success: ({ data: res }) => {
|
||||
list.value = res.data.data || []
|
||||
newKjNum.value = (list.value[0].Periods 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: 2,
|
||||
name: '小',
|
||||
url: shuang,
|
||||
isActive: false,
|
||||
activeUrl: ks,
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
url: dan,
|
||||
name: '大',
|
||||
isActive: false,
|
||||
activeUrl: kd,
|
||||
},
|
||||
])
|
||||
|
||||
const bet_list = ref([])
|
||||
|
||||
const getBetList = () => {
|
||||
Taro.request({
|
||||
url: `${process.env.TARO_APP_TURNTABLE_API}/turntable`,
|
||||
method: 'GET',
|
||||
success: ({ data: res }) => {
|
||||
bet_list.value = res.data.data || []
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
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()
|
||||
})
|
||||
|
||||
const startRun = (name: string) => {
|
||||
if (!name)
|
||||
return Taro.showToast({
|
||||
title: '未知开奖结果',
|
||||
mask: true,
|
||||
icon: 'none',
|
||||
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
|
||||
})
|
||||
|
||||
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
|
||||
bgUrl.value = wu
|
||||
getBetJl()
|
||||
setTimeout(() => {
|
||||
getList()
|
||||
getUserInfo()
|
||||
startMusic('https://files.wanzhuanyongcheng.com/file/music/yaotouzi/3.mp3', true)
|
||||
}, 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 && item.url !== null)
|
||||
|
||||
const betArr = bet_list.value.filter((item) => item['name'] === arr[0].name)
|
||||
|
||||
console.log(betArr)
|
||||
|
||||
if (betArr.length === 0)
|
||||
return Taro.showToast({
|
||||
title: '请选择投注项',
|
||||
icon: 'none',
|
||||
})
|
||||
ws.value?.send(
|
||||
JSON.stringify({
|
||||
type: 1,
|
||||
data: [
|
||||
{
|
||||
number: bet_options.value[bet_index.value].name,
|
||||
bid: betArr[0]['ID'],
|
||||
name: betArr[0]['name'],
|
||||
},
|
||||
],
|
||||
})
|
||||
)
|
||||
setTimeout(() => {
|
||||
getUserInfo()
|
||||
}, 500)
|
||||
}
|
||||
|
||||
// 前往开奖和投注记录
|
||||
const toPage = (type: number) => {
|
||||
Taro.navigateTo({
|
||||
url: `/pages/turntable/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_TURNTABLE_API}/userTurntableRecord?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) {
|
||||
// 是否下注
|
||||
if (newKjNum.value - data.Periods === 0) {
|
||||
// 是否中奖
|
||||
if (data.DrawNum > 0) {
|
||||
lottieFn(1, data.DrawNum)
|
||||
} else {
|
||||
lottieFn(2)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
Taro.useDidHide(() => {
|
||||
ws.value?.close()
|
||||
innerAudioContext.stop()
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
ws.value?.close()
|
||||
innerAudioContext.stop()
|
||||
})
|
||||
</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]?.Periods || 0 }}期已开奖</text>
|
||||
<!-- <view class="num-box">
|
||||
<view class="item" v-for="(item, index) in lottery_list" :key="index">
|
||||
{{ 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.name }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view id="lottie" v-show="isLottie"></view>
|
||||
</view>
|
||||
</template>
|
||||
4
src/pages/turntable/records/index.config.ts
Normal file
4
src/pages/turntable/records/index.config.ts
Normal file
@@ -0,0 +1,4 @@
|
||||
export default definePageConfig({
|
||||
navigationBarBackgroundColor: '#23684B',
|
||||
enablePullDownRefresh: true,
|
||||
})
|
||||
144
src/pages/turntable/records/index.vue
Normal file
144
src/pages/turntable/records/index.vue
Normal file
@@ -0,0 +1,144 @@
|
||||
<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: numColor(item.Name),
|
||||
}"
|
||||
>
|
||||
{{ item.Name }}
|
||||
</text>
|
||||
</view>
|
||||
<view>开奖时间: {{ item.DrawTime }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<view v-if="list.length > 0">
|
||||
<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 style="text-align: right">
|
||||
<view style="color: red" v-if="item.State === 1">
|
||||
+{{ item.DrawNum }}积分
|
||||
</view>
|
||||
<view style="color: green">-{{ item.Number }}豆子</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else>
|
||||
<view style="margin-top: 100px">暂无记录.....</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
import Taro from '@tarojs/taro'
|
||||
|
||||
const list = ref<any[]>([])
|
||||
|
||||
const typeNum = ref(0)
|
||||
|
||||
Taro.useLoad((options) => {
|
||||
typeNum.value = Number(options.type)
|
||||
Taro.setNavigationBarTitle({
|
||||
title: options.type === '1' ? '开奖记录' : '投注记录',
|
||||
})
|
||||
getData()
|
||||
})
|
||||
|
||||
Taro.usePullDownRefresh(() => {
|
||||
getData()
|
||||
})
|
||||
|
||||
const numColor = (num: string) => {
|
||||
switch (num) {
|
||||
case '大':
|
||||
return 'red'
|
||||
case '小':
|
||||
return 'green'
|
||||
case '单':
|
||||
return 'orange'
|
||||
case '双':
|
||||
return 'blue'
|
||||
case '和':
|
||||
return 'purple'
|
||||
default:
|
||||
return 'black'
|
||||
}
|
||||
}
|
||||
|
||||
const getData = async () => {
|
||||
if (typeNum.value === 1) {
|
||||
Taro.request({
|
||||
url: `${process.env.TARO_APP_TURNTABLE_API}/draw`,
|
||||
method: 'GET',
|
||||
success: ({ data: res }) => {
|
||||
list.value = res.data.data || []
|
||||
},
|
||||
})
|
||||
} else {
|
||||
Taro.request({
|
||||
url: `${
|
||||
process.env.TARO_APP_TURNTABLE_API
|
||||
}/userTurntableRecord?uid=${Taro.getStorageSync('uid')}`,
|
||||
method: 'GET',
|
||||
success: ({ data: res }) => {
|
||||
list.value = res.data.data || []
|
||||
},
|
||||
})
|
||||
}
|
||||
Taro.stopPullDownRefresh()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.taro_page {
|
||||
background-color: #f5f5f5 !important;
|
||||
}
|
||||
.app {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
//justify-content: center;
|
||||
font-size: 35px;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 95%;
|
||||
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;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -102,6 +102,9 @@ const getData = async () => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.taro_page {
|
||||
background-color: #f5f5f5 !important;
|
||||
}
|
||||
.app {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
BIN
src/static/1-1.png
Normal file
BIN
src/static/1-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
src/static/1-2.png
Normal file
BIN
src/static/1-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
BIN
src/static/2-1.png
Normal file
BIN
src/static/2-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
src/static/2-2.png
Normal file
BIN
src/static/2-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
BIN
src/static/3.mp3
Normal file
BIN
src/static/3.mp3
Normal file
Binary file not shown.
BIN
src/static/avatar_border.png
Normal file
BIN
src/static/avatar_border.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
src/static/bet_btn.png
Normal file
BIN
src/static/bet_btn.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
BIN
src/static/bg.png
Normal file
BIN
src/static/bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 861 KiB |
BIN
src/static/countdown_bg.png
Normal file
BIN
src/static/countdown_bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
BIN
src/static/dan.png
Normal file
BIN
src/static/dan.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
BIN
src/static/default_avatar.png
Normal file
BIN
src/static/default_avatar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 5.4 KiB |
BIN
src/static/dz_active.png
Normal file
BIN
src/static/dz_active.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
src/static/dz_opt.png
Normal file
BIN
src/static/dz_opt.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
src/static/he.png
Normal file
BIN
src/static/he.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
BIN
src/static/img_0.png
Normal file
BIN
src/static/img_0.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
src/static/kX.png
Normal file
BIN
src/static/kX.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 183 KiB |
BIN
src/static/kd-1.png
Normal file
BIN
src/static/kd-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 174 KiB |
BIN
src/static/kd.png
Normal file
BIN
src/static/kd.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 187 KiB |
BIN
src/static/kh-1.png
Normal file
BIN
src/static/kh-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 171 KiB |
BIN
src/static/kh.png
Normal file
BIN
src/static/kh.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 177 KiB |
BIN
src/static/kj_btn.png
Normal file
BIN
src/static/kj_btn.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.3 KiB |
BIN
src/static/kk.png
Normal file
BIN
src/static/kk.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 135 KiB |
BIN
src/static/ks.png
Normal file
BIN
src/static/ks.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 178 KiB |
BIN
src/static/num.png
Normal file
BIN
src/static/num.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
BIN
src/static/pointer.png
Normal file
BIN
src/static/pointer.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
BIN
src/static/rule_btn.png
Normal file
BIN
src/static/rule_btn.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
src/static/shuang.png
Normal file
BIN
src/static/shuang.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
BIN
src/static/turntable_bg.png
Normal file
BIN
src/static/turntable_bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 95 KiB |
BIN
src/static/turntable_bg_1.png
Normal file
BIN
src/static/turntable_bg_1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 138 KiB |
BIN
src/static/tz_btn.png
Normal file
BIN
src/static/tz_btn.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.5 KiB |
BIN
src/static/wu.png
Normal file
BIN
src/static/wu.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 140 KiB |
1223
src/static/wzj.json
Normal file
1223
src/static/wzj.json
Normal file
File diff suppressed because it is too large
Load Diff
1144
src/static/zj.json
Normal file
1144
src/static/zj.json
Normal file
File diff suppressed because it is too large
Load Diff
@@ -2,34 +2,34 @@ import { app } from '@/config'
|
||||
import Taro from '@tarojs/taro'
|
||||
|
||||
export interface RequestParams {
|
||||
url: string
|
||||
method: 'GET' | 'POST' | 'PUT' | 'DELETE'
|
||||
header?: object
|
||||
data?: string | object
|
||||
url: string
|
||||
method: 'GET' | 'POST' | 'PUT' | 'DELETE'
|
||||
header?: object
|
||||
data?: string | object
|
||||
}
|
||||
|
||||
const request = (request: RequestParams): Promise<any> => {
|
||||
Taro.showLoading({
|
||||
title: '加载中',
|
||||
})
|
||||
return new Promise((resolve, reject) => {
|
||||
Taro.request({
|
||||
url: `${app.API_URL()}${request.url}`,
|
||||
method: request.method,
|
||||
timeout: 5000,
|
||||
dataType: 'json',
|
||||
header: request.header || {},
|
||||
data: request.data || {},
|
||||
success: (res) => {
|
||||
resolve(res.data)
|
||||
Taro.hideLoading()
|
||||
},
|
||||
fail: (err) => {
|
||||
reject(err)
|
||||
Taro.hideLoading()
|
||||
},
|
||||
// Taro.showLoading({
|
||||
// title: '加载中',
|
||||
// })
|
||||
return new Promise((resolve, reject) => {
|
||||
Taro.request({
|
||||
url: `${app.API_URL()}${request.url}`,
|
||||
method: request.method,
|
||||
timeout: 5000,
|
||||
dataType: 'json',
|
||||
header: request.header || {},
|
||||
data: request.data || {},
|
||||
success: (res) => {
|
||||
resolve(res.data)
|
||||
// Taro.hideLoading()
|
||||
},
|
||||
fail: (err) => {
|
||||
reject(err)
|
||||
Taro.hideLoading()
|
||||
},
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
export default request
|
||||
|
||||
Reference in New Issue
Block a user