yzdyh-h5/src/tongyan.vue

<script setup lang="ts">
import { computed } from 'vue'
import { ref } from 'vue'
import { RouterView, useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()
const offset = ref({ x: 22, y: window.innerHeight - 100 })
const showBackIcon = computed(() => !['home'].includes((route.name || '') as string))

const back = () => {
  if (window.history.state.back) {
    router.go(-1)
  } else {
    router.replace({
      name: 'home'
    })
  }
}
</script>

<template>
  <router-view v-slot="{ Component }">
    <keep-alive include="tongyan">
      <component :is="Component" />
    </keep-alive>
  </router-view>

  <van-floating-bubble
    v-if="showBackIcon"
    v-model:offset="offset"
    axis="xy"
    magnetic="x"
    @click="back"
  >
    <img draggable="false" class="back-icon" src="@/assets/images/tongyan/icon_back@2x-min.png" />
  </van-floating-bubble>
</template>

<style lang="scss">
@import '@/assets/base.scss';

.van-floating-bubble {
  --van-floating-bubble-size: 116px;
  --van-floating-bubble-border-radius: 0;
  --van-floating-bubble-background: transparent;
}
.back-icon {
  width: 100%;
}
</style>