update

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",

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:

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`);

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>
 

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;
+    }
+  }
+}

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]"
+        <view class="text-[28px] text-[#333333]">距{{ pStr }}期截止时间</view>
-          >距{{ Number(data[0]?.qs) + 1 }}期截止时间</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 class="h-[400px]"></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
+    <view class="fixed bottom-0 w-full">
-      class="bg-white p-[30px] w-full text-[28px] flex justify-between items-center"
+      <!-- 投注信息 -->
-    >
       <view
-        @click="clearbet"
+        v-if="formData.betIndexs.length > 0"
-        class="bg-[#FFE8E8] rounded-[10px] border border-[#FF0204] w-[100px] h-[60px] text-[#FF0204] text-center leading-[60px]"
+        class="bg-[#F5F5F5] w-full text-[28px] p-[26px] flex justify-between items-center"
-        >清空</view
       >
-      <view>
         <view
-          >可用豆子:
+          >共
-          <text class="text-[#EB1313]">{{ user.pulse }}</text> 豆子</view
+          <text class="text-[#EB1313]">{{ formData.betIndexs.length }}</text> 注
-        >
+          共 <text class="text-[#EB1313]">{{ getTotalNum }}</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> 单注最多可赢 <text class="text-[#EB1313]">100</text> 积分 </view>
       </view>
-    </view>
+      <view
-    <!-- 确认投注 -->
+        class="bg-white p-[30px] w-full text-[28px] flex justify-between items-center"
-    <!-- <button
-        hover-class="none"
-        :disabled="!formData.value"
-        class="bg-[#EB1313] text-white w-full h-[130px] text-center leading-[130px] rounded-[0px]"
       >
-        一键投注
+        <view
-      </button> -->
+          @click="clearbet"
-    <nut-button
+          class="bg-[#FFE8E8] rounded-[10px] border border-[#FF0204] w-[100px] h-[60px] text-[#FF0204] text-center leading-[60px]"
-      style="height: 70px; font-size: 23px"
+          >清空</view
-      shape="square"
+        >
-      block
+        <view>
-      type="primary"
+          <view
-      @click="submit"
+            >可用豆子:
-      >一键投注</nut-button
+            <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: "",
+    tt: item.Name,
-    tw: "",
+    t: item.DrawTime,
-    tm: "",
-    ds: "",
   }));
   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: "特尾",
+    title: "开奖时间",
-    key: "tw",
+    key: "t",
-    align: "center",
-    stylehead: "color: #959BB1",
-    stylecolumn: "color: #959BB1",
-  },
-  {
-    title: "特码",
-    key: "tm",
-    align: "center",
-    stylehead: "color: #959BB1",
-    stylecolumn: "color: #959BB1",
-  },
-  {
-    title: "单双",
-    key: "ds",
     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>