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 1 <template>
2 2 <div class="list-com" :style="{backgroundColor: lists.backgroundColor}" v-if="lists && lists.list && lists.list.length">
  3 + <div class="spacing-box"></div>
3 4 <slot name="title"></slot>
4 5 <div class="line-top"></div>
5 6 <div class="box">
... ...
src/components/searchHistory/searchHistory.less
  View file @81c2d7a
1 1 @charset "UTF-8";
2 2  
3 3 .search-history-com {
4   - background-color: #ffffff;
  4 + background-color: transparent;
5 5 width: 100%;
6 6 height: auto;
7   - min-height: calc(100vh - 104px);
8 7 .title {
9 8 margin: 0 auto;
10 9 padding: 30px 0 20px 0;
... ...
src/pages/search/search.less
  View file @81c2d7a
1 1 @charset "UTF-8";
2 2  
3 3 .search-box {
4   - background-color: #F9F9F9;
  4 + background-color: #ffffff;
5 5 min-height: 100vh;
6 6 .nav {
7 7 position: fixed;
... ... @@ -13,7 +13,13 @@
13 13 width: 750px;
14 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 18 :searchHistoryArr="searchHistoryArr">
19 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 73 </div>
63 74 </template>
64 75  
... ... @@ -76,31 +87,35 @@
76 87 data () {
77 88 return {
78 89 title: "",
79   - searchHistoryArr: [],
80   - searchs: {
  90 + searchHistoryArr: [], // 搜索历史数组
  91 + displayPage: { // 展示页面设置
  92 + value: "all"
  93 + },
  94 + pages: 0, // 页码，点击更多是需要用到
  95 + searchs: { // 搜索组件配置参数
81 96 backgroundColor: "#FAFBFD",
82 97 borderColor: "#FC1541"
83 98 },
84   - coordinate: {
  99 + coordinate: { // 经纬度定位参数
85 100 longitude: "0",
86 101 latitude: "0"
87 102 },
88   - titles: {
  103 + titles: { // 板块标题
89 104 commodityTitle: "",
90 105 darenListTitle: "",
91 106 foodListTitle: ""
92 107 },
93   - commoditys: { // 商品数据
  108 + commoditys: { // 商品数据
94 109 style: "4",
95 110 backgroundColor: "#FFFFFF",
96 111 list: []
97 112 },
98   - darenLists: { // 达人数据
  113 + darenLists: { // 达人数据
99 114 style: "daren-list",
100 115 backgroundColor: "#FFFFFF",
101 116 list: []
102 117 },
103   - foodLists: { // 美食数据
  118 + foodLists: { // 美食数据
104 119 style: "5",
105 120 backgroundColor: "#FFFFFF",
106 121 list: []
... ... @@ -373,8 +388,12 @@
373 388 // 设置搜索结果
374 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 397 } else if (keyword === "") {
379 398  
380 399 // 和清空input同操作
... ...