init

.eslintrc

@@ -1,5 +1,8 @@
 // ESLint 检查 .vue 文件需要单独配置编辑器：
 // https://eslint.vuejs.org/user-guide/#editor-integrations
 {
-  "extends": ["taro/vue3"]
+  "extends": ["taro/vue3"],
+  "rules": {
+    "vue/multi-word-component-names": "off"
+  }
 }

__tests__/index.test.js

@@ -5,7 +5,7 @@ describe('Testing', () => {
   test('Test', async () => {
     const testUtils = new TestUtils()
     await testUtils.createApp()
-    await testUtils.PageLifecycle.onShow('pages/index/index')
+    await testUtils.PageLifecycle.onShow()
     expect(testUtils.html()).toMatchSnapshot()
   })
 

config/index.ts

@@ -4,7 +4,7 @@ import devConfig from './dev'
 import prodConfig from './prod'
 
 // https://taro-docs.jd.com/docs/next/config#defineconfig-辅助函数
-export default defineConfig(async (merge, { command, mode }) => {
+export default defineConfig(async (merge, {}) => {
   const baseConfig: UserConfigExport = {
     projectName: 'newGameHome',
     date: '2023-8-29',
@@ -29,7 +29,7 @@ export default defineConfig(async (merge, { command, mode }) => {
     framework: 'vue3',
     compiler: 'webpack5',
     cache: {
-      enable: false // Webpack 持久化缓存配置，建议开启。默认配置请参考：https://docs.taro.zone/docs/config-detail#cache
+      enable: true // Webpack 持久化缓存配置，建议开启。默认配置请参考：https://docs.taro.zone/docs/config-detail#cache
     },
     mini: {
       postcss: {
@@ -60,6 +60,9 @@ export default defineConfig(async (merge, { command, mode }) => {
     h5: {
       publicPath: '/',
       staticDirectory: 'static',
+      router: {
+        mode: 'browser'
+      },
       output: {
         filename: 'js/[name].[hash:8].js',
         chunkFilename: 'js/[name].[chunkhash:8].js'
@@ -75,7 +78,7 @@ export default defineConfig(async (merge, { command, mode }) => {
           config: {}
         },
         cssModules: {
-          enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
+          enable: true, // 默认为 false，如需使用 css modules 功能，则设为 true
           config: {
             namingPattern: 'module', // 转换模式，取值为 global/module
             generateScopedName: '[name]__[local]___[hash:base64:5]'

package.json

@@ -36,49 +36,52 @@
   ],
   "author": "",
   "dependencies": {
-    "@babel/runtime": "^7.21.5",
+    "@babel/runtime": "^7.22.11",
     "@tarojs/components": "3.6.11",
     "@tarojs/helper": "3.6.11",
-    "@tarojs/plugin-platform-weapp": "3.6.11",
+    "@tarojs/plugin-framework-vue3": "3.6.11",
     "@tarojs/plugin-platform-alipay": "3.6.11",
-    "@tarojs/plugin-platform-tt": "3.6.11",
+    "@tarojs/plugin-platform-h5": "3.6.11",
-    "@tarojs/plugin-platform-swan": "3.6.11",
     "@tarojs/plugin-platform-jd": "3.6.11",
     "@tarojs/plugin-platform-qq": "3.6.11",
-    "@tarojs/plugin-platform-h5": "3.6.11",
+    "@tarojs/plugin-platform-swan": "3.6.11",
+    "@tarojs/plugin-platform-tt": "3.6.11",
+    "@tarojs/plugin-platform-weapp": "3.6.11",
     "@tarojs/runtime": "3.6.11",
     "@tarojs/shared": "3.6.11",
     "@tarojs/taro": "3.6.11",
-    "@tarojs/plugin-framework-vue3": "3.6.11",
+    "vue": "^3.3.4"
-    "vue": "^3.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.8.0",
+    "@babel/core": "^7.22.11",
     "@tarojs/cli": "3.6.11",
-    "@types/webpack-env": "^1.13.6",
-    "webpack": "5.78.0",
     "@tarojs/taro-loader": "3.6.11",
+    "@tarojs/test-utils-vue3": "^0.1.1",
     "@tarojs/webpack5-runner": "3.6.11",
+    "@types/jest": "^29.5.4",
+    "@types/node": "^18.17.12",
+    "@types/webpack-env": "^1.18.1",
+    "@typescript-eslint/eslint-plugin": "^5.62.0",
+    "@typescript-eslint/parser": "^5.62.0",
+    "@unocss/webpack": "^0.55.3",
+    "@vue/babel-plugin-jsx": "^1.1.5",
+    "@vue/compiler-sfc": "^3.3.4",
     "babel-preset-taro": "3.6.11",
     "css-loader": "3.4.2",
-    "style-loader": "1.3.0",
+    "eslint": "^8.48.0",
-    "@tarojs/test-utils-vue3": "^0.1.1",
-    "@vue/babel-plugin-jsx": "^1.0.6",
-    "@vue/compiler-sfc": "^3.0.0",
-    "vue-loader": "^17.0.0",
-    "eslint-plugin-vue": "^8.0.0",
     "eslint-config-taro": "3.6.11",
-    "eslint": "^8.12.0",
+    "eslint-plugin-vue": "^8.7.1",
-    "stylelint": "^14.4.0",
+    "jest": "^29.6.4",
-    "@typescript-eslint/parser": "^5.20.0",
+    "jest-environment-jsdom": "^29.6.4",
-    "@typescript-eslint/eslint-plugin": "^5.20.0",
+    "postcss": "^8.4.29",
-    "typescript": "^4.1.0",
+    "style-loader": "1.3.0",
-    "tsconfig-paths-webpack-plugin": "^4.0.1",
+    "stylelint": "^14.16.1",
-    "postcss": "^8.4.18",
     "ts-node": "^10.9.1",
-    "@types/node": "^18.15.11",
+    "tsconfig-paths-webpack-plugin": "^4.1.0",
-    "@types/jest": "^29.3.1",
+    "typescript": "^4.9.5",
-    "jest": "^29.3.1",
+    "unocss": "^0.55.3",
-    "jest-environment-jsdom": "^29.5.0"
+    "unocss-preset-weapp": "^0.55.2",
+    "vue-loader": "^17.2.2",
+    "webpack": "5.78.0"
   }
 }

src/app.config.ts

@@ -1,11 +1,13 @@
 export default defineAppConfig({
   pages: [
-    'pages/index/index'
+    'pages/index/index',
+    'pages/game_list/yaotouzi/index',
+    'pages/game_detail/index'
   ],
   window: {
     backgroundTextStyle: 'light',
     navigationBarBackgroundColor: '#fff',
-    navigationBarTitleText: 'WeChat',
+    navigationBarTitleText: 'Game',
     navigationBarTextStyle: 'black'
   }
 })

src/app.scss

@@ -0,0 +1,7 @@
+.taro_page {
+  background-color: #f5f5f5!important;
+}
+
+.mt-15 {
+  margin-top: 15px;
+}

src/app.ts

@@ -2,8 +2,7 @@ import { createApp } from 'vue'
 import './app.scss'
 
 const App = createApp({
-  onShow (options) {
+  onShow() {
-    console.log('App onShow.')
   },
   // 入口组件不需要实现 render 方法，即使实现了也会被 taro 所覆盖
 })

src/pages/game_detail/index.config.ts

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '游戏详情'
+})

src/pages/game_detail/index.scss

@@ -0,0 +1,32 @@
+.index {
+  position: relative;
+
+  .swiper {
+    background-color: white;
+  }
+
+  .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: #74c0fc;
+      color: #fff;
+      width: 300px;
+      text-align: center;
+      border: 1px solid #f5f5f5;
+
+    }
+  }
+}

src/pages/game_detail/index.vue

@@ -0,0 +1,36 @@
+<template>
+  <view class="index">
+    <swiper
+      class='swiper'
+      :circular="true"
+      :autoplay="true"
+    >
+      <swiper-item v-for="(item,index) in list" :key="index">
+        <image :src="item"/>
+      </swiper-item>
+    </swiper>
+    <view class="container">
+      <view>摇骰子</view>
+      <view>游戏介绍</view>
+      <view>。。。。。。。。。。</view>
+      <view>游戏简介</view>
+      <view>。。。。。。。。。。</view>
+      <view class="btn" @click="startGame()">开始游戏</view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import {ref} from 'vue'
+import Taro from '@tarojs/taro'
+import './index.scss'
+
+const list = ref(['https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg', 'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg', 'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg', 'https://storage.360buyimg.com/jdc-article/fristfabu.jpg'])
+
+
+const startGame = () => {
+  Taro.navigateTo({
+    url: '/pages/game_list/yaotouzi/index'
+  })
+}
+</script>

src/pages/game_list/yaotouzi/index.config.ts

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '摇骰子'
+})

src/pages/game_list/yaotouzi/index.scss

@@ -0,0 +1,259 @@
+.index {
+  background-color: #23684B;
+  width: 100%;
+  height: 100%;
+
+  .tips {
+    width: 100%;
+    height: 80px;
+  }
+
+  .userInfo {
+    width: 680px;
+    margin: 20px auto;
+    padding: 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .left {
+      display: flex;
+      align-items: center;
+
+
+      image {
+        width: 100px;
+        height: 100px;
+        border-radius: 50%;
+        border: 2px solid #FFFFFF;
+      }
+
+      .userText {
+        margin-left: 10px;
+        width: 250px;
+        // 文字超出显示省略号
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+
+        .userName {
+          font-size: 35px;
+        }
+
+        .userScore {
+          font-size: 25px;
+        }
+      }
+    }
+
+
+    .right {
+      background-color: #429C78;
+      border-radius: 50px;
+      flex: 1;
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      padding: 15px;
+
+      .icon {
+        background-image: url("../../../static/dz.png");
+        background-size: 100% 100%;
+        width: 60px;
+        height: 60px;
+        display: inline-block;
+      }
+
+      .bean {
+        margin-left: 20px;
+      }
+    }
+  }
+
+  .gameInfo {
+    width: 680px;
+    margin: 20px auto;
+    padding: 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .left {
+      display: flex;
+
+      image {
+        width: 110px;
+        height: 110px;
+      }
+
+      .game_box {
+        margin-left: 10px;
+        width: 250px;
+        // 文字超出显示省略号
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+
+        .gameName {
+          font-size: 35px;
+        }
+
+        .lottery {
+          font-size: 25px;
+          display: flex;
+          justify-content: flex-start;
+
+          .text {
+            background-color: #E9422F;
+            width: 55px;
+            height: 55px;
+            text-align: center;
+            line-height: 55px;
+            font-size: 40px;
+            margin-right: 30px;
+            border-radius: 10px;
+          }
+        }
+      }
+    }
+
+    .right {
+
+      .btn {
+        width: 137px;
+        background: linear-gradient(-180deg, #FBE039, #FDC413);
+        font-size: 30px;
+        text-align: center;
+        border: 1px solid #FFEDC5;
+        border-radius: 26px;
+      }
+    }
+  }
+
+  .opt {
+    display: flex;
+    justify-content: space-evenly;
+    flex-wrap: wrap;
+
+    .item {
+      width: 140px;
+      text-align: center;
+
+      .name {
+        //font-size: 30px;
+        font-weight: bold;
+      }
+
+      .odd {
+        font-size: 25px;
+      }
+    }
+  }
+
+  .opt1 {
+    display: flex;
+    justify-content: space-evenly;
+    flex-wrap: wrap;
+    text-align: center;
+
+    .item {
+      width: 200px;
+      margin-bottom: 10px;
+      text-align: center;
+      padding: 33px 0;
+
+      .name {
+        font-size: 55px;
+        font-weight: bold;
+      }
+
+      .odd {
+        font-size: 25px;
+      }
+    }
+
+    .base {
+      background-image: url("../../../static/cais.png");
+      background-size: 100% 100%;
+      width: 300px;
+      height: 400px;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-end;
+      align-items: center;
+
+      .qz {
+        background-image: url("../../../static/qz.png");
+        background-size: 100% 100%;
+        width: 300px;
+        height: 100px;
+        margin-bottom: 20px;
+      }
+    }
+  }
+
+  .bottomBar {
+    width: 100%;
+    box-sizing: border-box;
+    height: 130px;
+    position: fixed;
+    bottom: 0;
+    border-top-left-radius: 40px;
+    border-top-right-radius: 40px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 50px;
+
+    .btn1 {
+      background-image: url("../../../static/cz.png");
+      background-size: 100% 100%;
+      width: 150px;
+      height: 100px;
+      text-align: center;
+      line-height: 95px;
+    }
+
+    .btn2 {
+      background-image: url("../../../static/ssd.png");
+      background-size: 100% 100%;
+      width: 150px;
+      height: 100px;
+      text-align: center;
+      line-height: 100px;
+    }
+
+    .btn3 {
+      background-image: url("../../../static/tz.png");
+      background-size: 100% 100%;
+      width: 150px;
+      height: 100px;
+      text-align: center;
+      line-height: 95px;
+    }
+  }
+}
+
+.subColor {
+  background-color: #228960;
+  color: white;
+  border-radius: 10px;
+}
+
+.btn1, .btn2, .btn3 {
+  &:active {
+    animation: btn ease 0.3s;
+  }
+}
+
+@keyframes btn {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.1);
+  }
+  100% {
+    transform: scale(1);
+  }
+}

src/pages/game_list/yaotouzi/index.vue

@@ -0,0 +1,190 @@
+<template>
+  <view class="index">
+    <!--  公告  -->
+    <view class="subColor tips"></view>
+    <!--  用户信息  -->
+    <view class="subColor userInfo">
+      <view class="left">
+        <image src="https://img01.yzcdn.cn/vant/cat.jpeg"></image>
+        <view class="userText">
+          <view class="userName">YuanHuakk</view>
+          <view class="userScore">积分:10000000</view>
+        </view>
+      </view>
+      <view class="right">
+        <view class="icon"></view>
+        <view class="bean">1231321</view>
+      </view>
+    </view>
+    <!--  游戏信息  -->
+    <view class="subColor gameInfo">
+      <view class="left">
+        <image src="../../../static/tx.png"></image>
+        <view class="game_box">
+          <view class="gameName">第1000期开奖</view>
+          <view class="lottery">
+            <text class="text">3</text>
+            <text class="text">4</text>
+            <text class="text">6</text>
+          </view>
+        </view>
+      </view>
+      <view class="right">
+        <view class="btn">开奖记录</view>
+        <view class="btn mt-15">投注记录</view>
+      </view>
+    </view>
+    <!--  选项区  -->
+    <view class="opt">
+      <view class="subColor item" v-for="item in odds" :key="item.id">
+        <view class="name">{{ item.name }}</view>
+        <view class="odd">赢{{ item.odds }}倍</view>
+      </view>
+    </view>
+    <view style="height: 8px;"></view>
+    <view class="opt1">
+      <view>
+        <view class="subColor item">
+          <view class="name">{{ odds1[0].name }}</view>
+          <view class="odd">赢{{ odds1[0].odds }}倍</view>
+        </view>
+        <view class="subColor item">
+          <view class="name">{{ odds1[1].name }}</view>
+          <view class="odd">赢{{ odds1[1].odds }}倍</view>
+        </view>
+      </view>
+      <view class="base">
+        <view class="qz"></view>
+      </view>
+      <view>
+        <view class="subColor item">
+          <view class="name">{{ odds1[2].name }}</view>
+          <view class="odd">赢{{ odds1[2].odds }}倍</view>
+        </view>
+        <view class="subColor item">
+          <view class="name">{{ odds1[3].name }}</view>
+          <view class="odd">赢{{ odds1[3].odds }}倍</view>
+        </view>
+      </view>
+    </view>
+    <view style="height: 4px;"></view>
+    <view class="opt">
+      <view class="subColor item" style="margin-bottom: 10px;" v-for="item in odd2" :key="item.id">
+        <view class="name">{{ item.name }}</view>
+        <view class="odd">赢{{ item.odds }}倍</view>
+      </view>
+    </view>
+    <!--  底部操作栏  -->
+    <view class="subColor bottomBar">
+      <view class="btn1">重置</view>
+      <view class="btn2">X100</view>
+      <view class="btn3">投注</view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import {ref} from 'vue'
+
+const odds = ref([
+  {
+    id: 1,
+    name: '1+1',
+    odds: 1.98
+  },
+  {
+    id: 2,
+    name: '2+2',
+    odds: 1.98
+  }, {
+    id: 3,
+    name: '3+3',
+    odds: 1.98
+  },
+  {
+    id: 4,
+    name: '4+4',
+    odds: 1.98
+  }, {
+    id: 5,
+    name: '5+5',
+    odds: 1.98
+  }
+])
+
+const odds1 = ref([
+  {
+    id: 1,
+    name: '大',
+    odds: 2.98
+  },
+  {
+    id: 2,
+    name: '小',
+    odds: 2.98
+  },
+  {
+    id: 3,
+    name: '单',
+    odds: 2.98
+  },
+  {
+    id: 4,
+    name: '双',
+    odds: 2.98
+  }
+])
+
+const odd2 = ref([
+  {
+    id: 1,
+    name: '和',
+    odds: 2.98
+  },
+  {
+    id: 2,
+    name: '6+6',
+    odds: 1.98
+  }, {
+    id: 3,
+    name: '3',
+    odds: 1.98
+  },
+  {
+    id: 4,
+    name: '4',
+    odds: 1.98
+  },
+  {
+    id: 5,
+    name: '5',
+    odds: 1.98
+  },
+  {
+    id: 6,
+    name: '6',
+    odds: 1.98
+  },
+  {
+    id: 8,
+    name: '8',
+    odds: 1.98
+  }, {
+    id: 9,
+    name: '9',
+    odds: 1.98
+  }, {
+    id: 10,
+    name: '10',
+    odds: 1.98
+  }, {
+    id: 11,
+    name: '11',
+    odds: 1.98
+  }
+])
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

src/pages/index/index.config.ts

@@ -1,3 +1,3 @@
 export default definePageConfig({
-  navigationBarTitleText: '首页'
+  navigationBarTitleText: '游戏大厅'
 })

src/pages/index/index.scss

@@ -0,0 +1,22 @@
+.index {
+  .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;
+    }
+  }
+}

src/pages/index/index.vue

@@ -1,20 +1,33 @@
 <template>
   <view class="index">
-    <text>{{ msg }}</text>
+    <view class="title">游戏大厅</view>
+
+    <view class="card_list">
+      <view class="card_item" v-for="item in list" :key="item.id" @click="toPage(item.id)">{{ item.name }}</view>
+    </view>
   </view>
 </template>
 
-<script>
+<script lang="ts" setup>
 import {ref} from "vue";
+import Taro from "@tarojs/taro";
 import "./index.scss";
 
-export default {
+Taro.useLoad(() => {
-  setup() {
+  console.log("Taro.useLoad");
-    const msg = ref("Hello world");
+})
+
+const list = ref([
+  {
+    id: 1,
+    name: "摇骰子"
+  }
+])
+
+const toPage = (id: number) => {
+  Taro.navigateTo({
+    url: `/pages/game_detail/index?id=${id}`
+  })
+}
 
-    return {
-      msg,
-    };
-  },
-};
 </script>