index.nvue

<template>
  <cover-view class="h-page">
    <CustomNavBar :title="t('asis.HeatMap')" />
    <PageOptions style="position: sticky;" :options="indicatorsList" :options-props="indicatorsOptions"
      @change="handleChange" @modal-change="handleModalChange" />
    <view class="h-c-container" v-if="!isIos">
      <web-view @onPostMessage="handleMessage" class="web-view" :fullscreen="false" :frameBorder="0" :src="webUrl"
        :style="`width:710rpx;height: ${webviewHeight}px;borderRadius:16rpx;overflow:hidden; background-color: #fff;`"></web-view>
    </view>
  </cover-view>
</template>


<script setup>
  import {
    ref,
    onMounted
  } from 'vue'
  import {
    getUserIndicatorIndexApi
  } from '@/api'
  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 {
    t
  } from '@/plugins/index.js'

  // 当前是不是ios设备
  let isIos = false
  // #ifdef APP-PLUS
  isIos = uni.getSystemInfoSync().platform === 'ios'
  // #endif

  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: `${data.gateName}\n${data.val}`,
      icon: 'none'
    })
  }
  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 params = ref({})
  const flag = ref(false) // 是否初始化完成
  const handleChange = (e) => {
    params.value = e
    if (e.indicatorKey) {
      currentKey.value = e.indicatorKey
    }
    if (flag.value) {
      initHeatMap()
    }
  }

  const filterList = ref([])
  const webUrl = ref('')
  const webview = ref(null)

  // 使用plus.webview解决ios异常崩溃的问题
  onBackPress(() => {
    if (isIos) {
      closeWebviewApp()
    }
  })

  // 加载webview
  const initHeatMap = () => {
    if (isIos) {
      initHeatMapApp()
    } else {
      initHeatMapH5()
    }
  }
  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)
    console.log(currentKey.value);

    webview.value = plus.webview.create(
      `https://retail.europe.vion-cloud.com/apph5/areaHeatMap?token=${token}&mallId=${storeId}&startDate=${startDate}&endDate=${endDate}&key=${currentKey.value}&serverIp=https://retail.europe.vion-cloud.com&lang=${uni.getStorageSync('lang')}`,
      "area-heatmap", {
        top: `${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')
    webUrl.value =
      `https://retail.europe.vion-cloud.com/apph5/areaHeatMap?token=${token}&mallId=${storeId}&startDate=${startDate}&endDate=${endDate}&key=${currentKey.value}&serverIp=https://retail.europe.vion-cloud.com&lang=${uni.getStorageSync('lang')}`,
      console.log(webUrl.value);
  }
  const closeWebviewApp = () => {
    if (webview.value) {
      webview.value.hide()
      webview.value.close()
      webview.value = null
    }
  }

  /**********  指标相关  *********/
  const indicatorsOptions = {
    label: 'indexName',
    value: 'indexKey'
  }
  onMounted(() => {
    initIndicatorList()
    flag.value = true
  })
  const currentKey = ref('')
  const indicatorsList = ref([])
  const initIndicatorList = async () => {
    try {
      const {
        data
      } = await getUserIndicatorIndexApi({
        id: params.value.storeId
      })
      indicatorsList.value = data?.filter(item => item.status === 1) || []
      currentKey.value = data.length > 0 ? data[0].indexKey : ''
      initHeatMap()
    } catch (e) {
      console.log(e);
    }
  }
</script>

<style lang="scss">
  .h-page {
    /* #ifdef H5 */
    min-height: calc(100vh - 44px);
    /* #endif */
    /* #ifndef H5 */
    min-height: 100vh;
    /* #endif */
    background-color: #f2f3f6;

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

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