feat:对方挂断延迟跳转

张含笑

2026-01-16 c363e29f642e4fb9ef485bc297dd64123d949215

feat:对方挂断延迟跳转

 applications/mobile-web-view/src/appPages/voiceCallDetail/index.vue

@@ -23,8 +23,9 @@
            <div class="status-group">
                <strong v-if="state==='ringing'" class="status-text incoming-status">来电中...</strong>
                <strong v-if="state==='calling'" class="status-text calling-status">呼叫中...</strong>
                <!--    <strong class="status-text">状态：<span :style="{color: getStateColor(state)}">{{ state }}</span></strong>-->
                <strong v-if="state==='in-call'" class="status-text">通话时长：{{ durationText }}</strong>
                <!--  通话结束提示-->
                <strong v-if="callEnded" class="status-text ended-status">{{ endMessage }}</strong>
            </div>
            <div class="button-group">
                <button v-if="state === 'idle' && !receiveParameters" @click="requestCall" :disabled="!connected" class="btn btn-call">呼叫</button>
@@ -128,6 +129,10 @@
const state = ref('idle') // idle | calling | ringing | in-call
const logText = ref('')
const remoteAudio = ref(null)
// 通话结束相关
const callEnded = ref(false)
const endMessage = ref('对方已挂断')
const endTimer = ref(null)

/**
 * 根据状态返回对应颜色
@@ -624,12 +629,41 @@
    lastOfferSdp = null

    state.value = 'idle'

    // 返回上一页（uni-app的语音通话列表页面）
    if (window.uni) {
        window.uni.navigateBack()
	
    // 清除之前的定时器
    if (endTimer.value) {
        clearTimeout(endTimer.value)
        endTimer.value = null
    }
	
    // 根据是谁发起的挂断决定不同的行为
    if (sendToPeer) {
        // 自己主动挂断：不提示，不延迟，直接跳转
        log('⏰ 自己主动挂断，直接返回')
        callEnded.value = false
        // 返回上一页（uni-app的语音通话列表页面）
        if (window.uni) {
            window.uni.navigateBack()
        } else {
            log('❌ uni对象不存在，无法返回上一页')
        }
    } else {
        log('❌ uni对象不存在，无法返回上一页')
        // 对方挂断：显示提示，延迟10秒跳转
        callEnded.value = true
        endMessage.value = '对方已挂断'
		
        // 延迟10秒后跳转页面
        endTimer.value = setTimeout(() => {
            log('⏰ 通话结束10秒后自动返回')
            // 返回上一页（uni-app的语音通话列表页面）
            if (window.uni) {
                window.uni.navigateBack()
            } else {
                log('❌ uni对象不存在，无法返回上一页')
            }
            // 重置通话结束状态
            callEnded.value = false
        }, 5000)
    }
}

@@ -668,12 +702,6 @@
    }
});

// 监听连接状态，连接成功后自动呼叫
// watch(() => connected.value, (newVal) => {
//     if (newVal && state.value === 'idle') {
//         requestCall()
//     }
// })

onBeforeUnmount(() => {
    cleanup(false)
@@ -702,6 +730,15 @@
    padding: 0;
}

/* 通话结束状态样式 */
.status-text.ended-status {
    color: #e74c3c;
    font-size: 18px;
    font-weight: bold;
    margin-top: 10px;
    text-align: center;
}

.content-wrapper {
    display: flex;
    flex-direction: column;