OverPageOverPage

package.json

@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^0.26.1",
     "core-js": "^3.8.3",
     "two.js": "^0.8.4",
     "vue": "^3.2.13",

src/App.vue

@@ -1,56 +1,62 @@
 <template>
-  <div ref="el"></div>
-  <FireWorkListVue :center="center" :raduis="raduis" ref="firesRef" />
+  <div>
+    <router-view />
+  </div>
+  <!-- <div ref="el"></div> -->
+  <!-- <FireWorkListVue :center="center" :raduis="raduis" ref="firesRef" /> -->
 </template>
 
 <script setup>
-  import { onBeforeUnmount, onMounted, ref } from 'vue';
-  import Two from "two.js";
-  import FireWorkListVue from './components/FireWorkList.vue';
-  import game from "./game";
-
-  const el = ref()
-  const destroyRef = ref()
-  const firesRef = ref()
-
-  const raduis = 150
-  const center = {
-        x: document.body.offsetWidth / 2,
-        y: document.body.offsetHeight / 2,
-      }
-
-
-  const gameInit = () => {
-    destroyRef.value = game({
-      el: el.value,
-      center,
-      raduis,
-      onError: () => {
-        alert('oo ~')
-      },
-      onSuccess: () => {
-        alert('你真牛逼')
-      },
-      onBingo: () => {
-        firesRef.value.toggle()
-      }
-    })
-  }
-
-  onMounted(() => {
-    gameInit()
-  })
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+import Two from 'two.js'
+import FireWorkListVue from './components/FireWorkList.vue'
+import homePage from './components/homePage.vue'
+import game from './game'
+
+const el = ref()
+const destroyRef = ref()
+const firesRef = ref()
+
+const raduis = 150
+const center = {
+  x: document.body.offsetWidth / 2,
+  y: document.body.offsetHeight / 2
+}
 
-  onBeforeUnmount(() => {
-    if (destroyRef.value) {
-      destroyRef.value();
+const gameInit = () => {
+  destroyRef.value = game({
+    el: el.value,
+    center,
+    raduis,
+    onError: () => {
+      alert('oo ~')
+    },
+    onSuccess: () => {
+      alert('你真牛逼')
+    },
+    onBingo: () => {
+      firesRef.value.toggle()
     }
   })
+}
 
+onMounted(() => {
+  // gameInit()
+})
+
+onBeforeUnmount(() => {
+  if (destroyRef.value) {
+    destroyRef.value()
+  }
+})
 </script>
 
 <style>
-html, body, #app {
+html,
+body,
+#app {
   height: 100%;
+  padding: 0;
+  margin: 0;
 }
 </style>

src/components/FireWorkList.vue

@@ -16,6 +16,7 @@
 <script setup>
 import { ref } from 'vue'
 import FireWork from './FireWork.vue'
+
 const colorList = [
   '#f5222d',
   '#d4380d',

src/components/TopRulePage.vue

@@ -0,0 +1,141 @@
+<template>
+  <BackPage>
+    <div v-if="route.query.type =='rule'">
+      <div class="ruleImage-box">
+        <img :src="ruleImage" />
+      </div>
+      <div class="IKnow-box">
+        <img :src="IKnow" @click="goBack" />
+      </div>
+    </div>
+    <div v-else>
+      <div class="ruleImage-box">
+        <img :src="TopImage" />
+        <div class="Scroll-box">
+          <div class="Scroll-box-Content" v-for="(item,index) in Toplist" :key="index">
+            <div class="Scroll-box-Content-sum">{{item.sum}}</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>
+          </div>
+        </div>
+      </div>
+      <div class="IKnow-box">
+        <img :src="GoHome" @click="goBack" />
+      </div>
+    </div>
+  </BackPage>
+</template>
+
+<script>
+import { useRoute, useRouter } from 'vue-router'
+import ruleImage from '../assets/TipsImage/3-3.png'
+import IKnow from '../assets/ButtonImage/我知道了.png'
+import { onMounted } from 'vue'
+
+import TopImage from '../assets/TipsImage/3-2.png'
+import GoHome from '../assets/ButtonImage/返回首页.png'
+export default {
+  setup() {
+    const route = useRoute()
+    const router = useRouter()
+
+    const goBack = () => {
+      // 字符串路径
+      // router.push('/about')
+      router.go(-1)
+    }
+    onMounted(() => {
+      if (route.query.type == 'top') {
+      }
+      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,
+      ruleImage,
+      IKnow,
+      TopImage,
+      GoHome,
+      Toplist,
+      router,
+      route
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.ruleImage-box {
+  width: 100vw;
+  position: absolute;
+  top: 13vh;
+  display: flex;
+  justify-content: center;
+  > img {
+    width: 93%;
+    height: 100%;
+  }
+  .Scroll-box {
+    width: 80%;
+    height: 40vh;
+    top: 18vh;
+    position: absolute;
+    overflow: auto;
+    .Scroll-box-Content {
+      display: flex;
+      border-bottom: 1px dashed rgba(0, 0, 0, 0.3);
+      align-items: center;
+      height: 7vh;
+
+      > img {
+        width: 10vw;
+        height: 5vh;
+        border-radius: 50%;
+      }
+      &-sum {
+        // text-align: left;
+        // padding-left: 2em;
+        width: 25vw;
+        text-align: center;
+      }
+      &-name {
+        width: 30vw;
+        text-align: left;
+      }
+      &-time {
+        width: 30vw;
+        text-align: center;
+      }
+    }
+  }
+}
+.IKnow-box {
+  position: absolute;
+  width: 100vw;
+  display: flex;
+  bottom: 7vh;
+
+  justify-content: center;
+  > img {
+    width: 30%;
+  }
+}
+</style>

src/components/componentsPages/BackPage.vue

@@ -0,0 +1,33 @@
+
+<template>
+  <div>
+    <!-- :style="HomeStyle" -->
+    <div class="index-image">
+      <img :src="backHome" class="bg-image" />
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script >
+import backHome from '../../assets/BackImage/backHome.jpg'
+export default {
+  name: 'BackPage',
+  setup() {
+    return {
+      backHome
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.index-image {
+  height: 100vh;
+  overflow: hidden;
+
+  .bg-image {
+    width: 100vw;
+  }
+}
+</style>

src/components/homePage.vue

@@ -0,0 +1,110 @@
+
+<template>
+  <div>
+    <!-- :style="HomeStyle" -->
+    <BackPage>
+      <!-- <img :src="backHome" class="bg-image" /> -->
+
+      <div class="TitleBox">
+        <img :src="gameTitle" />
+      </div>
+      <div class="bth-div">
+        <!-- <img src="../assets/index/开始游戏.png" class="bth-image" /> -->
+        <img :src="gameSatrt" class="bth-image" @click="linkTo" />
+        <img :src="gameRule" class="bth-image" @click="goRule" />
+      </div>
+    </BackPage>
+  </div>
+</template>
+
+<script >
+import { useRouter } from 'vue-router'
+import backHome from '../assets/BackImage/backHome.jpg'
+import gameTitle from '../assets/BackImage/首页大标.png'
+
+import gameSatrt from '../assets/ButtonImage/开始游戏.png'
+import gameRule from '../assets/ButtonImage/游戏规则.png'
+// import BackPage from './componentsPages/BackPage.vue'
+
+export default {
+  components: {
+    // 2.第二步：父组件中注册子组件
+  },
+  setup() {
+    const router = useRouter()
+    const HomeStyle = {
+      backgroundImage:
+        'url(' + require('../assets/BackImage/backHome.jpg') + ')',
+      backgroundRepeat: 'no-repeat',
+      backgroundSize: '100% auto'
+    }
+
+    const linkTo = () => {
+      // 字符串路径
+      // router.push('/about')
+
+      // 带有路径的对象
+      router.push({
+        path: '/OverPage',
+        query: {
+          type: 'top'
+        }
+      })
+    }
+    const goRule = () => {
+      // 字符串路径
+      // router.push('/about')
+
+      // 带有路径的对象
+      router.push({
+        path: '/TopRulePage',
+        query: {
+          // type: 'top'
+          type: 'rule'
+        }
+      })
+    }
+
+    return {
+      HomeStyle,
+      linkTo,
+      backHome,
+      gameSatrt,
+      gameRule,
+      gameTitle,
+      goRule
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.TitleBox {
+  width: 99%;
+  position: absolute;
+  top: 15vh;
+  display: flex;
+  justify-content: center;
+
+  > img {
+    width: 85%;
+    height: 100%;
+  }
+}
+
+.bg-image {
+  // width: 100%;
+  width: 100vw;
+}
+.bth-div {
+  width: 33vw;
+  position: absolute;
+  top: 80vh;
+  left: 35vw;
+  display: flex;
+  justify-content: center;
+  .bth-image {
+    width: 100%;
+  }
+}
+</style>

src/main.js

@@ -1,4 +1,34 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 
-createApp(App).mount('#app')
+import router from './router'
+import BackPage from './components/componentsPages/BackPage.vue'
+
+// 创建 App实例
+const app = createApp(App)
+
+// redirect()
+
+// Login().then(e => {
+//   new Vue({
+//     router,
+//     store,
+//     render: h => h(App),
+//   }).$mount('#app')
+
+// }).catch(e => {
+//   console.error(e)
+//   // alert('系统错误, 请刷新重试')
+//   // 重试一次
+//   redirect(true)
+// })
+
+// 让整个App应用支持路由
+app.use(router)
+// 将实例挂载到 #app节点上
+app.mount('#app')
+app.component('BackPage', BackPage)
+
+// createApp(App).mount('#app')
+
+

src/router/index.js

@@ -0,0 +1,26 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import homePage from '../components/homePage.vue'
+import OverPage from '../components/OverPage.vue'
+import TopRulePage from '../components/TopRulePage.vue'
+const routerHistory = createWebHistory()
+const routes = [
+  {
+    path: '/',
+    component: homePage
+  },
+  {
+    path: '/OverPage',
+    component: OverPage
+  },
+  {
+    path: '/TopRulePage',
+    component: TopRulePage
+  }
+]
+
+
+const router = createRouter({
+  history: routerHistory,
+  routes
+})
+export default router

src/utils/api.js

@@ -0,0 +1,11 @@
+import request from "./request";
+
+
+
+// /**
+//  * @login
+//  *
+//  */
+// //
+// export const LoginUser = (params, data,) => request(`/api/wx/login?code=${params}`, { method: 'post' })
+

src/utils/initial.js

@@ -0,0 +1,173 @@
+import request from './request'
+import { LoginUser, pv } from './api'
+
+
+
+const jsApiList = [
+  'updateAppMessageShareData',
+  'updateTimelineShareData',
+  'onMenuShareTimeline',
+  'onMenuShareAppMessage',
+  'onMenuShareQQ',
+  'onMenuShareWeibo',
+  'onMenuShareQZone'
+]
+
+function initSDK (url) {
+  request(`/api/wx/jssdk?url=${encodeURIComponent(url)}`)
+    .then((res) => {
+      window.wx.config({
+        debug: process.env.NODE_ENV === 'development', // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
+        appId: res.appId, // 必填，公众号的唯一标识
+        timestamp: res.timestamp, // 必填，生成签名的时间戳
+        nonceStr: res.nonceStr, // 必填，生成签名的随机串
+        signature: res.signature, // 必填，签名
+        jsApiList // 必填，需要使用的JS接口列表
+      })
+    })
+}
+// Vue.use(Vuex)
+
+/**
+ * 分享
+ * @param {*} opt
+ */
+export function share (opt) {
+  const { origin, pathname, search } = window.location
+  // const defaultLink = origin + pathname
+  const defaultImg = `${origin}${pathname}images/share.png`
+
+  const link = origin + pathname + search // window.location.href
+  const imgUrl = opt.imgUrl || defaultImg
+
+  initSDK(link)
+  window.wx.ready(function () {
+    jsApiList.map((apiName) => {
+      const fn = window.wx[apiName]
+      if (typeof fn === 'function') {
+        fn({
+          title: opt.title || '干洗护理 诠释新生', // 分享标题
+          link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
+          imgUrl, // 分享图标
+          desc: opt.desc || 'COLMO开启干洗护理新时代'
+        })
+      }
+    })
+  })
+}
+
+
+export function Login () {
+  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 => {
+    // PVsum
+    console.log(e);
+    let userInfo = {
+      token: e.token,
+      name: e.person.name,
+      phone: e.person.phone,
+      personId: e.person.personId,
+    }
+    let location = window.location.href
+
+    console.log(3, isLoaded);
+
+
+    try {
+      pv({ addr: location })
+    } catch (error) {
+      console.error(error)
+    }
+    try {
+      share({
+        title: '干洗护理 诠释新生',
+        desc: 'COLMO开启干洗护理新时代'
+      })
+    } catch (error) {
+      console.error(error)
+    }
+    if (isLoaded) {
+      console.log('hideLoading', isLoaded);
+      hideLoading()
+
+
+    } else {
+      isLoaded = true
+
+      console.log(4, isLoaded);
+
+    }
+    // setTimeout(() => {
+    //   console.log("🚀 ~ file: initial.js ~ line 110 ~ setTimeout ~ isLoaded", isLoaded)
+
+    //   if (isLoaded) {
+    //     hideLoading()
+    //   } else {
+
+    //     isLoaded = true
+    //   }
+    // }, 5000)
+
+
+    return;
+  })
+}
+
+function hideLoading () {
+  document.getElementsByClassName('boxZoom')[0].style = "display: none"
+
+}
+
+/**
+ * 获取 code
+ * @returns 
+ */
+export function getCode () {
+  const matched = /[?&]*code=([^&]+)/.exec(location.search)
+  if (matched) {
+    return decodeURIComponent(matched[1])
+  }
+}
+
+/**
+ * 跳转授权页面
+ */
+export function redirect (force) {
+  if (process.env.NODE_ENV === 'development') return;
+
+  const originCode = localStorage.getItem('wxcode');
+  const wxfirst = localStorage.getItem('wxfirst') === null;
+  const queryCode = getCode();
+
+  localStorage.setItem('wxcode', queryCode)
+  localStorage.setItem('wxfirst', 'not');
+
+  if (force || wxfirst || !queryCode || queryCode === originCode) {
+
+    const local = encodeURIComponent(location.origin + location.pathname)
+    const url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxd3bab568bc42d1de&redirect_uri=${local}&response_type=code&scope=snsapi_base&state=123#wechat_redirect`
+    window.location.href = url;
+  }
+}

src/utils/request.js

@@ -0,0 +1,38 @@
+
+import axios from 'axios'
+
+export const domain = process.env.NODE_ENV === 'development' ? '' : 'http://colmo-service.dianyang.njyunzhi.com'
+
+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,
+    // }
+    axios.request({
+      ...leftOptions,
+      url: `${domain}${url}`,
+      // header: header,
+      headers: header,
+    }).then(res => {
+      const { code, data, message } = res.data
+      if (code === 1000) {
+        resolve(data)
+      } else {
+        reject(res.data)
+      }
+    }).catch(err => {
+      const message = err.message || err.errMsg || err
+      console.error("🚀 错误~ err", err)
+
+
+      if (err.message.includes('timeout')) {
+        // 请求超时
+        // Message.error('请求超时')
+      }
+      reject(err)
+    })
+  })
+}

yarn.lock

@@ -1939,6 +1939,13 @@ autoprefixer@^10.2.4:
     picocolors "^1.0.0"
     postcss-value-parser "^4.2.0"
 
+axios@^0.26.1:
+  version "0.26.1"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.26.1.tgz#1ede41c51fcf51bbbd6fd43669caaa4f0495aaa9"
+  integrity sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA==
+  dependencies:
+    follow-redirects "^1.14.8"
+
 babel-loader@^8.2.2:
   version "8.2.4"
   resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.2.4.tgz#95f5023c791b2e9e2ca6f67b0984f39c82ff384b"
@@ -3224,7 +3231,7 @@ flatted@^3.1.0:
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.5.tgz#76c8584f4fc843db64702a6bd04ab7a8bd666da3"
   integrity sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==
 
-follow-redirects@^1.0.0:
+follow-redirects@^1.0.0, follow-redirects@^1.14.8:
   version "1.14.9"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.9.tgz#dd4ea157de7bfaf9ea9b3fbd85aa16951f78d8d7"
   integrity sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==