chore[litemall-vue]: 调整search页面

litemall-vue/src/router/items.js

@@ -20,15 +20,6 @@ export default [
     },
     component: () => import('@/views/items/search')
   },
-  {
-    path: '/items/search/result',
-    name: 'search-result',
-    meta: {
-      keepAlive: true
-    },
-    component: () => import('@/views/items/search-result'),
-    props: route => route.query
-  },
   {
     path: '/items/detail/:itemId',
     name: 'detail',

litemall-vue/src/views/items/search-result/index.vue

@@ -1,164 +0,0 @@
-<template>
-  <div class="item_list">
-    <form action="/search" class="fixedTop">
-      <van-search placeholder="请输入商品名称" v-model="searchVal" @search="resetInit" showAction/>
-    </form>
-
-    <van-list
-      v-model="loading"
-      :finished="finished"
-      :immediate-check="false"
-      :offset="100"
-      @load="loadMore"
-    >
-      <item-group>
-        <item-card-hori
-          v-for="(item) in items"
-          :key="item.id"
-          :goods="item"
-          @click="itemClick(item.id)"
-        />
-      </item-group>
-    </van-list>
-
-    <is-empty v-if="items.length === 0">抱歉,没有找到符合条件商品</is-empty>
-
-    <transition name="fade">
-      <van-icon name="arrowupcircle" class="backTop" @click.native="backTop" v-show="showArrow"></van-icon>
-    </transition>
-  </div>
-</template>
-
-<script>
-import { goodsList } from '@/api/api';
-import ItemGroup from '@/components/item-group/';
-import IsEmpty from '@/components/is-empty/';
-import ItemCardHori from '@/components/item-card-hori/';
-import { Search, List } from 'vant';
-import _ from 'lodash';
-
-import loadMore from '@/mixin/list-load-more';
-import scrollFixed from '@/mixin/scroll-fixed';
-
-export default {
-  name: 'Item-list',
-  props: {
-    keyword: {
-      type: String,
-      default: ''
-    }
-  },
-
-  mixins: [loadMore, scrollFixed],
-
-  data() {
-    return {
-      isEmpty: false,
-      shop_id: '',
-      searchVal: '',
-      showArrow: false
-    };
-  },
-
-  activated() {
-    this.searchVal = this.keyword;
-    this.resetInit();
-    this.eventListen();
-  },
-
-  deactivated() {
-    document
-      .getElementById('app')
-      .removeEventListener('scroll', this.scrollShowArrow);
-  },
-
-  created() {
-    this.initData();
-    this.scrollShowArrow = _.throttle(this.scrollShowArrow, 100);
-  },
-
-  methods: {
-    initData() {
-      this.items = [];
-
-      return this.$reqGet(
-        `/wx/goods/list`,
-        {
-          keyword: this.searchVal,
-          page: 1,
-          limit: 100,
-          sort: 'name',
-          order: 'desc',
-          categoryId: 0
-        },
-        {
-          hideLoading: true
-        }
-      ).then(res => {
-        const { goodsList, filterCategoryList } = res.data.data;
-        _.each(goodsList, v => {
-          v.pic_url = v.picUrl;
-        });
-        this.items.push(...goodsList);
-        // return page;
-      });
-    },
-    eventListen() {
-      document
-        .getElementById('app')
-        .addEventListener('scroll', this.scrollShowArrow);
-    },
-    scrollShowArrow() {
-      this.showArrow = document.getElementById('app').scrollTop > 120;
-    },
-    backTop() {
-      document.getElementById('app').scrollTop = 0;
-    },
-    itemClick(i) {
-      this.$router.push({ name: 'detail', params: { itemId: i } });
-    }
-  },
-
-  components: {
-    [ItemGroup.name]: ItemGroup,
-    [ItemCardHori.name]: ItemCardHori,
-    [Search.name]: Search,
-    [List.name]: List,
-    [IsEmpty.name]: IsEmpty
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-.fade-enter,
-.fade-leave-to {
-  opacity: 0;
-}
-
-.fade-enter-active,
-.fade-leave-active {
-  transition: all 0.5s;
-}
-
-.item_list {
-  background-color: #fff;
-  padding-top: 50px;
-  box-sizing: border-box;
-}
-.fixedTop {
-  position: fixed;
-  width: 100%;
-  top: 0;
-  z-index: 999;
-}
-
-.items_loading {
-  margin: 0 auto;
-}
-.backTop {
-  position: fixed;
-  right: 20px;
-  bottom: 20px;
-  font-size: 24px;
-}
-</style>

litemall-vue/src/views/items/search/index.vue

@@ -16,36 +16,72 @@
           plain
 					v-for="(his, i) in wordHistory"
 					:key="i"
-					@click="toSearchResult(his)"
+					@click="clickSearch(his)"
 				>{{his}}</van-tag>
 			</div>
 		</div>
+
+    
+    <van-list
+      v-model="loading"
+      :finished="finished"
+      :immediate-check="false"
+      @load="loadMore"
+    >
+      <item-group>
+        <item-card-hori
+          v-for="(item) in list"
+          :key="item.id"
+          :goods="item"
+          @click="itemClick(item.id)"
+        />
+      </item-group>
+    </van-list>
+
+    <is-empty v-if="isEmpty">抱歉,没有找到符合条件商品</is-empty>
 	</div>
 </template>
 
 <script>
-import { Search, Tag } from 'vant';
+import { Search, Tag, List } from 'vant';
+import { goodsList } from '@/api/api';
+import ItemGroup from '@/components/item-group/';
+import IsEmpty from '@/components/is-empty/';
+import ItemCardHori from '@/components/item-card-hori/';
 
 export default {
   data() {
     return {
       keyword: '',
       focusStatus: true,
-      wordHistory: []
+      wordHistory: [],
+      list: [],
+      page: 1,
+      limit: 10,
+      pages: 0,
+      loading: false,
+      finished: false,
+      isEmpty: false    
     };
   },
   methods: {
     enterSearch() {
-      const keyword = this.keyword;
-      this.pushHistoryTolocal(keyword);
-      this.toSearchResult(keyword);
+      this.reset();
+      this.searchGoods();
     },
-    toSearchResult(word) {
+    clickSearch(word) {
       this.keyword = word.trim();
-      this.$router.push({
-        name: 'search-result',
-        query: { keyword: word.trim() }
-      });
+      this.reset();
+      this.searchGoods();
+    },
+    reset() {
+      this.list = [];
+      this.page = 1;
+      this.limit = 10;
+      this.total = 0;
+      this.loading = false;
+      this.finished = false;
+      this.isEmpty = false;
     },
     pushHistoryTolocal(keyword) {
       const wordHistory = this.wordHistory;
@@ -71,14 +107,41 @@ export default {
     },
     disabledSubmit() {
       return false;
-    }
+    },
+    searchGoods() {
+      goodsList({
+          keyword: this.keyword,
+          page: this.page,
+          limit: this.limit,
+          categoryId: 0
+        }).then(res => {
+        var data = res.data.data;
+        this.list.push(...data.list);
+        this.page = data.page;
+        this.limit = data.limit;
+        this.pages = data.pages;
+      });
+    },
+    async loadMore() {
+      this.loading = false;
+      this.page += 1;
+      await this.searchGoods();
+      this.loading = false;
+      if (this.pages <= this.page) {
+        this.finished = true;
+      }
+    },
   },
   activated() {
     this.wordHistory = this.getKeyWordHistory();
   },
   components: {
     [Search.name]: Search,
-    [Tag.name]: Tag
+    [Tag.name]: Tag,
+    [ItemGroup.name]: ItemGroup,
+    [ItemCardHori.name]: ItemCardHori,
+    [List.name]: List,
+    [IsEmpty.name]: IsEmpty    
   }
 };
 </script>