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

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 | 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) {
+        getBetJl()
-            console.log(`中奖结果: ${name}`)
-        }
         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>

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 () => {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .taro_page {
     background-color: #f5f5f5 !important;
 }