<template>
  <view class="page">
    <!-- 注意： App 网页向应用 postMessage 为实时消息 -->
    <web-view v-if="vdata.url" :src="vdata.url" @message="onMessageFunc"></web-view>
  </view>
</template>

<script setup>
import { ref, reactive } from "vue"
import { onLoad } from "@dcloudio/uni-app"
import appConfig from "@/config/appConfig.js"
import storageManage from '@/commons/utils/storageManage.js'

const vdata = reactive({
  url: null,
})

onLoad((option) => {
  let jeepayToken = storageManage.token()

  let isView = false // 是否预览模式
  let uploadImgSize = storageManage.uploadImgSize() || ''
  let baseUrl = `${appConfig.env.JEEPAY_BASE_URL_H5}`

  vdata.url = `${baseUrl}/h5MchApplymentOption?configPage=${option.configPage}&jeepayToken=${jeepayToken}&applyId=${option.applyId}&uploadImgSize=${uploadImgSize}`
})

// App 网页向应用 postMessage 为实时消息
// 接收到 web-view事件 ,
// 注意：放置数据， 必须在data字段下，  比如： uni.postMessage({data: {ctrl: 'TOTOTOTOTOT'}})
function onMessageFunc(msg) {
  // 接收到响应的数据 [数组格式， 比如接收到 web-view的返回等特定事件， 将数据入栈全部返回 ]
  let postDataArray = msg.detail.data

  // 无数据
  if (!postDataArray || !Array.isArray(postDataArray)) {
    return false
  }
}
</script>

<style lang="scss" scoped>
.page {
  padding: 30rpx;
  box-sizing: border-box;
  padding-bottom: 150rpx;
  background-color: #f5f6fd;
  min-height: calc(100vh - 0px);
}
</style>
