feat: mobile产品搜索页

app/index/controller/Product.php

@@ -267,7 +267,12 @@ class Product extends Common
      */
     public function search()
     {
-        $keywords = request()->param('keywords', '');
+        $param = request()->param([
+            'keywords',
+            'page/d' => 1,
+            'size/d' => 10
+        ]);
+        $keywords = $param['keywords'] ?? '';
 
         // 关键词搜索
         $products = ProductModel::field([
@@ -283,7 +288,11 @@ class Product extends Common
             ->onSale(true)
             ->onShelves(true)
             ->order(['sort' => 'asc', 'id' => 'desc'])
-            ->select()
+            ->paginate([
+                'list_rows' => $param['size'],
+                'page'      => $param['page'],
+                'query'     => request()->param()
+            ])
             ->each(function ($item) use($keywords) {
                 $item['spu']        = str_replace($keywords, '<strong class="redpoint">'.$keywords.'</strong>', $item['spu']);
                 $item['name']       = str_replace($keywords, '<strong class="redpoint">'.$keywords.'</strong>', $item['name']);
@@ -291,6 +300,7 @@ class Product extends Common
                 return $item;
             });
         View::assign('products', $products);
+        View::assign('page', $products->render());
 
         return View::fetch('search');
     }

app/index/lang/en-us/mobile.php

@@ -58,4 +58,6 @@ return [
     '支持型号' => 'Supported Models',
     '支持系统' => 'Supported Systems',
     '全站搜索' => 'Search',
+    '搜索' => 'Search',
+    '请搜索' => 'Please search...',
 ];

app/index/view/mobile/product/search.html

@@ -1,7 +1,33 @@
 {extend name="public/base" /}
 {block name="style"}
-
+<link rel="stylesheet" type="text/css" href="__CSS__/product_search.css" />
 {/block}
 {block name="main"}
-
+<div class="oricoEGapp">
+    <!-- 搜索页面 -->
+    <div class="oricoEGapp-topsearch">
+        <form action="{:url('product/search')}" method="get" class="topsearch">
+            <div class="sleft">
+                <img src="__IMAGES__/ssapp.png" class="icosearch"/>
+                <input class="topseach-ipt" name="keywords" placeholder="{:lang('请搜索')}"/>
+            </div>
+            <button type="submit" class="searchbt">{:lang('搜索')}</button>
+        </form>
+        {notempty name="products"}
+        <div class="prlist">
+            {volist name="products" id="pro"}
+            <a class="pritem">
+                <img src="{$pro.cover_image}" class="primg"/>
+                <div class="prinfo">
+                    <span class="t1">{$pro.name|raw}</span>
+                    <span class="t2">{$pro.spu|raw}</span>
+                </div>
+            </a>
+            {/volist}
+        </div>
+        <!-- 分页 -->
+        <div>{$page|raw}</div>
+        {/notempty}
+    </div>
+</div>
 {/block}

app/index/view/mobile/public/header.html

@@ -47,8 +47,10 @@
             <div class="popup-quick">
                 <div class="ac-close float_r "><img src="__IMAGES__/close.png"></div>
                 <div class="search-in">
-                    <input type="text" placeholder="{:lang('产品')} USB 2.0...">
+                    <form action="{:url('product/search')}" method="get">
-                    <button id="search-btnput" class="search-button">{:lang('搜索')}</button>
+                        <input type="text" name="keywords" placeholder="{:lang('产品')} USB 2.0...">
+                        <button type="submit" id="search-btnput" class="search-button">{:lang('搜索')}</button>
+                    </form>
                     <div class="title-text">
                         <p><a href="#">{:lang('搜索历史')}</a></p>
                     </div>

public/static/index/mobile/css/download.css

@@ -33,29 +33,6 @@
   padding: 1.333rem;
 }
 
-.Pages {
-  text-align: center;
-  color: #555;
-  clear: both;
-  margin-bottom: 0.8rem;
-  margin-top: 0.6rem;
-}
-.Pages .pagination li {
-  display: inline-block;
-}
-.Pages .pagination li a,
-.Pages .pagination li span {
-  display: inline-block;
-  vertical-align: middle;
-  font-size: 0.875rem;
-  color: #666;
-  padding: 0.1rem 0.58rem;
-}
-.Pages .pagination li.active span{
-  background-color: #444444;
-  color: #fff;
-}
-
 @media screen and (max-width: 375px) {
   .download-left {
     width: 60%;

public/static/index/mobile/css/product_search.css

@@ -0,0 +1,100 @@
+.oricoEGapp-topsearch {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  background: #fff;
+}
+.oricoEGapp-topsearch .topsearch {
+  padding: 5.08rem 1.25rem 0.68rem 1.25rem;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.oricoEGapp-topsearch .topsearch .sleft {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.oricoEGapp-topsearch .topsearch .icosearch {
+  width: 1rem;
+  height: 1rem;
+}
+.oricoEGapp-topsearch .topsearch .topseach-ipt {
+  flex: 1;
+  margin: 0 0.625rem;
+}
+.oricoEGapp-topsearch .topsearch .searchbt {
+  border: none;
+  font-size: 0.9rem;
+  color: #fff;
+  cursor: pointer;
+  background: #0060ff;
+  height: 2rem;
+  line-height: 2rem;
+  border-radius: 20px;
+  padding: 0 1rem;
+  display: inline-block;
+}
+.oricoEGapp-topsearch .prlist {
+  display: flex;
+  flex-direction: column;
+  margin: 1.25rem;
+}
+.oricoEGapp-topsearch .prlist .pritem {
+  display: flex;
+  flex-direction: row;
+  border-bottom: 1px solid #e5e5e5;
+  justify-content: space-between;
+}
+.oricoEGapp-topsearch .prlist .pritem .primg {
+  margin: 0.5rem;
+  width: 4.26rem;
+}
+.oricoEGapp-topsearch .prlist .pritem .prinfo {
+  display: flex;
+  flex-direction: column;
+  width: 65%;
+  float: right;
+}
+.oricoEGapp-topsearch .prlist .pritem .prinfo .t1 {
+  font-size: 0.64rem;
+  padding-top: 1rem;
+  color: #333;
+  padding-bottom: 0.45rem;
+}
+.oricoEGapp-topsearch .prlist .pritem .prinfo .t2 {
+  font-size: 0.586rem;
+  color: #666;
+}
+.oricoEGapp-topsearch .Pages {
+  text-align: center;
+  color: #555;
+  clear: both;
+  margin-bottom: 0.8rem;
+  margin-top: 0.6rem;
+}
+.oricoEGapp-topsearch .Pages span {
+  display: inline-block;
+}
+.oricoEGapp-topsearch .Pages .num a {
+  vertical-align: middle;
+  color: #666;
+  font-size: 0.875rem;
+  padding: 0.1rem 0.58rem;
+}
+.oricoEGapp-topsearch .Pages .a_prev,
+.oricoEGapp-topsearch .Pages .a_next {
+  padding-top: 0.4rem;
+  padding-left: 0.38rem;
+  padding-right: 0.38rem;
+}
+.oricoEGapp-topsearch .Pages .a_prev img,
+.oricoEGapp-topsearch .Pages .a_next img {
+  width: 0.267rem;
+  height: 0.587rem;
+}
+.oricoEGapp-topsearch .Pages .num .a_cur {
+  background-color: #444444;
+  color: #fff;
+}

public/static/index/mobile/css/public.css

@@ -86,3 +86,27 @@ a {
 body {
 	font-family: 'Montserrat-SemiBold';
 }
+
+/* 分页样式 */
+.pagination {
+  text-align: center;
+  color: #555;
+  clear: both;
+  margin-bottom: 0.8rem;
+  margin-top: 0.6rem;
+}
+.pagination li {
+  display: inline-block;
+}
+.pagination li a,
+.pagination li span {
+  display: inline-block;
+  vertical-align: middle;
+  font-size: 0.875rem;
+  color: #666;
+  padding: 0.1rem 0.58rem;
+}
+.pagination li.active span{
+  background-color: #444444;
+  color: #fff;
+}