ss_dc_wechat_mini_program/pages/common/webview.vue

<template>
  <view class="webview-page">
    <web-view
      :src="webviewUrl"
      @load="handleLoad"
      @error="handleError"
      class="webview-container"
    ></web-view>

    <!-- 加载状态 -->
    <view v-if="loading" class="loading-overlay">
      <view class="loading-content">
        <view class="loading-spinner"></view>
        <text class="loading-text">加载中...</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

// 响应式数据
const loading = ref(true)
const webviewUrl = ref('')

/**
 * 构建 webview URL
 */
const buildWebviewUrl = (params) => {
  // 基础 H5 域名 - 同域部署
  // const baseUrl = 'http://127.0.0.1:5501/page/'
  // const baseUrl = 'https://yx.newfeifan.cn/page/'
  const baseUrl = 'https://m.hfdcschool.com/page'
  // const baseUrl = 'http://192.168.220.13:8080/page'
  
  

  // 根据 dest 映射到对应的 HTML 文件
  const dest = params.dest || params.ssDest || 'home'
  console.log(dest)
  let url = `${baseUrl}/${dest}.html`

  // 添加查询参数
  const queryParts = []

  // 传递所有参数给 H5
  Object.keys(params).forEach(key => {
    if (params[key] !== undefined && params[key] !== null) {
      // result参数已经是编码过的，不需要再次编码
      if (key === 'result') {
        queryParts.push(`${encodeURIComponent(key)}=${params[key]}`)
      } else {
        queryParts.push(`${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`)
      }
    }
  })

  // 添加小程序标识
  queryParts.push('from=miniprogram')
  queryParts.push(`timestamp=${Date.now()}`)

  // 添加认证信息 - JSESSIONID
  const jsessionId = uni.getStorageSync('JSESSIONID')
  if (jsessionId) {
    queryParts.push(`JSESSIONID=${encodeURIComponent(jsessionId)}`)
  }

  // 添加设备信息
  const deviceInfo = uni.getStorageSync("deviceInfo") || {}
  const devId = deviceInfo.deviceId || ''
  const sbmc = deviceInfo.model || ''
  if (devId) {
    queryParts.push(`devId=${encodeURIComponent(devId)}`)
  }
  if (sbmc) {
    queryParts.push(`sbmc=${encodeURIComponent(sbmc)}`)
  }

  if (queryParts.length > 0) {
    url += '?' + queryParts.join('&')
  }

  console.log('构建的 webview URL:', url)
  webviewUrl.value = url
  loading.value = false
}

/**
 * WebView 加载完成 - 监听 URL 参数
 */
const handleLoad = (e) => {
  console.log('WebView 加载完成',e)
  loading.value = false

  // 获取当前 WebView 的 URL
  const currentUrl = e.detail.src || webviewUrl.value
  console.log('当前 WebView URL:', currentUrl+"."+e.detail.src)

}

/**
 * WebView 加载错误
 */
const handleError = (e) => {
  console.error('WebView 加载错误:', e)
  loading.value = false
}

// 页面生命周期
onLoad((options) => {
  console.log('webview 页面 onLoad:', options)
  buildWebviewUrl(options || {})
})

</script>

<style scoped lang="scss">
.webview-page {
  height: 100vh;
  background: #fff;
}

.webview-container {
  width: 100%;
  height: 100vh;
}

.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.loading-spinner {
  width: 60rpx;
  height: 60rpx;
  border: 4rpx solid #f3f3f3;
  border-top: 4rpx solid #007AFF;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.loading-text {
  margin-top: 32rpx;
  font-size: 28rpx;
  color: #666;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>