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

src/pages/turntable/index/index.scss

@@ -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;
+    }
+}

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;
 }

src/pages/turntable/static/wzj.json

@@ -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_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": "//upload.jdt168.com/wzj/", "p": "img_1.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": "//upload.jdt168.com/wzj/", "p": "img_2.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": "//upload.jdt168.com/wzj/", "p": "img_3.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": "//upload.jdt168.com/wzj/", "p": "img_4.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": "//upload.jdt168.com/wzj/", "p": "img_5.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": "//upload.jdt168.com/wzj/", "p": "img_6.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": "//upload.jdt168.com/wzj/", "p": "img_7.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": "//upload.jdt168.com/wzj/", "p": "img_8.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": "//upload.jdt168.com/wzj/", "p": "img_9.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": "//upload.jdt168.com/wzj/", "p": "img_10.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": "//upload.jdt168.com/wzj/", "p": "img_11.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": "//upload.jdt168.com/wzj/", "p": "img_12.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": "//upload.jdt168.com/wzj/", "p": "img_13.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": "//upload.jdt168.com/wzj/", "p": "img_14.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": "//upload.jdt168.com/wzj/", "p": "img_15.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": "//upload.jdt168.com/wzj/", "p": "img_16.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": "//upload.jdt168.com/wzj/", "p": "img_17.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": "//upload.jdt168.com/wzj/", "p": "img_18.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": "//upload.jdt168.com/wzj/", "p": "img_19.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": "//upload.jdt168.com/wzj/", "p": "img_20.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": "//upload.jdt168.com/wzj/", "p": "img_21.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": "//upload.jdt168.com/wzj/", "p": "img_22.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": "//upload.jdt168.com/wzj/", "p": "img_23.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": "//upload.jdt168.com/wzj/", "p": "img_24.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": "//upload.jdt168.com/wzj/", "p": "img_25.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": "//upload.jdt168.com/wzj/", "p": "img_26.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": "//upload.jdt168.com/wzj/", "p": "img_27.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": "//upload.jdt168.com/wzj/", "p": "img_28.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": "//upload.jdt168.com/wzj/", "p": "img_29.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": "//upload.jdt168.com/wzj/", "p": "img_30.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": []