fix

src/pages/pg4/Share.vue

       <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">
       目前总种植数量: 35896690
-    </div>
+    </div> -->
   </div>
 </template>
 
 
 <style lang="less" scoped>
 .share-wrapper {
-  background-image: linear-gradient(transparent, #EDEEF0 40%, #EDEEF0);
+  // background-image: linear-gradient(transparent, #EDEEF0 40%, #EDEEF0);
   box-sizing: border-box;
   padding: 10px 1em;
   width: 100%;

src/pages/pg4/plant.vue

 <template>
   <div class="page pg-bg pgplant">
+    <Rule />
     <GoBack class="goback abs" @click.stop="router.go(-1)" />
     <div class="content">
       <div class="content-item" v-for="(item, inx) in list" :key="inx">
         </div>
       </div>
     </div>
-
+    <Share
+      v-if="planted"
+      class="share"
+      @share="onShare"
+      @badge="badgeShow = true"
+    />
+    <Badge :show="badgeShow" @cancel="badgeShow = false" />
     <div class="footer txt">目前总种植数量：{{ user?.num }}</div>
   </div>
 </template>
 import GoBack from "@/components/GoBack.vue";
 import { useRouter } from "vue-router";
 import { useModel } from "@zjxpcyc/vue-tiny-store";
-// import animate from "@/utils/animate"
+import Share from "./Share.vue";
+import Badge from "./Badge.vue";
+import Rule from "./Rule.vue";
 
 const { user, contries, updateContries } = useModel("user");
 
 const router = useRouter();
 const choise = ref([]);
-const countryRef = ref();
-const flowerShow = ref();
-const planted = ref(false);
+const planted = ref(true);
 const badgeShow = ref(false);
 
-let timer = "timer";
-
 const animate = (plus, e) => {
-  // var _this = this;
-  console.log(e, "==");
-
   var n = 1;
   var $i = $("<b/>").text("+" + n);
   var x = e.pageX,
   //   console.log(name, "==--");
   return choise.value?.filter((x) => x === name)?.length > 0;
 };
+const onPlanted = () => {
+  planted.value = true;
+  flowerShow.value = false;
+};
 
+const onShare = () => {
+  router.push("/share");
+};
 const click = (item, e) => {
   const arr = choise.value;
   updateContries(item.name);

src/pages/pg4/video.vue

   };
 
   const onNext = () => {
-    router.push("/pg4/next");
+    router.push("/pg4/plant");
   };
 
 </script>

src/pages/share/index.vue

 <template>
   <div class="share-pg">
     <div class="will-copy" ref="src">
-      <img class="copy-img" src="/images/share.jpg" alt="">
+      <img class="copy-img" src="/images/share.jpg" alt="" />
       <div class="content txt">
-        <div class="name">昵称</div>
-        <div style="line-height: 1.6em">您是第123225位“紫金草行动”参与者。播撒紫金草种子，让和平之花开满全城。</div>
+        <div class="name">{{ user.nickname || "朋友" }}</div>
+        <div style="line-height: 1.6em">
+          您是第{{user.num}}位“紫金草行动”参与者。播撒紫金草种子，让和平之花开满全城。
+        </div>
       </div>
     </div>
-    <img class="img-target" :src="imgData" v-if="imgData" alt="">
+    <img class="img-target" :src="imgData" v-if="imgData" alt="" />
   </div>
 </template>
 
 <script setup>
-  import { onMounted, ref } from 'vue';
-  import html2canvas from 'html2canvas';
+import { onMounted,watch, ref } from "vue";
+import html2canvas from "html2canvas";
+import { useModel } from "@zjxpcyc/vue-tiny-store";
 
-  const imgData = ref();
-  const src = ref();
+const { user } = useModel("user");
+const imgData = ref();
+const src = ref();
 
-  onMounted(() => {
+
+onMounted(() => {
+  setTimeout(()=>{
     html2canvas(src.value).then((canvas) => {
-      imgData.value = canvas.toDataURL('image/jpg', .8);
-    });
+    imgData.value = canvas.toDataURL("image/jpg", 0.8);
   });
-
+  },1000)
+});
 </script>
 
 <style lang="less" scoped>
     left: 0;
   }
 }
-</style>
+</style>

src/store/index.js

 
 
 const useUser = () => {
-  const user = ref({num:66699});
+  const user = ref({});
 
   const setUser = v => user.value = v;