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


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

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

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

    <!-- <script src="core/vue.global.prod.min.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.5.21/vue.global.min.js"></script>
<link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />
<script>
    document.title = '';
    // 获取页面标题
    document.addEventListener("DOMContentLoaded", () => {
        axios.get(api.configGetconfigUrl, {
            params: {
                
            }
        }).then(res => {
            document.title = res.data.data.shop_name
        })
    })
</script>
<script defer src="/template/use/mobile/assets/js/app.js?3b597d0b729635069a47"></script><link href="/template/use/mobile/assets/css/app.css?3b597d0b729635069a47" rel="stylesheet"></head>
    <style>
    .nav-tabs .nav-link.active {
        background-color: transparent;
        border-color: transparent;
    }

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

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

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

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

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

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

    .myBtn {
        border-radius: 5px;
    }

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

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

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

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

    .myCard2 {
        padding: 10px 20px;
    }

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

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

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

    .myRow1 .col {
        padding: 2px;
    }

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

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

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

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

    .nav .nav-item .active .bottomBar {
        display: block;
    }
</style>
    <style>
    /* 基础样式重置 */
    /* * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    } */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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



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

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

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

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

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

        // 自动关闭
        setTimeout(() => {
            toast.classList.remove('show');
            // 动画结束后移除元素
            setTimeout(() => {
                container.removeChild(toast);
            }, 300);
        }, duration);
    }
</script>
        <style>
            .myHeader {
                background-color: rgba(var(--adminuiux-header-active-bg-rgb), var(--adminuiux-header-active-opacity));
                height: 44px;
            }

            .myAvatarRounded {
                border-radius: 5px;
            }

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

            }

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

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

            .card-body {
                padding: 8px;
            }

            .myBtnBG {
                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">
                        <i onclick="goBack()" style="position: absolute;left: 15px;"
                            class="bi bi-chevron-left font-lger"></i>
                        <span class="font-md">系统消息</span>
                    </div>
                    <div style="width: 100%;height: 44px;">

                    </div>

                    <div v-for="(item, index) in systemMessageList" :key="'systemMessageList' + index"
                        class="card card-body mx-2 mt-2">
                        <div v-if="item.extraObj.scene_id == 109" class="flex flex-column">
                            <span class="fw-bold font-lg">{{ item.extraObj.params.refund_type }}</span>
                            <span class="font text-gray my-2">{{ formatTimeByYear(item.extraObj.params.refund_time)
                                }}</span>
                            <span class="font text-gray">订单号为{{ item.extraObj.params.order_sn }}的{{
                                item.extraObj.params.refund_total_amount }}元余额，已经成功退回</span>
                        </div>
                        <div v-else-if="item.extraObj.scene_id == 108" class="flex flex-column">
                            <span class="fw-bold font-lg">售后订单已处理</span>
                            <span class="font text-gray my-2">{{ formatTimeByYear(item.create_time) }}</span>
                            <span class="font text-gray">售后订单号为{{ item.extraObj.params.after_sale_sn }}的售后开始处理</span>
                        </div>
                        <div @click="jump(`haosns-circle-detail.html?id=${item.extraObj.params.circle_id}`, item.extraObj.params.circle_id)" v-else-if="item.extraObj.scene_id == 205   " class="flex flex-column">
                            <span class="fw-bold font-lg">圈子通知</span>
                            <span class="font text-gray my-2">{{ formatTimeByYear(item.create_time) }}</span>
                            <span class="font text-gray">{{ item.extraObj.params.content }}</span>
                        </div>
                        <div v-else class="flex flex-column">
                            <span class="fw-bold font-lg">{{ item.title }}</span>
                            <span class="font text-gray my-2">{{ formatTimeByYear(item.create_time) }}</span>
                            <span class="font text-gray">{{ item.content }}</span>
                        </div>

                    </div>
            </div>


            <script>
                document.addEventListener('DOMContentLoaded', () => {
                    const app = Vue.createApp({
                        data() {
                            return {
                                // navbar_index: 3, // 底部导航栏索引
                                systemMessagePage: 1, // 当前系统消息页页码
                                systemMessageList: [], // 当前系统消息列表
                                timer: null, // 防抖定时器
                            }
                        },
                        methods: {
                            jump(url, circle_id){
                                if(circle_id != null){
                                    loc.jump(url);
                                }
                                
                            },
                            // 首次获取系统消息
                            getSystemMessageFirst() {
                                this.systemMessagePage = 1;
                                this.systemMessageList = [];
                                // noticeListsUrl
                                axios.get(api.noticeListsUrl, {
                                    params: {
                                        page_no: this.systemMessagePage,
                                        page_size: 16,
                                        type: 'system'
                                    }

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


                                    })
                            },
                            // 之后获取系统消息
                            getSystemMessageNext() {
                                this.systemMessagePage += 1;
                                // this.systemMessageList = [];
                                // noticeListsUrl
                                axios.get(api.noticeListsUrl, {
                                    params: {
                                        page_no: this.systemMessagePage,
                                        page_size: 16,
                                        type: 'system'
                                    }

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


                                    })
                            },
                            formatTimeByYear(timeStr) { // 格式化时间
                                // 解析输入时间字符串的各个部分
                                const [datePart, timePart] = timeStr.split(' ');
                                const [targetYear, targetMonth, targetDay] = datePart.split('-').map(Number);
                                const hourMinute = timePart.slice(0, 5); // 提取"HH:mm"部分

                                // 获取当前年份
                                const currentYear = new Date().getFullYear();
                                // 计算年份差值
                                const yearDiff = currentYear - targetYear;

                                // 根据年份差值确定前缀
                                let prefix = '';
                                if (yearDiff === 0) {
                                    prefix = ''; // 同一年，无前缀
                                } else if (yearDiff === 1) {
                                    prefix = '去年';
                                } else if (yearDiff === 2) {
                                    prefix = '前年';
                                } else {
                                    prefix = `${targetYear}年`; // 三年及以上，显示具体年份
                                }

                                // 拼接结果（月份和日期去除前导零）
                                return `${prefix}${targetMonth}月${targetDay}日 ${hourMinute}`;
                            },
                            initWindowScroll() { // 初始化页面距离检测
                                window.addEventListener('scroll', () => {
                                    // console.log(1);
                                    if(this.timer != null){
                                        clearTimeout(this.timer)
                                    }

                                    if (isNearBottom()) {
                                        this.timer = setTimeout(() => {
                                            this.getSystemMessageNext();
                                        }, 100);
                                        
                                    }
                                });
                            },
                        },
                        mounted() {
                            this.getSystemMessageFirst();
                            this.initWindowScroll();
                        }
                    })

                    // 全局注册NutUI组件
                    // app.use(nutui)

                    // app.use('nutui-icon')
                    // 挂载应用
                    app.mount('#app')
                })

            </script>

        </body>

</html>