zhjwxt/uniapp/pages-common/webview/wechat_bind.vue

<!--微信绑定WebView页面-->
<template>
  <view class="webview-container">
    <!-- 显示加载状态 -->
    <view v-if="!webviewUrl || isLoading" class="loading-container">
      <view class="loading-text">正在加载微信授权页面...</view>
      <view class="debug-info" v-if="webviewUrl">
        <text>URL: {{ webviewUrl }}</text>
      </view>
    </view>
    
    <!-- webview -->
    <web-view 
      v-if="webviewUrl"
      :src="webviewUrl" 
      @message="onMessage"
      @load="onWebviewLoad"
      @error="onError">
    </web-view>
    
    <!-- 错误状态 -->
    <view v-if="hasError" class="error-container">
      <view class="error-text">页面加载失败</view>
      <view class="error-detail">{{ errorMessage }}</view>
      <button @click="goBack" class="back-btn">返回</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      webviewUrl: '',
      isLoading: true,
      hasError: false,
      errorMessage: ''
    }
  },
  onLoad(options) {
    console.log('webview页面参数：', options)
    
    if (options.url) {
      this.webviewUrl = decodeURIComponent(options.url)
      console.log('webview URL：', this.webviewUrl)
      
      // 3秒后隐藏加载状态（即使webview没有触发load事件）
      setTimeout(() => {
        this.isLoading = false
      }, 3000)
    } else {
      this.hasError = true
      this.errorMessage = '缺少URL参数'
      console.error('webview页面缺少URL参数')
    }
  },
  methods: {
    // 监听webview消息
    onMessage(event) {
      console.log('收到webview消息：', event)
      const detail = event.detail
      if (detail && detail.data && detail.data.length > 0) {
        const message = detail.data[0]
        this.handleWebviewMessage(message)
      }
    },
    
    // 处理webview消息
    handleWebviewMessage(message) {
      console.log('处理webview消息：', message)
      
      if (message.type === 'wechat_bind_success') {
        // 绑定成功
        uni.showToast({
          title: '微信绑定成功！',
          icon: 'success',
          duration: 2000
        })
        
        setTimeout(() => {
          // 返回上一页并刷新
          uni.navigateBack({
            delta: 2 // 回到设置页面
          })
        }, 2000)
        
      } else if (message.type === 'wechat_bind_error') {
        // 绑定失败
        uni.showToast({
          title: message.msg || '绑定失败',
          icon: 'none',
          duration: 3000
        })
        
        setTimeout(() => {
          uni.navigateBack()
        }, 3000)
        
      } else if (message.type === 'wechat_bind_cancel') {
        // 用户取消
        uni.showToast({
          title: '用户取消授权',
          icon: 'none'
        })
        
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
      }
    },
    
    // webview加载完成
    onWebviewLoad(event) {
      console.log('webview加载完成:', event)
      this.isLoading = false
    },
    
    // webview加载错误
    onError(error) {
      console.error('webview加载错误：', error)
      this.isLoading = false
      this.hasError = true
      this.errorMessage = error.detail?.errMsg || '未知错误'
    },
    
    // 返回按钮
    goBack() {
      uni.navigateBack()
    }
  }
}
</script>

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

.loading-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  z-index: 10;
}

.loading-text {
  font-size: 16px;
  color: #333;
  margin-bottom: 20px;
}

.debug-info {
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 4px;
  max-width: 90%;
  font-size: 12px;
  color: #666;
  word-break: break-all;
}

.error-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  z-index: 10;
}

.error-text {
  font-size: 18px;
  color: #f56c6c;
  margin-bottom: 10px;
}

.error-detail {
  font-size: 14px;
  color: #999;
  margin-bottom: 20px;
  text-align: center;
  padding: 0 20px;
}

.back-btn {
  background-color: #29d3b4;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  font-size: 16px;
}
</style>