jdt-game/src/pages/turntable/index/index.vue

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