feat: 文章相关

app/index/controller/Article.php

@@ -3,6 +3,10 @@ declare (strict_types = 1);
 
 namespace app\index\controller;
 
+use app\admin\controller\v1\BannerItem;
+use app\index\model\ArticleCategoryModel;
+use app\index\model\ArticleModel;
+use app\index\model\SysBannerItemModel;
 use think\facade\View;
 
 class Article extends Common
@@ -12,6 +16,52 @@ class Article extends Common
      */
     public function index()
     {
+        // 获取上级分类
+        $param = request()->param([
+            'pid',
+            'cid',
+            'page/d' => 1,
+            'size/d' => 12,
+        ]);
+
+        // 获取banner焦点图
+        $banner = SysBannerItemModel::hasWhere('banner', [
+                'language_id'  => $this->lang_id,
+                'unique_label' => 'BANNER_67f9fc71e27db'
+            ])
+            ->type('image')
+            ->visible(['id', 'title', 'image', 'link'])
+            ->find();
+        View::assign('banner', $banner);
+
+        // 获取分类列表
+        $categorys = ArticleCategoryModel::field([
+                'id',
+                'pid',
+                'name'
+            ])
+            ->language($this->lang_id)
+            ->parent($param['pid']??null)
+            ->isShow(true)
+            ->order(['sort' => 'asc', 'id' => 'desc'])
+            ->select();
+        View::assign('categorys', $categorys);
+
+        // 获取文章列表
+        if (!$categorys->isEmpty()) {
+            $articles = ArticleModel::field([
+                    'id',
+                    'title',
+                    'desc',
+                    'image'
+                ])
+                ->category($param['cid']??$categorys[0]['id'])
+                ->paginate([
+                    'list_rows' => $param['size'],
+                    'page'      => $param['page'],
+                ]);
+        }   
+        View::assign('articles', $articles??[]);
 
         return View::fetch('index');
     }

app/index/model/ArticleCategoryModel.php

@@ -16,4 +16,29 @@ class ArticleCategoryModel extends ArticleCategoryBaseModel
     use SoftDelete;
     // 软删除字段
     protected $deleteTime = 'deleted_at';
+
+    // 关联文章
+    public function article()
+    {
+        return $this->hasMany(ArticleModel::class, 'category_id', 'id');
+    }
+
+    // 所属语言范围查询
+    public function scopeLanguage($query, $language)
+    {
+        $query->where('language_id', '=', $language);
+    }
+
+    // 所属上级分类范围查询
+    public function scopeParent($query, $parent)
+    {
+        if (is_null($parent)) return;
+        $query->where('pid', '=', $parent);
+    }
+
+    // 是否显示状态范围查询
+    public function scopeIsShow($query, bool $is_show)
+    {
+        $query->where('is_show', '=', (int)$is_show);
+    }
 }

app/index/model/ArticleModel.php

@@ -29,9 +29,9 @@ class ArticleModel extends ArticleBaseModel
         return $query->where('recommend', '=', (int)$stat);
     }
 
-    // 启用状态范围查询
+    // 文章分类范围查询
-    public function scopeEnabled($query, bool $stat = true)
+    public function scopeCategory($query, $category)
     {
-        return $query->where('enabled', '=', (int)$stat);
+        return $query->where('category_id', '=', $category);
     }
 }

app/index/model/SysBannerItemModel.php

@@ -17,6 +17,18 @@ class SysBannerItemModel extends SysBannerItemBaseModel
     // 软删除字段
     protected $deleteTime = 'deleted_at';
 
+    // 关联分类
+    public function banner()
+    {
+        return $this->hasOne(SysBannerModel::class, 'id', 'banner_id');
+    }
+
+    // 类型范围查询
+    public function scopeType($query, $type)
+    {
+        $query->where('type', '=', $type);
+    }
+
     // 启用状态范围查询
     public function scopeEnabled($query)
     {

app/index/route/route.php

@@ -25,7 +25,7 @@ Route::group('product', function() {
 // 文章相关路由
 Route::group('article', function() {
     // 文章列表页
-    Route::get('index/:id', 'Article/index');
+    Route::get('index/:pid', 'Article/index');
     // 文章详情页
     Route::get('detail/:id', 'Article/detail');
     // 文章搜索页

app/index/view/article/index.html

@@ -4,67 +4,44 @@
 {/block}
 {block name="main"}
 <div class="orico_Page_category">
-    <!--内容 -->
+    <!-- 内容 -->
     <div class="categoryMain">
-        <img src="categoryImg/eng-blog.jpg" class="categorybgimg" />
+        <img src="{$banner.image}" class="categorybgimg" />
-        <!-- 切换-->
+        <!-- 切换 -->
         <div class="tabs">
-            <div class="tabitme on">News</div>
+            {volist name="categorys" id="ca"}
-            <div class="tabitme">Blogs</div>
+            {if condition="$Request.get.cid == $ca.id || (!$Request.has.cid && $key == 0)"}
+            <a class="tabitme on" href="{:url('article/index', ['pid' => $ca.pid, 'cid' => $ca.id])}">
+            {else/}
+            <a class="tabitme" href="{:url('article/index', ['pid' => $ca.pid, 'cid' => $ca.id])}">
+            {/if}
+                {$ca.name}
+            </a>
+            {/volist}
         </div>
-        <!--搜索-->
+        <!-- 搜索 -->
         <div class="categorySearch">
             <i class="search_icon"></i>
             <input type="text" placeholder="Search" class="search" id="article-search-in" value="">
         </div>
-        <!-- 切换内容-->
+        <!-- 切换内容 -->
+        {notempty name="articles"}
         <div class="tabConten">
             <div class="tbmain">
+                {volist name="articles" id="ar"}
                 <div class="Contenitem">
                     <a>
-                        <img src="categoryImg/t1.jpg" />
+                        <img src="{$ar.image}" />
-                        <h3>ORICO Highlights Next-Gen Portable Data Storage and Charging Solution at Global
+                        <h3>{$ar.title}</h3>
-                            Sources Mobile Electronics 2024 Fall</h3>
+                        <p>{$ar.desc}</p>
-                        <p>Hong Kong AsiaWorld-Expo, October 18-21, 2024 - A long-time Global Sources Mobile
-                            Electronics exhibitor, ORICO made a splash at the show with its cutting-edge
-                            next-generation portable data storage and...</p>
-                    </a>
-                </div>
-                <div class="Contenitem">
-                    <a>
-                        <img src="categoryImg/t1.jpg" />
-                        <h3>ORICO Highlights Next-Gen Portable Data Storage and Charging Solution at Global
-                            Sources Mobile Electronics 2024 Fall</h3>
-                        <p>Hong Kong AsiaWorld-Expo, October 18-21, 2024 - A long-time Global Sources Mobile
-                            Electronics exhibitor, ORICO made a splash at the show with its cutting-edge
-                            next-generation portable data storage and...</p>
-                    </a>
-                </div>
-                <div class="Contenitem">
-                    <a>
-                        <img src="categoryImg/t1.jpg" />
-                        <h3>ORICO Highlights Next-Gen Portable Data Storage and Charging Solution at Global
-                            Sources Mobile Electronics 2024 Fall</h3>
-                        <p>Hong Kong AsiaWorld-Expo, October 18-21, 2024 - A long-time Global Sources Mobile
-                            Electronics exhibitor, ORICO made a splash at the show with its cutting-edge
-                            next-generation portable data storage and...</p>
                     </a>
                 </div>
+                {/volist}
             </div>
             <!-- 分页-->
-            <div class="Page">
+            <div>{$articles|raw}</div>
-                <span class="p_page">
-                    <a class="a_prev"></a>
-                    <em class="num">
-                        <a class="a_cur">1</a>
-                        <a>2</a>
-                        <a>3</a>
-                        <a>4</a>
-                    </em>
-                    <a class="a_next"></a>
-                </span>
-            </div>
         </div>
+        {/notempty}
     </div>
 </div>
 {/block}

public/static/index/css/category.css

@@ -1,7 +1,9 @@
 .orico_Page_category {
   width: 100%;
   position: relative;
-  height: 100vh;
+  height: auto;
+  min-height: 100vh;
+  padding-bottom: 3.75rem;
   overflow-y: auto;
   overflow-x: hidden;
   background: #f2f2f2;
@@ -45,7 +47,7 @@
   position: absolute;
   left: 1.875rem;
   top: 0.9375rem;
-  background: url(../categoryImg/search.png);
+  background: url(/static/index/images/search.png);
   z-index: 9;
 }
 .orico_Page_category .categoryMain .categorySearch .search {
@@ -128,50 +130,25 @@
   position: absolute;
   bottom: 1rem;
 }
-.orico_Page_category .categoryMain .tabConten .Page {
+.orico_Page_category .categoryMain .tabConten .pagination {
   zoom: 1;
   text-align: center;
   color: #555;
   clear: both;
   padding-bottom: 2rem;
 }
-.orico_Page_category .categoryMain .tabConten .Page span {
+.orico_Page_category .categoryMain .tabConten .pagination span {
   padding: 0px 0px;
   display: inline-block;
 }
-.orico_Page_category .categoryMain .tabConten .Page .p_page {
+.orico_Page_category .categoryMain .tabConten .pagination li {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.orico_Page_category .categoryMain .tabConten .Page .p_page .a_prev,
-.orico_Page_category .categoryMain .tabConten .Page .p_page .a_next {
-  display: inline-block;
-  width: 10px;
-  height: 21px;
-}
-.orico_Page_category .categoryMain .tabConten .Page .p_page .a_prev {
-  background: url(../categoryImg/pfl.png) no-repeat;
-  margin-right: 10px;
-  padding: 0 10px;
-}
-.orico_Page_category .categoryMain .tabConten .Page .p_page .a_next {
-  background: url(../categoryImg/prh.png) no-repeat;
-  margin-left: 10px;
-  padding: 0 10px;
-}
-.orico_Page_category .categoryMain .tabConten .Page .p_page .num a {
   display: inline-block;
   width: 34px;
   height: 22px;
   line-height: 22px;
-  text-align: center;
-  vertical-align: middle;
   font-size: 16px;
-  color: #444;
 }
-.orico_Page_category .categoryMain .tabConten .Page .p_page .num a.a_cur,
+.orico_Page_category .categoryMain .tabConten .pagination li.active {
-.orico_Page_category .categoryMain .tabConten .Page .p_page .num a:hover {
+  background-color: #444444;
-  background: #444;
+  color: #ffffff;
-  color: #fff;
 }