index.nvue

<template>
  <!-- #ifdef H5 -->
  <view v-if="as==='comp' && index===1" style="position: fixed;top: 0px;">
  <!-- #endif -->
  <!-- #ifndef H5 -->
  <view v-if="as==='comp' && index===1" :style="`position: fixed;top: ${navHeight+88}px;`">
  <!-- #endif -->
    <PageOptions :options="filterList" :as="as" @change="handleChange"></PageOptions>
  </view>
  <view style="height: 92rpx;" v-if="as==='comp' && index===1"></view>

  <view class="h-page">
    <CustomNavBar v-if="as!=='comp'" :title="t('PreMenu.jointheatmap')" />
    <view :style="`position: fixed;z-index: 99;top: ${navHeight+44}px;`" v-if="as!=='comp'">
      <PageOptions style="position: sticky;" :options="filterList" :as="as" @change="handleChange" @modalChange="handleModalChange" />
    </view>
    <view v-if="as!=='comp'" style="height: 164rpx;"></view>
<!--    <uv-alert type="warning" :customStyle="{marginLeft:'20rpx',width:'710rpx'}" :show-icon="true"
      description="提示: 点击下方滑动条，调整热力效果" closable></uv-alert> -->
    <view class="h-c-container" v-if="!isIos">
      <scroll-view scroll-y="true" height="200px">
        <web-view @onPostMessage="handleMessage" class="web-view" :fullscreen="false" :frameBorder="0" :src="webUrl"
          :style="`width:710rpx;height: ${webviewHeight}px; background-color: #fff;`"></web-view>
      </scroll-view>

    </view>
  </view>
</template>


<script setup>
  import {
    ref,
    onMounted,
    nextTick
  } from 'vue'
  import {
    onBackPress
  } from '@dcloudio/uni-app'
  import {
    rpx2Px
  } from '@/utils'
  import PageOptions from '@/components/PageOptions.vue'
  import CardNvue from '@/pages/flow/components/Card.nvue'
  import CustomNavBar from '@/components/CustomNav.nvue'
  import {
    useNav
  } from '@/hooks'
  import { t } from '@/plugins/index.js'

  let isIos = false
  // #ifdef APP-PLUS
  isIos = uni.getSystemInfoSync().platform === 'ios'
  // #endif

  const {
    navHeight
  } = useNav()

  const htmlPath = ref('')
  const handleMessage = (e) => {
    const data = e.detail.data[0]
    if (data.type === 'setHeight') {
      webviewHeight.value = data.height + 10
      return
    }
    if (!data.gateId) return
    uni.showToast({
      title: `gateId:${data.gateId}`
    })
  }
  const webviewHeight = ref(650)

  // #ifdef H5
  onMounted(() => {
    window.onmessage = e => {
      const {
        type,
        height
      } = e.data?.data?.arg || {}
      if (type === 'setHeight') {
        webviewHeight.value = (height || 650) + 10
      }
    }
  })
  // #endif

  const props= defineProps({
    as: {
      type: String,
      default: 'page'
    },
    index: {
      type: Number,
      default: 0
    }
  })
  const params = ref({})
  const flag = ref(false) // 是否初始化完成
  const handleChange = (e) => {
    params.value = e
    if (flag.value) {
      initHeatMap()
    }
  }

  const filterList = ref([])
  const webUrl = ref('')
  onMounted(() => {
    filterList.value = [{
      label: t('table.residenceTime'),
      value: 'rt'
    }, {
      label: t('PreMallIndex.CustomerMantime'),
      value: 'tc'
    }]
    initHeatMap()
    flag.value = true
  })
 // 加载webview
  const initHeatMap = ()=>{
    // #ifdef APP-PLUS
      if(isIos){
        initHeatMapApp()
      }else{
        initHeatMapH5()
      }
    // #endif
    // #ifndef APP-PLUS
    initHeatMapH5()
    // #endif

  }
  // 使用plus.webview解决ios异常崩溃的问题
  onBackPress(()=>{
    if(isIos){
      closeWebviewApp()
    }
  })
  const webview = ref(null)
  const handleModalChange = (val)=>{
    val? webview.value?.hide() : webview.value?.show()
  }
  const initHeatMapApp = () => {
    if(webview.value){
      plus.webview.close(webview.value)
      webview.value = null
    }
    const {
      startDate,
      endDate,
      storeId,
      indicatorKey
    } = params.value
    const token = uni.getStorageSync('Authorization')

    const statusBarHeight = plus.navigator.getStatusbarHeight()
    const top = statusBarHeight + 84 + rpx2Px(88)

    webview.value = plus.webview.create(
    `https://retail.europe.vion-cloud.com/apph5/heatMap?token=${token}&mallId=${storeId}&startDate=${startDate}&endDate=${endDate}&level=${indicatorKey||'rt'}&serverIp=https://retail.europe.vion-cloud.com&lang=${uni.getStorageSync('lang')}`,
      "store-heatmap",
      {
        top: `${props.as === 'comp'?top+rpx2Px(16):top}px`,  // 关键：从导航栏下方开始
        bottom: "0px",
        left: "0px",
        right: "0px",
        'uni-app': 'none',
        popGesture:'close',
        // backButtonAutoControl:'close',
        hardwareAccelerated: true,
        wkwebview: true,
        zindex: 0
      }
    )
    webview.value.show()
  }

  const initHeatMapH5 = () => {
    const {
      startDate,
      endDate,
      storeId,
      indicatorKey
    } = params.value
    const token = uni.getStorageSync('Authorization')
    nextTick(()=>{
      webUrl.value =
      `https://retail.europe.vion-cloud.com/apph5/heatMap?token=${token}&mallId=${storeId}&startDate=${startDate}&endDate=${endDate}&level=${indicatorKey||'rt'}&serverIp=https://retail.europe.vion-cloud.com&lang=${uni.getStorageSync('lang')}`
    })
  }

  const closeWebviewApp = ()=>{
    if(webview.value){
      webview.value.hide()
      webview.value.close()
      webview.value = null
    }
  }

</script>

<style lang="scss">
  .h-page {
    min-height: 100vh;
    background-color: #f2f3f6;

    .h-c-container {
      border-radius: 12rpx;
      overflow: hidden;
      padding: 0 20rpx 20rpx;
    }
  }

  .web-view {
    position: relative;
  }
</style>