@@ -1,37 +1,56 @@
< template >
< view class = "relative absolute " >
< view class = "relative" >
<!-- 直播区域 -- >
< view id = "Player" class = "w-full h-[420px] relative" > < / view >
< view class = "danmaku-box" >
< vue-danmaku ref = "danmakuRef" class = "danmaku" v -model :danmus = "danmus" useSlot :speeds = "100" >
< vue-danmaku
ref = "danmakuRef"
class = "danmaku"
v -model :danmus = "danmus"
useSlot
:speeds = "100"
>
< template v -slot : dm = "{ danmu }" >
<!-- < span > { { index } } { { danmu . name } } : { { danmu . text } } < / span > -- >
< view class = "flex items-center text-box" >
< image class = "w-[45px] h-[45px] mr-[10px] rounded-full" :src = "danmu.User.avatarUrl" > < / image >
< text class = "text-[#fff] text-[28px]" > 恭喜 { { danmu . User . nickName } } 获得 { { danmu . DrawNum } } 积分 , 价值 { {
danmu . Number
} } < / text >
< image
class = "w-[45px] h-[45px] mr-[10px] rounded-full"
:src = "danmu.User.avatarUrl"
> < / image >
< text class = "text-[#fff] text-[28px]"
> 恭喜 { { danmu . User . nickName } } 获得 { { danmu . DrawNum } } 积分 , 价值 { {
danmu . Number
} } < / t e x t
>
< / view >
< / template >
< / vue-danmaku >
< view id = "Player" class = "w-full h-[420px]" > < / view >
< / view >
<!-- < view id = "J_prismPlayer" > < / view > -- >
<!-- < view class = "player" id = "mse" > < / view > -- >
<!-- 头部 -- >
< view class = "z-50 bg-[#EB1313] w-full h-[110px] p-[18px] text-[30px] flex text-white justify-between items-center" >
< view
class = "z-50 bg-[#EB1313] w-full h-[110px] p-[18px] text-[30px] flex text-white justify-between items-center"
>
< view > 积分 : { { user . integral } } < / view >
< view class = "flex items-center justify-center" >
< view class = "pr-[10px] text-[25px]" >
< view > 玩 < / view >
< view > 法 < / view >
< / view >
< nut-popover v -model :visible = "showSelector" :list = "selector" location = "bottom" @choose ="onChange" >
< nut-popover
v -model :visible = "showSelector"
:list = "selector"
location = "bottom"
@choose ="onChange"
>
< template # reference >
<!-- @ click . stop = "showSelector = !showSelector" -- >
< view @click.stop ="showSelector = !showSelector"
class = "w-[200px] h-[70px] pl-2 pr-2 border-2 rounded-md border-white flex items-center justify-center" >
< view
@click.stop ="showSelector = !showSelector"
class = "w-[200px] h-[70px] pl-2 pr-2 border-2 rounded-md border-white flex items-center justify-center"
>
< view > { { formData . selectorChecked } } < / view >
< down theme = "filled" size = "25" fill = "#fff" / >
< / view >
@@ -55,12 +74,20 @@
< / view >
< / template >
< / nut-popover > -- >
< navigator :url = "`/pages/bet_record/index?uid=${uid}`" open -type = " navigate " hover -class = " none "
class = "flex items-center" >
< 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 = "text-[25px] font-bold text-[red] text-center mt-[10px] mb-[10px]"
> 当前参与人数 : { { joinNum } } < / v i e w
>
<!-- 开奖 -- >
< view class = "flex justify-between items-center p-[20px]" >
< view class = "text-center relative aft" >
@@ -68,26 +95,46 @@
< view class = "text-[red] text-[40px]" > { { tStr } } < / view >
< / view >
< view class = "flex flex-col items-center popover" >
< nut-popover v -model :visible = "showTable" location = "bottom" @open ="openTable" >
< nut-popover
v -model :visible = "showTable"
location = "bottom"
@open ="openTable"
>
< template # reference >
< view class = "flex items-center" @click.stop ="showTable = !showTable" >
< view
class = "flex items-center"
@click.stop ="showTable = !showTable"
>
< text class = "text-[#333333] text-[28px]" > 近期开奖 < / text >
< down class = "mr-1" theme = "filled" size = "25" fill = "#333333" / >
< / view >
< / template >
< template # content >
< nut-table style = "width: 900px" :columns = "columns" :data = "data" striped :bordered = "true" > < / nut-table >
< nut-table
style = "width: 900px"
:columns = "columns"
:data = "data"
striped
:bordered = "true"
> < / nut-table >
< / template >
< / nut-popover >
< view class = "flex" >
< view class = "m-[5px] rounded-full w-[44px] h-[44px] text-white text-[28px] text-center leading-[44px]"
v-for = "(item, index) in numList" :key="index" >
< view
class = "m-[5px] rounded-full w-[44px] h-[44px] text-white text-[28px] text-center leading-[44px]"
v-for = "(item, index) in numList"
:key = "index"
>
< view v-if = "!item.num" class="m-[5px]" >
< plus -cross theme = "filled" size = "20" fill = "#333333" / >
< / view >
< view class = "rounded-full" : style = "{
backgroundColor: item.color,
}" > { { item . num } } < / view >
< view
class = "rounded-full"
: style = "{
backgroundColor: item.color,
}"
> { { item . num } } < / v i e w
>
< / view >
< / view >
< / view >
@@ -96,20 +143,30 @@
<!-- < scroll-view scroll -y class = "h-[800px]" > -- >
< template v-if = "formData.betType !== 2" >
< view class = "grid gap-1 grid-cols-4 place-items-center p-[20px]" >
< view v-for = "(item, index) in betList" :key="index"
< view
v-for = "(item, index) in betList"
:key = "index"
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]'
: 'bg-white '
" @click ="betSelect(item)" >
< view : class = "formData.betIndexs.includes(item.value) ? 'text-white' : ''" >
: class = "
formData.betIndexs.includes(item.value)
? 'bg-[#EB1313] '
: 'bg-white'
"
@click ="betSelect(item)"
>
< view
: class = "formData.betIndexs.includes(item.value) ? 'text-white' : ''"
>
< view > { { item . label } } < / view >
< view : class = "[
formData.betIndexs.includes(item.value)
? 'text-white'
: 'text-[#EB1313]',
'text-[30px ]',
]" > { { item . odds } } < / view >
< view
: class = "[
formData.betIndexs.includes(item.value)
? 'text-white'
: 'text-[#EB1313 ]',
'text-[30px]',
]"
> { { item . odds } } < / v i e w
>
<!-- < viwe v-if = "item.betVal > 0" > {{ item.betVal }} < / viwe > - - >
< / view >
< / view >
@@ -117,17 +174,24 @@
< / template >
< template v-else >
< view class = "grid gap-5 grid-cols-6 place-items-center p-[20px]" >
< view v-for = "(item, index) in betList" :key="index"
< view
v-for = "(item, index) in betList"
:key = "index"
class = "shadow-md border border-[#E6E6E6] rounded-full w-[80px] mb-[20px] h-[80px] max-[200px]: bg-[red] text-center leading-[80px]"
: class = "formData.betIndexs.includes(item.value)
? 'bg-[#EB1313]'
: 'bg-white '
" @click ="betSelect(item)" >
< view : style = "{
color: formData.betIndexs.includes(item.value)
? 'white'
: getTextColor(item.label),
}" >
: class = "
formData.betIndexs.includes(item.value)
? 'bg-[#EB1313] '
: 'bg-white'
"
@click ="betSelect(item)"
>
< view
: style = "{
color: formData.betIndexs.includes(item.value)
? 'white'
: getTextColor(item.label),
}"
>
< view > { { item . label } } < / view >
< view class = "text-[28px] text-[#EB1313] leading-[50px]" > { {
item . odds
@@ -142,9 +206,12 @@
<!-- 操作栏 -- >
< view class = "fixed bottom-0 w-full" >
<!-- 投注信息 -- >
< view v-if = "formData.betIndexs.length > 0"
class = "bg-[#F5F5F5] w-full text-[28px] p-[26px] flex justify-between items-center" >
< view > 共
< view
v-if = "formData.betIndexs.length > 0"
class = "bg-[#F5F5F5] w-full text-[28px] p-[26px] flex justify-between items-center"
>
< view
> 共
< text class = "text-[#EB1313]" > { { formData . betIndexs . length } } < / text > 注
共
< text class = "text-[#EB1313]" > { {
@@ -154,25 +221,41 @@
< / view >
<!-- < view > 单注最多可赢 < text class = "text-[#EB1313]" > 100 < / text > 积分 < / view > -- >
< / view >
< view class = "bg-white p-[30px] w-full text-[28px] flex justify-between items-center" >
< view @click ="clearbet "
class = "bg-[#FFE8E8] rounded-[10px] border border-[#FF0204] w-[100px] h-[60px] text-[#FF0204] text-center leading-[60px]" >
清空 < / view >
< view
class = "bg-white p-[30px] w-full text-[28px] flex justify-between items-center "
>
< view
@click ="clearbet"
class = "bg-[#FFE8E8] rounded-[10px] border border-[#FF0204] w-[100px] h-[60px] text-[#FF0204] text-center leading-[60px]"
>
清空 < / v i e w
>
< view >
< view > 可用豆子 : < text class = "text-[#EB1313]" > { { user . pulse } } < / text > 豆子
< view
> 可用豆子 : < text class = "text-[#EB1313]" > { { user . pulse } } < / text > 豆子
< / view >
<!-- @ input = "betIput" -- >
< view class = "flex" > 单注 :
< input v-model = "formData.value" type="number"
< view class = "flex"
> 单注 :
< input
v-model = "formData.value"
type = "number"
class = "ml-1 mr-1 border border-[#D9D9D9] rounded-[10px] w-[140px] pl-[10px] pr-[10px] text-[#FF0204] text-center"
placeholder = "" / >
placeholder = ""
/ >
豆子
< / view >
< / view >
< / view >
<!-- 确认投注 -- >
< view class = "text-[36px] h-[100px] bg-[red] text-white text-center leading-[100px]" shape = "square" block
type = "primary" @click ="submit" > 一键投注 < / view >
< view
class = "text-[36px] h-[100px] bg-[red] text-white text-center leading-[100px]"
shape = "square"
block
type = "primary"
@click ="submit"
> 一键投注 < / v i e w
>
<!-- < button @click ="lottieFn(2, 1000)" > text < / button > - - >
< / view >
< view id = "lottie" v-show = "isLottie" > < / view >
@@ -193,6 +276,7 @@ import {
GetBetRecord ,
GetIsWin ,
GetWinInfo ,
GetJoinNum ,
} from "../../api" ;
import "tcplayer.js/dist/tcplayer.min.css" ;
// import Srs from "../../utils/srs.sdk";
@@ -205,11 +289,23 @@ import wzj from "../../static/wzj.json";
import zj from "../../static/zj.json" ;
import vueDanmaku from "vue3-danmaku" ;
onMounted ( ( ) => { } ) ;
onMounted ( ( ) => {
// getWinInfo()
} ) ;
const danmakuRef = ref ( ) ;
const danmus = ref ( [ ] ) ;
// const danmus = ref([
// {
// User: {
// avatarUrl: "https://img.loliapi.cn/i/pp/img132.web",
// nickName: "Huakk"
// },
// DrawNum: "10000",
// Number: "100"
// }
// ]);
const player = ref ( null ) ;
@@ -282,6 +378,7 @@ Taro.useDidShow(() => {
getBetList ( ) ;
getRecord ( ) ;
getNum ( ) ;
getJoinNum ( ) ;
} ) ;
const uid = ref ( "" ) ;
@@ -520,12 +617,12 @@ const initPlayer = () => {
const showSelector = ref ( false ) ;
const selector = ref ( [
{ name : "单双" , value : 3 } ,
{ name : "特码" , value : 2 } ,
{
name : "头尾数" ,
value : 1 ,
} ,
{ name : "单双" , value : 3 } ,
] ) ;
const onChange = async ( { name , value } ) => {
@@ -663,13 +760,13 @@ const columns = ref([
const data = ref ( [ ] ) ;
const openTable = ( ) => { } ;
const openTable = ( ) => { } ;
const numList = ref ( [ ] ) ;
const formData = ref ( {
selectorChecked : "特码 " ,
betType : 2 ,
selectorChecked : "单双 " ,
betType : 3 ,
betIndexs : [ ] ,
value : "" ,
total : 0 ,
@@ -845,8 +942,7 @@ const lottieFn = async (type, num = 0) => {
// 获取中奖信息
setTimeout ( ( ) => {
getWinInfo ( ) ;
} , 1500 )
} , 1500 ) ;
} ) ;
getUserInfo ( ) ;
} ;
@@ -855,9 +951,35 @@ const getWinInfo = async () => {
danmus . value = [ ] ;
const res = await GetWinInfo ( ) ;
danmus . value = res . list ;
// danmus.value = [{ img: "https://img.loliapi.cn/i/pp/img132.webp", name: "huakk", text: "恭喜你中奖了" }];
Taro . request ( {
url : "https://danmu.jdt168.com/get_danmu" ,
method : "GET" ,
success : ( { data : res } ) => {
const newData = res . data . map ( ( item ) => ( {
User : {
nickName : item . nick _name ,
avatarUrl : item . avatar ,
} ,
DrawNum : item . draw _num ,
Number : item . win _number ,
} ) ) ;
danmus . value . push ( ... newData ) ;
} ,
} ) ;
danmakuRef . value . play ( ) ;
} ;
const joinNum = ref ( 0 ) ;
const getJoinNum = async ( ) => {
const res = await GetJoinNum ( ) ;
const random _num = Math . floor ( Math . random ( ) * ( 300 - 100 ) ) ;
joinNum . value = res . number ? res . number : random _num ;
} ;
setInterval ( ( ) => {
getJoinNum ( ) ;
} , 20 * 1000 ) ;
< / script >
< style lang = "scss" > < / style >