urbanLifeline/urbanLifelineWeb/packages/workcase_wechat/pages/meeting/Meeting.uvue

<template>
    <!-- 半透明遮罩 + 底部弹窗 -->
    <view class="meeting-modal">
        <view class="modal-mask" @tap="handleMaskClick"></view>

        <!-- #ifdef MP-WEIXIN -->
        <!-- 微信小程序环境：底部弹窗 -->
        <view class="modal-content">
            <view class="modal-header">
                <text class="modal-title">{{ meetingName || '视频会议' }}</text>
                <view class="close-btn" @tap="confirmExit">
                    <text class="close-icon">×</text>
                </view>
            </view>

            <view class="modal-body">
                <view class="meeting-info">
                    <view class="info-item">
                        <text class="info-label">会议名称：</text>
                        <text class="info-value">{{ meetingName || '未命名会议' }}</text>
                    </view>
                    <view class="info-item">
                        <text class="info-label">会议ID：</text>
                        <text class="info-value">{{ meetingId || '-' }}</text>
                    </view>
                </view>

                <view class="tips-box">
                    <text class="tips-icon">⚠️</text>
                    <text class="tips-text">微信小程序暂不支持视频会议，请在浏览器中打开</text>
                </view>

                <view class="url-preview">
                    <text class="url-label">会议链接：</text>
                    <text class="url-text">{{ meetingUrl }}</text>
                </view>
            </view>

            <view class="modal-footer">
                <button class="action-btn copy-btn" @tap="copyUrl">
                    <text>复制会议链接</text>
                </button>
                <button class="action-btn browser-btn" @tap="openInBrowser">
                    <text>在浏览器中打开</text>
                </button>
            </view>
        </view>
        <!-- #endif -->

        <!-- #ifndef MP-WEIXIN -->
        <!-- 非微信小程序环境：全屏web-view -->
        <view class="meeting-page-full">
            <view class="meeting-nav" :style="{ paddingTop: statusBarHeight + 'px', height: navBarHeight + 'px' }">
                <view class="nav-back" @tap="handleNavBack">
                    <text class="back-icon">←</text>
                </view>
                <text class="nav-title">{{ meetingName || '视频会议' }}</text>
                <view class="nav-right" @tap="endMeeting">
                    <text class="end-btn">结束会议</text>
                </view>
            </view>
            <web-view
                ref="jitsiWebView"
                :src="meetingUrl"
                :webview-styles="webviewStyles"
                @message="handleWebViewMessage"
                @error="handleWebViewError"
            ></web-view>
        </view>
        <!-- #endif -->
    </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { workcaseChatAPI } from '@/api/workcase'
import { MEET_URL } from '@/config'

const statusBarHeight = ref(44)
const navBarHeight = ref(88)
const meetingUrl = ref('')
const meetingId = ref('')
const meetingName = ref('')
const meetingEnded = ref(false) // 会议是否已结束

const webviewStyles = ref({
    progress: {
        color: '#667eea'
    }
})

onMounted(() => {
    // 获取状态栏高度
    const windowInfo = uni.getWindowInfo()
    statusBarHeight.value = windowInfo.statusBarHeight || 44
    navBarHeight.value = statusBarHeight.value + 44

    // 获取页面参数
    const pages = getCurrentPages()
    const currentPage = pages[pages.length - 1] as any
    console.log('[MeetingView] currentPage.options:', currentPage?.options)

    if (currentPage && currentPage.options) {
        const originalMeetingUrl = decodeURIComponent(currentPage.options.meetingUrl || '')
        meetingId.value = currentPage.options.meetingId || ''
        meetingName.value = decodeURIComponent(currentPage.options.meetingName || '')

        // 检测是否为微信小程序环境
        // #ifdef MP-WEIXIN
        // 小程序环境：直接使用原始URL（显示提示弹窗）
        meetingUrl.value = originalMeetingUrl
        console.log('[MeetingView] 微信小程序环境，显示提示弹窗')
        // #endif

        // #ifndef MP-WEIXIN
        // 非小程序环境：使用HTML包装页面加载Jitsi（支持事件监听）
        const wrapperPath = '/static/jitsi-wrapper.html'
        meetingUrl.value = `${wrapperPath}?url=${encodeURIComponent(originalMeetingUrl)}`
        console.log('[MeetingView] 使用包装页面:', meetingUrl.value)
        // #endif
    }

    console.log('[MeetingView] 会议页面加载:', {
        meetingId: meetingId.value,
        meetingName: meetingName.value,
        meetingUrl: meetingUrl.value,
        urlLength: meetingUrl.value.length
    })

    // 检查URL是否有效
    if (!meetingUrl.value) {
        console.error('[MeetingView] 会议URL为空！')
        uni.showToast({
            title: '会议URL为空',
            icon: 'none'
        })
    }
})

// 确认退出（小程序环境）
function confirmExit() {
    uni.navigateBack()
}

// 导航栏返回按钮（Web环境）
function handleNavBack() {
    if (meetingEnded.value) {
        // 会议已结束，直接返回
        uni.navigateBack()
    } else {
        // 会议进行中，提示用户
        uni.showModal({
            title: '提示',
            content: '会议正在进行中，确定要离开吗？',
            success: (res) => {
                if (res.confirm) {
                    uni.navigateBack()
                }
            }
        })
    }
}

// 点击遮罩关闭
function handleMaskClick() {
    uni.navigateBack()
}

// 结束会议
async function endMeeting() {
    if (!meetingId.value) {
        uni.navigateBack()
        return
    }

    uni.showModal({
        title: '提示',
        content: '确定要结束会议吗？这将关闭所有参与者的会议。',
        success: async (res) => {
            if (res.confirm) {
                try {
                    uni.showLoading({ title: '结束会议中...' })
                    await workcaseChatAPI.endVideoMeeting(meetingId.value)
                    uni.hideLoading()

                    meetingEnded.value = true

                    uni.showToast({
                        title: '会议已结束',
                        icon: 'success',
                        duration: 2000
                    })

                    // 2秒后自动返回
                    setTimeout(() => uni.navigateBack(), 2000)
                } catch (e) {
                    uni.hideLoading()
                    console.error('[MeetingView] 结束会议失败:', e)
                    uni.showToast({ title: '结束会议失败', icon: 'none' })
                }
            }
        }
    })
}

// 处理webview消息（监听Jitsi事件）
function handleWebViewMessage(e: any) {
    console.log('[MeetingView] webview消息:', e)

    const { data } = e.detail
    if (!data || !Array.isArray(data) || data.length === 0) {
        return
    }

    // 解析消息
    const message = data[0]
    console.log('[MeetingView] 解析消息:', message)

    // 处理不同的Jitsi事件
    if (message.event) {
        switch (message.event) {
            case 'videoConferenceLeft':
                // 用户离开会议
                console.log('[MeetingView] 用户离开会议')
                handleUserLeftMeeting()
                break
            case 'videoConferenceJoined':
                // 用户加入会议
                console.log('[MeetingView] 用户加入会议')
                break
            case 'participantLeft':
                // 参与者离开
                console.log('[MeetingView] 参与者离开:', message.data)
                break
            case 'readyToClose':
                // 会议准备关闭
                console.log('[MeetingView] 会议准备关闭')
                handleMeetingEnded()
                break
        }
    }
}

// 处理用户离开会议
function handleUserLeftMeeting() {
    // 用户主动离开会议，直接返回
    uni.navigateBack()
}

// 处理会议结束
async function handleMeetingEnded() {
    if (meetingEnded.value) {
        return
    }

    meetingEnded.value = true
    console.log('[MeetingView] 会议已结束，同步到数据库')

    // 调用后端API标记会议结束
    if (meetingId.value) {
        try {
            await workcaseChatAPI.endVideoMeeting(meetingId.value)
            console.log('[MeetingView] 会议结束状态已同步到数据库')
        } catch (e) {
            console.error('[MeetingView] 同步会议结束状态失败:', e)
        }
    }

    // 提示用户并返回
    uni.showToast({
        title: '会议已结束',
        icon: 'success',
        duration: 2000
    })

    setTimeout(() => uni.navigateBack(), 2000)
}

// 处理webview错误
function handleWebViewError(e: any) {
    console.error('[MeetingView] webview错误:', e)
    uni.showToast({ title: '会议加载失败', icon: 'none' })
}

// 复制会议链接
function copyUrl() {
    if (!meetingUrl.value) {
        uni.showToast({ title: '会议链接为空', icon: 'none' })
        return
    }

    // 解析iframeUrl并构建完整的会议链接
    let fullMeetingUrl = meetingUrl.value
    
    // 检查是否为微信小程序环境
    // #ifdef MP-WEIXIN
    // 获取页面参数中的iframeUrl
    const pages = getCurrentPages()
    const currentPage = pages[pages.length - 1] as any
    const iframeUrl = currentPage?.options?.iframeUrl || ''
    
    if (iframeUrl) {
        // 构建正确的会议链接：MEET_URL + iframeUrl
        fullMeetingUrl = `${MEET_URL}${iframeUrl}`
    }
    // #endif

    uni.setClipboardData({
        data: fullMeetingUrl,
        success: () => {
            uni.showToast({ title: '链接已复制', icon: 'success' })
        },
        fail: () => {
            uni.showToast({ title: '复制失败', icon: 'none' })
        }
    })
}

// 在浏览器中打开
function openInBrowser() {
    if (!meetingUrl.value) {
        uni.showToast({ title: '会议链接为空', icon: 'none' })
        return
    }

    // 解析iframeUrl并构建完整的会议链接
    let fullMeetingUrl = meetingUrl.value
    
    // 检查是否为微信小程序环境且会议链接不是完整的MEET_URL格式
    // #ifdef MP-WEIXIN
    // 获取页面参数中的iframeUrl
    const pages = getCurrentPages()
    const currentPage = pages[pages.length - 1] as any
    const iframeUrl = currentPage?.options?.iframeUrl || ''
    
    if (iframeUrl) {
        // 构建正确的会议链接：MEET_URL + iframeUrl
        fullMeetingUrl = `${MEET_URL}${iframeUrl}`
    }
    // #endif

    // #ifdef MP-WEIXIN
    // 微信小程序：先复制链接，然后提示用户通过右上角菜单在浏览器中打开
    uni.setClipboardData({
        data: fullMeetingUrl,
        success: () => {
            uni.showModal({
                title: '链接已复制',
                content: '请按以下步骤在浏览器中打开会议：\n\n1. 点击右上角【···】菜单\n2. 选择【在浏览器中打开】\n3. 在浏览器中粘贴会议链接\n\n或直接在任意浏览器中粘贴打开',
                showCancel: false,
                confirmText: '知道了'
            })
        },
        fail: () => {
            uni.showToast({ title: '复制失败', icon: 'none' })
        }
    })
    // #endif

    // #ifndef MP-WEIXIN
    // 非微信小程序：直接打开链接
    // @ts-ignore
    if (typeof plus !== 'undefined') {
        // App环境：使用plus打开系统浏览器
        plus.runtime.openURL(fullMeetingUrl)
    } else {
        // H5环境：新窗口打开
        window.open(fullMeetingUrl, '_blank')
    }
    // #endif
}
</script>

<style lang="scss" scoped>
@import "./Meeting.scss"
</style>