feats

index.html

@@ -14,7 +14,7 @@
     <link rel="stylesheet" href="./slidePage/slidePage.min.css">
 
     <link rel="stylesheet" href="./fonts/SourceHanSerifCN-Medium/SourceHanSerifCN-Medium.css">
-    <title>南京-紫金草行动</title>
+    <title>向世界讲述——南京1937</title>
     <!-- <script src="./vconsole.min.js"></script>
     <script>
       const vConsole = new VConsole();

src/App.vue

@@ -48,10 +48,13 @@
   }
   window.addEventListener('touchstart', onTouch);
 
+  // 初始化一些数据
+  localStorage.setItem('page', 1);
+
 </script>
 
 <template>
-  <Loading v-if="!show" class="loading" @ready="(show = true)" />
+  <Loading v-if="!show" class="loading" @ready="show = true" />
   <router-view v-else></router-view>
 
   <audio ref="el" src="/audio/audio.mp3" style="max-width: 0" loop preload="auto"></audio>

src/components/Modal.vue

@@ -41,7 +41,7 @@
   left: 0;
   width: 100vw;
   height: 100vh;
-  z-index: 1000;
+  z-index: 2000;
   animation-duration: 200ms;
   background: transparent;
     background: rgba(0, 0, 0, 0.5);

src/pages/FirstVideo.vue

@@ -5,6 +5,7 @@
       playsinline
       src="/video/开始视频.mp4"
       autoplay="autoplay"
+      controls="controls"
       ref="vidRef"
       @play="pause()"
       @pause="play()"
@@ -26,6 +27,10 @@ const router = useRouter();
 
 onMounted(() => {
   vidRef.value.play();
+
+  document.addEventListener('WeixinJSBridgeReady', () => {
+    vidRef.value.play();
+  });
 })
 
 </script>

src/pages/Loading.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="page pg-bg loading-pg" @click="onClick">
+  <div class="page pg-bg loading-pg" @click="onClick" @touchmove="onClick">
     <div class="loading-bg">
       <img class="fl-bg1 abs" src="/images/fl-bg.png" alt="">
       <img class="fl-bg2 abs" src="/images/fl-bg.png" alt="">
@@ -41,6 +41,7 @@
 
     const t = setTimeout(() => {
       emit('ready');
+      clearTimeout(t)
     }, 1600);
   }
 

src/pages/index.vue

@@ -26,6 +26,8 @@ import Pg3 from './pg3/index.vue'
 
 const { play, pause } = useModel('audio');
 
+const page = ref(localStorage.getItem('page'));
+
 onMounted(() => {
   // parallaxing()
   play()
@@ -33,7 +35,7 @@ onMounted(() => {
   var slidepage = new window.slidePage({
     slideContainer: '.slide-container',
     slidePages: '.slide-page',
-    page: 1,
+    page: page.value || 1,
     refresh: false,
     dragMode: false,
     useWheel: true,
@@ -42,7 +44,9 @@ onMounted(() => {
 
     // Events
     before: function(origin,direction,target){},
-    after: function(origin,direction,target){},
+    after: function(origin,direction,target){
+      localStorage.setItem('page', target);
+    },
     });
 })
 </script>

src/pages/pg1/index.vue

@@ -57,6 +57,11 @@
 </script>
 
 <style lang="less" scoped>
+  .pg1 {
+    height: auto;
+    min-height: 100%;
+  }
+
   .bg {
     position: absolute;
     z-index: 0;

src/pages/pg2/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="page pg-bg pg2" parallax ref="pgRef">
+  <div class="page pg-bg pg2" parallax ref="pgRef" @click="onClickTest">
     <div class="bg">
       <div>
         <Animate
@@ -104,6 +104,10 @@ const onClick = () => {
   router.push(`/pg2-2`);
 };
 
+const onClickTest = e => {
+  console.log(e)
+}
+
 const flowerAnimate = reactive({
   left: "",
   right: "",
@@ -139,6 +143,9 @@ watch(show, (val) => {
 <style lang="less" scoped>
 .pg2 {
   overflow: hidden;
+  height: auto;
+  min-height: 100%;
+
   .bg {
     position: absolute;
     z-index: 0;

src/pages/pg3/index.vue

@@ -153,6 +153,10 @@
 <style lang="less" scoped>
 .pg3 {
   position: relative;
+  height: auto;
+  min-height: 100%;
+  box-sizing: border-box;
+  padding-bottom: 50px;
 
   .pg3-bg {
     position: absolute;
@@ -183,7 +187,7 @@
   .header {
     width: 30vw;
     margin: auto;
-    margin-top: 30px;
+    // margin-top: 30px;
     position: relative;
   }
 

src/pages/pg4/Share.vue

@@ -4,9 +4,9 @@
       <img src="/images/pg4/btn_share.png" alt="" @click="emit('share')">
       <img src="/images/pg4/btn_badge.png" alt="" @click="emit('badge')">
     </div>
-    <div class="share-txt txt">
+    <!-- <div class="share-txt txt">
       目前总种植数量: {{user.num}}
-    </div>
+    </div> -->
   </div>
 </template>
 

src/pages/pg4/video.vue

@@ -7,6 +7,7 @@
         src="/video/和平宣言-视频-压缩.mp4"
         preload="preload"
         autoplay="autoplay"
+        :controls="controls"
         ref="mediaRef"
         @ended="show = true"
         @play="pause()"
@@ -29,6 +30,7 @@
   const router = useRouter();
   const mediaRef = ref();
   const show = ref(false);
+  const controls = ref();
 
   const onReplay = () => {
     mediaRef.value.play();
@@ -36,12 +38,36 @@
   };
 
   const onNext = () => {
-    router.push("/pg4/plant");
+    router.replace("/pg4/plant");
   };
 
   onMounted(() => {
     // 自动播放
-    mediaRef.value.play();
+    try {
+
+      const t = setTimeout(() => {
+        clearTimeout(t);
+      
+        // 可能抛出异步异常
+        const p = mediaRef.value.play();
+        if (p) {
+          p.then(() => {
+            mediaRef.value.play();
+          }).catch(err => {
+            console.log('--play-err---', err)
+            controls.value = "controls";
+          })
+        }
+
+      }, 300);
+    } catch (err) {
+      console.log('---err---', err)
+      controls.value = "controls";
+    }
+
+    // document.addEventListener('WeixinJSBridgeReady', () => {
+    //   mediaRef.value.play();
+    // });
   });
 
 </script>

src/router.js

@@ -3,8 +3,8 @@ import { createRouter, createWebHashHistory } from 'vue-router'
 
 const routes = [
   // { path: '/', component: () => import('@/pages/Language.vue') },
-  { path: '/', component: () => import('@/pages/FirstVideo.vue') },
-  { path: '/index', component: () => import('@/pages/index.vue') },
+  // { path: '/', component: () => import('@/pages/FirstVideo.vue') },
+  { path: '/', component: () => import('@/pages/index.vue') },
   { path: '/bk1', component: () => import('@/pages/bk1/index.vue') },
   { path: '/pg2-2', component: () => import('@/pages/pg2-2/index.vue') },
   { path: '/pg4', component: () => import('@/pages/pg4/video.vue') },