<!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>
    .nav-tabs .nav-link.active {
        background-color: transparent;
        border-color: transparent;
    }

    .nav-link {
        padding: 4px 6px;
    }
</style>
<style>
    .bottomBorder {
        border-bottom: 2px solid #ff6666;
        color: black !important;
        font-weight: bold;
    }

    .offcanvas.offcanvas-top {
        top: 55px;
    }

    .offcanvas-backdrop.show {
        opacity: 0;
    }

    .offcanvas-header,
    .offcanvas-body {
        padding: 5px;
    }

    .haosns-tabs .nav-item .nav-link {
        /* padding: 5px 0; */
        padding: 0 5px;
    }

    .haosns-tabs .nav-item .active {
        /* border-bottom: 2px solid var(--bs-nav-tabs-link-active-border-color); */
    }

    .myBtn {
        border-radius: 5px;
    }

    .container-fluid {
        /* border-bottom: 1px solid var(--bs-navbar-toggler-border-color); */
    }

    .alert {
        padding: 5px 10px;
        margin: 0 10px;
    }

    #indexPageHeader {
        position: relative;
        left: -38px;
    }

    .myCard {
        padding: 10px 5px 0 5px;
    }

    .myCard2 {
        padding: 10px 20px;
    }

    .follow-btn {
        color: var(--adminuiux-theme-1);
        border: 1px solid var(--adminuiux-theme-1);
        border-radius: 20px;
    }

    [data-bs-theme=dark] .follow-btn {
        color: #fff;
        border: 1px solid #fff;
        border-radius: 20px;
    }

    .content img {
        width: 100%;
        border-radius: 10px;
    }

    .myRow1 .col {
        padding: 2px;
    }

    .noRound img {
        /* 取消圆角图片 */
        border-radius: 0;
    }

    .noScrollBar::-webkit-scrollbar {
        display: none;
    }

    /* 为 IE、Edge 和 Firefox 隐藏滚动条 */
    .noScrollBar {
        -ms-overflow-style: none;
        /* IE and Edge */
        scrollbar-width: none;
        /* Firefox */
    }

    .nav .nav-item .nav-link .bottomBar {
        display: none;
    }

    .nav .nav-item .active .bottomBar {
        display: block;
    }
</style>

        <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>
                    .btn-group-sm .btn {
                        padding: 1px 2px;
                        border: none;
                        margin: 0 2px;
                        position: relative;
                        top: -1px;
                    }

                    .myTextarea {
                        border-radius: 5px;
                        /* background-color: #f6f6f9; */
                    }

                    .myOffCanvas {
                        height: auto !important;
                    }

                    .myMenuItem {
                        background-color: #f6f6f6;
                    }

                    [data-bs-theme=dark] .myMenuItem {
                        background-color: #171a09;
                    }

                    .myOffCanvasBody {
                        padding: 0;
                    }

                    /* [data-bs-theme=light] .myTextarea{
                background-color: #f6f6f9;
            } */

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

                    .dropzone {
                        min-height: 72px;
                        margin: 5px 0;
                    }

                    .dropzone .dz-default {
                        margin: 13px;
                        /* display: flex;
                align-items: center;
                justify-content: center; */
                    }

                    .dropzone .dz-preview .dz-image {
                        width: 50px;
                        height: 50px;
                        border-radius: 5px;
                        margin-right: 5px;
                    }

                    .dropzone .dz-preview {
                        min-height: auto;
                        margin: 0;
                        gap: 10px;
                    }

                    .dropzone .dz-preview .dz-success-mark svg,
                    .dropzone .dz-preview .dz-error-mark svg {
                        width: 15px;
                        height: 15px;
                    }

                    .dropzone .dz-preview:hover .dz-details {
                        display: none;
                    }

                    .dropzone .dz-preview.dz-image-preview {
                        background-color: transparent;
                    }

                    .dropzone .dz-preview .dz-image img {
                        width: 100%;
                        height: 100%;
                    }

                    p {
                        margin-bottom: auto;
                    }

                    /* 取消p标签底部边距 */
                    .no-p-margin p {
                        margin-bottom: unset;
                    }
                </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">
                    <div id="app">
                        <!-- 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 style="background-color: rgba(var(--adminuiux-header-active-bg-rgb), var(--adminuiux-header-active-opacity));height: 50px;"
                                class="flex align-center px-2 py-1 fixed-top">
                                <i onclick="goBack()" style="font-size: 22px;" class="bi bi-chevron-left"></i>
                                <!-- <div class="avatar avatar-30 coverimg rounded-circle ml-2"
                                    style="background-image: url('https://haodds-1251208851.cos.ap-shanghai.myqcloud.com/oss/qcloud/uploads/images/20250527141100838684416.jpg');">
                                    <img class="w-auto"
                                        src="https://haodds-1251208851.cos.ap-shanghai.myqcloud.com/oss/qcloud/uploads/images/20250527141100838684416.jpg"
                                        alt="" data-extentions-extra-ocr-id="1799a7602b1dc301f67a50fe3d661260"
                                        style="display: none;">
                                </div> -->

                                <img @click="jump(`haosns-user-detail.html?id=${detail.user.id}`)"
                                    class="avatar avatar-30 coverimg rounded-circle  ml-2"
                                    :src="detail == null ? '' : detail.user.avatar" />
                                <span @click="jump(`haosns-user-detail.html?id=${detail.user.id}`)"
                                    class="font flex-1 ml-2">{{ detail == null ? '' : detail.user.nickname }}</span>
                                <i @click="showShareBox()"
                                    style="transform: scaleX(-1);font-size: 24px;position: relative;top: -3px;"
                                    class="bi bi-reply"></i>
                            </div>

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

                            </div>

                            <div class="flex flex-column justify-center align-center" style="background-color: rgba(0, 0, 0, 0.5);height: 160px;" v-if="detail != null && centre != null && (detail.pay_money > 0 && centre.id != detail.user_id && detail.is_pay != 1)">
                                <i @click="getArticleDetail();openShowPayInfo();" class="bi bi-file-lock2-fill" style="font-size: 35px;"></i>
                            </div>

                            <div v-if="detail != null && (detail.pay_money == 0 || centre.id == detail.user_id || detail.is_pay == 1)">
                                <div class="swiper swiperImgs mb-2">
                                    <!-- 1. 轮播内容容器 -->
                                    <div class="swiper-wrapper">
                                        <!-- <div  v-show="detail != null && detail.video != null && detail.video != ''"  class="swiper-slide" style="height: calc(100vw * (3/4));">
                                            <div style="position: relative;">
                                                <div class="flex align-items-center justify-content-center">
                                                    <video style="object-fit: cover;" :src="detail == null ? '' :  detail.video"></video>
                                                </div>

                                            </div>
                                        </div> -->
                                        <div v-if="detail != null && detail.video != null && detail.video != ''"
                                            class="swiper-slide videoCenter"
                                            style="width: calc(100%);height: calc(100vw * (3/4));">
                                            <div style="position: relative;width: 100%;height: 100%;" class="">
                                                <div class="flex align-items-center justify-content-center">
                                                    <!-- <img style="width: 100vw;height: calc(100vw * (3/4));"
                                                class="object-fit-cover"
                                                src="https://haodds.oss-cn-shanghai.aliyuncs.com/oss/aliyun/uploads/images/202508201432180ef187919.jpg"
                                                alt="广告图1"> -->
                                                    <video style="max-width: 100%;" id="myVideo" controls
                                                        :src="detail.video"></video>
                                                </div>

                                            </div>
                                        </div>
                                        <!-- 轮播项 1  v-if="detail.image != null && Array.isArray(detail.image)"-->
                                        <div @click="showPreview(detail == null ? [] : detail.image)"
                                            v-for="(item, index) in (detail == null ? [] : detail.image)"
                                            class="swiper-slide imgCenter"
                                            style="width: calc(100%);height: calc(100vw * (3/4));">
                                            <div style="position: relative;">
                                                <div class="flex align-items-center justify-content-center">
                                                    <img class="object-fit-cover" :src="item">
                                                </div>

                                            </div>
                                        </div>

                                    </div>
                                    <div style="position: relative;top: 5px;" class="swiper-pagination"></div>
                                </div>
                            </div>

                            <div v-if="detail != null && (detail.pay_money == 0 || centre.id == detail.user_id || detail.is_pay == 1)" class="font px-2 mb-4 mt-2">
                                <h6 v-if="detail != null && detail.title != null && detail.title != ''">{{ detail.title
                                    }}
                                </h6>
                                <div v-html="detail == null ? '' : detail.content">

                                </div>
                            </div>

                            <div v-if="detail != null && centre != null && (detail.pay_money == 0 || centre.id == detail.user_id || detail.is_pay == 1)"  v-for="(item, index) in (detail == null ? [] : detail.vote)"
                                :key="'detail.vote' + index" class="flex flex-column">

                                <!-- 单选投票 -->
                                <div v-if="item.type == 1" class="card card-body flex flex-column mx-2 my-2"
                                    style="border-radius: 10px;">
                                    <div class="flex align-center">
                                        <span class="font font-weight-bold">投票</span>
                                        <span class="font ml-2">{{ item.title }}</span>
                                    </div>

                                    <ul class="list-group adminuiux-list-group mt-2 border-0"> <!-- active -->
                                        <li @click="addVote(item2.id, item.id, false)"
                                            v-for="(item2, index2) in item.options" :key="'item.options' + index2"
                                            :class="item2.is_select == 1 ? 'active list-group-item  font' : 'list-group-item  font'"
                                            style="border-radius: 10px;">
                                            <div class="flex align-center justify-between">
                                                <div class="flex align-center">
                                                    <i v-if="item2.is_select == 1" class="bi bi-check-lg mr-1"></i>
                                                    <span>{{ item2.name }}</span>
                                                </div>
                                                <span>{{ item2.number }}票</span>
                                            </div>

                                        </li>

                                    </ul>

                                    <div class="flex align-center justify-between mt-2">
                                        <span class="font-sm text-gray">{{ item.allCount }}人参与</span>
                                        <span class="font-sm text-gray">单选</span>
                                    </div>
                                </div>
                                <!-- 多选投票 -->
                                <div v-if="item.type == 2" class="card card-body flex flex-column mx-2 my-2"
                                    style="border-radius: 10px;">
                                    <div class="flex align-center">
                                        <span class="font font-weight-bold">投票</span>
                                        <span class="font ml-2">{{ item.title }}</span>
                                    </div>

                                    <ul class="list-group adminuiux-list-group mt-2 border-0"> <!-- active -->
                                        <li @click="addVote(item2.id, item.id, true)"
                                            v-for="(item2, index2) in item.options" :key="'item.options' + index2"
                                            :class="item2.is_select == 1 ? 'active list-group-item  font' : 'list-group-item  font'"
                                            style="border-radius: 10px;">
                                            <div class="flex align-center justify-between">
                                                <div class="flex align-center">
                                                    <i v-if="item2.is_select == 1" class="bi bi-check-lg mr-1"></i>
                                                    <span>{{ item2.name }}</span>
                                                </div>
                                                <span>{{ item2.number }}票</span>
                                            </div>

                                        </li>

                                    </ul>

                                    <div class="flex align-center justify-between mt-2">
                                        <span class="font-sm text-gray">{{ item.allCount }}票</span>
                                        <span class="font-sm text-gray">多选</span>
                                    </div>
                                </div>
                                <!-- PK投票 -->
                                <p v-if="item.type == 3" class="font ml-2">{{ item.title }}</p>
                                <div v-if="item.type == 3" class="flex align-center justify-between mx-2 my-2">
                                    <div style="width: calc(50% - 10px);background-color: #fff8f6;"
                                        class="font text-gray text-center py-1">
                                        {{ item.options[0].name }}
                                    </div>
                                    <div style="width: calc(50% - 10px);background-color: #f6f9ff;"
                                        class="font text-gray text-center py-1">
                                        {{ item.options[1].name }}
                                    </div>

                                </div>
                                <!-- PK投票 -->
                                <div v-if="item.type == 3" class="flex mx-2">
                                    <div @click="addVote(item.options[0].id, item.id, false)"
                                        class="py-1 text-center font-lg flex align-center justify-center"
                                        :style="item.allCount == 0 ? 'width: calc(50% - 18px);' : `width: calc(${parseInt(item.options[0].number / item.allCount * 100)}% - 18px);`"
                                        style="position: relative;background: linear-gradient(180deg, #E55247 0%, #EF7F6F 100%);min-width: 50px;max-width: calc(100% - 50px - 18px);border-radius: 100px 0 0 100px;margin-right: 18px;">
                                        <!-- <span class="font-lg" style="position: absolute;top: -25px;">{{ item.options[0].name }}</span> -->
                                        <span v-if="checkVote(item.id) == false" class="font-lg"
                                            style="color: white;">支持</span>
                                        <span v-if="checkVote(item.id) == true" class="font-lg" style="color: white;">{{
                                            parseInt(item.options[0].number / item.allCount * 100) }}%</span>

                                        <div
                                            style="transform: skewX(-45deg);width: 32px;height: calc(100%);background: linear-gradient(180deg, #E55247 0%, #EF7F6F 100%);position: absolute;right: -16px;z-index: -1;">

                                        </div>
                                    </div>
                                    <!-- <span class="py-1 font-lg">
                                        PK
                                    </span> -->
                                    <div @click="addVote(item.options[1].id, item.id, false)"
                                        class="py-1 text-center font-lg flex align-center justify-center"
                                        :style="item.allCount == 0 ? 'width: calc(50% - 18px);' : `width: calc(${parseInt(item.options[1].number / item.allCount * 100)}% - 18px);`"
                                        style="position: relative;background: linear-gradient(180deg, #4171E1 0%, #4597EE 100%);min-width: 50px;max-width: calc(100% - 50px - 18px);border-radius: 0 100px 100px 0;margin-left: 18px;">
                                        <!-- <span class="font-lg" style="position: absolute;top: -25px;">{{ item.options[1].name }}</span> -->
                                        <span v-if="checkVote(item.id) == false" class="font-lg"
                                            style="color: white;">支持</span>
                                        <span v-if="checkVote(item.id) == true" class="font-lg" style="color: white;">{{
                                            parseInt(item.options[1].number / item.allCount * 100) }}%</span>

                                        <div
                                            style="transform: skewX(-45deg);width: 32px;height: calc(100%);background: linear-gradient(180deg, #4171E1 0%, #4597EE 100%);position: absolute;left: -16px;z-index: -1;">

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

                            <!-- 结束投票 -->

                            <!-- 类型和位置 -->
                            <div class="mx-2 mb-2">
                                <button @click="jump(`haosns-circle-detail.html?id=${detail.circle.id}`)"
                                    v-if="detail != null && detail.circle != null" type="button"
                                    class="btn btn-secondary btn-sm font-small px-1 py-0 mr-2">
                                    <img style="width: 15px;height: 15px;"
                                        :src="detail == null ? '' : detail.circle.icon" alt="">
                                    {{ detail == null ? '' : detail.circle.name }}
                                </button>
                                <button
                                    @click="jump(`haosns-pos-detail.html?title=${detail.area}&lat=${detail.latitude}lng=${detail.longitude}`)"
                                    v-if="detail != null && detail.area != null && detail.area != ''"
                                    type="button" class="btn btn-secondary btn-sm font-small px-1 py-0">
                                    <i class="bi bi-geo-alt" style="color: #2979ff;"></i>
                                    {{ detail == null ? '' : detail.area }}
                                </button>
                            </div>

                            <span class="font-sm text-muted px-2">
                                {{ detail == null ? '' : detail.create_time }} {{ detail == null ? '' :
                                renamePlace(detail.ip_address) }}
                            </span>

                            <div class="container-fluid">
                                <div class="row border-bottom border-light pb-4">
                                    <div class="col col-4">

                                    </div>
                                    <div class="col col-2">
                                        <div @click="showPayAuthor()" class="flex flex-column align-items-center">
                                            <img style="width: 25px;height: 25px;" src="/template/use/mobile/assets/img/haosns/money2.png"
                                                alt="" srcset="">
                                            <span class="font-smmd mt-1">打赏</span>
                                        </div>

                                    </div>
                                    <div class="col col-2">
                                        <div v-if="hasDun == false" @click="dunArticle()"
                                            class="flex flex-column align-items-center">
                                            <img style="width: 25px;height: 25px;" src="/template/use/mobile/assets/img/haosns/no_dun.png"
                                                alt="" srcset="">
                                            <span class="font-smmd mt-1">蹲贴</span>
                                        </div>
                                        <div v-if="hasDun == true" @click="noDunArticle()"
                                            class="flex flex-column align-items-center">
                                            <img style="width: 25px;height: 25px;" src="/template/use/mobile/assets/img/haosns/has_dun.png"
                                                alt="" srcset="">
                                            <span class="font-smmd mt-1">已蹲</span>
                                        </div>
                                    </div>
                                    <div class="col col-4">

                                    </div>

                                </div>
                            </div>

                            <!-- 评论区 -->
                            <div class="flex justify-between mx-2 my-2">
                                <span class="font">共{{ detail == null ? 0 : detail.comment_num }}条评论</span>
                                <div class="btn-group-sm bg-theme-l-gradient-light rounded-pill px-1" role="group"
                                    aria-label="Basic radio toggle button group">
                                    <input type="radio" class="btn-check" name="btnradio" id="btnradio1" checked>
                                    <label @click="hotComments()" class="btn btn-outline-theme font-smmd"
                                        for="btnradio1">热门</label>

                                    <input type="radio" class="btn-check" name="btnradio" id="btnradio2">
                                    <label @click="upOrder()" class="btn btn-outline-theme font-smmd"
                                        for="btnradio2">正序</label>

                                    <input type="radio" class="btn-check" name="btnradio" id="btnradio3">
                                    <label @click="downOrder()" class="btn btn-outline-theme font-smmd"
                                        for="btnradio3">倒序</label>
                                </div>
                            </div>

                            <div v-for="(item, index) in commentsList" :key="'commentsList' + index"
                                class="flex px-2 py-1"
                                :style="item.comment.indexOf('[打赏 ') != -1 ? `background-color: #fdf9ed;` : ''">
                                <img style="border: 1px solid #e3e3e3;padding: 2px;"
                                    @click="jump(`haosns-user-detail.html?id=${item.user.id}`)"
                                    class="avatar avatar-40 coverimg rounded-circle "
                                    :src="item == null ? '' : item.user.avatar" />
                                <div class="flex flex-1 flex-column ml-1 mr-1">
                                    <div class="flex justify-between">
                                        <div @click="jump(`haosns-user-detail.html?id=${item.user.id}`)"
                                            class="flex align-center">
                                            <span class="font-sm text-muted mr-1">{{ item == null || item.user == null ?
                                                ''
                                                :
                                                item.user.nickname }}</span>
                                            <img style="height: 12px;"
                                                :src="item == null || item.user == null || item.user.userLevel == null ? '' : item.user.userLevel.image"
                                                alt="" srcset="">
                                        </div>

                                        <em class="font-sm text-muted">{{ item == null ? '' : item.floor }}#</em>
                                    </div>

                                    <div class="font ">
                                        <span v-if="item != null && hasImgWithTitleComment(item.content)"
                                            class="font mr-1">
                                            <span v-html="processHtml(item.content)">

                                            </span>
                                        </span>
                                        <span v-else-if="item != null && item.content.indexOf('[emo_') != -1"
                                            class="font mr-1">
                                            <span v-html="parseEmoTextWithImage(item.content)">

                                            </span>
                                        </span>
                                        <span v-else-if="item != null && item.content.indexOf('[打赏 ') != -1"
                                            class="font mr-1">
                                            <span class="rounded-pill"
                                                style="background-color: #fec550;padding: 0px 5px;"><!-- <i class="bi bi-currency-yen"></i>-->
                                                打赏 ￥ {{ processPayContent(item.comment).money }}</span>
                                            <span> {{ processPayContent(item.comment).desc }}</span>
                                        </span>
                                        <span style="word-break: break-all;" v-else-if="item != null">
                                            {{ item.comment }}
                                        </span>
                                        <span v-if="item != null && item.is_first == 1"
                                            style="padding: 1px 2px;border-radius: 2px;position: relative;bottom: 1px;"
                                            class="font-smmd bg-theme-l-gradient-light text-theme-1 ml-1">首评</span>
                                    </div>

                                    <div class="flex flex-column">
                                        <div class="flex justify-between mt-2">
                                            <div class="flex align-center font-small">
                                                <span class="mr-3 text-muted">{{ item == null ? '' : item.create_time }}
                                                    ·
                                                    {{
                                                    item == null ? '' : getProvince(item.ip_address) }}</span>
                                                <span
                                                    @click="showInputBox();talkBackToUser(item.id, item.user.nickname)">回复</span>
                                            </div>

                                            <div class="flex align-center">
                                                <i v-if="item != null && item.is_collect == 0 || item.is_collect == null"
                                                    @click="this.commentsId = item.id;zanParentTalk(1, item)"
                                                    class="bi bi-heart font-lg mr-1"></i>
                                                <i v-if="item != null && item.is_collect == 1"
                                                    @click="this.commentsId = item.id;zanParentTalk(0, item)"
                                                    style="color: #F44336;" class="bi bi-heart-fill font-lg mr-1"></i>
                                                <span class="font">{{ item.collect_num }}</span>
                                            </div>


                                        </div>

                                        <div @click="item.foldUp = true;saveExpandArr(item.id);"
                                            v-if="item != null && item.replyList != null && item.replyList.count > 0"
                                            class="flex align-center">
                                            <div style="width: 35px;height: 1px;background-color: #a2a2a2;"
                                                class="mr-1">
                                            </div>
                                            <span class="font-small mr-1" style="color: #a2a2a2;">展开 {{ item == null ||
                                                item.replyList == null ? 0 : item.replyList.count }} 条回复</span>
                                            <i class="bi bi-chevron-down font-md" style="color: #a2a2a2;"></i>
                                        </div>

                                        <div v-if="item.foldUp != null || expandArr.indexOf(item.id) != -1">
                                            <!-- 子评论 -->
                                            <div v-if="item != null && item.replyList != null && item.replyList.count > 0"
                                                v-for="(item2, index2) in (item == null || item.replyList == null ? [] : item.replyList.list)"
                                                class="flex">
                                                <img @click="jump(`haosns-user-detail.html?id=${item2.user.id}`)"
                                                    class="avatar avatar-20 coverimg rounded-circle mr-2"
                                                    :src="item2 == null || item2.user == null ? '' : item2.user.avatar" />
                                                <div class="flex flex-1 flex-column">
                                                    <div @click="jump(`haosns-user-detail.html?id=${item2.user.id}`)"
                                                        class="flex align-center">

                                                        <span class="font-sm text-muted mr-1">{{ item2 == null ||
                                                            item2.user
                                                            ==
                                                            null ? '' : item2.user.nickname }}</span>
                                                        <img style="height: 12px;"
                                                            :src="item2 == null || item2.user == null || item2.user.userLevel == null ? '' : item2.user.userLevel.image"
                                                            alt="" srcset="">

                                                        <div v-if="item2.replyUser != null" class="flex align-center">
                                                            <span
                                                                v-if="centre != null && item2 != null && item2.user != null && centre.id == item2.user.id"
                                                                style="padding: 1px 2px;border-radius: 2px;position: relative;bottom: 1px;"
                                                                class="font-smaller bg-theme-l-gradient-light text-theme-1 ml-1">我</span>
                                                            <span
                                                                v-if="centre != null && item2 != null && item2.user != null && centre.id != item2.user.id"
                                                                style="padding: 1px 2px;border-radius: 2px;position: relative;bottom: 1px;"
                                                                class="font-smaller bg-theme-l-gradient-light text-theme-1 ml-1">{{
                                                                item2.user.nickname }}</span>

                                                            <i class="bi bi-caret-right-fill"
                                                                style="font-size: 10px;"></i>

                                                            <span
                                                                v-if="centre != null && item2 != null && item2.replyUser != null && centre.id == item2.replyUser.id"
                                                                style="padding: 1px 2px;border-radius: 2px;position: relative;bottom: 1px;"
                                                                class="font-smaller bg-theme-l-gradient-light text-theme-1 ml-1">我</span>
                                                            <span
                                                                v-if="centre != null && item2 != null && item2.replyUser != null && centre.id != item2.replyUser.id"
                                                                style="padding: 1px 2px;border-radius: 2px;position: relative;bottom: 1px;"
                                                                class="font-smaller bg-theme-l-gradient-light text-theme-1 ml-1">{{
                                                                item2.replyUser.nickname }}</span>

                                                            <!-- <span
                                                            style="padding: 1px 2px;border-radius: 2px;position: relative;bottom: 1px;"
                                                            class="font-smaller bg-theme-l-gradient-light text-theme-1 ml-1">{{ item2.replyUser.nickname }}</span> -->
                                                        </div>
                                                    </div>


                                                    <div class="font no-p-margin">
                                                        <span v-if="item2 != null && hasImgWithTitleComment(item2.content)"
                                                            class="font mr-1">
                                                            <span v-html="processHtml(item2.content)">
                
                                                            </span>
                                                        </span>
                                                        <span v-else-if="item2 != null && item2.content.indexOf('[emo_') != -1"
                                                            class="font mr-1">
                                                            <span v-html="parseEmoTextWithImage(item2.content)">
                
                                                            </span>
                                                        </span>
                                                        <span v-else-if="item2 != null && item2.content.indexOf('[打赏 ') != -1"
                                                            class="font mr-1">
                                                            <span class="rounded-pill"
                                                                style="background-color: #fec550;padding: 0px 5px;"><!-- <i class="bi bi-currency-yen"></i>-->
                                                                打赏 ￥ {{ processPayContent(item2.comment).money }}</span>
                                                            <span> {{ processPayContent(item2.comment).desc }}</span>
                                                        </span>
                                                        <span style="word-break: break-all;" v-else-if="item2 != null">
                                                            {{ item2.comment }}
                                                        </span>
                                                        <span v-if="item2 != null && item2.is_first == 1"
                                                            style="padding: 1px 2px;border-radius: 2px;position: relative;bottom: 1px;"
                                                            class="font-smmd bg-theme-l-gradient-light text-theme-1 ml-1">首评</span>
                                                    </div>

                                                    <!-- <div style="word-break: break-all;" class="font mt-1">
                                                        {{ item2.comment }}
                                                    </div> -->

                                                    <div class="flex justify-between mt-2">
                                                        <div class="flex flex-column align-start">
                                                            <div class="flex align-center font-small">
                                                                <span class="mr-3 text-muted">{{ item2.create_time }} ·
                                                                    {{
                                                                    getProvince(item2.ip_address) }}</span>
                                                                <span
                                                                    @click="showInputBox();talkBackToSubUser(item2.pid, item2.user.nickname, item2.user.id)">回复</span>
                                                            </div>
                                                            <span
                                                                v-if="centre != null && item2 != null && item2.user != null && centre.id == item2.user.id"
                                                                style="background-color: #e5e7e9;padding: 0 2px;border-radius: 2px;"
                                                                class="font-smaller text-theme-1">作者回复</span>
                                                        </div>


                                                        <div class="flex align-center">
                                                            <i v-if="item2 != null && item2.is_collect == 0"
                                                                @click="this.commentsId = item2.id;zanParentTalk(1, item2)"
                                                                class="bi bi-heart font-lg mr-1"></i>
                                                            <i v-if="item2 != null && item2.is_collect == 1"
                                                                @click="this.commentsId = item2.id;zanParentTalk(0, item2)"
                                                                style="color: #F44336;"
                                                                class="bi bi-heart-fill font-lg mr-1"></i>
                                                            <span class="font">{{ item2 == null ? '' : item2.collect_num
                                                                }}</span>
                                                        </div>


                                                    </div>



                                                </div>


                                            </div>
                                            <div @click="item.foldUp = null;removeExpandArr(item.id)"
                                                v-if="item != null && item.replyList != null && item.replyList.count > 0"
                                                class="flex align-center text-muted mt-2 ml-4">
                                                <span class="font-small mr-1" style="color: #a2a2a2;">收起</span>
                                                <i class="bi bi-chevron-up font-md" style="color: #a2a2a2;"></i>
                                            </div>
                                        </div>

                                    </div>

                                </div>
                            </div>
                            <div style="height: 47px;width: 100%;" class="pb-ios">

                            </div>
                            <div class="flex px-2 py-1 bg-r-gradient fixed-bottom pb-ios">
                                <button @click="showInputBox();directTalkBack()" type="button"
                                    class="btn btn-light font-small text-muted py-2 flex-1 text-left ">
                                    <!-- <i class="bi bi-pencil" style="font-size: 10px;"></i> -->
                                    {{ replyPlaceholder }}
                                </button>
                                <div class="flex flex-1">
                                    <div class="flex flex-column flex-1 align-center justify-center">
                                        <i v-if="detail != null && detail.is_zan == 0" @click="doZan(detail, 1)"
                                            style="height: 15px;" class="bi bi-heart font-lger"></i>
                                        <i v-else-if="detail != null && detail.is_zan == 1" @click="doZan(detail, 0)"
                                            style="height: 15px;color: red;" class="bi bi-heart-fill font-lger"></i>
                                        <i v-else style="height: 15px;" class="bi bi-heart font-lger"></i>

                                        <span class="font-sm mt-1">{{ detail == null ? 0 : detail.zan_num }}</span>
                                    </div>
                                    <div class="flex flex-column flex-1 align-center justify-center">
                                        <i v-if="detail != null && detail.is_collect == 0" @click="doCollect(detail, 1)"
                                            style="height: 15px;" class="bi bi-star font-lger"></i>
                                        <i v-else-if="detail != null && detail.is_collect == 1"
                                            @click="doCollect(detail, 0)" style="height: 15px;color: greenyellow;"
                                            class="bi bi-star-fill font-lger"></i>
                                        <i v-else style="height: 15px;" class="bi bi-star font-lger"></i>

                                        <span class="font-sm mt-1">{{ detail == null ? 0 : detail.collect_num }}</span>
                                    </div>
                                    <div class="flex flex-column flex-1 align-center justify-center">
                                        <i style="height: 15px;" class="bi bi-chat-dots font-lger"></i>
                                        <span class="font-sm mt-1">{{ detail == null ? 0 : detail.comment_num }}</span>
                                    </div>

                                    <!-- <div class="flex flex-column flex-1 align-center justify-center">
                                <i style="height: 15px;" class="bi bi-share font-lger"></i>
                                
                                <span class="font-sm mt-1">5</span>
                            </div> -->

                                </div>

                            </div>

                            <div class="offcanvas offcanvas-bottom myOffCanvas" tabindex="-1" id="bottomInput"
                                aria-labelledby="offcanvasBottomLabel">

                                <div class="offcanvas-body myOffCanvasBody pb-ios">
                                    <!-- 上传图片区域 -->
                                    <!-- <div style="width: 100%;overflow-x: scroll;" class="flex mx-2" v-if="uploadedImgs.length > 0">
                                <div v-for="(item, index) in uploadedImgs" :key="'uploadedImgs' + index" class="" style="position: relative;">
                                    <img style="width: 80px;margin-right: 10px;" :src="item" alt="">
                                    <i style="color: red;position: absolute;right: 10px;top: -5px;" class="bi bi-x-circle-fill"></i>
                                </div>
                            </div> -->
                                    <div v-show="showImgUpload" id="mydropzone" class="dropzone"></div>

                                    <div style="position: relative;" class="p-1">
                                        <textarea id="textInput" @input="getCursorPosition()" v-model="talkText"
                                            :placeholder="replyPlaceholder" @click="hideInputMenu();hideEmoji();"
                                            class="form-control myTextarea bg-r-gradient font"
                                            :rows="nowTextareaRows"></textarea>
                                        <i @click="nowTextareaRows = (nowTextareaRows == 4 ? 8 : 4)"
                                            style="position: absolute;right: 4px;top: 4px;"
                                            class="bi bi-arrows-angle-expand font-sm"></i>
                                    </div>
                                    <div class="flex align-center justify-between px-2 py-1 mt-1">
                                        <div class="flex align-center">
                                            <img @click="showImgUpload = !showImgUpload;hideInputMenu();hideEmoji();"
                                                style="width: 24px;height: 24px;" src="/template/use/mobile/assets/img/haosns/photo.svg"
                                                alt="" srcset="" class="mr-3" />
                                            <img style="width: 24px;height: 24px;" src="/template/use/mobile/assets/img/haosns/at.svg" alt=""
                                                srcset="" class="mr-3" />
                                            <img @click="showInputMenuVal = false;showEmojiVal = !showEmojiVal"
                                                style="width: 24px;height: 24px;" src="/template/use/mobile/assets/img/haosns/emoji.svg"
                                                alt="" srcset="" class="mr-3" />
                                            <img @click="showEmojiVal = false;showInputMenuVal = !showInputMenuVal"
                                                style="width: 24px;height: 24px;" src="/template/use/mobile/assets/img/haosns/add.svg" alt=""
                                                srcset="" class="mr-3" />

                                        </div>

                                        <button @click="talkToArticle()" type="button"
                                            class="btn btn-theme btn-sm">发送</button>
                                    </div>
                                    <div v-if="showInputMenuVal == true" style="height: 236px;"
                                        class="container-fluid mt-2">
                                        <div class="row mt-5">
                                            <div @click="showImgUpload = !showImgUpload;hideInputMenu();hideEmoji();"
                                                class="col-3">
                                                <div class="w-full flex flex-column align-center justify-center">
                                                    <div style="width: 50px;height: 50px;border-radius: 5px;"
                                                        class="flex justify-center align-center myMenuItem">
                                                        <i class="bi bi-camera font-lger"
                                                            style="font-size: calc(var(--haosns-font-scale, 1) * 24px);"></i>
                                                    </div>
                                                    <span class="font mt-1">拍照</span>
                                                </div>
                                            </div>
                                            <div class="col-3">
                                                <div class="w-full flex flex-column align-center justify-center">
                                                    <div style="width: 50px;height: 50px;border-radius: 5px;"
                                                        class="flex justify-center align-center myMenuItem">
                                                        <i class="bi bi-journal-text"
                                                            style="font-size: calc(var(--haosns-font-scale, 1) * 24px);"></i>
                                                    </div>
                                                    <span class="font mt-1">笔记</span>
                                                </div>
                                            </div>
                                            <div class="col-3">

                                            </div>
                                            <div class="col-3">

                                            </div>

                                        </div>
                                    </div>

                                    <!-- 表情包 -->
                                    <div v-show="showEmojiVal == true" 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 class="flex align-center flex-wrap">
                                <div style="width: calc( 100vw / 4);" class="flex flex-column align-center justify-center">
                                    <div style="width: 50px;height: 50px;background-color: #f6f6f6;border-radius: 5px;" class="flex justify-center align-center">
                                        <i class="bi bi-camera font-lger"></i>
                                    </div>
                                </div>
                                
                            </div> -->
                                </div>
                            </div>



                            <input type="file" id="fileInput" style="display: none;" multiple>



                            <!-- 给某人打赏 -->
                            <div class="modal fade" id="payAuthor">
                                <div class="modal-dialog modal-dialog-centered">
                                    <div class="modal-content mx-3" style="border-radius: 10px;">

                                        <div @click="cancelFocus();" class="modal-body" style="height: 340px;">
                                            <div style="position: relative;top: -42px;" class="flex flex-column">
                                                <div class="flex flex-column align-center justify-center">
                                                    <div class="">
                                                        <img class="avatar avatar-50 coverimg rounded-circle"
                                                            :src="detail == null ? '' : detail.user.avatar" />
                                                    </div>
                                                    <span class="font my-2">给{{ detail == null ? '' :
                                                        detail.user.nickname }}打赏</span>
                                                </div>

                                                <div
                                                    style="display: grid;grid-template-columns: repeat(3, 1fr);grid-template-rows: repeat(2, 1fr);">
                                                    <div @click.stop="payItemIndex = index;cancelFocus()"
                                                        v-for="(item, index) in payList" :key="'payList' + index"
                                                        class="flex align-center justify-center" style="height: 55px;">
                                                        <div :style="payItemIndex == index ? 'border: 1px solid var(--adminuiux-theme-1);color: var(--adminuiux-theme-1);' : 'border: 1px solid #dee2e6;'"
                                                            style="width: 90%;height: 80%;border-radius: 5px;position: relative;"
                                                            class="flex align-center justify-center">
                                                            <span class="font-lg"
                                                                style="font-size: calc(var(--haosns-font-scale, 1) * 20px);">{{
                                                                item.money }}</span>
                                                            <span class="font-sm"
                                                                style="position: relative;top: 2px;">元</span>
                                                        </div>

                                                    </div>
                                                    <div @click.stop="payItemIndex = payList.length;doFocus()"
                                                        class="flex align-center justify-center" style="height: 55px;">
                                                        <div :style="payItemIndex == payList.length ? 'border: 1px solid var(--adminuiux-theme-1);color: var(--adminuiux-theme-1);' : 'border: 1px solid #dee2e6;'"
                                                            style="width: 90%;height: 80%;border-radius: 5px;position: relative;"
                                                            class="flex align-center justify-center">
                                                            <span
                                                                v-show="payItemIndex != payList.length && payMoney == ''"
                                                                class="font"
                                                                style="font-size: calc(var(--haosns-font-scale, 1) * 16px);">自定义</span>
                                                            <div v-show="payMoney != '' || payItemIndex == payList.length"
                                                                class="flex align-center">
                                                                <input v-model="payMoney" type="text"
                                                                    class="form-control text-center px-0 text-right"
                                                                    style="border: none;color: var(--adminuiux-theme-1);width: 40px;"
                                                                    name="" id="payInput">
                                                                <span class="font-sm"
                                                                    style="position: relative;top: 2px;">元</span>
                                                            </div>

                                                        </div>

                                                    </div>
                                                </div>

                                                <div class="flex align-center"
                                                    style="position: relative;margin: 10px 5px;">
                                                    <span class="font" style="position: absolute;left: 10px;">
                                                        留言:
                                                    </span>
                                                    <input v-model="payAuthorMessage" type="text" class="form-control"
                                                        style="border-radius: 10px;padding-left: 50px;">
                                                </div>

                                                <span class="text-center mt-2">
                                                    <span class="font-lger">
                                                        <span style="color: red;">￥{{ getNowPay() }}</span>
                                                        <span>，使用金币支付</span>
                                                    </span>
                                                </span>


                                                <button @click="doPayAuthor()" type="button"
                                                    class="btn btn-theme mt-3">支付</button>
                                            </div>

                                            <div class="text-center">
                                                <i class="bi bi-x-circle" @click="hidePayAuthor();"
                                                    style="font-size: 30px;color: white;"></i>
                                            </div>


                                        </div>

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


                            <!-- 更多功能 -->
                            <div class="offcanvas offcanvas-bottom" style="height: 260px;" id="shareBox">

                                <div class="offcanvas-body">
                                    <div class="flex flex-column">
                                        <div class="flex align-center justify-center mt-2">
                                            <span class="font-lg">分享至</span>
                                            <i @click="hideShareBox()" class="bi bi-x-lg font-lg"
                                                style="position: absolute;right: 12px;"></i>
                                        </div>
                                        <div class="noScrollBar mt-3 flex align-center"
                                            style="width: 100%;white-space: nowrap;overflow-x: scroll;">
                                            <div v-for="(item, index) in nowChatList" :key="'nowChatList' + index"
                                                class="flex-column align-center justify-center"
                                                style="display: inline-flex;margin: 0 10px;">
                                                <!-- https://haodds-1251208851.cos.ap-shanghai.myqcloud.com/oss/qcloud/uploads/images/20250616203905da1814684.png -->

                                                <div @click="nowShareUserID = item.toUser.id; nowShareUserName = item.toUser.nickname;showConfimShare();"
                                                    v-if="item.type == 'private_chat'"> <!-- 私聊 -->
                                                    <div class="flex align-center justify-center">
                                                        <img class="avatar avatar-40 coverimg rounded-circle "
                                                            :src="item.toUser.avatar" />
                                                    </div>
                                                    <p style="display: inline-block;width: 50px;overflow: hidden;text-overflow: ellipsis;"
                                                        class="font-small my-1 text-center">
                                                        {{ item.toUser.nickname }}
                                                    </p>
                                                </div>

                                                <div @click="nowShareGroupID = item.group.id; nowShareGroupName = item.group.name;showConfimGroupShare();"
                                                    v-if="item.type == 'group_chat'"> <!-- 群聊 -->
                                                    <div class="flex align-center justify-center">
                                                        <img v-if="item.group.image != null && item.group.image != ''"
                                                            class="avatar avatar-40 coverimg rounded-circle"
                                                            :src="item.group == null ? '' : item.group.image" alt="" />
                                                        <div v-else-if="item.groupMembers.length >= 5"
                                                            class="flex flex-wrap justify-center align-center align-content-center"
                                                            style="width: 40px;height: 40px;background-color: #ececec;border-radius: 4px;overflow: hidden;">
                                                            <div v-for="(item2, index2) in item.groupMembers.slice(0, 9)"
                                                                :key="'item.groupMembers' + index2"
                                                                class="flex justify-center align-center"
                                                                style="width: calc(100% / 3);height: calc(100% / 3);">
                                                                <img style="width: calc(100% - 1px);height: calc(100% - 1px);border-radius: 1px;"
                                                                    :src="item2.user.avatar" alt="">
                                                            </div>
                                                        </div>
                                                        <div v-else-if="item.groupMembers.length <= 4"
                                                            class="flex flex-wrap justify-center align-center align-content-center"
                                                            style="width: 40px;height: 40px;background-color: #ececec;border-radius: 4px;overflow: hidden;">
                                                            <div v-for="(item2, index2) in item.groupMembers"
                                                                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.user.avatar" alt="">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <p style="display: inline-block;width: 50px;overflow: hidden;text-overflow: ellipsis;"
                                                        class="font-small my-1 text-center">
                                                        {{ item.group.name }}
                                                    </p>
                                                </div>

                                            </div>
                                        </div>


                                        <div class="noScrollBar mt-3 flex align-center"
                                            style="width: 100%;white-space: nowrap;overflow-x: scroll;">
                                            <div v-if="" @click="jump(`haosns-send-page-wx.html?articleID=${this.id}`)"
                                                class="flex-column align-center justify-center"
                                                style="display: inline-flex;margin: 0 10px;">

                                                <div class="flex align-center justify-center"
                                                    style="background-color: #55ff00;border-radius: 50%;width: 40px;height: 40px;">
                                                    <i class="bi bi-pencil-fill text-white"></i>
                                                </div>
                                                <p style="display: inline-block;width: 50px;overflow: hidden;text-overflow: ellipsis;"
                                                    class="font-small my-1 text-center">
                                                    编辑
                                                </p>
                                            </div>

                                            <div class="flex-column align-center justify-center"
                                                style="display: inline-flex;margin: 0 10px;">

                                                <div @click="setArticleShow()"
                                                    v-if="detail != null && detail.is_show == 1"
                                                    class="flex align-center justify-center"
                                                    style="background-color: #95a5a6;border-radius: 50%;width: 40px;height: 40px;">
                                                    <i class="bi bi-caret-down-fill text-white"></i>
                                                </div>
                                                <p v-if="detail != null && detail.is_show == 1"
                                                    style="display: inline-block;width: 50px;overflow: hidden;text-overflow: ellipsis;"
                                                    class="font-small my-1 text-center">
                                                    下架
                                                </p>

                                                <div @click="setArticleShow()"
                                                    v-if="detail != null && detail.is_show == 0"
                                                    class="flex align-center justify-center"
                                                    style="background-color: #95a5a6;border-radius: 50%;width: 40px;height: 40px;">
                                                    <i class="bi bi-caret-up-fill text-white"></i>
                                                </div>
                                                <p v-if="detail != null && detail.is_show == 0"
                                                    style="display: inline-block;width: 50px;overflow: hidden;text-overflow: ellipsis;"
                                                    class="font-small my-1 text-center">
                                                    上架
                                                </p>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <!-- 更多功能 -->


                            <!-- 确认分享弹窗 -->
                            <div class="modal fade" id="confimShare">
                                <div class="modal-dialog modal-dialog-centered">
                                    <div class="modal-content" style="border-radius: 10px;">
                                        <div class="modal-header">
                                            <p class="modal-title h5" id="deleteUserConfimLabel">提示</p>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            真的要分享到 {{ nowShareUserName }} 吗？
                                        </div>
                                        <div class="modal-footer">
                                            <button @click="sendPrivateArticle();hideConfimShare();" type="button"
                                                class="btn btn-theme">确认</button>
                                            <button type="button" class="btn btn-secondary"
                                                data-bs-dismiss="modal">取消</button>

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

                            <div class="modal fade" id="confimGroupShare">
                                <div class="modal-dialog modal-dialog-centered">
                                    <div class="modal-content" style="border-radius: 10px;">
                                        <div class="modal-header">
                                            <p class="modal-title h5" id="deleteUserConfimLabel">提示</p>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            真的要分享到 {{ nowShareGroupName }} 吗？
                                        </div>
                                        <div class="modal-footer">
                                            <button @click="sendGroupArticle();hideConfimGroupShare();" type="button"
                                                class="btn btn-theme">确认</button>
                                            <button type="button" class="btn btn-secondary"
                                                data-bs-dismiss="modal">取消</button>

                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- 确认分享弹窗 -->


                            <!-- 付费内容详情 -->
                            <div class="modal fade active show" id="showPayInfo" >
                                <div class="modal-dialog modal-dialog-centered">
                                    <div class="modal-content" style="border-radius: 10px;">
                                        
                                        <div class="modal-body">
                                            <div class="flex flex-column">
                                                <div class="flex align-center justify-center">
                                                    <span class="font-lg">付费内容</span>
                                                    <i @click="hideShowPayInfo()" style="position: absolute;right: 10px;" class="bi bi-x-lg"></i>
                                                </div>

                                                <div class="my-2">
                                                    <div class="flex align-center mb-1">
                                                        <span class="font-lg">价格: </span>
                                                        <span class="font-lg text-gray ml-2">{{ detail == null ? 0 : detail.pay_money }}金币</span>
                                                    </div>
    
                                                    <div class="flex align-center mb-1">
                                                        <span class="font-lg">隐藏图片: </span>
                                                        <span class="font-lg text-gray ml-2">{{ detail == null ? 0 : detail.image != null && Array.isArray(detail.image) ? detail.image.length : 0 }}</span>
                                                    </div>
                                                    <div class="flex align-center mb-1">
                                                        <span class="font-lg">隐藏视频: </span>
                                                        <span class="font-lg text-gray ml-2">{{ detail == null ? 0 : detail.video == null || detail.video == '' ? 0 : 1 }}</span>
                                                    </div>
                                                    <!-- <div class="flex align-center mb-1">
                                                        <span class="font-lg">隐藏附件: </span>
                                                        <span class="font-lg text-gray ml-2">1</span>
                                                    </div> -->
                                                </div>
                                                
                                                
                                                <button @click="doPay()" type="button" class="btn btn-theme w-50 mx-auto">立即购买</button>
                                            </div>
                                            
                                        </div>
                                        
                                    </div>
                                </div>
                            </div>
                            <!-- 付费内容详情 -->

                    </div>
                    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.5.21/vue.global.min.js"></script> -->
                    <script>
                        document.addEventListener('DOMContentLoaded', () => {
                            const app = Vue.createApp({
                                data() {
                                    return {
                                        bottomInput: null,
                                        myTextarea: null,
                                        nowTextareaRows: 4, // 当前回复编辑框高度
                                        showInputMenuVal: false, // 是否展示输入框底部菜单
                                        cutEmojiArr: [], // 分割后的表情包数组
                                        showEmojiVal: false, // 是否显示表情包
                                        uploader: null, // 上传控件
                                        files: [], // 文件数组
                                        uploadedImgs: [],
                                        mydropzone: null, // 上传组件
                                        showImgUpload: false, // 是否显示文件上传
                                        id: -1, // 当前文章id
                                        detail: null, // 文章详情
                                        commentsList: null,// 圈子评论列表
                                        commentPageIndex: -1, // 当前评论页面索引
                                        commentSort: 'hot', // 评论排序
                                        commentsId: -1, // 当前评论id
                                        centre: null, // 用户信息
                                        talkText: '', // 聊天回复内容
                                        myMsgUserIds: '', // at用户id
                                        myMsgUserIdsArr: [], // at用户id数组
                                        pid: -1, // 父id
                                        reply_user_id: -1, // 回复用户id
                                        replyPlaceholder: '✏️ 说点什么...', // 回复的提示
                                        expandArr: [], // 展开的子评论数组
                                        imageArrHtml: '', // 获取的图片数组HTML代码
                                        imageArr: [], // 当前上传的图片

                                        nowInputPos: 0, // 当前光标位置
                                        nowEmojiIndex: -1, // 当前表情包索引
                                        nowEmojiArray: null, // 当前表情包对象

                                        nowAllVoteCount: 0, // 当前投票总人数

                                        payAuthor: null, // 打赏弹窗

                                        payList: [ // 打赏功能数组
                                            {
                                                id: 1,
                                                money: 1
                                            },
                                            {
                                                id: 2,
                                                money: 5
                                            },
                                            {
                                                id: 3,
                                                money: 10
                                            },
                                            {
                                                id: 4,
                                                money: 20
                                            },
                                            {
                                                id: 5,
                                                money: 50
                                            },

                                        ],
                                        payItemIndex: 0, // 当前选择的打赏索引
                                        payMoney: '', // 当前打赏金额
                                        payAuthorMessage: '', // 当前打赏作者信息
                                        hasDun: false, // 当前蹲贴状态
                                        nowChatListPage: 1, // 当前聊天用户列表页面页码
                                        nowChatList: [], // 当前聊天用户聊天对象数组

                                        shareBox: null, // 分享框

                                        confimShare: null, // 确认分享弹窗
                                        nowShareUserID: -1, // 当前分享用户id
                                        nowShareUserName: '', // 当前分享用户昵称
                                        nowShareGroupID: -1, // 当前分享群聊id
                                        nowShareGroupName: '', // 当前分享群聊昵称

                                        confimGroupShare: null, // 确认群聊分享

                                        isUserLogin: false, // 用户是否已经登录
                                        showPayInfo: null, // 显示支付详情
                                    }
                                },
                                methods: {
                                    doPay(){ // 执行支付
                                        // articleArticleOrderUrl post
                                        axios.post(api.articleArticleOrderUrl, {
                                            "article_id": this.id,
                                            "terminal": api.terminal
                                        })
                                            .then((res) => {
                                                // 处理成功情况
                                                if (res.data.code == 1) {
                                                    var orderID = res.data.data.order_id;
                                                    var from = res.data.data.from;
                                                    loc.jump(`haosns-pay.html?id=${orderID}&from=${from}`)
                                                } else {

                                                }


                                            })


                                    },
                                    hideShowPayInfo() { // 关闭付费内容弹窗
                                        if (this.showPayInfo != null) {
                                            this.showPayInfo.hide();
                                        }

                                    },
                                    openShowPayInfo() { // 打开付费内容弹窗
                                        if (this.showPayInfo != null) {
                                            this.showPayInfo.show();
                                        }

                                    },
                                    initShowPayInfo() { // 初始化付费内容弹窗
                                        var showPayInfoEle = document.getElementById('showPayInfo');
                                        this.showPayInfo = new bootstrap.Modal(showPayInfoEle);
                                    },
                                    getUserLoginStatus() { // 获取用户登录状态
                                        // userCentreUrl
                                        axios.get(api.userCentreUrl, {
                                            params: {

                                            }

                                        })
                                            .then((res) => {
                                                // 处理成功情况
                                                if (res.data.code == 1) {
                                                    this.isUserLogin = true;
                                                } else {
                                                    this.isUserLogin = false;
                                                    // showToast(res.data.msg, 3000, 'error');
                                                }


                                            })

                                    },
                                    setArticleShow() { // 设置上下架状态
                                        if (this.detail.is_show == 0) { // 上架
                                            // articleShowUrl
                                            axios.post(api.articleShowUrl, {
                                                "id": this.id,
                                                "is_show": 1,
                                                "terminal": api.terminal
                                            })
                                                .then((res) => {
                                                    // 处理成功情况
                                                    if (res.data.code == 1) {
                                                        showToast('上架成功!', 3000, 'success');
                                                        this.getArticleDetail();
                                                    } else {

                                                    }


                                                })
                                        }
                                        if (this.detail.is_show == 1) { // 下架
                                            // articleShowUrl
                                            axios.post(api.articleShowUrl, {
                                                "id": this.id,
                                                "is_show": 0,
                                                "terminal": api.terminal
                                            })
                                                .then((res) => {
                                                    // 处理成功情况
                                                    if (res.data.code == 1) {
                                                        showToast('下架成功!', 3000, 'success');
                                                        this.getArticleDetail();
                                                    } else {

                                                    }


                                                })
                                        }

                                    },
                                    sendGroupArticle() { // 发送群聊文章
                                        var obj = {
                                            "group_id": this.nowShareGroupID,
                                            "msg": this.id,
                                            "msg_type": "article",
                                            "terminal": api.terminal
                                        }

                                        // chatSendGroupMessageUrl
                                        axios.post(api.chatSendGroupMessageUrl, obj)
                                            .then((res) => {
                                                // 处理成功情况
                                                if (res.data.code == 1) {
                                                    showToast('分享成功!', 3000, 'success');
                                                    this.hideShareBox();
                                                } else {

                                                }


                                            })

                                    },
                                    sendPrivateArticle() { // 发送文章消息给用户
                                        var obj = {
                                            "to_id": this.nowShareUserID,
                                            "msg": this.id,
                                            "msg_type": "article",
                                            "type": "private_chat",
                                            "from_id": this.centre.id,
                                            "terminal": api.terminal
                                        }
                                        // chatSendPrivateMessageUrl 发送私聊消息
                                        axios.post(api.chatSendPrivateMessageUrl, obj)
                                            .then((res) => {
                                                // 处理成功情况
                                                if (res.data.code == 1) {
                                                    showToast('分享成功!', 3000, 'success');
                                                    this.hideShareBox();
                                                } else {

                                                }


                                            })
                                    },
                                    initConfimGroupShare() { // 初始化确认分享弹窗
                                        var confimGroupShareEle = document.getElementById('confimGroupShare');
                                        this.confimGroupShare = new bootstrap.Modal(confimGroupShareEle);
                                    },
                                    showConfimGroupShare() { // 显示确认分享弹窗
                                        if (this.confimGroupShare != null) {
                                            this.confimGroupShare.show();
                                        }
                                    },
                                    hideConfimGroupShare() { // 隐藏确认分享弹窗
                                        if (this.confimGroupShare != null) {
                                            this.confimGroupShare.hide();
                                        }
                                    },
                                    initConfimShare() { // 初始化确认分享弹窗
                                        var confimShareEle = document.getElementById('confimShare');
                                        this.confimShare = new bootstrap.Modal(confimShareEle);
                                    },
                                    showConfimShare() { // 显示确认分享弹窗
                                        if (this.confimShare != null) {
                                            this.confimShare.show();
                                        }
                                    },
                                    hideConfimShare() { // 隐藏确认分享弹窗
                                        if (this.confimShare != null) {
                                            this.confimShare.hide();
                                        }
                                    },
                                    initShareBox() { // 初始化分享弹窗
                                        var shareBoxEle = document.getElementById('shareBox');
                                        this.shareBox = new bootstrap.Offcanvas(shareBoxEle);
                                    },
                                    showShareBox() { // 显示分享弹窗
                                        if (this.shareBox != null) {
                                            this.shareBox.show();
                                        }
                                    },
                                    hideShareBox() { // 隐藏分享弹窗
                                        if (this.shareBox != null) {
                                            this.shareBox.hide();
                                        }
                                    },
                                    getChatListFirst() { // 获取聊天用户列表
                                        this.nowChatListPage = 1;
                                        this.nowChatList = [];

                                        // chatChatListUrl
                                        axios.get(api.chatChatListUrl, {
                                            params: {
                                                page_no: this.nowChatListPage,
                                                page_size: 16
                                            }

                                        })
                                            .then((res) => {
                                                // 处理成功情况
                                                if (res.data.code == 1) {
                                                    for (var i = 0; i < res.data.data.data.length; i++) {
                                                        this.nowChatList.push(res.data.data.data[i]);
                                                    }
                                                } else {
                                                    // showToast(res.data.msg, 3000, 'error');
                                                }


                                            })
                                    },
                                    dunArticle() { // 文章蹲贴，当有提醒时通过微信提醒
                                        // articleDunUrl
                                        axios.get(api.articleDunUrl, {
                                            params: {
                                                id: this.id
                                            }

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

                                                }
                                            })
                                    },
                                    noDunArticle() { // 文章取消蹲贴，当有提醒时不会通过微信提醒
                                        // articleDunUrl
                                        axios.get(api.articleDunUrl, {
                                            params: {
                                                id: this.id,
                                                del: 1
                                            }

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

                                                }
                                            })
                                    },
                                    /**
                                     * html提取文字
                                     * @param {Object} htmlString
                                     */
                                    extractTextFromHTML(htmlString) {
                                        if (!htmlString) return '';

                                        // 处理换行标签（保留换行格式）
                                        let text = htmlString.replace(/<br\s*\/?>/gi, '\n');

                                        // 移除所有 HTML 标签（包括属性）
                                        text = text.replace(/<[^>]+>/g, '');

                                        // 处理 HTML 实体（如 &nbsp;）
                                        text = text
                                            .replace(/&nbsp;/gi, ' ') // 空格
                                            .replace(/&lt;/gi, '<') // 小于号
                                            .replace(/&gt;/gi, '>') // 大于号
                                            .replace(/&amp;/gi, '&') // &符号
                                            .replace(/&quot;/gi, '"') // 双引号
                                            .replace(/&apos;/gi, "'"); // 单引号

                                        // 清理多余空格和换行
                                        text = text
                                            .replace(/\s+/g, ' ') // 合并连续空格
                                            .replace(/\n\s+/g, '\n') // 清理行首空格
                                            .replace(/\s+\n/g, '\n') // 清理行尾空格
                                            .replace(/^\s+|\s+$/g, '') // 去除首尾空格
                                            .replace(/\n{3,}/g, '\n\n'); // 限制最多两个连续换行

                                        return text.trim();
                                    },
                                    processPayContent(text) {
                                        // 使用正则匹配 [定位 XXX] 和后面的内容
                                        var text = this.extractTextFromHTML(text);
                                        const match = text.match(/\[打赏 (.+?)\](.*)$/);
                                        var obj = {
                                            money: '',
                                            desc: ''
                                        }
                                        if (match) {
                                            const moneys = match[1]; // "人民大酒店"
                                            const comment = match[2]; // "太优质了"

                                            obj.money = moneys;
                                            obj.desc = comment;
                                            // 输出: "人民大酒店" "太优质了"
                                        } else {
                                            console.log("格式不匹配");
                                        }

                                        return obj;
                                    },
                                    doPayAuthor() { // 执行打赏操作
                                        // articleSubmitRewardUrl
                                        axios.post(api.articleSubmitRewardUrl, {
                                            "amount": this.getNowPay(),
                                            "article_id": this.id,
                                            "message": this.payAuthorMessage,
                                            "terminal": api.terminal
                                        })
                                            .then((res) => {
                                                // 处理成功情况
                                                if (res.data.code == 1) {
                                                    this.hidePayAuthor();
                                                    loc.jump(`haosns-pay.html?id=${res.data.data.order_id}&from=article_reward&article_id=${this.id}&msg=${this.payAuthorMessage}&amount=${this.getNowPay()}`)
                                                } else {
                                                    showToast(res.data.msg, 3000, 'error');
                                                }


                                            })

                                    },
                                    getNowPay() { // 获取当前的打赏金额
                                        if (this.payItemIndex < this.payList.length) {
                                            return this.payList[this.payItemIndex].money;

                                        } else {
                                            return this.payMoney;
                                        }
                                    },
                                    doFocus() { // 获取金额焦点，用于输入
                                        setTimeout(() => {
                                            if (this.payItemIndex == this.payList.length) {
                                                document.getElementById('payInput').focus();
                                            }

                                        }, 200);

                                    },
                                    cancelFocus() { // 取消金额输入框焦点，防止样式出错
                                        document.getElementById('payInput').blur();
                                    },
                                    initPayAuthor() { // 初始化打赏作者弹窗
                                        var payAuthorEle = document.getElementById('payAuthor');
                                        this.payAuthor = new bootstrap.Modal(payAuthorEle);
                                    },
                                    showPayAuthor() { // 显示打赏作者
                                        if (this.payAuthor != null && this.isUserLogin == true) {
                                            this.payAuthor.show();
                                        }
                                    },
                                    hidePayAuthor() { // 隐藏打赏作者
                                        if (this.payAuthor != null) {
                                            this.payAuthor.hide();
                                        }
                                    },
                                    checkVote(voteID) { // 根据投票id进行检测是否投票
                                        var hasClick = false;

                                        if (this.detail != null && Array.isArray(this.detail.vote)) { // 过滤并判断是否已经投票
                                            for (var i = 0; i < this.detail.vote.length; i++) {
                                                if (this.detail.vote[i].id == voteID && this.detail.vote[i].options != null && Array.isArray(this.detail.vote[i].options)) {
                                                    for (var j = 0; j < this.detail.vote[i].options.length; j++) {
                                                        if (this.detail.vote[i].options[j].is_select == 1) {
                                                            hasClick = true;
                                                            break;

                                                        }
                                                    }
                                                }
                                            }
                                        }

                                        return hasClick;
                                    },
                                    addVote(id, voteID, isMulti) { // 新增投票
                                        var hasClick = false;
                                        if (isMulti == false) {
                                            hasClick = this.checkVote(voteID);
                                        }


                                        if (hasClick == false) {
                                            // voteAddUrl
                                            axios.get(api.voteAddUrl, {
                                                params: {
                                                    vote_options_id: id
                                                }
                                            })
                                                .then((res) => {
                                                    // 处理成功情况
                                                    if (res.data.code == 1) {
                                                        showToast('投票成功', 3000, 'success');
                                                        this.getArticleDetail();
                                                    } else {

                                                    }


                                                })
                                        } else {

                                        }

                                    },
                                    getAllVoteCount() { // 通过当前的数据计算全部投票人数
                                        if (this.detail != null) {
                                            if (this.detail.vote != null && Array.isArray(this.detail.vote)) {
                                                for (var i = 0; i < this.detail.vote.length; i++) {
                                                    var itemAllCount = 0;
                                                    for (var j = 0; j < this.detail.vote[i].options.length; j++) {
                                                        itemAllCount += this.detail.vote[i].options[j].number;
                                                    }
                                                    this.detail.vote[i].allCount = itemAllCount;
                                                    // console.log(this.detail.vote[i].allCount);

                                                }
                                                // var nowCount = 0;
                                                // for(var i = 0; i < this.detail.vote.length; i++){
                                                //     nowCount += this.detail.vote[i].number;
                                                // }
                                                // this.nowAllVoteCount = nowCount;
                                                // console.log('this.nowAllVoteCount', this.nowAllVoteCount);

                                            }
                                        }

                                    },
                                    showPreview(item) { // 显示图片预览
                                        console.log(item);
                                        
                                        showPreview(item);
                                    },
                                    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; top: 0px;" src="${imgUrl}" />`;
                                            }

                                        });

                                        // 3. 用 <span> 包裹剩余文本
                                        var finalHtml = `<span>${html.replace(/<\/span><span>/g, '</span><span>')}</span>`;
                                        // 去除p标签
                                        finalHtml = finalHtml.replace('<p>','<span>').replace('</p>', '</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);

                                            })
                                    },
                                    insertMoreTextAtCursor(str) { // 插入大于两个字符的文本
                                        var strArr = str.split('');
                                        for (var i = 0; i < strArr.length; i++) {
                                            this.insertAtCursor(strArr[i]);
                                            console.log(strArr[i]);

                                        }
                                    },
                                    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 startPos = this.getCursorPosition();
                                            // var endPos = this.getCursorPosition();

                                            // var restoreTop = myField.scrollTop;
                                            myField.value = myField.value.substring(0, startPos) + myValue + myField.value.substring(startPos, myField.value.length);
                                            // if (restoreTop > 0) {
                                            //     myField.scrollTop = restoreTop;
                                            // }
                                            myField.focus();
                                            myField.selectionStart = startPos + myValue.length;
                                            myField.selectionEnd = endPos + myValue.length;
                                        } else {
                                            myField.value += myValue;
                                            // myField.focus();
                                        }

                                        this.talkText = myField.value;
                                    },
                                    // autoInsertEmoji(text) {
                                    //     if (this.nowInputPos != null) {
                                    //         console.log(this.nowInputPos);

                                    //         var start = this.talkText.substring(0, this.nowInputPos);
                                    //         var end = this.talkText.substring(this.nowInputPos, this.talkText.length);
                                    //         this.nowInputPos++;
                                    //         this.talkText = start + text + end;

                                    //     }
                                    // },
                                    getCursorPosition() { // 获取光标位置
                                        var ctrl = document.getElementById('textInput');
                                        var CaretPos = 0;
                                        if (document.selection) {
                                            // ctrl.focus();
                                            var Sel = document.selection.createRange();
                                            Sel.moveStart('character', -ctrl.value.length);
                                            CaretPos = Sel.text.length;
                                        } else if (ctrl.selectionStart || ctrl.selectionStart == '0') {
                                            // ctrl.focus();
                                            CaretPos = ctrl.selectionStart;
                                        }
                                        // console.log('CaretPos', CaretPos);

                                        return CaretPos;
                                    },
                                    doZan(item, is_zan) { // 点赞
                                        // articleHandleCollectUrl
                                        axios.post(api.articleHandleCollectUrl, {
                                            id: this.id,
                                            is_collect: is_zan,
                                            terminal: api.terminal,
                                            type: 2
                                        })
                                            .then((res) => {
                                                // 处理成功情况
                                                if (res.data.code == 1) {
                                                    if (item.is_zan == 0) {
                                                        item.is_zan = 1;
                                                        item.zan_num++;
                                                    } else {
                                                        item.is_zan = 0;
                                                        item.zan_num--;
                                                    }
                                                    // console.log(this.commentsList);

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


                                            })
                                    },
                                    doCollect(item, is_collect) { // 收藏
                                        // articleHandleCollectUrl
                                        axios.post(api.articleHandleCollectUrl, {
                                            id: this.id,
                                            is_collect: is_collect,
                                            terminal: api.terminal,
                                            type: 1
                                        })
                                            .then((res) => {
                                                // 处理成功情况
                                                if (res.data.code == 1) {
                                                    if (item.is_collect == 0) {
                                                        item.is_collect = 1;
                                                        item.collect_num++;
                                                    } else {
                                                        item.is_collect = 0;
                                                        item.collect_num--;
                                                    }
                                                    // console.log(this.commentsList);

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


                                            })
                                    },
                                    jump(url) { // 跳转页面
                                        loc.jump(url);
                                    },
                                    // 持久化展开内容
                                    saveExpandArr(id) {
                                        this.expandArr.push(id);
                                    },
                                    // 移除持久化内容
                                    removeExpandArr(id) {
                                        var arr = [];
                                        for (var i = 0; i < this.expandArr.length; i++) {
                                            if (this.expandArr[i] == id) {
                                                continue;
                                            }
                                            arr.push(this.expandArr[i]);
                                        }
                                        this.expandArr = arr;
                                    },
                                    directTalkBack() { // 直接回复
                                        this.pid = 0;
                                        this.reply_user_id = this.detail.user_id;
                                        this.replyPlaceholder = '✏️ 说点什么...';

                                    },
                                    talkBackToUser(pid, userName) { // 给用户回复
                                        // console.log('当前给'+userName+'评论, pid='+pid);
                                        this.replyPlaceholder = '回复 ' + userName;
                                        this.reply_user_id = '';
                                        this.pid = pid;

                                    },
                                    talkBackToSubUser(pid, userName, userId) { // 给子用户回复
                                        this.replyPlaceholder = '回复 ' + userName;
                                        this.reply_user_id = userId;
                                        this.pid = pid;
                                    },
                                    talkToArticle() { // 回复帖子
                                        this.myMsgUserIds = this.myMsgUserIdsArr.toString();
                                        // articleCommentsReplyUrl
                                        axios.post(api.articleCommentsReplyUrl, {
                                            article_id: this.id,
                                            data: {
                                                delta: {
                                                    ops: [
                                                        {
                                                            insert: this.talkText + '\n'
                                                        }
                                                    ]
                                                },
                                                errMsg: 'getContents:ok',
                                                html: `<p>${this.talkText}</p>${this.imageArrHtml}`,
                                                text: `${this.talkText}\n${this.imageArrHtml}`
                                            },
                                            msg_user_ids: this.myMsgUserIds,
                                            pid: this.pid,
                                            reply_user_id: this.reply_user_id,
                                            terminal: api.terminal

                                        })
                                            .then((res) => {
                                                // 处理成功情况
                                                if (res.data.code == 1) {
                                                    this.getArticleCommentsFirst();
                                                    this.getArticleDetail();
                                                    // console.log(this.commentsList);
                                                    this.talkText = '';
                                                    this.hideInputBox();

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


                                            })
                                    },
                                    initFullScreenVideo() { // 初始化全屏
                                        const video = document.getElementById('myVideo');

                                        if (video != null) {
                                            // 点击视频时触发全屏
                                            video.addEventListener('play', function () {

                                                if (video.requestFullscreen) {
                                                    video.requestFullscreen(); // 标准全屏API
                                                } else if (video.webkitRequestFullscreen) { // Safari/Chrome
                                                    video.webkitRequestFullscreen();
                                                } else if (video.mozRequestFullScreen) { // Firefox
                                                    video.mozRequestFullScreen();
                                                }
                                            });
                                        }

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

                                    },
                                    // 显示表情包
                                    showEmoji() {
                                        this.showEmojiVal = true;
                                    },
                                    // 隐藏表情包
                                    hideEmoji() {
                                        this.showEmojiVal = false;
                                    },
                                    retClass(activeClass, inActive, index, i) { // 自动处理激活样式
                                        if (index == i) {

                                            return activeClass;
                                        } else {
                                            return inActive;
                                        }
                                    },
                                    // 获取文件数组的方法
                                    getUploadedFiles() {
                                        // myDropzone.files 就是所有文件的数组
                                        console.log("当前文件列表：", this.mydropzone.files);
                                        this.imageArr = [];
                                        for (var i = 0; i < this.mydropzone.files.length; i++) {
                                            if (this.mydropzone.files[i].xhr != null) {
                                                // console.log('this.mydropzone.files[i].xhr', this.mydropzone.files[i].xhr);

                                                var json = this.mydropzone.files[i].xhr.responseText;
                                                var obj = null;
                                                try {
                                                    obj = JSON.parse(json);
                                                } catch (error) {

                                                }
                                                if (obj != null) {
                                                    console.log(obj);
                                                    this.imageArr.push(obj.data.url)
                                                }
                                            }

                                        }

                                        for (var i = 0; i < this.imageArr.length; i++) {
                                            this.imageArrHtml += `<img src="${this.imageArr[i]}" title="comment" width="100px" />`;

                                        }
                                        // console.log('this.imageArr', this.imageArr);

                                        // 可筛选出已上传成功的文件
                                        // const successfulFiles = this.mydropzone.files.filter(file => file.status === Dropzone.SUCCESS);
                                        // console.log("上传成功的文件：", successfulFiles);
                                    },
                                    initSwiper() {
                                        const swiper = new Swiper('.swiperImgs', {
                                            // 1. 基础配置（确保轮播正常工作）
                                            loop: true, // 可选：开启循环（切换到最后一张后，下一张回到第一张）
                                            slidesPerView: 1, // 每次显示1张轮播图（与你原有width:100%匹配）
                                            pagination: {
                                                el: '.swiper-pagination',
                                            },

                                            // 2. 可选：禁用自动轮播（如果不需要自动播放，避免与手动切换冲突）
                                            autoplay: false,
                                        });
                                    },
                                    getInputOffCanvas() { // 获取弹出框
                                        // bottomInput
                                        // 获取弹出层元素
                                        const offcanvasElement = document.getElementById('bottomInput');

                                        // 初始化弹出层实例
                                        this.bottomInput = new bootstrap.Offcanvas(offcanvasElement);

                                    },
                                    showInputBox() { // 打开输入框弹窗
                                        if (this.bottomInput != null && this.isUserLogin == true) {
                                            this.bottomInput.show();
                                            this.setTextAreaFocus();
                                            this.hideInputMenu();
                                            this.hideEmoji();
                                        } else {
                                            showToast('请登录后发表评论', 3000, 'error');
                                        }
                                    },
                                    hideInputBox() { // 隐藏输入框弹窗
                                        this.bottomInput.hide();
                                        this.hideInputMenu();
                                        this.hideEmoji();
                                    },
                                    getmyTextarea() { // 获取编辑框
                                        this.myTextarea = document.getElementsByClassName('myTextarea')[0];

                                    },
                                    setTextAreaFocus() { // 给编辑框激活焦点
                                        if (this.myTextarea != null) {
                                            setTimeout(() => {
                                                this.myTextarea.focus();
                                            }, 500);

                                        }
                                    },
                                    showInputMenu() { // 显示输入框底部菜单
                                        this.showInputMenuVal = true;
                                    },
                                    hideInputMenu() { // 隐藏输入框底部菜单
                                        this.showInputMenuVal = false;
                                    },
                                    // 按照数量分割表情包
                                    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;
                                    },
                                    getUploader() { // 通过id获取上传控件
                                        this.uploader = document.getElementById('fileInput');
                                        // this.uploader.click();
                                        // 处理文件选择
                                        fileInput.addEventListener('change', (e) => {
                                            this.handleFiles(e.target.files);
                                        });
                                    },
                                    handleFiles(selectedFiles) { // 处理选择的文件
                                        for (var i = 0; i < selectedFiles.length; i++) {
                                            this.files.push(selectedFiles[i]);
                                        }

                                        console.log(this.files);
                                        this.uploadFile();

                                    },
                                    initCentre() {
                                        var centreStr = window.localStorage.getItem('centre');
                                        if (centreStr == null || centreStr == '') {
                                            // this.centre = null;

                                            axios.get(api.userCentreUrl, {
                                                params: {}
                                            })
                                                .then((res) => {
                                                    this.centre = res.data.data;
                                                    console.log('this.centre', this.centre)
                                                })
                                            
                                        } else {
                                            var obj = null;
                                            try {
                                                obj = JSON.parse(centreStr);
                                            } catch (error) {

                                            }


                                            this.centre = obj;
                                        }
                                    },
                                    uploadFile() {
                                        // 检查是否有文件需要上传
                                        if (!this.files || this.files.length === 0) {
                                            console.warn('没有选择文件');
                                            return;
                                        }

                                        // 存储所有上传请求的Promise
                                        const uploadPromises = [];

                                        // 循环处理每个文件
                                        for (let i = 0; i < this.files.length; i++) {
                                            // 每个文件创建一个单独的FormData
                                            const formData = new FormData();
                                            // 使用append添加文件，set会覆盖同名字段
                                            formData.append('file', this.files[i]);

                                            // 将请求Promise存入数组
                                            const promise = axios.post(api.uploadImageUrl, formData)
                                                .then(res => {
                                                    console.log(`文件 ${i + 1} 上传成功`, res);
                                                    if (res.data && res.data.data && res.data.data.uri) {
                                                        this.uploadedImgs.push(res.data.data.uri);
                                                    } else {
                                                        console.warn('上传成功但未返回有效URI', res);
                                                    }
                                                })
                                                .catch(err => {
                                                    console.error(`文件 ${i + 1} 上传失败`, err);
                                                    // 可以在这里添加错误处理，如重试机制
                                                });

                                            uploadPromises.push(promise);
                                        }

                                        // 等待所有上传完成后再打印结果
                                        Promise.all(uploadPromises).then(() => {
                                            console.log('所有文件上传处理完成', this.uploadedImgs);
                                        });
                                    },
                                    renamePlace(text) {
                                        if (text != null && text.indexOf("省") != -1) {
                                            return text.split("省")[0]
                                        }
                                        return text;
                                    },
                                    hotComments() { // 获取热门评论列表
                                        this.commentSort = 'hot';
                                        this.getArticleCommentsFirst();
                                    },
                                    upOrder() { // 获取正序评论
                                        this.commentSort = 'asc';
                                        this.getArticleCommentsFirst();
                                    },
                                    downOrder() { // 获取倒序评论
                                        this.commentSort = 'desc';
                                        this.getArticleCommentsFirst();
                                    },
                                    getArticleCommentsFirst() { // 首次获取热门评论列表
                                        this.commentPageIndex = 1;
                                        this.commentsList = [];

                                        var obj = {
                                            article_id: this.id,
                                            page_no: this.commentPageIndex,
                                            sort: this.commentSort
                                        }
                                        // articleCommentsListsUrl
                                        axios.get(api.articleCommentsListsUrl, {
                                            params: obj
                                        })
                                            .then((res) => {
                                                // 处理成功情况
                                                if (res.data.code == 1) {
                                                    for (var i = 0; i < res.data.data.lists.length; i++) {
                                                        this.commentsList.push(res.data.data.lists[i]);
                                                    }

                                                    // console.log(this.commentsList);

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


                                            })
                                    },
                                    zanParentTalk(is_collect, item) { // 点赞评论
                                        // articleHandleCollectUrl
                                        axios.post(api.articleHandleCollectUrl, {
                                            comments_id: this.commentsId,
                                            is_collect: is_collect,
                                            id: this.id,
                                            terminal: api.terminal,
                                            type: 3

                                        })
                                            .then((res) => {
                                                // 处理成功情况
                                                if (res.data.code == 1) {
                                                    item.is_collect = item.is_collect == 1 ? 0 : 1;
                                                    if (item.is_collect == 1) {
                                                        item.collect_num += 1;
                                                    } else {
                                                        item.collect_num -= 1;
                                                    }
                                                } else {
                                                    showToast(res.data.msg, 3000, 'error');
                                                }


                                            })
                                    },
                                    getArticleCommentsNext() { // 第一次后获取评论
                                        this.commentPageIndex += 1;
                                        // this.commentsList = [];

                                        var obj = {
                                            article_id: this.id,
                                            page_no: this.commentPageIndex,
                                            sort: this.commentSort
                                        }
                                        // articleCommentsListsUrl
                                        axios.get(api.articleCommentsListsUrl, {
                                            params: obj
                                        })
                                            .then((res) => {
                                                // 处理成功情况
                                                if (res.data.code == 1) {
                                                    for (var i = 0; i < res.data.data.lists.length; i++) {
                                                        this.commentsList.push(res.data.data.lists[i]);
                                                    }


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


                                            })
                                    },
                                    getArticleDetail() { // 获取文章详情
                                        // articleDetailUrl
                                        axios.get(api.articleDetailUrl, {
                                            params: {
                                                id: this.id
                                            }

                                        })
                                            .then((res) => {
                                                // 处理成功情况
                                                if (res.data.code == 1) {
                                                    this.detail = res.data.data;
                                                    // console.log('this.detail', this.detail);
                                                    this.getAllVoteCount(); // 处理并计算全部PK数量
                                                    this.initSwiper();
                                                    if (res.data.data.dun != null && res.data.data.dun == true) {
                                                        this.hasDun = true;
                                                    }
                                                    if (res.data.data.dun != null && res.data.data.dun == false) {
                                                        this.hasDun = false;
                                                    }
                                                    
                                                    if(res.data.data.is_pay == 1){
                                                        setTimeout(() => {
                                                            this.hideShowPayInfo();
                                                        }, 1000);
                                                        
                                                    }
                                                } else {
                                                    showToast(res.data.msg, 3000, 'error');
                                                }


                                            })
                                    },
                                    // uploadFile() {
                                    //     // 创建FormData对象
                                    //     const formData = new FormData();

                                    //     // 循环给FormData赋值
                                    //     for (var i = 0; i < this.files.length; i++) {
                                    //         // console.log(this.files[i]);
                                    //         formData.set('file', this.files[i]);
                                    //         // formData.append('file', this.files[i]);
                                    //         axios.post(api.uploadImageUrl, formData).then(res => {
                                    //             console.log(api.uploadImageUrl, res);
                                    //             this.uploadedImgs.push(res.data.data.uri)
                                    //         })
                                    //     }

                                    //     console.log(this.uploadedImgs);

                                    // }
                                    initDropzone() {
                                        // 创建 Dropzone 实例
                                        this.mydropzone = new Dropzone("#mydropzone", {
                                            url: api.uploadImageUrl, // 必须配置，文件的上传地址
                                            maxfiles: 10, // 默认为 null，可指定为一个数值，限制最多文件数量
                                            maxfilesize: 5, // 限制文件的大小，单位是 MB
                                            acceptedfiles: ".jpg,.jpeg,.png,.gif,.bmp", // 允许上传的文件类型，文件扩展名以逗号隔开
                                            autoprocessqueue: true, // 默认为 true，即拖入文件立即自动上传；若设为 false，则需手动点击按钮上传
                                            paramName: "file", // 相当于 <input> 元素的 name 属性，默认为 file
                                            headers: {
                                                'token': window.localStorage.getItem('token'),
                                                'terminal': 3
                                            },
                                            dictDefaultMessage: '选择您的图片用来评论'
                                            // init: function(){
                                            //     // 监听文件添加事件，为每个文件添加删除按钮
                                            //     this.on("addedfile", (file) => {
                                            //         // 创建删除按钮
                                            //         const removeBtn = document.createElement("button");
                                            //         removeBtn.textContent = "删除";
                                            //         removeBtn.className = "dz-remove";

                                            //         // 绑定删除事件
                                            //         removeBtn.addEventListener("click", () => {
                                            //             // 1. 从 Dropzone 中删除文件（前端）
                                            //             this.mydropzone.removeFile(file);

                                            //             // 2. 如需从服务器删除，这里添加 AJAX 请求
                                            //             // if (file.status === Dropzone.SUCCESS) {
                                            //             //     fetch(`/delete?filename=${file.name}`, { method: "DELETE" })
                                            //             //         .then(response => {
                                            //             //             if (response.ok) console.log("文件已从服务器删除");
                                            //             //         });
                                            //             // }
                                            //         });

                                            //         // 将按钮添加到文件预览区域
                                            //         file.previewElement.appendChild(removeBtn);
                                            //     });
                                            // }
                                        });

                                        // this.mydropzone.on('addedfile', (file) => {
                                        //     let pressTimer = null;

                                        //     // 开始长按检测
                                        //     const startPress = () => {
                                        //         pressTimer = setTimeout(() => {
                                        //             // 长按超过500ms执行删除操作
                                        //             this.mydropzone.removeFile(file);

                                        //             // 如需从服务器删除，添加AJAX请求
                                        //             if (file.status === Dropzone.SUCCESS) {
                                        //                 fetch(`/delete?filename=${encodeURIComponent(file.name)}`, {
                                        //                     method: "DELETE"
                                        //                 }).then(response => {
                                        //                     if (response.ok) console.log("文件已从服务器删除");
                                        //                 });
                                        //             }
                                        //         }, 500); // 长按阈值：500毫秒
                                        //     };

                                        //     // 取消长按检测
                                        //     const cancelPress = () => {
                                        //         if (pressTimer) {
                                        //             clearTimeout(pressTimer);
                                        //             pressTimer = null;
                                        //         }
                                        //     };

                                        //     // 为触摸设备添加事件监听
                                        //     file.previewElement.addEventListener('touchstart', startPress);
                                        //     file.previewElement.addEventListener('touchend', cancelPress);
                                        //     file.previewElement.addEventListener('touchcancel', cancelPress);

                                        //     // 为桌面设备添加事件监听（可选）
                                        //     file.previewElement.addEventListener('mousedown', startPress);
                                        //     file.previewElement.addEventListener('mouseup', cancelPress);
                                        //     file.previewElement.addEventListener('mouseleave', cancelPress);
                                        // });

                                        this.mydropzone.on('success', (file) => {
                                            this.getUploadedFiles();
                                        });

                                        this.mydropzone.on('addedfile', (file) => {
                                            // 创建删除按钮
                                            // const removeBtn = document.createElement("button");
                                            // removeBtn.textContent = "删除";
                                            // removeBtn.className = "dz-remove";

                                            // this.getUploadedFiles();


                                            // 绑定删除事件
                                            file.previewElement.addEventListener("click", () => {
                                                // 1. 从 Dropzone 中删除文件（前端）
                                                this.mydropzone.removeFile(file);
                                                this.getUploadedFiles();

                                                // 2. 如需从服务器删除，这里添加 AJAX 请求
                                                // if (file.status === Dropzone.SUCCESS) {
                                                //     fetch(`/delete?filename=${file.name}`, { method: "DELETE" })
                                                //         .then(response => {
                                                //             if (response.ok) console.log("文件已从服务器删除");
                                                //         });
                                                // }
                                            });

                                            // // 将按钮添加到文件预览区域
                                            // file.previewElement.appendChild(removeBtn);
                                        });
                                    },
                                    getProvince(addr) {
                                        var province = '';
                                        if (addr != null && addr.indexOf('省') != -1) {
                                            province = addr.split('省')[0];
                                        } else if (addr != null) {
                                            province = addr;
                                        }

                                        return province;
                                    },
                                    processHtml(html, baseDomain) {
                                        // 正则表达式匹配：<img标签，title="comment"，并捕获整个属性和src值
                                        const regex = /<img\s+([^>]*?title\s*=\s*(['"])comment\1[^>]*)>/gi;
                                        return html.replace(regex, (match, attributes) => {
                                            // 在属性中匹配src属性
                                            const srcRegex = /src\s*=\s*(['"])(.*?)\1/i;
                                            const srcMatch = attributes.match(srcRegex);
                                            if (srcMatch) {
                                                let srcValue = srcMatch[2];
                                                // 仅处理非绝对路径
                                                if (!/^(https?:|\/\/)/i.test(srcValue)) {
                                                    // 确保baseDomain以/结尾，src不以/开头
                                                    if (window.localStorage.getItem('config') == null || window.localStorage.getItem('config') == '') {

                                                        return;
                                                    }
                                                    const config = JSON.parse(window.localStorage.getItem('config'));
                                                    if (config == null) {
                                                        return;
                                                    }
                                                    const separator = config.oss_domain.aliyun.endsWith('/') || srcValue.startsWith('/') ? '' :
                                                        '/';
                                                    // const newSrc = `${config.oss_domain.aliyun}${separator}${srcValue}`;
                                                    let newSrc = "";

                                                    if (srcValue.includes('aliyun')) {
                                                        newSrc = `${config.oss_domain.aliyun}/${srcValue}`;
                                                    } else if (srcValue.includes('qcloud')) {
                                                        newSrc = `${config.oss_domain.qcloud}/${srcValue}`;
                                                    } else if (srcValue.includes('qiniu')) {
                                                        newSrc = `${config.oss_domain.qiniu}/${srcValue}`;
                                                    }
                                                    // 替换原src值并保持引号类型
                                                    const newAttributes = attributes.replace(
                                                        srcRegex,
                                                        `src=${srcMatch[1]}${newSrc}${srcMatch[1]}`
                                                    );
                                                    return `<img style="width: 130px;" onclick="showPreview('${newSrc}')" ${newAttributes}>`;
                                                }
                                            }
                                            return match; // 不符合条件则返回原匹配
                                        });
                                    },
                                    hasImgWithTitleComment(str) {
                                        return /<img\b[^>]*\btitle\s*=\s*(["'])comment\1/i.test(str);
                                    },
                                    initWindowScroll() { // 初始化页面距离检测
                                        window.addEventListener('scroll', () => {
                                            console.log(1);

                                            if (isNearBottom()) {
                                                this.getArticleCommentsNext();
                                            }
                                        });
                                    }
                                },
                                mounted() {

                                    this.getInputOffCanvas();
                                    this.getmyTextarea();
                                    this.cutEmojiArr = this.cutEmoji(7, window.conf.emoji);
                                    this.getUploader();
                                    this.initDropzone();

                                    this.getArticleID();

                                    setTimeout(() => {
                                        this.initFullScreenVideo();
                                    }, 2500);
                                    this.getArticleDetail();
                                    this.hotComments();

                                    this.initCentre();

                                    this.initWindowScroll();


                                    this.getEmoList(); // 获取表情包数组

                                    this.initPayAuthor(); // 初始化打赏作者弹窗
                                    // this.showPayAuthor(); 

                                    this.getChatListFirst(); // 获取聊天记录用户数组

                                    this.initShareBox(); // 初始化分享弹窗
                                    this.initConfimShare(); // 初始化确认分享弹窗
                                    this.initConfimGroupShare(); // 初始化确认群聊分享弹窗

                                    this.getUserLoginStatus(); // 获取用户登录状态

                                    this.initShowPayInfo(); // 初始化付费内容弹窗
                                    // this.openShowPayInfo(); // 打开付费内容弹窗

                                }
                            })


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

                    </script>

                </body>

</html>