<!DOCTYPE html>
<html lang="en">
<!-- dir="rtl"-->

<head>
    <!-- Required meta tags  -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <title>HaoSNS</title>
    <!-- <link rel="icon" type="image/png" href="assets/img/favicon.png"> -->

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Outfit:wght@100..900&display=swap" rel="stylesheet">
    <style>
        :root {
            --adminuiux-content-font: "Open Sans", sans-serif;
            --adminuiux-content-font-weight: 400;
            --adminuiux-title-font: "Outfit", sans-serif;
            --adminuiux-title-font-weight: 600;
        }
    </style>

    <!-- <script src="core/vue.global.prod.min.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.5.21/vue.global.min.js"></script>
<link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />
<script>
    document.title = '';
    // 获取页面标题
    document.addEventListener("DOMContentLoaded", () => {
        axios.get(api.configGetconfigUrl, {
            params: {
                
            }
        }).then(res => {
            document.title = res.data.data.shop_name
        })
    })
</script>
<script defer src="/template/use/mobile/assets/js/app.js?3b597d0b729635069a47"></script><link href="/template/use/mobile/assets/css/app.css?3b597d0b729635069a47" rel="stylesheet"></head>
    <style>
    /* 基础样式重置 */
    /* * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    } */

    /* body {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: #f5f5f5;
        padding: 20px;
    } */

    /* .container {
        text-align: center;
        max-width: 500px;
        width: 100%;
        background: white;
        padding: 30px;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    } */

    /* h1 {
        color: #333;
        margin-bottom: 30px;
        font-size: 24px;
    }

    .button-group {
        display: flex;
        flex-direction: column;
        gap: 15px;
        width: 100%;
        margin-bottom: 20px;
    }

    button {
        padding: 12px 20px;
        border: none;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    button:hover {
        transform: translateY(-2px);
    }

    .btn-primary {
        background-color: #4285f4;
        color: white;
    }

    .btn-success {
        background-color: #0f9d58;
        color: white;
    }

    .btn-error {
        background-color: #ea4335;
        color: white;
    }

    .btn-warning {
        background-color: #fbbc05;
        color: #333;
    } */

    /* Toast 样式 - 已修改为居中显示 */
    .toast-container {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 9999;
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }

    .toast {
        padding: 12px 20px;
        border-radius: 8px;
        color: white;
        font-size: 14px;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
        opacity: 0;
        transform: scale(0.9);
        transition: all 0.3s ease;
        max-width: 80vw;
        word-break: break-word;
        text-align: center;
    }

    .toast.show {
        opacity: 1;
        transform: scale(1);
    }

    .toast-primary {
        background-color: rgba(66, 133, 244, 0.9);
    }

    .toast-success {
        background-color: rgba(15, 157, 88, 0.9);
    }

    .toast-error {
        background-color: rgba(234, 67, 53, 0.9);
    }

    .toast-warning {
        background-color: rgba(251, 188, 5, 0.9);
        color: #333;
    }
</style>



<script>
    // 初始化toast容器
    function initToastContainer() {
        let container = document.querySelector('.toast-container');
        if (!container) {
            container = document.createElement('div');
            container.className = 'toast-container';
            document.body.appendChild(container);
        }
        return container;
    }

    /**
     * 显示toast提示
     * @param {string} message - 提示消息内容
     * @param {number} duration - 显示时长(毫秒)，默认2000ms
     * @param {string} type - 提示类型，可选值：primary, success, error, warning
     */
    function showToast(message, duration = 2000, type = 'primary') {
        if(message == '登录超时，请重新登录' || message == '请求参数缺token'){
            return;
        }
        const container = initToastContainer();

        // 创建toast元素
        const toast = document.createElement('div');
        toast.className = `toast toast-${type}`;
        toast.textContent = message;

        // 添加到容器
        container.appendChild(toast);

        // 触发显示动画
        setTimeout(() => {
            toast.classList.add('show');
        }, 10);

        // 自动关闭
        setTimeout(() => {
            toast.classList.remove('show');
            // 动画结束后移除元素
            setTimeout(() => {
                container.removeChild(toast);
            }, 300);
        }, duration);
    }
</script>
    <style>
    .preview-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.8);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1000;
    }

    .preview-container img {
        max-width: 100%;
        max-height: 80%;
    }
</style>

<div class="preview-container" id="previewContainer" style="display: none;">
    <div class="swiper coreSwiper">
        <div class="swiper-wrapper">
            <!-- 初始占位slide（后续会根据数组动态生成） -->
        </div>
    </div>
</div>

<script>
    // 声明Swiper实例变量，方便后续更新
    let swiperInstance = null;

    function showPreview(src) { 
        const previewContainer = document.getElementById('previewContainer');
        const previewImage = document.querySelector('.previewImage'); // 优化选择器
        
        // 非数组（单张图片）逻辑
        if (src != null && !Array.isArray(src)) { 
            const previewImage = document.createElement('img');
            previewImage.className = 'previewImage';
            previewImage.src = src;
            
            // 清空轮播容器，只放单张图片
            const swiperWrapper = document.querySelector('.swiper-wrapper');
            swiperWrapper.innerHTML = `<div class="swiper-slide" style="width: 100%;height: 100%;">${previewImage.outerHTML}</div>`;
            
            previewContainer.style.display = 'flex';
            previewContainer.onclick = () => previewContainer.style.display = 'none';
            return;
        }
        
        // 数组（轮播图）逻辑
        if (src != null && Array.isArray(src)) { 
            const swiperWrapper = document.querySelector('.swiper-wrapper');
            // 1. 清空旧内容，避免重复
            swiperWrapper.innerHTML = '';
            
            // 2. 根据数组长度动态生成slide
            src.forEach(itemSrc => {
                const slide = document.createElement('div');
                slide.className = 'swiper-slide';
                slide.style = 'width: 100%;height: 100%;';
                
                const img = document.createElement('img');
                img.className = 'previewImage';
                img.src = itemSrc;
                
                slide.appendChild(img);
                swiperWrapper.appendChild(slide);
            });
            
            previewContainer.style.display = 'flex';
            previewContainer.onclick = () => previewContainer.style.display = 'none';
            
            // 3. 更新Swiper实例（DOM变化后需重新初始化）
            if (swiperInstance) {
                swiperInstance.destroy(true, true); // 销毁旧实例
            }
            initSwiper(); // 重新初始化
        }
    }

    // 封装Swiper初始化函数
    function initSwiper() {
        swiperInstance = new Swiper('.coreSwiper', {
            loop: true,
            slidesPerView: 1,
            autoplay: false,
            // 可选：添加分页器（如果需要）
            // pagination: {
            //     el: '.swiper-pagination',
            // },
        });
    }

    window.addEventListener('load', initSwiper);
</script>
        <style>
            .myLeftChatBg {
                background-color: #fff;
                color: #222;
            }

            .myLeftChatColor {
                color: #fff;
            }

            .myRightChatBg {
                background-color: #95ed70;
                color: #222;
            }

            .myRightChatColor {
                color: #95ed70;
            }


            .right-chat .tr {
                transform: translateX(-73%);
            }

            .left-chat .tl {
                left: 70%;
            }


            .myOffCanvaeBg {
                background-color: #ededed;
            }

            /* 自定义背景颜色 */
            .myThemeBg1 {
                background-color: #fff;

            }

            [data-bs-theme=dark] .myThemeBg1 {
                background-color: rgba(var(--adminuiux-theme-1-rgb), 0.15);
            }

            .avatar.avatar-15 {
                height: 15px;
                width: 15px;
                line-height: 13px;
            }

            .avatar.avatar-35 {
                height: 35px;
                width: 35px;
                line-height: 33px;
            }

            .avatar.avatar-30 {
                scale: 1.2;
            }

            .navbar {
                height: 44px;
                padding-top: 0px;
                padding-bottom: 0px;
            }

            .navbar .container-fluid {
                height: 44px;
            }


            .myCol-7 {
                flex: 0 0 auto;
                width: calc(100% / 7);
            }


            .nowrap,
            .nowrap span {
                display: flex;
                align-items: center;
            }
        </style>

        <body
            class="main-bg main-bg-opac roundedui adminuiux-header-standard adminuiux-sidebar-standard theme-blue adminuiux-header-transparent adminuiux-sidebar-fill-white bg-gradient-3 scrollup"
            data-theme="theme-blue" data-sidebarfill="adminuiux-sidebar-fill-white" data-bs-spy="scroll"
            data-bs-target="#list-example" data-bs-smooth-scroll="true" tabindex="0"
            data-sidebarlayout="adminuiux-sidebar-standard" data-headerlayout="adminuiux-header-standard"
            data-headerfill="adminuiux-header-transparent" data-bggradient="bg-gradient-3">

            <!-- Pageloader -->
<div id="loader" class="pageloader">
    <div class="container h-100">
        <div class="row justify-content-center align-items-center text-center h-100">
            <div class="col-12 mb-auto pt-4"></div>
            <div class="col-auto">
                <img src="https://haodds.oss-cn-shanghai.aliyuncs.com/oss/aliyun/uploads/images/20250523203057c85fc6773.png"  class="maxwidth-100 mx-auto mb-3">
                <p class="h6 mb-0">HaoSNS社交系统</p>
                <!-- <p class="h2 text-theme-1 mb-4">赣州乐易网络科技有限公司</p> -->
                <div class="loader5 mb-2 mx-auto"></div>
            </div>
            <div class="col-12 mt-auto pb-4">
                <p class="text-secondary">页面加载中...</p>
            </div>
        </div>
    </div>
</div>

                <div id="app">
                    <!-- standard header -->
                    <header class="adminuiux-header">
                        <!-- Fixed navbar -->
                        <nav class="navbar navbar-expand-lg fixed-top">
                            <div class="container-fluid">
                                <!-- main sidebar toggle -->
                                <!-- back -->
                                <button style="position: relative;left: -10px;" class="btn btn-square btn-link"
                                    onclick="goBack();">
                                    <i class="bi bi-chevron-left"></i>
                                </button>
                                <div style="position: relative;left: -20px;" class="px-3">
                                    <div class="row gx-2 align-items-center">
                                        <!-- <div class="col-auto">
                                            <div>
                                                <div v-if="groupUserAvatar.length >= 5"
                                                    class="flex flex-wrap justify-center align-center align-content-center"
                                                    style="width: 36px;height: 36px;background-color: #ececec;border-radius: 4px;overflow: hidden;">
                                                    <div v-for="(item2, index2) in groupUserAvatar"
                                                        :key="'groupUserAvatar' + index2"
                                                        class="flex justify-center align-center"
                                                        style="width: calc(100% / 3);height: calc(100% / 3);">
                                                        <img v-if="index2 < 9"
                                                            style="width: calc(100% - 1px);height: calc(100% - 1px);border-radius: 1px;"
                                                            :src="item2" alt="">
                                                    </div>
                                                </div>
                                                <div v-if="groupUserAvatar.length <= 4"
                                                    class="flex flex-wrap justify-center align-center align-content-center"
                                                    style="width: 36px;height: 36px;background-color: #ececec;border-radius: 4px;overflow: hidden;">
                                                    <div v-for="(item2, index2) in groupUserAvatar"
                                                        class="flex justify-center align-center"
                                                        style="width: calc(100% / 2);height: calc(100% / 2);">
                                                        <img style="width: calc(100% - 1px);height: calc(100% - 1px);border-radius: 1px;"
                                                            :src="item2" alt="">
                                                    </div>
                                                </div>
                                            </div>
                                        </div> -->
                                        <div class="col">
                                            <p class="small text-truncated mb-0 maxwidth-120">{{ groupDetail == null ?
                                                '' : groupDetail.name }}({{ groupMembers.length }})人</p>
                                            <!-- <p class="fs-12 text-secondary mb-0">{{ groupMembersInfo == null ? 0 :
                                                groupMembersInfo.online_count }}人在线</p> -->
                                        </div>
                                    </div>
                                </div>
                                <div class="ms-auto">

                                </div>
                                <!-- right icons button -->
                                <div class="ms-auto">
                                    <!-- call -->
                                    <!-- <button class="btn btn-link btn-square btn-link theme-green" data-bs-toggle="modal" data-bs-target="#callmodal">
                                <i class="bi bi-telephone"></i>
                            </button> -->
                                    <!-- contacts -->
                                    <button style="position: relative;right: -10px;"
                                        class="btn btn-link btn-square btn-link"
                                        @click="jump(`haosns-chat-user-list.html?id=${groupDetail.id}`)">
                                        <i class="bi bi-people"></i>
                                    </button>
                                </div>
                            </div>
                        </nav>
                    </header>

                    <!-- page wrapper -->
                    <div class="adminuiux-wrap">
                        <main class="adminuiux-content">
                            <!-- content -->
                            <div class="container mt-3 mt-lg-4" id="main-content">
                                <div class="minheight-dynamic pt-3" style="--mih-dynamic:400px">
                                    <div class="chat-list px-3 height-dynamic">

                                        <div v-for="(item, index) in newMessages" :key="'newMessages' + index">
                                            <div v-for="(item2, index2) in item" :key="'item' + index2">

                                                <div v-if="index2 == 0" class="row justify-content-center text-center">
                                                    <div class="col-auto text-center mb-3">
                                                        <span class="font-small text-gray">{{ item2.create_time
                                                            }}</span>
                                                    </div>
                                                </div>


                                                <div v-if="item2.msg_type == 'tip_add'"
                                                    class="row justify-content-center text-center">
                                                    <div class="col-auto text-center mb-3">
                                                        <span class="font-small text-gray">用户“{{
                                                            getUserName(item2)+item2.nickname }}”加入了群聊</span>
                                                    </div>
                                                </div>

                                                <div v-if="item2.msg_type == 'tip_remove'"
                                                    class="row justify-content-center text-center">
                                                    <div class="col-auto text-center mb-3">
                                                        <span class="font-small text-gray">用户“{{
                                                            getUserName(item2)+item2.nickname }}”退出了群聊</span>
                                                    </div>
                                                </div>

                                                <div v-if="item2.from_id != selfID && item2.msg_type == 'red_tip'"
                                                    class="row justify-content-center text-center">
                                                    <div class="col-auto text-center mb-3">
                                                        <span class="font-small text-gray">您的红包被领取</span>
                                                    </div>
                                                </div>

                                                <div v-if="item2.from_id == selfID && item2.msg_type == 'red_tip'"
                                                    class="row justify-content-center text-center">
                                                    <div class="col-auto text-center mb-3">
                                                        <span class="font-small text-gray">您领取了红包</span>
                                                    </div>
                                                </div>

                                                <div v-if="item2.from_id != selfID && item2.msg_type == 'text'"
                                                    class="row no-margin left-chat set-location">
                                                    <div class="col-1">
                                                        <img @click="jump(`haosns-user-detail.html?id=${item2.fromUser.id}`)"
                                                            class="avatar avatar-30 coverimg tl"
                                                            style="border-radius: 5px;" :src="item2.fromUser.avatar" />
                                                    </div>
                                                    <div class="col-11" style="position: relative;top: -10px;">
                                                        <span
                                                            @click="jump(`haosns-user-detail.html?id=${item2.fromUser.id}`)"
                                                            class="font-small text-gray ml-3">{{
                                                            item2.fromUser.nickname }}</span>
                                                        <div class="flex align-center align-start ml-3">
                                                            <div style="position: relative;border-radius: 5px;"
                                                                class="myLeftChatBg px-2 py-1">
                                                                <i style="width: 16px;height: 16px;position: absolute;left: -9px;"
                                                                    class="bi bi-caret-left-fill myLeftChatColor"></i>
                                                                <!-- <span class="font">{{ item2.msg }}</span> -->
                                                                <div style="word-break: break-all;" class="font nowrap"
                                                                    v-html="parseEmoTextWithImage(item2.msg)"></div>
                                                            </div>
                                                        </div>

                                                    </div>


                                                </div>

                                                <div v-if="item2.from_id != selfID && item2.msg_type == 'voice'"
                                                    class="row no-margin left-chat set-location">
                                                    <div class="col-1">
                                                        <img class="avatar avatar-30 coverimg tl"
                                                            @click="jump(`haosns-user-detail.html?id=${item2.fromUser.id}`)"
                                                            style="border-radius: 5px;" :src="item2.fromUser.avatar" />
                                                    </div>
                                                    <div class="col-11" style="position: relative;top: -10px;">
                                                        <span
                                                            @click="jump(`haosns-user-detail.html?id=${item2.fromUser.id}`)"
                                                            class="font-small text-gray ml-3">{{
                                                            item2.fromUser.nickname }}</span>
                                                        <div class="flex align-center align-start ml-3">
                                                            <div style="position: relative;border-radius: 5px;"
                                                                class="myLeftChatBg px-2 py-1">
                                                                <i style="width: 16px;height: 16px;position: absolute;left: -9px;"
                                                                    class="bi bi-caret-left-fill myLeftChatColor"></i>
                                                                <span class="font">话音暂不支持</span>
                                                            </div>
                                                        </div>

                                                    </div>


                                                </div>

                                                <div v-if="item2.from_id != selfID && item2.msg_type == 'red'"
                                                    class="row no-margin left-chat set-location">
                                                    <div class="col-1">
                                                        <img class="avatar avatar-30 coverimg tl"
                                                            @click="jump(`haosns-user-detail.html?id=${item2.fromUser.id}`)"
                                                            style="border-radius: 5px;" :src="item2.fromUser.avatar" />
                                                    </div>
                                                    <div class="col-11" style="position: relative;top: -10px;">
                                                        <span
                                                            @click="jump(`haosns-user-detail.html?id=${item2.fromUser.id}`)"
                                                            class="font-small text-gray ml-3">{{
                                                            item2.fromUser.nickname }}</span>
                                                        <div class="flex align-center align-start ml-3">
                                                            <div @click="openRedPacket(item2.redPackets.redPackets.status, item2.redPackets.redPackets.message, item2.redPackets.id, item2.fromUser, item2.redPackets.redPackets.send_user_id)"
                                                                style="position: relative;border-radius: 5px;"
                                                                class="myLeftChatBg">
                                                                <i style="width: 16px;height: 16px;position: absolute;left: -9px;"
                                                                    class="bi bi-caret-left-fill "
                                                                    :style="item2.redPackets.redPackets.status == 0 ? 'color: #fa9e3b;' : 'color: #fde2c4;'"></i>
                                                                <div style="height: 80px;border-radius: 5px;"
                                                                    :style="item2.redPackets.redPackets.status == 0 ? 'background-color: #fa9e3b;' : 'background-color: #fde2c4;'"
                                                                    class="position-relative  px-3 ">
                                                                    <div :style="item2.redPackets.redPackets.status == 0 ? 'border-bottom: 1px solid #feac55;' : 'border-bottom: 1px solid #ffd2a1;'"
                                                                        class="myRedPacket w-100 flex align-center">
                                                                        <img style="width: 40px;"
                                                                            src="/template/use/mobile/assets/img/haosns/redPacket.svg" alt=""
                                                                            srcset="">
                                                                        <div class="flex flex-column">
                                                                            <span class="font-lger text-white">{{
                                                                                item2.redPackets.redPackets.message ==
                                                                                '' ? '恭喜发财，大吉大利'
                                                                                :　item2.redPackets.redPackets.message
                                                                                }}</span>
                                                                            <span
                                                                                v-if="item2.redPackets.redPackets.status == 1"
                                                                                class="font-small text-white">已领取</span>
                                                                            <span
                                                                                v-if="item2.redPackets.redPackets.status == 2"
                                                                                class="font-small text-white">已过期</span>
                                                                            <span
                                                                                v-if="item2.redPackets.redPackets.status == 2"
                                                                                class="font-small text-white">已退款</span>
                                                                        </div>

                                                                    </div>
                                                                    <span v-if="item2.redPackets.redPackets.type == 1"
                                                                        class="font-small text-white">Haosns普通红包</span>
                                                                    <span v-if="item2.redPackets.redPackets.type == 2"
                                                                        class="font-small text-white">Haosns拼手速红包</span>
                                                                </div>
                                                            </div>
                                                        </div>


                                                    </div>
                                                </div>

                                                <!-- <div class="row no-margin left-chat set-location">
                                                <div class="col-1">
                                                    <div class="avatar avatar-30 coverimg tl" style="border-radius: 5px;">
                                                        <img class="w-auto"
                                                            src="https://haodds-1251208851.cos.ap-shanghai.myqcloud.com/oss/qcloud/uploads/images/20250527141100838684416.jpg" />
                                                    </div>
                                                </div>
                                                <div class="col-11">
                                                    <div class="flex align-center align-start ml-3">
                                                        <div style="position: relative;border-radius: 5px;width: 230px;"
                                                            class="">
                                                            <i style="width: 16px;height: 16px;position: absolute;left: -9px;color: #ffaa00;"
                                                                class="bi bi-caret-left-fill myLeftChatColor"></i>
                                                            <div class="flex p-2 align-center"
                                                                style="background-color: #ffaa00;border-radius: 5px;height: 72px;">
                                                                <svg t="1758008838187" class="icon" viewBox="0 0 1024 1024"
                                                                    version="1.1" xmlns="http://www.w3.org/2000/svg"
                                                                    p-id="11417" width="40" height="40">
                                                                    <path
                                                                        d="M511.996414 0.12689c-282.285155 0-511.975441 229.640144-511.975441 511.930415 0 282.303574 229.690286 511.941672 511.975441 511.941672 282.286178 0 511.982604-229.639121 511.982604-511.941672C1023.979018 229.767034 794.282592 0.12689 511.996414 0.12689L511.996414 0.12689zM511.996414 941.02624c-236.533135 0-428.955632-192.439894-428.955632-428.962795S275.46328 83.123162 511.996414 83.123162c236.540298 0 428.962795 192.416358 428.962795 428.940282S748.536712 941.02624 511.996414 941.02624L511.996414 941.02624zM655.047458 231.262084l-91.330078 168.284751c-24.376177 45.590338-39.235606 75.92318-44.698015 90.940199l-1.571798 0C501.393939 453.957049 456.064544 367.574656 381.441986 231.262084l-85.909625 0 159.747307 274.381138L324.305685 505.643222l0 60.657498 153.526629 0 0 83.552951-153.526629 0 0 61.376882 153.526629 0 0 121.68134 76.17389 0L554.006204 711.224414l148.099013 0 0-61.374836L554.00518 649.849578l0-83.548858 148.099013 0 0-60.657498L575.007517 505.643222l161.296593-274.381138L655.047458 231.262084 655.047458 231.262084zM655.047458 231.262084"
                                                                        fill="#fff" p-id="11418"></path>
                                                                </svg>
                                                                <div class="flex flex-column align-start ml-2">
                                                                    <span class="font text-white">￥1.00</span>
                                                                    <span class="font text-white">已发起转账</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
        
                                                </div>
        
        
                                            </div> -->


                                                <div v-if="item2.from_id != selfID && item2.msg_type == 'image'"
                                                    class="row no-margin left-chat set-location">
                                                    <div class="col-1">
                                                        <img class="avatar avatar-30 coverimg tl"
                                                            @click="jump(`haosns-user-detail.html?id=${item2.fromUser.id}`)"
                                                            style="border-radius: 5px;" :src="item2.fromUser.avatar" />
                                                    </div>
                                                    <div class="col-11" style="position: relative;top: -10px;">
                                                        <span
                                                            @click="jump(`haosns-user-detail.html?id=${item2.fromUser.id}`)"
                                                            class="font-small text-gray ml-3">{{
                                                            item2.fromUser.nickname }}</span>

                                                        <div class="flex align-center justify-start ml-3">
                                                            <div style="position: relative;" class="">
                                                                <!-- <i style="width: 16px;height: 16px;position: absolute;right: -9px;color: #ffaa00;"
                                                                class="bi bi-caret-right-fill"></i> -->
                                                                <img @click="showPreview(item2.msg)" style="height: 140px;border-radius: 5px;margin: 0;"
                                                                    :src="item2.msg" alt="">
                                                            </div>
                                                        </div>
                                                    </div>


                                                </div>


                                                <div v-if="item2.from_id != selfID && item2.msg_type == 'article'"
                                                    class="row no-margin left-chat set-location">
                                                    <div class="col-1">
                                                        <img class="avatar avatar-30 coverimg tl"
                                                            @click="jump(`haosns-user-detail.html?id=${item2.fromUser.id}`)"
                                                            style="border-radius: 5px;" :src="item2.fromUser.avatar" />
                                                    </div>
                                                    <div class="col-11" style="position: relative;top: -10px;">
                                                        <span
                                                            @click="jump(`haosns-user-detail.html?id=${item2.fromUser.id}`)"
                                                            class="font-small text-gray ml-3">{{
                                                            item2.fromUser.nickname }}</span>
                                                        <div  @click="jump(`haosns-article-detail.html?id=${item2.msg}`)" 
                                                            class="flex align-center align-start ml-3">
                                                            <div style="position: relative;border-radius: 5px;width: 225px;"
                                                                class="myLeftChatBg px-2 py-1">
                                                                <i style="width: 16px;height: 16px;position: absolute;left: -9px;"
                                                                    class="bi bi-caret-left-fill myLeftChatColor"></i>
                                                                <div class="flex flex-column">
                                                                    <span class="font-sm"
                                                                        style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{
                                                                        item2.article.title == '' ?
                                                                        stripHtmlTags(item2.article.content) :
                                                                        item2.article.title }}</span>
                                                                    <div style="border-bottom: 1px solid #ececec;"
                                                                        class="flex justify-between mt-1 pb-2">
                                                                        <span
                                                                            class="font-small text-gray multi-line-ellipsis">{{
                                                                            stripHtmlTags(item2.article.content)
                                                                            }}</span>
                                                                        <div
                                                                            v-if="item2.article.image != null && Array.isArray(item2.article.image) == true">
                                                                            <img style="width: 40px;height: 40px;"
                                                                                class="rounded-0 m-0"
                                                                                :src="item2.article.image[0]" alt=""
                                                                                srcset="">
                                                                        </div>
                                                                    </div>
                                                                    <div class="flex align-center mt-1">
                                                                        <img class="avatar avatar-15 coverimg rounded-circle"
                                                                            :src="item2.fromUser.avatar" />

                                                                        <span class="font-smmd text-gray ml-1">{{
                                                                            item2.fromUser.nickname }}的分享</span>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>

                                                    </div>


                                                </div>


                                                <div v-if="item2.from_id == selfID && item2.msg_type == 'text'"
                                                    class="row no-margin right-chat set-location">
                                                    <div class="col-11">

                                                        <div class="flex align-center justify-end mr-3">
                                                            <img v-if="item2.isLoading == true"
                                                                style="width: 20px;height: 20px;"
                                                                src="/template/use/mobile/assets/img/haosns/loading.gif" alt="" srcset="">
                                                            <div style="position: relative;border-radius: 5px;"
                                                                class="myRightChatBg px-2 py-1">
                                                                <i style="width: 16px;height: 16px;position: absolute;right: -9px;"
                                                                    class="bi bi-caret-right-fill myRightChatColor"></i>
                                                                <!-- <span class="font">{{ item2.msg }}</span> -->
                                                                <div style="word-break: break-all;" class="font nowrap"
                                                                    v-html="parseEmoTextWithImage(item2.msg)"></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-1">
                                                        <img class="avatar avatar-30 coverimg tr "
                                                            style="border-radius: 5px;" :src="selfAvatar" />
                                                    </div>

                                                </div>


                                                <div v-if="item2.from_id == selfID && item2.msg_type == 'voice'"
                                                    class="row no-margin right-chat set-location">
                                                    <div class="col-11">

                                                        <div class="flex align-center justify-end mr-3">
                                                            <img v-if="item2.isLoading == true"
                                                                style="width: 20px;height: 20px;"
                                                                src="/template/use/mobile/assets/img/haosns/loading.gif" alt="" srcset="">
                                                            <div style="position: relative;border-radius: 5px;"
                                                                class="myRightChatBg px-2 py-1">
                                                                <i style="width: 16px;height: 16px;position: absolute;right: -9px;"
                                                                    class="bi bi-caret-right-fill myRightChatColor"></i>
                                                                <span class="font">话音暂不支持</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-1">
                                                        <img class="avatar avatar-30 coverimg tr "
                                                            style="border-radius: 5px;" :src="selfAvatar" />
                                                    </div>

                                                </div>

                                                <div v-if="item2.from_id == selfID && item2.msg_type == 'red'"
                                                    class="row no-margin right-chat set-location">
                                                    <div class="col-11">

                                                        <div style="position: relative;"
                                                            class="flex align-center justify-end mr-3">
                                                            <i style="width: 16px;height: 16px;position: absolute;right: -9px;top: 0px;"
                                                                class="bi bi-caret-right-fill "
                                                                :style="item2.redPackets.redPackets.status == 0 ? 'color: #fa9e3b;' : 'color: #fde2c4;'"></i>
                                                            <div @click="openRedPacket(item2.redPackets.redPackets.status, item2.redPackets.redPackets.message, item2.redPackets.id, item2.fromUser, item2.redPackets.redPackets.send_user_id)"
                                                                style="height: 80px;border-radius: 5px;"
                                                                :style="item2.redPackets.redPackets.status == 0 ? 'background-color: #fa9e3b;' : 'background-color: #fde2c4;'"
                                                                class="position-relative  px-3 ">
                                                                <div :style="item2.redPackets.redPackets.status == 0 ? 'border-bottom: 1px solid #feac55;' : 'border-bottom: 1px solid #ffd2a1;'"
                                                                    class="myRedPacket w-100 flex align-center">
                                                                    <img style="width: 40px;"
                                                                        src="/template/use/mobile/assets/img/haosns/redPacket.svg" alt=""
                                                                        srcset="">
                                                                    <div class="flex flex-column">
                                                                        <span class="font-lger text-white">{{
                                                                            item2.redPackets.redPackets.message == '' ?
                                                                            '恭喜发财，大吉大利'
                                                                            :　item2.redPackets.redPackets.message
                                                                            }}</span>
                                                                        <span
                                                                            v-if="item2.redPackets.redPackets.status == 1"
                                                                            class="font-small text-white">已领取</span>
                                                                        <span
                                                                            v-if="item2.redPackets.redPackets.status == 2"
                                                                            class="font-small text-white">已过期</span>
                                                                        <span
                                                                            v-if="item2.redPackets.redPackets.status == 2"
                                                                            class="font-small text-white">已退款</span>
                                                                    </div>
                                                                </div>
                                                                <span v-if="item2.redPackets.redPackets.type == 1"
                                                                    class="font-small text-white">Haosns普通红包</span>
                                                                <span v-if="item2.redPackets.redPackets.type == 2"
                                                                    class="font-small text-white">Haosns拼手速红包</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-1">
                                                        <img class="avatar avatar-30 coverimg tr"
                                                            style="border-radius: 5px;" :src="selfAvatar" />
                                                    </div>

                                                </div>





                                                <!-- <div class="row no-margin right-chat set-location">
                                                <div class="col-11">
        
                                                    <div class="flex align-center justify-end mr-3 ">
                                                        <div @click="showTransferDetail()"
                                                            style="position: relative;width: 230px;" class="">
                                                            <i style="width: 16px;height: 16px;position: absolute;right: -9px;color: #ffaa00;"
                                                                class="bi bi-caret-right-fill"></i>
                                                            <div class="flex p-2 align-center"
                                                                style="background-color: #ffaa00;border-radius: 5px;height: 72px;">
                                                                <svg t="1758008838187" class="icon" viewBox="0 0 1024 1024"
                                                                    version="1.1" xmlns="http://www.w3.org/2000/svg"
                                                                    p-id="11417" width="40" height="40">
                                                                    <path
                                                                        d="M511.996414 0.12689c-282.285155 0-511.975441 229.640144-511.975441 511.930415 0 282.303574 229.690286 511.941672 511.975441 511.941672 282.286178 0 511.982604-229.639121 511.982604-511.941672C1023.979018 229.767034 794.282592 0.12689 511.996414 0.12689L511.996414 0.12689zM511.996414 941.02624c-236.533135 0-428.955632-192.439894-428.955632-428.962795S275.46328 83.123162 511.996414 83.123162c236.540298 0 428.962795 192.416358 428.962795 428.940282S748.536712 941.02624 511.996414 941.02624L511.996414 941.02624zM655.047458 231.262084l-91.330078 168.284751c-24.376177 45.590338-39.235606 75.92318-44.698015 90.940199l-1.571798 0C501.393939 453.957049 456.064544 367.574656 381.441986 231.262084l-85.909625 0 159.747307 274.381138L324.305685 505.643222l0 60.657498 153.526629 0 0 83.552951-153.526629 0 0 61.376882 153.526629 0 0 121.68134 76.17389 0L554.006204 711.224414l148.099013 0 0-61.374836L554.00518 649.849578l0-83.548858 148.099013 0 0-60.657498L575.007517 505.643222l161.296593-274.381138L655.047458 231.262084 655.047458 231.262084zM655.047458 231.262084"
                                                                        fill="#fff" p-id="11418"></path>
                                                                </svg>
                                                                <div class="flex flex-column align-start ml-2">
                                                                    <span class="font text-white">￥1.00</span>
                                                                    <span class="font text-white">已发起转账</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-1">
                                                    <div class="avatar avatar-30 coverimg tr" style="border-radius: 5px;">
                                                        <img class="w-auto"
                                                            src="https://haodds-1251208851.cos.ap-shanghai.myqcloud.com/oss/qcloud/uploads/images/20250527141100838684416.jpg" />
                                                    </div>
                                                </div>
        
                                            </div> -->


                                                <div v-if="item2.from_id == selfID && item2.msg_type == 'image'"
                                                    class="row no-margin right-chat set-location">
                                                    <div class="col-11">

                                                        <div class="flex align-center justify-end mr-3">
                                                            <div style="position: relative;" class="">
                                                                <!-- <i style="width: 16px;height: 16px;position: absolute;right: -9px;color: #ffaa00;"
                                                                class="bi bi-caret-right-fill"></i> -->
                                                                <img @click="showPreview(item2.msg)" style="height: 140px;border-radius: 5px;margin: 0;"
                                                                    :src="item2.msg" alt="">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-1">
                                                        <img class="avatar avatar-30 coverimg tr"
                                                            style="border-radius: 5px;" :src="selfAvatar" />
                                                    </div>

                                                </div>




                                                <div v-if="item2.from_id == selfID && item2.msg_type == 'article'"
                                                    class="row no-margin right-chat set-location">
                                                    <div class="col-11">

                                                        <div @click="jump(`haosns-article-detail.html?id=${item2.msg}`)"
                                                            class="flex align-center justify-end mr-3">
                                                            <div style="position: relative;border-radius: 5px;width: 225px;"
                                                                class="myRightChatBg px-2 py-1">
                                                                <i style="width: 16px;height: 16px;position: absolute;right: -9px;"
                                                                    class="bi bi-caret-right-fill myRightChatColor"></i>
                                                                <div class="flex flex-column">
                                                                    <span class="font-sm text-left"
                                                                        style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{
                                                                        item2.article.title == '' ?
                                                                        stripHtmlTags(item2.article.content) :
                                                                        item2.article.title }}</span>
                                                                    <div style="border-bottom: 1px solid #ececec;"
                                                                        class="flex justify-between mt-1 pb-2 text-left">
                                                                        <span
                                                                            class="font-small text-gray multi-line-ellipsis">{{
                                                                            stripHtmlTags(item2.article.content)
                                                                            }}</span>
                                                                        <div
                                                                            v-if="item2.article.image != null && Array.isArray(item2.article.image) == true">
                                                                            <img style="width: 40px;height: 40px;"
                                                                                class="rounded-0 m-0"
                                                                                :src="item2.article.image[0]" alt=""
                                                                                srcset="">
                                                                        </div>
                                                                    </div>
                                                                    <div class="flex align-center mt-1">
                                                                        <img class="avatar avatar-15 coverimg rounded-circle"
                                                                            :src="selfAvatar" />

                                                                        <span class="font-smmd text-gray ml-1">{{
                                                                            selfName }}的分享</span>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-1">
                                                        <img class="avatar avatar-30 coverimg tr"
                                                            style="border-radius: 5px;" :src="selfAvatar" />
                                                    </div>

                                                </div>

                                            </div>
                                        </div>


                                    </div>
                                </div>
                            </div>
                        </main>

                    </div>
                    <div class="fixed-bottom style-1 px-2 pt-1 pb-ios bg-r-gradient">
                        <div class="input-group mb-1">
                            <button @click="nowChooseType = 'menu';autoChangeChatMenu()"
                                class="btn btn-square btn-link rounded-circle"><i
                                    class="bi bi-plus-circle"></i></button>
                            <input v-model="talkStr" id="textInput" style="border-radius: 5px;" class="form-control "
                                placeholder="" value="">
                            <button @click="nowChooseType = 'emoji';autoChangeChatMenu()"
                                class="btn btn-square btn-link rounded-circle" type="button"><i
                                    class="bi bi-emoji-smile"></i></button>
                            <button @click="sendTalk()" class="btn btn-square btn-link rounded-circle" type="button"><i
                                    class="bi bi-send"></i></button>
                        </div>
                        <div class="collapse" id="chatMenu">
                            <div v-show="nowChooseType == 'menu'" class="flex">
                                <div @click="openImageChoose()" class="flex flex-column align-center justify-center"
                                    style="width: 25%;">
                                    <div style="width: 50px;height: 50px;border-radius: 10px;"
                                        class="flex align-center justify-center myThemeBg1">
                                        <i style="width: 25px;height: 25px;font-size: 25px;line-height: 1;"
                                            class="bi bi-image"></i>
                                    </div>

                                    <span class="font-small tetx-gray mt-1">图片</span>
                                </div>

                                <div @click="showRedPacket" class="flex flex-column align-center justify-center"
                                    style="width: 25%;">
                                    <div style="width: 50px;height: 50px;border-radius: 10px;"
                                        class="flex align-center justify-center myThemeBg1">
                                        <svg t="1758023401154" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                            xmlns="http://www.w3.org/2000/svg" p-id="13591" width="25" height="25">
                                            <path
                                                d="M516.042332 352.112884c-1.892155 0-3.78431-0.172014-5.676466-0.516042L154.640685 287.607593c-15.137242-2.752226-26.318159-15.997312-26.318159-31.478582L128.322526 160.145137c0-52.808332 43.003528-95.983874 95.983874-95.983874L799.865614 64.161263c52.808332 0 95.983874 43.003528 95.983874 95.983874l0 95.983874c0 15.48127-11.008903 28.726356-26.146145 31.478582l-347.812531 63.989249C519.826642 351.94087 517.934487 352.112884 516.042332 352.112884zM192.139761 229.466823l323.730556 58.140769 315.817907-58.140769L831.688224 160.145137c0-17.545439-14.277171-31.994625-31.994625-31.994625L224.134386 128.150512c-17.545439 0-31.994625 14.277171-31.994625 31.994625C192.139761 160.145137 192.139761 229.466823 192.139761 229.466823z"
                                                fill="#575B66" p-id="13592"></path>
                                            <path
                                                d="M799.865614 959.666723 224.134386 959.666723c-52.808332 0-95.983874-43.003528-95.983874-95.983874L128.150512 384.107509c0-17.717453 14.277171-31.994625 31.994625-31.994625s31.994625 14.277171 31.994625 31.994625l0 479.747354c0 17.717453 14.277171 31.994625 31.994625 31.994625L799.865614 895.849488c17.717453 0 31.994625-14.277171 31.994625-31.994625L831.860239 384.107509c0-17.717453 14.277171-31.994625 31.994625-31.994625 17.717453 0 31.994625 14.277171 31.994625 31.994625l0 479.747354C895.677474 916.663195 852.673946 959.666723 799.865614 959.666723z"
                                                fill="#575B66" p-id="13593"></path>
                                            <path
                                                d="M607.725853 639.892491c17.717453 0 31.994625-14.277171 31.994625-31.994625s-14.277171-31.994625-31.994625-31.994625l-51.776247 0 76.030237-73.278011c12.729044-12.213002 13.073072-32.510667 0.860071-45.067697-12.213002-12.729044-32.510667-12.901058-45.239711-0.688056l-76.202251 73.622039-73.278011-73.105997c-12.55703-12.55703-32.854695-12.55703-45.239711 0-12.55703 12.55703-12.385016 32.510667 0 45.067697l73.966068 73.622039-51.088191 0c-17.717453 0-31.994625 14.277171-31.994625 31.994625s14.277171 31.994625 31.994625 31.994625L479.919368 640.064505l0 31.994625-64.161263 0c-17.717453 0-31.994625 14.277171-31.994625 31.994625 0 17.717453 14.277171 31.994625 31.994625 31.994625L479.919368 736.048379l0 64.333277c0 17.717453 14.277171 31.994625 31.994625 31.994625 17.717453 0 31.994625-14.277171 31.994625-31.994625l0-64.333277 63.817235 0c17.717453 0 31.994625-14.277171 31.994625-31.994625 0-17.717453-14.277171-31.994625-31.994625-31.994625l-63.817235 0L543.908618 639.892491 607.725853 639.892491z"
                                                fill="#000" p-id="13594"></path>
                                        </svg>
                                    </div>

                                    <span class="font-small tetx-gray mt-1">红包</span>
                                </div>

                                <!-- <div @click="showTransfer()" class="flex flex-column align-center justify-center"
                                style="width: 25%;">
                                <div style="width: 50px;height: 50px;border-radius: 10px;"
                                    class="flex align-center justify-center myThemeBg1">
                                    <i style="width: 25px;height: 25px;font-size: 25px;line-height: 1;"
                                        class="bi bi-arrow-left-right"></i>
                                </div>

                                <span class="font-small tetx-gray mt-1">转账</span>
                            </div> -->

                            </div>

                            <div v-show="nowChooseType == 'emoji'" class="flex flex-column">
                                <div class="flex flex-wrap mx-2 my-2">
                                    <img @click="nowEmojiIndex = -1;" style="width: 26px;height: 26px;" class="mr-2"
                                        src="/template/use/mobile/assets/img/haosns/emoji2.svg" alt="">

                                    <img @click="nowEmojiIndex = index"
                                        v-for="(item, index) in (nowEmojiArray == null ? [] : nowEmojiArray)"
                                        :key="'nowEmojiArray' + index" style="width: 26px;height: 26px;" class="mr-2"
                                        :src="item.icon" alt="" srcset="">

                                </div>
                                <div v-if="nowEmojiIndex == -1">
                                    <div class="flex flex-column bg-r-gradient p-2">
                                        <span class="font-small text-muted py-1">文字表情</span>
                                    </div>
                                    <div class="container-fluid bg-r-gradient"
                                        style="height: 200px;overflow: hidden;overflow-y: scroll;">
                                        <div v-for="(item, index) in cutEmojiArr" :key="'cutEmojiArr' + index"
                                            class="row">
                                            <div @click="insertAtCursor(item2)" v-for="(item2, index2) in item"
                                                class="myCol-7">
                                                <div class="w-full flex align-center justify-center">
                                                    <span style="font-size: 28px;">{{ item2 }}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div v-for="(item, index) in (nowEmojiArray == null ? [] : nowEmojiArray)"
                                    :key="'nowEmojiArray2' + index">
                                    <div v-show="nowEmojiIndex == index">
                                        <div class="flex flex-column bg-r-gradient p-2">
                                            <span class="font-small text-muted py-1">{{ item.name }}</span>
                                        </div>
                                        <div class="container-fluid bg-r-gradient"
                                            style="height: 200px;overflow: hidden;overflow-y: scroll;">
                                            <div v-for="(item2, index2) in item.cutEmojiArr"
                                                :key="'item.cutEmojiArr' + index +'_' + index2" class="row">
                                                <div @click="insertAtCursor(`[emo_${index}_${index2 * 7 + index3}]`)"
                                                    v-for="(item3, index3) in item2" class="myCol-7 py-2">
                                                    <div class="w-full flex align-center justify-center">
                                                        <!-- <span style="font-size: 28px;">{{ item2 }}</span> -->
                                                        <img style="width: 28px;height: 28px;object-fit: cover;"
                                                            :src="item3.image" alt="" srcset="">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>

                            </div>
                        </div>
                    </div>

                    <div style="width: 100%;height: 62px;">

                    </div>

                    <div class="">
                        <div id="redPacket" class="offcanvas offcanvas-bottom myOffCanvaeBg " style="height: 100vh;"
                            tabindex="-1">

                            <div class="offcanvas-body">
                                <div class="flex flex-column">
                                    <div style="position: relative;" class="flex justify-center align-center mb-2">
                                        <span class="fw-bold font">发红包</span>
                                        <i @click="hideRedPacket" class="bi bi-chevron-left"
                                            style="position: absolute;left: 0px;"></i>
                                    </div>
                                    <div @click="autoChangeRedPacketTypeStatus()" class="flex align-center"
                                        style="position: relative;">
                                        <span v-if="redPacketSendType == 1" style="color: #c3a670;"
                                            class="font">普通红包</span>
                                        <span v-if="redPacketSendType == 2" style="color: #c3a670;"
                                            class="font">拼手速红包</span>
                                        <i class="bi bi-chevron-right" style="color: #c3a670;"></i>
                                        <div class="collapse p-2" id="redPacketType"
                                            style="position: absolute;top: 31px;background-color: #fff;">
                                            <i class="bi bi-caret-up-fill"
                                                style="color: white;position: absolute;left: 30px;top: -16px;font-size: 18px;"></i>
                                            <div class="flex flex-column">
                                                <span @click="setRedPacketSendType(1)" class="font"
                                                    :style="redPacketSendType == 1 ? 'color: #c3a670;' : ''">普通红包</span>
                                                <span @click="setRedPacketSendType(2)" class="font"
                                                    :style="redPacketSendType == 2 ? 'color: #c3a670;' : ''">拼手速红包</span>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="p-2 flex align-center justify-between bg-white mt-2"
                                        style="height: 55px;border-radius: 5px;">
                                        <div class="flex align-center ">
                                            <img class="mr-2" style="width: 25px;height: 25px;"
                                                src="/template/use/mobile/assets/img/haosns/redPacket.svg" alt="">
                                            <span class="font">红包个数</span>
                                        </div>

                                        <input v-model="redPacketTotalCount" type="text"
                                            class="form-control font text-right" style="border: none;width: 50%;"
                                            placeholder="填写红包个数" />

                                    </div>
                                    <span class="font text-gray mt-2">本群共10个人</span>

                                    <div class="p-2 flex align-center justify-between bg-white mt-2"
                                        style="height: 55px;border-radius: 5px;">
                                        <div class="flex align-center ">
                                            <img class="mr-2" style="width: 25px;height: 25px;"
                                                src="/template/use/mobile/assets/img/haosns/ping.svg" alt="">
                                            <span class="font">总金额</span>
                                        </div>

                                        <input v-model="redPacketMoney" type="text" class="form-control font text-right"
                                            style="border: none;width: 50%;" placeholder="￥0.00" />

                                    </div>
                                    <div class="p-2 flex align-center justify-between bg-white mt-2"
                                        style="height: 55px;border-radius: 5px;">
                                        <div class="flex align-center ">
                                            <img class="mr-2" style="width: 25px;height: 25px;"
                                                src="/template/use/mobile/assets/img/haosns/congratulations.svg" alt="">
                                            <span class="font">祝贺语</span>
                                        </div>

                                        <input v-model="redPacketMessage" type="text" maxlength="16"
                                            class="form-control font text-right" style="border: none;width: 50%;"
                                            placeholder="恭喜发财，大吉大利" />

                                    </div>

                                </div>

                                <div class="flex flex-column align-center justify-center mt-5">
                                    <span class="fw-bold" style="font-size: 36px;">￥{{ redPacketMoney == '' ? '0.00' :
                                        parseFloat(redPacketMoney).toFixed(2) }}</span>
                                    <button @click="sendRedPacket()" type="button"
                                        class="btn btn-theme font mt-2">塞钱进红包</button>
                                </div>

                            </div>
                        </div>
                    </div>

                    <div>
                        <div style="height: 100vh;" class="offcanvas offcanvas-bottom myOffCanvaeBg" id="transfer"
                            tabindex="-1">
                            <div class="offcanvas-body p-0">
                                <div class="flex flex-column">
                                    <div style="position: relative;" class="flex justify-center align-center p-3">
                                        <span class="fw-bold font">转账</span>
                                        <i @click="hideTransfer()" class="bi bi-chevron-left"
                                            style="position: absolute;left: 5px;"></i>
                                    </div>

                                    <div class="mx-3 flex justify-between align-center">
                                        <div class="flex flex-column">
                                            <h4 class="mt-2">
                                                <span class="font-lger">转账给hell0</span>
                                            </h4>
                                            <span class="font-md text-gray">
                                                用户ID: 163
                                            </span>
                                        </div>
                                        <img style="width: 50px;height: 50px;border-radius: 5px;"
                                            src="https://haodds-1251208851.cos.ap-shanghai.myqcloud.com/oss/qcloud/uploads/images/20250704192833011578305.jpg"
                                            alt="">
                                    </div>

                                </div>

                                <div class="flex flex-column myThemeBg1 mt-4 px-3 py-2">
                                    <span class="font">转账金额</span>

                                    <div style="border-bottom: 1px solid #ececec;" class="input-group mb-3">
                                        <span class="input-group-text border-0" style="font-size: 40px;"
                                            id="transferMoney">
                                            <i class="bi bi-currency-yen"></i>
                                        </span>
                                        <input style="font-size: 40px;" type="number" class="form-control border-0"
                                            placeholder="" aria-label="Username" aria-describedby="transferMoney">
                                    </div>

                                    <span @click="showTransferInfo()" class="font text-gray">添加转账说明</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div>
                        <div id="transferInfo" style="height: 300px;" class="offcanvas offcanvas-bottom myOffCanvaeBg"
                            tabindex="-1">
                            <div class="offcanvas-body p-2">
                                <div class="flex flex-column">
                                    <span class="fw-bold font">转账说明</span>
                                    <input type="text" class="form-control font mt-4" placeholder="收付款双方可见" />

                                    <div class="mt-5 flex">
                                        <div class="flex justify-center flex-1">
                                            <button @click="hideTransferInfo()" type="button"
                                                class="btn btn-secondary w-50">取消</button>
                                        </div>
                                        <div class="flex justify-center flex-1">
                                            <button type="button" class="btn btn-theme w-50">确认</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 红包页 -->
                    <div style="height: 100vh;background-color: transparent;"
                        class="offcanvas offcanvas-bottom myOffCanvaeBg" id="receiveRedPacket">
                        <div style="width: 100%;height: 100%;position: relative;"
                            class="flex flex-column align-center justify-center">
                            <div
                                style="width: 70%;height: 70%;background-color: #ca0000;border-radius: 10px;position: relative;overflow: hidden;">
                                <div
                                    style="width: calc(100vh * 0.8 );height: 100%;border: 1px solid black;border-radius: 50%;position: absolute;left: 50%;top: 25%;transform: translate( -50% , -50% );">

                                </div>
                                <div style="background-color: #dd9300;width: 50px;height: 50px;border-radius: 50%;position: absolute;left: 50%;top: 75%;transform: translate( -50% , -50% );"
                                    class="flex align-center justify-center">
                                    <span @click="getRedPacket()" class="font-lger"
                                        style="font-size: calc(var(--haosns-font-scale, 1) * 20px);">开</span>
                                </div>

                                <div
                                    style="width: 70%;position: absolute;left: 50%;top: 25%;transform: translate( -50% , -50% );">
                                    <div class="flex flex-column align-center justify-center">
                                        <div class="flex align-center">
                                            <img style="width: 25px;height: 25px;" :src="nowRedPacketUserAvatar" alt=""
                                                srcset="">
                                            <span class="font" style="color: #dd9300;">{{ nowRedPacketUserName }}
                                                的红包</span>
                                        </div>
                                        <span v-if="nowRedPacketMessage != ''" class="font-lg"
                                            style="color: #dd9300;">{{ nowRedPacketMessage }}</span>
                                        <span v-if="nowRedPacketMessage == null || nowRedPacketMessage == ''"
                                            class="font-lg" style="color: #dd9300;">恭喜发财，大吉大利</span>
                                    </div>
                                </div>


                            </div>
                            <div style="position: relative;margin-top: 10%;">
                                <i @click="hideReceiveRedPacket()" class="bi bi-x-circle"
                                    style="font-size: 30px;position: absolute;left: 50%;top: 0%;transform: translate( -50% , -50% );color: #dd9300;"></i>

                            </div>
                        </div>
                    </div>

                    <!-- 红包详情页 -->
                    <div>
                        <div style="height: 100vh;" id="redPacketDetail"
                            class="offcanvas offcanvas-bottom myOffCanvaeBg">
                            <div style="width: 100%;height: 100%;position: relative;"
                                class="flex flex-column align-center justify-center">
                                <div
                                    style="width: calc(100vh * 1.2 );height: 120%;border: 4px solid #dd9300;background-color: #ca0000;position: absolute;left: 50%;top: -45%;transform: translate( -50% , -50% );border-radius: 50%;">

                                </div>

                                <i @click="hideRedPacketDetail()" class="bi bi-chevron-left"
                                    style="color: white;position: absolute;left: 10px;top: 10px;font-size: calc(var(--haosns-font-scale, 1) * 20px);"></i>
                                <div style="position: absolute;left: 0;top: 18%;width: 100%;color: #222;"
                                    class="flex flex-column align-center justify-center">
                                    <div class="flex align-center">
                                        <img style="width: 20px;height: 20px;" :src="nowRedPacketUserAvatar" alt="">
                                        <span class="font-lger ml-1">{{ nowRedPacketUserName }}的红包</span>
                                    </div>
                                    <span class="text-gray font">{{ nowRedPacketMessage }}</span>
                                    <div class="flex flex-column mt-4 px-2 py-2"
                                        style="width: 100vw;border-bottom: 1px solid #f5f4f4;">
                                        <span class="font-sm text-gray">已领取{{ nowRedPacketGetTotalCount -
                                            nowRedPacketRemainingCount }}/{{ nowRedPacketGetTotalCount }}个，共{{
                                            nowRedPacketGetTotalAmount - nowRedPacketRemainingAmount }}/{{
                                            nowRedPacketGetTotalAmount }}元</span>
                                    </div>
                                    <div v-for="(item, index) in nowRedPacketGetRecords"
                                        :key="'nowRedPacketGetRecords' + index"
                                        class="flex w-100 px-2 align-center py-1"
                                        style="border-bottom: 1px solid #f5f4f4;">
                                        <img class="avatar avatar-50 coverimg rounded-circle" :src="item.user.avatar" />
                                        <div class="flex flex-column flex-1">
                                            <div class="flex justify-between">
                                                <span class="font">{{ item.user.nickname }}</span>
                                                <span class="font">{{ item.amount }}元</span>
                                            </div>
                                            <div class="font-sm text-gray">{{ new Date(item.receive_time *
                                                1000).toLocaleString() }}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

                    <!-- 转账详情页 -->
                    <div>
                        <div style="height: 100vh;" id="transferDetail"
                            class="offcanvas offcanvas-bottom myOffCanvaeBg">
                            <div class="p-2">
                                <i @click="hideTransferDetail()" class="bi bi-chevron-left"
                                    style="font-size: calc(var(--haosns-font-scale, 1) * 20px);"></i>
                            </div>

                            <div style="margin-top: 50px;margin-bottom: 15px;"
                                class="flex flex-column align-center justify-center">
                                <i class="bi bi-clock-fill" style="font-size: 45px;"></i>
                                <span class="font mt-3 mb-3">待hell0收款</span>
                                <span class="fw-bold"
                                    style="font-size: calc(var(--haosns-font-scale, 1) * 40px);">￥1.00</span>
                            </div>

                            <div style="border-top: 1px solid #dbd7d7;" class="py-4 flex justify-between mx-3">
                                <span class="font">转账时间</span>
                                <span class="font">2025-09-16 15:22:48</span>
                            </div>
                        </div>
                    </div>

                    <!-- 上传图片组件 -->
                    <input type="file" id="imageChoose" accept="image/*" style="display: none;"
                        @change="handleFileChange">

                </div>



                <!-- notification -->


                <!-- Page Level js -->

                <script>
                    document.addEventListener('DOMContentLoaded', () => {
                        const app = Vue.createApp({
                            data() {
                                return {
                                    chatMenu: null, // 底部聊天菜单
                                    showMenu: false, // 不显示聊天菜单
                                    redPacket: null, // 红包弹窗
                                    transfer: null, // 转账弹窗
                                    transferInfo: null, // 转账详情弹窗
                                    receiveRedPacket: null, // 接收红包页面
                                    redPacketDetail: null, // 接收红包详情页
                                    transferDetail: null, // 转账详情页

                                    groupUserAvatar: [], // 群用户头像数组
                                    groupDetail: null, // 群详情
                                    id: -1, // 当前群id
                                    groupMembers: [], // 群聊成员
                                    groupMembersInfo: null, // 群聊成员详情

                                    groupMessagePage: 1, // 当前群聊记录页码
                                    oldMessages: [], // 当前聊天记录
                                    newMessages: [], // 处理后的聊天记录

                                    selfID: -1, // 自己的id
                                    selfAvatar: '', // 自己的头像
                                    selfName: '', // 自己的昵称

                                    talkStr: '', // 发送的聊天消息

                                    redPacketType: null, // 红包类型 -> 普通红包  拼手速红包
                                    redPacketTypeOpened: false, // 红包类型选择是否开启
                                    redPacketSendType: 1, // 普通红包: 1  拼手速红包：2
                                    redPacketMoney: '', // 红包金额
                                    redPacketMessage: '', // 红包消息
                                    redPacketTotalCount: 1, // 红包总个数

                                    nowRedPacketUserAvatar: '', // 红包用户头像
                                    nowRedPacketUserName: '', // 红包用户昵称
                                    nowRedPacketMessage: '', // 红包消息
                                    nowRedPacketID: -1, // 当前红包id
                                    nowRedPacketGetRecords: [], // 红包领取记录
                                    nowRedPacketGetTotalCount: 0, // 当前红包发布数量
                                    nowRedPacketGetTotalAmount: 0, // 当前红包发布金额
                                    nowRedPacketRemainingCount: 0, // 剩余数量
                                    nowRedPacketRemainingAmount: 0, // 剩余金额
                                    nowRedPacketUserID: -1, // 发送红包的人的id

                                    imageChoose: null, // 图片选择


                                    nowChooseType: 'menu', // 当前选择的类型
                                    nowChooseTypeTemp: 'menu', // 缓存选择类型

                                    nowEmojiIndex: -1, // 当前表情包索引
                                    nowEmojiArray: null, // 当前表情包对象
                                    cutEmojiArr: [], // 分割后的表情包数组

                                    
                                }
                            },
                            methods: {
                                stripHtmlTags(html) {
                                    // 检查输入是否为字符串
                                    if (typeof html !== 'string') {
                                        // throw new TypeError('输入必须是字符串类型');
                                        return '不支持的消息'
                                    }

                                    // 正则表达式匹配所有HTML标签并替换为空字符串
                                    // <[^>]*> 匹配任何以<开头、>结尾的内容，中间可以是除>之外的任何字符
                                    return html.replace(/<[^>]*>/g, '');
                                },
                                showPreview(item){ // 预览图片
                                    showPreview(item); 
                                },
                                doAddChatArticleMessage(msg){ // 增加聊天文章消息
                                    var msgObj = null;
                                    try {
                                        msgObj = JSON.parse(msg); // socket数据转换
                                    } catch (error) {

                                    }
                                    var time = this.formatTimestamp();

                                    if(msgObj != null && msgObj.data.type == "group_chat" && msgObj.data.msg_type == "article"){
                                        // articleDetailUrl
                                        axios.get(api.articleDetailUrl, {
                                            params: {
                                                id: msgObj.data.msg
                                            }

                                        }).then((res) => {
                                            // 处理成功情况
                                            if (res.data.code == 1) {
                                                var obj = {
                                                    "id": msgObj.data.id,
                                                    "from_id": msgObj.data.from_id,
                                                    "group_id": msgObj.data.group_id,
                                                    "msg_type": "article",
                                                    "msg": msgObj.data.msg,
                                                    "is_read": 1,
                                                    "create_time": time,
                                                    "update_time": time,
                                                    "status": 1,
                                                    "fromUser": {
                                                        "id": msgObj.data.from_id,
                                                        "nickname": msgObj.data.nickname,
                                                        "avatar": msgObj.data.avatar
                                                    },
                                                    "redPackets": null,
                                                    "article": {
                                                        "title": res.data.data.title,
                                                        "content": res.data.data.content,
                                                        "image": res.data.data.image
                                                    }
                                                }
                                                this.oldMessages.push(obj);
                                                this.newMessages = this.groupMessagesByTime(this.oldMessages);

                                                setTimeout(() => {
                                                    this.directScrollBottom();
                                                }, 200);
                                                
                                            } else {

                                            }


                                        })

                                        
                                    }

                                },
                                doAddChatMessage(msg) { // 增加聊天消息
                                    var msgObj = null;
                                    try {
                                        msgObj = JSON.parse(msg); // socket数据转换
                                    } catch (error) {

                                    }
                                    var time = this.formatTimestamp();

                                    if (msgObj != null && msgObj.data.type == "group_chat" && (msgObj.data.msg_type == 'text' || msgObj.data.msg_type == 'image' || msgObj.data.msg_type == 'red')) {
                                        var red = null;
                                        if (msgObj.data.msg_type == 'red') {
                                            red = {
                                                "id": msgObj.data.msg,
                                                // "packet_id": "251",
                                                "group_id": this.id,
                                                "redPackets": {
                                                    // "id": 251,
                                                    "send_user_id": msgObj.data.from_id,
                                                    "type": 1,
                                                    "amount": "1.00",
                                                    "total_count": 1,
                                                    "remaining_amount": "1.00",
                                                    "remaining_count": 1,
                                                    "message": msgObj.data.red_message,
                                                    "create_time": time,
                                                    "expire_time": parseInt(new Date().getTime() / 1000),
                                                    "status": 0,
                                                    "refund_time": null,
                                                    "open_condition": null,
                                                    "read_article_time": 0,
                                                    "records": []
                                                }
                                            }
                                        }

                                        var obj = {
                                            "id": msgObj.data.id,
                                            "from_id": msgObj.data.from_id,
                                            "group_id": this.id,
                                            "msg_type": msgObj.data.msg_type,
                                            "msg": msgObj.data.msg,
                                            "is_read": 1,
                                            "create_time": time,
                                            "update_time": time,
                                            "status": 1,
                                            "fromUser": {
                                                "id": msgObj.data.from_id,
                                                "nickname": msgObj.data.nickname,
                                                "avatar": msgObj.data.avatar
                                            },
                                            "redPackets": red
                                        }
                                        this.oldMessages.push(obj);
                                        this.newMessages = this.groupMessagesByTime(this.oldMessages);
                                    }

                                    if(msgObj != null && msgObj.data.type == "group_chat" && msgObj.data.msg_type == 'red_tip'){
                                        for(var i = 0; i < this.oldMessages.length; i++){
                                            if(this.oldMessages[i].msg == msgObj.data.msg){
                                                this.oldMessages[i].redPackets.redPackets.status = 1;
                                                break;
                                            }
                                        }
                                        this.newMessages = this.groupMessagesByTime(this.oldMessages);

                                        var tip = {
                                            "from_id": msgObj.data.from_id,
                                            "msg_type": "red_tip",
                                            create_time: time
                                            
                                        }

                                        this.oldMessages.push(tip);
                                        this.newMessages = this.groupMessagesByTime(this.oldMessages);

                                    }


                                    setTimeout(() => {
                                        this.directScrollBottom();
                                    }, 50);
                                },
                                showMessage(msg) { // 测试socket输出
                                    console.log(msg);

                                },
                                initGetMessage() {// 初始化socket消息获取
                                    doReceive(this.showMessage);
                                    doReceive(this.doAddChatMessage);
                                    doReceive(this.doAddChatArticleMessage);

                                },
                                parseEmoTextWithImage(str) {
                                    // console.log('this.nowEmojiArray', this.nowEmojiArray);

                                    // console.log('parseEmoTextWithImage', str);
                                    // 1. 使用正则匹配 [emo_X_Y] 并提取 X 和 Y
                                    const emoRegex = /\[emo_(\d+)_(\d+)\]/g;

                                    // 2. 替换 [emo_X_Y] 为 <img> 标签
                                    const html = str.replace(emoRegex, (match, x, y) => {
                                        if (this.nowEmojiArray != null) {
                                            const imgUrl = this.nowEmojiArray[x].image[y].image;
                                            return `<img style="width: 30px; height: 30px; position: relative; " src="${imgUrl}" />`;
                                        }

                                    });

                                    // 3. 用 <span> 包裹剩余文本
                                    const finalHtml = `<span>${html.replace(/<\/span><span>/g, '</span><span>')}</span>`;

                                    return finalHtml;
                                },
                                insertAtCursor(myValue) {  // 在光标处插入数据
                                    var myField = document.getElementById('textInput');
                                    // IE 支持
                                    if (document.selection) {
                                        myField.focus();
                                        var sel = document.selection.createRange();
                                        sel.text = myValue;
                                        sel.select();
                                    }
                                    // 其他浏览器支持
                                    else if (myField.selectionStart || myField.selectionStart == '0') {
                                        var startPos = myField.selectionStart;
                                        var endPos = myField.selectionEnd;
                                        var restoreTop = myField.scrollTop;
                                        myField.value = myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos, myField.value.length);
                                        if (restoreTop > 0) {
                                            myField.scrollTop = restoreTop;
                                        }
                                        myField.focus();
                                        myField.selectionStart = startPos + myValue.length;
                                        myField.selectionEnd = startPos + myValue.length;
                                    } else {
                                        myField.value += myValue;
                                        myField.focus();
                                    }

                                    this.talkStr = myField.value;
                                },
                                // 按照数量分割表情包
                                cutEmoji(cutCount, emojis) {
                                    var cutEmojiArr = [];
                                    var count = 0;
                                    if (emojis != null && Array.isArray(emojis)) {
                                        for (var i = 0; i < emojis.length; i++) {
                                            var row = parseInt(count / cutCount);
                                            if (cutEmojiArr[row] == null) {
                                                cutEmojiArr[row] = [];
                                            }
                                            cutEmojiArr[row].push(emojis[i]);
                                            count++;

                                        }
                                        // console.log(cutEmojiArr);

                                    }
                                    return cutEmojiArr;
                                },
                                parseEmoTextWithImage(str) {
                                    // console.log('this.nowEmojiArray', this.nowEmojiArray);

                                    // console.log('parseEmoTextWithImage', str);
                                    // 1. 使用正则匹配 [emo_X_Y] 并提取 X 和 Y
                                    const emoRegex = /\[emo_(\d+)_(\d+)\]/g;

                                    // 2. 替换 [emo_X_Y] 为 <img> 标签
                                    const html = str.replace(emoRegex, (match, x, y) => {
                                        if (this.nowEmojiArray != null) {
                                            const imgUrl = this.nowEmojiArray[x].image[y].image;
                                            return `<img style="width: 30px; height: 30px; position: relative;  " src="${imgUrl}" />`;
                                        }

                                    });

                                    // 3. 用 <span> 包裹剩余文本
                                    const finalHtml = `<span>${html.replace(/<\/span><span>/g, '</span><span>')}</span>`;

                                    return finalHtml;
                                },
                                getEmoList() { // 获取表情包列表
                                    // emoListUrl
                                    axios.get(api.emoListUrl, {
                                        params: {}
                                    })
                                        .then((res) => {
                                            // 处理成功情况
                                            if (res.data.code == 1) {
                                                this.nowEmojiArray = res.data.data;


                                                for (var i = 0; i < this.nowEmojiArray.length; i++) {
                                                    if (Object.keys(this.nowEmojiArray[i]).length == 0) {
                                                        console.log(i);

                                                        continue
                                                    }

                                                    this.nowEmojiArray[i].cutEmojiArr = this.cutEmoji(7, this.nowEmojiArray[i].image);

                                                    if (this.nowEmojiArray[i].image != null) {
                                                        this.nowEmojiArray[i].icon = this.nowEmojiArray[i].image[0].image
                                                    }
                                                }

                                                var arr = [];
                                                for (var i = 0; i < this.nowEmojiArray.length; i++) {
                                                    if (Object.keys(this.nowEmojiArray[i]).length == 0) {
                                                        continue;
                                                    }
                                                    arr.push(this.nowEmojiArray[i]);
                                                }

                                                this.nowEmojiArray = arr;



                                            } else {
                                                showToast(res.data.msg, 3000, 'error');
                                            }

                                            // console.log('this.nowEmojiArray', this.nowEmojiArray);

                                        })
                                },
                                getUserName(item2) { // 通过用户id获取名称
                                    // userHomeUrl
                                    axios.get(api.userHomeUrl, {
                                        params: {
                                            user_id: item2.msg
                                        }

                                    })
                                        .then((res) => {
                                            // 处理成功情况
                                            if (res.data.code == 1) {
                                                item2.nickname = res.data.data.nickname;
                                            } else {

                                            }


                                        })
                                    return '';
                                },
                                jump(url) { // 页面路径跳转
                                    loc.jump(url);
                                },
                                addImageTalkToArray(image, time) { // 增加选择的图片内容到聊天记录
                                    var obj = {
                                        "from_id": this.selfID,
                                        "to_id": this.id,
                                        "msg_type": "image",
                                        "msg": image,
                                        "is_read": 0,
                                        "create_time": time,
                                        "update_time": time,
                                        "status": 1,
                                        "transfers": null,
                                        "redPackets": null
                                    }

                                    this.oldMessages.push(obj);
                                    this.newMessages = this.groupMessagesByTime(this.oldMessages);

                                },
                                sendImageMessage(image) { // 发送选择的图片
                                    // var obj = {
                                    //     "to_id": this.id,
                                    //     "msg": image,
                                    //     "msg_type": "image",
                                    //     "type": "private_chat",
                                    //     "from_id": this.selfID,
                                    //     "terminal": api.terminal
                                    // }

                                    var obj = {
                                        "group_id": this.id,
                                        "msg": image,
                                        "msg_type": "image",
                                        "terminal": api.terminal
                                    }
                                    // chatSendGroupMessageUrl
                                    axios.post(api.chatSendGroupMessageUrl, obj)
                                        .then((res) => {
                                            // 处理成功情况
                                            if (res.data.code == 1) {
                                                var time = this.formatTimestamp();
                                                this.addImageTalkToArray(image, time);


                                                setTimeout(() => {
                                                    this.directScrollBottom();
                                                }, 200);



                                            } else {
                                                showToast(res.data.msg, 3000, 'error');
                                            }


                                        })
                                },
                                // 处理文件选择
                                handleFileChange(event) {
                                    const file = event.target.files[0];
                                    if (file) {
                                        // 创建FormData对象
                                        const formData = new FormData();
                                        formData.append('file', file);

                                        axios.post(api.uploadImageUrl, formData).then(res => {
                                            if (res.data && res.data.data && res.data.data.uri) {
                                                var uploadFile = res.data.data.uri;
                                                this.sendImageMessage(uploadFile);
                                            }
                                        })
                                    }
                                },
                                openImageChoose() { // 选择图片并上传
                                    this.imageChoose = document.getElementById('imageChoose');
                                    this.imageChoose.click();
                                },
                                addTipRedToArray(time) { // 添加红包已读提示
                                    var obj = {
                                        "from_id": this.selfID,
                                        "msg_type": "red_tip",
                                        "create_time": time,
                                        "update_time": time,

                                    }

                                    this.oldMessages.push(obj);
                                    this.newMessages = this.groupMessagesByTime(this.oldMessages);
                                },
                                getRedPacketRecords() { // 获取红包领取记录
                                    // tradeGroupRedDetailsUrl
                                    axios.get(api.tradeGroupRedDetailsUrl, {
                                        params: {
                                            group_red_id: this.nowRedPacketID
                                        }

                                    })
                                        .then((res) => {
                                            // 处理成功情况
                                            if (res.data.code == 1) {
                                                this.nowRedPacketGetRecords = res.data.data.redPackets.records;
                                                this.nowRedPacketGetTotalCount = res.data.data.redPackets.total_count;
                                                this.nowRedPacketGetTotalAmount = res.data.data.redPackets.amount;

                                                this.nowRedPacketRemainingCount = res.data.data.redPackets.remaining_count;
                                                this.nowRedPacketRemainingAmount = res.data.data.redPackets.remaining_amount;

                                                this.showRedPacketDetail();
                                            } else {

                                            }


                                        })
                                },
                                getRedPacket() { // 领取红包
                                    // tradeGroupRedReceiveUrl
                                    axios.get(api.tradeGroupRedReceiveUrl, {
                                        params: {
                                            group_red_packets_id: this.nowRedPacketID
                                        }

                                    })
                                        .then((res) => {
                                            // 处理成功情况
                                            if (res.data.code == 1) {
                                                this.hideReceiveRedPacket(); // 关闭领红包弹窗
                                                this.getRedPacketRecords(); // 获取红包收取记录

                                                var time = this.formatTimestamp(); // 获取时间
                                                this.addTipRedToArray(time); // 增加已领取红包记录

                                                for (var i = 0; i < this.oldMessages.length; i++) {
                                                    if (this.oldMessages[i].redPackets != null && this.oldMessages[i].redPackets.id == this.nowRedPacketID) {
                                                        this.oldMessages[i].redPackets.redPackets.status = 1;
                                                        // console.log('old数组已设置');

                                                    }

                                                }
                                                for (var i = 0; i < this.newMessages.length; i++) {
                                                    for (var j = 0; j < this.newMessages[i].length; j++) {
                                                        // console.log(this.newMessages[i][j]);
                                                        if (this.newMessages[i][j].redPackets != null && this.newMessages[i][j].redPackets.id == this.nowRedPacketID) {
                                                            this.newMessages[i][j].redPackets.redPackets.status = 1;
                                                            // console.log('new数组已设置');
                                                        }

                                                    }
                                                }

                                                setTimeout(() => {
                                                    this.directScrollBottom();
                                                }, 200);


                                            } else {
                                                showToast('已经领过红包了', 3000, 'warning');
                                                for (var i = 0; i < this.oldMessages.length; i++) {
                                                    if (this.oldMessages[i].redPackets != null && this.oldMessages[i].redPackets.id == this.nowRedPacketID) {
                                                        this.oldMessages[i].redPackets.redPackets.status = 1;
                                                        // console.log('old数组已设置');

                                                    }

                                                }
                                                for (var i = 0; i < this.newMessages.length; i++) {
                                                    for (var j = 0; j < this.newMessages[i].length; j++) {
                                                        // console.log(this.newMessages[i][j]);
                                                        if (this.newMessages[i][j].redPackets != null && this.newMessages[i][j].redPackets.id == this.nowRedPacketID) {
                                                            this.newMessages[i][j].redPackets.redPackets.status = 1;
                                                            // console.log('new数组已设置');
                                                        }

                                                    }
                                                }
                                            }


                                        })
                                },
                                openRedPacket(status, message, redPacketID, fromUser, sendUserId) { // 根据类型开启红包
                                    if (status == 0) { // 为0 表示 未领完， 1 表示 已领完 2 已过期 3 已退款
                                        this.showReceiveRedPacket();
                                        this.nowRedPacketUserAvatar = fromUser.avatar;
                                        this.nowRedPacketUserName = fromUser.nickname;
                                        this.nowRedPacketMessage = message;
                                        this.nowRedPacketID = redPacketID;
                                        this.nowRedPacketUserID = sendUserId;
                                    } else {
                                        this.nowRedPacketUserAvatar = fromUser.avatar;
                                        this.nowRedPacketUserName = fromUser.nickname;
                                        this.nowRedPacketMessage = message;
                                        this.nowRedPacketID = redPacketID;
                                        this.nowRedPacketUserID = sendUserId;
                                        this.getRedPacketRecords();
                                    }
                                },
                                addRedPacketIntoArray(msg, time) { // 增加缓存红包到聊天数组
                                    var obj = {
                                        // "id": 2080,
                                        "from_id": this.selfID,
                                        "group_id": this.id,
                                        "msg_type": "red",
                                        "msg": msg,
                                        "is_read": 0,
                                        "create_time": time,
                                        "update_time": time,
                                        "status": 1,
                                        "fromUser": {
                                            "id": this.selfID,
                                            "nickname": this.selfName,
                                            "avatar": this.selfAvatar
                                        },
                                        "redPackets": {
                                            "id": msg,
                                            // "packet_id": "232",
                                            "group_id": this.id,
                                            "redPackets": {
                                                // "id": 232,
                                                "send_user_id": this.selfID,
                                                "type": this.redPacketSendType,
                                                "amount": this.redPacketMoney,
                                                "total_count": this.redPacketTotalCount,
                                                "remaining_amount": this.redPacketMoney,
                                                "remaining_count": this.redPacketTotalCount,
                                                "message": this.redPacketMessage,
                                                "create_time": time,
                                                // "expire_time": 1759300372,
                                                "status": 0,
                                                "refund_time": null,
                                                "open_condition": null,
                                                "read_article_time": 0,
                                                "records": []
                                            }
                                        }
                                    }

                                    this.oldMessages.push(obj);
                                    this.newMessages = this.groupMessagesByTime(this.oldMessages);
                                },
                                initRedPacket() { // 初始化红包菜单
                                    var redPacketEle = document.getElementById('redPacket');
                                    this.redPacket = new bootstrap.Offcanvas(redPacketEle,
                                        { toggle: false });
                                },
                                showRedPacket() { // 显示发红包菜单
                                    this.redPacket.show();
                                },
                                hideRedPacket() { // 隐藏发红包菜单
                                    this.redPacket.hide();
                                },
                                sendRedPacket() { // 发红包
                                    // tradeGroupSendRedUrl
                                    axios.post(api.tradeGroupSendRedUrl, {
                                        amount: this.redPacketMoney,
                                        group_id: this.id,
                                        terminal: api.terminal,
                                        message: this.redPacketMessage,
                                        total_count: this.redPacketTotalCount,
                                        type: this.redPacketSendType
                                    })
                                        .then((res) => {
                                            // 处理成功情况
                                            if (res.data.code == 1) {
                                                var redPacketID = res.data.data.id;
                                                var time = this.formatTimestamp();
                                                this.addRedPacketIntoArray(redPacketID, time);
                                                this.hideRedPacket();

                                                this.redPacketMoney = '';
                                                this.redPacketMessage = '';
                                                this.redPacketTotalCount = 1;
                                                this.redPacketSendType = 1;

                                                setTimeout(() => {
                                                    this.directScrollBottom();
                                                }, 200);

                                            } else {
                                                showToast(res.data.msg, 3000, 'error');
                                            }


                                        })
                                },
                                setRedPacketSendType(type) { // 设置当前为普通红包或拼手速红包
                                    this.redPacketSendType = type;

                                },
                                autoChangeRedPacketTypeStatus() { // 自动切换发红包状态
                                    if (this.redPacketTypeOpened == false) {
                                        this.redPacketTypeOpened = true;
                                        this.redPacketType.show();
                                    } else {
                                        this.redPacketTypeOpened = false;
                                        this.redPacketType.hide();
                                    }
                                },
                                initRedPacketType() { // 初始化红包状态
                                    var redPacketTypeEle = document.getElementById('redPacketType');
                                    this.redPacketType = new bootstrap.Collapse(redPacketTypeEle, { toggle: false });
                                },
                                addItemToList(msg, time) { // 添加缓存数据到消息数组
                                    // var obj = {
                                    //     "from_id": this.selfID,
                                    //     "to_id": parseInt(this.id),
                                    //     "msg_type": "text",
                                    //     "msg": msg,
                                    //     "is_read": 0,
                                    //     "create_time": time,
                                    //     "update_time": time,
                                    //     "status": 1,
                                    //     "transfers": null,
                                    //     "redPackets": null
                                    // }

                                    var obj = {
                                        // "id": 2073,
                                        "from_id": this.selfID,
                                        "group_id": this.id,
                                        "msg_type": "text",
                                        "msg": msg,
                                        "is_read": 0,
                                        "create_time": time,
                                        "update_time": time,
                                        "status": 1,
                                        "fromUser": {
                                            "id": this.selfID,
                                            "nickname": this.selfName,
                                            "avatar": this.selfAvatar
                                        },
                                        "redPackets": null
                                    }

                                    obj.isLoading = true;
                                    this.oldMessages.push(obj);
                                    this.newMessages = this.groupMessagesByTime(this.oldMessages);
                                    // console.log('this.newMessages', this.newMessages);

                                    setTimeout(() => {
                                        for (var i = 0; i < this.oldMessages.length; i++) {
                                            this.oldMessages[i].isLoading = false;
                                        }
                                        for (var i = 0; i < this.newMessages.length; i++) {
                                            for (var j = 0; j < this.newMessages[i].length; j++) {
                                                // console.log(this.newMessages[i][j]);
                                                this.newMessages[i][j].isLoading = false;
                                                // console.log(this.newMessages[i][j]);
                                            }
                                        }
                                    }, 2000);


                                },
                                formatTimestamp(timestamp) { // 格式化时间
                                    // 创建Date对象，如果时间戳为0或未提供，则使用当前时间
                                    const date = timestamp ? new Date(timestamp) : new Date();

                                    // 获取年、月、日
                                    const year = date.getFullYear();
                                    // 月份从0开始，需要加1
                                    const month = date.getMonth() + 1;
                                    const day = date.getDate();

                                    // 获取时、分、秒
                                    const hours = date.getHours();
                                    const minutes = date.getMinutes();
                                    const seconds = date.getSeconds();

                                    // 补零函数，确保数字为两位数
                                    const padZero = (num) => num.toString().padStart(2, '0');

                                    // 拼接成指定格式
                                    return `${year}-${padZero(month)}-${padZero(day)} ${padZero(hours)}:${padZero(minutes)}:${padZero(seconds)}`;
                                },
                                directScrollBottom() { //直接滚动最底部
                                    window.scrollTo({
                                        top: 99999999,
                                        behavior: 'smooth'
                                    });
                                },
                                sendTalk() { // 发送聊天消息
                                    if (this.talkStr == null || this.talkStr == '') {
                                        return;
                                    }
                                    // var obj = {
                                    //     "to_id": this.id,
                                    //     "msg": this.talkStr,
                                    //     "msg_type": "text",
                                    //     "type": "private_chat",
                                    //     "from_id": this.selfID,
                                    //     "terminal": api.terminal
                                    // }

                                    var obj = {
                                        "group_id": this.id,
                                        "msg": this.talkStr,
                                        "msg_type": "text",
                                        "terminal": api.terminal
                                    }


                                    // chatSendGroupMessageUrl
                                    axios.post(api.chatSendGroupMessageUrl, obj)
                                        .then((res) => {
                                            // 处理成功情况
                                            if (res.data.code == 1) {
                                                var time = this.formatTimestamp();
                                                this.addItemToList(this.talkStr, time);
                                                this.talkStr = '';

                                                setTimeout(() => {
                                                    this.directScrollBottom();
                                                }, 200);



                                            } else {
                                                showToast(res.data.msg, 3000, 'error');
                                            }


                                        })

                                },
                                initSelfID() { // 获取自己的id
                                    // this.selfID = 
                                    // userCentreUrl
                                    axios.get(api.userCentreUrl, {
                                        params: {

                                        }

                                    })
                                        .then((res) => {
                                            // 处理成功情况
                                            if (res.data.code == 1) {
                                                this.selfID = res.data.data.id;
                                                this.selfAvatar = res.data.data.avatar;
                                                this.selfName = res.data.data.nickname;
                                                // console.log(this.selfID);

                                            } else {
                                                showToast(res.data.msg, 3000, 'error');
                                            }


                                        })
                                },
                                // 处理消息格式
                                groupMessagesByTime(messages, interval = 10 * 60 * 1000) {
                                    if (messages.length === 0) return [];

                                    // 将 create_time 转换为时间戳
                                    const messagesWithTimestamp = messages.map((msg) => ({
                                        ...msg,
                                        timestamp: new Date(msg.create_time).getTime(),
                                    }));

                                    // 初始化结果数组
                                    const result = [];
                                    let currentGroup = [messagesWithTimestamp[0]]; // 第一个消息作为第一个分组

                                    // 遍历消息数组
                                    for (let i = 1; i < messagesWithTimestamp.length; i++) {
                                        const currentMessage = messagesWithTimestamp[i];
                                        const previousMessage = messagesWithTimestamp[i - 1];

                                        // 计算时间差
                                        const timeDiff = currentMessage.timestamp - previousMessage.timestamp;

                                        // 如果时间差超过 10 分钟，新建一个分组
                                        if (timeDiff > interval) {
                                            result.push(currentGroup); // 将当前分组加入结果
                                            currentGroup = [currentMessage]; // 新建分组
                                        } else {
                                            // 否则，将消息加入当前分组
                                            currentGroup.push(currentMessage);
                                        }
                                    }

                                    // 将最后一个分组加入结果
                                    if (currentGroup.length > 0) {
                                        result.push(currentGroup);
                                    }

                                    return result;
                                },
                                // 获取群聊记录
                                getChatGroupMessageFirst() {
                                    this.groupMessagePage = 1;
                                    this.oldMessages = [];
                                    // chatChatGroupMessageUrl
                                    axios.get(api.chatChatGroupMessageUrl, {
                                        params: {
                                            group_id: this.id,
                                            page: this.groupMessagePage,
                                            page_size: 14
                                        }

                                    })
                                        .then((res) => {
                                            // 处理成功情况
                                            if (res.data.code == 1) {
                                                for (var i = 0; i < res.data.data.messages.data.length; i++) {
                                                    if(res.data.data.messages.data[i].article == null){
                                                        res.data.data.messages.data[i].article = {};
                                                    }
                                                    this.oldMessages.unshift(res.data.data.messages.data[i]);
                                                }
                                                this.newMessages = this.groupMessagesByTime(this.oldMessages);
                                                // console.log(this.newMessages);

                                            } else {
                                                showToast(res.data.msg, 3000, 'error');
                                            }


                                        })
                                },
                                handleScroll() { // 移动到顶部刷新请求
                                    // 计算滚动进度
                                    const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
                                    const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;


                                    // 检测是否滚动到顶部
                                    if (winScroll === 0) {
                                        this.getChatGroupMessageNext();
                                    }
                                },
                                // 获取群聊记录
                                getChatGroupMessageNext() {
                                    this.groupMessagePage += 1;
                                    // this.oldMessages = [];
                                    // chatChatGroupMessageUrl
                                    axios.get(api.chatChatGroupMessageUrl, {
                                        params: {
                                            group_id: this.id,
                                            page: this.groupMessagePage,
                                            page_size: 14
                                        }

                                    })
                                        .then((res) => {
                                            // 处理成功情况
                                            if (res.data.code == 1) {
                                                for (var i = 0; i < res.data.data.messages.data.length; i++) {
                                                    if(res.data.data.messages.data[i].article == null){
                                                        res.data.data.messages.data[i].article = {};
                                                    }
                                                    this.oldMessages.unshift(res.data.data.messages.data[i]);
                                                }
                                                this.newMessages = this.groupMessagesByTime(this.oldMessages);
                                                // console.log(this.newMessages);

                                            } else {
                                                showToast(res.data.msg, 3000, 'error');
                                            }


                                        })
                                },
                                // 获取群聊成员
                                getGroupMember() {
                                    // chatGroupMemberUrl
                                    axios.get(api.chatGroupMemberUrl, {
                                        params: {
                                            group_id: this.id
                                        }

                                    })
                                        .then((res) => {
                                            // 处理成功情况
                                            if (res.data.code == 1) {
                                                this.groupMembersInfo = res.data.data; // 群详情
                                                // 群成员
                                                this.groupMembers = res.data.data.list;


                                            } else {
                                                showToast(res.data.msg, 3000, 'error');
                                            }


                                        })
                                },
                                // 获取文章id
                                getGroupID() {
                                    this.id = parseUrlParams(window.location.href).id;
                                    // console.log('this.id', this.id);

                                },
                                initGroupDetail() { // 获取群详情
                                    // chatGroupDetailUrl
                                    axios.get(api.chatGroupDetailUrl, {
                                        params: {
                                            group_id: this.id
                                        }

                                    })
                                        .then((res) => {
                                            // 处理成功情况
                                            if (res.data.code == 0) {
                                                this.groupDetail = res.data.data; // 群详情
                                                // 处理群头像
                                                for (var i = 0; i < res.data.data.member.length; i++) {
                                                    if (res.data.data.member[i].user != null) {
                                                        this.groupUserAvatar.push(res.data.data.member[i].user.avatar);
                                                    }

                                                }
                                                // console.log(this.groupUserAvatar);

                                            } else {
                                                showToast(res.data.msg, 3000, 'error');
                                            }


                                        })
                                },
                                initGroupAVatar() { // 初始化群头像

                                },
                                initChatMenu() { // 初始化底部聊天菜单
                                    var chatMenuEle = document.getElementById('chatMenu');
                                    this.chatMenu = new bootstrap.Collapse(chatMenuEle,
                                        { toggle: false });
                                },
                                showChatMenu() {
                                    this.chatMenu.show();
                                },
                                hideChatMenu() {
                                    this.chatMenu.hide();
                                },
                                initRedPacket() { // 初始化红包菜单
                                    var redPacketEle = document.getElementById('redPacket');
                                    this.redPacket = new bootstrap.Offcanvas(redPacketEle,
                                        { toggle: false });
                                },
                                showRedPacket() {
                                    this.redPacket.show();
                                },
                                hideRedPacket() {
                                    this.redPacket.hide();
                                },
                                initTransfer() { // 初始化转账菜单
                                    var transferEle = document.getElementById('transfer');
                                    this.transfer = new bootstrap.Offcanvas(transferEle,
                                        { toggle: false });
                                },
                                showTransfer() {
                                    this.transfer.show();
                                },
                                hideTransfer() {
                                    this.transfer.hide();
                                },
                                initTransferInfo() { // 初始化转账说明菜单
                                    var transferInfoEle = document.getElementById('transferInfo');
                                    this.transferInfo = new bootstrap.Offcanvas(transferInfoEle,
                                        { toggle: false });
                                },
                                showTransferInfo() {
                                    this.transferInfo.show();
                                },
                                hideTransferInfo() {
                                    this.transferInfo.hide();
                                },
                                initReceiveRedPacket() { // 初始化接收红包窗口
                                    var receiveRedPacketEle = document.getElementById('receiveRedPacket');
                                    this.receiveRedPacket = new bootstrap.Offcanvas(receiveRedPacketEle,
                                        { toggle: false });
                                },
                                showReceiveRedPacket() {
                                    this.receiveRedPacket.show();
                                },
                                hideReceiveRedPacket() {
                                    this.receiveRedPacket.hide();
                                },
                                initRedPacketDetail() { // 初始化接收红包窗口
                                    var redPacketDetailEle = document.getElementById('redPacketDetail');
                                    this.redPacketDetail = new bootstrap.Offcanvas(redPacketDetailEle,
                                        { toggle: false });
                                },
                                showRedPacketDetail() {
                                    this.redPacketDetail.show();
                                },
                                hideRedPacketDetail() {
                                    this.redPacketDetail.hide();
                                },
                                initTransferDetail() { // 初始化转账窗口
                                    var transferDetailEle = document.getElementById('transferDetail');
                                    this.transferDetail = new bootstrap.Offcanvas(transferDetailEle,
                                        { toggle: false });
                                },
                                showTransferDetail() {
                                    this.transferDetail.show();
                                },
                                hideTransferDetail() {
                                    this.transferDetail.hide();
                                },
                                autoChangeChatMenu() { // 智能切换底部菜单
                                    if (this.showMenu == false) {
                                        this.showMenu = true;
                                        this.showChatMenu();
                                    } else {
                                        this.showMenu = false;
                                        this.hideChatMenu();
                                    }
                                }
                            },
                            mounted() {
                                this.initChatMenu(); // 初始化聊天菜单
                                this.initRedPacket(); // 初始化红包页
                                this.initTransfer(); // 初始化转账页面
                                this.initTransferInfo(); // 初始化转账内容页
                                this.initReceiveRedPacket(); // 初始化接收红包页面
                                this.initRedPacketDetail(); // 初始化红包详情页
                                this.initTransferDetail(); // 初始化转账结果页

                                this.getGroupID(); // 获取群聊id
                                this.initGroupDetail(); // 初始化群详情
                                this.getGroupMember(); // 获取群成员

                                this.getChatGroupMessageFirst(); // 首次获取聊天消息

                                this.initSelfID(); // 获取自己的id

                                this.initRedPacketType(); // 获取红包类型

                                this.initRedPacket(); // 初始化红包弹窗

                                window.addEventListener('load', () => { // 启动后自动触底
                                    setTimeout(() => {
                                        this.directScrollBottom();
                                    }, 200);

                                });

                                this.cutEmojiArr = this.cutEmoji(7, window.conf.emoji); // 分割表情包
                                this.getEmoList(); // 获取表情包数组

                                this.initGetMessage(); // 初始化获取socket消息

                                window.addEventListener('scroll', this.handleScroll);
                            }
                        })

                        // 挂载应用
                        app.mount('#app')
                    })

                </script>
        </body>

</html>