From 45e2265bb136700af6a6f095deaec307d5c82231 Mon Sep 17 00:00:00 2001 From: YuanHuakk <1751826683@qq.com> Date: Sun, 14 Jan 2024 18:35:22 +0800 Subject: [PATCH] =?UTF-8?q?feat(custom):=20=E5=A4=A7=E8=BD=AC=E7=9B=98?= =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E7=BB=93=E7=AE=97=E5=8A=A8=E7=94=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/turntable/index/index.scss | 958 +++++----- src/pages/turntable/index/index.vue | 92 +- src/pages/turntable/records/index.vue | 3 +- src/pages/turntable/static/img_0.png | Bin 0 -> 14081 bytes src/pages/turntable/static/wkj.json | 1604 ---------------- src/pages/turntable/static/wzj.json | 2458 ++++++++++++------------- src/pages/turntable/static/zj.json | 1144 ++++++++++++ 7 files changed, 2927 insertions(+), 3332 deletions(-) create mode 100644 src/pages/turntable/static/img_0.png delete mode 100644 src/pages/turntable/static/wkj.json create mode 100644 src/pages/turntable/static/zj.json diff --git a/src/pages/turntable/index/index.scss b/src/pages/turntable/index/index.scss index ed9c0c6..ae3eb8e 100644 --- a/src/pages/turntable/index/index.scss +++ b/src/pages/turntable/index/index.scss @@ -1,513 +1,555 @@ body { - line-height: 1; + 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; + background-image: url('../static/bg.png'); + background-size: 100% 100%; + background-repeat: no-repeat; + height: 100dvh; overflow: hidden; + position: relative; - .star { - position: absolute; - animation: starFlashing 1s ease-in-out infinite alternate; + .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; + } + } } - .star-1 { - left: 100px; - width: 139px; - height: 171px; - background-image: url('../static/1-1.png'); - background-size: 100% 100%; - } + .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); - .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: ''; + .avatar-box { position: absolute; - top: 4px; - left: 0; + 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; - margin: 0 auto; - width: 15px; - height: 15px; + 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%; - box-sizing: border-box; - } + 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/turntable_bg_1.png') no-repeat 100% 100%; + background-size: contain; + top: 50%; + left: 50%; + transform: translate(-50%, -50%) rotate(0deg); + border: 1px solid #625933; + + .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(3) { + top: 10px; + left: 10px; + transform: rotate(190deg); + } + + &:nth-child(5) { + top: 10px; + left: -12px; + transform: rotate(295deg); + } + + .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; + } + } + } + } } - .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/turntable_bg_1.png') no-repeat 100% 100%; - background-size: contain; - top: 50%; - left: 50%; - transform: translate(-50%, -50%) rotate(0deg); - border: 1px solid #625933; - - .prize { - position: absolute; - width: 300px; - height: 300px; - top: 50%; - left: 50%; - transform: translate(-50%, -50%) rotate(-200deg); - - .item { + .bet-btn { position: absolute; + background-image: url('../static/bet_btn.png'); + background-size: 100% 100%; width: 150px; height: 150px; - border-radius: 50%; - color: #000; - text-align: center; - transform-origin: right bottom; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); - &:nth-child(1) { - top: -10px; - transform: rotate(70deg); - } + //&:active { + // animation: betBtnClick .1s ease-in-out; + //} + } - &:nth-child(3) { - top: 10px; - left: 10px; - transform: rotate(190deg); - } + .pointer { + position: absolute; + background-image: url('../static/pointer.png'); + background-size: 100% 100%; + width: 47px; + height: 111px; + top: 15px; + left: 50%; + transform: translateX(-50%); + } + } - &:nth-child(5) { - top: 10px; - left: -12px; - transform: rotate(295deg); - } + .countdown-box { + margin-top: 50px; + background-image: url('../static/countdown_bg.png'); + background-size: 100% 100%; + width: 750px; + height: 96px; + text-align: center; + line-height: 96px; - .img { - display: block; - width: 100px; - height: 100px; - transform: rotate(-45deg) scale(1.1); - } + .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%; + margin-top: 10%; + display: flex; + justify-content: space-evenly; + + .item { + background-size: 100% 100%; + width: 194px; + height: 73px; + display: flex; + align-items: center; .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; + background-image: url('../static/dz.png'); + background-size: 100% 100%; + width: 55px; + height: 56px; + 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: 33px; + font-weight: bold; } - } } - } + + .item-active { + background-image: url('../static/dz_active.png'); + } + + .item-no-active { + background-image: url('../static/dz_opt.png'); + } } - .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%); + #lottie { + position: fixed; + inset: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.8); - //&:active { - // animation: betBtnClick .1s ease-in-out; - //} + .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; + } + } } - - .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: 50px; - 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%; - margin-top: 10%; - display: flex; - justify-content: space-evenly; - - .item { - background-size: 100% 100%; - width: 194px; - height: 73px; - display: flex; - align-items: center; - - .icon { - background-image: url('../static/dz.png'); - background-size: 100% 100%; - width: 55px; - height: 56px; - 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: 33px; - 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); - } } @keyframes btnClick { - from { - transform: scale(1); - } + from { + transform: scale(1); + } - to { - transform: scale(1.1); - } + to { + transform: scale(1.1); + } } @keyframes betBtnClick { - from { - transform: translate(-50%, -50%) scale(1); - } + from { + transform: translate(-50%, -50%) scale(1); + } - to { - transform: translate(-50%, -50%) scale(1.1); - } + to { + transform: translate(-50%, -50%) scale(1.1); + } } @keyframes ruleBtnClick { - from { - transform: scale(1) translateY(-50%); - } + from { + transform: scale(1) translateY(-50%); + } - to { - transform: scale(1.1) translateY(-50%); - } + to { + transform: scale(1.1) translateY(-50%); + } } @keyframes bgRevolve { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } } @keyframes starFlashing { - from { - transform: scale(1); - } + from { + transform: scale(1); + } - to { - transform: scale(1.1); - } + to { + transform: scale(1.1); + } } @keyframes turntableRevolve { - from { - transform: translateX(-50%) rotate(0deg); - } - to { - transform: translateX(-50%) rotate(360deg); - } + from { + transform: translateX(-50%) rotate(0deg); + } + to { + transform: translateX(-50%) rotate(360deg); + } } @keyframes white-to-yellow { - 0% { - background: transparent; - } - 100% { - background: #fefc87; - } + 0% { + background: transparent; + } + 100% { + background: #fefc87; + } +} + +@keyframes lottie { + 0% { + width: 0; + } + 100% { + width: 700px; + } } diff --git a/src/pages/turntable/index/index.vue b/src/pages/turntable/index/index.vue index b2bf6ae..0ff3443 100644 --- a/src/pages/turntable/index/index.vue +++ b/src/pages/turntable/index/index.vue @@ -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) -// 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 = `${num}积分` + 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) + } + } + } + }, + }) +} diff --git a/src/pages/turntable/records/index.vue b/src/pages/turntable/records/index.vue index 341d05c..c291264 100644 --- a/src/pages/turntable/records/index.vue +++ b/src/pages/turntable/records/index.vue @@ -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 () => { } -