w-front-end / select_good · Commits

Commit 81c2d7a99d170d56af2004314c7dc63cfeb7dc33

Authored by 王强
1 parent d2d543a4

开始做搜索单页~

Inline Side-by-side
Showing 4 changed files with 80 additions and 55 deletions
src/components/listCom/listCom.vue
  View file @81c2d7a
1 <template> 1 <template>
2 <div class="list-com" :style="{backgroundColor: lists.backgroundColor}" v-if="lists && lists.list && lists.list.length"> 2 <div class="list-com" :style="{backgroundColor: lists.backgroundColor}" v-if="lists && lists.list && lists.list.length">
  3 + <div class="spacing-box"></div>
3 <slot name="title"></slot> 4 <slot name="title"></slot>
4 <div class="line-top"></div> 5 <div class="line-top"></div>
5 <div class="box"> 6 <div class="box">
src/components/searchHistory/searchHistory.less
  View file @81c2d7a
1 @charset "UTF-8"; 1 @charset "UTF-8";
2 2
3 .search-history-com { 3 .search-history-com {
4 - background-color: #ffffff; 4 + background-color: transparent;
5 width: 100%; 5 width: 100%;
6 height: auto; 6 height: auto;
7 - min-height: calc(100vh - 104px);  
8 .title { 7 .title {
9 margin: 0 auto; 8 margin: 0 auto;
10 padding: 30px 0 20px 0; 9 padding: 30px 0 20px 0;
src/pages/search/search.less
  View file @81c2d7a
1 @charset "UTF-8"; 1 @charset "UTF-8";
2 2
3 .search-box { 3 .search-box {
4 - background-color: #F9F9F9; 4 + background-color: #ffffff;
5 min-height: 100vh; 5 min-height: 100vh;
6 .nav { 6 .nav {
7 position: fixed; 7 position: fixed;
@@ -13,7 +13,13 @@ @@ -13,7 +13,13 @@
13 width: 750px; 13 width: 750px;
14 height: 104px; 14 height: 104px;
15 } 15 }
16 - .list-com + .list-com {  
17 - margin-top: 14px; 16 + .page-all {
  17 + .list-com + .list-com {
  18 + /deep/ .spacing-box {
  19 + background-color: #F9F9F9;
  20 + width: 100%;
  21 + height: 14px;
  22 + }
  23 + }
18 } 24 }
19 } 25 }
src/pages/search/search.vue
  View file @81c2d7a
@@ -18,47 +18,58 @@ @@ -18,47 +18,58 @@
18 :searchHistoryArr="searchHistoryArr"> 18 :searchHistoryArr="searchHistoryArr">
19 </search-history> 19 </search-history>
20 20
21 - <!-- 搜索结果-商品 -->  
22 - <list-com @jump="toDetail" @primary="toShop"  
23 - :lists="commoditys">  
24 -  
25 - <!-- 标题 -->  
26 - <text-title-box slot="title" @more="more"  
27 - :titles="{  
28 - title: titles.commodityTitle,  
29 - more: true,  
30 - style: '2'  
31 - }">  
32 - </text-title-box>  
33 - </list-com>  
34 -  
35 - <!-- 搜索结果-达人 -->  
36 - <list-com @jump="toDarenProfile" @primary="fansShop"  
37 - :lists="darenLists">  
38 -  
39 - <!-- 标题 -->  
40 - <text-title-box slot="title" @more="more"  
41 - :titles="{  
42 - title: titles.darenListTitle,  
43 - more: true,  
44 - style: '2'  
45 - }">  
46 - </text-title-box>  
47 - </list-com>  
48 -  
49 - <!-- 搜索结果-美食 -->  
50 - <list-com @jump="toFood"  
51 - :lists="foodLists">  
52 -  
53 - <!-- 标题 -->  
54 - <text-title-box slot="title" @more="more"  
55 - :titles="{  
56 - title: titles.foodListTitle,  
57 - more: true,  
58 - style: '2'  
59 - }">  
60 - </text-title-box>  
61 - </list-com> 21 + <!-- 整页搜索 开始 -->
  22 +
  23 + <div class="page-all" v-if="displayPage.value == 'all'">
  24 +
  25 + <!-- 搜索结果-商品 -->
  26 + <list-com @jump="toDetail" @primary="toShop"
  27 + :lists="commoditys">
  28 +
  29 + <!-- 标题 -->
  30 + <text-title-box slot="title" @more="more"
  31 + :titles="{
  32 + title: titles.commodityTitle,
  33 + more: true,
  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: true,
  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: true,
  62 + style: '2'
  63 + }">
  64 + </text-title-box>
  65 + </list-com>
  66 + </div>
  67 +
  68 + <!-- 整页搜索 结束 -->
  69 +
  70 + <!-- 单独项目搜索，分页 开始 -->
  71 +
  72 + <!-- 单独项目搜索，分页 结束 -->
62 </div> 73 </div>
63 </template> 74 </template>
64 75
@@ -76,31 +87,35 @@ @@ -76,31 +87,35 @@
76 data () { 87 data () {
77 return { 88 return {
78 title: "", 89 title: "",
79 - searchHistoryArr: [],  
80 - searchs: { 90 + searchHistoryArr: [], // 搜索历史数组
  91 + displayPage: { // 展示页面设置
  92 + value: "all"
  93 + },
  94 + pages: 0, // 页码，点击更多是需要用到
  95 + searchs: { // 搜索组件配置参数
81 backgroundColor: "#FAFBFD", 96 backgroundColor: "#FAFBFD",
82 borderColor: "#FC1541" 97 borderColor: "#FC1541"
83 }, 98 },
84 - coordinate: { 99 + coordinate: { // 经纬度定位参数
85 longitude: "0", 100 longitude: "0",
86 latitude: "0" 101 latitude: "0"
87 }, 102 },
88 - titles: { 103 + titles: { // 板块标题
89 commodityTitle: "", 104 commodityTitle: "",
90 darenListTitle: "", 105 darenListTitle: "",
91 foodListTitle: "" 106 foodListTitle: ""
92 }, 107 },
93 - commoditys: { // 商品数据 108 + commoditys: { // 商品数据
94 style: "4", 109 style: "4",
95 backgroundColor: "#FFFFFF", 110 backgroundColor: "#FFFFFF",
96 list: [] 111 list: []
97 }, 112 },
98 - darenLists: { // 达人数据 113 + darenLists: { // 达人数据
99 style: "daren-list", 114 style: "daren-list",
100 backgroundColor: "#FFFFFF", 115 backgroundColor: "#FFFFFF",
101 list: [] 116 list: []
102 }, 117 },
103 - foodLists: { // 美食数据 118 + foodLists: { // 美食数据
104 style: "5", 119 style: "5",
105 backgroundColor: "#FFFFFF", 120 backgroundColor: "#FFFFFF",
106 list: [] 121 list: []
@@ -373,8 +388,12 @@ @@ -373,8 +388,12 @@
373 // 设置搜索结果 388 // 设置搜索结果
374 this.setSearchHistoryArr(keyword); 389 this.setSearchHistoryArr(keyword);
375 390
376 - // 进行搜索  
377 - this.globalSearch(keyword); 391 + // 判断进行哪个页面的搜索
  392 + if (this.displayPage.value == "all") {
  393 +
  394 + // 进行搜索
  395 + this.globalSearch(keyword);
  396 + }
378 } else if (keyword === "") { 397 } else if (keyword === "") {
379 398
380 // 和清空input同操作 399 // 和清空input同操作