503 lines
12 KiB
Vue
503 lines
12 KiB
Vue
<script setup>
|
|
import { onBeforeUnmount, onMounted, ref } from "vue";
|
|
import Taro from "@tarojs/taro";
|
|
import Lottie from "lottie-web";
|
|
import HPopup from "../../../components/Popup.vue";
|
|
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.png";
|
|
import kh from "../../../static/kh.png";
|
|
import ks from "../../../static/ks.png";
|
|
import wu from "../../../static/wu.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();
|
|
});
|
|
|
|
const innerAudioContext = Taro.createInnerAudioContext();
|
|
|
|
const startMusic = (path, loop = false) => {
|
|
// const innerAudioContext = Taro.createInnerAudioContext()
|
|
innerAudioContext.autoplay = true;
|
|
innerAudioContext.src = path;
|
|
innerAudioContext.loop = loop;
|
|
innerAudioContext.onPlay(() => {
|
|
console.log("开始播放");
|
|
});
|
|
innerAudioContext.onError(() => {
|
|
console.log("播放失败");
|
|
});
|
|
};
|
|
|
|
const user_info = ref({
|
|
nickName: "游客",
|
|
avatarUrl: "",
|
|
pulse: 0,
|
|
integral: 0,
|
|
});
|
|
|
|
const bet_options = ref([]);
|
|
|
|
const newKjNum = ref(1);
|
|
|
|
const list = ref([]);
|
|
|
|
const kjData = ref({});
|
|
|
|
const bet_index = ref(null);
|
|
|
|
const timeStr = ref("");
|
|
|
|
const getUserInfo = async () => {
|
|
Taro.request({
|
|
url: `${
|
|
process.env.TARO_APP_AOSHI_API
|
|
}/australia/user/info?uid=${Taro.getStorageSync("uid")}`,
|
|
method: "GET",
|
|
success: ({ data: res }) => {
|
|
user_info.value = res.data.data || {};
|
|
},
|
|
});
|
|
};
|
|
|
|
const getList = () => {
|
|
Taro.request({
|
|
url: `${process.env.TARO_APP_AOSHI_API}/australia/history/list`,
|
|
method: "GET",
|
|
success: ({ data: res }) => {
|
|
list.value = res.data.data.data || [];
|
|
newKjNum.value = list.value[0]?.preDrawIssue + 1;
|
|
},
|
|
});
|
|
};
|
|
|
|
const handelBetClick = (index) => {
|
|
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: 1,
|
|
url: dan,
|
|
name: "单",
|
|
isActive: false,
|
|
activeUrl: kd,
|
|
},
|
|
{
|
|
id: 2,
|
|
name: "双",
|
|
url: shuang,
|
|
isActive: false,
|
|
activeUrl: ks,
|
|
},
|
|
]);
|
|
|
|
const getBetList = () => {
|
|
Taro.request({
|
|
url: `${process.env.TARO_APP_AOSHI_API}/australia/list`,
|
|
method: "GET",
|
|
success: ({ data: res }) => {
|
|
bet_options.value = res.data.data || [];
|
|
kjData.value = res.data;
|
|
|
|
timeId.value = setInterval(() => {
|
|
countdownFn();
|
|
}, 1000);
|
|
},
|
|
});
|
|
};
|
|
|
|
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();
|
|
|
|
// startRun('单')
|
|
});
|
|
|
|
const timeId = ref();
|
|
|
|
const time_i = ref();
|
|
|
|
const countdownFn = () => {
|
|
const currentTimestamp = dayjs().valueOf();
|
|
const timeLeft =
|
|
dayjs(kjData.value.drawTime).unix() * 1000 - currentTimestamp;
|
|
timeStr.value = dayjs(timeLeft).format("mm分ss秒");
|
|
|
|
const m = Number(dayjs(timeLeft).format("mm"));
|
|
const s = Number(dayjs(timeLeft).format("ss"));
|
|
|
|
if (m === 0 && s === 0) {
|
|
clearInterval(timeId.value);
|
|
clearInterval(time_i.value);
|
|
getList();
|
|
setTimeout(() => {
|
|
startRun(list.value[0].name);
|
|
}, 1500);
|
|
}
|
|
};
|
|
|
|
const startRun = (name) => {
|
|
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;
|
|
getBetJl();
|
|
setTimeout(() => {
|
|
bgUrl.value = wu;
|
|
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);
|
|
|
|
const betObj = bet_options.value[bet_index.value];
|
|
|
|
if (arr.length === 0)
|
|
return Taro.showToast({
|
|
title: "请选择投注项",
|
|
icon: "none",
|
|
});
|
|
Taro.request({
|
|
url: `${process.env.TARO_APP_AOSHI_API}/australia/user/dice`,
|
|
method: "POST",
|
|
data: {
|
|
name: arr[0].name,
|
|
uid: Taro.getStorageSync("uid"),
|
|
aid: String(betObj.ID),
|
|
game_id: String(Taro.getStorageSync("id")),
|
|
},
|
|
success: ({ data: res }) => {
|
|
Taro.showToast({
|
|
title: res.msg,
|
|
icon: "none",
|
|
});
|
|
},
|
|
});
|
|
setTimeout(() => {
|
|
getUserInfo();
|
|
}, 500);
|
|
};
|
|
|
|
// 前往开奖和投注记录
|
|
const toPage = (type) => {
|
|
Taro.navigateTo({
|
|
url: `/pages/aoshi/records/index?type=${type}`,
|
|
});
|
|
};
|
|
|
|
// 动画相关
|
|
const isLottie = ref(false); // 是否显示动画
|
|
|
|
const lottieFn = (type, num = 0) => {
|
|
isLottie.value = true;
|
|
|
|
const lottieEle = document.getElementById("lottie");
|
|
|
|
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_AOSHI_API
|
|
}/australia/user/record?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) {
|
|
// console.log('1')
|
|
// 是否下注
|
|
if (newKjNum.value - data.Periods === 0) {
|
|
// console.log('2')
|
|
// 是否中奖
|
|
if (data.DrawNum > 0) {
|
|
lottieFn(1, data.DrawNum);
|
|
// console.log('3')
|
|
} else {
|
|
lottieFn(2);
|
|
// console.log('4')
|
|
}
|
|
}
|
|
}
|
|
},
|
|
});
|
|
getBetList();
|
|
getList();
|
|
};
|
|
|
|
Taro.useDidHide(() => {
|
|
clearInterval(timeId.value);
|
|
clearInterval(time_i.value);
|
|
innerAudioContext.stop();
|
|
});
|
|
|
|
onBeforeUnmount(() => {
|
|
clearInterval(timeId.value);
|
|
clearInterval(time_i.value);
|
|
innerAudioContext.stop();
|
|
});
|
|
|
|
const showPopup = ref(false);
|
|
const game_info = ref({});
|
|
|
|
Taro.useDidShow(() => {
|
|
// game_info.value = Taro.getStorageSync('gameItem')
|
|
});
|
|
</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" @click="showPopup = true"></view>
|
|
</view>
|
|
<view class="kj-box">
|
|
<text class="title">第{{ list[0]?.preDrawIssue || 0 }}期已开奖</text>
|
|
<view class="num-box">
|
|
<view
|
|
class="item"
|
|
v-for="(item, index) in list[0]?.preDrawCode?.split(',')"
|
|
:key="index"
|
|
>
|
|
{{ Number(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.max }}</view>
|
|
</view>
|
|
</view>
|
|
<view id="lottie" v-show="isLottie"></view>
|
|
<!-- 弹窗 -->
|
|
<!-- <HPopup :show="showPopup" @isShow="showPopup = false">
|
|
<view class="popup-content">
|
|
<rich-text :nodes="game_info.introduction"></rich-text>
|
|
</view>
|
|
</HPopup> -->
|
|
</view>
|
|
</template>
|