提交

src/components/playBtn.vue

@@ -31,14 +31,62 @@
   </svg>
 </template>
 <script setup>
-// import { reactive } from "vue";
+import { ref, defineProps } from 'vue';
 /**
  * window.$originData.orginParames.title 页面标题
  * window.$originData.orginParames.parameters 固定参数值
  * window.$originData.urlParames url参数
  */
+
+const props = defineProps({
+  url: {
+    type: String, //参数类型
+    default: String, //默认值
+    required: true, //是否必须传递
+  },
+});
+const play_stats = ref(false);
+const audio = new Audio(props.url);
+audio.loop = true; // 循环播放
+audio.autoplay = 'autoplay';
+audio.oncanplay = () => {
+  let t = setTimeout(() => {
+    window.WeixinJSBridge &&
+      window.WeixinJSBridge.invoke(
+        'getNetworkType',
+        {},
+        () => {
+          audio.play();
+        },
+        false
+      );
+    clearTimeout(t);
+  }, 500);
+};
+audio.onplaying = () => (play_stats.value = !audio.paused);
+audio.onpause = () => (play_stats.value = !audio.paused);
+const play = () => {
+  if (audio.paused) {
+    // 播放
+    audio.play();
+  } else {
+    // 暂停
+    audio.pause();
+  }
+};
 </script>
 <style scoped>
+.imgbtn {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  z-index: 10;
+  transform-origin: center;
+  -webkit-animation: rotating 1.2s linear infinite;
+  -moz-animation: rotating 1.2s linear infinite;
+  -o-animation: rotating 1.2s linear infinite;
+  animation: rotating 1.2s linear infinite;
+}
 /* 按钮动画 */
 @-webkit-keyframes rotating {
   0% {

src/view/AEROSPACE2023/index copy.vue

@@ -1,191 +0,0 @@
-<template>
-  <div class="AEROSPACE2023" @touchmove="touchmove">
-    <div ref="main" class="page" @touchstart="touchstart" @touchend="touchend">
-      <page0
-        :class="{
-          animate__animated: page === 0,
-          animate__fadeInUp: isUp && page === 0,
-          animate__fadeInDown: !isUp && page === 0,
-        }"
-        v-if="page === 0"
-      />
-      <page1
-        :class="{
-          animate__animated: page === 1,
-          animate__fadeInUp: isUp && page === 1,
-          animate__fadeInDown: !isUp && page === 1,
-        }"
-        v-if="page === 1"
-      />
-      <page2
-        :class="{
-          animate__animated: page === 2,
-          animate__fadeInUp: isUp && page === 2,
-          animate__fadeInDown: !isUp && page === 2,
-        }"
-        v-if="page === 2"
-      />
-      <page4
-        :class="{
-          animate__animated: page === 4,
-          animate__fadeInUp: isUp && page === 4,
-          animate__fadeInDown: !isUp && page === 4,
-        }"
-        v-if="page === 4"
-      />
-      <page5
-        :class="{
-          animate__animated: page === 5,
-          animate__fadeInUp: isUp && page === 5,
-          animate__fadeInDown: !isUp && page === 5,
-        }"
-        v-if="page === 5"
-      />
-      <page6
-        :class="{
-          animate__animated: page === 6,
-          animate__fadeInUp: isUp && page === 6,
-          animate__fadeInDown: !isUp && page === 6,
-        }"
-        v-if="page === 6"
-      />
-    </div>
-  </div>
-</template>
-<script setup>
-import { ref } from 'vue';
-import page0 from './page0.vue';
-import page1 from './page1.vue';
-import page2 from './page2.vue';
-import page4 from './page4.vue';
-import page5 from './page5.vue';
-import page6 from './page6.vue';
-// import { onMounted, reactive } from "vue";
-// import { isIpad, isIpod, isIphone } from "../../utils/isTerminal";
-
-/**
- * window.$originData.orginParames.title 页面标题
- * window.$originData.orginParames.parameters 固定参数值
- * window.$originData.urlParames url参数
- */
-// console.log(window.$originData);
-// const play_stats = ref(false);
-const main = ref(null);
-const page = ref(0);
-const isUp = ref(true);
-let startStats = 0;
-let time = Date.now();
-let startY = 0;
-const isChangePage = cha => {
-  let out = false; // false 不能翻页  true 能翻页
-  let sondiv = getinnerele();
-  // 视口高度 main.value.offsetHeight
-  // 内容高度 sondiv.offsetHeight
-
-  // 视口基本大于内容  则可以翻页
-  /**
-   * 初始化y值或结束y值不在翻页区间，则不能翻页
-   * 翻页区间是scrolltop 10 以内 和 底部剩余空间10 以内
-   */
-  let h = main.value.offsetHeight + main.value.scrollTop;
-  //   if (Math.pow(cha, 2) < 6400) out = true;
-  let timeRange = Date.now() - time > 50;
-  if (cha < -80 && startStats < 10 && timeRange) {
-    // 下滑
-    /**
-     * 下滑初始滚动小于10 -翻页
-     */
-    out = true;
-  } else {
-    // 上滑
-    /**
-     * 下滑剩余小于10 -翻页
-     */
-    if (sondiv.offsetHeight - h < 10 && cha > 80 && timeRange) out = true;
-  }
-  return out;
-};
-const touchstart = e => {
-  time = Date.now();
-  startStats = main.value.scrollTop;
-  startY = e.changedTouches[0].clientY;
-};
-
-const touchend = e => {
-  const cha = startY - e.changedTouches[0].clientY;
-  if (!isChangePage(cha)) return;
-  //  cha > 0    向上滑动手指
-  //  cha < 0    向下滑动手指
-  //  初始位置滚动为0的，则判断距离25即可
-  // 距离足够则滑动到下一页；
-  let n = cha > 0 ? 1 : -1;
-  let dn = n + page.value;
-  let len = 5;
-  //   if (dn < 0) dn = len;
-  //   if (dn > len) dn = 0;
-  if (dn < 0) return;
-  if (dn > len) return;
-  isUp.value = n === 1;
-  page.value = dn;
-  main.value.scrollTop = 0;
-};
-
-const touchmove = e => {
-  const cha = startY - e.changedTouches[0].clientY;
-  if (main.value.scrollTop <= 1 && cha < 0) e.preventDefault();
-  const ele = getinnerele()
-  if (cha > 0 && main.value.offsetHeight + main.value.scrollTop >= ele.offsetHeight ) e.preventDefault();
-};
-
-const getinnerele = () => {
-  let nodes = main.value.childNodes || [];
-  return nodes[page.value];
-};
-</script>
-<style lang="scss">
-// 动画库
-@import url(./sass/animation.scss);
-// 字体库
-@import url(./sass/base.scss);
-// @import url(https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css);
-
-.AEROSPACE2023 {
-  width: 100vw;
-  height: 100vh;
-  overflow: hidden;
-  background-image: url(./img/background.jpg);
-  background-size: 100% 100%;
-  max-width: 750px;
-  min-width: 330px;
-  margin: 0 auto;
-  display: block;
-
-  .imgbtn {
-    position: absolute;
-    top: 16px;
-    right: 16px;
-    z-index: 10;
-  }
-
-  .page {
-    width: 100%;
-    height: 100vh;
-    margin: 0 auto;
-    overflow-y: auto;
-
-    & > div {
-      width: 100%;
-    }
-  }
-
-  .excess-enter-active,
-  .excess-leave-active {
-    transition: opacity 0.1s ease;
-  }
-
-  .excess-enter-from,
-  .excess-leave-to {
-    opacity: 0;
-  }
-}
-</style>

src/view/AEROSPACE2023/index.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="AEROSPACE2023" @touchmove="touchmove">
+    <playBtn url="https://cxzx.smcic.net/topic/tool/media/bgmaerospace2023.mp3" />
     <div ref="main" class="page" @touchstart="touchstart" @touchend="touchend">
       <page0
         :class="{
@@ -70,6 +71,7 @@ import page3 from './page3.vue';
 import page4 from './page4.vue';
 import page5 from './page5.vue';
 import page6 from './page6.vue';
+import playBtn from '../../components/playBtn.vue';
 // import { onMounted, reactive } from "vue";
 // import { isIpad, isIpod, isIphone } from "../../utils/isTerminal";
 
@@ -143,8 +145,12 @@ const touchend = e => {
 const touchmove = e => {
   const cha = startY - e.changedTouches[0].clientY;
   if (main.value.scrollTop <= 1 && cha < 0) e.preventDefault();
-  const ele = getinnerele()
-  if (cha > 0 && main.value.offsetHeight + main.value.scrollTop >= ele.offsetHeight ) e.preventDefault();
+  const ele = getinnerele();
+  if (
+    cha > 0 &&
+    main.value.offsetHeight + main.value.scrollTop >= ele.offsetHeight
+  )
+    e.preventDefault();
 };
 
 const getinnerele = () => {