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

feat(custom): 大转盘增加结算动画

Browse Source
This commit is contained in:
YuanHuakk
2024-01-14 18:35:22 +08:00
parent e4908909bd
commit 45e2265bb1
7 changed files with 2927 additions and 3332 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/pages/turntable/index/index.scss
View File

@@ -442,6 +442,39 @@ body {
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 .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;
}
}
}
}
@@ -511,3 +544,12 @@ body {
background: #fefc87;
}
}
@keyframes lottie {
0% {
width: 0;
}
100% {
width: 700px;
}
}

92
src/pages/turntable/index/index.vue
View File

@@ -2,9 +2,12 @@
import { onMounted, ref } from 'vue'
import Taro from '@tarojs/taro'
import Lottie from 'lottie-web'
import * as dayjs from 'dayjs'
import dan from '../static/dan.png'
import he from '../static/he.png'
import shuang from '../static/shuang.png'
import wzj from '../static/wzj.json'
import zj from '../static/zj.json'
import './index.scss'
Taro.useDidShow(() => {
@@ -12,20 +15,10 @@ Taro.useDidShow(() => {
getBetList()
getList()
initWs()
Lottie.loadAnimation({
container: document.getElementById('lottie') as Element,
renderer: 'svg',
loop: true,
autoplay: true,
animationData: require('../static/wzj.json'),
})
})
const ws = ref<null | WebSocket>(null)
// const lottery_list = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
const user_info = ref<{
nickName: string
avatarUrl: string
@@ -57,6 +50,8 @@ const bet_options = ref([
},
])
const newKjNum = ref(1)
const list = ref<
{
Periods?: number
@@ -146,12 +141,13 @@ const getUserInfo = async () => {
})
}
const getList = async () => {
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
},
})
}
@@ -245,13 +241,15 @@ onMounted(() => {
init()
})
const startRun = (name: string, isShow = false) => {
const startRun = (name: string) => {
isRunning.value = true
turntable_list.value.forEach((item) => {
item.isActive = false
})
bet_index.value = null
let kj_num = 0
switch (name) {
@@ -280,9 +278,7 @@ const startRun = (name: string, isShow = false) => {
setTimeout(() => {
isRunning.value = false
if (isShow) {
console.log(`中奖结果: ${name}`)
}
getBetJl()
setTimeout(() => {
getList()
getUserInfo()
@@ -330,6 +326,68 @@ const toPage = (type: number) => {
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)
}
}
}
},
})
}
</script>
<template>
@@ -405,7 +463,7 @@ const toPage = (type: number) => {
</view>
<view class="countdown-box">
<text class="title" v-if="!isRunning">
第{{ (list[0]?.Periods as number) + 1 || 1 }}期开奖还剩:{{ timeStr || '00' }}秒
第{{ newKjNum }}期开奖还剩:{{ timeStr || '00' }}秒
</text>
<text v-else class="title">正在开奖中...</text>
</view>
@@ -421,6 +479,6 @@ const toPage = (type: number) => {
<view class="name">{{ item.name }}</view>
</view>
</view>
<!-- <view id="lottie"></view> -->
<view id="lottie" v-show="isLottie"></view>
</view>
</template>

3
src/pages/turntable/records/index.vue
View File

@@ -100,7 +100,6 @@ const getData = async () => {
}/userTurntableRecord?uid=${Taro.getStorageSync('uid')}`,
method: 'GET',
success: ({ data: res }) => {
console.log(res)
list.value = res.data.data || []
},
})
@@ -109,7 +108,7 @@ const getData = async () => {
}
</script>
<style lang="scss" scoped>
<style lang="scss">
.taro_page {
background-color: #f5f5f5 !important;
}

BIN
src/pages/turntable/static/img_0.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

1604
src/pages/turntable/static/wkj.json
View File

File diff suppressed because it is too large Load Diff

154
src/pages/turntable/static/wzj.json
View File

@@ -8,37 +8,37 @@
"nm": "未开奖画面",
"ddd": 0,
"assets": [
{ "id": "image_0", "w": 284, "h": 488, "u": "//upload.jdt168.com/wzj/", "p": "img_0.png", "e": 0 },
{ "id": "image_1", "w": 157, "h": 191, "u": "//upload.jdt168.com/wzj/", "p": "img_1.png", "e": 0 },
{ "id": "image_2", "w": 244, "h": 101, "u": "//upload.jdt168.com/wzj/", "p": "img_2.png", "e": 0 },
{ "id": "image_3", "w": 320, "h": 57, "u": "//upload.jdt168.com/wzj/", "p": "img_3.png", "e": 0 },
{ "id": "image_4", "w": 375, "h": 667, "u": "//upload.jdt168.com/wzj/", "p": "img_4.png", "e": 0 },
{ "id": "image_5", "w": 375, "h": 667, "u": "//upload.jdt168.com/wzj/", "p": "img_5.png", "e": 0 },
{ "id": "image_6", "w": 375, "h": 667, "u": "//upload.jdt168.com/wzj/", "p": "img_6.png", "e": 0 },
{ "id": "image_7", "w": 375, "h": 667, "u": "//upload.jdt168.com/wzj/", "p": "img_7.png", "e": 0 },
{ "id": "image_8", "w": 375, "h": 667, "u": "//upload.jdt168.com/wzj/", "p": "img_8.png", "e": 0 },
{ "id": "image_9", "w": 375, "h": 667, "u": "//upload.jdt168.com/wzj/", "p": "img_9.png", "e": 0 },
{ "id": "image_10", "w": 375, "h": 667, "u": "//upload.jdt168.com/wzj/", "p": "img_10.png", "e": 0 },
{ "id": "image_11", "w": 375, "h": 667, "u": "//upload.jdt168.com/wzj/", "p": "img_11.png", "e": 0 },
{ "id": "image_12", "w": 375, "h": 667, "u": "//upload.jdt168.com/wzj/", "p": "img_12.png", "e": 0 },
{ "id": "image_13", "w": 375, "h": 667, "u": "//upload.jdt168.com/wzj/", "p": "img_13.png", "e": 0 },
{ "id": "image_14", "w": 375, "h": 667, "u": "//upload.jdt168.com/wzj/", "p": "img_14.png", "e": 0 },
{ "id": "image_15", "w": 375, "h": 667, "u": "//upload.jdt168.com/wzj/", "p": "img_15.png", "e": 0 },
{ "id": "image_16", "w": 375, "h": 667, "u": "//upload.jdt168.com/wzj/", "p": "img_16.png", "e": 0 },
{ "id": "image_17", "w": 375, "h": 667, "u": "//upload.jdt168.com/wzj/", "p": "img_17.png", "e": 0 },
{ "id": "image_18", "w": 375, "h": 667, "u": "//upload.jdt168.com/wzj/", "p": "img_18.png", "e": 0 },
{ "id": "image_19", "w": 375, "h": 667, "u": "//upload.jdt168.com/wzj/", "p": "img_19.png", "e": 0 },
{ "id": "image_20", "w": 375, "h": 667, "u": "//upload.jdt168.com/wzj/", "p": "img_20.png", "e": 0 },
{ "id": "image_21", "w": 375, "h": 667, "u": "//upload.jdt168.com/wzj/", "p": "img_21.png", "e": 0 },
{ "id": "image_22", "w": 375, "h": 667, "u": "//upload.jdt168.com/wzj/", "p": "img_22.png", "e": 0 },
{ "id": "image_23", "w": 375, "h": 667, "u": "//upload.jdt168.com/wzj/", "p": "img_23.png", "e": 0 },
{ "id": "image_24", "w": 375, "h": 667, "u": "//upload.jdt168.com/wzj/", "p": "img_24.png", "e": 0 },
{ "id": "image_25", "w": 375, "h": 667, "u": "//upload.jdt168.com/wzj/", "p": "img_25.png", "e": 0 },
{ "id": "image_26", "w": 261, "h": 276, "u": "//upload.jdt168.com/wzj/", "p": "img_26.png", "e": 0 },
{ "id": "image_27", "w": 268, "h": 123, "u": "//upload.jdt168.com/wzj/", "p": "img_27.png", "e": 0 },
{ "id": "image_28", "w": 488, "h": 103, "u": "//upload.jdt168.com/wzj/", "p": "img_28.png", "e": 0 },
{ "id": "image_29", "w": 228, "h": 102, "u": "//upload.jdt168.com/wzj/", "p": "img_29.png", "e": 0 },
{ "id": "image_30", "w": 278, "h": 102, "u": "//upload.jdt168.com/wzj/", "p": "img_30.png", "e": 0 },
{ "id": "image_0", "w": 284, "h": 488, "u": "//jdt168.oss-cn-guangzhou.aliyuncs.com/wzj/", "p": "img_0.png", "e": 0 },
{ "id": "image_1", "w": 157, "h": 191, "u": "//jdt168.oss-cn-guangzhou.aliyuncs.com/wzj/", "p": "img_1.png", "e": 0 },
{ "id": "image_2", "w": 244, "h": 101, "u": "//jdt168.oss-cn-guangzhou.aliyuncs.com/wzj/", "p": "img_2.png", "e": 0 },
{ "id": "image_3", "w": 320, "h": 57, "u": "//jdt168.oss-cn-guangzhou.aliyuncs.com/wzj/", "p": "img_3.png", "e": 0 },
{ "id": "image_4", "w": 375, "h": 667, "u": "//jdt168.oss-cn-guangzhou.aliyuncs.com/wzj/", "p": "img_4.png", "e": 0 },
{ "id": "image_5", "w": 375, "h": 667, "u": "//jdt168.oss-cn-guangzhou.aliyuncs.com/wzj/", "p": "img_5.png", "e": 0 },
{ "id": "image_6", "w": 375, "h": 667, "u": "//jdt168.oss-cn-guangzhou.aliyuncs.com/wzj/", "p": "img_6.png", "e": 0 },
{ "id": "image_7", "w": 375, "h": 667, "u": "//jdt168.oss-cn-guangzhou.aliyuncs.com/wzj/", "p": "img_7.png", "e": 0 },
{ "id": "image_8", "w": 375, "h": 667, "u": "//jdt168.oss-cn-guangzhou.aliyuncs.com/wzj/", "p": "img_8.png", "e": 0 },
{ "id": "image_9", "w": 375, "h": 667, "u": "//jdt168.oss-cn-guangzhou.aliyuncs.com/wzj/", "p": "img_9.png", "e": 0 },
{ "id": "image_10", "w": 375, "h": 667, "u": "//jdt168.oss-cn-guangzhou.aliyuncs.com/wzj/", "p": "img_10.png", "e": 0 },
{ "id": "image_11", "w": 375, "h": 667, "u": "//jdt168.oss-cn-guangzhou.aliyuncs.com/wzj/", "p": "img_11.png", "e": 0 },
{ "id": "image_12", "w": 375, "h": 667, "u": "//jdt168.oss-cn-guangzhou.aliyuncs.com/wzj/", "p": "img_12.png", "e": 0 },
{ "id": "image_13", "w": 375, "h": 667, "u": "//jdt168.oss-cn-guangzhou.aliyuncs.com/wzj/", "p": "img_13.png", "e": 0 },
{ "id": "image_14", "w": 375, "h": 667, "u": "//jdt168.oss-cn-guangzhou.aliyuncs.com/wzj/", "p": "img_14.png", "e": 0 },
{ "id": "image_15", "w": 375, "h": 667, "u": "//jdt168.oss-cn-guangzhou.aliyuncs.com/wzj/", "p": "img_15.png", "e": 0 },
{ "id": "image_16", "w": 375, "h": 667, "u": "//jdt168.oss-cn-guangzhou.aliyuncs.com/wzj/", "p": "img_16.png", "e": 0 },
{ "id": "image_17", "w": 375, "h": 667, "u": "//jdt168.oss-cn-guangzhou.aliyuncs.com/wzj/", "p": "img_17.png", "e": 0 },
{ "id": "image_18", "w": 375, "h": 667, "u": "//jdt168.oss-cn-guangzhou.aliyuncs.com/wzj/", "p": "img_18.png", "e": 0 },
{ "id": "image_19", "w": 375, "h": 667, "u": "//jdt168.oss-cn-guangzhou.aliyuncs.com/wzj/", "p": "img_19.png", "e": 0 },
{ "id": "image_20", "w": 375, "h": 667, "u": "//jdt168.oss-cn-guangzhou.aliyuncs.com/wzj/", "p": "img_20.png", "e": 0 },
{ "id": "image_21", "w": 375, "h": 667, "u": "//jdt168.oss-cn-guangzhou.aliyuncs.com/wzj/", "p": "img_21.png", "e": 0 },
{ "id": "image_22", "w": 375, "h": 667, "u": "//jdt168.oss-cn-guangzhou.aliyuncs.com/wzj/", "p": "img_22.png", "e": 0 },
{ "id": "image_23", "w": 375, "h": 667, "u": "//jdt168.oss-cn-guangzhou.aliyuncs.com/wzj/", "p": "img_23.png", "e": 0 },
{ "id": "image_24", "w": 375, "h": 667, "u": "//jdt168.oss-cn-guangzhou.aliyuncs.com/wzj/", "p": "img_24.png", "e": 0 },
{ "id": "image_25", "w": 375, "h": 667, "u": "//jdt168.oss-cn-guangzhou.aliyuncs.com/wzj/", "p": "img_25.png", "e": 0 },
{ "id": "image_26", "w": 261, "h": 276, "u": "//jdt168.oss-cn-guangzhou.aliyuncs.com/wzj/", "p": "img_26.png", "e": 0 },
{ "id": "image_27", "w": 268, "h": 123, "u": "//jdt168.oss-cn-guangzhou.aliyuncs.com/wzj/", "p": "img_27.png", "e": 0 },
{ "id": "image_28", "w": 488, "h": 103, "u": "//jdt168.oss-cn-guangzhou.aliyuncs.com/wzj/", "p": "img_28.png", "e": 0 },
{ "id": "image_29", "w": 228, "h": 102, "u": "//jdt168.oss-cn-guangzhou.aliyuncs.com/wzj/", "p": "img_29.png", "e": 0 },
{ "id": "image_30", "w": 278, "h": 102, "u": "//jdt168.oss-cn-guangzhou.aliyuncs.com/wzj/", "p": "img_30.png", "e": 0 },
{
"id": "comp_0",
"layers": [
@@ -1053,28 +1053,48 @@
"r": {
"a": 1,
"k": [
{ "i": { "x": [0.833], "y": [1] }, "o": { "x": [0.333], "y": [0] }, "t": 0, "s": [0] },
{
"i": { "x": [0.833], "y": [1] },
"o": { "x": [0.333], "y": [0] },
"t": 0,
"s": [0]
},
{
"i": { "x": [0.833], "y": [1] },
"o": { "x": [0.167], "y": [0] },
"t": 4,
"s": [-14]
},
{ "i": { "x": [0.833], "y": [1] }, "o": { "x": [0.167], "y": [0] }, "t": 8, "s": [12] },
{
"i": { "x": [0.833], "y": [1] },
"o": { "x": [0.167], "y": [0] },
"t": 8,
"s": [12]
},
{
"i": { "x": [0.833], "y": [1] },
"o": { "x": [0.167], "y": [0] },
"t": 12,
"s": [-14]
},
{ "i": { "x": [0.833], "y": [1] }, "o": { "x": [0.167], "y": [0] }, "t": 16, "s": [8] },
{
"i": { "x": [0.833], "y": [1] },
"o": { "x": [0.167], "y": [0] },
"t": 16,
"s": [8]
},
{
"i": { "x": [0.833], "y": [1] },
"o": { "x": [0.167], "y": [0] },
"t": 20,
"s": [-14]
},
{ "i": { "x": [0.833], "y": [1] }, "o": { "x": [0.167], "y": [0] }, "t": 24, "s": [8] },
{
"i": { "x": [0.833], "y": [1] },
"o": { "x": [0.167], "y": [0] },
"t": 24,
"s": [8]
},
{ "t": 28, "s": [0] }
],
"ix": 10
@@ -1197,70 +1217,6 @@
"op": 649,
"st": 0,
"bm": 0
},
{
"ddd": 0,
"ind": 17,
"ty": 4,
"nm": "形状图层 1",
"sr": 1,
"ks": {
"o": { "a": 0, "k": 83, "ix": 11 },
"r": { "a": 0, "k": 0, "ix": 10 },
"p": { "a": 0, "k": [375, 667, 0], "ix": 2 },
"a": { "a": 0, "k": [0, 0, 0], "ix": 1 },
"s": { "a": 0, "k": [100, 100, 100], "ix": 6 }
},
"ao": 0,
"shapes": [
{
"ty": "gr",
"it": [
{
"ty": "rc",
"d": 1,
"s": { "a": 0, "k": [750, 1334], "ix": 2 },
"p": { "a": 0, "k": [0, 0], "ix": 3 },
"r": { "a": 0, "k": 0, "ix": 4 },
"nm": "矩形路径 1",
"mn": "ADBE Vector Shape - Rect",
"hd": false
},
{
"ty": "fl",
"c": { "a": 0, "k": [0, 0, 0, 1], "ix": 4 },
"o": { "a": 0, "k": 100, "ix": 5 },
"r": 1,
"bm": 0,
"nm": "填充 1",
"mn": "ADBE Vector Graphic - Fill",
"hd": false
},
{
"ty": "tr",
"p": { "a": 0, "k": [0, 0], "ix": 2 },
"a": { "a": 0, "k": [0, 0], "ix": 1 },
"s": { "a": 0, "k": [100, 100], "ix": 3 },
"r": { "a": 0, "k": 0, "ix": 6 },
"o": { "a": 0, "k": 100, "ix": 7 },
"sk": { "a": 0, "k": 0, "ix": 4 },
"sa": { "a": 0, "k": 0, "ix": 5 },
"nm": "变换"
}
],
"nm": "矩形 1",
"np": 3,
"cix": 2,
"bm": 0,
"ix": 1,
"mn": "ADBE Vector Group",
"hd": false
}
],
"ip": 0,
"op": 649,
"st": 0,
"bm": 0
}
],
"markers": []

1144
src/pages/turntable/static/zj.json Normal file
View File

File diff suppressed because it is too large Load Diff