i

.env.development

@@ -3,6 +3,11 @@
 
 
 TARO_APP_API = 'https://game.wanzhuanyongcheng.cn/dice'
+
 TARO_APP_WS = 'wss://game.wanzhuanyongcheng.cn/dice/home'
 
-TARO_APP_HOME= 'https://test.wanzhuanyongcheng.cn/app/game'
+TARO_APP_HOME = 'https://test.wanzhuanyongcheng.cn/app/game'
+
+TARO_APP_BALLOON_WS = 'wss://balloon.wanzhuanyongcheng.cn/balloon/home'
+
+TARO_APP_BALLOON_API = 'https://balloon.wanzhuanyongcheng.cn/balloon'

.env.production

@@ -1,7 +1,11 @@
 # TARO_APP_ID="生产环境下的小程序appid"
 
 TARO_APP_API = 'https://www.jdt168.com/dice'
+
 TARO_APP_WS = 'wss://www.jdt168.com/dice/home'
 
+TARO_APP_HOME = 'https://www.wanzhuanyongcheng.cn/app/game'
 
-TARO_APP_HOME= 'https://www.wanzhuanyongcheng.cn/app/game'
+TARO_APP_BALLOON_WS = 'wss://balloon.wanzhuanyongcheng.cn/balloon/home'
+
+TARO_APP_BALLOON_API = 'https://balloon.wanzhuanyongcheng.cn/balloon'

.env.test

@@ -2,7 +2,11 @@
 
 
 TARO_APP_API = 'https://game.wanzhuanyongcheng.cn/dice'
+
 TARO_APP_WS = 'wss://game.wanzhuanyongcheng.cn/dice/home'
 
+TARO_APP_HOME = 'https://test.wanzhuanyongcheng.cn/app/game'
 
-TARO_APP_HOME= 'https://test.wanzhuanyongcheng.cn/app/game'
+TARO_APP_BALLOON_WS = 'wss://balloon.wanzhuanyongcheng.cn/balloon/home'
+
+TARO_APP_BALLOON_API = 'https://balloon.wanzhuanyongcheng.cn/balloon'

src/app.config.ts

@@ -3,7 +3,9 @@ export default defineAppConfig({
     'pages/index/index',
     'pages/yaotouzi/index/index',
     'pages/game_detail/index',
-    'pages/yaotouzi/records/index'
+    'pages/yaotouzi/records/index',
+    'pages/balloon/index/index',
+    '/pages/balloon/records/index'
   ],
   window: {
     backgroundTextStyle: 'light',

src/app.scss

@@ -1,5 +1,7 @@
 .taro_page {
-  background-color: #f5f5f5!important;
+  background-color: #f5f5f5 !important;
+  // width: 100vw !important;
+  // height: 100vh !important;
 }
 
 .mt-15 {

src/pages/balloon/index/index.config.ts

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '吹气球'
+})

src/pages/balloon/index/index.scss

@@ -0,0 +1,49 @@
+.container {
+  box-sizing: border-box;
+  height: 100vh;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .header {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    padding: 0 10px;
+  }
+
+  .time {
+    margin: 100px;
+  }
+
+  .balloon-box {
+    background-image: url("../../../static/balloon.png");
+    background-size: cover;
+    width: 200px;
+    height: 300px;
+    margin: 100px;
+  }
+
+  .bottom-box {
+    position: fixed;
+    bottom: 0;
+    margin: 10px;
+    width: 80%;
+
+    .input {
+      padding: 10px;
+      border-radius: 10px;
+      border: 1px solid grey;
+    }
+
+    .box {
+      display: flex;
+      justify-content: space-between;
+      .btn {
+        margin: 10px 0;
+        width: 45%;
+      }
+    }
+  }
+}

src/pages/balloon/index/index.vue

@@ -1,11 +1,192 @@
 <script setup lang="ts">
+import { ref } from "vue";
+import Taro from "@tarojs/taro";
+import utils from "@/utils";
 
+const val = ref("");
+
+const timeStr = ref("0");
+
+const betVal = ref(100);
+
+const count = ref(1);
+
+const zoom = ref(1);
+
+const isBalloon = ref(true);
+
+const ws = new WebSocket(
+  `${process.env.TARO_APP_BALLOON_WS}?uid=${Taro.getStorageSync(
+    "uid"
+  )}&game_id=${Taro.getStorageSync("gameItem").ID}`
+);
+
+ws.onopen = () => {
+  Taro.showToast({
+    title: "连接游戏服务器成功",
+    mask: true,
+    icon: "none",
+  });
+};
+
+ws.onmessage = (message) => {
+  const res = JSON.parse(message.data);
+  switch (res.code) {
+    case 200:
+      timeStr.value = res.data;
+      break;
+    case 5:
+      Taro.showToast({
+        title: res.msg,
+        icon: "none",
+      });
+      break;
+    case 400:
+      Taro.showToast({
+        title: res.msg,
+        icon: "none",
+      });
+      break;
+    case 100:
+      Taro.showToast({
+        title: res.msg,
+        icon: "none",
+      });
+      break;
+    default:
+      startFun(res.name);
+      break;
+  }
+};
+
+const changeBet = () => {
+  switch (betVal.value) {
+    case 100:
+      betVal.value = 1000;
+      break;
+    case 1000:
+      betVal.value = 10000;
+      break;
+    case 10000:
+      betVal.value = 100;
+      break;
+  }
+};
+
+const startBet = () => {
+  if (!val.value)
+    return Taro.showToast({
+      title: "请输入秒数",
+      icon: "none",
+    });
+  if (Number(val.value) > 13) {
+    val.value = "13";
+    Taro.showToast({
+      title: "秒数不能超过13",
+      icon: "none",
+    });
+  }
+  ws.send(
+    JSON.stringify({
+      type: 1,
+      data: {
+        number: betVal.value * count.value,
+        second: Number(val.value),
+      },
+    })
+  );
+  setTimeout(() => {
+    getUserInfo();
+  }, 1000);
+};
+
+const clear = () => {
+  count.value = 1;
+  val.value = "";
+};
+
+const startFun = (num: number) => {
+  let count = 1;
+  for (let i = 0; i < num; i++) {
+    setTimeout(() => {
+      count++;
+      zoom.value += 0.1;
+      if (count === num) {
+        isBalloon.value = false;
+        setTimeout(() => {
+          isBalloon.value = true;
+          zoom.value = 1;
+        }, 1000);
+      }
+    }, 1000 * i);
+  }
+};
+
+Taro.useDidShow(() => {
+  getUserInfo();
+});
+
+const douzi = ref(0);
+
+const getUserInfo = async () => {
+  Taro.request({
+    url: `${
+      process.env.TARO_APP_BALLOON_API
+    }/userBalloonInfo?uid=${Taro.getStorageSync("uid")}`,
+    method: "GET",
+    success: ({ data: res }) => {
+      douzi.value = res.data.data.pulse;
+    },
+  });
+};
+
+const toPage = (type: number) => {
+  Taro.navigateTo({
+    url: `/pages/balloon/records/index?type=${type}`,
+  });
+};
 </script>
 
 <template>
-  <view></view>
+  <view class="container">
+    <view class="header">
+      <view>豆子:{{ douzi }}</view>
+      <view @click="utils.vibrateShort(() => toPage(1))">开奖记录</view>
+      <view @click="utils.vibrateShort(() => toPage(2))">投注记录</view>
+    </view>
+    <view class="time">开奖倒计时：{{ timeStr }}</view>
+    <view
+      v-if="isBalloon"
+      class="balloon-box"
+      :style="{
+        transform: `scale(${zoom})`,
+        transition: 'transform 0.5s',
+      }"
+    ></view>
+    <view v-else>气球爆炸了！</view>
+    <view class="bottom-box">
+      <input
+        class="input"
+        type="number"
+        v-model="val"
+        placeholder="请输入秒数,秒数不能超过13"
+      />
+      <view class="box">
+        <button class="btn" type="primary" @click="count++">
+          X{{ count }}
+        </button>
+        <button class="btn" type="primary" @click="changeBet">
+          X{{ betVal }}
+        </button>
+      </view>
+      <view class="box">
+        <button class="btn" type="primary" @click="clear">重置</button>
+        <button class="btn" type="primary" @click="startBet">吹</button>
+      </view>
+    </view>
+  </view>
 </template>
 
 <style lang="scss">
-
+@import "./index.scss";
 </style>

src/pages/balloon/records/index.config.ts

@@ -0,0 +1,4 @@
+export default definePageConfig({
+  navigationBarBackgroundColor: '#23684B',
+  enablePullDownRefresh: true
+})

src/pages/balloon/records/index.vue

@@ -0,0 +1,114 @@
+<template>
+  <view class="app">
+    <template v-if="typeNum === 1">
+      <view class="card" v-for="(item,index) in list as any[]" :key="index">
+        <view>
+          <view
+            >第{{ item.Periods }}期开奖:
+            <text>{{ item.Name }}秒</text>
+          </view>
+        </view>
+      </view>
+    </template>
+    <template v-else>
+      <view v-if="list.length > 0">
+        <view
+          class="card desc"
+          v-for="(item,index) in list as any[]"
+          :key="index"
+        >
+          <view>
+            <view>第{{ item.Periods }}期投注:</view>
+            <view
+              >时间:<text style="color: red">{{ item.Name }}</text></view
+            >
+            <view class="sub"
+              >投注时间:<text>{{ item.DrawTime }}</text></view
+            >
+          </view>
+          <view style="text-align: right">
+            <view style="color: red">+{{ item.DrawNum }}积分</view>
+            <view style="color: green">-{{ item.Number }}豆子</view>
+          </view>
+        </view>
+      </view>
+      <view v-else>
+        <view style="margin-top: 100px">暂无记录.....</view>
+      </view>
+    </template>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+import Taro from "@tarojs/taro";
+
+const list = ref<any[]>([]);
+
+const typeNum = ref(0);
+
+Taro.useLoad((options) => {
+  typeNum.value = Number(options.type);
+  Taro.setNavigationBarTitle({
+    title: options.type === "1" ? "开奖记录" : "投注记录",
+  });
+  getData();
+});
+
+Taro.usePullDownRefresh(() => {
+  getData();
+});
+
+const getData = async () => {
+  if (typeNum.value === 1) {
+    Taro.request({
+      url: `${process.env.TARO_APP_BALLOON_API}/draw`,
+      method: "GET",
+      success: ({ data: res }) => {
+        list.value = res.data.data || [];
+      },
+    });
+  } else {
+    Taro.request({
+      url: `${process.env.TARO_APP_BALLOON_API}/userBalloonRecord?uid=${Taro.getStorageSync('uid')}`,
+      method: "GET",
+      success: ({ data: res }) => {
+        list.value = res.data.data || [];
+      },
+    });
+  }
+  Taro.stopPullDownRefresh();
+};
+</script>
+
+<style lang="scss" scoped>
+.app {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-size: 35px;
+  width: 100%;
+  padding: 10px;
+  box-sizing: border-box;
+}
+
+.card {
+  width: 95%;
+  padding: 20px;
+  background-color: #fff;
+  margin-top: 10px;
+  border-radius: 10px;
+
+  .sub {
+    margin-top: 10px;
+    color: #555555;
+  }
+}
+
+.desc {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+</style>

src/pages/game_detail/index.vue

@@ -19,7 +19,7 @@ import { ref } from "vue";
 import Taro from "@tarojs/taro";
 import "./index.scss";
 
-const info = ref({});
+const info = ref<any>({});
 
 Taro.useLoad(() => {
   info.value = Taro.getStorageSync("gameItem");
@@ -30,8 +30,9 @@ const list = ref([
 ]);
 
 const startGame = () => {
+  console.log(info.value);
   Taro.navigateTo({
-    url: "/pages/yaotouzi/index/index",
+    url: info.value.url,
   });
 };
 </script>

src/pages/index/index.vue

@@ -3,7 +3,7 @@
     <view class="title">游戏大厅</view>
 
     <view class="card_list">
-      <view class="card_item" v-for="item in list" :key="item.ID">
+      <view class="card_item" v-for="item in list as any[]" :key="item.ID">
         <view class="btn" @click="toPage(item)"></view>
       </view>
     </view>
@@ -35,10 +35,9 @@ const list = ref([]);
 
 const getList = async () => {
   Taro.request({
-    url: process.env.TARO_APP_HOME,
+    url: `${process.env.TARO_APP_HOME}`,
     method: "POST",
     success: ({ data: res }) => {
-      console.log(res);
       list.value = res.data.data || [];
     },
   });

src/pages/yaotouzi/records/index.vue

@@ -5,7 +5,6 @@
         <view>
           <view
             >第{{ item.Periods }}期开奖:
-            <!--            <text style="color: red">{{ item.Start }},{{ item.End }}</text>-->
             <text
               v-for="(num, i) in item.Name"
               :key="i"
@@ -15,12 +14,6 @@
               >{{ num }},
             </text>
           </view>
-          <!--          <view class="sub">开奖个数:-->
-          <!--            <text v-for="(num,i) in item.Name" :key="i" :style="{-->
-          <!--              color: numColor(num)-->
-          <!--            }">{{ num }},-->
-          <!--            </text>-->
-          <!--          </view>-->
         </view>
       </view>
     </template>
@@ -44,9 +37,6 @@
             <view style="color: red"
               >+{{ item.DrawNum }}积分</view
             >
-            <!-- <view style="color: red" v-if="item.State === 1"
-              >+{{ item.DrawNum }}积分</view
-            > -->
             <view style="color: green">-{{ item.Number }}豆子</view>
           </view>
         </view>