增加program详情页

app/index/view/article/detail.php

@@ -4,45 +4,36 @@
     <div class="location">
         <div class="container">
             <div class="location-item">
-                <a href="{:url('index/index/index')}">首页</a>
+                <a href="/">首页</a>
                 <span>></span>
-                <a href="{:url('index/article/index')}">技术文章</a>
+                <a href="/index/article/index" id="cateLink"></a>
             </div>
         </div>
     </div>
 
-
     <div class="article-detail-container">
         <div class="article-header">
-            <h1 class="article-title">{$article.title}</h1>
+            <h1 class="article-title" id="articleTitle"></h1>
             <div class="article-meta">
-                <span class="article-author"><i class="fa fa-user"></i> {$article.author}</span>
-                <span class="article-date"><i class="fa fa-calendar"></i> {$article.create_time|date='Y-m-d H:i'}</span>
-                <span class="article-category"><i class="fa fa-folder"></i> {$cateName}</span>
-                <span class="article-views"><i class="fa fa-eye"></i> {$article.views} 阅读</span>
+                <span class="article-author"><i class="fa fa-user"></i> <span id="articleAuthor"></span></span>
+                <span class="article-date"><i class="fa fa-calendar"></i> <span id="articleDate"></span></span>
+                <span class="article-views"><i class="fa-solid fa-eye"></i> <span id="articleViews"></span> 阅读</span>
             </div>
         </div>
 
-        <div class="article-content">
-            {$article.content|raw}
+        <div class="article-content" id="articleContent">
         </div>
 
         <div class="article-tags">
             <span class="tag-label">标签：</span>
-            {if !empty($article.tags)}
-            {foreach $article.tags as $tag}
-            <span class="tag-item">{$tag}</span>
-            {/foreach}
-            {else}
-            <span class="no-tags">暂无标签</span>
-            {/if}
+            <div id="articleTags"></div>
         </div>
 
         <div class="article-actions">
             <div class="action-item like-btn">
                 <i class="fa fa-thumbs-up"></i>
                 <span class="action-text">点赞</span>
-                <span class="action-count">{$article.likes|default=0}</span>
+                <span class="action-count" id="articleLikes">0</span>
             </div>
             <div class="action-item share-btn">
                 <i class="fa fa-share-alt"></i>
@@ -51,77 +42,17 @@
         </div>
 
         <div class="article-navigation">
-            <div class="prev-article">
-                {if !empty($prevArticle)}
-                <a href="{:url('index/article/index', ['id' => $prevArticle.id])}">
-                    <i class="fa fa-arrow-left"></i> 上一篇：{$prevArticle.title}
-                </a>
-                {else}
-                <span class="disabled"><i class="fa fa-arrow-left"></i> 没有上一篇了</span>
-                {/if}
+            <div class="prev-article" id="prevArticle">
             </div>
-            <div class="next-article">
-                {if !empty($nextArticle)}
-                <a href="{:url('index/article/index', ['id' => $nextArticle.id])}">
-                    下一篇：{$nextArticle.title} <i class="fa fa-arrow-right"></i>
-                </a>
-                {else}
-                <span class="disabled">没有下一篇了 <i class="fa fa-arrow-right"></i></span>
-                {/if}
+            <div class="next-article" id="nextArticle">
             </div>
         </div>
 
         <div class="related-articles">
             <h3 class="related-title">相关推荐</h3>
-            <div class="related-list">
-                {if !empty($relatedArticles)}
-                {foreach $relatedArticles as $related}
-                <div class="related-item">
-                    <a href="{:url('index/article/index', ['id' => $related.id])}">
-                        <div class="related-image">
-                            <img src="{$related.image}" alt="{$related.title}">
-                        </div>
-                        <div class="related-info">
-                            <div class="related-item-title">{$related.title}</div>
-                            <div class="related-item-desc">{$related.desc}</div>
-                        </div>
-                    </a>
-                </div>
-                {/foreach}
-                {else}
-                <div class="no-related">暂无相关文章</div>
-                {/if}
+            <div class="related-list" id="relatedArticles">
             </div>
         </div>
-
-        <!-- <div class="article-comments">
-        <h3 class="comments-title">评论区</h3>
-        <div class="comment-form">
-            <textarea placeholder="请输入您的评论..." class="comment-textarea"></textarea>
-            <button class="comment-submit">发表评论</button>
-        </div>
-        <div class="comment-list">
-            {if !empty($comments)}
-                {foreach $comments as $comment}
-                    <div class="comment-item">
-                        <div class="comment-avatar">
-                            <img src="{$comment.avatar|default='/static/images/default-avatar.png'}" alt="用户头像">
-                        </div>
-                        <div class="comment-content">
-                            <div class="comment-user">{$comment.username}</div>
-                            <div class="comment-text">{$comment.content}</div>
-                            <div class="comment-footer">
-                                <span class="comment-time">{$comment.create_time|date='Y-m-d H:i'}</span>
-                                <span class="comment-reply">回复</span>
-                            </div>
-                        </div>
-                    </div>
-                {/foreach}
-            {else}
-                <div class="no-comments">暂无评论，快来抢沙发吧！</div>
-            {/if}
-        </div>
-    </div> -->
     </div>
 </div>
 
@@ -479,33 +410,159 @@
             height: 36px;
         }
     }
+
+    .location-item a {
+        color: #000 !important;
+    }
 </style>
 
 <script>
-    document.addEventListener('DOMContentLoaded', function () {
+    // 格式化日期
+    function formatDate(timestamp) {
+        const date = new Date(timestamp * 1000);
+        return date.toLocaleDateString('zh-CN', {
+            year: 'numeric',
+            month: '2-digit',
+            day: '2-digit'
+        });
+    }
+
+    // 渲染文章详情
+    function renderArticleDetail(data) {
+        // 渲染分类链接
+        document.getElementById('cateLink').textContent = data.cateName;
+        
+        // 渲染文章标题
+        document.getElementById('articleTitle').textContent = data.article.title;
+        
+        // 渲染文章元信息
+        document.getElementById('articleAuthor').textContent = data.article.author;
+        document.getElementById('articleDate').textContent = formatDate(data.article.create_time);
+        document.getElementById('articleViews').textContent = data.article.views;
+        
+        // 渲染文章内容
+        document.getElementById('articleContent').innerHTML = data.article.content;
+        
+        // 渲染标签
+        const tagsContainer = document.getElementById('articleTags');
+        if (data.article.tags && data.article.tags.length > 0) {
+            tagsContainer.innerHTML = data.article.tags.map(tag => 
+                `<span class="tag-item">${tag}</span>`
+            ).join('');
+        } else {
+            tagsContainer.innerHTML = '<span class="no-tags">暂无标签</span>';
+        }
+        
+        // 渲染点赞数
+        document.getElementById('articleLikes').textContent = data.article.likes || 0;
+        
+        // 渲染上一篇
+        const prevArticle = document.getElementById('prevArticle');
+        if (data.prevArticle) {
+            prevArticle.innerHTML = `
+                <a href="/index/article/detail?id=${data.prevArticle.id}">
+                    <i class="fa fa-arrow-left"></i> 上一篇：${data.prevArticle.title}
+                </a>
+            `;
+        } else {
+            prevArticle.innerHTML = '<span class="disabled"><i class="fa fa-arrow-left"></i> 没有上一篇了</span>';
+        }
+        
+        // 渲染下一篇
+        const nextArticle = document.getElementById('nextArticle');
+        if (data.nextArticle) {
+            nextArticle.innerHTML = `
+                <a href="/index/article/detail?id=${data.nextArticle.id}">
+                    下一篇：${data.nextArticle.title} <i class="fa fa-arrow-right"></i>
+                </a>
+            `;
+        } else {
+            nextArticle.innerHTML = '<span class="disabled">没有下一篇了 <i class="fa fa-arrow-right"></i></span>';
+        }
+        
+        // 渲染相关文章
+        const relatedArticles = document.getElementById('relatedArticles');
+        if (data.relatedArticles && data.relatedArticles.length > 0) {
+            relatedArticles.innerHTML = data.relatedArticles.map(article => `
+                <div class="related-item">
+                    <a href="/index/article/detail?id=${article.id}">
+                        <div class="related-image">
+                            <img src="${article.image}" alt="${article.title}">
+                        </div>
+                        <div class="related-info">
+                            <div class="related-item-title">${article.title}</div>
+                            <div class="related-item-desc">${article.desc || ''}</div>
+                        </div>
+                    </a>
+                </div>
+            `).join('');
+        } else {
+            relatedArticles.innerHTML = '<div class="no-related">暂无相关文章</div>';
+        }
+    }
+
+    // 页面加载完成后执行
+    document.addEventListener('DOMContentLoaded', function() {
+        // 获取文章ID
+        const articleId = new URLSearchParams(window.location.search).get('id');
+        if (!articleId) {
+            alert('文章ID不存在');
+            return;
+        }
+
+        // 获取文章详情
+        fetch(`/index/article/detail?id=${articleId}`, {
+            headers: {
+                'X-Requested-With': 'XMLHttpRequest'
+            }
+        })
+            .then(response => {
+                console.log('Response status:', response.status);
+                console.log('Response headers:', response.headers);
+                return response.json();
+            })
+            .then(result => {
+                console.log('API response:', result);
+                if (result.code === 1) {
+                    renderArticleDetail(result.data);
+                    // 更新访问次数
+                    updateArticleViews(articleId);
+                } else {
+                    console.error('API error:', result.msg);
+                    alert(result.msg || '获取文章详情失败');
+                }
+            })
+            .catch(error => {
+                console.error('获取文章详情失败:', error);
+                console.error('Error details:', {
+                    message: error.message,
+                    stack: error.stack
+                });
+                alert('获取文章详情失败，请检查网络连接或刷新页面重试');
+            });
+
         // 点赞功能
         const likeBtn = document.querySelector('.like-btn');
         if (likeBtn) {
-            likeBtn.addEventListener('click', function () {
-                const articleId = '{$article.id}';
+            likeBtn.addEventListener('click', function() {
                 fetch('/index/article/like?id=' + articleId, {
                     method: 'POST'
                 })
-                    .then(response => response.json())
-                    .then(data => {
-                        if (data.code === 1) {
-                            const countElement = this.querySelector('.action-count');
-                            let count = parseInt(countElement.textContent);
-                            countElement.textContent = count + 1;
-                            this.classList.add('liked');
-                            this.style.color = '#f57005';
-                        } else {
-                            alert('点赞失败：' + data.msg);
-                        }
-                    })
-                    .catch(error => {
-                        console.error('点赞请求失败:', error);
-                    });
+                .then(response => response.json())
+                .then(data => {
+                    if (data.code === 1) {
+                        const countElement = this.querySelector('.action-count');
+                        let count = parseInt(countElement.textContent);
+                        countElement.textContent = count + 1;
+                        this.classList.add('liked');
+                        this.style.color = '#f57005';
+                    } else {
+                        alert('点赞失败：' + data.msg);
+                    }
+                })
+                .catch(error => {
+                    console.error('点赞请求失败:', error);
+                });
             });
         }
 
@@ -529,5 +586,31 @@
             });
         });
     });
+
+    // 更新文章访问次数
+    function updateArticleViews(articleId) {
+        fetch('/index/article/updateViews', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                id: articleId
+            })
+        })
+        .then(response => response.json())
+        .then(result => {
+            if (result.code === 1) {
+                // 更新成功，更新页面上的访问次数显示
+                const viewsElement = document.getElementById('articleViews');
+                if (viewsElement) {
+                    viewsElement.textContent = result.data.views;
+                }
+            }
+        })
+        .catch(error => {
+            console.error('更新访问次数失败:', error);
+        });
+    }
 </script>
 {include file="component/foot" /}