i

2023-09-01 23:01:53 +08:00
parent eaae975626
commit 88e96df20c
8 changed files with 203 additions and 138 deletions
--- a/src/app.config.ts
+++ b/src/app.config.ts
@@ -11,5 +11,5 @@ export default defineAppConfig({
    navigationBarTitleText: 'Game',
    navigationBarTextStyle: 'black'
  },
-  // animation: false
+  animation: false
 })
--- a/src/pages/game_detail/index.scss
+++ b/src/pages/game_detail/index.scss
@@ -1,5 +1,7 @@
 .index {
  position: relative;
+  width: 100%;
+  height: 100vh;

  .swiper {
    background-color: white;
--- a/src/pages/index/index.scss
+++ b/src/pages/index/index.scss
@@ -1,4 +1,6 @@
 .index {
+  width: 100%;
+  height: 100vh;
  .title {
    margin: 60px;
    font-size: 50px;
--- a/src/pages/yaotouzi/index/index.scss
+++ b/src/pages/yaotouzi/index/index.scss
@@ -3,14 +3,14 @@
  width: 100%;
  height: 100%;

-  .tips {
-    border-radius: 0;
-    width: 100%;
-    height: 60px;
-  }
+  //.tips {
+  //  border-radius: 0;
+  //  width: 100%;
+  //  height: 60px;
+  //}

  .userInfo {
-    width: 680px;
+    width: 90%;
    margin: 20px auto;
    //margin: auto;
    padding: 20px;
@@ -73,7 +73,7 @@
  }

  .gameInfo {
-    width: 680px;
+    width: 90%;
    margin: 20px auto;
    padding: 20px;
    display: flex;
@@ -90,7 +90,7 @@

      .game_box {
        margin-left: 10px;
-        width: 250px;
+        width: 200px;
        // 文字超出显示省略号
        overflow: hidden;
        white-space: nowrap;
@@ -119,6 +119,10 @@
      }
    }

+    .center {
+      font-size: 30px;
+    }
+
    .right {

      .btn {
@@ -178,25 +182,42 @@

  .opt1 {
    display: flex;
-    justify-content: space-evenly;
+    justify-content: space-between;
    flex-wrap: wrap;
    text-align: center;
+    box-sizing: border-box;
+    height: 400px;
+    padding: 10px;
+
+    .optt {
+      width: 27%;
+      height: 100%;
+    }

    .item {
-      width: 200px;
+      width: 100%;
      margin-bottom: 10px;
      text-align: center;
-      padding: 31px 0;
      border: 1px dashed #228960;
      position: relative;
+      height: 48%;

      .name {
        font-size: 55px;
        font-weight: bold;
+        position: absolute;
+        top: 40%;
+        left: 50%;
+        transform: translate(-50%, -50%);
      }

      .odd {
        font-size: 25px;
+        position: absolute;
+        width: 100%;
+        top: 60%;
+        left: 50%;
+        transform: translate(-50%, -10%);
      }

      .mask {
@@ -222,8 +243,9 @@
    .base {
      background-image: url("../../../static/cais.png");
      background-size: 100% 100%;
-      width: 300px;
-      height: 400px;
+      //flex: 1;
+      width: 43%;
+      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
@@ -234,8 +256,8 @@
      .qz {
        background-image: url("../../../static/qz.png");
        background-size: 100% 100%;
-        width: 300px;
-        height: 100px;
+        width: 100%;
+        height: 25%;
        margin-bottom: 20px;
        line-height: 100px;
        color: #FBE039;
@@ -318,12 +340,15 @@
@keyframes flicker {
  0% {
    border: 1px dashed #228960;
+    background-color: #228960;
  }
  50% {
    border: 1px dashed white;
+    background: rgba(225, 225, 225, 0.5);
  }
  100% {
    border: 1px dashed #228960;
+    background-color: #228960;
  }
 }

--- a/src/pages/yaotouzi/index/index.vue
+++ b/src/pages/yaotouzi/index/index.vue
@@ -2,110 +2,113 @@
  <view class="index">
    <!--  公告  -->
    <view class="subColor tips"></view>
-    <!--  用户信息  -->
-    <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>
+    <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="right">
-        <view class="icon"></view>
-        <view class="bean">{{ userInfo.pulse || 0 }}</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>
+              <!--            <text class="text">6</text>-->
+            </view>
+          </view>
+        </view>
+        <view class="center">
+          <view>剩余{{ time }}s开奖</view>
+        </view>
+        <view class="right">
+          <view class="btn" @click="toPage(1)">开奖记录</view>
+          <view class="btn mt-15" @click="toPage(2)">投注记录</view>
+        </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>
-            <!--            <text class="text">6</text>-->
+      <!--  选项区  -->
+      <view class="opt">
+        <view class="subColor item" :class="{flicker: item.flicker}" v-for="item in odds" :key="item.id"
+              @click.stop="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>
        </view>
      </view>
-      <view class="right">
-        <view class="btn" @click="toPage(1)">开奖记录</view>
-        <view class="btn mt-15" @click="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="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>
-      </view>
-    </view>
-    <view style="height: 8px"></view>
-    <view class="opt1" v-if="odds1.length > 0">
-      <view>
-        <view class="subColor item" :class="{flicker: odds1[0].flicker}" @click.stop="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].markNum }}</view>
+      <view class="opt1" v-if="odds1.length > 0">
+        <view class="optt">
+          <view class="subColor item" :class="{flicker: odds1[0].flicker}" @click.stop="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].markNum }}</view>
+            </view>
+          </view>
+          <view class="subColor item" :class="{flicker: odds1[1].flicker}" @click.stop="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].markNum }}</view>
+            </view>
          </view>
        </view>
-        <view class="subColor item" :class="{flicker: odds1[1].flicker}" @click.stop="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].markNum }}</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" :class="{flicker: odds1[2].flicker}" @click.stop="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>
+          </view>
+          <view class="subColor item" :class="{flicker: odds1[3].flicker}" @click.stop="addNum(odds1[3])">
+            <view class="name">{{ odds1[3].name }}</view>
+            <view class="odd">赢{{ odds1[3].odds }}倍</view>
+            <view class="mask" v-if="odds1[3].status">
+              <view class="text">{{ odds1[3].markNum }}</view>
+            </view>
          </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>
-        <view class="subColor item" :class="{flicker: odds1[2].flicker}" @click.stop="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>
-        </view>
-        <view class="subColor item" :class="{flicker: odds1[3].flicker}" @click.stop="addNum(odds1[3])">
-          <view class="name">{{ odds1[3].name }}</view>
-          <view class="odd">赢{{ odds1[3].odds }}倍</view>
-          <view class="mask" v-if="odds1[3].status">
-            <view class="text">{{ odds1[3].markNum }}</view>
-          </view>
-        </view>
-      </view>
-    </view>
-    <view style="height: 4px"></view>
-    <view class="opt">
-      <view
+      <view class="opt">
+        <view
          class="subColor item"
          :class="{flicker: item.flicker}"
          style="margin-bottom: 10px"
          v-for="item in odds2"
          :key="item.id"
          @click.stop="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="name">{{ item.name }}</view>
+          <view class="odd">赢{{ item.odds }}倍</view>
+          <view class="mask" v-if="item.status">
+            <view class="text">{{ item.markNum }}</view>
+          </view>
        </view>
+        <view style="width: 18%;"></view>
      </view>
-      <view style="width: 18%;"></view>
-    </view>
+    </scroll-view>
    <!--  底部操作栏  -->
    <view class="subColor bottomBar">
      <view class="btn1" @click="clearBet">重置</view>
@@ -146,6 +149,8 @@ const odds2 = ref<Odd[]>([])

 const qzTitle = ref('请投注')

+const time = ref(0)
+
 const nowKJInfo = ref<{
  Start?: string
  End?: string
@@ -159,7 +164,7 @@ const userInfo = ref<{
  avatarUrl?: string
 }>({})

-const zjObj = ref({})
+const zjObj = ref<any>([])

 const iMsgNum = ref(0)

@@ -235,6 +240,7 @@ const initWs = () => {
    switch (res.code) {
      case 200:
        let num = Number(res.data)
+        time.value = num
        if (num === 5) {
          openDraw()
        }
@@ -268,15 +274,12 @@ const initWs = () => {
        })
        break
      case 666:
+        break
+      default:
        iMsgNum.value++
-        const newObj = JSON.parse(res.data)
-        const arr = Object.values(newObj)
-        // zjObj.value = {
-        //   ...zjObj.value,
-        //   ...newObj
-        // }
-        console.log(arr)
-        if (iMsgNum.value === 19) {
+        const arr = Object.values(res)
+        zjObj.value.push(...arr)
+        if (iMsgNum.value === 3 || zjObj.value.length === 1) {
          iMsgNum.value = 0
          startFlicker()
        }
@@ -314,17 +317,17 @@ const openDraw = () => {
  }, 5000)
 }

-const oddVal = ref(1)
+const oddVal = ref(10)
 const changeOdd = () => {
  switch (oddVal.value) {
-    case 1:
-      oddVal.value = 10
-      break
    case 10:
      oddVal.value = 100
      break
+    // case 10:
+    //   oddVal.value = 100
+    //   break
    case 100:
-      oddVal.value = 1
+      oddVal.value = 10
      break
  }
 }
@@ -357,6 +360,12 @@ const addNum = (item: any) => {

 // 投注
 const verifyBet = () => {
+
+  if (isKj.value) return Taro.showToast({
+    title: '正在开奖，不能下注',
+    icon: 'none'
+  })
+
  let numCount = 0

  odds.value.forEach((item: any) => {
@@ -424,7 +433,9 @@ const verifyBet = () => {
    data: data
  }))

-  getUserInfo()
+  setTimeout(() => {
+    getUserInfo()
+  }, 1000)

  qzTitle.value = '已投注'
  clearBet()
@@ -448,22 +459,22 @@ const playAminExpand = () => {

 // 开始闪烁
 const startFlicker = () => {
-  console.log('开始闪烁', zjObj.value)
  flickerItems(odds.value)
  flickerItems(odds1.value)
  flickerItems(odds2.value)
+  zjObj.value = []
 }

 const flickerItems = (items: any[]) => {
  items.forEach((item) => {
-    for (const val in zjObj.value) {
-      if (item.name === zjObj.value[val]) {
+    zjObj.value.forEach((item2: any) => {
+      if (item.name === item2) {
        item.flicker = true
        setTimeout(() => {
          item.flicker = false
        }, 3000)
      }
-    }
+    })
  })
 }
 </script>
--- a/src/pages/yaotouzi/records/index.config.ts
+++ b/src/pages/yaotouzi/records/index.config.ts
@@ -1,3 +1,4 @@
 export default definePageConfig({
-    navigationBarBackgroundColor: '#23684B'
+  navigationBarBackgroundColor: '#23684B',
+  enablePullDownRefresh: true
 })
--- a/src/pages/yaotouzi/records/index.vue
+++ b/src/pages/yaotouzi/records/index.vue
@@ -13,23 +13,29 @@
      </view>
    </template>
    <template v-else>
-      <view class="card desc" v-for="(item,index) in list as any[]" :key="index">
-        <view>
-          <view>第{{ item.Periods }}期投注:
-          </view>
+      <view v-if="list.length > 0">
+        <view class="card desc" v-for="(item,index) in list as any[]" :key="index">
          <view>
-            点数:
-            <text style="color: red">{{ item.Name }}</text>
+            <view>第{{ item.Periods }}期投注:
+            </view>
+            <view>
+              点数:
+              <text style="color: red">{{ item.Name }}</text>
+            </view>
+            <view class="sub">投注时间:
+              <text>{{ item.DrawTime }}</text>
+            </view>
          </view>
-          <view class="sub">投注时间:
-            <text>{{ item.DrawTime }}</text>
+          <view style="text-align: right">
+            <view style="color: red" v-if="item.State === 1">+{{ item.DrawNum }}积分</view>
+            <view style="color: green">-{{ item.Number }}豆子</view>
          </view>
        </view>
-        <view>
-          <view style="color: red" v-if="item.State === 1">+{{ item.DrawNum }}积分</view>
-          <view style="color: green">-{{ item.Number }}</view>
-        </view>
      </view>
+      <view v-else>
+        <view style="margin-top: 100px">暂无记录.....</view>
+      </view>
+
    </template>
  </view>
 </template>
@@ -46,17 +52,26 @@ const typeNum = ref(0)
 Taro.useLoad((options) => {
  typeNum.value = Number(options.type)
  Taro.setNavigationBarTitle({title: options.type === '1' ? '开奖记录' : '投注记录'})
-  getData(options.type)
+  getData()
 })

-const getData = async (type: string) => {
+Taro.usePullDownRefresh(() => {
+  getData()
+})
+
+const getData = async () => {
  let res: any
-  if (type === '1') {
+  if (typeNum.value === 1) {
    res = await getKaiJiangList()
+    list.value = res.data.data
  } else {
    res = await getTzJl(Taro.getStorageSync('uid'))
+    console.log(res)
+    list.value = res.data.data.sort(
+      (a: any, b: any) => b.Periods - a.Periods
+    )
  }
-  list.value = res.data.data
+  Taro.stopPullDownRefresh()
 }
 </script>

@@ -65,8 +80,11 @@ const getData = async (type: string) => {
  display: flex;
  flex-direction: column;
  align-items: center;
-  justify-content: center;
+  //justify-content: center;
  font-size: 35px;
+  width: 100%;
+  padding: 10px;
+  box-sizing: border-box;
 }

 .card {
@@ -86,6 +104,7 @@ const getData = async (type: string) => {
  display: flex;
  justify-content: space-between;
  align-items: center;
+  width: 100%;
 }

 </style>
--- a/src/utils/request.ts
+++ b/src/utils/request.ts
@@ -9,6 +9,9 @@ export interface RequestParams {
 }

 const request = (request: RequestParams): Promise<any> => {
+  Taro.showLoading({
+    title: '加载中',
+  })
  return new Promise((resolve, reject) => {
    Taro.request({
      url: `${app.API_URL()}${request.url}`,
@@ -19,9 +22,11 @@ const request = (request: RequestParams): Promise<any> => {
      data: request.data || {},
      success: (res) => {
        resolve(res.data);
+        Taro.hideLoading();
      },
      fail: (err) => {
        reject(err);
+        Taro.hideLoading();
      },
    });
  });