init
This commit is contained in:
678
src/pages/index/index.vue
Normal file
678
src/pages/index/index.vue
Normal file
@@ -0,0 +1,678 @@
|
||||
<template>
|
||||
<view class="index">
|
||||
<!-- 公告 -->
|
||||
<view class="subColor tips"></view>
|
||||
<scroll-view style="height: 100vh" scroll-y>
|
||||
<!-- 用户信息 -->
|
||||
<view class="subColor userInfo">
|
||||
<view class="left">
|
||||
<image :src="userInfo.avatarUrl"></image>
|
||||
<view class="userText">
|
||||
<view class="userName">{{ userInfo.nickName || "用户" }}</view>
|
||||
<view class="userScore">积分: {{ userInfo.integral || 0 }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="right">
|
||||
<view class="icon"></view>
|
||||
<view class="bean">{{ userInfo.pulse || 0 }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 游戏信息 -->
|
||||
<view class="subColor gameInfo">
|
||||
<view class="left">
|
||||
<image src="../../static/tx.png"></image>
|
||||
<view class="game_box">
|
||||
<view class="gameName">{{ kJData[0]?.Periods || 0 }}期开奖</view>
|
||||
<view class="lottery">
|
||||
<text class="text">{{ kJData[0]?.Start || 0 }}</text>
|
||||
<text class="text">{{ kJData[0]?.End || 0 }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="center">
|
||||
<view>剩余{{ time }}s开奖</view>
|
||||
</view>
|
||||
<view class="right">
|
||||
<view class="btn" @click="utils.vibrateShort(() => toPage(1))"
|
||||
>开奖记录</view
|
||||
>
|
||||
<view class="btn mt-15" @click="utils.vibrateShort(() => toPage(2))">
|
||||
投注记录
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 选项区 -->
|
||||
<view class="opt">
|
||||
<view
|
||||
class="subColor item"
|
||||
:class="{ flicker: item.flicker }"
|
||||
v-for="item in odds"
|
||||
:key="item.id"
|
||||
@click.stop="utils.vibrateShort(() => addNum(item))"
|
||||
>
|
||||
<view class="name">{{ item.name }}</view>
|
||||
<view class="odd">赢{{ item.odds }}倍</view>
|
||||
<view class="mask" v-if="item.status">
|
||||
<view class="text">{{ item.numStr }}</view>
|
||||
</view>
|
||||
<view
|
||||
class="close"
|
||||
v-if="item.status"
|
||||
@click.stop="utils.vibrateShort(() => clearOneBet(item))"
|
||||
>
|
||||
x
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="opt1" v-if="odds1.length > 0">
|
||||
<view class="optt">
|
||||
<view
|
||||
class="subColor item"
|
||||
:class="{ flicker: odds1[0].flicker }"
|
||||
@click.stop="utils.vibrateShort(() => addNum(odds1[0]))"
|
||||
>
|
||||
<view class="name">{{ odds1[0].name }}</view>
|
||||
<view class="odd">赢{{ odds1[0].odds }}倍</view>
|
||||
<view class="mask" v-if="odds1[0].status">
|
||||
<view class="text">{{ odds1[0].numStr }}</view>
|
||||
</view>
|
||||
<view
|
||||
class="close"
|
||||
v-if="odds1[0].status"
|
||||
@click.stop="utils.vibrateShort(() => clearOneBet(odds1[0]))"
|
||||
>
|
||||
x
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="subColor item"
|
||||
:class="{ flicker: odds1[1].flicker }"
|
||||
@click.stop="utils.vibrateShort(() => addNum(odds1[1]))"
|
||||
>
|
||||
<view class="name">{{ odds1[1].name }}</view>
|
||||
<view class="odd">赢{{ odds1[1].odds }}倍</view>
|
||||
<view class="mask" v-if="odds1[1].status">
|
||||
<view class="text">{{ odds1[1].numStr }}</view>
|
||||
</view>
|
||||
<view
|
||||
class="close"
|
||||
v-if="odds1[1].status"
|
||||
@click.stop="utils.vibrateShort(() => clearOneBet(odds1[1]))"
|
||||
>
|
||||
x
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="base">
|
||||
<view class="qz">
|
||||
<view :class="{ activeQz: isExpanding }">
|
||||
{{ qzTitle }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="expanding-div" v-if="isShow">
|
||||
{{ nowKJInfo.Start }} - {{ nowKJInfo.End }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="optt">
|
||||
<view
|
||||
class="subColor item"
|
||||
style="height: 100%"
|
||||
:class="{ flicker: odds1[2].flicker }"
|
||||
@click.stop="utils.vibrateShort(() => addNum(odds1[2]))"
|
||||
>
|
||||
<view class="name">{{ odds1[2].name }}</view>
|
||||
<view class="odd">赢{{ odds1[2].odds }}倍</view>
|
||||
<view class="mask" v-if="odds1[2].status">
|
||||
<!-- <view class="text">{{ odds1[2].markNum }}</view> -->
|
||||
<view class="text">{{ odds1[2].numStr }}</view>
|
||||
</view>
|
||||
<view
|
||||
class="close"
|
||||
v-if="odds1[2].status"
|
||||
@click.stop="utils.vibrateShort(() => clearOneBet(odds1[2]))"
|
||||
>
|
||||
x
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="opt">
|
||||
<view
|
||||
class="subColor item item1"
|
||||
:class="{ flicker: item.flicker }"
|
||||
v-for="item in odds2"
|
||||
:key="item.id"
|
||||
@click.stop="utils.vibrateShort(() => addNum(item))"
|
||||
>
|
||||
<view class="name">{{ item.name }}</view>
|
||||
<view class="odd">赢{{ item.odds }}倍</view>
|
||||
<view class="mask" v-if="item.status">
|
||||
<!-- <view class="text">{{ item.markNum }}</view> -->
|
||||
<view class="text">{{ item.numStr }}</view>
|
||||
</view>
|
||||
<view
|
||||
class="close"
|
||||
v-if="item.status"
|
||||
@click.stop="utils.vibrateShort(() => clearOneBet(item))"
|
||||
>
|
||||
x
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<scroll-view style="height: 25%" scroll-y>
|
||||
<view
|
||||
class="card subColor"
|
||||
v-for="(item, index) in kjList"
|
||||
:key="index"
|
||||
>
|
||||
<view>
|
||||
<view>
|
||||
第{{ item.Periods }}期开奖:
|
||||
<text style="color: red">{{ item.Start }} , {{ item.End }}</text>
|
||||
<text
|
||||
v-for="(num, i) in item.Name"
|
||||
:key="i"
|
||||
:style="{
|
||||
color: numColor(num),
|
||||
}"
|
||||
>
|
||||
, {{ num }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</scroll-view>
|
||||
<!-- 底部操作栏 -->
|
||||
<view class="subColor bottomBar">
|
||||
<view class="btn1" @click="utils.vibrateShort(() => clearBet(true))"
|
||||
>重置</view
|
||||
>
|
||||
<view class="btn2" @click="utils.vibrateShort(() => changeOdd())"
|
||||
>X{{ oddVal }}</view
|
||||
>
|
||||
<view class="btn3" @click="utils.vibrateShort(() => verifyBet())"
|
||||
>投注</view
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onBeforeUnmount } from "vue";
|
||||
import Taro from "@tarojs/taro";
|
||||
import { app } from "@/config";
|
||||
import { getGameOption, getKaiJiangList, getJfDz } from "@/api";
|
||||
import utils from "@/utils";
|
||||
|
||||
const ws = ref(null);
|
||||
|
||||
// 是否显示开奖动画
|
||||
const isShow = ref(false);
|
||||
|
||||
// 是否开启文字放大动画
|
||||
const isExpanding = ref(false);
|
||||
|
||||
const odds = ref([]);
|
||||
|
||||
const odds1 = ref([]);
|
||||
|
||||
const odds2 = ref([]);
|
||||
|
||||
const qzTitle = ref("请投注");
|
||||
|
||||
const time = ref(0);
|
||||
|
||||
const nowKJInfo = ref({});
|
||||
|
||||
const userInfo = ref({});
|
||||
|
||||
const zjObj = ref([]);
|
||||
|
||||
const iMsgNum = ref(0);
|
||||
|
||||
const numColor = (num) => {
|
||||
switch (num) {
|
||||
case "大":
|
||||
return "red";
|
||||
case "小":
|
||||
return "green";
|
||||
// case '单':
|
||||
// return 'orange'
|
||||
// case '双':
|
||||
// return 'blue'
|
||||
case "和":
|
||||
return "purple";
|
||||
default:
|
||||
return "black";
|
||||
}
|
||||
};
|
||||
|
||||
Taro.useDidShow(() => {
|
||||
startMusic(
|
||||
"https://files.wanzhuanyongcheng.com/file/music/yaotouzi/bg.MP3",
|
||||
true
|
||||
);
|
||||
initWs();
|
||||
initData();
|
||||
});
|
||||
|
||||
Taro.useDidHide(() => {
|
||||
ws.value?.close();
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
ws.value?.close();
|
||||
});
|
||||
|
||||
const initData = () => {
|
||||
qzTitle.value = "请投注";
|
||||
getOddList();
|
||||
getKJList();
|
||||
getUserInfo();
|
||||
};
|
||||
|
||||
const arr = ["2+2", "3+3", "4+4", "5+5", "6+6"];
|
||||
// const arr1 = ["大", "小", "单", "双"];
|
||||
// const arr2 = ["和", "3", "4", "5", "6", "8", "9", "10", "11"];
|
||||
const arr1 = ["大", "小", "和"];
|
||||
const arr2 = ["3", "4", "5", "6", "8", "9", "10", "11"];
|
||||
|
||||
// 投注列表
|
||||
const getOddList = async () => {
|
||||
const res = await getGameOption();
|
||||
odds.value = [];
|
||||
odds1.value = [];
|
||||
odds2.value = [];
|
||||
res.data.data.forEach((item) => {
|
||||
const { name, ID, odds: odd, max } = item;
|
||||
const newItem = {
|
||||
id: ID,
|
||||
name: name,
|
||||
odds: odd,
|
||||
max: max,
|
||||
markNum: 0,
|
||||
numStr: 0,
|
||||
status: false,
|
||||
flicker: false,
|
||||
};
|
||||
if (Taro.getStorageSync("odds")) {
|
||||
odds.value = Taro.getStorageSync("odds");
|
||||
odds1.value = Taro.getStorageSync("odds1");
|
||||
odds2.value = Taro.getStorageSync("odds2");
|
||||
} else {
|
||||
if (arr1.includes(name)) {
|
||||
odds1.value.push(newItem);
|
||||
} else if (arr.includes(name)) {
|
||||
odds.value.push(newItem);
|
||||
} else if (arr2.includes(name)) {
|
||||
odds2.value.push(newItem);
|
||||
}
|
||||
}
|
||||
});
|
||||
// const el = odds2.value.splice(0, 1)[0];
|
||||
// odds2.value.splice(4, 0, el);
|
||||
// console.log(odds1.value)
|
||||
};
|
||||
|
||||
// 获取个人信息
|
||||
const getUserInfo = async () => {
|
||||
const res = await getJfDz(Taro.getStorageSync("uid"));
|
||||
userInfo.value = res.data.data;
|
||||
};
|
||||
|
||||
const kJData = ref([]);
|
||||
const kjList = ref([]);
|
||||
|
||||
// 开奖列表
|
||||
const getKJList = async () => {
|
||||
const res = await getKaiJiangList();
|
||||
kJData.value = res.data.data;
|
||||
kjList.value = res.data.data.map((item) => {
|
||||
return {
|
||||
...item,
|
||||
Name: item.Name.split("-"),
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
// 初始化游戏
|
||||
const initWs = () => {
|
||||
ws.value = new WebSocket(`${app.API_WS()}`);
|
||||
ws.value.onopen = async () => {
|
||||
Taro.showToast({
|
||||
title: "连接游戏服务器成功",
|
||||
mask: true,
|
||||
icon: "none",
|
||||
});
|
||||
};
|
||||
|
||||
ws.value.onmessage = async (e) => {
|
||||
const res = JSON.parse(e.data);
|
||||
switch (res.code) {
|
||||
case 200:
|
||||
let num = Number(res.data);
|
||||
time.value = num;
|
||||
if (num === 5) {
|
||||
openDraw();
|
||||
}
|
||||
break;
|
||||
case 401:
|
||||
Taro.showToast({
|
||||
title: "未登录",
|
||||
mask: true,
|
||||
icon: "none",
|
||||
});
|
||||
break;
|
||||
case 403:
|
||||
Taro.showToast({
|
||||
title: "未能操作",
|
||||
mask: true,
|
||||
icon: "none",
|
||||
});
|
||||
break;
|
||||
case 400:
|
||||
Taro.showToast({
|
||||
title: "豆子不足",
|
||||
mask: true,
|
||||
icon: "none",
|
||||
});
|
||||
break;
|
||||
case 5:
|
||||
Taro.showToast({
|
||||
title: "投注成功",
|
||||
mask: true,
|
||||
icon: "none",
|
||||
});
|
||||
break;
|
||||
case 100:
|
||||
Taro.showToast({
|
||||
title: res.msg,
|
||||
icon: "none",
|
||||
});
|
||||
break;
|
||||
case 101:
|
||||
Taro.showToast({
|
||||
title: res.msg,
|
||||
icon: "none",
|
||||
});
|
||||
break;
|
||||
case 301:
|
||||
Taro.showToast({
|
||||
title: res.msg,
|
||||
icon: "none",
|
||||
});
|
||||
setTimeout(() => {
|
||||
Taro.navigateBack({
|
||||
delta: 1,
|
||||
});
|
||||
}, 2000);
|
||||
default:
|
||||
iMsgNum.value++;
|
||||
zjObj.value = res;
|
||||
break;
|
||||
}
|
||||
};
|
||||
ws.value.onerror = () => {
|
||||
console.log("连接游戏服务器失败");
|
||||
Taro.showToast({
|
||||
title: "连接游戏服务器失败",
|
||||
mask: true,
|
||||
icon: "none",
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
const isKj = ref(false);
|
||||
// 开奖倒计时
|
||||
const openDraw = () => {
|
||||
isExpanding.value = true;
|
||||
isKj.value = true;
|
||||
startMusic(
|
||||
"https://files.wanzhuanyongcheng.com/file/music/yaotouzi/djs.MP3",
|
||||
false
|
||||
);
|
||||
for (let i = 5; i > 0; i--) {
|
||||
setTimeout(() => {
|
||||
// i <= 3 && (fontColor.value = "red");
|
||||
qzTitle.value = i.toString();
|
||||
}, 1000 * (5 - i));
|
||||
}
|
||||
setTimeout(async () => {
|
||||
isExpanding.value = false;
|
||||
const res = await getKaiJiangList();
|
||||
nowKJInfo.value = res.data.data[0];
|
||||
qzTitle.value = `${nowKJInfo.value?.Periods || 0}期开奖`;
|
||||
playAminExpand();
|
||||
setTimeout(() => {
|
||||
startFlicker();
|
||||
}, 6000);
|
||||
isKj.value = false;
|
||||
}, 5000);
|
||||
};
|
||||
|
||||
const oddVal = ref(100);
|
||||
const changeOdd = () => {
|
||||
switch (oddVal.value) {
|
||||
case 100:
|
||||
oddVal.value = 1000;
|
||||
break;
|
||||
// case 10:
|
||||
// oddVal.value = 100
|
||||
// break
|
||||
case 1000:
|
||||
oddVal.value = 100;
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const clearBet = (val) => {
|
||||
clearItems(odds.value, val);
|
||||
clearItems(odds1.value, val);
|
||||
clearItems(odds2.value, val);
|
||||
savsData();
|
||||
};
|
||||
|
||||
const clearItems = (items, isClear = false) => {
|
||||
items.forEach((item) => {
|
||||
item.markNum = 0;
|
||||
if (isClear) {
|
||||
item.numStr = 0;
|
||||
item.status = false;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const addNum = (item) => {
|
||||
if (isKj.value)
|
||||
return Taro.showToast({
|
||||
title: "正在开奖，不能下注",
|
||||
icon: "none",
|
||||
});
|
||||
if (item.name === "单" || item.name === "双")
|
||||
return Taro.showToast({
|
||||
title: `${item.name}不能下注`,
|
||||
icon: "none",
|
||||
});
|
||||
item.status = true;
|
||||
item.markNum += oddVal.value;
|
||||
item.numStr += oddVal.value;
|
||||
if (item.markNum >= item.max && item.numStr >= item.max) {
|
||||
item.markNum = item.max;
|
||||
item.numStr = item.max;
|
||||
Taro.showToast({
|
||||
title: `单注不能超过${item.max}`,
|
||||
icon: "none",
|
||||
});
|
||||
}
|
||||
savsData();
|
||||
};
|
||||
|
||||
// 投注
|
||||
const verifyBet = () => {
|
||||
if (isKj.value)
|
||||
return Taro.showToast({
|
||||
title: "正在开奖，不能下注",
|
||||
icon: "none",
|
||||
});
|
||||
|
||||
let numCount = 0;
|
||||
|
||||
odds.value.forEach((item) => {
|
||||
if (item.markNum > 0) {
|
||||
numCount += item.markNum;
|
||||
}
|
||||
});
|
||||
|
||||
odds1.value.forEach((item) => {
|
||||
if (item.markNum > 0) {
|
||||
numCount += item.markNum;
|
||||
}
|
||||
});
|
||||
|
||||
odds2.value.forEach((item) => {
|
||||
if (item.markNum > 0) {
|
||||
numCount += item.markNum;
|
||||
}
|
||||
});
|
||||
|
||||
if (numCount === 0)
|
||||
return Taro.showToast({
|
||||
title: "请选择选项，再投注",
|
||||
icon: "none",
|
||||
});
|
||||
|
||||
if (numCount > userInfo.value?.pulse)
|
||||
return Taro.showToast({
|
||||
title: "投注豆子不足",
|
||||
icon: "none",
|
||||
});
|
||||
|
||||
const data = [];
|
||||
|
||||
odds.value.forEach((item) => {
|
||||
if (item.markNum > 0) {
|
||||
data.push({
|
||||
bid: item.id,
|
||||
number: item.markNum,
|
||||
name: item.name,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
odds1.value.forEach((item) => {
|
||||
if (item.markNum > 0) {
|
||||
data.push({
|
||||
bid: item.id,
|
||||
number: item.markNum,
|
||||
name: item.name,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
odds2.value.forEach((item) => {
|
||||
if (item.markNum > 0) {
|
||||
data.push({
|
||||
bid: item.id,
|
||||
number: item.markNum,
|
||||
name: item.name,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
ws.value?.send(
|
||||
JSON.stringify({
|
||||
type: 1,
|
||||
data: data,
|
||||
})
|
||||
);
|
||||
|
||||
setTimeout(() => {
|
||||
getUserInfo();
|
||||
}, 1000);
|
||||
|
||||
qzTitle.value = "已投注";
|
||||
clearBet(false);
|
||||
savsData();
|
||||
};
|
||||
|
||||
// 前往开奖和投注记录
|
||||
const toPage = (type) => {
|
||||
Taro.navigateTo({
|
||||
url: `/pages/records/index?type=${type}`,
|
||||
});
|
||||
};
|
||||
|
||||
// 播放展开动画
|
||||
const playAminExpand = () => {
|
||||
isShow.value = true;
|
||||
startMusic(
|
||||
"https://files.wanzhuanyongcheng.com/file/music/yaotouzi/kj.MP3",
|
||||
false
|
||||
);
|
||||
setTimeout(() => {
|
||||
isShow.value = false;
|
||||
initData();
|
||||
}, 10000);
|
||||
};
|
||||
|
||||
// 开始闪烁
|
||||
const startFlicker = () => {
|
||||
flickerItems(odds.value);
|
||||
flickerItems(odds1.value);
|
||||
flickerItems(odds2.value);
|
||||
zjObj.value = [];
|
||||
};
|
||||
|
||||
const flickerItems = (items) => {
|
||||
delData();
|
||||
items.forEach((item) => {
|
||||
zjObj.value.forEach((item2) => {
|
||||
if (item.name === item2.name) {
|
||||
item.flicker = true;
|
||||
setTimeout(() => {
|
||||
item.flicker = false;
|
||||
}, 3000);
|
||||
}
|
||||
});
|
||||
});
|
||||
startMusic(
|
||||
"https://files.wanzhuanyongcheng.com/file/music/yaotouzi/bg.MP3",
|
||||
true
|
||||
);
|
||||
};
|
||||
|
||||
const innerAudioContext = Taro.createInnerAudioContext();
|
||||
|
||||
const startMusic = (path, loop = false) => {
|
||||
// const innerAudioContext = Taro.createInnerAudioContext()
|
||||
innerAudioContext.autoplay = true;
|
||||
innerAudioContext.src = path;
|
||||
innerAudioContext.loop = loop;
|
||||
innerAudioContext.onPlay();
|
||||
innerAudioContext.onError();
|
||||
};
|
||||
|
||||
const clearOneBet = (item) => {
|
||||
item.markNum = 0;
|
||||
item.numStr = 0;
|
||||
item.status = false;
|
||||
savsData();
|
||||
};
|
||||
|
||||
const savsData = () => {
|
||||
Taro.setStorageSync("odds", odds.value);
|
||||
Taro.setStorageSync("odds1", odds1.value);
|
||||
Taro.setStorageSync("odds2", odds2.value);
|
||||
};
|
||||
|
||||
const delData = () => {
|
||||
Taro.removeStorageSync("odds");
|
||||
Taro.removeStorageSync("odds1");
|
||||
Taro.removeStorageSync("odds2");
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "./index.scss";
|
||||
</style>
|
||||
Reference in New Issue
Block a user