feats

package-lock.json

         "webpack-merge": "^5.7.3",
         "webpack-virtual-modules": "^0.4.2",
         "whatwg-fetch": "^3.6.2"
+      },
+      "dependencies": {
+        "@vue/vue-loader-v15": {
+          "version": "npm:vue-loader@15.9.8",
+          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.9.8.tgz",
+          "integrity": "sha512-GwSkxPrihfLR69/dSV3+5CdMQ0D+jXg8Ma1S4nQXKJAznYFX14vHdc/NetQc34Dw+rBbIJyP7JOuVb9Fhprvog==",
+          "dev": true,
+          "requires": {
+            "@vue/component-compiler-utils": "^3.1.0",
+            "hash-sum": "^1.0.2",
+            "loader-utils": "^1.1.0",
+            "vue-hot-reload-api": "^2.3.0",
+            "vue-style-loader": "^4.1.0"
+          },
+          "dependencies": {
+            "hash-sum": {
+              "version": "1.0.2",
+              "resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-1.0.2.tgz",
+              "integrity": "sha1-M7QHd3VMZDJXPBIMw4CLvRDUfwQ=",
+              "dev": true
+            }
+          }
+        },
+        "json5": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
+          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.0"
+          }
+        },
+        "loader-utils": {
+          "version": "1.4.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
+          "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^1.0.1"
+          }
+        }
       }
     },
     "@vue/cli-shared-utils": {
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.31.tgz",
       "integrity": "sha512-ymN2pj6zEjiKJZbrf98UM2pfDd6F2H7ksKw7NDt/ZZ1fh5Ei39X5tABugtT03ZRlWd9imccoK0hE8hpjpU7irQ=="
     },
-    "@vue/vue-loader-v15": {
-      "version": "npm:vue-loader@15.9.8",
-      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.9.8.tgz",
-      "integrity": "sha512-GwSkxPrihfLR69/dSV3+5CdMQ0D+jXg8Ma1S4nQXKJAznYFX14vHdc/NetQc34Dw+rBbIJyP7JOuVb9Fhprvog==",
-      "dev": true,
-      "requires": {
-        "@vue/component-compiler-utils": "^3.1.0",
-        "hash-sum": "^1.0.2",
-        "loader-utils": "^1.1.0",
-        "vue-hot-reload-api": "^2.3.0",
-        "vue-style-loader": "^4.1.0"
-      },
-      "dependencies": {
-        "hash-sum": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-1.0.2.tgz",
-          "integrity": "sha1-M7QHd3VMZDJXPBIMw4CLvRDUfwQ=",
-          "dev": true
-        },
-        "json5": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
-          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
-          "dev": true,
-          "requires": {
-            "minimist": "^1.2.0"
-          }
-        },
-        "loader-utils": {
-          "version": "1.4.0",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
-          "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
-          "dev": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^1.0.1"
-          }
-        }
-      }
-    },
     "@vue/web-component-wrapper": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/@vue/web-component-wrapper/-/web-component-wrapper-1.3.0.tgz",
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vuex": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.0.2.tgz",
+      "integrity": "sha512-M6r8uxELjZIK8kTKDGgZTYX/ahzblnzC4isU1tpmEuOIIKmV+TRdc+H4s8ds2NuZ7wpUTdGRzJRtoj+lI+pc0Q==",
+      "requires": {
+        "@vue/devtools-api": "^6.0.0-beta.11"
+      }
+    },
     "watchpack": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.3.1.tgz",

package.json

     "core-js": "^3.8.3",
     "two.js": "^0.8.4",
     "vue": "^3.2.13",
-    "vue-router": "4"
+    "vue-router": "4",
+    "vuex": "^4.0.2"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",

src/main.js

 import { createApp } from 'vue'
 import App from './App.vue'
-
 import router from './router'
 import BackPage from './components/BackPage.vue'
 import GrassGIF from './components/GrassGIF.vue'
+import { Login, redirect } from './utils/initial'
 import MusicOnce from './components/MusicOnce.vue'
 
 // 创建 App实例
 
 // redirect()
 
-// Login().then(e => {
+Login().then(e => {
 
-// }).catch(e => {
-//   console.error(e)
-//   alert('系统错误, 请刷新重试')
-//   redirect(true)
-// })
+}).catch(e => {
+  console.error(e)
+  // alert('系统错误, 请刷新重试')
+  redirect(true)
+})
 
 // 让整个App应用支持路由
 app.use(router)

src/pages/TopRulePage.vue

         <img :src="TopImage" />
         <div class="Scroll-box">
           <div v-for="(item,index) in Toplist" :key="index" class="Scroll-box-Content">
-            <div class="Scroll-box-Content-sum">{{ item.sum }}</div>
+            <div class="Scroll-box-Content-sum">{{ index+1 }}</div>
             <div class="Scroll-box-Content-name">{{ item.name }}</div>
-            <img
-              src="https://cn.bing.com/th?id=OVFT.JaWQdfSE_pzTsHLmGjbsgS&pid=News&w=197&h=112&c=14&rs=2&qlt=90"
-            />
-            <div class="Scroll-box-Content-time">{{ item.tiem }}</div>
+            <img :src="item.avatar" />
+            <div class="Scroll-box-Content-time">{{ item.totalMillsec/1000 }}s</div>
           </div>
         </div>
       </div>
 
 <script>
 import { useRoute, useRouter } from 'vue-router'
-import { onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 import ruleImage from '@/assets/TipsImage/3-3.png'
 import IKnow from '@/assets/ButtonImage/我知道了.png'
 import TopImage from '@/assets/TipsImage/3-2.png'
 import GoHome from '@/assets/ButtonImage/返回首页.png'
+import { gameTop } from '@/utils/api'
 
 export default {
   setup() {
       // 字符串路径
       router.push('/')
     }
+    let Toplist = ref([])
 
     onMounted(() => {
       if (route.query.type == 'top') {
+        gameTop().then((e) => {
+          Toplist.value = e
+          console.log(e)
+        })
       }
       console.log(router)
       // 打印
     })
 
-    const Toplist = [
-      { sum: 2, name: '陈一狗', tiem: '10s' },
-      { sum: 45, name: '陈二狗', tiem: '10s' },
-      { sum: 5, name: '陈三狗', tiem: '10s' },
-      { sum: 4, name: '陈四狗', tiem: '26s' },
-      { sum: 2, name: '陈五狗', tiem: '10s' },
-      { sum: 1, name: '陈六狗', tiem: '10s' },
-      { sum: 2, name: '陈七狗', tiem: '6s' },
-      { sum: 2, name: '陈八狗', tiem: '10s' },
-      { sum: 2, name: '陈九个狗', tiem: '10s' },
-      { sum: 2, name: '陈十狗', tiem: '10m6s' },
-      { sum: 2, name: '山二猫', tiem: '10s' },
-      { sum: 2, name: '陈把饭狗', tiem: '1h12m33s' }
-    ]
     return {
       goBack,
       gohomePage,

src/pages/game/game.js

   ropeImage9,
 ];
 
-export default function game({ el, center, onError, onSuccess, onBingo }) {
+export default function game ({ el, center, onError, onSuccess, onBingo }) {
 
   // 是否游戏结束
   let isFinished = false;
 
   // 轿厢 - 子弹
   const bullets = []
-  
+
   // 子弹是否在射击状态, 如果是, 不能进行其他操作
   let isShooting = false
-  
+
   // 子弹飞行速度, 因为是向上飞, y 值是不端减小的过程
   const speed = -5;
 
 
   // 轿厢的初始旋转弧度
   let rotateAngle = 0
-  
+
   // 轿厢的旋转速度 - 单位弧度
   const rotateSpeed = 0.015
 
   }).appendTo(el);
 
   // 绘制背景
-  makeBg({two, center});
-  
+  makeBg({ two, center });
+
   // 绘制转盘
   const wheelArc = two.makeCircle(center.x, center.y, 0);
   const lightArc = two.makeCircle(center.x, center.y, 0);
     wheelArc.rotation = rotateAngle
     roundAbout.forEach((x, inx) => {
       x.rotation = rotateAngle
-            
+
       // 计算旋转后的轿厢坐标
       const cage = cageList[inx]
       const angle = cage.__$angle + rotateAngle + perAngle / 2
 
       return arc
     })
-    
+
     cageTexture.bind('load', () => {
       const r = cageTexture.image.naturalWidth / 2;
       list.forEach(it => {
 
     bullets.push(...list)
   }
-  drawBullets(center.x, center.y + pedestalDistance * scale)  
+  drawBullets(center.x, center.y + pedestalDistance * scale)
   // 待发射子弹
   const clip = bullets.slice()
-  
+
   // 绘制计数器
   const drawCounter = (x, y) => {
     const counterTexture = two.makeTexture(countImage);
     // 写入映射表
     mntMap[cage.id] = targ
   }
-  
+
   // 当前子弹
   let currentBullet = null;
   // 射击
       const rect1 = it.getBoundingClientRect();
 
       // 校验范围为轿厢内部一半的地方
-      const left = rect1.left  + rect1.width / 3
+      const left = rect1.left + rect1.width / 3
       const right = rect1.right - rect1.width / 3
       const top = rect1.top
       const bottom = rect1.bottom
       // 如果当前子弹的中心点位于目标轿厢矩形范围内
       // 则代表击中
       return x >= left && x <= right &&
-          y >= top && y <= bottom;
+        y >= top && y <= bottom;
     })[0]
 
     if (!cage) return false;  // 未找到对应的目标轿厢
 
     return cage
   }
-  
+
   // 重复绘制内容
-  two.bind('update', () => {    
+  two.bind('update', () => {
     rotate()
     if (!isFinished) {
       if (isShooting) {
 
   two.update();
   two.play();
-  console.log('-------twotwotwo--------')
 
   return {
     two,
   }
 }
 
-function makeBg({two, center}) {
+function makeBg ({ two, center }) {
   const bgTexture = two.makeTexture(backImage);
 
   const bgBox = two.makeRectangle(center.x, center.y, 0, 0);

src/pages/game/index.vue

 <template>
   <div ref="el" />
-  <FireWorkListVue
-    ref="firesRef"
-    :center="center"
-    :raduis="raduis"
-  />
-  <MusicOnce
-    ref="bingoRef"
-    :src="bingoMusic"
-  />
-  <MusicOnce
-    ref="failRef"
-    :src="failMusic"
-  />
-  <MusicOnce
-    ref="successRef"
-    :src="successMusic"
-  />
+  <FireWorkListVue ref="firesRef" :center="center" :raduis="raduis" />
+  <MusicOnce ref="bingoRef" :src="bingoMusic" />
+  <MusicOnce ref="failRef" :src="failMusic" />
+  <MusicOnce ref="successRef" :src="successMusic" />
 </template>
 
 <script setup>
-  import { onBeforeUnmount, onMounted, ref } from 'vue';
-  import { useRouter } from 'vue-router';
-  import FireWorkListVue from '@/components/FireWorkList.vue';
-  import game from "./game.js";
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import FireWorkListVue from '@/components/FireWorkList.vue'
+import game from './game.js'
+import { gameOver, gameStart } from '@/utils/api.js'
 
-  const path = window.location.origin + window.location.pathname
-  const bingoMusic = `${path}/music/bingo.mp3`
-  const failMusic = `${path}/music/fail.mp3`
-  const successMusic = `${path}/music/bingo.mp3`
+// // 修复一个 two-js bug ，当页面返回的时候, 不能正常渲染
+// // 所以这边判断如果第二次进入页面就强制刷新
+// const loadSign = localStorage.getItem('loadSign');
+// if (loadSign) {
+//   localStorage.removeItem('loadSign');
+//   window.location.href = window.location.href;
+// }
 
-  const el = ref()
-  const bingoRef = ref()
-  const failRef = ref()
-  const successRef = ref()
-  const destroyRef = ref()
-  const firesRef = ref()
-  const router = useRouter()
-  const raduis = ref(150)
+const el = ref()
+const destroyRef = ref()
+const firesRef = ref()
+const router = useRouter()
+const raduis = ref(150)
+const path = window.location.origin + window.location.pathname
+const bingoMusic = `${path}/music/bingo.mp3`
+const failMusic = `${path}/music/fail.mp3`
+const successMusic = `${path}/music/bingo.mp3`
 
-  const center = {
-        x: document.body.offsetWidth / 2,
-        y: document.body.offsetHeight / 2,
-      }
+const bingoRef = ref()
+const failRef = ref()
+const successRef = ref()
 
-  const gameInit = () => {
-    destroyRef.value = game({
-      el: el.value,
-      center,
-      onError: () => {
-        failRef.value.play()
-        const t = setTimeout(() => {
-          localStorage.setItem('loadSign', '1');
-          router.push('/OverPage?type=lose')
-          clearTimeout(t)
-        }, 1000)
-      },
-      onSuccess: () => {
-        successRef.value.play()
-        firesRef.value.toggle()
-        // alert('你真牛逼')
-        const t = setTimeout(() => {
-          localStorage.setItem('loadSign', '1');
-          router.push('/OverPage?type=win')
-          clearTimeout(t)
-        }, 2000)
-      },
-      onBingo: () => {
-        bingoRef.value.play()
-      }
-    })
-
-    raduis.value = destroyRef.value.raduis
-  }
-
-
-  onMounted(() => {
-    gameInit()
-  })
+const center = {
+  x: document.body.offsetWidth / 2,
+  y: document.body.offsetHeight / 2
+}
 
-  onBeforeUnmount(() => {
-    if (destroyRef.value) {
-      destroyRef.value.destroy();
+const gameInit = () => {
+  destroyRef.value = game({
+    el: el.value,
+    center,
+    onError: () => {
+      failRef.value.play()
+      const t = setTimeout(() => {
+        localStorage.setItem('loadSign', '1')
+        router.push('/OverPage?type=lose')
+        clearTimeout(t)
+      }, 1000)
+    },
+    onSuccess: () => {
+      successRef.value.play()
+      firesRef.value.toggle()
+      // alert('你真牛逼')
+      const t = setTimeout(() => {
+        localStorage.setItem('loadSign', '1')
+        router.push('/OverPage?type=win')
+        clearTimeout(t)
+      }, 2000)
+    },
+    onBingo: () => {
+      bingoRef.value.play()
     }
   })
 
+  raduis.value = destroyRef.value.raduis
+}
+
+onMounted(() => {
+  gameStart()
+  gameInit()
+})
+
+onBeforeUnmount(() => {
+  if (destroyRef.value) {
+    destroyRef.value.destroy()
+  }
+})
 </script>
 
 <style>
-html, body, #app {
+html,
+body,
+#app {
   height: 100%;
   margin: 0;
   padding: 0;

src/pages/homePage.vue

 import gameSatrt from '@/assets/ButtonImage/开始游戏.png'
 import gameRule from '@/assets/ButtonImage/游戏规则.png'
 import BgMusic from '@/components/BackPage.vue'
+import { gameStart } from '@/utils/api.js'
 
 export default {
   setup() {
     const router = useRouter()
 
     const linkTo = () => {
-      // 字符串路径
-
-      // router.push('/about')
-
-      // 带有路径的对象
       router.push({
         path: '/game'
         // query: {
       })
     }
     const goRule = () => {
-      // 字符串路径
-      // router.push('/about')
-
-      // 带有路径的对象
       router.push({
         path: '/TopRulePage',
         query: {
-          // type: 'top'
           type: 'rule'
         }
       })

src/utils/api.js

 //
 export const LoginUser = (params, data,) => request(`/api/wx/login?code=${params}`, { method: 'post' })
 
+
+
+/**
+ * @游戏开始
+ *
+ */
+//
+export const gameStart = () => request(`/api/wx/game/start`, { method: 'post' })
+
+/**
+ * @游戏结束
+ *
+ */
+//
+export const gameOver = () => request(`/api/wx/game/over`, { method: 'post' })
+
+
+
+/**
+ * @游戏排行榜
+ *
+ */
+//
+export const gameTop = () => request(`/api/wx/top`, { method: 'get' })
+
+

src/utils/initial.js

   console.log(1);
   const code = process.env.NODE_ENV === 'development' ? '123' : getCode()
 
-  let isLoaded = false; //定义变量
-
-
-  //执行Timeout 如果一秒内登陆成功，由LoginUser改变isLoaded状态，Timeout 一秒后发现isLoaded为true，则关闭。
-  const t = setTimeout(() => {
-    console.log(2);
-
-    if (isLoaded) {
-      console.log(isLoaded);
-
-      hideLoading()
-    } else {
-      console.log('isLoaded=true');
-
-      isLoaded = true
-    }
-    clearTimeout(t);
-  }, 2000);
-
 
   return LoginUser(code).then(e => {
-    console.log("🚀 ~ file: initial.js ~ line 85 ~ returnLoginUser ~ code", code)
-    // PVsum
-    console.log(e);
-    let userInfo = {
-      token: e.token,
-      name: e.person.name,
-      phone: e.person.phone,
-      personId: e.person.personId,
-    }
-
-    console.log(3, isLoaded);
-
-
+    window.localStorage.setItem("token", e.token);//保存数据
 
     try {
       share({
       console.log(4, isLoaded);
 
     }
-    // setTimeout(() => {
-    //   console.log("🚀 ~ file: initial.js ~ line 110 ~ setTimeout ~ isLoaded", isLoaded)
-
-    //   if (isLoaded) {
-    //     hideLoading()
-    //   } else {
-
-    //     isLoaded = true
-    //   }
-    // }, 5000)
-
-
     return;
   })
 }

src/utils/request.js

 
 import axios from 'axios'
-
+import { LoginUser, } from './api'
+import { getCode } from './initial'
 export const domain = process.env.NODE_ENV === 'development' ? '' : 'http://colmo-service.dianyang.njyunzhi.com'
 
+let token = ''
 export default function (url, options) {
   const { params, header, ...leftOptions } = options || {}
 
   return new Promise((resolve, reject) => {
-    // const { code, token } = store.state.user
-    // let header = {
-    //   'X-Authorization-JWT': token,
-    // }
+    const token = window.localStorage.getItem('token')
+    let header = {
+      'X-Authorization-JWT': token,//读取数据,
+    }
     axios.request({
       ...leftOptions,
       url: `${domain}${url}`,
     })
   })
 }
+
+

yarn.lock

   optionalDependencies:
     prettier "^1.18.2 || ^2.0.0"
 
-"@vue/devtools-api@^6.0.0":
+"@vue/devtools-api@^6.0.0", "@vue/devtools-api@^6.0.0-beta.11":
   version "6.1.4"
   resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.1.4.tgz#b4aec2f4b4599e11ba774a50c67fa378c9824e53"
   integrity sha512-IiA0SvDrJEgXvVxjNkHPFfDx6SXw0b/TUkqMcDZWNg9fnCAHbTpoo59YfJ9QLFkwa3raau5vSlRVzMSLDnfdtQ==
     "@vue/server-renderer" "3.2.31"
     "@vue/shared" "3.2.31"
 
+vuex@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/vuex/-/vuex-4.0.2.tgz#f896dbd5bf2a0e963f00c67e9b610de749ccacc9"
+  integrity sha512-M6r8uxELjZIK8kTKDGgZTYX/ahzblnzC4isU1tpmEuOIIKmV+TRdc+H4s8ds2NuZ7wpUTdGRzJRtoj+lI+pc0Q==
+  dependencies:
+    "@vue/devtools-api" "^6.0.0-beta.11"
+
 watchpack@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.3.1.tgz#4200d9447b401156eeca7767ee610f8809bc9d25"