feats

src/App.vue

@@ -6,7 +6,7 @@
   import Loading from './First.vue';
 
   const { el } = useModel('audio');
-  const { setUser } = useModel('user');
+  const { setUser, contries } = useModel('user');
   const show = ref(false);
   
   const { share, getCode, redirect } = wxsdk();
@@ -18,6 +18,13 @@
     } else {
       track(code).then(res => {
         const { user, num } = res;
+
+        // 随机设置国家种植数量
+        const avg = (num || 0) / 8;
+        Object.keys(contries).forEach(key => {
+          contries[key] = avg + Math.floor(Math.random() * 100)
+        });
+
         setUser({
           ...(user || {}),
           num: num || 0,

src/components/InkEffect.vue

@@ -0,0 +1,79 @@
+<template>
+  <canvas ref="canvasRef"></canvas>
+</template>
+
+<script setup>
+  import { onBeforeMount, onMounted, ref, watch } from 'vue';
+
+  const canvasRef = ref();
+  const renderRef = ref();
+  const props = defineProps({
+    src: String,
+    active: Boolean,
+    speed: {
+      type: Number,
+      default: 5,
+    }
+  })
+
+  let frameId = null;
+  let i = 0;
+
+  watch(() => props.active, (newVal, oldVal) => {
+    if (newVal && !oldVal) {
+      if (renderRef.value) {
+        i = 0;
+        renderRef.value();
+      }
+    }
+  })
+
+  onMounted(() => {
+    const canv = canvasRef.value;
+    const ctx = canv.getContext("2d");
+    const img = new Image();
+    const imgMask = new Image();
+    
+    img.onload = function() {
+      canv.width = img.naturalWidth;
+      canv.height = img.naturalHeight;
+    }
+
+    img.src = props.src;
+    imgMask.src = './images/cloud-texture.png'
+    
+    function draw() {
+      i += props.speed;
+      
+      let maskX = (canv.width - (70 + i)) / 2,
+          maskY = (canv.height - (40 + i)) / 2;
+      
+      ctx.clearRect(0, 0, canv.width, canv.height);
+      ctx.globalCompositeOperation = "source-over";
+      
+      ctx.drawImage(imgMask, maskX, maskY, 70 + i, 40 + i);
+      
+      ctx.globalCompositeOperation = "source-in";
+      ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight);
+      
+      frameId = window.requestAnimationFrame(draw);
+
+      if (i >= 5000) {
+        i = 0;
+        window.cancelAnimationFrame(frameId);
+      }
+    }
+
+    renderRef.value = draw;
+
+    if (props.active) {
+      draw();
+    }
+  });
+
+  onBeforeMount(() => {
+    if (frameId) {
+      window.cancelAnimationFrame(frameId);
+    }
+  });
+</script>

src/pages/pg1/Md1.vue

@@ -14,13 +14,58 @@
           播撒和平的种子。<br>
           近20万枚紫金草徽章佩戴在了人们的心口。
         </p>
+        <div class="map-img" ref="mapRef" />
       </div>
     </div>
   </Modal>
 </template>
 
 <script setup>
+  import { onMounted, ref, watch } from 'vue';
   import Modal from '@/components/Modal.vue';
+
+  const mapRef = ref()
+  const loaded = ref(false);
+  const dep = ref(true);
+
+  const callback = (t) => {
+    const maxHeight = 27837
+    const rawHeight = 489
+    const img = mapRef.value
+    const height = img.offsetHeight
+    const pos = t * rawHeight
+
+    const backgroundPosition = `0 -${(pos * height) / rawHeight}px`
+    img.style.backgroundPosition = backgroundPosition
+
+    if (pos >= maxHeight - rawHeight) {
+      return true
+    }
+  }
+  
+  onMounted(() => {
+    loaded.value = true;
+  });
+
+  let times = 0;
+  let execed = false;
+  watch([loaded, dep], (values) => {
+    console.log(values)
+    if (execed) return;
+
+    if (values[0] && values[1]) {
+      execed = true;
+      
+      const i = setInterval(() => {
+        const isOver = callback(times);
+        times += 1;
+
+        if (isOver) {
+          clearInterval(i);
+        }
+      }, 2000 / 16);
+    }
+  });
 </script>
 
 <style lang="less" scoped>
@@ -38,8 +83,23 @@
   .md1-context {
     box-sizing: border-box;
     padding-top: 20px;
+    padding-bottom: 20px;
     font-size: 12px;
     text-align: center;
   }
+
+  .map-img {
+    margin: auto;
+    @width: 70vw;
+    @height: (@width / 832 * 489);
+
+    width: @width;
+    height: @height;
+    
+    background-image: url(/images/pg2/map.png);
+    background-repeat: no-repeat;
+    background-position: 0 0;
+    background-size: 100% auto;
+  }
 }
 </style>

src/pages/pg1/Md3.vue

@@ -1,10 +1,24 @@
 <template>
   <Modal>
     <div class="md3-box md-bg">
-      <div class="md3-header">
-        <img src="/images/pg1/logo.png" alt="">
+      <div class="md3-header ">
+        <Animate
+          comp="img"
+          name="animate__fadeInDown"
+          src="/images/pg1/md2-header.png"
+          alt=""
+          :ready="true"
+        />
       </div>
       <div class="md3-context">
+        <video
+          webkit-playsinline
+          playsinline
+          preload="auto"
+          autoplay="autoplay"
+          controls="controls"
+          src="/video/9年活动.mp4"
+        ></video>
       </div>
     </div>
   </Modal>
@@ -12,6 +26,7 @@
 
 <script setup>
   import Modal from '@/components/Modal.vue';
+  import Animate from '@/components/Animate.vue';
 </script>
 
 <style lang="less" scoped>
@@ -21,23 +36,22 @@
   box-sizing: border-box;
   padding: 16px;
 
-  .md3-bg {
-    position: absolute;
-    top: 10px;
-    right: 5px;
-    width: 50px;
-    z-index: 0;
-  }
-
   .md3-header {
     box-sizing: border-box;
-    width: 32vw;
+    width: 80%;
+    margin: auto;
   }
 
   .md3-context {
     box-sizing: border-box;
     padding-top: 60px;
     font-size: 12px;
+    position: relative;
+    z-index: 10;
+
+    video {
+      width: 100%;
+    }
   }
 }
 </style>

src/pages/pg3/Ink.vue

@@ -1,83 +1,18 @@
 <template>
   <div class="ink-box">
     <div>
-      <canvas class="ink-cover" ref="canvasRef"></canvas>
+      <InkEffect class="ink-cover" :src="src" :active="active" />
       <!-- <img class="ink-back" :src="src" alt="" > -->
     </div>
   </div>
 </template>
 
 <script setup>
-  import { onBeforeMount, onMounted, ref, watch } from 'vue';
-
-  const canvasRef = ref();
-  const renderRef = ref();
+  import InkEffect from '@/components/InkEffect.vue';
   const props = defineProps({
     src: String,
     active: Boolean,
   })
-
-  let frameId = null;
-  let i = 0;
-
-  watch(() => props.active, (newVal, oldVal) => {
-    if (newVal && !oldVal) {
-      if (renderRef.value) {
-        i = 0;
-        renderRef.value();
-      }
-    }
-  })
-
-  onMounted(() => {
-    const canv = canvasRef.value;
-    const ctx = canv.getContext("2d");
-    const img = new Image();
-    const imgMask = new Image();
-    
-    img.onload = function() {
-      canv.width = img.naturalWidth;
-      canv.height = img.naturalHeight;
-    }
-
-    img.src = props.src;
-    imgMask.src = './images/cloud-texture.png'
-    
-    function draw() {
-      i += 5;
-      
-      let maskX = (canv.width - (70 + i)) / 2,
-          maskY = (canv.height - (40 + i)) / 2;
-      
-      ctx.clearRect(0, 0, canv.width, canv.height);
-      ctx.globalCompositeOperation = "source-over";
-      
-      ctx.drawImage(imgMask, maskX, maskY, 70 + i, 40 + i);
-      
-      ctx.globalCompositeOperation = "source-in";
-      ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight);
-      
-      frameId = window.requestAnimationFrame(draw);
-
-      if (i >= 5000) {
-        i = 0;
-        window.cancelAnimationFrame(frameId);
-      }
-    }
-
-    renderRef.value = draw;
-
-    if (props.active) {
-      draw();
-    }
-  });
-
-  onBeforeMount(() => {
-    if (frameId) {
-      window.cancelAnimationFrame(frameId);
-    }
-  });
-
 </script>
 
 <style lang="less" scoped>

src/store/index.js

@@ -1,4 +1,4 @@
-import { ref } from 'vue';
+import { reactive, ref } from 'vue';
 import createStore from '@zjxpcyc/vue-tiny-store';
 
 const useAudio = () => {
@@ -38,9 +38,34 @@ const useUser = () => {
 
   const setUser = v => user.value = v;
 
+  const contries = reactive({
+    "中国": 0,
+    "芬兰": 0,
+    "土耳其": 0,
+    "德国": 0,
+    "英国": 0,
+    "瑞士": 0,
+    "美国": 0,
+    "加拿大": 0,
+    "日本": 0,
+    "韩国": 0,
+    "马来西亚": 0,
+    "澳大利亚": 0,
+    "新西兰": 0,
+    "新加坡": 0,
+  });
+
+  const updateContries = (key) => {
+    contries[key] += 1;
+    if (user.value) {
+      user.value.num += 1;
+    }
+  }
+
   return {
     user,
     setUser,
+    contries,
   }
 }