w-front-end / select_good · Commits

Commit b3f9a9bc192b2e1289d2806258629cd1cbdd37c4

Authored by 王强
1 parent fd7d0255

搜索功能实现~

Inline Side-by-side
Showing 2 changed files with 303 additions and 81 deletions
src/pages/search/search.less
  View file @b3f9a9b
@@ -13,12 +13,14 @@ @@ -13,12 +13,14 @@
13 width: 750px; 13 width: 750px;
14 height: 104px; 14 height: 104px;
15 } 15 }
16 - .page-all {  
17 - .list-com + .list-com {  
18 - /deep/ .spacing-box {  
19 - background-color: #F9F9F9;  
20 - width: 100%;  
21 - height: 14px; 16 + .pages-box {
  17 + .infinite-box {
  18 + .list-com + .list-com {
  19 + /deep/ .spacing-box {
  20 + background-color: #F9F9F9;
  21 + width: 100%;
  22 + height: 14px;
  23 + }
22 } 24 }
23 } 25 }
24 } 26 }
src/pages/search/search.vue
  View file @b3f9a9b
@@ -14,62 +14,50 @@ @@ -14,62 +14,50 @@
14 <div class="pl" :style="'padding-top: ' + ($parent.top.value) + 'px'"></div> 14 <div class="pl" :style="'padding-top: ' + ($parent.top.value) + 'px'"></div>
15 15
16 <!-- 搜索历史 --> 16 <!-- 搜索历史 -->
17 - <search-history v-if="!commoditys.list.length && !darenLists.list.length && !foodLists.list.length" @jump="doConfirm" @clear="clearSearchHistoryArr" 17 + <search-history v-if="!goodsLists.list.length && !darenLists.list.length && !foodLists.list.length" @jump="doConfirm" @clear="clearSearchHistoryArr"
18 :searchHistoryArr="searchHistoryArr"> 18 :searchHistoryArr="searchHistoryArr">
19 </search-history> 19 </search-history>
20 20
21 <!-- 整页搜索 开始 --> 21 <!-- 整页搜索 开始 -->
22 22
23 - <div class="page-all" v-if="displayPage.value == 'all'"> 23 + <div class="pages-box">
24 24
25 - <!-- 搜索结果-商品 -->  
26 - <list-com @jump="toDetail" @primary="toShop"  
27 - :lists="commoditys"> 25 + <div class="infinite-box" infinite-scroll-immediate-check="true" v-infinite-scroll="loadMore" :infinite-scroll-disabled="paging.loading" :infinite-scroll-distance="paging.distance">
28 26
29 - <!-- 标题 -->  
30 - <text-title-box slot="title" @more="more"  
31 - :titles="{  
32 - title: titles.commodityTitle,  
33 - more: 'commodity',  
34 - style: '2'  
35 - }">  
36 - </text-title-box>  
37 - </list-com>  
38 -  
39 - <!-- 搜索结果-达人 -->  
40 - <list-com @jump="toDarenProfile" @primary="fansShop"  
41 - :lists="darenLists">  
42 -  
43 - <!-- 标题 -->  
44 - <text-title-box slot="title" @more="more"  
45 - :titles="{  
46 - title: titles.darenListTitle,  
47 - more: 'daren',  
48 - style: '2'  
49 - }">  
50 - </text-title-box>  
51 - </list-com>  
52 -  
53 - <!-- 搜索结果-美食 -->  
54 - <list-com @jump="toFood"  
55 - :lists="foodLists">  
56 -  
57 - <!-- 标题 -->  
58 - <text-title-box slot="title" @more="more"  
59 - :titles="{  
60 - title: titles.foodListTitle,  
61 - more: 'food',  
62 - style: '2'  
63 - }">  
64 - </text-title-box>  
65 - </list-com> 27 + <!-- 搜索结果-商品 -->
  28 + <list-com v-if="displayPage.value == displayPage.status.ALL || displayPage.value == displayPage.status.GOODS" @jump="toDetail" @primary="toShop"
  29 + :lists="goodsLists">
  30 +
  31 + <!-- 标题 -->
  32 + <text-title-box slot="title" @more="more"
  33 + :titles="titles.goods">
  34 + </text-title-box>
  35 + </list-com>
  36 +
  37 + <!-- 搜索结果-达人 -->
  38 + <list-com v-if="displayPage.value == displayPage.status.ALL || displayPage.value == displayPage.status.DAREN" @jump="toDarenProfile" @primary="fansShop"
  39 + :lists="darenLists">
  40 +
  41 + <!-- 标题 -->
  42 + <text-title-box slot="title" @more="more"
  43 + :titles="titles.daren">
  44 + </text-title-box>
  45 + </list-com>
  46 +
  47 + <!-- 搜索结果-美食 -->
  48 + <list-com v-if="displayPage.value == displayPage.status.ALL || displayPage.value == displayPage.status.FOOD" @jump="toFood"
  49 + :lists="foodLists">
  50 +
  51 + <!-- 标题 -->
  52 + <text-title-box slot="title" @more="more"
  53 + :titles="titles.food">
  54 + </text-title-box>
  55 + </list-com>
  56 + </div>
66 </div> 57 </div>
67 58
68 <!-- 整页搜索 结束 --> 59 <!-- 整页搜索 结束 -->
69 60
70 - <!-- 单独项目搜索，分页 开始 -->  
71 -  
72 - <!-- 单独项目搜索，分页 结束 -->  
73 </div> 61 </div>
74 </template> 62 </template>
75 63
@@ -88,10 +76,20 @@ @@ -88,10 +76,20 @@
88 return { 76 return {
89 title: "", 77 title: "",
90 searchHistoryArr: [], // 搜索历史数组 78 searchHistoryArr: [], // 搜索历史数组
91 - displayPage: { // 展示页面设置：all：全部分类；commodity：商品单页列表；daren：达人单页列表；food：美食单页列表；  
92 - value: "all" 79 + displayPage: { // 展示页面设置：all：全部分类；goods：商品单页列表；daren：达人单页列表；food：美食单页列表；
  80 + value: "all",
  81 + status: {
  82 + ALL: "all",
  83 + GOODS: "goods",
  84 + DAREN: "daren",
  85 + FOOD: "food"
  86 + }
  87 + },
  88 + paging: { // 分页参数，点击更多时需要用到
  89 + loading: true,
  90 + page: 0,
  91 + distance: 50
93 }, 92 },
94 - pages: 0, // 页码，点击更多是需要用到  
95 searchs: { // 搜索组件配置参数 93 searchs: { // 搜索组件配置参数
96 backgroundColor: "#FAFBFD", 94 backgroundColor: "#FAFBFD",
97 borderColor: "#FC1541" 95 borderColor: "#FC1541"
@@ -101,11 +99,23 @@ @@ -101,11 +99,23 @@
101 latitude: "0" 99 latitude: "0"
102 }, 100 },
103 titles: { // 板块标题 101 titles: { // 板块标题
104 - commodityTitle: "",  
105 - darenListTitle: "",  
106 - foodListTitle: "" 102 + goods: {
  103 + title: "",
  104 + more: false,
  105 + style: '2'
  106 + },
  107 + daren: {
  108 + title: "",
  109 + more: false,
  110 + style: '2'
  111 + },
  112 + food: {
  113 + title: "",
  114 + more: false,
  115 + style: '2'
  116 + }
107 }, 117 },
108 - commoditys: { // 商品数据 118 + goodsLists: { // 商品数据
109 style: "4", 119 style: "4",
110 backgroundColor: "#FFFFFF", 120 backgroundColor: "#FFFFFF",
111 list: [] 121 list: []
@@ -136,6 +146,50 @@ @@ -136,6 +146,50 @@
136 methods: { 146 methods: {
137 147
138 /** 148 /**
  149 + * 上拉加载
  150 + */
  151 + loadMore() {
  152 +
  153 + // 调用更多函数，处理loadMore逻辑
  154 + this.more();
  155 + },
  156 +
  157 + /**
  158 + * 更多
  159 + * @param {String} status [显示哪个列表的状态编码]
  160 + */
  161 + more(status = "") {
  162 +
  163 + // 设置展示的页面状态编码
  164 + if (status) {
  165 + this.$set(this.displayPage, "value", status);
  166 + }
  167 +
  168 + // 获取keyword/初始化页码
  169 + let keyword = window.sessionStorage.getItem("keyword") || this.$refs.searchCom.getKeyword();
  170 + this.$set(this.paging, "page", ++this.paging.page);
  171 +
  172 + // 根据displayPage的value，判断调用哪个单页面
  173 + switch (this.displayPage.value) {
  174 + case this.displayPage.status.GOODS: // 商品搜素
  175 +
  176 + // 商品搜素
  177 + this.goodsSearch(keyword);
  178 + break;
  179 + case this.displayPage.status.DAREN: // 达人搜素
  180 +
  181 + // 达人搜素
  182 + this.darenSearch(keyword);
  183 + break;
  184 + case this.displayPage.status.FOOD: // 美食搜素
  185 +
  186 + // 美食搜素
  187 + this.foodsSearch(keyword);
  188 + break;
  189 + }
  190 + },
  191 +
  192 + /**
139 * 全局搜索 193 * 全局搜索
140 * @param {String} keyword [搜索关键字] 194 * @param {String} keyword [搜索关键字]
141 */ 195 */
@@ -180,24 +234,204 @@ @@ -180,24 +234,204 @@
180 234
181 // 设置商品数据 235 // 设置商品数据
182 if (datas.goods.length) { 236 if (datas.goods.length) {
183 - this.$set(this.commoditys, "list", datas.goods);  
184 - this.$set(this.titles, "commodityTitle", ext.keyword + "-商品"); 237 + this.$set(this.goodsLists, "list", datas.goods);
  238 + this.$set(this.titles.goods, "title", ext.keyword + "-商品");
  239 + this.$set(this.titles.goods, "more", this.displayPage.status.GOODS);
185 } 240 }
186 241
187 // 设置达人数据 242 // 设置达人数据
188 if (datas.shop.length) { 243 if (datas.shop.length) {
189 this.$set(this.darenLists, "list", datas.shop); 244 this.$set(this.darenLists, "list", datas.shop);
190 - this.$set(this.titles, "darenListTitle", ext.keyword + "-达人"); 245 + this.$set(this.titles.daren, "title", ext.keyword + "-达人");
  246 + this.$set(this.titles.daren, "more", this.displayPage.status.DAREN);
191 } 247 }
192 - // 设置商品数据 248 +
  249 + // 设置美食数据
193 if (datas.foodsShop.length) { 250 if (datas.foodsShop.length) {
194 this.$set(this.foodLists, "list", datas.foodsShop); 251 this.$set(this.foodLists, "list", datas.foodsShop);
195 this.$set(this.foodLists, "coordinate", ext.coordinate); 252 this.$set(this.foodLists, "coordinate", ext.coordinate);
196 - this.$set(this.titles, "foodListTitle", ext.keyword + "-美食"); 253 + this.$set(this.titles.food, "title", ext.keyword + "-美食");
  254 + this.$set(this.titles.food, "more", this.displayPage.status.FOOD);
197 } 255 }
198 256
199 /* 获取全局搜索数据 结束 */ 257 /* 获取全局搜索数据 结束 */
200 258
  259 + // 设置全部分类搜索
  260 + this.displayPage.value = this.displayPage.status.ALL;
  261 +
  262 + // 初始化分页页码为0
  263 + this.$set(this.paging, "page", 0);
  264 + } else if (res.code == 400) {
  265 +
  266 + // 搜索失败
  267 + Toast(res.message);
  268 + } else {
  269 +
  270 + // 搜索失败
  271 + Toast("搜索失败");
  272 + }
  273 + },
  274 +
  275 + /**
  276 + * 商品搜索
  277 + * @param {String} keyword [搜索关键字]
  278 + */
  279 + goodsSearch(keyword) {
  280 +
  281 + // 加载中
  282 + this.$set(this.paging, "loading", true);
  283 +
  284 + // 加载中提示
  285 + Indicator.open("搜索中...");
  286 +
  287 + // 获取证书请求接口
  288 + this.http("/Api/" + this.getApiVersion().index + "/goodsSearch", {
  289 + keyword: keyword,
  290 + uid: this.getStore("uid"),
  291 + page: this.paging.page
  292 + }, this.pagingSearchCallback, {
  293 + method: "POST",
  294 + keyword
  295 + });
  296 + },
  297 +
  298 + /**
  299 + * 达人搜索
  300 + * @param {String} keyword [搜索关键字]
  301 + */
  302 + darenSearch(keyword) {
  303 +
  304 + // 加载中
  305 + this.$set(this.paging, "loading", true);
  306 +
  307 + // 加载中提示
  308 + Indicator.open("搜索中...");
  309 +
  310 + // 获取证书请求接口
  311 + this.http("/Api/" + this.getApiVersion().index + "/darenSearch", {
  312 + keyword: keyword,
  313 + uid: this.getStore("uid"),
  314 + page: this.paging.page
  315 + }, this.pagingSearchCallback, {
  316 + method: "POST",
  317 + keyword
  318 + });
  319 + },
  320 +
  321 + /**
  322 + * 美食搜索
  323 + * @param {String} keyword [搜索关键字]
  324 + */
  325 + foodsSearch(keyword) {
  326 +
  327 + // 加载中
  328 + this.$set(this.paging, "loading", true);
  329 +
  330 + // 加载中提示
  331 + Indicator.open("搜索中...");
  332 +
  333 + // 获取证书请求接口
  334 + this.http("/Api/" + this.getApiVersion().index + "/foodsSearch", {
  335 + keyword: keyword,
  336 + uid: this.getStore("uid"),
  337 + longitude: this.coordinate.longitude,
  338 + latitude: this.coordinate.latitude,
  339 + page: this.paging.page
  340 + }, this.pagingSearchCallback, {
  341 + method: "POST",
  342 + keyword,
  343 + coordinate: this.coordinate
  344 + });
  345 + },
  346 +
  347 + /**
  348 + * 分页搜索统一处理回调
  349 + * @param {object} res [服务器返回数据]
  350 + * @param {object} ext [扩展参数]
  351 + */
  352 + pagingSearchCallback(res, ext) {
  353 +
  354 + // 加载完成
  355 + Indicator.close();
  356 +
  357 + // 返回处理
  358 + if (res.code == 200) {
  359 +
  360 + // 解构数据
  361 + let { data: datas } = res;
  362 +
  363 + /* 获取搜索数据 开始 */
  364 +
  365 + // 判断搜索类型
  366 + switch (this.displayPage.value) {
  367 + case this.displayPage.status.GOODS: // 商品搜素
  368 +
  369 + // 设置商品数据
  370 + if (datas.goods.length) {
  371 +
  372 + // 判断数据处理方式
  373 + if (this.paging.page > 1) { // 追加数据
  374 + this.$set(this.goodsLists, "list", [...this.goodsLists.list, ...datas.goods]);
  375 + } else { // 初始化数据
  376 + this.$set(this.goodsLists, "list", datas.goods);
  377 + this.$set(this.titles.goods, "more", false);
  378 + }
  379 +
  380 + // 设置还有需要加载的内容
  381 + this.$set(this.paging, "loading", false);
  382 + } else {
  383 +
  384 + // 没有需要加载的内容，停止上拉加载
  385 + this.$set(this.paging, "loading", true);
  386 + }
  387 + break;
  388 + case this.displayPage.status.DAREN: // 达人搜素
  389 +
  390 + // 设置达人数据
  391 + if (datas.shop.length) {
  392 +
  393 + // 判断数据处理方式
  394 + if (this.paging.page > 1) {
  395 + this.$set(this.darenLists, "list", [...this.darenLists.list, ...datas.shop]);
  396 + } else {
  397 + this.$set(this.darenLists, "list", datas.shop);
  398 + this.$set(this.titles.daren, "more", false);
  399 + }
  400 +
  401 + // 设置还有需要加载的内容
  402 + this.$set(this.paging, "loading", false);
  403 + } else {
  404 +
  405 + // 没有需要加载的内容，停止上拉加载
  406 + this.$set(this.paging, "loading", true);
  407 + }
  408 + break;
  409 + case this.displayPage.status.FOOD: // 美食搜素
  410 +
  411 + // 设置美食数据
  412 + if (datas.foodsShop.length) {
  413 +
  414 + // 判断数据处理方式
  415 + if (this.paging.page > 1) {
  416 + this.$set(this.foodLists, "list", [...this.foodLists.list, ...datas.foodsShop]);
  417 + } else {
  418 + this.$set(this.foodLists, "list", datas.foodsShop);
  419 + this.$set(this.titles.food, "more", false);
  420 + this.$set(this.foodLists, "coordinate", ext.coordinate);
  421 + }
  422 +
  423 + // 设置还有需要加载的内容
  424 + this.$set(this.paging, "loading", false);
  425 + } else {
  426 +
  427 + // 没有需要加载的内容，停止上拉加载
  428 + this.$set(this.paging, "loading", true);
  429 + }
  430 + break;
  431 + }
  432 +
  433 + /* 获取搜索数据 结束 */
  434 +
201 } else if (res.code == 400) { 435 } else if (res.code == 400) {
202 436
203 // 搜索失败 437 // 搜索失败
@@ -282,16 +516,6 @@ @@ -282,16 +516,6 @@
282 }, 516 },
283 517
284 /** 518 /**
285 - * 更多  
286 - * @param {object} item [数据对象]  
287 - */  
288 - more(item) {  
289 -  
290 - // 设置展示的页面  
291 - this.$set(this.displayPage, "value", item);  
292 - },  
293 -  
294 - /**  
295 * 跳转商品详情 519 * 跳转商品详情
296 * @param {object} item [数据对象] 520 * @param {object} item [数据对象]
297 */ 521 */
@@ -384,12 +608,8 @@ @@ -384,12 +608,8 @@
384 // 设置搜索结果 608 // 设置搜索结果
385 this.setSearchHistoryArr(keyword); 609 this.setSearchHistoryArr(keyword);
386 610
387 - // 判断进行哪个页面的搜索  
388 - if (this.displayPage.value == "all") {  
389 -  
390 - // 进行搜索  
391 - this.globalSearch(keyword);  
392 - } 611 + // 进行搜索
  612 + this.globalSearch(keyword);
393 } else if (keyword === "") { 613 } else if (keyword === "") {
394 614
395 // 和清空input同操作 615 // 和清空input同操作
@@ -432,8 +652,8 @@ @@ -432,8 +652,8 @@
432 /* 初始化搜索对象数据 开始 */ 652 /* 初始化搜索对象数据 开始 */
433 653
434 // 初始化商品数据 654 // 初始化商品数据
435 - this.$set(this.commoditys, "list", []);  
436 - this.$set(this.titles, "commodityTitle", ""); 655 + this.$set(this.goodsLists, "list", []);
  656 + this.$set(this.titles, "goodsListTitle", "");
437 657
438 // 初始化达人数据 658 // 初始化达人数据
439 this.$set(this.darenLists, "list", []); 659 this.$set(this.darenLists, "list", []);