feats

public/config.js

@@ -9,5 +9,5 @@ const shareOptTpl = {
 const link1URL = 'http://h5.njyunzhi.com/wenhua818-2/index.html';
 
 // 分享接口地址
-const API_BASE = 'http://api.h5.zijincao.njyunzhi.com';
-// const API_BASE = '';
+// const API_BASE = 'http://api.h5.zijincao.njyunzhi.com';
+const API_BASE = '';

src/App.vue

@@ -1,12 +1,13 @@
 <script setup>
   import { ref } from 'vue';
   import { useModel } from '@zjxpcyc/vue-tiny-store';
+  import { getCountryData } from '@/services/country';
   import wxsdk from '@/utils/wx'
   import track from '@/utils/track'
   import Loading from './pages/loading/index.vue';
 
   const { el, play } = useModel('audio');
-  const { setUser, contries } = useModel('user');
+  const { setUser, countries } = useModel('user');
   const show = ref(false);
   
   const { share, getCode, redirect } = wxsdk();
@@ -19,11 +20,11 @@
       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)
-        });
+        try {
+          getCountryData().then(res => countries.value = res.records);
+        } catch(err) {
+          console.error(err)
+        }
 
         setUser({
           ...(user || {}),

src/pages/loading/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="page pg-bg loading-pg" @click="onClick" @touchmove="onClick">
+  <div class="page pg-bg loading-pg" @click.stop="onClick" @touchmove="onClick">
     <div class="header abs">
       <Bell />
     </div>
@@ -35,45 +35,31 @@
   import { computed, onMounted, ref } from 'vue';
   import Bell from '@/components/Bell.vue';
   import DownArrow from '@/components/DownArrow.vue';
-  import { preload } from '@/utils/preload'
+  import { preload } from '@/utils/preload';
+  import throttle from '@/utils/throttle';
 
   const emit = defineEmits(['ready']);
-  const finished = ref(false);
 
   const percent = ref(0);
+  const finished = ref(false);
 
   const onClick = () => {
-    if (percent.value !== '100%') return;
+    // if (!finished.value) return;
 
-    finished.value = true;
-    emit('ready');
-  }
-
-  const throttle = (fn, delay) => {
-    let t = null;
-    return (...args) => {
-      if (!t) {
-        fn(...args);
-        t = setTimeout(() => null, delay);
-        return;
-      } else {
-        clearTimeout(t);
-        t = setTimeout(() => fn(...args), delay);
-      }
-    }
+    // emit('ready');
   }
 
   const callback = (val) => {
+    console.log('------val----->', val)
     const p = Number(val * 100).toFixed(2);
-    if (p >= 100) {
-      return percent.value = '100%';
-    } else {
-      return percent.value = `${p}%`
-    }
+    percent.value = `${p}%`
   }
 
   onMounted(() => {
-    preload(throttle(callback, 10));
+    preload(throttle(callback, 100)).then(() => {
+      finished.value = true;
+      emit('ready');
+    });
   });
 </script>
 

src/pages/pg1/InMap.vue

@@ -4,14 +4,15 @@
     
     <template v-for="(item, inx) in flowers" :key="item.name">
       <div
-        class="flower"
-        :style="{left: item.left, top: item.top }"
+        class="flower animate__animated animate__fadeIn"
+        :style="{left: item.left, top: item.top, animationDelay: `${(inx+1) * 200}ms`}"
       >
         <div>
           <img
-            class="flower animate__animated animate__fadeIn animate__infinite"
-            :style="{animationDelay: `${(inx+1) * 200}ms`}"
+            class="flower"
+            :style="{}"
             src="/images/logo.png" alt="">
+          <!-- <img class="shine" src="/images/pg1/shine.png" alt=""> -->
           <div class="country" :style="getTxtStyle(item)">{{item.name}}</div>
         </div>
       </div>
@@ -25,20 +26,19 @@
   const flowers = ref([]);
 
   const getTxtStyle = (item) => {
-    const space = 16;
     switch (item.direct) {
       case 'top-left':
-        return { top: `-${space}px`, left: `-45px` };
+        return { top: `-16px`, left: `-45px` };
       case 'top-right':
-        return { top: `-${space}px`, right: `-45px` };
+        return { top: `-16px`, right: `-45px` };
       case 'right':
-        return { top: `-${space / 3}px`, right: `-85px`, textAlign: 'left' };
+        return { top: `-6px`, right: `-85px`, textAlign: 'left' };
       case 'left':
         return { top: `0px`, left: `-85px`, textAlign: 'right' };
       case 'top':
-        return { top: `-${space}px`, left: `-35px` };
+        return { top: `-16px`, left: `-35px` };
       default:
-        return { bottom: `-${space}px`, left: `-35px` };
+        return { bottom: `-22px`, left: `-35px` };
     }
   };
 
@@ -72,8 +72,6 @@
       }
     });
     
-console.log('------onLoad-----', list);
-
     flowers.value = list;
   }
 
@@ -84,10 +82,12 @@ console.log('------onLoad-----', list);
 .in-map-wrapper {
   position: relative;
 
+  @size: 8px;
+
   .flower {
     position: absolute;
-    width: 8px;
-    height: 8px;
+    width: @size;
+    height: @size;
     z-index: 2;
 
     & > div {
@@ -103,5 +103,24 @@ console.log('------onLoad-----', list);
       color: #C18FC8;
     }
   }
+
+  .shine {
+    position: absolute;
+    width: @size * 4;
+    height: @size * 4;
+    left: -@size * 2 + 4px;
+    top: -@size * 2 + 4px;
+
+    animation: shine-scale 1s ease-in-out alternate;
+  }
+
+  @keyframes shine-scale {
+    from {
+      transform: scale(1);
+    }
+    to {
+      transform: scale(1.2);
+    }
+  }
 }
 </style>

src/pages/pg2-2/index.vue

@@ -11,7 +11,7 @@
         :ready="true"
       >
         85年前，
-        <br />日本侵略者制造了惨绝人寰的南京大屠杀惨案， <br />30万同胞惨遭杀戮。
+        <br />日本侵略者制造了惨绝人寰的<br />南京大屠杀惨案， <br />30万同胞惨遭杀戮。
         <br />
       </Animate>
     </div>
@@ -126,12 +126,12 @@
             comp="span"
             class="animate__infinite"
             name="animate__headShake"
-            style="display: inline-block; font-size: 1.1em; font-family: sans serif; font-weight: 700;"
+            style="display: inline-block; width: 50vw; margin-top: 10px;"
             delay="300ms"
             :ready="show3"
             @click="onGoFoward"
           >
-            “紫金草行动”再启航。
+            <img src="/images/pg2-2/goAgain.png" alt="">
           </Animate>
         </p>
       </Animate>

src/pages/pg4/Flower.vue

@@ -1,10 +1,10 @@
 <template>
   <Modal v-if="show" :close="false">
     <div class="txt modal-flower">
-      <img class="close abs" src="/images/pg4/close.png" alt="" @click="onCancel">
+      <img class="close abs" src="/images/pg4/close.png" alt="" @click="emit('cancel')">
       <img class="open-flower" src="/images/pg4/flower-open.gif" alt="">
-      <p class="title">全球总种植数量: {{ user?.num }}</p>
-      <p class="planting" @click="animate">
+      <p class="title">{{countryData.name}}种植数量: {{ countryData.num }}</p>
+      <p class="planting" @click="onPlanting">
         <img src="/images/pg4/planting.png" alt="">
       </p>
     </div>
@@ -12,9 +12,12 @@
 </template>
 
 <script setup>
+  import { computed } from 'vue';
   import { useModel } from '@zjxpcyc/vue-tiny-store';
   import Modal from '@/components/Modal.vue';
   import track from '@/utils/track';
+  import { updateCountry as updateCountryAPI } from '@/services/country';
+  import throttle from '@/utils/throttle';
 
   const props = defineProps({
     country: String,
@@ -23,7 +26,12 @@
 
   const emit = defineEmits(['cancel', 'planted']);
 
-  const { user, updateContries } = useModel('user');
+  const { user, countries, updateCountries } = useModel('user');
+
+  const countryData = computed(() => {
+    const it = (countries.value || []).filter(x => x.name === props.country)[0];
+    return it || ({ name: props.country, num: 0 });
+  });
   
   const animate = (e) => {
     var n = 1;
@@ -55,19 +63,18 @@
       }
     );
     e.stopPropagation();
-
-    updateContries(props.country);
-    track();
   };
 
-  const onPlanting = () => {
-    //
-    // emit('planted');
-  }
+  const onPlanting = throttle((e) => {
+    animate(e);
 
-  const onCancel = () => {
-    emit('planted');
-  }
+    updateCountries(props.country);
+    updateCountryAPI(props.country);
+    track();
+    
+    // 可以无限种植
+    emit('planted', countryData.value);
+  }, 1000);
 
 </script>
 

src/pages/pg4/Map.vue

@@ -4,143 +4,69 @@
 </template>
 
 <script setup>
-  import { onMounted, ref, watch } from 'vue';
+  import { computed, onMounted, ref, watch } from 'vue';
+  import { useModel } from '@zjxpcyc/vue-tiny-store';
   import PageLoading from '@/components/PageLoading.vue';
-  import countryGPS from '@/utils/country_gps';
+  // import countryGPS from '@/utils/country_gps';
   import { getCountry } from '@/utils/maputil';
+  import throttle from '@/utils/throttle';
 
   const emit = defineEmits(['click']);
+  const { countries } = useModel('user');
 
   const el = ref();
   const mapRef = ref();
+  const markers = ref([]);
   const loading = ref(false);
 
-  // 展示部分国家
-  const mockCountries = [
-    '中国',
-    '芬兰',
-    '土耳其',
-    '德国',
-    '英国',
-    '瑞士',
-    '美国',
-    '加拿大',
-    '日本',
-    '韩国',
-    '马来西亚',
-    '澳大利亚',
-    '新西兰',
-    '新加坡',
-  ];
-
   // getGPSOfBDCountries();
 
-  onMounted(() => {
-    const map = new BMap.Map(el.value);
-    // const point = new BMap.Point(116.404, 39.915); // 天安门
-    const point = new BMap.Point(118.749731,32.04067);
-    map.centerAndZoom(point, 3);
-    mapRef.value = map;
-
-    // 绑定事件
-    map.addEventListener('click', (e) => {
-      // console.log('-----start-----')
-      // loading.value = true;
-      // const { point } = e;
-      // getCountry(point.lng, point.lat).then(x => {
-      //   emit('click', x);
-      //   loading.value = false;
-      // console.log('-----end-----')
-      // }).catch((err) => {
-      //   console.error(err);
-      //   loading.value = false;
-      // });
+  const onClick = throttle((point) => {
+    console.log('-----point-----', point)
+    loading.value = true;
+    getCountry(point.lng, point.lat).then(x => {
+      emit('click', x);
+      loading.value = false;
+    }).catch((err) => {
       emit('click', '中国');
+      console.error(err);
+      loading.value = false;
     });
+  }, 1000);
 
-    // 显示 marker
-    const icon = new BMap.Icon('./images/logo.png', new BMap.Size(16, 16));    
-    mockCountries.forEach(country => {
-        const target = countryGPS[country];
-        if (!target) {
-          console.error(`${country} 在世界GPS列表中不存在`)
-          return;
-        }
-        
-        const point = new BMap.Point(target[0], target[1]);
-        const marker = new BMap.Marker(point, { icon });
+  const icon = new BMap.Icon('./images/logo.png', new BMap.Size(16, 16));
+  
+  const renderCountry = (country) => {
+      // 没有数字与定位的跳过
+      if (!country.num || !country.loc) return;
 
-        //
-        marker.addEventListener('click', (e) => {
-          console.log('------marker----->', e)
-          emit('click', '中国');
-        });
+      // 已经绘制的跳过
+      const exist = markers.value.filter(x => x.id === country.name)[0];
+      if (exist) return;
 
-        map.addOverlay(marker);
-        // marker.setAnimation(BMAP_ANIMATION_BOUNCE);
+      const loc = country.loc.split(',');
+      const point = new BMap.Point(loc[0], loc[1]);
+      const marker = new BMap.Marker(point, { icon });
+      marker.addEventListener('click', (e) => onClick(e.target.point));
 
-        // map.getOverlays().forEach((overlay) => {
-        //   console.log('------overlay-------', overlay)
-        //   overlay.setAnimation(BMAP_ANIMATION_BOUNCE);
-        // });
-      });
+      mapRef.value.addOverlay(marker);
+      markers.value.push({id: country.name, marker});  
+  }
 
-    // window._AMapSecurityConfig = {
-    //   securityJsCode:'f33684b9573195f9f91a4c8bc779d7e2',
-    // }
-    // AMapLoader.load({
-    //   key: "378f2af0c01b00ec919ace1699f2466f",              // 申请好的Web端开发者Key，首次调用 load 时必填
-    //   version: "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
-    //   plugins: [],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
-    // }).then((AMap)=>{
-    //   const map = new AMap.Map(el.value, {
-    //     mapStyle: 'amap://styles/bff59c60c62af794ee93f1befde78625',
-    //     zoom: 3,
-    //   });
+  defineExpose({ renderCountry, map: mapRef });
 
-    //   const countries = Object.keys(countryGPS);
-    //   countries.forEach((country) => {
-    //     const position = countryGPS[country];
-    //     const found = mockCountries.filter(x => x===country)[0];
-
-    //     console.log('----position---->', position);
-        
-    //     const marker = new AMap.Marker({
-    //       map,
-    //       offset:[-100, -16],
-    //       content: `
-    //         <div class="map-marker-box">
-    //           <div class="map-marker-title">${country}</div>
-    //           ${found ? '<div class="map-marker-icon"/>' : ''}
-    //         </div>
-    //       `,
-    //       position,
-    //     });
-      // });
+  onMounted(() => {
+    const map = new BMap.Map(el.value);
+    // const point = new BMap.Point(116.404, 39.915); // 天安门
+    const point = new BMap.Point(118.749731,32.04067);
+    map.centerAndZoom(point, 3);
+    mapRef.value = map;
 
-      // mockCountries.forEach(country => {
-      //   const target = countryGPS[country];
-      //   if (!target) {
-      //     console.error(`${country} 在世界GPS列表中不存在`)
-      //     return;
-      //   }
-        
-      //   const marker = new AMap.Marker({
-      //     map,
-      //     offset:[-100, -16],
-      //     content: `
-      //       <div class="map-marker-box">
-      //         <div class="map-marker-title">${country}</div>
-      //         <div class="map-marker-icon"/>
-      //       </div>
-      //     `,
-      //     position: target,
-      //   });
-      // });
+    // 绑定事件
+    map.addEventListener('click', (e) => onClick(e.point));
 
-    // }).catch(e => {
-    //   console.error(e);
-    // })
+    // 显示 marker
+    countries.value.forEach(renderCountry);
   });
 
 </script>

src/pages/pg4/Rule.vue

@@ -4,7 +4,7 @@
       <h3>参与规则</h3>
       <ul>
         <li>选择要播撒的种子，并进行播种。</li>
-        <li>种植完成后，分享海报至“南京广播电视台”微信公众号领取实体徽章一枚。</li>
+        <li>种植完成后，分享证书至“南京广播电视台”微信公众号领取实体徽章一枚。</li>
       </ul>
     </div>
   </Modal>
@@ -17,6 +17,7 @@
   const show = ref(true);
 
   const onCancel = () => {
+    console.log('----------')
     show.value = false;
   }
 </script>

src/pages/pg4/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page pg-bg pg4">
-    <Map @click="onMapClick" />
+    <Map @click="onMapClick" ref="mapRef" />
     <Rule />
     <Flower
       :show="flowerShow"
@@ -33,33 +33,25 @@
   const planted = ref(false);
   const badgeShow = ref(false);
   const el = ref();
+  const mapRef = ref();
 
   const onMapClick = (country) => {
     countryRef.value = country;
     flowerShow.value = true;
   }
 
-  const onPlanted = () => {
+  const onPlanted = (country) => {
     planted.value = true;
-    flowerShow.value = false;
+
+    if (mapRef.value) {
+      mapRef.value.renderCountry(country);
+    }
   }
 
   const onShare = () => {
     router.push('/share')
   }
 
-  onMounted(() => {
-    const t = setTimeout(() => {
-      // 中国显示正中间
-      el.value.scroll(300, 0);
-      clearTimeout(t);
-    }, 500);
-
-    // 绘制紫金草
-
-
-  })
-
 </script>
 
 <style lang="less">

src/pages/pg4/plant.vue

@@ -48,7 +48,7 @@ import Share from "./Share.vue";
 import Badge from "./Badge.vue";
 import Rule from "./Rule.vue";
 
-const { user, contries, updateContries } = useModel("user");
+const { user, contries, updateCountries } = useModel("user");
 
 const router = useRouter();
 const choise = ref([]);
@@ -101,7 +101,7 @@ const onShare = () => {
 };
 const click = (item, e) => {
   const arr = choise.value;
-  updateContries(item.name);
+  updateCountries(item.name);
   animate(1, e);
   choise.value = [...new Set(arr.concat([item.name]))];
 };

src/pages/pg4/video.vue

@@ -1,23 +1,29 @@
 <template>
   <div class="page pg-bg video-pg">
     <div class="content">
-      <video
-        webkit-playsinline
-        playsinline
-        src="/video/和平宣言.mp4"
-        preload="preload"
-        autoplay="autoplay"
-        :controls="controls"
-        poster="/images/pg4/vid-poster.png"
-        ref="mediaRef"
-        @ended="show = true"
-        @play="pause()"
-        @pause="play()"
-      ></video>
-      <div class="play-action animate__animated animate__fadeIn">
-        <img src="/images/pg4/重播.png" @click="onReplay" alt="" />
-        <img src="/images/pg4/播撒种子.png" @click="onNext" alt="" />
+      <div class="title">
+        <div class="txt">六写《和平宣言》</div>
+        <div class="txt" style="font-size: 0.9em">
+          冯亦同用心用情用音向世界发出和平之声
+        </div>
       </div>
+      <video
+          webkit-playsinline
+          playsinline
+          src="/video/和平宣言.mp4"
+          preload="preload"
+          autoplay="autoplay"
+          :controls="controls"
+          poster="/images/pg4/vid-poster.png"
+          ref="mediaRef"
+          @ended="show = true"
+          @play="pause()"
+          @pause="play()"
+        ></video>
+        <div class="play-action animate__animated animate__fadeIn">
+          <img src="/images/pg4/重播.png" @click="onReplay" alt="" />
+          <img src="/images/pg4/播撒种子.png" @click="onNext" alt="" />
+        </div>
     </div>
   </div>
 </template>
@@ -31,7 +37,7 @@
   const router = useRouter();
   const route = useRoute();
   const mediaRef = ref();
-  const show = ref(false);
+  const show = ref(true);
   const controls = ref();
 
   const onReplay = () => {
@@ -82,19 +88,24 @@
   background-size: 100% 100%;
   display: flex;
   align-items: center;
+  justify-content: center;
+
   .content {
     position: relative;
+
+    .title {
+      text-align: center;
+      margin-bottom: 24px;
+    }
+
     video {
       // width: 100%;
       width: 100vw;
       z-index: 1;
     }
     .play-action {
-      position: absolute;
-      z-index: 2;
-      bottom: -80px;
       width: 100%;
-      height: 80px;
+      margin-top: 24px;
       display: flex;
       align-items: center;
       justify-content: center;
@@ -103,12 +114,10 @@
         width: 100px;
         width: 30vw;
         height: 10vw;
-      }
-      img:first-child {
-        margin-right: 20px;
-      }
-      img:last-child {
-        margin-left: 20px;
+
+        & + img {
+          margin-left: 40px;
+        }
       }
     }
   }

src/services/country.js

@@ -0,0 +1,5 @@
+import request from '@/utils/request';
+
+export const getCountryData = () => request('/api/wx/taCountry?pageSize=300');
+
+export const updateCountry = name => request.put('/api/wx/taCountry', { name });

src/services/track.js

@@ -0,0 +1,4 @@
+import request from '@/utils/request';
+
+export const saveTrack = data => request.post('/api/wx/taTrack', data);
+

src/store/index.js

@@ -38,25 +38,16 @@ 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 countries = ref([]);
+
+  const updateCountries = (key) => {
+    const country = countries.value.filter(x => x.name === key)[0] || { name: key, num: 0 };
+    country.num += 1;
+
+    if (!country.id) {
+      countries.value = [...countries.value].concat(country)
+    }
 
-  const updateContries = (key) => {
-    contries[key] += 1;
     if (user.value) {
       user.value.num += 1;
     }
@@ -65,8 +56,8 @@ const useUser = () => {
   return {
     user,
     setUser,
-    contries,
-    updateContries,
+    countries,
+    updateCountries,
   }
 }
 

src/utils/country_gps.js

@@ -15,7 +15,6 @@ export default {
   "阿塞拜疆": [47.53841, 40.371428],
   "巴哈马": [-77.394555, 25.009396],
   "日本": [139.828928,37.721421],
-
   "孟加拉国": [89.93617, 23.754802],
   "巴巴多斯": [-59.5317, 13.093871],
   "白俄罗斯": [27.434815, 53.225932],
@@ -40,7 +39,6 @@ export default {
   "中非共和国": [18.810124, 6.041238],
   "乍得": [18.447049, 14.768537],
   "智利": [-69.977876, -25.138942],
-  // "中国": [116.416833, 39.948327],
   "中国": [118.749731,32.04067],
   "哥伦比亚": [-73.478806, 2.776096],
   "科摩罗": [43.375844, -11.78857],
@@ -65,7 +63,6 @@ export default {
   "厄立特里亚": [37.648078, 15.784249],
   "爱沙尼亚": [25.476342, 58.478596],
   "埃塞俄比亚": [38.786169, 7.794486],
-
   "法罗群岛": [-6.797398, 61.97106],
   "斐济": [177.672622, -17.921157],
   "芬兰": [25.674431, 67.904553],
@@ -81,12 +78,10 @@ export default {
   "格陵兰": [-42.715567, 76.109625],
   "瓜德罗普岛": [-61.44, 16.00],
   "危地马拉": [-91.102574, 14.574812],
-
   "几内亚": [-9.920862, 9.507233],
   "几内亚比绍": [-15.258858, 11.72377],
   "圭亚那": [-58.825875, 2.121864],
   "海地": [-72.463939, 19.188571],
-
   "洪都拉斯": [-85.755474, 15.090622],
   "匈牙利": [19.131732, 46.477001],
   "冰岛": [-18.347671, 64.920607],
@@ -95,7 +90,6 @@ export default {
   "伊朗": [53.25111, 31.557465],
   "伊拉克": [42.709565, 32.494493],
   "爱尔兰": [-8.873846, 52.611764],
-
   "意大利": [12.380236, 42.789341],
   "牙买加": [-77.705921, 17.998272],
   "约旦": [35.688762, 30.054147],
@@ -122,7 +116,6 @@ export default {
   "马提尼克岛": [-60.962083, 14.601499],
   "毛里塔尼亚": [-11.585315, 20.304108],
   "新加坡": [103.861805,1.310129],
-
   "墨西哥": [-104.700828, 25.155423],
   "密克罗尼西亚(联邦) ": [158.202146, 6.84037],
   "摩尔多瓦共和国": [28.222509, 47.201738],
@@ -156,10 +149,7 @@ export default {
   "罗马尼亚": [24.554627,44.822581],
   "俄罗斯": [105.125642,60.284459],
   "卢旺达": [29.708849,-2.571033],
- 
-
   "圣皮埃尔和密克隆": [-56.193589,46.421843],
-  
   "萨摩亚": [-172.015124,-14.183153],
   "圣马力诺": [12.318397,43.536617],
   "圣多美和普林西比": [6.546377,-0.094488],
@@ -177,16 +167,13 @@ export default {
   "斯威士兰": [31.522017,-27.033699],
   "瑞典": [16.583656,63.159047],
   "瑞士": [7.88977,46.727455],
- 
   "塔吉克斯坦": [71.165934,38.539916],
   "泰国": [100.988803,16.062762],
   "马其顿": [21.609549,41.361815],
-
   "汤加": [-175.145232,-21.255308],
   "突尼斯": [10.192788,36.551971],
   "土耳其": [34.821265,39.413194],
   "土库曼斯坦": [54.593227,39.369869],
-
   "乌干达": [32.238125,0.172108],
   "乌克兰": [31.243127,48.468653],
   "阿联酋": [54.004622,23.088022],

src/utils/preload.js

@@ -23,6 +23,7 @@ export function preload(onProgress) {
 
     const callback = (e, isError) => {
       cursor += 1;
+      console.log('-----loading------>', cursor / total);
       onProgress(cursor / total);
       if (cursor >= total) {
         resolve(resources)

src/utils/resources.js

@@ -38,7 +38,7 @@ export const resources = [
   { image: './images/pg1/light-2.png' },
   { image: './images/pg1/light.png' },
   { image: './images/pg1/logo.png' },
-  { image: './images/pg1/md1-1.jpg' },
+  { image: './images/pg1/md1-1.png' },
   { image: './images/pg1/md2-header.png' },
   { image: './images/pg1/peace.png' },
 
@@ -71,7 +71,7 @@ export const resources = [
   { image: './images/pg3/btn.png' },
   { image: './images/pg3/jing.png' },
   { image: './images/pg3/left-bg.png' },
-  { image: './images/pg3/map.gif' },
+  // { image: './images/pg3/map.gif' },
   { image: './images/pg3/nan.png' },
   { image: './images/pg3/right-bg.png' },
   { image: './images/pg3/stele.png' },

src/utils/throttle.js

@@ -0,0 +1,14 @@
+
+export default (fn, delay) => {
+  let t = null;
+  return (...args) => {
+    if (t) return;
+
+    t = setTimeout(() => {
+      clearTimeout(t);
+      t = null;
+    }, delay);
+
+    return fn(...args);
+  }
+}

src/utils/track.js

@@ -1,4 +1,4 @@
-import request from './request'
+import { saveTrack } from "@/services/track";
 
 export default function(code) {
   const data = {
@@ -7,5 +7,5 @@ export default function(code) {
     ua: window.navigator.userAgent,
   }
 
-  return request.post('/api/wx/taTrack', data);
+  return saveTrack(data);
 }