前端：首页、分类，增加跳转到搜索

mobile-web/src/components/search/searchtop.vue

@@ -28,12 +28,12 @@ export default {
         [Search.name]:Search,
     },
     props: {
-        // keyword: String,
+        keyword: String,
         // onSearch: Function,
     },
     data(){
         return{
-            value:'',
+            value: this.keyword,
         }
     },
     methods:{

mobile-web/src/config/router.js

@@ -88,7 +88,7 @@ const routes = [
   },
   {
     path: '/user/coupon',
-    component: () => import('../page/user/coupon/list'),
+    component: () => import('../page/coupon/list'),
     meta: {
       title: '我的优惠券',
       requireAuth: true,
@@ -99,7 +99,7 @@ const routes = [
     component: () => import('../page/user/order/list'),
     meta: {
       title: '我的订单'
-    }
+    },
   },
   {
     path: '/user/order/:id',
@@ -154,6 +154,7 @@ const routes = [
     }
   },
   {
+    name: '/product/search',
     path: '/product/search',
     component: () => import('../page/product/search'),
     meta: {

mobile-web/src/page/category/index.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
         <van-search
-        v-model="value"
+        v-model="keyword"
         placeholder="请输入搜索关键词"
         show-action
         @search="onSearch"
@@ -73,7 +73,7 @@
                     </li>
                     <div style="clear:both">
                     </div>
-                </ul>   
+                </ul>
             </div>
         </div>
         <navigate />
@@ -92,7 +92,7 @@ export default {
   },
   data() {
     return {
-      value: "",
+      keyword: "",
       rootCategories: [],
       childCategories: [],
       activeKey: 0,
@@ -105,7 +105,10 @@ export default {
     onSearch() {
       // debugger;
       // GetAddressById(1);
-      console.log(this.value);
+      // console.log(this.value);
+      this.$router.push(
+        {name: '/product/search', params: {keyword: this.keyword}}
+      )
     },
     onClick(key) {
       // debugger;

mobile-web/src/page/coupon/list.vue

@@ -152,8 +152,8 @@
 </template>
 
 <script>
-import { GetCoupon,ExchangeCoupon } from "../../../api/user.js";
+import { ExchangeCoupon } from "../../api/user.js";
-import { getCouponPage } from "../../../api/promotion.js";
+import { getCouponPage } from "../../api/promotion.js";
 
 export default {
   components: {

mobile-web/src/page/page/index.vue

@@ -1,11 +1,19 @@
 <template>
 <div :style="'background-color:'+((page.BackgroundColor==undefined||page.BackgroundColor=='')?'#fff':page.BackgroundColor)">
-    <div :style="'height:'+topheight+'px'" ></div>
+<!--    <div :style="'height:'+topheight+'px'" ></div>-->
 
     <!-- TODO 搜索框 -->
 <!--    <search v-if="item.Code=='Search'" :data="item.ParameterDictionary" v-on:settopheight="settopheight($event)" ></search>-->
 
-    <van-swipe :autoplay="3000" indicator-color="white" height="160">
+    <van-search
+            v-model="keyword"
+            placeholder="请输入搜索关键词"
+            show-action
+            @search="onSearch">
+        <div slot="action" @click="onSearch">搜索</div>
+    </van-search>
+
+    <van-swipe :autoplay="3000" indicator-color="white" :height="160">
         <van-swipe-item v-for="(banner, index) in banners" :key="index" >
             <a :href="banner.url">
                 <img :src="banner.picUrl" height="100%" width="100%" >
@@ -55,13 +63,14 @@
   import pageLine from "../../components/page/line.vue";
   import pageText from "../../components/page/text.vue";
   import notice from "../../components/page/notice.vue";
-  import search from "../../components/page/search.vue";
+  // import search from "../../components/page/search.vue";
   import pageTitle from "../../components/page/title.vue";
   import cube from "../../components/page/cube.vue";
   import imageAd from "../../components/page/imageAd.vue";
   import imageText from "../../components/page/imageText.vue";
   import product from "../../components/page/product.vue";
   import {getBannerList, getProductRecommendList} from '../../api/promotion.js';
+  import {Search} from "vant";
 
   export default {
     name:"page",
@@ -70,17 +79,21 @@
         pageLine,
         pageText,
         notice,
-        search,
+        // search,
         pageTitle,
         cube,
         [imageAd.name]:imageAd,
         imageText,
-        product
+        product,
+      [Search.name]: Search
     },
     data:function(){
         return{
-            topheight:0,
+          topheight:0,
-            page:{},
+          page:{},
+
+          keyword: '', // 搜索关键词
+
           banners: [], // Banner 列表
           productRecommends: [], // 推荐商品列表
         }
@@ -111,11 +124,17 @@
       //   debugger;
       //   console.log(event);
       // },
-      settopheight:function(value){
+      // settopheight:function(value){
-        this.topheight=value;
+      //   this.topheight=value;
-      },
+      // },
       showProduct(product){
         this.$router.push('/product/'+product.id);
+      },
+      onSearch: function () {
+        // debugger;
+        this.$router.push(
+          {name: '/product/search', params: {keyword: this.keyword}}
+        )
       }
     }
 }

mobile-web/src/page/product/search.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="product-list">
-        <searchtop @onSearch="onSearch"  />
+        <searchtop :keyword="keyword" @onSearch="onSearch"  />
         <div class="filterbar">
             <ul :class="filterSort?'show':''">
                 <li :class="filterIndex===0?'selected':''" v-on:click="onFilterBar(0)"><span>{{filterIndex==11?'价格最低':(filterIndex==12?'价格最高':'综合')}}</span><van-icon name="arrow" class="down" /></li>
@@ -192,7 +192,7 @@ export default {
       loading: false,
       finished: false,
 
-      keyword: "",
+      keyword: this.$route.params.keyword,
 
       filterIndex: 0,
       filterSort: false, // 是否展示几个【排序】
@@ -277,11 +277,13 @@ export default {
       });
     },
     onLoad() {
+      // debugger;
       // 进入下一页
       let page = this.page + 1;
       getProductPage({
         pageNo: page,
         pageSize: this.pageSize,
+        keyword: this.keyword,
       }).then(data => {
         this.handleData(page, data);
       });