feat(custom): 游戏大厅合并

.env.development

@@ -12,4 +12,22 @@ TARO_APP_GAME='https://jdt-test-tz.wanzhuanyongcheng.cn/pages/index/index?uid='
 # TARO_APP_GAME='http://192.168.31.225:10086?uid='
 
 # 捕鱼游戏链接
-TARO_APP_FISH_GAME='https://jdt-test-fish.wanzhuanyongcheng.cn/?uid='
+TARO_APP_FISH_GAME='https://jdt-test-fish.wanzhuanyongcheng.cn/?uid='
+
+# 游戏API
+TARO_APP_HALL_API='https://game.wanzhuanyongcheng.cn'
+
+# 游戏大厅
+TARO_APP_HOME= 'https://test.wanzhuanyongcheng.cn/app/game'
+
+# 游戏ws链接
+TARO_APP_WS='wss://game.wanzhuanyongcheng.cn/dice/home'
+
+# 大转盘ws
+TARO_APP_TURNTABLE_WS='wss://game2.wanzhuanyongcheng.cn/turntable/home'
+
+# 大转盘api
+TARO_APP_TURNTABLE_API='https://game2.wanzhuanyongcheng.cn/turntable'
+
+# 澳拾
+TARO_APP_AOSHI_API='https://game3.wanzhuanyongcheng.cn'

.env.test

@@ -11,4 +11,22 @@ TARO_APP_API='https://test.wanzhuanyongcheng.cn/app'
 TARO_APP_GAME='https://jdt-test-tz.wanzhuanyongcheng.cn/pages/index/index?uid='
 
 # 捕鱼游戏链接
-TARO_APP_FISH_GAME='https://jdt-test-fish.wanzhuanyongcheng.cn/?uid='
+TARO_APP_FISH_GAME='https://jdt-test-fish.wanzhuanyongcheng.cn/?uid='
+
+# 游戏API
+TARO_APP_HALL_API='https://game.wanzhuanyongcheng.cn'
+
+# 游戏大厅
+TARO_APP_HOME= 'https://test.wanzhuanyongcheng.cn/app/game'
+
+# 游戏ws链接
+TARO_APP_WS='wss://game.wanzhuanyongcheng.cn/dice/home'
+
+# 大转盘ws
+TARO_APP_TURNTABLE_WS='wss://game2.wanzhuanyongcheng.cn/turntable/home'
+
+# 大转盘api
+TARO_APP_TURNTABLE_API='https://game2.wanzhuanyongcheng.cn/turntable'
+
+# 澳拾
+TARO_APP_AOSHI_API='https://game3.wanzhuanyongcheng.cn'

src/app.config.ts

@@ -6,7 +6,6 @@ export default defineAppConfig({
     'pages/user/index',
     'pages/allClassList/index',
     'pages/game/gamedetail/index',
-    'pages/game/gameview/index',
     'pages/game/view/index',
     'pages/fastBuy/index',
   ],

src/config/index.ts

@@ -0,0 +1,10 @@
+// 用于配置项目的一些常量，如接口地址、websocket地址等
+import Taro from '@tarojs/taro';
+
+export const app = {
+  API_URL: () => `${process.env.TARO_APP_HALL_API}`,
+  API_WS: () =>
+    `${process.env.TARO_APP_WS}?uid=${Taro.getStorageSync('uid')}&game_id=${
+      Taro.getStorageSync('gameItem').ID
+    }`,
+};

src/pages/game/gamedetail/index.config.ts

@@ -1,4 +1,4 @@
 export default definePageConfig({
   navigationBarTitleText: '游戏详情',
-  navigationStyle: 'custom',
+  // navigationStyle: 'custom',
 });

src/pages/game/gamedetail/index.scss

@@ -0,0 +1,43 @@
+// page {
+//   font-size: 10px;
+// }
+
+.index {
+  position: relative;
+  width: 100%;
+  height: 100vh;
+
+  .swiper {
+    background-color: white;
+    width: 100%;
+  }
+
+  .container {
+    z-index: 1;
+    position: absolute;
+    top: 260px;
+    background-color: white;
+    box-sizing: border-box;
+    width: 100%;
+    padding: 10px;
+    text-align: center;
+    border-top-left-radius: 20px;
+    border-top-right-radius: 20px;
+
+    .btn {
+      margin: 20px auto;
+      padding: 10px;
+      border-radius: 50px;
+      background-color: #7950f2;
+      color: #fff;
+      width: 300px;
+      text-align: center;
+      border: 1px solid #f5f5f5;
+    }
+  }
+}
+.text {
+  padding: 10px;
+  font-size: 30px;
+  text-align: left;
+}

src/pages/game/gamedetail/index.vue

@@ -1,153 +1,48 @@
 <template>
-  <view>
+  <view class="index">
-    <view
+    <swiper class="swiper" :circular="true" :autoplay="true">
-      class="head-wrapper"
+      <swiper-item v-for="(item, index) in list" :key="index">
-      :style="{
+        <image style="width: 100%" :src="item" />
-        top: statusHeight + 'px',
+      </swiper-item>
-      }">
+    </swiper>
-      <view class="head-menu">
+    <view class="container">
-        <Left class="iconfont" @click="returns" />
+      <rich-text :nodes="info.introduction"></rich-text>
-        <Home class="iconfont" @click="goHome" />
+      <view class="btn" @click="startGame()">开始游戏</view>
-      </view>
-    </view>
-    <nut-swiper
-      class="swiper"
-      :pagination-visible="true"
-      pagination-color="#426543"
-      auto-play="3000">
-      <nut-swiper-item>
-        <image
-          src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg"
-          alt="" />
-      </nut-swiper-item>
-      <nut-swiper-item>
-        <image
-          src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg"
-          alt="" />
-      </nut-swiper-item>
-      <nut-swiper-item>
-        <image
-          src="https://storage.360buyimg.com/jdc-article/welcomenutui.jpg"
-          alt="" />
-      </nut-swiper-item>
-      <nut-swiper-item>
-        <image
-          src="https://storage.360buyimg.com/jdc-article/fristfabu.jpg"
-          alt="" />
-      </nut-swiper-item>
-    </nut-swiper>
-    <view class="box">
-      <view class="line"></view>
-      <view class="game-title"></view>
-      <view class="game-title"></view>
-      <view class="game-title"></view>
-      <view class="game-btn" @click="toGame()">开始游戏</view>
     </view>
   </view>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import {ref} from 'vue';
-import {
+import Taro from '@tarojs/taro';
-  useLoad,
+import './index.scss';
-  getSystemInfoSync,
-  navigateBack,
-  switchTab,
-  navigateTo,
-} from '@tarojs/taro';
-import {Left, Home} from '@nutui/icons-vue-taro';
-var statusBarHeight = getSystemInfoSync().statusBarHeight as number;
 
-console.log(statusBarHeight);
+const info = ref<any>({});
+const list = ref<string[]>([]);
 
-const statusHeight = ref<number>(statusBarHeight);
+Taro.useLoad(() => {
-
+  info.value = Taro.getStorageSync('gameItem');
-// const swiperList = ref([]);
+  list.value.push(info.value.cover);
-
-useLoad(options => {
-  console.log(options);
 });
 
-const returns = () => {
+const startGame = () => {
-  navigateBack();
+  // 判断url中是否含有http
-};
+  if (info.value.url.indexOf('http') === -1) {
-
+    Taro.navigateTo({
-const goHome = () => {
+      url: info.value.url,
-  switchTab({
+    });
-    url: '/pages/index/index',
+  } else {
-  });
+    // const user = Taro.getStorageSync('userInfo')
-};
+    // if(user.data.pulse <= 0) return Taro.showToast({title: '您的豆子不足，无法进入游戏', icon: 'none'})
-
+    Taro.setStorageSync(
-const toGame = () => {
+      'game_url',
-  navigateTo({
+      `${info.value.url}?uid=${Taro.getStorageSync('token')}&id=${
-    url: '/pages/game/gameview/index',
+        info.value.ID
-  });
+      }`,
+    );
+    Taro.navigateTo({
+      url: `/pages/game/view/index`,
+    });
+  }
 };
 </script>
-
-<style lang="scss">
-.head-wrapper {
-  z-index: 999;
-  display: flex;
-  align-items: center;
-  position: fixed;
-  left: 30px;
-  top: 0;
-  height: 100px;
-}
-.head-menu {
-  display: flex;
-  align-items: center;
-  height: 54px;
-  width: 140px;
-  background: rgba(0, 0, 0, 0.25);
-  border-radius: 27px;
-  .iconfont {
-    flex: 1;
-    text-align: center;
-    color: #fff;
-    box-sizing: border-box;
-    &.icon-xiangzuo {
-      border-right: 1px solid #fff;
-    }
-  }
-}
-.swiper {
-  height: 450rpx;
-  width: 100vw;
-  image {
-    width: 100%;
-  }
-}
-
-.box {
-  width: 100%;
-  height: 90vh;
-  background-color: #fff;
-  z-index: 1;
-  border-top-left-radius: 20px;
-  border-top-right-radius: 20px;
-  box-sizing: border-box;
-  position: absolute;
-  padding: 20px;
-  top: 400px;
-
-  .line {
-    width: 90px;
-    height: 10px;
-    border-radius: 4px;
-    background-color: rgba(202, 202, 202, 1);
-    margin: auto;
-  }
-  .game-btn {
-    width: 300px;
-    height: 75px;
-    margin: 50px auto;
-    color: #fff;
-    background-color: rgba(85, 77, 132, 1);
-    border-radius: 50px;
-    text-align: center;
-    line-height: 75px;
-  }
-}
-</style>

src/pages/game/gamehome/index.config.ts

@@ -1,3 +1,4 @@
 export default definePageConfig({
-  navigationBarTitleText: '',
+  navigationBarTitleText: '游戏大厅',
+  // navigationStyle: 'custom',
 });

src/pages/game/gamehome/index.vue

@@ -1,20 +1,31 @@
 <template>
-  <view>
+  <view class="index">
-    <web-view :src="url"></web-view>
+    <!-- <view class="title">游戏大厅</view> -->
+    <view class="card_list">
+      <view
+        class="card_item"
+        v-for="item in list"
+        :key="item.ID"
+        :style="{backgroundImage: `url(${item.cover})`}"
+        @click="toPage(item)"></view>
+    </view>
   </view>
 </template>
 
 <script setup lang="ts">
 import {ref} from 'vue';
 import Taro from '@tarojs/taro';
+import {getPersonalInfo} from '@/api/user';
 
-const url = ref('');
+const list = ref<any[]>([]);
 
 Taro.useDidShow(() => {
   const token = Taro.getStorageSync('token');
   // url.value = 'http://huakk.jdt168.com/#/pages/index/index';
   if (token) {
-    url.value = `${process.env.TARO_APP_GAME}${Taro.getStorageSync('token')}`;
+    // url.value = `${process.env.TARO_APP_GAME}${Taro.getStorageSync('token')}`;
+    getUserInfo();
+    getList();
   } else {
     Taro.showToast({
       title: '请先登录,再尝试进入游戏大厅。',
@@ -27,6 +38,83 @@ Taro.useDidShow(() => {
     }, 1000);
   }
 });
+
+const getUserInfo = async () => {
+  const res = await getPersonalInfo();
+  const userInfo = {
+    ...res.data,
+    data: {
+      ...res.data.data,
+      permission: res.data.data.permission
+        ? JSON.parse(res.data.data.permission)
+        : {},
+    },
+  };
+  Taro.setStorageSync('userInfo', userInfo);
+};
+
+const getList = async () => {
+  // console.log(process.env.TARO_APP_HALL_API)
+  Taro.request({
+    url: `${process.env.TARO_APP_HOME}`,
+    method: 'POST',
+    success: ({data: res}) => {
+      list.value =
+        res.data.data.sort((a: any, b: any) => b.sort - a.sort) || [];
+    },
+  });
+};
+
+const toPage = item => {
+  Taro.setStorageSync('gameItem', item);
+  Taro.navigateTo({
+    url: `/pages/game/gamedetail/index`,
+  });
+};
 </script>
 
-<style lang="scss"></style>
+<style lang="scss">
+.index {
+  padding-top: 10px;
+  width: 100%;
+  height: 100vh;
+
+  .title {
+    margin: 60px;
+    font-size: 50px;
+  }
+
+  .card_list {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+
+    .card_item {
+      width: 700px;
+      height: 300px;
+      background-color: #fff;
+      margin-bottom: 20px;
+      border-radius: 20px;
+      text-align: center;
+      line-height: 300px;
+      //   background-image: url('../../static/qietu.png');
+      background-size: 100% 100%;
+      position: relative;
+
+      // .btn {
+      //   position: absolute;
+      //   width: 150px;
+      //   height: 100px;
+      //   background-image: url('../../static/an.png');
+      //   background-size: 100% 100%;
+      //   right: 30px;
+      //   bottom: 10px;
+
+      //   &:active {
+      //     transform: scale(1.1);
+      //   }
+      // }
+    }
+  }
+}
+</style>

src/pages/game/gameview/index.config.ts

@@ -1,3 +0,0 @@
-export default definePageConfig({
-  navigationBarTitleText: 'GameView',
-});

src/pages/game/gameview/index.vue

@@ -1,20 +0,0 @@
-<template>
-  <web-view
-    style="height: 100vh; width: 100vw"
-    :src="`https://www.jdt168.com/public/?uid=${user.uid}`"></web-view>
-</template>
-
-<script setup lang="ts">
-import {ref} from 'vue';
-import {getStorageSync, useLoad} from '@tarojs/taro';
-import {WebView} from '@tarojs/components';
-
-const user = ref<any>({});
-
-useLoad(() => {
-  user.value = getStorageSync('userInfo');
-  console.log(user);
-});
-</script>
-
-<style lang="scss"></style>

src/pages/game/view/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <web-view style="height: 100vh; width: 100vw" :src="url"></web-view>
+  <web-view class="web-view" :src="url"></web-view>
 </template>
 
 <script setup lang="ts">
@@ -14,4 +14,10 @@ useDidShow(() => {
 });
 </script>
 
-<style lang="scss"></style>
+<style lang="scss">
+.web-view {
+  // 适配ios底部安全区域
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
+}
+</style>

src/utils/game_request.ts

@@ -0,0 +1,32 @@
+import {app} from '@/config';
+import Taro from '@tarojs/taro';
+
+export interface RequestParams {
+  url: string;
+  method: 'GET' | 'POST' | 'PUT' | 'DELETE';
+  header?: object;
+  data?: string | object;
+}
+
+const request = (request: RequestParams): Promise<any> => {
+  return new Promise((resolve, reject) => {
+    Taro.request({
+      url: `${app.API_URL()}${request.url}`,
+      method: request.method,
+      timeout: 5000,
+      dataType: 'json',
+      header: request.header || {},
+      data: request.data || {},
+      success: res => {
+        resolve(res.data);
+        // Taro.hideLoading()
+      },
+      fail: err => {
+        reject(err);
+        Taro.hideLoading();
+      },
+    });
+  });
+};
+
+export default request;