feats

package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@zjxpcyc/vue-tiny-store": "^1.0.1",
     "vue": "^3.2.37"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -2,11 +2,13 @@ lockfileVersion: 5.4
 
 specifiers:
   '@vitejs/plugin-vue': ^3.0.3
+  '@zjxpcyc/vue-tiny-store': ^1.0.1
   less: ^4.1.3
   vite: ^3.0.7
   vue: ^3.2.37
 
 dependencies:
+  '@zjxpcyc/vue-tiny-store': registry.npmmirror.com/@zjxpcyc/vue-tiny-store/1.0.1
   vue: registry.npmmirror.com/vue/3.2.37
 
 devDependencies:
@@ -166,6 +168,12 @@ packages:
     name: '@vue/shared'
     version: 3.2.37
 
+  registry.npmmirror.com/@zjxpcyc/vue-tiny-store/1.0.1:
+    resolution: {integrity: sha512-2r/E2bxGygn859ntWLHPDI+pLUR+MuIEPGSN82Y6xPdbQqcsmX1/+L+Pivh/LwFeEY51YcEDhPH8wkhzmtuD8g==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@zjxpcyc/vue-tiny-store/-/vue-tiny-store-1.0.1.tgz}
+    name: '@zjxpcyc/vue-tiny-store'
+    version: 1.0.1
+    dev: false
+
   registry.npmmirror.com/copy-anything/2.0.6:
     resolution: {integrity: sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/copy-anything/-/copy-anything-2.0.6.tgz}
     name: copy-anything

src/App.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { computed, onMounted, ref } from 'vue';
 import Loader from '@/components/Loader.vue';
+import ScrollDown from '@/components/ScrollDown.vue';
 import Image from '@/components/Image.vue';
 import { preload } from '@/utils/preload';
 
@@ -22,6 +23,7 @@ onMounted(() => {
 
 <template>
   <Loader :loading="loading" :percent="percent" />
+  <ScrollDown />
   <Image v-for="res in resources" :key="res.image" :resource="res"></Image>
 </template>
 

src/components/Image.vue

@@ -1,21 +1,97 @@
 <template>
-  <img :src="resource.img.src" alt="">
+  <div class="img-wrapper">
+    <img :src="resource.img.src" @load="onLoad" alt="">
+    <div v-if="resource.playBtn" class="paybtn" :style="btnStyle" @click="onPlayBtn">
+      <audio :src="resource.audio" preload="auto" ref="audioRef" @ended="onEnded"></audio>
+    </div>
+  </div>
 </template>
 
 <script setup>
+import { ref, watch } from 'vue';
+import { useModel } from '@zjxpcyc/vue-tiny-store';
+
+const [current, updateCurrent] = useModel('audio');
+
 const props = defineProps({
   resource: Object,
   default: () => ({})
+});
+
+const btnStyle = ref();
+const audioRef = ref();
+const playState = ref(0);
+
+const playAudio = () => {
+    audioRef.value.play();
+    playState.value = 1;
+    updateCurrent(props.resource.audio);
+}
+
+const stopAudio = () => {
+    audioRef.value.pause();
+    playState.value = 0;
+}
+
+// 监控全局, 如果非当前播放器, 则停止播放
+watch(current, (nw) => {
+  if (nw !== props.resource.audio && playState.value === 1) {
+    stopAudio();
+  }
 })
 
+// 点击播放
+const onPlayBtn = () => {
+  if (playState.value) {
+    stopAudio();
+  } else {
+    playAudio();
+  }
+}
+
+// 播放完成
+const onEnded = () => {
+  stopAudio();
+}
+
+// 图片加载完成, 设置播放器
+const onLoad = (e) => {
+  if (!props.resource.playBtn) return;
+
+  const { pos } = props.resource.playBtn;
+  const { width, height, naturalHeight, naturalWidth } = e.target;
+  const d = 32; // 宽度一半
+  const x = width * pos[0] / naturalWidth - d;
+  const y = height * pos[1] / naturalHeight - d;
+
+  btnStyle.value = { left: `${x}px`, top: `${y}px` }
+}
+
 </script>
 
 <style lang="less" scoped>
-img {
-  display: block;
-  width: 100vw;
-  height: auto;
-  object-fit: contain;
+.img-wrapper {
+  position: relative;
+
+  .paybtn {
+    position: absolute;
+    width: 64px;
+    height: 64px;
+    // background: rgba(255, 0, 0, .5);
+    z-index: 10;
+
+    & > audio {
+      max-width: 1px;
+      max-height: 1px;
+    }
+  }
+
+  img {
+    display: block;
+    width: 100vw;
+    height: auto;
+    object-fit: contain;
+  }
 }
 </style>
 

src/components/Loader.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="loader-wrapper" :class="{ loaded: !loading }">
     <div class="loader">
-      <P class="tip">{{tip}}</P>
+      <p class="tip">{{tip}}</p>
       <p class="percent">{{percent}}%</p>
       <p class="progress">
         <div :style="progressStyle"></div>

src/components/ScrollDown.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="scroll-down" :style="style">
+    <span></span><span></span><span></span>
+  </div>
+</template>
+
+<script setup>
+import { onBeforeUnmount, onMounted, ref } from "vue"
+
+const style = ref({ opacity: 1 })
+
+const onScroll = (e) => {
+  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+  const clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
+  const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
+	if (clientHeight + scrollTop === scrollHeight) {
+		style.value = { opacity: 0 }
+    console.log('已到底部');
+	} else {
+    if (style.value.opacity === 0) {
+      style.value = { opacity: 1 }
+    }
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('scroll', onScroll);
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('scroll', onScroll);
+})
+
+</script>
+
+<style lang="less" scoped>
+@arrow-color: #5C9495;
+
+.scroll-down {
+  position: fixed;
+  bottom: 100px;
+  right: 60px;
+  z-index: 2;
+
+  & > span {
+    position: absolute;
+    display: block;
+    top: 0;
+    left: 50%;
+    width: 24px;
+    height: 24px;
+    margin-left: -12px;
+    border-left: 2px solid @arrow-color;
+    border-bottom: 2px solid @arrow-color;
+    transform: rotate(-45deg);
+    animation: sdb07 2s infinite;
+    opacity: 0;
+    box-sizing: border-box;
+
+    &:nth-of-type(1) {
+      animation-delay: 0s;
+    }
+    &:nth-of-type(2) {
+      animation-delay: .15s;
+      top: 16px;
+    }
+    &:nth-of-type(3) {
+      animation-delay: .3s;
+      top: 32px;
+    }
+  }
+
+  @keyframes sdb07 {
+    0% {
+      opacity: 0;
+    }
+    50% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+}
+</style>

src/main.js

@@ -1,5 +1,8 @@
 import { createApp } from 'vue'
 import './style.css'
 import App from './App.vue'
+import store from './store'
 
-createApp(App).mount('#app')
+const app = createApp(App);
+app.use(store);
+app.mount('#app');

src/store/index.js

@@ -0,0 +1,19 @@
+import { ref } from 'vue';
+import createStore from '@zjxpcyc/vue-tiny-store';
+
+const useAudio = () => {
+  const current = ref()
+
+  const changeAudio = (aduRef) => {
+    current.value = aduRef;
+  }
+
+  return [
+    current,
+    changeAudio,
+  ]
+};
+
+const store = createStore({ audio: useAudio });
+
+export default store;

src/utils/preload.js

@@ -5,7 +5,7 @@ export function preload(onProgress) {
     const total = resources.length;
     let cursor = 0;
 
-    const callback = () => {
+    const callback = (e, isError) => {
       cursor += 1;
       onProgress(cursor / total);
       if (cursor >= total) {
@@ -15,8 +15,8 @@ export function preload(onProgress) {
 
     for (let res of resources) {
       const img = document.createElement('img');
-      img.onload = callback;
-      img.onerror = callback;
+      img.onload = e => callback(e, false);
+      img.onerror = e => callback(e, true);
       img.src = res.image;
       res.img = img;
     }

src/utils/resources.js

@@ -33,6 +33,33 @@ import img21 from '@/assets/images/21.jpg';
 import img22 from '@/assets/images/22.jpg';
 import img23 from '@/assets/images/23.jpg';
 
+import audio1 from '@/assets/audios/1南京长江大桥.mp3';
+import audio2 from '@/assets/audios/2阅江楼.mp3';
+import audio3 from '@/assets/audios/3秦淮河.mp3';
+import audio4 from '@/assets/audios/4乌衣巷.mp3';
+import audio5 from '@/assets/audios/5燕子矶.mp3';
+import audio6 from '@/assets/audios/6栖霞山.mp3';
+import audio7 from '@/assets/audios/7朝天宫.mp3';
+import audio8 from '@/assets/audios/8梁洲.mp3';
+import audio9 from '@/assets/audios/9后湖映月.mp3';
+import audio10 from '@/assets/audios/10台城.mp3';
+import audio11 from '@/assets/audios/11十里堤.mp3';
+import audio12 from '@/assets/audios/12石头城.mp3';
+import audio13 from '@/assets/audios/13莫愁湖公园.mp3';
+import audio14 from '@/assets/audios/14赏心亭.mp3';
+import audio15 from '@/assets/audios/15长干里.mp3';
+import audio16 from '@/assets/audios/16大报恩寺.mp3';
+import audio17 from '@/assets/audios/17凤凰台.mp3';
+import audio18 from '@/assets/audios/18桃叶渡.mp3';
+import audio19 from '@/assets/audios/19雨花台.mp3';
+import audio20 from '@/assets/audios/20牛首山.mp3';
+import audio21 from '@/assets/audios/21石臼湖.mp3';
+import audio22 from '@/assets/audios/22东山.mp3';
+import audio23 from '@/assets/audios/23瞻园.mp3';
+import audio24 from '@/assets/audios/24白鹭洲.mp3';
+import audio25 from '@/assets/audios/25随园.mp3';
+import audio26 from '@/assets/audios/26世界文学客厅.mp3';
+
 // 预加载资源
 export const resources = [
   { 
@@ -43,95 +70,199 @@ export const resources = [
   },
   { 
     image: img3,
+    playBtn: {
+      pos: [616, 932],
+    },
+    audio: audio1,
   },
   { 
     image: img4,
+    playBtn: {
+      pos: [100, 406],
+    },
+    audio: audio2,
   },
   { 
     image: img5_1,
+    playBtn: {
+      pos: [650, 172],
+    },
+    audio: audio3,
   },
   { 
     image: img5_2,
+    playBtn: {
+      pos: [652, 773],
+    },
+    audio: audio4,
   },
-  { 
-    image: img5,
-  },
+  // { 
+  //   image: img5,
+  // },
   { 
     image: img6,
+    playBtn: {
+      pos: [624, 890],
+    },
+    audio: audio5,
   },
   { 
     image: img7,
+    playBtn: {
+      pos: [612, 486],
+    },
+    audio: audio6,
   },
   { 
     image: img8_1,
+    playBtn: {
+      pos: [93, 557],
+    },
+    audio: audio7,
   },
   { 
     image: img8_2,
+    playBtn: {
+      pos: [163, 224],
+    },
+    audio: audio8,
   },
-  { 
-    image: img8,
-  },
+  // { 
+  //   image: img8,
+  // },
   { 
     image: img9,
+    playBtn: {
+      pos: [152, 782],
+    },
+    audio: audio9,
   },
   { 
     image: img10_1,
+    playBtn: {
+      pos: [659, 368],
+    },
+    audio: audio10,
   },
   { 
     image: img10_2,
+    playBtn: {
+      pos: [646, 217],
+    },
+    audio: audio11,
   },
-  { 
-    image: img10,
-  },
+  // { 
+  //   image: img10,
+  // },
   { 
     image: img11,
+    playBtn: {
+      pos: [574, 1074],
+    },
+    audio: audio12,
   },
   { 
     image: img12,
+    playBtn: {
+      pos: [132, 550],
+    },
+    audio: audio13,
   },
   { 
     image: img13,
+    playBtn: {
+      pos: [642, 310],
+    },
+    audio: audio14,
   },
   { 
     image: img14,
+    playBtn: {
+      pos: [92, 80],
+    },
+    audio: audio15,
   },
   { 
     image: img15_1,
+    playBtn: {
+      pos: [652, 31],
+    },
+    audio: audio16,
   },
   { 
     image: img15_2,
+    playBtn: {
+      pos: [652, 353],
+    },
+    audio: audio17,
   },
-  { 
-    image: img15,
-  },
+  // { 
+  //   image: img15,
+  // },
   { 
     image: img16,
+    playBtn: {
+      pos: [166, 600],
+    },
+    audio: audio18,
   },
   { 
     image: img17,
+    playBtn: {
+      pos: [364, 606],
+    },
+    audio: audio19,
   },
   { 
     image: img18,
+    playBtn: {
+      pos: [386, 472],
+    },
+    audio: audio20,
   },
   { 
     image: img19_1,
+    playBtn: {
+      pos: [132, 367],
+    },
+    audio: audio21,
   },
   { 
     image: img19_2,
+    playBtn: {
+      pos: [250, 699],
+    },
+    audio: audio22,
   },
-  { 
-    image: img19,
-  },
+  // { 
+  //   image: img19,
+  // },
   { 
     image: img20,
+    playBtn: {
+      pos: [152, 1040],
+    },
+    audio: audio23,
   },
   { 
     image: img21,
+    playBtn: {
+      pos: [654, 886],
+    },
+    audio: audio24,
   },
   { 
     image: img22,
+    playBtn: {
+      pos: [98, 196],
+    },
+    audio: audio25,
   },
   { 
     image: img23,
+    playBtn: {
+      pos: [160, 64],
+    },
+    audio: audio26,
   },
 ]