ss_dc_wechat_mini_program/pages/device/callend.vue

<template>
    <view class="call-end-container">
        <!-- 有通话信息：显示详细信息 -->
        <view class="call-info-card" v-if="hasCallInfo">
            <image class="avatar" :src="contactAvatar" mode="aspectFill"></image>
            <view class="call-info">
                <text class="title">{{ status }}</text>
                <text class="contact-name">{{ contactName }}</text>
                <view class="duration-info">
                    <view class="duration-info" v-if="status === '通话已结束' && duration > 0">
                        <text>通话时长: {{ formatDuration(duration) }}</text>
                    </view>
                </view>
            </view>
        </view>

        <!-- 没有通话信息：显示简单提示 -->
        <view class="simple-info" v-else>
            <text class="simple-title">通话结束</text>
        </view>

        <!-- 根据是否有通话信息显示不同按钮 -->
        <button class="return-btn" v-if="hasCallInfo" @click="goToHomePage">返回首页</button>
        <button class="close-btn" v-else @click="killBackgroundApp">关闭</button>
    </view>
</template>

<script>
export default {
    data() {
        return {
            hasCallInfo: false, // 是否有通话信息
            contactName: '未知联系人',
            contactAvatar: '/static/logo.png',
            duration: 0, // 通话时长（秒）
            status: '通话已结束',
            callType: 'voice' // 'voice' 或 'video'
        }
    },
    onLoad(options) {
        // 从路由参数中获取通话信息
        if (options && options.name) {
            console.log('callend options', options)
            this.hasCallInfo = true
            this.contactName = decodeURIComponent(options.name) || '未知联系人';
            this.contactAvatar = decodeURIComponent(options.avatar) || '/static/logo.png';
            this.duration = parseInt(options.duration || 0);
            this.status = decodeURIComponent(options.status || '通话已结束');
        } else {
            console.log('callend 无参数，显示简单模式')
            this.hasCallInfo = false
        }
        console.log('callend 模式:', this.hasCallInfo ? '详细信息' : '简单模式')
    },
    methods: {
        // 格式化通话时长
        formatDuration(seconds) {
            if (!seconds || seconds <= 0) return '00:00'

            const minutes = Math.floor(seconds / 60)
            const remainingSeconds = seconds % 60

            const formattedMinutes = String(minutes).padStart(2, '0')
            const formattedSeconds = String(remainingSeconds).padStart(2, '0')

            return `${formattedMinutes}:${formattedSeconds}`
        },

        // 返回首页
        goToHomePage() {
            uni.reLaunch({
                url: '/pages/device/index'
            })
        },

        // 退出小程序
        async killBackgroundApp() {
            try {
                // 🧹 清理登录信息
                uni.removeStorageSync('userInfo')
                uni.removeStorageSync('JSESSIONID')

                // 🧹 清理通话相关缓存
                uni.removeStorageSync('currcall')
                uni.removeStorageSync('lastCallInfo')

                // 判断是否在真机环境
                if (typeof wmpf !== 'undefined') {
                    await wmpf.Channel.invoke({
                        command: 'killBackgroundApp',
                        data: {},
                        success: (res) => {
                            uni.showToast({
                                title: '已退出',
                                icon: 'success'
                            });
                        }
                    });
                } else {
                    // 开发环境也要清理缓存
                    uni.showToast({
                        title: '已退出（开发环境）',
                        icon: 'success'
                    });
                }
            } catch (error) {
                console.error('❌ 退出失败：', error);
                uni.showToast({
                    title: '退出失败',
                    icon: 'error'
                });
            }
        }
    }
}
</script>

<style>
.call-end-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40rpx;
    min-height: 100vh;
    background-color: #f5f5f5;
}

.call-info-card {
    width: 90%;
    background-color: #fff;
    border-radius: 16rpx;
    padding: 40rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
    margin-bottom: 60rpx;
}

.avatar {
    width: 160rpx;
    height: 160rpx;
    border-radius: 50%;
    margin-bottom: 30rpx;
    border: 4rpx solid #f0f0f0;
}

.call-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
}

.contact-name {
    font-size: 48rpx;
    color: #000;
    margin-bottom: 30rpx;
    font-weight: 500;
}

.duration-info {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32rpx;
    color: #666;
    margin-top: 20rpx;
}

.icon {
    width: 32rpx;
    height: 32rpx;
    margin-right: 10rpx;
}

.simple-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80rpx 40rpx;
}

.simple-title {
    font-size: 48rpx;
    font-weight: bold;
    color: #333;
}

.return-btn {
    background-color: #07c160;
    color: #fff;
    font-size: 36rpx;
    padding: 20rpx 0;
    width: 90%;
    border-radius: 12rpx;
    margin-top: 60rpx;
}

.close-btn {
    background-color: #ff4d4f;
    color: #fff;
    font-size: 36rpx;
    padding: 20rpx 0;
    width: 90%;
    border-radius: 12rpx;
    margin-top: 60rpx;
}

/* 横屏和竖屏模式的响应式样式 */
@media screen and (orientation: landscape) {
    .call-info-card {
        flex-direction: row;
        align-items: center;
        text-align: left;
        padding: 30rpx 40rpx;
    }

    .avatar {
        margin-right: 40rpx;
        margin-bottom: 0;
    }

    .call-info {
        align-items: flex-start;
    }
}
</style>