XinLingKeJi/sway-ball
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Huakk
2024-07-15 01:30:38 +08:00
parent 095df3ac48
commit f0bcdb6963
9 changed files with 2577 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -61,6 +61,7 @@
"@tarojs/shared": "3.6.34",
"@tarojs/taro": "3.6.34",
"alova": "^2.21.3",
"lottie-web": "^5.12.2",
"tcplayer.js": "^5.1.0",
"vue": "^3.0.0",
"xgplayer": "^3.0.18",

8
pnpm-lock.yaml generated
View File

@@ -68,6 +68,9 @@ importers:
alova:
specifier: ^2.21.3
version: 2.21.3
lottie-web:
specifier: ^5.12.2
version: 5.12.2
tcplayer.js:
specifier: ^5.1.0
version: 5.1.0
@@ -5112,6 +5115,9 @@ packages:
resolution: {integrity: sha512-hP3I3kCrDIMuRwAwHltphhDM1r8i55H33GgqjXbrisuJhF4kRhW1dNuxsRklp4bXl8DSdLaNLuiL4A/LWRfxvg==}
engines: {node: '>= 0.6.0'}
lottie-web@5.12.2:
resolution: {integrity: sha512-uvhvYPC8kGPjXT3MyKMrL3JitEAmDMp30lVkuq/590Mw9ok6pWcFCwXJveo0t5uqYw1UREQHofD+jVpdjBv8wg==}
lower-case@1.1.4:
resolution: {integrity: sha512-2Fgx1Ycm599x+WGpIYwJOvsjmXFzTSc34IwDWALRA/8AopUKAVPwfJ+h5+f85BCp0PWmmJcWzEpxOpoXycMpdA==}
@@ -13668,6 +13674,8 @@ snapshots:
loglevel@1.9.1: {}
lottie-web@5.12.2: {}
lower-case@1.1.4: {}
lower-case@2.0.2:

1
src/api/index.js
View File

@@ -8,3 +8,4 @@ export const GetBetRecord = async (uid) =>
await alovaInst.Get(`/dice/userShakeRecord?uid=${uid}`);
export const GetLotteryRecord = async (uid) =>
await alovaInst.Get(`/dice/draw?uid=${uid}`);
export const GetPeriod = async () => await alovaInst.Get(`/dice/periods`);

28
src/pages/bet_record/index.vue
View File

@@ -1,12 +1,16 @@
<template>
<view>
<view class="p-[30px]">
<view class="h-[155px] line" v-for="(item, index) in data" :key="index">
<view
class="pt-[10px] pb-[10px] line"
v-for="(item, index) in data"
:key="index"
>
<view class="flex justify-between text-[#959BB1] text-[28px]">
<view>{{ item.qs }}</view>
<view>{{ item.t }}</view>
</view>
<view class="flex mt-[20px] justify-between items-center">
<view class="flex justify-between items-center">
<view class="flex justify-between items-center">
<view
class="m-[5px] rounded-full w-[44px] h-[44px] text-[28px] text-center leading-[44px]"
@@ -32,6 +36,24 @@
>- {{ item.j }} 豆子</view
>
</view>
<view class="flex items-center justify-between">
<view class="text-[28px] flex items-center">
<view class="text-[#959BB1]">中奖状态：</view>
<view class="text-[red]" v-if="item.state === 1">已中奖</view>
<view v-else class="text-[#959BB1]">未中奖</view>
</view>
<view v-if="item.state === 1" class="text-[28px] flex">
<view class="text-[#959BB1]">得</view>
<view class="text-[red]">{{ item.draw_num || 1000 }}</view>
<view class="text-[#959BB1]">积分</view>
</view>
</view>
<view v-if="item.state === 1" class="flex items-center justify-between">
<view class="text-[28px] flex items-center">
<view class="text-[#959BB1]">中奖数字：</view>
<view class="text-[#959BB1]">{{ item.periods_num }}</view>
</view>
</view>
</view>
</view>
</view>
@@ -89,7 +111,7 @@ const getList = async () => {
hm: [item.Name],
t: item.DrawTime,
j: item.Number,
}))
}));
};
</script>

45
src/pages/index/index.scss
View File

@@ -30,9 +30,52 @@
}
.popover .nut-popover-content {
width: 1000px;
width: 600px;
height: 700px;
font-size: 30px;
overflow: auto;
border-radius: 0px;
}
#lottie {
position: fixed;
inset: 0;
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 0.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: 45px;
font-weight: bold;
}
}
}

137
src/pages/index/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<view class="relative">
<!-- 直播区域 -->
<view id="Player" class="w-full h-[350px]"></view>
<view id="Player" class="w-full h-[420px]"></view>
<!-- <view id="J_prismPlayer"></view> -->
<!-- <view class="player" id="mse"></view> -->
<!-- 头部 -->
@@ -32,7 +32,7 @@
</template>
</nut-popover>
</view>
<nut-popover
<!-- <nut-popover
v-model:visible="showOpt"
:list="selectorOpt"
location="bottom"
@@ -48,14 +48,21 @@
<view class="dot"></view>
</view>
</template>
</nut-popover>
</nut-popover> -->
<navigator
:url="`/pages/bet_record/index?uid=${uid}`"
open-type="navigate"
hover-class="none"
class="flex items-center"
>
<view>投注记录</view>
<right theme="filled" size="25" fill="#ffffff" />
</navigator>
</view>
<!-- 开奖 -->
<view class="flex justify-between items-center p-[20px]">
<view class="text-center relative aft">
<view class="text-[28px] text-[#333333]"
>距{{ Number(data[0]?.qs) + 1 }}期截止时间</view
>
<view class="text-[28px] text-[#333333]">距{{ pStr }}期截止时间</view>
<view class="text-[red] text-[40px]">{{ tStr }}</view>
</view>
<view class="flex flex-col items-center popover">
@@ -106,11 +113,11 @@
<!-- 投注 -->
<!-- <scroll-view scroll-y class="h-[800px]"> -->
<template v-if="formData.betType !== 2">
<view class="grid gap-1 grid-cols-3 place-items-center p-[20px]">
<view class="grid gap-1 grid-cols-4 place-items-center p-[20px]">
<view
v-for="(item, index) in betList"
:key="index"
class="shadow-md border border-[#E6E6E6] rounded-[10px] w-[200px] mb-[20px] h-[200px] max-[200px] bg-[red] text-center flex justify-center items-center"
class="shadow-md border border-[#E6E6E6] rounded-[10px] w-[150px] mb-[20px] h-[150px] max-[150px] bg-[red] text-center flex justify-center items-center"
:class="
formData.betIndexs.includes(item.value)
? 'bg-[#EB1313]'
@@ -130,13 +137,13 @@
]"
>{{ item.odds }}</view
>
<viwe v-if="item.betVal > 0">{{ item.betVal }}</viwe></view
>
<!-- <viwe v-if="item.betVal > 0">{{ item.betVal }}</viwe> -->
</view>
</view>
</view>
</template>
<template v-else>
<view class="grid gap-3 grid-cols-6 place-items-center p-[20px]">
<view class="grid gap-5 grid-cols-6 place-items-center p-[20px]">
<view
v-for="(item, index) in betList"
:key="index"
@@ -164,6 +171,9 @@
</view>
</template>
<!-- </scroll-view> -->
<view class="h-[400px]"></view>
<!-- 操作栏 -->
<view class="fixed bottom-0 w-full">
<!-- 投注信息 -->
<view
v-if="formData.betIndexs.length > 0"
@@ -176,7 +186,6 @@
>
<view> 单注最多可赢 <text class="text-[#EB1313]">100</text> 积分 </view>
</view>
<!-- 操作栏 -->
<view
class="bg-white p-[30px] w-full text-[28px] flex justify-between items-center"
>
@@ -204,30 +213,32 @@
</view>
</view>
<!-- 确认投注 -->
<!-- <button
hover-class="none"
:disabled="!formData.value"
class="bg-[#EB1313] text-white w-full h-[130px] text-center leading-[130px] rounded-[0px]"
>
一键投注
</button> -->
<nut-button
style="height: 70px; font-size: 23px"
style="height: 70px; font-size: 36px"
shape="square"
block
type="primary"
@click="submit"
>一键投注</nut-button
>
<!-- <button @click="lottieFn(2, 1000)">text</button> -->
</view>
<view id="lottie" v-show="isLottie"></view>
</view>
</template>
<script setup>
import { ref, onMounted, nextTick, h, computed, watch } from "vue";
import Taro from "@tarojs/taro";
import { Down, PlusCross } from "@icon-park/vue-next";
import { Down, PlusCross, Right } from "@icon-park/vue-next";
import TCPlayer from "tcplayer.js";
import { GetBetOptList, GetUserInfo, GetLotteryRecord } from "../../api";
import Lottie from "lottie-web";
import {
GetBetOptList,
GetUserInfo,
GetLotteryRecord,
GetPeriod,
} from "../../api";
import "tcplayer.js/dist/tcplayer.min.css";
// import Srs from "../../utils/srs.sdk";
import Player from "xgplayer";
@@ -235,6 +246,8 @@ import FlvPlugin from "xgplayer-flv";
// import webRtcPlugin from "../../utils/webRtcPlugin";
import "xgplayer/dist/index.min.css";
import "./index.scss";
import wzj from "../../static/wzj.json";
import zj from "../../static/zj.json";
onMounted(() => {});
@@ -242,6 +255,8 @@ const player = ref(null);
const showTop = ref(false);
const aliPlayer = ref(null);
// 动画相关
const isLottie = ref(false); // 是否显示动画
Taro.useLoad((options) => {
uid.value = options.uid;
@@ -252,6 +267,8 @@ const ws = ref(null);
const tStr = ref("···");
const pStr = ref("");
const initWs = (options) => {
ws.value = new WebSocket(
`wss://${process.env.TARO_APP_WS}/dice/home?uid=${options.uid}&game_id=${options.game_id}`
@@ -282,6 +299,12 @@ const initWs = (options) => {
}
tStr.value = `${res.data}秒`;
break;
case 778:
lottieFn(1, res.data);
break;
case 779:
lottieFn(2);
break;
}
};
@@ -293,10 +316,11 @@ const initWs = (options) => {
Taro.useDidShow(() => {
loadTplayer();
// loadAliplayer();
initPlayer();
// initPlayer();
getUserInfo();
getBetList();
getRecord();
getNum();
});
const uid = ref("");
@@ -320,14 +344,17 @@ const getRecord = async () => {
{},
{ num: item.G, color: "#FF0204" },
],
tt: "",
tw: "",
tm: "",
ds: "",
tt: item.Name,
t: item.DrawTime,
}));
numList.value = data.value[0].hm;
};
const getNum = async () => {
const res = await GetPeriod();
pStr.value = res.periods;
};
const getUserInfo = async () => {
const res = await GetUserInfo(uid.value);
user.value = res.data;
@@ -425,7 +452,7 @@ const loadTplayer = () => {
"https://license.vod2.myqcloud.com/license/v2/1327927250_1/v_cube.license", // license 地址，参考准备工作部分，在视立方控制台申请 license 后可获得 licenseUrl
});
player.value.muted(false);
player.value.muted(true);
};
const initPlayer = () => {
@@ -584,29 +611,15 @@ const columns = ref([
},
},
{
title: "特头",
title: "特头-特尾-特码-单双",
key: "tt",
align: "center",
stylehead: "color: #959BB1",
stylecolumn: "color: #959BB1",
},
{
title: "特尾",
key: "tw",
align: "center",
stylehead: "color: #959BB1",
stylecolumn: "color: #959BB1",
},
{
title: "特码",
key: "tm",
align: "center",
stylehead: "color: #959BB1",
stylecolumn: "color: #959BB1",
},
{
title: "单双",
key: "ds",
title: "开奖时间",
key: "t",
align: "center",
stylehead: "color: #959BB1",
stylecolumn: "color: #959BB1",
@@ -1372,6 +1385,40 @@ const submit = async () => {
);
clearbet();
};
const lottieFn = (type, num = 0) => {
console.log(type, num);
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();
});
};
</script>
<style lang="scss"></style>

BIN
src/static/img_0.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

1223
src/static/wzj.json Normal file
View File

File diff suppressed because it is too large Load Diff

1144
src/static/zj.json Normal file
View File

File diff suppressed because it is too large Load Diff