update

2024-07-15 01:30:38 +08:00
parent 095df3ac48
commit f0bcdb6963
9 changed files with 2577 additions and 88 deletions
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -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,70 +171,74 @@
      </view>
    </template>
    <!-- </scroll-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]">{{ getTotalNum }}</text> 豆子</view
-      >
-      <view> 单注最多可赢 <text class="text-[#EB1313]">100</text> 积分 </view>
-    </view>
+    <view class="h-[400px]"></view>
    <!-- 操作栏 -->
-    <view
-      class="bg-white p-[30px] w-full text-[28px] flex justify-between items-center"
-    >
+    <view class="fixed bottom-0 w-full">
+      <!-- 投注信息 -->
      <view
-        @click="clearbet"
-        class="bg-[#FFE8E8] rounded-[10px] border border-[#FF0204] w-[100px] h-[60px] text-[#FF0204] text-center leading-[60px]"
-        >清空</view
+        v-if="formData.betIndexs.length > 0"
+        class="bg-[#F5F5F5] w-full text-[28px] p-[26px] flex justify-between items-center"
      >
-      <view>
        <view
-          >可用豆子:
-          <text class="text-[#EB1313]">{{ user.pulse }}</text> 豆子</view
-        >
-        <view class="flex"
-          >单注:
-          <input
-            v-model="formData.value"
-            @input="betIput"
-            type="number"
-            class="ml-1 mr-1 border border-[#D9D9D9] rounded-[10px] w-[140px] pl-[10px] pr-[10px] text-[#FF0204] text-center"
-            placeholder=""
-          />
-          豆子</view
+          >共
+          <text class="text-[#EB1313]">{{ formData.betIndexs.length }}</text> 注
+          共 <text class="text-[#EB1313]">{{ getTotalNum }}</text> 豆子</view
        >
+        <view> 单注最多可赢 <text class="text-[#EB1313]">100</text> 积分 </view>
      </view>
-    </view>
-    <!-- 确认投注 -->
-    <!-- <button
-        hover-class="none"
-        :disabled="!formData.value"
-        class="bg-[#EB1313] text-white w-full h-[130px] text-center leading-[130px] rounded-[0px]"
+      <view
+        class="bg-white p-[30px] w-full text-[28px] flex justify-between items-center"
      >
-        一键投注
-      </button> -->
-    <nut-button
-      style="height: 70px; font-size: 23px"
-      shape="square"
-      block
-      type="primary"
-      @click="submit"
-      >一键投注</nut-button
-    >
+        <view
+          @click="clearbet"
+          class="bg-[#FFE8E8] rounded-[10px] border border-[#FF0204] w-[100px] h-[60px] text-[#FF0204] text-center leading-[60px]"
+          >清空</view
+        >
+        <view>
+          <view
+            >可用豆子:
+            <text class="text-[#EB1313]">{{ user.pulse }}</text> 豆子</view
+          >
+          <view class="flex"
+            >单注:
+            <input
+              v-model="formData.value"
+              @input="betIput"
+              type="number"
+              class="ml-1 mr-1 border border-[#D9D9D9] rounded-[10px] w-[140px] pl-[10px] pr-[10px] text-[#FF0204] text-center"
+              placeholder=""
+            />
+            豆子</view
+          >
+        </view>
+      </view>
+      <!-- 确认投注 -->
+      <nut-button
+        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>