copy.nvue

<template>
  <view class="h-page">
    <CustomNavBar :title="t('asis.HeatMap')" />
    <PageOptions style="position: sticky;" :options="indicatorsList" :options-props="indicatorsOptions" @change="handleChange"></PageOptions>
    <!-- #ifndef APP-PLUS -->
    <view class="h-c-container">
       <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>
    <!-- #endif -->
  </view>
</template>


<script setup>
  import {
    ref,
    onMounted
  } from 'vue'
  import {
    getUserIndicatorIndexApi
  } from '@/api'
  import {
    onBackPress
  } from '@dcloudio/uni-app'
  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'
  
  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
    currentKey.value = e.indicatorKey
    if (flag.value) {
      // #ifdef APP-PLUS
      initHeatMapApp()
      // #endif
      
      // #ifndef APP-PLUS
      initHeatMapH5()
      // #endif
    }
  }
  
  const filterList = ref([])
  const webUrl = ref('')
  const webview = ref(null)
  const initHeatMapH5 = () => {
    const {
      startDate,
      endDate,
      storeId,
      indicatorKey
    } = params.value
    const token = uni.getStorageSync('Authorization')
    webUrl.value =
      `https://store.keliuyun.com/apph5/areaHeatMap?token=${token}&mallId=${storeId}&startDate=${startDate}&endDate=${endDate}&key=${currentKey.value}`
      // `http://192.168.1.20:3000/apph5/areaHeatMap?token=${token}&mallId=${storeId}&startDate=${startDate}&endDate=${endDate}&key=${currentKey.value}`
    console.log(webUrl.value);
  }
  
  // 使用plus.webview解决ios异常崩溃的问题
  onBackPress(()=>{
    // #ifdef APP-PLUS
    closeWebviewApp()
    // #endif
  })
  const initHeatMapApp = () => {
    if(webview.value){
      plus.webview.close(webview.value)
      webview.value = null
    }
    webview.value = plus.webview.create(
      `https://store.keliuyun.com/apph5/areaHeatMap?token=${token}&mallId=${storeId}&startDate=${startDate}&endDate=${endDate}&key=${currentKey.value}`
      "area-heatmap",
      {
        top: `${top+100}px`,  // 关键：从导航栏下方开始
        bottom: "0px",
        left: "0px",
        right: "0px",
        'uni-app': 'none',
        popGesture:'close',
        // backButtonAutoControl:'close',
        hardwareAccelerated: true,
        wkwebview: true,
      }
    )
    webview.value.show()
  }
  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>