<!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>
    .myBgColor {
        background-color: #f7f6f6;
    }

    [data-bs-theme=dark] .myBgColor {
        background-color: #1a2226;
    }

    .myCardBgColor {
        background-color: #fff;
    }

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

<!-- off canvas live offcanvas-start -->
<div class="offcanvas offcanvas-start" onclick="closeBox" style="background-color: rgba(0, 0, 0, 0.7);" tabindex="-1" id="leftSlider"
    aria-labelledby="leftSliderLabel">

    <div style="width: 180px;" class="offcanvas-body myBgColor flex flex-column justify-between">
        <div class="w-100 flex flex-column mt-5">
            <div class="myCardBgColor p-2 flex flex-column my-1" style="border-radius: 10px;">
                <div onclick="loc.jump('haosns-create-page.html')" class="flex align-center ">
                    <i class="bi bi-lightbulb font mr-2"></i>
                    <span class="font">
                        我的发布
                    </span>
                </div>
                <!-- <div class="flex align-center my-2">
                    <i class="bi bi-pin-angle font mr-2"></i>
                    <span class="font">
                        我的推广
                    </span>
                </div> -->

                
            </div>

            <div class="myCardBgColor p-2 flex flex-column my-1" style="border-radius: 10px;">
                <div onclick="loc.jump('haosns-my-note.html')" class="flex align-center my-2">
                    <i class="bi bi-journal-text font mr-2"></i>
                    <span class="font">
                        我的草稿
                    </span>
                </div>
                <div onclick="loc.jump('haosns-histroy.html')" class="flex align-center my-2">
                    <i class="bi bi-clock font mr-2"></i>
                    <span class="font">
                        浏览记录
                    </span>
                </div>
            </div>

            <div class="myCardBgColor p-2 flex flex-column my-1" style="border-radius: 10px;">
                <div onclick="loc.jump('haosns-my-circle.html')" class="flex align-center my-2">
                    <i class="bi bi-journal-text font mr-2"></i>
                    <span class="font" id="name">
                        我的星球
                    </span>
                </div>
                <div onclick="loc.jump('haosns-user-follow.html?type=userFollow&user_id=-1')" class="flex align-center my-2">
                    <i class="bi bi-person-check font mr-2"></i>
                    <span class="font">
                        我的关注
                    </span>
                </div>
                <div onclick="loc.jump('haosns-money-wallet.html')" class="flex align-center my-2">
                    <i class="bi bi-wallet2 font mr-2"></i>
                    <span class="font">
                        我的钱包
                    </span>
                </div>
                
            </div>

            <div class="myCardBgColor p-2 flex flex-column my-1" style="border-radius: 10px;">
                <div class="flex align-center ">
                    <i class="bi bi-umbrella font mr-2"></i>
                    <span class="font">
                        社区公约
                    </span>
                </div>
                
            </div>
            

        </div>

        <!-- 侧边栏底部区域 -->
        <div class="flex pb-ios mb-2">
            <div onclick="loc.jump('haosns-setting-index.html')" class="flex flex-1 justify-center align-center flex-column">
                <div style="width: 40px;height: 40px;border-radius: 50%;" class="myCardBgColor flex align-center justify-center" >
                    <i class="bi bi-gear font-lger"></i>
                </div>

                <span class="font-small mt-1">设置</span>
            </div>
            <div class="flex flex-1 justify-center align-center flex-column">
                <div style="width: 40px;height: 40px;border-radius: 50%;" class="myCardBgColor flex align-center justify-center" >
                    <i class="bi bi-headset font-lger"></i>
                </div>

                <span class="font-small mt-1">帮助</span>
            </div>
            <!-- <div class="flex flex-1 justify-center align-center flex-column">
                <div style="width: 40px;height: 40px;border-radius: 50%;" class="myCardBgColor flex align-center justify-center" >
                    <i class="bi bi-gear font-lger"></i>
                </div>

                <span class="font-small mt-1">设置</span>
            </div> -->
            
        </div>

    </div>
</div>

<script>
    // function closeBox() {
    //     console.log(99999);
        
    //     var leftSlider = new bootstrap.Offcanvas(document.getElementById('leftSlider'));
    //     leftSlider.hide();
    // }
    // 修复关闭函数
    function closeBox() {
        console.log("关闭侧边栏");
        var leftSlider = bootstrap.Offcanvas.getInstance(document.getElementById('leftSlider'));
        leftSlider.hide();
    }
    
    // 添加背景点击关闭功能
    document.addEventListener('DOMContentLoaded', function() {
        var leftSlider = document.getElementById('leftSlider');
        
        // 初始化Offcanvas
        var bsLeftSlider = new bootstrap.Offcanvas(leftSlider);
        
        // 点击背景关闭
        leftSlider.addEventListener('click', function(e) {
            if (e.target === leftSlider) {
                closeBox();
            }
        });

        document.getElementById('name').innerText="我的" + (window.localStorage.getItem('circle_name') || '星球')
        
    });
</script>
            <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>
                <!-- 引入 Cropper.js 的 CSS -->
                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.css">

                <!-- 引入 Cropper.js 的 JS -->
                <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.js"></script>
                <style>
                    .myHeader {
                        background-color: rgba(var(--adminuiux-header-active-bg-rgb), var(--adminuiux-header-active-opacity));
                        height: 50px;
                    }

                    .myBgCover {
                        position: relative;

                    }

                    .myBgCover::after {
                        content: '';
                        /* 必需属性 */
                        position: absolute;
                        top: 0;
                        left: 0;
                        right: 0;
                        bottom: 0;
                        background: radial-gradient(ellipse at center,
                                rgba(0, 0, 0, 0.1) 0%,
                                rgba(0, 0, 0, 0.6) 100%);
                        z-index: 1;
                        /* 确保在背景之上但在内容之下 */
                    }

                    /* 内容需要更高z-index以显示在遮罩上方 */
                    .myBgCover * {
                        position: relative;
                        z-index: 2;
                    }

                    .myBottomBorder {
                        display: none;
                    }

                    .active .myBottomBorder {
                        display: block;
                    }

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

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

                    }

                    [data-bs-theme=dark] .myThemeBg1 {
                        background-color: rgba(var(--adminuiux-theme-1-rgb), 0.15);
                    }
                </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 class="myHeader fixed-top flex align-center justify-center">
                    <span class="font-md">消息列表</span>
                </div>
                <div style="width: 100%;height: 50px;">

                </div> -->

                            <!-- 背景图片 @click="cutUserBG()" -->
                            <div class="p-2 myBgCover"
                                :style="`width: 100%;height: calc(310px + 15px);background: url('${userInfo == null && systemConfig == null ? '' : userInfo == null || userInfo.home_bg == null ? systemConfig.user_home_bj : userInfo.home_bg }') center/cover no-repeat;`">
                                <div class="flex justify-between">
                                    <i @click.stop="showLeftSlider()" class="bi bi-list"
                                    style="color: white;font-size: 20px;"></i>
                                    <i  @click.stop="cutUserBG()" class="bi bi-collection-fill" style="color: white;font-size: 20px;"></i>
                                </div>
                                
                                <div class="flex align-center" style="position: absolute;top: 60px;">
                                    <img class="avatar avatar-70 coverimg rounded-circle"
                                        :src="userInfo == null ? '' : userInfo.avatar" />
                                    <div class="flex flex-column justify-between ml-4">
                                        <div class="flex align-center">
                                            <span @click.stop="nicknameClick(userInfo.id)" class="font-lger mb-1 mr-2"
                                                style="color: white;font-weight: bolder;">{{ userInfo == null ? '' :
                                                userInfo.nickname }}</span>
                                            <img v-if="userInfo != null && userInfo.user_level != null"
                                            style="width: 28px;" :src="userInfo.user_level.image" alt="" srcset="">
                                        </div>
                                        <span v-if="userInfo != null && userInfo.id != null && userInfo.id != -1"
                                            class="font-smmd mt-1" style="color: white;">
                                            会员ID：{{ userInfo == null || userInfo.id == -1 ? '' : userInfo.id }}
                                        </span>
                                    </div>

                                </div>

                                <p class="font-sm ml-2" style="color: white;position: absolute;top: 160px;">{{ userInfo
                                    == null ? '' : userInfo.desc }}</p>

                                <div style="position: absolute;top: 200px;width: calc(100% - 16px);"
                                    class="flex justify-between align-center">
                                    <div style="line-height: 1.3;" class="flex flex-1">
                                        <div @click.stop="jump(`haosns-user-follow.html?type=userFollow&user_id=-1`)"
                                            class="flex flex-column flex-1 align-center justify-center">
                                            <span style="color: white;" class="font-small">{{ userInfo == null ? 0 :
                                                userInfo.follow }}</span>
                                            <span style="color: white;" class="font-small">关注</span>
                                        </div>
                                        <div @click.stop="jump(`haosns-user-follow.html?type=userFans&user_id=-1`)"
                                            class="flex flex-column flex-1 align-center justify-center">
                                            <span style="color: white;" class="font-small">{{ userInfo == null ? 0 :
                                                userInfo.fans_num }}</span>
                                            <span style="color: white;" class="font-small">粉丝</span>
                                        </div>
                                        <div @click.stop="jump('haosns-user-article.html')"
                                            class="flex flex-column flex-1 align-center justify-center">
                                            <span style="color: white;" class="font-small">{{ userInfo == null ? 0 :
                                                userInfo.article_num }}</span>
                                            <span style="color: white;" class="font-small">动态</span>
                                        </div>
                                        <div @click.stop="jump('haosns-user-article.html?type=user_collect')"
                                            class="flex flex-column flex-1 align-center justify-center">
                                            <span style="color: white;" class="font-small">{{ userInfo == null ? 0 :
                                                userInfo.collect }}</span>
                                            <span style="color: white;" class="font-small">收藏</span>
                                        </div>

                                    </div>
                                    <div class="flex flex-1 justify-end">
                                        <!-- <span @click.stop="cutUserBG()"
                                            style="color: white;border: 1px solid #fff;background-image: linear-gradient(to right top, rgba(203, 203, 203, 0.3), rgba(203, 203, 203, 0.5));"
                                            class="rounded-pill font-small p-1 ml-2">修改壁纸</span> -->
                                        <span @click.stop="jump('haosns-my-edit.html')"
                                            style="color: white;border: 1px solid #fff;background-image: linear-gradient(to right top, rgba(203, 203, 203, 0.3), rgba(203, 203, 203, 0.5));"
                                            class="rounded-pill font-small p-1 ml-2">编辑资料</span>
                                        <span @click.stop="jump('haosns-setting-index.html')"
                                            style="color: white;border: 1px solid #fff;background-image: linear-gradient(to right top, rgba(203, 203, 203, 0.3), rgba(203, 203, 203, 0.5));"
                                            class="rounded-pill font-small px-3 ml-2"><i class="bi bi-gear"
                                                style="font-size: 16px;position: relative;top: 1px;"></i></span>
                                    </div>
                                </div>

                                <!-- 底部滚动按钮 -->
                                <div class="mx-2 noScrollBar"
                                    style="width: calc(100% - 16px);position: absolute;top: 247px;overflow-x: scroll;white-space: nowrap;">
                                    
                                    <!-- v-for="(item, index) in "  -->
                                    <div v-for="(item, index) in btns" :key="index" @click="jumpByBtn(item)"
                                        style="display: inline-flex;background-image: linear-gradient(to right top, rgba(203, 203, 203, 0.3), rgba(203, 203, 203, 0.5));border-radius: 10px;width: calc(( (100% - 16px) - 10px * 2 ) / 3);margin-right: 10px;"
                                        class="flex-column py-1 px-3">
                                        <span class="font-sm" style="color: #fff;">{{ item.name }}</span>
                                        <span class="font-smmd" style="color: #ddd;">{{ item.desc }}</span>
                                    </div>

                                    <!-- <div onclick="loc.jump('selfshop/index.html')"
                                        style="display: inline-flex;background-image: linear-gradient(to right top, rgba(203, 203, 203, 0.3), rgba(203, 203, 203, 0.5));border-radius: 10px;width: calc(( (100% - 16px) - 10px * 2 ) / 3);margin-right: 10px;"
                                        class="flex-column py-1 px-3">
                                        <span class="font-sm" style="color: #fff;">自营商城</span>
                                        <span class="font-smmd" style="color: #ddd;">自营商城页面</span>
                                    </div>
                                    <div onclick="loc.jump('twoshop/index.html')"
                                        style="display: inline-flex;background-image: linear-gradient(to right top, rgba(203, 203, 203, 0.3), rgba(203, 203, 203, 0.5));border-radius: 10px;width: calc(( (100% - 16px) - 10px * 2 ) / 3);margin-right: 10px;"
                                        class="flex-column py-1 px-3">
                                        <span class="font-sm" style="color: #fff;">二手商城</span>
                                        <span class="font-smmd" style="color: #ddd;">二手商城页面</span>
                                    </div>
                                    <div onclick="loc.jump('haosns-index-info.html')"
                                        style="display: inline-flex;background-image: linear-gradient(to right top, rgba(203, 203, 203, 0.3), rgba(203, 203, 203, 0.5));border-radius: 10px;width: calc(( (100% - 16px) - 10px * 2 ) / 3);margin-right: 10px;"
                                        class="flex-column py-1 px-3">
                                        <span class="font-sm" style="color: #fff;">信息首页</span>
                                        <span class="font-smmd" style="color: #ddd;">信息版首页</span>
                                    </div>
                                    <div onclick="loc.jump('haosns-send-page-wx.html')"
                                        style="display: inline-flex;background-image: linear-gradient(to right top, rgba(203, 203, 203, 0.3), rgba(203, 203, 203, 0.5));border-radius: 10px;width: calc(( (100% - 16px) - 10px * 2 ) / 3);margin-right: 10px;"
                                        class="flex-column py-1 px-3">
                                        <span class="font-sm" style="color: #fff;">新版发帖</span>
                                        <span class="font-smmd" style="color: #ddd;">前往发帖</span>
                                    </div>
                                    <div onclick="loc.jump('haosns-index-sns.html')"
                                        style="display: inline-flex;background-image: linear-gradient(to right top, rgba(203, 203, 203, 0.3), rgba(203, 203, 203, 0.5));border-radius: 10px;width: calc(( (100% - 16px) - 10px * 2 ) / 3);margin-right: 10px;"
                                        class="flex-column py-1 px-3">
                                        <span class="font-sm" style="color: #fff;">sns首页</span>
                                        <span class="font-smmd" style="color: #ddd;">前往sns首页</span>
                                    </div>
                                    <div onclick="loc.jump('haosns-my-circle-list.html')"
                                        style="display: inline-flex;background-image: linear-gradient(to right top, rgba(203, 203, 203, 0.3), rgba(203, 203, 203, 0.5));border-radius: 10px;width: calc(( (100% - 16px) - 10px * 2 ) / 3);margin-right: 10px;"
                                        class="flex-column py-1 px-3">
                                        <span class="font-sm" style="color: #fff;">新版圈子</span>
                                        <span class="font-smmd" style="color: #ddd;">前往新版圈子页</span>
                                    </div>
                                    <div onclick="loc.jump('haosns-my-info.html')"
                                        style="display: inline-flex;background-image: linear-gradient(to right top, rgba(203, 203, 203, 0.3), rgba(203, 203, 203, 0.5));border-radius: 10px;width: calc(( (100% - 16px) - 10px * 2 ) / 3);margin-right: 10px;"
                                        class="flex-column py-1 px-3">
                                        <span class="font-sm" style="color: #fff;">信息用户中心</span>
                                        <span class="font-smmd" style="color: #ddd;">前往新版用户中心</span>
                                    </div> -->

                                </div>

                            </div>

                            <!-- <div class="bg-gradient-3" @touchstart="startMove" @touchmove="doMove" id="waterful"
                        :style="nowChoose == 1 ? `height: calc(100vh - 40px - 65px);` : `height: calc(100vh - 310px - 65px);` "
                        style="position: relative;top: -15px;width: 100%;z-index: 2;border-radius: 10px 10px 0 0;overflow-y: scroll;"> -->
                            <div class="myAutoBgColor myAutoScroll"
                                style="position: relative;top: -15px;width: 100%;z-index: 2;border-radius: 10px 10px 0 0;">
                                <!-- <div>
                            <div id="home-tab" type="button" data-bs-toggle="tab" data-bs-target="#home"  role="tab" aria-controls="home" aria-selected="true" style="display: inline-flex;" class="py-2 pl-3 text-center flex-column justify-center align-center">
                                <p class="font mb-1">动态</p>
                                <div style="width: 20px;height: 2px;" class="bg-theme-1">
    
                                </div>
                            </div>
                            <div id="profile-tab" type="button" data-bs-toggle="tab" data-bs-target="#profile"  role="tab" aria-controls="profile" aria-selected="false" style="display: inline-flex;" class="py-2 pl-3 text-center flex-column justify-center align-center">
                                <p class="font mb-1">动态</p>
                                
                            </div>
                        </div> -->

                                <div class="flex align-center justify-between">
                                    <ul class="nav mx-2" role="tablist">
                                        <li class="nav-item" role="presentation">
                                            <div @click="getDynamicArticleList()" id="dynamic-tab" type="button"
                                                data-bs-toggle="tab" data-bs-target="#dynamic" role="tab"
                                                aria-controls="dynamic" aria-selected="true"
                                                style="display: inline-flex;"
                                                class="nav-link active py-2 pl-3 text-center flex-column justify-center align-center">
                                                <p class="font mb-1">动态</p>
                                                <div style="width: 20px;height: 2px;" class="bg-theme-1 myBottomBorder">

                                                </div>
                                            </div>
                                        </li>
                                        <li class="nav-item" role="presentation">
                                            <div @click="getLikeArticleList()" id="like-tab" type="button"
                                                data-bs-toggle="tab" data-bs-target="#like" role="tab"
                                                aria-controls="like" aria-selected="true" style="display: inline-flex;"
                                                class="nav-link py-2 pl-3 text-center flex-column justify-center align-center">
                                                <p class="font mb-1">喜欢</p>
                                                <div style="width: 20px;height: 2px;" class="bg-theme-1 myBottomBorder">

                                                </div>
                                            </div>
                                        </li>
                                        <li class="nav-item" role="presentation">
                                            <div @click="getUserCollectArticleList()" id="collect-tab" type="button"
                                                data-bs-toggle="tab" data-bs-target="#collect" role="tab"
                                                aria-controls="collect" aria-selected="true"
                                                style="display: inline-flex;"
                                                class="nav-link py-2 pl-3 text-center flex-column justify-center align-center">
                                                <p class="font mb-1">收藏</p>
                                                <div style="width: 20px;height: 2px;" class="bg-theme-1 myBottomBorder">

                                                </div>
                                            </div>
                                        </li>
                                        <li class="nav-item" role="presentation">
                                            <div @click="getUserDrafts()" id="draft-tab" type="button"
                                                data-bs-toggle="tab" data-bs-target="#draft" role="tab"
                                                aria-controls="draft" aria-selected="true" style="display: inline-flex;"
                                                class="nav-link py-2 pl-3 text-center flex-column justify-center align-center">
                                                <p class="font mb-1">草稿</p>
                                                <div style="width: 20px;height: 2px;" class="bg-theme-1 myBottomBorder">

                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                    <span class=" mr-3">
                                        <i style="position: relative;top: -2px;"
                                            onclick="loc.jump('haosns-search-super.html')" class="bi bi-search"></i>
                                    </span>
                                </div>

                                <!-- 瀑布流滚动 -->
                                <div class="tab-content">
                                    <div class="tab-pane fade active show " id="dynamic" role="tabpanel"
                                        aria-labelledby="dynamic-tab">

                                        <div class="myScrollContent noScrollBar"
                                            @scroll="checkScrollEndY('#myTab1', getUserArticleNext)" id="myTab1"
                                            style="height: calc(100vh - 15px - 50px - 40px);">
                                            <div class="flex mx-3" style="gap: 10px;">
                                                <div v-for="(item, index) in userArticleList"
                                                    :key="'userArticleList' + index" class="flex flex-column"
                                                    style="width: calc( ( 100% - 10px ) / 2);">
                                                    <div @click="jump(`haosns-article-detail.html?id=${item2.id}`)"
                                                        v-for="(item2, index2) in item" :key="'item' + index2"
                                                        class="mb-2">
                                                        <!-- 瀑布流图片 -->
                                                        <div v-if="item2 != null && Array.isArray(item2.image)"
                                                            style="position: relative;width: 100%;overflow: hidden;">
                                                            <img style="border-radius: 5px 5px 0 0;width: 100%;"
                                                                :src="item2.image[0]" alt="">
                                                        </div>
                                                        <div v-if="item2 != null && item2.image == ''"
                                                            style="position: relative;width: 100%;overflow: hidden;">
                                                            <img style="border-radius: 5px 5px 0 0;width: 100%;"
                                                                src="/template/use/mobile/assets/img/haosns/default_img.png" alt="">
                                                            <span
                                                                style="color: white;font-size: 30px;position: absolute;left: 10px;top: 10px;">“</span>
                                                            <span
                                                                style="color: white;font-size: 30px;position: absolute;right: 10px;bottom: 10px;">”</span>
                                                            <span
                                                                style="position: absolute; left: 50%; top: 50%; color: white; font-size: 20px; text-align: center; transform: translate(-50%, -50%);text-wrap: wrap;word-break: break-all;overflow: hidden;">
                                                                <div
                                                                    v-html="item2 == null ? '' : item2.title == null || item2.title == '' ? item2.content : item2.title">

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

                                                        <div class="myThemeBg1 p-1" style="border-radius: 0 0 5px 5px;">
                                                            <!-- 标题 -->
                                                            <div style="max-height: 42px;overflow: hidden;">
                                                                <span class="font-sm my-1"
                                                                    style="word-break: break-all; "
                                                                    v-html="item2 == null ? '' : item2.title == null || item2.title == '' ? item2.content : item2.title"></span>

                                                            </div>

                                                            <!-- 用户头像和昵称 -->
                                                            <div class="flex justify-between align-center">
                                                                <div @click.stop="jump(`haosns-user-detail.html?id=${item2.user.id}`)"
                                                                    class="flex align-center">
                                                                    <img class="avatar avatar-15 coverimg rounded-circle border"
                                                                        :src="item2.user.avatar" />
                                                                    <span class="font-smmd text-gray ml-1">{{
                                                                        item2.user.nickname }}</span>
                                                                </div>

                                                                <div class="flex align-center">
                                                                    <i v-if="item2.is_zan == 0"
                                                                        @click="collectUserArticle(item2, 1)"
                                                                        class="bi bi-heart font-sm"></i>
                                                                    <i v-if="item2.is_zan == 1"
                                                                        @click="collectUserArticle(item2, 0)"
                                                                        class="bi bi-heart-fill font-sm"
                                                                        style="color: red;"></i>
                                                                    <span class="font-smmd ml-1">{{ item2.zan_num
                                                                        }}</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                </div>
                                                <!-- <div class="flex flex-column" style="width: calc( ( 100% - 10px ) / 2);"> -->

                                                <!-- <div style="position: relative;width: 100%;">
                                                    <img style="border-radius: 5px 5px 0 0;width: 100%;"
                                                        src="https://haodds.oss-cn-shanghai.aliyuncs.com/oss/aliyun/uploads/images/202507280654092b1db5604.jpg"
                                                        alt=""> -->
                                                <!-- <span
                                                    style="color: white;font-size: 30px;position: absolute;left: 10px;top: 10px;">“</span>
                                                <span
                                                    style="color: white;font-size: 30px;position: absolute;right: 10px;bottom: 10px;">”</span>
                                                <span
                                                    style="position: absolute; left: 50%; top: 50%; color: white; font-size: 20px; text-align: center; transform: translate(-50%, -50%);text-wrap: wrap;word-wrap: break-word;">
                                                    这是文章标题
                                                </span> -->
                                                <!-- </div> -->

                                                <!-- <div class="myThemeBg1 p-1" style="border-radius: 0 0 5px 5px;">
                                                    
                                                    <span class="font-sm my-1">这是文章标题</span>

                                                    
                                                    <div class="flex justify-between align-center">
                                                        <div class="flex align-center">
                                                            <div
                                                                class="avatar avatar-15 coverimg rounded-circle border">
                                                                <img class="w-auto"
                                                                    src="https://sns.ganzhouleyi.com/uploads/images/202505181150434e2b27932.png" />
                                                            </div>
                                                            <span class="font-smmd text-gray ml-1">zengge</span>
                                                        </div>

                                                        <div class="flex align-center">
                                                            <i class="bi bi-heart font-sm"></i>
                                                            <span class="font-smmd ml-1">0</span>
                                                        </div>
                                                    </div>
                                                </div> -->

                                                <!-- </div> -->

                                            </div>
                                        </div>


                                    </div>
                                    <!-- 喜欢页面 -->
                                    <div class="tab-pane fade" id="like" role="tabpanel" aria-labelledby="like-tab">


                                        <div class="myScrollContent noScrollBar"
                                            @scroll="checkScrollEndY('#myTab2', getUserArticleNext)" id="myTab2"
                                            style="height: calc(100vh - 15px - 50px - 40px);">
                                            <div class="flex mx-3" style="gap: 10px;">
                                                <div v-for="(item, index) in userArticleList"
                                                    :key="'userArticleList' + index" class="flex flex-column"
                                                    style="width: calc( ( 100% - 10px ) / 2);">
                                                    <div @click="jump(`haosns-article-detail.html?id=${item2.aid}`)"
                                                        v-for="(item2, index2) in item" :key="'item' + index2"
                                                        class="mb-2">
                                                        <!-- 瀑布流图片 -->
                                                        <div v-if="item2 != null && Array.isArray(item2.image)"
                                                            style="position: relative;width: 100%;overflow: hidden;">
                                                            <img style="border-radius: 5px 5px 0 0;width: 100%;"
                                                                :src="item2.image[0]" alt="">
                                                        </div>
                                                        <div v-if="item2 != null && item2.image == ''"
                                                            style="position: relative;width: 100%;overflow: hidden;">
                                                            <img style="border-radius: 5px 5px 0 0;width: 100%;"
                                                                src="/template/use/mobile/assets/img/haosns/default_img.png" alt="">
                                                            <span
                                                                style="color: white;font-size: 30px;position: absolute;left: 10px;top: 10px;">“</span>
                                                            <span
                                                                style="color: white;font-size: 30px;position: absolute;right: 10px;bottom: 10px;">”</span>
                                                            <span
                                                                style="position: absolute; left: 50%; top: 50%; color: white; font-size: 20px; text-align: center; transform: translate(-50%, -50%);text-wrap: wrap;word-break: break-all;overflow: hidden;">
                                                                <div
                                                                    v-html="item2 == null ? '' : item2.title == null || item2.title == '' ? item2.content : item2.title">

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

                                                        <div class="myThemeBg1 p-1" style="border-radius: 0 0 5px 5px;">
                                                            <!-- 标题 -->
                                                            <div style="max-height: 42px;overflow: hidden;">
                                                                <span class="font-sm my-1"
                                                                    style="word-break: break-all; "
                                                                    v-html="item2 == null ? '' : item2.title == null || item2.title == '' ? item2.content : item2.title"></span>

                                                            </div>

                                                            <!-- 用户头像和昵称 -->
                                                            <div class="flex justify-between align-center">
                                                                <div @click.stop="jump(`haosns-user-detail.html?id=${item2.user.id}`)"
                                                                    class="flex align-center">
                                                                    <img class="avatar avatar-15 coverimg rounded-circle border"
                                                                        :src="item2.user.avatar" />
                                                                    <span class="font-smmd text-gray ml-1">{{
                                                                        item2.user.nickname }}</span>
                                                                </div>

                                                                <div class="flex align-center">
                                                                    <i v-if="item2.is_zan == 0"
                                                                        @click="collectUserArticle(item2, 1)"
                                                                        class="bi bi-heart font-sm"></i>
                                                                    <i v-if="item2.is_zan == 1"
                                                                        @click="collectUserArticle(item2, 0)"
                                                                        class="bi bi-heart-fill font-sm"
                                                                        style="color: red;"></i>
                                                                    <span class="font-smmd ml-1">{{ item2.zan_num
                                                                        }}</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>



                                    </div>
                                    <!-- 收藏页面 -->
                                    <div class="tab-pane fade" id="collect" role="tabpanel"
                                        aria-labelledby="collect-tab">


                                        <div class="myScrollContent noScrollBar"
                                            @scroll="checkScrollEndY('#myTab3', getUserArticleNext)" id="myTab3"
                                            style="height: calc(100vh - 15px - 50px - 40px);">
                                            <div class="flex mx-3" style="gap: 10px;">
                                                <div v-for="(item, index) in userArticleList"
                                                    :key="'userArticleList' + index" class="flex flex-column"
                                                    style="width: calc( ( 100% - 10px ) / 2);">
                                                    <div @click="jump(`haosns-article-detail.html?id=${item2.aid}`)"
                                                        v-for="(item2, index2) in item" :key="'item' + index2"
                                                        class="mb-2">
                                                        <!-- 瀑布流图片 -->
                                                        <div v-if="item2 != null && Array.isArray(item2.image)"
                                                            style="position: relative;width: 100%;overflow: hidden;">
                                                            <img style="border-radius: 5px 5px 0 0;width: 100%;"
                                                                :src="item2.image[0]" alt="">
                                                        </div>
                                                        <div v-if="item2 != null && item2.image == ''"
                                                            style="position: relative;width: 100%;overflow: hidden;">
                                                            <img style="border-radius: 5px 5px 0 0;width: 100%;"
                                                                src="/template/use/mobile/assets/img/haosns/default_img.png" alt="">
                                                            <span
                                                                style="color: white;font-size: 30px;position: absolute;left: 10px;top: 10px;">“</span>
                                                            <span
                                                                style="color: white;font-size: 30px;position: absolute;right: 10px;bottom: 10px;">”</span>
                                                            <span
                                                                style="position: absolute; left: 50%; top: 50%; color: white; font-size: 20px; text-align: center; transform: translate(-50%, -50%);text-wrap: wrap;word-break: break-all;overflow: hidden;">
                                                                <div
                                                                    v-html="item2 == null ? '' : item2.title == null || item2.title == '' ? item2.content : item2.title">

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

                                                        <div class="myThemeBg1 p-1" style="border-radius: 0 0 5px 5px;">
                                                            <!-- 标题 -->
                                                            <div style="max-height: 42px;overflow: hidden;">
                                                                <span class="font-sm my-1"
                                                                    style="word-break: break-all; "
                                                                    v-html="item2 == null ? '' : item2.title == null || item2.title == '' ? item2.content : item2.title"></span>

                                                            </div>

                                                            <!-- 用户头像和昵称 -->
                                                            <div class="flex justify-between align-center">
                                                                <div @click.stop="jump(`haosns-user-detail.html?id=${item2.user.id}`)"
                                                                    class="flex align-center">
                                                                    <img class="avatar avatar-15 coverimg rounded-circle border"
                                                                        :src="item2.user.avatar" />
                                                                    <span class="font-smmd text-gray ml-1">{{
                                                                        item2.user.nickname }}</span>
                                                                </div>

                                                                <div class="flex align-center">
                                                                    <i v-if="item2.is_zan == 0"
                                                                        @click="collectUserArticle(item2, 1)"
                                                                        class="bi bi-heart font-sm"></i>
                                                                    <i v-if="item2.is_zan == 1"
                                                                        @click="collectUserArticle(item2, 0)"
                                                                        class="bi bi-heart-fill font-sm"
                                                                        style="color: red;"></i>
                                                                    <span class="font-smmd ml-1">{{ item2.zan_num
                                                                        }}</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>


                                    </div>
                                    <!-- 草稿页面 -->
                                    <div class="tab-pane fade" id="draft" role="tabpanel" aria-labelledby="draft-tab">



                                        <div class="myScrollContent noScrollBar"
                                            @scroll="checkScrollEndY('#myTab4', getUserDraftListNext)" id="myTab4"
                                            style="height: calc(100vh - 15px - 50px - 40px);">
                                            <div class="flex mx-3" style="gap: 10px;">
                                                <div v-for="(item, index) in userDraftList"
                                                    :key="'userDraftList' + index" class="flex flex-column"
                                                    style="width: calc( ( 100% - 10px ) / 2);">
                                                    <div @click="jump(`haosns-send-page-wx.html?draftID=${item2.id}`)"
                                                        v-for="(item2, index2) in item" :key="'item' + index2"
                                                        class="mb-2">
                                                        <!-- 瀑布流图片 -->
                                                        <div v-if="item2 != null && Array.isArray(item2.image)"
                                                            style="position: relative;width: 100%;overflow: hidden;">
                                                            <img style="border-radius: 5px 5px 0 0;width: 100%;"
                                                                :src="item2.image[0]" alt="">
                                                        </div>
                                                        <div v-if="item2 != null && item2.image == ''"
                                                            style="position: relative;width: 100%;overflow: hidden;">
                                                            <img style="border-radius: 5px 5px 0 0;width: 100%;"
                                                                src="/template/use/mobile/assets/img/haosns/default_img.png" alt="">
                                                            <span
                                                                style="color: white;font-size: 30px;position: absolute;left: 10px;top: 10px;">“</span>
                                                            <span
                                                                style="color: white;font-size: 30px;position: absolute;right: 10px;bottom: 10px;">”</span>
                                                            <span
                                                                style="position: absolute; left: 50%; top: 50%; color: white; font-size: 20px; text-align: center; transform: translate(-50%, -50%);text-wrap: wrap;word-break: break-all;overflow: hidden;">
                                                                <div
                                                                    v-html="item2 == null ? '' : item2.title == null || item2.title == '' ? item2.content : item2.title">

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

                                                        <div class="myThemeBg1 p-1" style="border-radius: 0 0 5px 5px;">
                                                            <!-- 标题 -->
                                                            <div style="max-height: 42px;overflow: hidden;">
                                                                <span class="font-sm my-1"
                                                                    style="word-break: break-all; "
                                                                    v-html="item2 == null ? '' : item2.title == null || item2.title == '' ? item2.content : item2.title"></span>

                                                            </div>

                                                            <!-- 草稿创建时间和删除按钮 -->
                                                            <div class="flex align-center justify-between">
                                                                <span class="font-small text-gray">{{ item2.update_time
                                                                    }}</span>
                                                                <i @click.stop="delDraft(item2.id)" class="bi bi-trash3"
                                                                    style="font-size: calc(var(--haosns-font-scale, 1) * 10px);"></i>
                                                            </div>

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



                                    </div>
                                </div>



                            </div>

                            <div v-show="showPrediv == true" class="flex justify-center align-center"
                                style="z-index: 2;position: fixed;left: 0;top: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.4);">
                                <div class="flex align-center justify-center"
                                    style="position: absolute;left: 0;top: 0;width: 100%;height: 40px;background-color: #fff;z-index: 2;">
                                    <span class="font">
                                        图片裁切
                                    </span>
                                    <div style="position: absolute;right: 16px;" class="flex align-center">
                                        <i class="bi bi-x-lg mr-4" @click="showPrediv = false;"></i>
                                        <i id="cropAndUploadBtn" @click="showPrediv = false;"
                                            class="bi bi-check-lg"></i>
                                    </div>
                                </div>
                                <img id="imgPrediv" src="" alt="图片预览">
                            </div>
                            <input style="display: none;" type="file" name="" id="user-bg">

                            
<footer class="adminuiux-mobile-footer style-2 pb-ios">
    <div class="container" style="height: 50px;">
        <ul class="nav nav-pills nav-justified">
            <li class="nav-item">
                <a :class="navbar_index == 0 ? 'nav-link active' : 'nav-link'" href="index.html" aria-current="page">
                    <span>
                        <i class="nav-icon bi bi-grid m-0"></i>
                        <span class="nav-text">首页</span>
                    </span>
                </a>
            </li>
            <li class="nav-item">
                <a :class="navbar_index == 1 ? 'nav-link active' : 'nav-link'" href="haosns-circle-list1.html">
                    <span>
                        <i class="nav-icon bi bi-shop m-0"></i>
                        <span class="nav-text">{{ circle_name }}</span>
                    </span>
                </a>
            </li>

            <li id="logined" class="nav-item ">
                <a href="haosns-send-page-wx.html" class="">
                    <!-- <span class="rounded-circle bg-theme-accent-r-gradient position-relative">
                        <span class="avatar avatar-20 fs-14 position-absolute top-0 end-0 rounded-circle z-index-1 bg-theme-1 theme-red">
                            <small class="fw-medium">4</small>
                        </span>
                        <i class="nav-icon bi bi-bag-fill text-white"></i>
                    </span> -->
                    <img style="width: 40px;"
                        src="https://haodds.oss-cn-shanghai.aliyuncs.com/oss/aliyun/uploads/images/202508201444260a3e00299.png"
                        alt="">
                </a>
            </li>
            <li id="noLogin" class="nav-item" style="display: none;">
                <a class=" ">
                    <!-- <span class="rounded-circle bg-theme-accent-r-gradient position-relative">
                        <span class="avatar avatar-20 fs-14 position-absolute top-0 end-0 rounded-circle z-index-1 bg-theme-1 theme-red">
                            <small class="fw-medium">4</small>
                        </span>
                        <i class="nav-icon bi bi-bag-fill text-white"></i>
                    </span> -->
                    <img style="width: 40px;"
                        src="https://haodds.oss-cn-shanghai.aliyuncs.com/oss/aliyun/uploads/images/202508201444260a3e00299.png"
                        alt="">
                </a>
            </li>
            <li class="nav-item">
                <a :class="navbar_index == 3 ? 'nav-link active' : 'nav-link'" href="haosns-message.html">
                    <span style="position: relative;">
                        <i class="nav-icon bi bi-chat-dots m-0"></i>
                        <span class="nav-text">消息</span>
                        <span id="message_count" class="font-smmd px-1" style="position: absolute;right: 5px;top: 0;background-color: red;border-radius: 10px;color: white;">

                        </span>
                    </span>
                </a>
            </li>
            <li class="nav-item">
                <a :class="navbar_index == 4 ? 'nav-link active' : 'nav-link'" href="haosns-my.html">
                    <span>
                        <i class="nav-icon bi bi-person m-0"></i>
                        <span class="nav-text">我的</span>
                    </span>
                </a>
            </li>
        </ul>
    </div>
</footer>

                    </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 {
                                        navbar_index: 4, // 底部导航栏索引
                                        start_move_y: 0, // 第一次移动的开始位置
                                        nowTop: 0, // 当前的顶部距离
                                        nowChoose: 0, // 当前距离的选项
                                        leftSlider: null, // 左边导航栏
                                        userInfo: null, // 用户详情
                                        systemConfig: null, // 系统配置
                                        userArticlePage: 1, // 用户当前浏览的文章页数
                                        userArticleType: '', // 当前浏览的文章类型
                                        userArticleList: [[], []], // 用户文章列表
                                        userDraftPage: 1, // 当前用户草稿页数
                                        userDraftList: [[], []], // 当前用户草稿列表

                                        userBG: '', // 当前用户背景
                                        showPrediv: false, // 显示预览操作

                                        circle_name: window.localStorage.getItem('circle_name') || '星球',

                                        btns: [], // 导航按钮列表
                                    }
                                },
                                methods: {
                                    jumpByBtn(item){ // 跳转路径
                                        loc.jump(item.path)

                                    },
                                    showBtns(){ // 显示页面中间的操作按钮
                                        // navListUrl
                                        axios.get(api.navListUrl, {
                                            params: {
                                                location: 'my_page'
                                            }
                                        }).then(res => {
                                            // console.log('yes', res);
                                            if(res.data.data != null && Array.isArray(res.data.data)){
                                                this.btns = res.data.data;
                                                // console.log(this.btns);
                                                
                                                // for(var i = 0; i < res.data.data.data.length; i++){

                                                // }
                                            }
                                        })
                                    },
                                    setUserBG() { // 设置用户背景
                                        var obj = {
                                            "field": "home_bg",
                                            "value": this.userBG,
                                            "terminal": api.terminal
                                        }
                                        // userSetInfoUrl
                                        axios.post(api.userSetInfoUrl, obj).then(res => {
                                            if (res.data.code == 1) {
                                                this.getSystemConfig();
                                            } else {
                                                
                                            }
                                        })
                                    },
                                    cutUserBG() { // 切换用户背景
                                        var imgPrediv = document.getElementById('imgPrediv');
                                        document.getElementById('user-bg').click();
                                        document.getElementById('user-bg').addEventListener('change', (e) => {
                                            const file = e.target.files[0];
                                            if (!file) return;

                                            // 简单的文件验证
                                            const maxSize = 10 * 1024 * 1024; // 2MB
                                            if (!file.type.startsWith('image/')) {
                                                // alert('请选择图片文件！');
                                                showToast('请选择图片文件！', 3000, 'error');
                                                return;
                                            }
                                            if (file.size > maxSize) {
                                                // alert('图片大小不能超过 10MB！');
                                                showToast('图片大小不能超过 10MB！', 3000, 'error');
                                                return;
                                            }

                                            this.showPrediv = true;

                                            // 创建临时 URL 并显示图片
                                            const objectUrl = URL.createObjectURL(file);
                                            imgPrediv.src = objectUrl;

                                            // 显示裁剪按钮（如果不是全自动）
                                            // cropAndUploadBtn.style.display = 'block';

                                            // 初始化或替换 Cropper 实例
                                            if (this.cropper) {
                                                this.cropper.replace(objectUrl);
                                            } else {
                                                this.cropper = new Cropper(imgPrediv, {
                                                    aspectRatio: 1, // 裁剪框宽高比，1:1（正方形），可根据需要调整（如 16/9）
                                                    viewMode: 1, // 视图模式：限制裁剪框不超出图片范围
                                                    autoCropArea: 0.8, // 初始裁剪区域占图片面积的比例
                                                    movable: true, // 图片可移动
                                                    scalable: true, // 图片可缩放
                                                    zoomable: true, // 可缩放图片
                                                    cropBoxMovable: true, // 裁剪框可移动
                                                    cropBoxResizable: true, // 裁剪框大小可调整
                                                    // prediv: '.img-prediv', // 预览区域的选择器（如果有）

                                                });
                                            }

                                        });
                                    },
                                    performCropAndUpload() {


                                        if (!this.cropper) {

                                            return;
                                        }


                                        // 获取裁剪后的 Canvas 元素
                                        const canvas = this.cropper.getCroppedCanvas({
                                            width: 400, // 指定输出 canvas 的宽度
                                            height: 400, // 指定输出 canvas 的高度
                                            imgSmoothingEnabled: true,
                                            imgSmoothingQuality: 'high'
                                        });

                                        // 将 Canvas 转换为 Blob 对象，用于文件上传
                                        canvas.toBlob((blob) => {
                                            // 创建一个 FormData 对象，用于通过 AJAX 发送数据
                                            const formData = new FormData();
                                            // 附加裁剪后的图片数据。第三个参数是文件名（可选）
                                            formData.append('file', blob, new Date().getTime() + '_cro_avatar.png'); // 'croppedimg' 需与服务器端接收参数名匹配

                                            // 你也可以附加其他数据，例如用户ID
                                            // formData.append('userId', '12345');

                                            axios.post(api.uploadImageUrl, formData).then((res) => {
                                                // console.log('res.data.code', res.data.code);
                                                if (res.data && res.data.data && res.data.data.url) {
                                                    this.userBG = res.data.data.url;
                                                    this.setUserBG();
                                                    // console.log(this.userBG);
                                                    this.showBgPrediv = false;
                                                    this.showPrediv = false;
                                                } else if (res.data != null && res.data.code == -1) {
                                                    setTimeout(() => {
                                                        loc.jump('haosns-login.html')
                                                    }, 1500);

                                                } else if (res.data != null && res.data.code) {


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


                                                }


                                            }).catch((err) => {

                                            });


                                        }, 'img/png'); // 可以指定输出图片的 MIME 类型，如 'img/jpeg', 'img/png'
                                    },
                                    delDraft(id) { // 删除草稿
                                        // articleDraftDelUrl
                                        axios.post(api.articleDraftDelUrl, {
                                            id: id,
                                            terminal: api.terminal
                                        }).then(res => {
                                            if (res.data.code == 1) {
                                                showToast('删除成功!', 3000, 'success');
                                                this.getUserDraftListFirst();
                                            } else {
                                                showToast(res.data.msg, 3000, 'error');
                                            }
                                        })
                                    },
                                    jump(url) { // 页面跳转
                                        loc.jump(url);
                                    },
                                    collectUserArticle(item, is_collect) { // 给帖子点赞
                                        // articleHandleCollectUrl
                                        axios.post(api.articleHandleCollectUrl, {
                                            id: item.id,
                                            is_collect: is_collect,
                                            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--;
                                                }
                                            } else {
                                                showToast(res.data.msg, 3000, 'error');
                                            }
                                        })
                                    },
                                    checkScrollEndY(query, func) { // 垂直滚动检测
                                        checkScrollEndY(query, func)
                                    },
                                    getUserBG() {
                                        if (this.userInfo != null && this.userInfo.home_bg != null && this.userInfo.home_bg != '') {

                                            return this.userInfo.home_bg;
                                        }

                                        if (this.systemConfig != null && this.systemConfig.user_home_bj != null && this.systemConfig.user_home_bj != '') {

                                            return this.systemConfig.user_home_bj;
                                        }
                                        return '11111111111';
                                    },
                                    getSystemConfig() { // 获取系统配置
                                        // configGetconfigUrl
                                        axios.get(api.configGetconfigUrl, {
                                            params: {}

                                        }).then(res => {
                                            if (res.data.code == 1) {
                                                this.systemConfig = res.data.data;
                                                this.getUserInfo();

                                            } else {
                                                showToast(res.data.msg, 3000, 'error');
                                            }
                                        })
                                    },
                                    // 开始触摸
                                    startMove(e) {
                                        if (this.start_move_y == 0) {
                                            this.start_move_y = e.touches[0].clientY;
                                            var waterful = document.getElementById('waterful');
                                            this.nowTop = waterful.getBoundingClientRect().top;
                                        }

                                    },
                                    // 触摸中
                                    doMove(e) {
                                        if (this.nowTop > 40 && e.touches[0].clientY - this.start_move_y < -200) {
                                            // console.log(111);
                                            var waterful = document.getElementById('waterful');
                                            waterful.style.transform = `translateY(${e.touches[0].clientY - this.start_move_y}px)`
                                            // this.start_move_y = e.touches[0].clientY;
                                            this.nowTop = waterful.getBoundingClientRect().top;
                                            // console.log(this.nowTop);

                                            this.nowChoose = 0;
                                        } else {
                                            // console.log(e.touches[0].clientY - this.start_move_y);
                                            var waterful = document.getElementById('waterful');
                                            if (e.touches[0].clientY - this.start_move_y > -100 && e.touches[0].clientY - this.start_move_y <= 0) {

                                                waterful.style.transform = `translateY(${0}px)`
                                                // this.start_move_y = e.touches[0].clientY;
                                                // this.nowTop = waterful.getBoundingClientRect().top;
                                                // if(e.touches[0].clientY - this.start_move_y >= 5){
                                                //     this.nowTop = waterful.getBoundingClientRect().top;
                                                // }
                                            } else {

                                                this.nowTop = waterful.getBoundingClientRect().top;
                                            }
                                            this.nowChoose = 1;
                                        }


                                    },
                                    initLeftSlider() { // 获取侧边栏
                                        this.leftSlider = new bootstrap.Offcanvas(document.getElementById('leftSlider'));
                                    },
                                    closeLeftSlider() {
                                        this.leftSlider.hide();
                                    },
                                    showLeftSlider() {
                                        this.leftSlider.show();
                                    },
                                    getDynamicArticleList() { // 点击动态按钮获取用户动态文章列表
                                        this.userArticleType = '';
                                        this.getUserArticleFirst();
                                    },
                                    getLikeArticleList() { // 点击喜欢按钮获取用户喜欢的文章列表
                                        this.userArticleType = 'like';
                                        this.getUserArticleFirst();
                                    },
                                    getUserCollectArticleList() { // 点击喜欢按钮获取用户喜欢的文章列表
                                        this.userArticleType = 'user_collect';
                                        this.getUserArticleFirst();
                                    },

                                    getUserArticleFirst() { // 获取用户文章列表
                                        this.userArticlePage = 1; // 重设页码
                                        this.userArticleList = [[], []]; // 重设数组
                                        var obj = {
                                            user_id: this.userInfo.id,
                                            page_no: this.userArticlePage,
                                            page_size: 16,
                                            type: this.userArticleType
                                        }

                                        if (this.userArticleType == '') {
                                            delete obj.type
                                        }

                                        // articleListsUrl
                                        axios.get(api.articleListsUrl, {
                                            params: obj

                                        }).then(res => {
                                            if (res.data.code == 1) {
                                                for (var i = 0; i < res.data.data.lists.length; i++) {
                                                    if (i % 2 == 0) {
                                                        this.userArticleList[0].push(res.data.data.lists[i]);
                                                    }
                                                    if (i % 2 == 1) {
                                                        this.userArticleList[1].push(res.data.data.lists[i]);
                                                    }


                                                }

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

                                            } else {
                                                // showToast(res.data.msg, 3000, 'error');
                                                showToast('您未登录，请登录', 3000, 'error');
                                            }
                                        })
                                    },
                                    getUserDrafts() { // 获取用户草稿
                                        this.getUserDraftListFirst();
                                    },
                                    getUserDraftListFirst() { // 第一次获取用户草稿列表
                                        this.userDraftPage = 1;
                                        this.userDraftList = [[], []];

                                        // articleDraftListsUrl
                                        axios.get(api.articleDraftListsUrl, {
                                            params: {
                                                page_no: this.userDraftPage,
                                                page_size: 14
                                            }


                                        }).then(res => {
                                            if (res.data.code == 1) {
                                                for (var i = 0; i < res.data.data.lists.length; i++) {
                                                    if (i % 2 == 0) {
                                                        this.userDraftList[0].push(res.data.data.lists[i]);
                                                    }
                                                    if (i % 2 == 1) {
                                                        this.userDraftList[1].push(res.data.data.lists[i]);
                                                    }
                                                }

                                            } else {
                                                showToast(res.data.msg, 3000, 'error');
                                            }
                                        })
                                    },
                                    getUserDraftListNext() { // 第一次获取用户草稿列表
                                        this.userDraftPage += 1;
                                        // this.userDraftList = [[], []];

                                        // articleDraftListsUrl
                                        axios.get(api.articleDraftListsUrl, {
                                            params: {
                                                page_no: this.userDraftPage,
                                                page_size: 14
                                            }

                                        }).then(res => {
                                            if (res.data.code == 1) {
                                                for (var i = 0; i < res.data.data.lists.length; i++) {
                                                    if (i % 2 == 0) {
                                                        this.userDraftList[0].push(res.data.data.lists[i]);
                                                    }
                                                    if (i % 2 == 1) {
                                                        this.userDraftList[1].push(res.data.data.lists[i]);
                                                    }
                                                }

                                            } else {
                                                showToast(res.data.msg, 3000, 'error');
                                            }
                                        })
                                    },
                                    getUserArticleNext() { // 获取用户文章列表
                                        this.userArticlePage += 1; // 重设页码
                                        // this.userArticleList = [[], []]; // 重设数组
                                        var obj = {
                                            user_id: this.userInfo.id,
                                            page_no: this.userArticlePage,
                                            page_size: 16,
                                            type: this.userArticleType
                                        }

                                        if (this.userArticleType == '') {
                                            delete obj.type
                                        }

                                        // articleListsUrl
                                        axios.get(api.articleListsUrl, {
                                            params: obj

                                        }).then(res => {
                                            if (res.data.code == 1) {
                                                for (var i = 0; i < res.data.data.lists.length; i++) {
                                                    if (i % 2 == 0) {
                                                        this.userArticleList[0].push(res.data.data.lists[i]);
                                                    }
                                                    if (i % 2 == 1) {
                                                        this.userArticleList[1].push(res.data.data.lists[i]);
                                                    }


                                                }

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

                                            } else {
                                                showToast(res.data.msg, 3000, 'error');
                                            }
                                        })
                                    },
                                    getUserInfo() { // 获取用户详情
                                        // userCentreUrl
                                        axios.get(api.userCentreUrl, {
                                            params: {}
                                        })
                                            .then((res) => {
                                                this.userInfo = res.data.data;
                                                // 处理成功情况
                                                if (res.data.code == 1) {
                                                    this.getUserArticleFirst();

                                                } else {
                                                    this.userInfo.id = -1;
                                                    this.userInfo.avatar = api.defaultAvatar;
                                                    this.userInfo.nickname = '立即登录';
                                                    this.userInfo.desc = '';

                                                    this.userInfo.follow = 0;
                                                    this.userInfo.fans_num = 0;
                                                    this.userInfo.article_num = 0;
                                                    this.userInfo.collect = 0;
                                                    // showToast(res.data.msg, 3000, 'error');
                                                    // if(res.data.code == -1){
                                                    //     setTimeout(() => {
                                                    //         loc.jump('haosns-login.html')
                                                    //     }, 1500);

                                                    // }
                                                }


                                            })
                                    },
                                    nicknameClick(id) {
                                        if (id == -1) {
                                            loc.jump('haosns-login.html')
                                        }
                                    }
                                },
                                mounted() {

                                    this.initLeftSlider();
                                    this.getSystemConfig();

                                    this.getUserDraftListFirst();

                                    document.getElementById('cropAndUploadBtn').addEventListener('click', this.performCropAndUpload);

                                    this.showBtns();
                                }
                            })

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

                    </script>

                </body>

</html>