h5-woshidangshijiluren/pages/detail/detail.vue

<template>
  <view @click="$u.throttle(toAnswer)">
    <iframe ref="iframe" src="static/html/explanation.html" frameborder="0"></iframe>
  </view>
</template>

<script>
export default {
  data() {
    return {
      flag: true
    };
  },
  methods: {
    showVr (id) {
      this.$u.api.baseFormShow({
        table_name: 'map_point_contents',
        id
      })
    },

    toAnswer () {
      uni.navigateTo({
        url: `/pages/answer/answer?id=${this.$route.query?.id}`
      })
    },

    async getImages (id) {
      const res = await this.$u.api.baseFormIndex({
        table_name: 'map_point_images',
        'with_relations[0]': 'image',
        'with_relations[1]': 'video',
        'filter[0][key]': 'map_point_id',
        'filter[0][op]': 'eq',
        'filter[0][value]': id
      })

      return res
    },

    async getDetail (id) {
      const res = await this.$u.api.pointDetail({
        //table_name: 'map_points',
        'with_relations[0]': 'image',
        'with_relations[1]': 'video',
        'with_relations[2]': 'videoImage',
        'with_relations[3]': 'mapPointContent',
        id
      })

      return res
    },
    async getVrs (id) {
      const res = await this.$u.api.pointDetail({
        table_name: 'map_point_contents',
        'with_relations[0]': 'image',
        'with_relations[1]': 'video',
        'filter[0][key]': 'map_point_id',
        'filter[0][op]': 'eq',
        'filter[0][value]': id
      })

      return res
    },

    hiddenLoad () {
      uni.hideLoading()
    }
  },
  onLoad (option) {
    if (this.flag) {
      uni.showLoading({
        mask: true,
        title: '加载中'
      })
      window.showVr = this.showVr
      window.toAnswer = this.toAnswer
      window.hideLoading = this.hiddenLoad

      this.$nextTick(() => {
        this.$refs['iframe'].onload = async () => {
          let detail = await this.getDetail(option.id)
          let vrs = detail.content
          let images = await this.getImages(option.id)
          this.$refs['iframe'].contentWindow.setDomData({ detail: detail.points , vrs: vrs, images: images.data })
        }
      })

      this.flag = false
    }
  },
}
</script>

<style lang="scss">
iframe {
  height: 100vh;
  width: 100vw;
}
</style>