Merge branch 'master' of http://git.ycjcjy.com/H5/wenhua818 into master

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@zjxpcyc/vue-tiny-store": "^1.0.1",
     "v-viewer": "^3.0.10",
+    "viewerjs": "1.9.0",
     "vue": "^3.2.37"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -4,11 +4,15 @@ specifiers:
   '@vitejs/plugin-vue': ^3.0.3
   '@zjxpcyc/vue-tiny-store': ^1.0.1
   less: ^4.1.3
+  v-viewer: ^3.0.10
+  viewerjs: 1.9.0
   vite: ^3.0.7
   vue: ^3.2.37
 
 dependencies:
   '@zjxpcyc/vue-tiny-store': registry.npmmirror.com/@zjxpcyc/vue-tiny-store/1.0.1
+  v-viewer: registry.npmmirror.com/v-viewer/3.0.10_vue@3.2.37
+  viewerjs: registry.npmmirror.com/viewerjs/1.9.0
   vue: registry.npmmirror.com/vue/3.2.37
 
 devDependencies:
@@ -557,6 +561,12 @@ packages:
       - supports-color
     dev: true
 
+  registry.npmmirror.com/lodash/4.17.21:
+    resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz}
+    name: lodash
+    version: 4.17.21
+    dev: false
+
   registry.npmmirror.com/magic-string/0.25.9:
     resolution: {integrity: sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/magic-string/-/magic-string-0.25.9.tgz}
     name: magic-string
@@ -738,6 +748,31 @@ packages:
     version: 2.4.0
     dev: true
 
+  registry.npmmirror.com/v-viewer/3.0.10_vue@3.2.37:
+    resolution: {integrity: sha512-ZT5sYYS+Cy4z2TP/PuhqPyiK4NonaZzhkDPfiY9bwa5EjGyusO8R7/k/4c1ptvTzx2nBSV9MvQHl2X3XzhANqw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/v-viewer/-/v-viewer-3.0.10.tgz}
+    id: registry.npmmirror.com/v-viewer/3.0.10
+    name: v-viewer
+    version: 3.0.10
+    peerDependencies:
+      vue: ^3.0.0
+    dependencies:
+      lodash: registry.npmmirror.com/lodash/4.17.21
+      viewerjs: registry.npmmirror.com/viewerjs/1.10.5
+      vue: registry.npmmirror.com/vue/3.2.37
+    dev: false
+
+  registry.npmmirror.com/viewerjs/1.10.5:
+    resolution: {integrity: sha512-QwKrmXlSfKg5x4y74F/jicpHIRqBMMfHXyboOxHDi5n4XAaejjpalphPq4/HW6venQAoMiD57HpVwBk0JvqpSA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/viewerjs/-/viewerjs-1.10.5.tgz}
+    name: viewerjs
+    version: 1.10.5
+    dev: false
+
+  registry.npmmirror.com/viewerjs/1.9.0:
+    resolution: {integrity: sha512-2D1OdGatb5aCZbZvaCdbJYuoDObjD9ITe7GZp0SoG7rgw3arOIZoIO1ygmfG+I4+RvEuDo+aZ75kNgwmYS9j3w==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/viewerjs/-/viewerjs-1.9.0.tgz}
+    name: viewerjs
+    version: 1.9.0
+    dev: false
+
   registry.npmmirror.com/vite/3.0.8_less@4.1.3:
     resolution: {integrity: sha512-AOZ4eN7mrkJiOLuw8IA7piS4IdOQyQCA81GxGsAQvAZzMRi9ZwGB3TOaYsj4uLAWK46T5L4AfQ6InNGlxX30IQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/vite/-/vite-3.0.8.tgz}
     id: registry.npmmirror.com/vite/3.0.8

src/App.vue

@@ -27,6 +27,11 @@ onMounted(() => {
   const { onStart, onEnd } = scroll(window.document);
 
   onStart(() => {
+    if (!entranceAudioPlayed.value) {
+      entranceAudioRef.value.play()
+      entranceAudioPlayed.value = true
+    }
+
     fixedLogoHidden.value = true;
   })
 

src/components/Loader.vue

@@ -1,7 +1,7 @@
 <template>
   <div 
     class="loader-wrapper"
-    :class="{ loaded: !loading }"
+    :class="{ loaded: !loading, mask: maskReadyRef }"
     :style="visibleStyle"
     @touchmove.prevent
     @mousewheel.prevent
@@ -16,6 +16,7 @@
     <!-- <div class="loader-section section-top"></div>
     <div class="loader-section section-bottom"></div>     -->
     <MaskVue ref="maskRef" @end="onEnd"/>
+    <audio :src="entranceAudio" style="max-width: 1px;max-height: 1px;" ref="entranceAudioRef" ></audio>
   </div>
 </template>
 
@@ -23,6 +24,8 @@
 import { computed, onMounted, ref, watch } from "vue"
 import MaskVue from "./Mask.vue";
 
+const entranceAudio = './audios/entrance.mp3';  
+
 const props = defineProps({
   tip: {
     type: String,
@@ -37,8 +40,12 @@ const props = defineProps({
 
 const elRef = ref();
 const maskRef = ref();
+const maskReadyRef = ref(false);
 const progressStyle = computed(() => ({ width: `${props.percent}%` }));
-const visibleStyle = ref({  })
+const visibleStyle = ref({})
+const entranceAudioRef = ref()
+const entranceAudioReady = ref(false)
+
 const onEnd = () => {
   visibleStyle.value = { display: 'none' }
 }
@@ -48,12 +55,32 @@ const onTouchMove = (e) => {
   e.preventDefault();
 }
 
+const playMask = () => {
+  if (maskReadyRef.value && entranceAudioReady.value) {
+    entranceAudioRef.value.play();
+    maskRef.value.start();
+  }
+}
+
 watch(() => props.loading, (newVal, oldVal) => {
   if (oldVal && !newVal) {
-    maskRef.value.start();
+    maskReadyRef.value = true;
+    playMask();
   }
 })
 
+onMounted(() => {
+  const isDev = import.meta.env.DEV
+  if (isDev) {
+    entranceAudioReady.value = true;
+  }
+
+  document.addEventListener("WeixinJSBridgeReady", function () {
+    entranceAudioReady.value = true;
+    playMask();
+  }, false);
+})
+
 </script>
 
 
@@ -115,7 +142,7 @@ watch(() => props.loading, (newVal, oldVal) => {
     bottom: 0;
   }
 
-  &.loaded {
+  &.loaded.mask {
     // visibility: hidden;
     // transform: translateX(-100%);
     // transition: all 0.3s 1s ease-out;

src/components/Mask.vue

@@ -37,7 +37,7 @@
 
   const xStart = 60;
   const yStart = 90;
-  const speed = 20;
+  const speed = 10;
   const draw = () => {
     i += speed;
     const canv = cvsRef.value;

src/utils/resources.js

@@ -105,32 +105,32 @@ const images = [
 // import audio26 from '@/assets/audios/26世界文学客厅.mp3';
 
 const audios = [
-  "./audios/1南京长江大桥.mp3",
-  "./audios/2阅江楼.mp3",
-  "./audios/3秦淮河.mp3",
-  "./audios/4乌衣巷.mp3",
-  "./audios/5燕子矶.mp3",
-  "./audios/6栖霞山.mp3",
-  "./audios/7朝天宫.mp3",
-  "./audios/8梁洲.mp3",
-  "./audios/9后湖映月.mp3",
-  "./audios/10台城.mp3",
-  "./audios/11十里堤.mp3",
-  "./audios/12石头城.mp3",
-  "./audios/13莫愁湖公园.mp3",
-  "./audios/14赏心亭.mp3",
-  "./audios/15长干里.mp3",
-  "./audios/16大报恩寺.mp3",
-  "./audios/17凤凰台.mp3",
-  "./audios/18桃叶渡.mp3",
-  "./audios/19雨花台.mp3",
-  "./audios/20牛首山.mp3",
-  "./audios/21石臼湖.mp3",
-  "./audios/22东山.mp3",
-  "./audios/23瞻园.mp3",
-  "./audios/24白鹭洲.mp3",
-  "./audios/25随园.mp3",
-  "./audios/26世界文学客厅.mp3",
+  './audios/1南京长江大桥.mp3',
+  './audios/2阅江楼.mp3',
+  './audios/3秦淮河.mp3',
+  './audios/4乌衣巷.mp3',
+  './audios/5燕子矶.mp3',
+  './audios/6栖霞山.mp3',
+  './audios/7朝天宫.mp3',
+  './audios/8梁洲.mp3',
+  './audios/9后湖映月.mp3',
+  './audios/10台城.mp3',
+  './audios/11紫金山.mp3',
+  './audios/12石头城.mp3',
+  './audios/13莫愁湖公园.mp3',
+  './audios/14赏心亭.mp3',
+  './audios/15长干里.mp3',
+  './audios/16大报恩寺.mp3',
+  './audios/17凤凰台.mp3',
+  './audios/18桃叶渡.mp3',
+  './audios/19雨花台.mp3',
+  './audios/20牛首山.mp3',
+  './audios/21石臼湖.mp3',
+  './audios/22东山.mp3',
+  './audios/23瞻园.mp3',
+  './audios/24文德桥.mp3',
+  './audios/25随园.mp3',
+  './audios/26世界文学客厅.mp3',
 ];
 
 // 预加载资源