<template>
  <view class="webview-container">
    <!-- 加载指示器 -->
    <view v-if="loading" class="loading">
      <text>加载中...</text>
    </view>
    
    <!-- Webview 组件 -->
    <web-view 
      :src="webviewUrl" 
      @load="onLoad" 
      @error="onError"
      class="webview"
    ></web-view>
    
    <!-- 错误提示 -->
    <view v-if="error" class="error">
      <text>页面加载失败，请检查网络连接</text>
      <button @click="reload" class="reload-btn">重新加载</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      loading: true,
      error: false,
      // 指定要加载的 H5 地址
      webviewUrl: 'https://your-domain.com/bcdh-app/', // 替换为您的 H5 地址
    }
  },
  
  onLoad(options) {
    // 可以从参数中动态设置 H5 地址
    if (options.url) {
      this.webviewUrl = decodeURIComponent(options.url)
    }
    
    // 设置页面标题
    uni.setNavigationBarTitle({
      title: 'bcdh应用'
    })
  },
  
  methods: {
    onLoad() {
      this.loading = false
      this.error = false
      console.log('H5页面加载完成')
    },
    
    onError() {
      this.loading = false
      this.error = true
      console.error('H5页面加载失败')
    },
    
    reload() {
      this.loading = true
      this.error = false
      // 重新加载页面
      location.reload()
    }
  }
}
</script>

<style scoped>
.webview-container {
  width: 100%;
  height: 100vh;
  position: relative;
}

.webview {
  width: 100%;
  height: 100%;
}

.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #666;
}

.error {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #f56c6c;
}

.reload-btn {
  margin-top: 20px;
  background-color: #007aff;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
}
</style>