qiushou-kiosk/src/views/viewer.vue

<template>
  <div class="viewer">
    <img
      v-if="isShowback"
      class="btn-back"
      :src="backBTN"
      @click="handleBack"
    />
    <iframe frameborder="0" :src="url"></iframe>
  </div>
</template>
<script setup>
import { computed, watchEffect, ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import backBTN from "../assets/sub_back_btn.png";
const isShowback = ref(true);
const router = useRouter();

defineOptions({
  name: "model-viewer",
});
const props = defineProps({
  id: {
    type: [Number, String],
    required: true,
  },
});

const url = computed(
  () =>
    `https://sit-qiushoubwg.4dage.com/scene/index.html#/?m=${
      props.id || "1196"
    }`
);
const handleBack = () => {
  console.log("handleBack");
  router.go(-1);
};
onMounted(() => {
  window.sceneBackIconStatus = (flag) => {
    isShowback.value = Boolean(flag) ? true : false;
  };
});
</script>

<style scoped>
.viewer,
iframe {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
}
.btn-back {
  width: 3.75rem;
  height: auto;
  top: 3.25rem;
  left: 2.6875rem;
  position: absolute;
  z-index: 10;
  cursor: pointer;
}
</style>