njDaTuSha/src/pages/pg4/index.vue

<template>
  <div class="page pg-bg pg4">
    <!-- <Map @click="onMapClick" /> -->
    <Rule />
    <Flower
      :show="!flowerShow"
      :country="countryRef"
      @planted="onPlanted"
      @cancel="flowerShow = false"
    />
    <Share
      v-if="planted"
      class="share abs"
      @share="onShare"
      @badge="badgeShow = true"
    />
    <Badge :show="badgeShow" @cancel="badgeShow = false" />
  </div>
</template>

<script setup>
  import { onMounted, ref, watch } from 'vue';
  import { useRouter } from 'vue-router';
  import Rule from './Rule.vue';
  import Map from './Map.vue';
  import Flower from './Flower.vue';
  import Share from './Share.vue';
  import Badge from './Badge.vue';

  const router = useRouter();
  const countryRef = ref();
  const flowerShow = ref();
  const planted = ref(false);
  const badgeShow = ref(false);

  const onMapClick = (country) => {
    countryRef.value = country;
    flowerShow.value = true;
  }

  const onPlanted = () => {
    planted.value = true;
    flowerShow.value = false;
  }

  const onShare = () => {
    router.push('/share')
  }

</script>

<style lang="less">
.share {
  bottom: 0;
  left: 0;
}
</style>