update

2024-07-15 01:30:38 +08:00
parent 095df3ac48
commit f0bcdb6963
9 changed files with 2577 additions and 88 deletions
--- a/package.json
+++ b/package.json
@@ -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",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -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:
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -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`);
--- a/src/pages/bet_record/index.vue
+++ b/src/pages/bet_record/index.vue
@@ -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>

--- a/src/pages/index/index.scss
+++ b/src/pages/index/index.scss
@@ -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;
+    }
+  }
+}
--- 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>
--- a/src/static/img_0.png
+++ b/src/static/img_0.png
--- a/src/static/wzj.json
+++ b/src/static/wzj.json
--- a/src/static/zj.json
+++ b/src/static/zj.json