feats

index.html

@@ -9,7 +9,7 @@
     <script src="./turn.min.js"></script>
     <script src="./config.js"></script>
     <script src="./slidePage/slidePage.min.js"></script>
-    <!-- <script src="https://api.map.baidu.com/api?v=3.0&ak=IDixtryGuZAFPZLh4r8XCAM054r8LCRs"></script> -->
+    <script src="https://api.map.baidu.com/api?v=3.0&ak=IDixtryGuZAFPZLh4r8XCAM054r8LCRs"></script>
 
     <link rel="stylesheet" href="./slidePage/slidePage.min.css">
 

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/pages/pg2-2/Ink.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="ink-box">
     <div>
-      <InkEffect class="ink-cover" :src="src" :active="active" />
+      <InkEffect class="ink-cover" :src="src" :speed="10" :active="active" />
       <!-- <img class="ink-back" :src="src" alt="" > -->
     </div>
   </div>

src/pages/pg4/Flower.vue

@@ -1,8 +1,10 @@
 <template>
-  <Modal v-if="show" @cancel="emit('cancel')">
+  <Modal v-if="show" :close="false">
     <div class="txt modal-flower">
-      <p class="title">{{country}}种植数量: 12896690</p>
-      <p class="planting" @click="onPlanting">
+      <img class="close abs" src="/images/pg4/close.png" alt="" @click="onCancel">
+      <img class="open-flower" src="/images/pg4/flower-open.gif" alt="">
+      <p class="title">当前种植总数量: {{ user?.num }}</p>
+      <p class="planting" @click="animate">
         <img src="/images/pg4/planting.png" alt="">
       </p>
     </div>
@@ -10,6 +12,7 @@
 </template>
 
 <script setup>
+  import { useModel } from '@zjxpcyc/vue-tiny-store';
   import Modal from '@/components/Modal.vue';
 
   const props = defineProps({
@@ -19,8 +22,48 @@
 
   const emit = defineEmits(['cancel', 'planted']);
 
+  const { user, updateContries } = useModel('user');
+  
+  const animate = (e) => {
+    var n = 1;
+    var $i = $("<b/>").text("+" + n);
+    var x = e.pageX,
+      y = e.pageY;
+    var n = 1;
+    var $i = $("<b/>").text("+" + n);
+    var x = e.pageX,
+      y = e.pageY;
+    $i.css({
+      "z-index": 99999,
+      top: y - 20,
+      left: x,
+      position: "absolute",
+      color: "#fff",
+      fontSize: '24px'
+      // "color": "#C6B0EA"
+    });
+    $("body").append($i);
+    $i.animate(
+      {
+        top: y - 100,
+        opacity: 0,
+      },
+      1200,
+      function () {
+        $i.remove();
+      }
+    );
+    e.stopPropagation();
+
+    updateContries(props.country);
+  };
+
   const onPlanting = () => {
     //
+    // emit('planted');
+  }
+
+  const onCancel = () => {
     emit('planted');
   }
 
@@ -30,6 +73,19 @@
 .modal-flower {
   width: 70vw;
   text-align: center;
+  position: relative;
+  margin: auto;
+
+  .close {
+    width: 40px;
+    right: 10px;
+    top: 20px;
+  }
+
+  .open-flower {
+    width: 60vw;
+    margin: auto;
+  }
 
   .title {
     color: #fff;

src/pages/pg4/Map.vue

@@ -18,11 +18,19 @@
   // 展示部分国家
   const mockCountries = [
     '中国',
-    '俄罗斯',
-    '哈萨克斯坦',
-    '伊朗',
-    '印度',
-    '泰国',
+    '芬兰',
+    '土耳其',
+    '德国',
+    '英国',
+    '瑞士',
+    '美国',
+    '加拿大',
+    '日本',
+    '韩国',
+    '马来西亚',
+    '澳大利亚',
+    '新西兰',
+    '新加坡',
   ];
 
   // getGPSOfBDCountries();

src/pages/pg4/MapFakeMaker.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="map-marker">
+    <div>
+      <div class="title"></div>
+      <img src="/images/logo.png" alt="">
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="less" scoped>
+.map-marker {
+  position: absolute;
+
+  & > div {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+
+  img {
+    
+  }
+}
+</style>

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/country_axis.js

@@ -0,0 +1,16 @@
+export default {
+  '中国': [1026, 663],
+  '芬兰': [645, 345],
+  '土耳其': [550, 573],
+  '德国': [485, 441],
+  '英国': [418, 387],
+  '瑞士': [419, 479],
+  '美国': [2075, 550],
+  '加拿大': [1913, 482],
+  '日本': [1210, 645],
+  '韩国': [1125, 665],
+  '马拉西亚': [921, 904],
+  '澳大利亚': [1172, 1164],
+  '新西兰': [1427, 1421],
+  '新加坡': [966, 955],
+}

src/pages/pg4/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page pg-bg pg4">
-    <!-- <Map @click="onMapClick" /> -->
+    <Map @click="onMapClick" />
     <Rule />
     <Flower
       :show="flowerShow"
@@ -9,7 +9,7 @@
       @cancel="flowerShow = false"
     />
     <Share
-      v-if="!planted"
+      v-if="planted"
       class="share abs"
       @share="onShare"
       @badge="badgeShow = true"
@@ -32,6 +32,7 @@
   const flowerShow = ref();
   const planted = ref(false);
   const badgeShow = ref(false);
+  const el = ref();
 
   const onMapClick = (country) => {
     countryRef.value = country;
@@ -47,9 +48,32 @@
     router.push('/share')
   }
 
+  onMounted(() => {
+    const t = setTimeout(() => {
+      // 中国显示正中间
+      el.value.scroll(300, 0);
+      clearTimeout(t);
+    }, 500);
+
+    // 绘制紫金草
+
+
+  })
+
 </script>
 
 <style lang="less">
+
+.content {
+  position: relative;
+  overflow: auto;
+
+  img {
+    width: 1330px;
+    // 1052
+  }
+}
+
 .share {
   bottom: 0;
   left: 0;

src/pages/pg4/plant.vue

@@ -85,6 +85,7 @@ const animate = (plus, e) => {
   );
   e.stopPropagation();
 };
+
 const isChoise = (name) => {
   // const
   //   console.log(name, "==--");