# 收到来电但界面未显示 - 诊断指南

## 📊 日志分析

根据你提供的日志，我们可以确认：

### ✅ 成功的部分

1. **初始化成功**
   ```
   === TUICallKit 初始化完成，等待来电 ===
   ```

2. **收到来电信号**
   ```
   [receiveNewInvitation] [newInvite: resume-c2c-new-message]
   Step handle-c2c-new-message started
   ```

3. **消息处理完成**
   ```
   Step emit-c2c-message-event completed
   Step create-or-update-conversation-by-message completed
   ```

### ⚠️ 发现的问题

日志中有一个错误：
```
TypeError: _asyncToGenerator(...).apply is not a function
```

这个错误可能影响了 TUICallKit 组件的正常显示。

## 🔍 可能的原因

### 1. 组件层级问题
TUICallKit 组件可能被其他元素遮挡了。

### 2. 样式问题
TUICallKit 组件可能没有正确的样式，导致不可见。

### 3. 兼容性问题
可能存在 uni-app 版本或 Vue 版本的兼容性问题。

### 4. 组件状态问题
TUICallKit 组件可能没有正确响应来电状态。

## 🛠️ 解决方案

### 方案 1：调整组件层级和样式

修改 `call.vue` 的模板部分：

```vue
<template>
  <view class="page-container">
    <!-- TUICallKit 组件 - 确保在最上层 -->
    <view class="call-kit-wrapper" v-if="isLogin">
      <TUICallKit></TUICallKit>
    </view>
    
    <!-- 登录界面 -->
    <view class="loginBox" :class="{ 'hidden': showingCall }">
      <input
        class="input-box"
        v-model="patientId"
        :placeholder="!isLogin ? '请输入患者ID（数字）' : '输入医生ID或完整userId（如：doctor_1）'"
        placeholder-style="color:#BBBBBB;"
      />
      <view class="login">
        <button
          class="loginBtn"
          @click="!isLogin ? loginHandler() : callHandler()"
          :disabled="loading"
        >
          {{ loading ? '加载中...' : (!isLogin ? "登录" : "呼叫") }}
        </button>
      </view>
      <view v-if="isLogin" class="status-info">
        <text>当前登录: {{ currentUserId }}</text>
        <text class="tip">提示：呼叫医生请输入医生ID（如：1）或完整ID（如：doctor_1）</text>
      </view>
    </view>
  </view>
</template>

<style>
.page-container {
  width: 100vw;
  height: 100vh;
  position: relative;
}

.call-kit-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.8);
}

.loginBox {
  margin-top: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.loginBox.hidden {
  display: none;
}

/* 其他样式保持不变 */
</style>
```

### 方案 2：使用 TUIStore 监听状态

添加状态监听来确认组件是否正确响应：

```vue
<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import { TUICallKitAPI, TUIStore, StoreName, NAME, CallStatus } from "../src/index";
import TUICallKit from "../src/Components/TUICallKit";

let patientId = ref("2");
let currentUserId = ref("");
let isLogin = ref(false);
let loading = ref(false);
let showingCall = ref(false);  // 新增：标记是否正在通话

// 监听通话状态
onMounted(() => {
  // 监听通话状态变化
  TUIStore.watch(StoreName.CALL, {
    [NAME.CALL_STATUS]: (newStatus) => {
      console.log('=== 通话状态变化 ===', newStatus);
      
      if (newStatus !== CallStatus.IDLE) {
        showingCall.value = true;
        console.log('显示通话界面');
      } else {
        showingCall.value = false;
        console.log('隐藏通话界面');
      }
    }
  });
});

onUnmounted(() => {
  // 取消监听
  TUIStore.unwatch(StoreName.CALL, {
    [NAME.CALL_STATUS]: () => {}
  });
});

// 其他代码保持不变...
</script>
```

### 方案 3：检查页面配置

确保 `pages.json` 中的配置正确：

```json
{
  "pages": [
    {
      "path": "pages/call",
      "style": {
        "navigationBarTitleText": "视频通话",
        "enablePullDownRefresh": false,
        "disableScroll": true
      }
    }
  ]
}
```

### 方案 4：强制刷新组件

在收到来电时强制刷新组件：

```javascript
const loginHandler = async () => {
  // ... 现有代码 ...
  
  isLogin.value = true;
  
  // 强制刷新组件
  await nextTick();
  
  console.log('=== TUICallKit 组件已挂载 ===');
  
  // ... 其他代码 ...
};
```

## 🧪 调试步骤

### 步骤 1：检查组件是否挂载

在控制台执行：
```javascript
console.log('isLogin:', isLogin.value);
console.log('TUICallKit 组件应该已挂载');
```

### 步骤 2：检查通话状态

添加日志查看通话状态：
```javascript
import { TUIStore, StoreName, NAME } from "../src/index";

console.log('当前通话状态:', TUIStore.getData(StoreName.CALL, NAME.CALL_STATUS));
console.log('是否群组通话:', TUIStore.getData(StoreName.CALL, NAME.IS_GROUP));
console.log('通话角色:', TUIStore.getData(StoreName.CALL, NAME.CALL_ROLE));
```

### 步骤 3：检查组件可见性

在微信开发者工具中：
1. 点击"调试器"
2. 选择"Wxml"标签
3. 查找 `TUICallKit` 组件
4. 检查其样式和位置

### 步骤 4：查看完整日志

在控制台查看是否有其他错误信息：
```javascript
// 查找包含 "error" 或 "Error" 的日志
// 查找包含 "TUICallKit" 的日志
```

## 📱 真机测试

开发者工具可能与真机表现不同，建议：

1. **使用真机调试**
   - 微信开发者工具 → 预览 → 真机调试
   - 查看真机上的表现

2. **查看真机日志**
   - 使用 vConsole 或微信开发者工具的远程调试
   - 查看真机控制台日志

3. **测试权限**
   - 确保真机上已授予摄像头和麦克风权限
   - 设置 → 微信 → 权限管理

## 🎯 快速验证

### 验证 1：组件是否挂载

在 `call.vue` 中添加：
```vue
<view class="call-kit-wrapper" v-if="isLogin">
  <view class="debug-info">TUICallKit 组件区域</view>
  <TUICallKit></TUICallKit>
</view>

<style>
.debug-info {
  position: absolute;
  top: 0;
  left: 0;
  background: red;
  color: white;
  padding: 10px;
  z-index: 10000;
}
</style>
```

如果看到红色的"TUICallKit 组件区域"，说明组件已挂载。

### 验证 2：状态是否变化

添加状态显示：
```vue
<view v-if="isLogin" class="status-debug">
  <text>通话状态: {{ callStatus }}</text>
</view>

<script setup>
import { computed } from "vue";
import { TUIStore, StoreName, NAME } from "../src/index";

const callStatus = computed(() => {
  return TUIStore.getData(StoreName.CALL, NAME.CALL_STATUS);
});
</script>
```

### 验证 3：手动触发显示

添加一个测试按钮：
```vue
<button @click="testCallUI">测试通话界面</button>

<script setup>
const testCallUI = () => {
  console.log('=== 测试通话界面 ===');
  console.log('isLogin:', isLogin.value);
  console.log('通话状态:', TUIStore.getData(StoreName.CALL, NAME.CALL_STATUS));
  
  // 强制刷新
  isLogin.value = false;
  setTimeout(() => {
    isLogin.value = true;
  }, 100);
};
</script>
```

## 💡 常见问题

### Q1: 组件挂载了但看不到

**A:** 可能是样式问题，尝试：
```css
.call-kit-wrapper {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 9999 !important;
  background-color: rgba(0, 0, 0, 0.8) !important;
}
```

### Q2: 日志显示收到来电但界面无反应

**A:** 可能是组件内部状态问题，尝试：
1. 重新登录
2. 清除缓存
3. 重启微信开发者工具

### Q3: 真机和开发者工具表现不同

**A:** 这是正常的，以真机为准：
1. 使用真机调试功能
2. 查看真机日志
3. 在真机上测试完整流程

## 🔧 推荐的完整代码

基于以上分析，这是推荐的完整代码结构：

```vue
<template>
  <view class="page-container">
    <!-- TUICallKit 组件 -->
    <view class="call-kit-wrapper" v-if="isLogin">
      <TUICallKit></TUICallKit>
    </view>
    
    <!-- 登录界面 -->
    <view class="loginBox">
      <!-- 登录表单 -->
    </view>
    
    <!-- 调试信息（可选） -->
    <view v-if="isLogin" class="debug-panel">
      <text>登录状态: {{ isLogin }}</text>
      <text>用户ID: {{ currentUserId }}</text>
      <text>通话状态: {{ callStatus }}</text>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted, nextTick } from "vue";
import { TUICallKitAPI, TUIStore, StoreName, NAME, CallStatus } from "../src/index";
import TUICallKit from "../src/Components/TUICallKit";

// 状态
let patientId = ref("2");
let currentUserId = ref("");
let isLogin = ref(false);
let loading = ref(false);

// 计算属性 - 通话状态
const callStatus = computed(() => {
  return TUIStore.getData(StoreName.CALL, NAME.CALL_STATUS) || 'IDLE';
});

// 监听通话状态
onMounted(() => {
  console.log('=== 页面已挂载 ===');
  
  TUIStore.watch(StoreName.CALL, {
    [NAME.CALL_STATUS]: (newStatus) => {
      console.log('=== 通话状态变化 ===', newStatus);
    }
  });
});

onUnmounted(() => {
  TUIStore.unwatch(StoreName.CALL, {
    [NAME.CALL_STATUS]: () => {}
  });
});

// 登录处理
const loginHandler = async () => {
  // ... 现有登录代码 ...
  
  isLogin.value = true;
  await nextTick();
  
  console.log('=== TUICallKit 组件已挂载 ===');
  console.log('当前通话状态:', callStatus.value);
};

// 其他代码...
</script>

<style>
.page-container {
  width: 100vw;
  height: 100vh;
  position: relative;
}

.call-kit-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
}

.debug-panel {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 10px;
  font-size: 12px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* 其他样式... */
</style>
```

## 📞 下一步

1. **添加调试信息**：使用上面的调试代码
2. **查看状态变化**：确认通话状态是否正确变化
3. **检查组件显示**：确认 TUICallKit 组件是否可见
4. **真机测试**：在真机上测试完整流程

如果问题仍然存在，请提供：
1. 添加调试信息后的完整日志
2. Wxml 面板中 TUICallKit 组件的截图
3. 真机测试的结果

---

**最后更新：** 2024-03-04
**版本：** 1.0