fleu

src/components/BackPage.vue

@@ -28,7 +28,6 @@ export default {
 .index-image {
   height: 100vh;
   overflow: hidden;
-  z-index: 2000;
 
   .bg-image {
     width: 100vw;

src/components/BgMusic.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="bg-music" :class="{ ['icon-playing']: playing }" @click="handleClick" v-show="show">
+    <audio :src="url" ref="audioRef" loop @loadedmetadata="show = true" @play="handlePlay"></audio>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'BgMusic',
+  data() {
+    const { origin, pathname } = window.location
+
+    return {
+      show: false,
+      playing: false,
+      url: `${origin}${pathname}bg.mp3`
+    }
+  },
+  mounted() {
+    document.body.addEventListener('click', this.handleClick)
+
+    this.$nextTick(() => {
+      this.handleIOSAudio()
+    })
+  },
+  methods: {
+    handleIOSAudio() {
+      const isiOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
+      if (isiOS) {
+        document.addEventListener(
+          'WeixinJSBridgeReady',
+          () => {
+            this.$refs.audioRef.load()
+          },
+          false
+        )
+      }
+    },
+    handleClick() {
+      if (!this.show || !this.$refs.audioRef) return
+
+      if (this.playing) {
+        this.$refs.audioRef.pause()
+      } else {
+        this.$refs.audioRef.play()
+      }
+
+      this.playing = !this.playing
+    },
+
+    handlePlay() {
+      document.body.removeEventListener('click', this.handleClick)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.bg-music {
+  position: fixed;
+  top: 1em;
+  right: 1em;
+  z-index: 10;
+
+  width: 2em;
+  height: 2em;
+  background-image: url('~@/assets/ButtonImage/play.png');
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+
+  &.icon-playing {
+    background-image: url('~@/assets/indexImg/paused.png');
+    animation: musicrotate 3s linear infinite;
+  }
+
+  & > audio {
+    max-width: 1px;
+    max-height: 1px;
+  }
+}
+
+@keyframes musicrotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>

src/pages/OverPage.vue

@@ -6,6 +6,9 @@
       </div>
       <img v-if="route.query.type =='win'" :src="winTopImage" class="overImage-top-box" />
       <img v-else :src="loseTopImage" class="overImage-top-box" />
+      <div v-show="visImage" @click="goShares" class="visImage">
+        <img :src="shareImag" />
+      </div>
 
       <div class="IKnow-box">
         <div class="IKnow-box-top">
@@ -16,6 +19,9 @@
           <img :src="goTop" @click="goTops" />
         </div>
       </div>
+      <!-- <div v-show="visImage" class="visImage">
+        <img :src="shareImag" />
+      </div>-->
     </div>
   </BackPage>
 </template>
@@ -29,9 +35,13 @@ import loseTopImage from '@/assets/RoundaboutImage/2-12.png'
 import tryAgain from '@/assets/ButtonImage/再玩一次.png'
 import goShare from '@/assets/ButtonImage/和好友一起玩.png'
 import goTop from '@/assets/ButtonImage/排行榜.png'
+import shareImag from '@/assets/shareImage/share.png'
+import { ref } from '@vue/reactivity'
 
 export default {
   setup() {
+    let visImage = ref(false)
+
     const route = useRoute() //跳转
     const router = useRouter() //拿参
     const tryAgains = () => {
@@ -49,15 +59,16 @@ export default {
       })
     }
     const goShares = () => {
+      visImage.value = !visImage.value
+      console.log(visImage)
       //     router.push({
       //   path: '/TopRulePage',
       //   query: {
       //     // type: 'top'
       //     type: 'top'
       //   }
-      // })
+      // }) const data = ref(initValue)
     }
-    goShare
 
     return {
       overImage,
@@ -67,6 +78,8 @@ export default {
       goShare,
       goTop,
       route,
+      visImage,
+      shareImag,
       tryAgains,
       goTops,
       goShares
@@ -94,6 +107,22 @@ export default {
   top: 9vh;
   left: 15vw;
 }
+.visImage {
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.8);
+  position: absolute;
+  top: 0;
+  z-index: 888;
+  > img {
+    position: absolute;
+
+    top: 5vh;
+    right: 3vw;
+    width: 6vw;
+    animation: tipup 1s ease infinite;
+  }
+}
 .IKnow-box {
   position: absolute;
   bottom: 7vh;
@@ -116,4 +145,16 @@ export default {
     }
   }
 }
+
+@keyframes tipup {
+  0% {
+    transform: translateY(0%);
+  }
+  50% {
+    transform: translateY(5%);
+  }
+  100% {
+    transform: translateY(0%);
+  }
+}
 </style>

src/pages/TopRulePage.vue

@@ -137,7 +137,6 @@ export default {
   position: absolute;
   width: 100vw;
   z-index: 500;
-
   display: flex;
   bottom: 7vh;
 

src/pages/homePage.vue

@@ -2,6 +2,7 @@
 <template>
   <div>
     <BackPage>
+      <BgMusic />
       <div class="TitleBox">
         <img :src="gameTitle" />
       </div>
@@ -17,9 +18,9 @@
 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 BgMusic from '@/components/BackPage.vue'
 
 export default {
   setup() {
@@ -32,10 +33,10 @@ export default {
 
       // 带有路径的对象
       router.push({
-        path: '/game'
-        // query: {
-        //   type: 'win'
-        // }
+        path: '/OverPage',
+        query: {
+          type: 'win'
+        }
       })
     }
     const goRule = () => {
@@ -58,7 +59,8 @@ export default {
       gameSatrt,
       gameRule,
       gameTitle,
-      goRule
+      goRule,
+      BgMusic
     }
   }
 }

src/utils/initial.js

@@ -169,3 +169,34 @@ export function redirect (force) {
     window.location.href = url;
   }
 }
+
+
+/**
+ * 获取 openid
+ * @returns 
+ */
+export function getOpenId () {
+  if (process.env.NODE_ENV === 'development') return Promise.resolve('123');
+
+  const code = getCode()
+  if (!code) {
+    return Promise.reject("获取用户信息失败, 请刷新重试")
+  }
+
+  return request(`https://api.h5.njyunzhi.com/mp/openid?code=${encodeURIComponent(code)}`)
+}
+
+/**
+ * 获取 openid
+ * @returns 
+ */
+export function getUserInfo () {
+  if (process.env.NODE_ENV === 'development') return Promise.resolve({ openid: '123' });
+
+  const code = getCode()
+  if (!code) {
+    return Promise.reject("获取用户信息失败, 请刷新重试")
+  }
+
+  return request(`https://api.h5.njyunzhi.com/mp/userinfo?code=${encodeURIComponent(code)}`)
+}