w-front-end / select_good · Commits

Commit d2d543a4af3cbef9c05ee1b646ed46af710519f3

Authored by 王强
1 parent 5dfbad1c

搜索接口对接中，全部搜索对接完成，历史搜索完成~

Inline Side-by-side
Showing 11 changed files with 596 additions and 338 deletions
src/components/darenList/darenList.vue
  View file @d2d543a
@@ -11,7 +11,7 @@ @@ -11,7 +11,7 @@
11 {{item.title}} 11 {{item.title}}
12 </div> 12 </div>
13 <div class="desc"> 13 <div class="desc">
14 - {{item.fans}}粉丝 14 + {{item.fans_count}}粉丝
15 </div> 15 </div>
16 </div> 16 </div>
17 </div> 17 </div>
src/components/goodsItem_4/goodsItem_4.vue
  View file @d2d543a
@@ -14,9 +14,9 @@ @@ -14,9 +14,9 @@
14 <div class="integer">{{getInteger(item.price)}}.</div> 14 <div class="integer">{{getInteger(item.price)}}.</div>
15 <div class="decimal">{{getDecimal(item.price)}}</div> 15 <div class="decimal">{{getDecimal(item.price)}}</div>
16 </div> 16 </div>
17 - <div class="shop-box" @click.stop.prevent="primary(item)"> 17 + <div class="shop-box" v-if="item.shop && item.shop.title && item.shop.shop_url" @click.stop.prevent="primary(item.shop)">
18 <div class="shop-name"> 18 <div class="shop-name">
19 - 领头雁自营店 19 + {{item.shop.title}}
20 </div> 20 </div>
21 <div class="buttons-box"> 21 <div class="buttons-box">
22 <div class="btn btn-primary">进店&gt;</div> 22 <div class="btn btn-primary">进店&gt;</div>
src/components/goodsItem_5/goodsItem_5.less
  View file @d2d543a
@@ -12,15 +12,14 @@ @@ -12,15 +12,14 @@
12 height: auto; 12 height: auto;
13 .left-box { 13 .left-box {
14 display: flex; 14 display: flex;
15 - justify-content: space-between; 15 + justify-content: flex-start;
16 align-items: center; 16 align-items: center;
17 - width: 570px; 17 + width: 690px;
18 .img-box { 18 .img-box {
19 display: flex; 19 display: flex;
20 justify-content: center; 20 justify-content: center;
21 align-items: center; 21 align-items: center;
22 background-color: transparent; 22 background-color: transparent;
23 - // margin: 0 auto;  
24 width: 160px; 23 width: 160px;
25 height: 160px; 24 height: 160px;
26 border-radius: 8px; 25 border-radius: 8px;
@@ -36,10 +35,11 @@ @@ -36,10 +35,11 @@
36 flex-direction: column; 35 flex-direction: column;
37 justify-content: space-between; 36 justify-content: space-between;
38 align-items: center; 37 align-items: center;
39 - width: 380px; 38 + margin-left: 30px;
  39 + width: 500px;
40 height: 100%; 40 height: 100%;
41 .top-box { 41 .top-box {
42 - width: 380px; 42 + width: 500px;
43 .title { 43 .title {
44 color: #333333; 44 color: #333333;
45 font-size: 28px; 45 font-size: 28px;
@@ -65,17 +65,18 @@ @@ -65,17 +65,18 @@
65 } 65 }
66 } 66 }
67 .bottom-box { 67 .bottom-box {
68 - width: 380px; 68 + width: 500px;
69 white-space: nowrap; 69 white-space: nowrap;
70 text-overflow: ellipsis; 70 text-overflow: ellipsis;
71 overflow: hidden; 71 overflow: hidden;
72 - .flag {  
73 - display: inline;  
74 - background-color: #FFF2F5;  
75 - padding: 1px 8px;  
76 - color: #FC1541;  
77 - font-size: 20px;  
78 - border-radius: 4px; 72 + .flag-box {
  73 + width: 345px;
  74 + height: 42px;
  75 + .flag-img {
  76 + display: block;
  77 + width: 345px;
  78 + height: 42px;
  79 + }
79 } 80 }
80 } 81 }
81 } 82 }
@@ -94,4 +95,23 @@ @@ -94,4 +95,23 @@
94 } 95 }
95 } 96 }
96 } 97 }
  98 + &.juli {
  99 + .left-box {
  100 + justify-content: space-between;
  101 + width: 570px;
  102 + .content-box {
  103 + margin-left: 0;
  104 + width: 380px;
  105 + .top-box {
  106 + width: 380px;
  107 + }
  108 + .bottom-box {
  109 + width: 380px;
  110 + }
  111 + }
  112 + }
  113 + .right-box {
  114 + width: 120px;
  115 + }
  116 + }
97 } 117 }
src/components/goodsItem_5/goodsItem_5.vue
  View file @d2d543a
1 <template> 1 <template>
2 - <div class="goods-item-5-box" v-if="item" @click="jump(item)"> 2 + <div class="goods-item-5-box" :class="{'juli': coordinate && (coordinate.longitude != '0' || coordinate.latitude != '0')}" v-if="item" @click="jump(item)">
3 <div class="main-box"> 3 <div class="main-box">
4 <div class="left-box"> 4 <div class="left-box">
5 <div class="img-box"> 5 <div class="img-box">
@@ -9,20 +9,20 @@ @@ -9,20 +9,20 @@
9 <div class="top-box"> 9 <div class="top-box">
10 <div class="title">{{item.title}}</div> 10 <div class="title">{{item.title}}</div>
11 <div class="desc-box"> 11 <div class="desc-box">
12 - <div class="desc">评价：{{item.evaluate}}</div>  
13 - <div class="desc">月销：{{item.count}}</div> 12 + <div class="desc">评价：{{item.grade}}</div>
  13 + <div class="desc">月销：{{item.sale_count}}</div>
14 </div> 14 </div>
15 </div> 15 </div>
16 <div class="bottom-box"> 16 <div class="bottom-box">
17 - <div class="flag" v-if="item.flag">  
18 - {{item.flag}} 17 + <div class="flag-box" v-if="item.foods_top_img">
  18 + <img :src="item.foods_top_img" class="flag-img" />
19 </div> 19 </div>
20 </div> 20 </div>
21 </div> 21 </div>
22 </div> 22 </div>
23 - <div class="right-box"> 23 + <div class="right-box" v-if="coordinate && (coordinate.longitude != '0' || coordinate.latitude != '0')">
24 <div class="distance-box"> 24 <div class="distance-box">
25 - {{item.distance}} 25 + {{item.juli}}m
26 </div> 26 </div>
27 </div> 27 </div>
28 </div> 28 </div>
@@ -36,7 +36,7 @@ @@ -36,7 +36,7 @@
36 36
37 } 37 }
38 }, 38 },
39 - props: ["item"], 39 + props: ["item", "coordinate"],
40 computed: { 40 computed: {
41 41
42 /** 42 /**
@@ -65,7 +65,6 @@ @@ -65,7 +65,6 @@
65 } 65 }
66 } 66 }
67 } 67 }
68 -  
69 }, 68 },
70 methods: { 69 methods: {
71 70
src/components/listCom/listCom.vue
  View file @d2d543a
@@ -14,7 +14,8 @@ @@ -14,7 +14,8 @@
14 14
15 <!-- 美食列表 --> 15 <!-- 美食列表 -->
16 <goods-item-5 v-if="lists.style == '5'" @jump="jump" 16 <goods-item-5 v-if="lists.style == '5'" @jump="jump"
17 - :item="item"> 17 + :item="item"
  18 + :coordinate="lists.coordinate">
18 </goods-item-5> 19 </goods-item-5>
19 20
20 <!-- 达人列表 --> 21 <!-- 达人列表 -->
src/components/searchCom/searchCom.less
  View file @d2d543a
@@ -21,42 +21,44 @@ @@ -21,42 +21,44 @@
21 border: 3px solid #f9f9ff; 21 border: 3px solid #f9f9ff;
22 border-radius: 32px; 22 border-radius: 32px;
23 .left-box { 23 .left-box {
24 - display: flex;  
25 - align-items: center;  
26 - .search-icon {  
27 - margin: 16px 20px 16px 30px;  
28 - width: 32px;  
29 - height: 32px;  
30 - .search-img {  
31 - display: block; 24 + .search-form {
  25 + display: flex;
  26 + align-items: center;
  27 + .search-icon {
  28 + margin: 16px 20px 16px 30px;
32 width: 32px; 29 width: 32px;
33 height: 32px; 30 height: 32px;
  31 + .search-img {
  32 + display: block;
  33 + width: 32px;
  34 + height: 32px;
  35 + }
34 } 36 }
35 - }  
36 - .line {  
37 - background-color: #858585;  
38 - margin-right: 20px;  
39 - width: 1px;  
40 - height: 22px;  
41 - }  
42 - .input-box {  
43 - width: 440px;  
44 - height: 64px;  
45 - .keyword {  
46 - background-color: transparent;  
47 - padding: 0;  
48 - color: #333333;  
49 - font-size: 26px;  
50 - width: 100%;  
51 - height: 100%;  
52 - border: none;  
53 - outline: none;  
54 - &::placeholder {  
55 - color: #C8C8C8; 37 + .line {
  38 + background-color: #858585;
  39 + margin-right: 20px;
  40 + width: 1px;
  41 + height: 22px;
  42 + }
  43 + .input-box {
  44 + width: 440px;
  45 + height: 64px;
  46 + .keyword {
  47 + background-color: transparent;
  48 + padding: 0;
  49 + color: #333333;
56 font-size: 26px; 50 font-size: 26px;
57 - }  
58 - &::-webkit-search-cancel-button {  
59 - display: none; 51 + width: 100%;
  52 + height: 100%;
  53 + border: none;
  54 + outline: none;
  55 + &::placeholder {
  56 + color: #C8C8C8;
  57 + font-size: 26px;
  58 + }
  59 + &::-webkit-search-cancel-button {
  60 + display: none;
  61 + }
60 } 62 }
61 } 63 }
62 } 64 }
src/components/searchCom/searchCom.vue
  View file @d2d543a
@@ -3,22 +3,24 @@ @@ -3,22 +3,24 @@
3 <div class="box"> 3 <div class="box">
4 <div class="search-group" :style="'border-color: ' + defaultSearchs.borderColor"> 4 <div class="search-group" :style="'border-color: ' + defaultSearchs.borderColor">
5 <div class="left-box"> 5 <div class="left-box">
6 - <div class="search-icon">  
7 - <img src="static/img/icon_search.png" class="search-img" />  
8 - </div>  
9 - <div class="line"></div>  
10 - <div class="input-box">  
11 - <input type="search" :placeholder="defaultSearchs.pl" :maxlength="defaultSearchs.maxlength" v-model="defaultSearchs.keyword" class="keyword" @blur="onBlur" />  
12 - </div> 6 + <form class="search-form" action="" onsubmit="return false;">
  7 + <div class="search-icon">
  8 + <img src="static/img/icon_search.png" class="search-img" />
  9 + </div>
  10 + <div class="line"></div>
  11 + <div class="input-box">
  12 + <input type="search" :placeholder="defaultSearchs.pl" :maxlength="defaultSearchs.maxlength" v-model="defaultSearchs.keyword" class="keyword" @keyup="confirm(defaultSearchs.keyword, $event)" @blur="onBlur" />
  13 + </div>
  14 + </form>
13 </div> 15 </div>
14 <div class="right-box"> 16 <div class="right-box">
15 - <div class="clear-input-box" v-if="defaultSearchs.keyword"> 17 + <div class="clear-input-box" v-if="defaultSearchs.keyword" @click="clearInput">
16 <img src="static/img/icon_clear_input.png" class="clear-input-img" /> 18 <img src="static/img/icon_clear_input.png" class="clear-input-img" />
17 </div> 19 </div>
18 </div> 20 </div>
19 </div> 21 </div>
20 <div class="buttons-box"> 22 <div class="buttons-box">
21 - <div class="btn btn-primary" :style="'color: ' + defaultSearchs.borderColor" @click="doCancel">{{defaultSearchs.btnText}}</div> 23 + <div class="btn btn-primary" :style="'color: ' + defaultSearchs.borderColor" @click="cancel">{{defaultSearchs.btnText}}</div>
22 </div> 24 </div>
23 </div> 25 </div>
24 </div> 26 </div>
@@ -58,16 +60,33 @@ @@ -58,16 +60,33 @@
58 60
59 /** 61 /**
60 * 搜索 62 * 搜索
61 - * @param {object} item [数据对象] 63 + * @param {string} keyword [搜索关键字]
  64 + * @param {object} e [事件对象]
62 */ 65 */
63 - doSearch(item) {  
64 - this.$emit("search", item); 66 + confirm(keyword, e) {
  67 +
  68 + // 判断按下的按键是不是回车（确认）
  69 + if ((keyword && e.keyCode === 13) || (!keyword && e.keyCode === 8)) {
  70 + this.$emit("confirm", keyword);
  71 + }
  72 + },
  73 +
  74 + /**
  75 + * 清除input信息
  76 + */
  77 + clearInput() {
  78 +
  79 + // 清除input内容
  80 + this.$set(this.defaultSearchs, "keyword", "");
  81 +
  82 + // 设置清除input事件
  83 + this.$emit("clearInput");
65 }, 84 },
66 85
67 /** 86 /**
68 * 取消按钮 87 * 取消按钮
69 */ 88 */
70 - doCancel() { 89 + cancel() {
71 this.$emit("cancel"); 90 this.$emit("cancel");
72 }, 91 },
73 92
src/components/searchHistory/searchHistory.less 0 → 100644
  View file @d2d543a
  1 +@charset "UTF-8";
  2 +
  3 +.search-history-com {
  4 + background-color: #ffffff;
  5 + width: 100%;
  6 + height: auto;
  7 + min-height: calc(100vh - 104px);
  8 + .title {
  9 + margin: 0 auto;
  10 + padding: 30px 0 20px 0;
  11 + color: #898989;
  12 + font-size: 28px;
  13 + width: 690px;
  14 + height: auto;
  15 + }
  16 + .box {
  17 + margin: 0 auto;
  18 + width: 690px;
  19 + height: auto;
  20 + .list-box {
  21 + .item {
  22 + background-color: #F9F9F9;
  23 + margin-top: 10px;
  24 + margin-right: 30px;
  25 + color: #666666;
  26 + font-size: 26px;
  27 + width: 150px;
  28 + height: 58px;
  29 + border-radius: 10px;
  30 + float: left;
  31 + &:nth-child(4n) {
  32 + margin-right: 0;
  33 + }
  34 + .text {
  35 + display: flex;
  36 + justify-content: center;
  37 + align-items: center;
  38 + margin: 0 auto;
  39 + width: 120px;
  40 + height: 58px;
  41 + white-space: nowrap;
  42 + text-overflow: ellipsis;
  43 + overflow: hidden;
  44 + }
  45 + }
  46 + }
  47 + }
  48 + .line {
  49 + clear: both;
  50 + margin: 0 auto;
  51 + width: 690px;
  52 + height: 30px;
  53 + border-bottom: 1px solid #F2F2F2;
  54 + }
  55 + .buttons-box {
  56 + clear: both;
  57 + display: flex;
  58 + justify-content: center;
  59 + align-items: center;
  60 + margin: 30px auto;
  61 + width: 690px;
  62 + height: auto;
  63 + .btn {
  64 + &.btn-primary {
  65 + color: #F5A623;
  66 + font-size: 26px;
  67 + font-weight: 400;
  68 + }
  69 + }
  70 + }
  71 +}
src/components/searchHistory/searchHistory.vue 0 → 100644
  View file @d2d543a
  1 +<template>
  2 + <div class="search-history-com" v-if="searchHistoryArr.length">
  3 + <div class="title">历史搜索</div>
  4 + <div class="box">
  5 + <div class="list-box">
  6 + <div class="item" v-for="(item, index) in searchHistoryArr" :key="index" @click="jump(item)">
  7 + <div class="text">{{item}}</div>
  8 + </div>
  9 + </div>
  10 + <div class="line"></div>
  11 + <div class="buttons-box">
  12 + <div class="btn btn-primary" @click="clear">清除搜索历史</div>
  13 + </div>
  14 + </div>
  15 + </div>
  16 +</template>
  17 +
  18 +<script>
  19 + export default {
  20 + data: function () {
  21 + return {
  22 +
  23 + }
  24 + },
  25 + props: ["searchHistoryArr"],
  26 + methods: {
  27 +
  28 + /**
  29 + * 点击跳转
  30 + * @param {object} item [数据对象]
  31 + */
  32 + jump(item) {
  33 + this.$emit("jump", item);
  34 + },
  35 +
  36 + /**
  37 + * 清除搜索历史
  38 + */
  39 + clear(item) {
  40 + this.$emit("clear");
  41 + }
  42 + }
  43 + }
  44 +</script>
  45 +
  46 +<!-- Add "scoped" attribute to limit CSS to this component only -->
  47 +<style rel="stylesheet/less" lang="less" scoped>
  48 + @import './searchHistory';
  49 +</style>
src/pages/common/common.vue
  View file @d2d543a
@@ -577,16 +577,16 @@ @@ -577,16 +577,16 @@
577 577
578 578
579 break; 579 break;
580 - case "24": // 跳转达人详情页，跟参数from=redirect 580 + case "24": // 跳转达人个人主页，跟参数from=redirect
581 581
582 - // 达人详情页连接 582 + // 达人个人主页连接
583 if (item.to) { 583 if (item.to) {
584 window.location.href = (this.mode == "prod") ? "https://managemall.cnlive.com/html/preferred-library/1/#/pages/darenProfile/darenProfile?id=" + item.to + "&from=redirect" : "https://wjjshop.cnlive.com/html/preferred-library/1/#/pages/darenProfile/darenProfile?id=" + item.to + "&from=redirect"; 584 window.location.href = (this.mode == "prod") ? "https://managemall.cnlive.com/html/preferred-library/1/#/pages/darenProfile/darenProfile?id=" + item.to + "&from=redirect" : "https://wjjshop.cnlive.com/html/preferred-library/1/#/pages/darenProfile/darenProfile?id=" + item.to + "&from=redirect";
585 } 585 }
586 break; 586 break;
587 - case "25": // 跳转达人详情页，跟参数from=redirect 587 + case "25": // 跳转达人动态详情页，跟参数from=redirect
588 588
589 - // 达人详情页连接 589 + // 达人动态详情页连接
590 if (item.id) { 590 if (item.id) {
591 window.location.href = (this.mode == "prod") ? "https://managemall.cnlive.com/html/preferred-library/1/#/pages/darenProfileDynamicDetail/darenProfileDynamicDetail?id=" + item.id + "&from=redirect" : "https://wjjshop.cnlive.com/html/preferred-library/1/#/pages/darenProfileDynamicDetail/darenProfileDynamicDetail?id=" + item.id + "&from=redirect"; 591 window.location.href = (this.mode == "prod") ? "https://managemall.cnlive.com/html/preferred-library/1/#/pages/darenProfileDynamicDetail/darenProfileDynamicDetail?id=" + item.id + "&from=redirect" : "https://wjjshop.cnlive.com/html/preferred-library/1/#/pages/darenProfileDynamicDetail/darenProfileDynamicDetail?id=" + item.id + "&from=redirect";
592 } 592 }
src/pages/search/search.vue
  View file @d2d543a
1 <template> 1 <template>
2 <div class="search-box"> 2 <div class="search-box">
3 3
4 - <!-- nav -->  
5 - <div class="nav" :style="'padding-top: ' + ($parent.top.value) + 'px'">  
6 -  
7 - <!-- 搜索组件 -->  
8 - <search-com @cancel="doCancel"  
9 - :searchs="searchs">  
10 - </search-com>  
11 - </div>  
12 -  
13 - <!-- pl占位 -->  
14 - <div class="pl" :style="'padding-top: ' + ($parent.top.value) + 'px'"></div>  
15 -  
16 - <!-- 搜索结果-商品 -->  
17 - <list-com @jump="toDetail" @primary="toShop"  
18 - :lists="commoditys">  
19 -  
20 - <!-- 标题 -->  
21 - <text-title-box slot="title" @more="more"  
22 - :titles="{  
23 - title: '苹果-商品',  
24 - more: true,  
25 - style: '2'  
26 - }">  
27 - </text-title-box>  
28 - </list-com>  
29 -  
30 - <!-- 搜索结果-达人 -->  
31 - <list-com @jump="toDarenProfile" @primary="fansShop"  
32 - :lists="darenLists">  
33 -  
34 - <!-- 标题 -->  
35 - <text-title-box slot="title" @more="more"  
36 - :titles="{  
37 - title: '苹果-达人',  
38 - more: true,  
39 - style: '2'  
40 - }">  
41 - </text-title-box>  
42 - </list-com>  
43 -  
44 - <!-- 搜索结果-美食 -->  
45 - <list-com @jump="toFood"  
46 - :lists="foodList">  
47 -  
48 - <!-- 标题 -->  
49 - <text-title-box slot="title" @more="more"  
50 - :titles="{  
51 - title: '苹果-美食',  
52 - more: true,  
53 - style: '2'  
54 - }">  
55 - </text-title-box>  
56 - </list-com>  
57 -  
58 -  
59 -  
60 -  
61 - 4 + <!-- nav -->
  5 + <div class="nav" :style="'padding-top: ' + ($parent.top.value) + 'px'">
  6 +
  7 + <!-- 搜索组件 -->
  8 + <search-com ref="searchCom" @confirm="doConfirm" @cancel="doCancel" @clearInput="clearInput"
  9 + :searchs="searchs">
  10 + </search-com>
  11 + </div>
  12 +
  13 + <!-- pl占位 -->
  14 + <div class="pl" :style="'padding-top: ' + ($parent.top.value) + 'px'"></div>
  15 +
  16 + <!-- 搜索历史 -->
  17 + <search-history v-if="!commoditys.list.length && !darenLists.list.length && !foodLists.list.length" @jump="doConfirm" @clear="clearSearchHistoryArr"
  18 + :searchHistoryArr="searchHistoryArr">
  19 + </search-history>
  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>
62 </div> 62 </div>
63 </template> 63 </template>
64 64
@@ -67,128 +67,51 @@ @@ -67,128 +67,51 @@
67 // 引入组件 67 // 引入组件
68 import { Toast, Indicator } from "mint-ui"; 68 import { Toast, Indicator } from "mint-ui";
69 import searchCom from "@/components/searchCom/searchCom"; 69 import searchCom from "@/components/searchCom/searchCom";
  70 + import searchHistory from "@/components/searchHistory/searchHistory";
70 import textTitleBox from "@/components/textTitleBox/textTitleBox"; 71 import textTitleBox from "@/components/textTitleBox/textTitleBox";
71 import listCom from "@/components/listCom/listCom"; 72 import listCom from "@/components/listCom/listCom";
72 73
73 -  
74 -  
75 -  
76 -  
77 export default { 74 export default {
78 name: 'search', 75 name: 'search',
79 data () { 76 data () {
80 return { 77 return {
81 title: "", 78 title: "",
  79 + searchHistoryArr: [],
82 searchs: { 80 searchs: {
83 backgroundColor: "#FAFBFD", 81 backgroundColor: "#FAFBFD",
84 borderColor: "#FC1541" 82 borderColor: "#FC1541"
85 }, 83 },
86 - commoditys: { 84 + coordinate: {
  85 + longitude: "0",
  86 + latitude: "0"
  87 + },
  88 + titles: {
  89 + commodityTitle: "",
  90 + darenListTitle: "",
  91 + foodListTitle: ""
  92 + },
  93 + commoditys: { // 商品数据
87 style: "4", 94 style: "4",
88 backgroundColor: "#FFFFFF", 95 backgroundColor: "#FFFFFF",
89 - list: [  
90 - {  
91 - simg: "static/img/9.png",  
92 - title: "覆盆子苹果礼盒套装",  
93 - price: "299.90"  
94 - },  
95 - {  
96 - simg: "static/img/9.png",  
97 - title: "覆盆子苹果礼盒套装",  
98 - price: "299.90"  
99 - },  
100 - {  
101 - simg: "static/img/9.png",  
102 - title: "覆盆子苹果礼盒套装",  
103 - price: "299.90"  
104 - }  
105 - ] 96 + list: []
106 }, 97 },
107 - darenLists: { 98 + darenLists: { // 达人数据
108 style: "daren-list", 99 style: "daren-list",
109 backgroundColor: "#FFFFFF", 100 backgroundColor: "#FFFFFF",
110 - list: [  
111 - {  
112 - user_img: "static/img/6.png",  
113 - title: "万能苹果",  
114 - fans: "222",  
115 - is_fans: "0"  
116 - },  
117 - {  
118 - user_img: "static/img/6.png",  
119 - title: "全球小苹果",  
120 - fans: "999",  
121 - is_fans: "0"  
122 - },  
123 - {  
124 - user_img: "static/img/6.png",  
125 - title: "健身小苹果",  
126 - fans: "222",  
127 - is_fans: "0"  
128 - },  
129 - {  
130 - user_img: "static/img/6.png",  
131 - title: "全球小苹果",  
132 - fans: "10",  
133 - is_fans: "1"  
134 - },  
135 - {  
136 - user_img: "static/img/6.png",  
137 - title: "健身小苹果",  
138 - fans: "1000",  
139 - is_fans: "1"  
140 - }  
141 - ] 101 + list: []
142 }, 102 },
143 - foodList: { 103 + foodLists: { // 美食数据
144 style: "5", 104 style: "5",
145 backgroundColor: "#FFFFFF", 105 backgroundColor: "#FFFFFF",
146 - list: [  
147 - {  
148 - simg: "static/img/9.png",  
149 - title: "食色天香（外文大厦店）",  
150 - evaluate: "4.6",  
151 - count: "1234",  
152 - flag: "网家家城市推荐TOP 100",  
153 - distance: "456m"  
154 - },  
155 - {  
156 - simg: "static/img/9.png",  
157 - title: "食色天香（外文大厦店）",  
158 - evaluate: "4.6",  
159 - count: "1234",  
160 - flag: "网家家城市推荐TOP 100",  
161 - distance: "456km"  
162 - },  
163 - {  
164 - simg: "static/img/9.png",  
165 - title: "食色天香（外文大厦店）",  
166 - evaluate: "4.6",  
167 - count: "1234",  
168 - flag: "",  
169 - distance: "456m"  
170 - }  
171 - ]  
172 - },  
173 -  
174 -  
175 -  
176 -  
177 -  
178 -  
179 - 106 + list: []
  107 + }
180 } 108 }
181 }, 109 },
182 components: { 110 components: {
183 searchCom, 111 searchCom,
  112 + searchHistory,
184 textTitleBox, 113 textTitleBox,
185 - listCom,  
186 -  
187 -  
188 -  
189 -  
190 -  
191 - 114 + listCom
192 }, 115 },
193 created() { 116 created() {
194 117
@@ -198,110 +121,152 @@ @@ -198,110 +121,152 @@
198 methods: { 121 methods: {
199 122
200 /** 123 /**
201 - * 优选页面接口 124 + * 全局搜索
  125 + * @param {String} keyword [搜索关键字]
202 */ 126 */
203 - fansShopMessageList() {  
204 -  
205 - // 校验登录  
206 - if (this.$parent.checkLogin()) {  
207 -  
208 - // 加载中提示  
209 - Indicator.open("加载中...");  
210 -  
211 - // 获取证书请求接口  
212 - this.http("/Api/" + this.getApiVersion().dynamic + "/fansShopMessageList", {  
213 - uid: this.getStore("uid")  
214 - }, this.fansShopMessageListCallback, {  
215 - method: "post"  
216 - }  
217 - );  
218 - } 127 + globalSearch(keyword) {
  128 +
  129 + // 加载中提示
  130 + Indicator.open("搜索中...");
  131 +
  132 + // 获取证书请求接口
  133 + this.http("/Api/" + this.getApiVersion().index + "/globalSearch", {
  134 + keyword: keyword,
  135 + uid: this.getStore("uid"),
  136 + longitude: this.coordinate.longitude,
  137 + latitude: this.coordinate.latitude
  138 + }, this.globalSearchCallback, {
  139 + method: "POST",
  140 + keyword,
  141 + coordinate: this.coordinate
  142 + });
219 }, 143 },
220 144
221 /** 145 /**
222 - * 优选页面接口回调 146 + * 全局搜索回调
223 * @param {object} res [服务器返回数据] 147 * @param {object} res [服务器返回数据]
224 * @param {object} ext [扩展参数] 148 * @param {object} ext [扩展参数]
225 */ 149 */
226 - fansShopMessageListCallback(res, ext) { 150 + globalSearchCallback(res, ext) {
227 151
228 // 加载完成 152 // 加载完成
229 Indicator.close(); 153 Indicator.close();
230 154
231 - // 下拉刷新结束  
232 - this.$set(this, "isLoading", false);  
233 -  
234 // 返回处理 155 // 返回处理
235 if (res.code == 200) { 156 if (res.code == 200) {
236 157
  158 + // 初始化搜素结果数据
  159 + this.initSearchData();
  160 +
237 // 解构数据 161 // 解构数据
238 let { data: datas } = res; 162 let { data: datas } = res;
239 163
240 - /* 获取优选库“优选”数据 开始 */  
241 -  
242 - // 获取“达人列表数据”  
243 - if (datas.list && datas.list.length) { 164 + /* 获取全局搜索数据 开始 */
244 165
245 - // 设置“达人列表数据”数据  
246 - this.$set(this, "dresserList", datas.list); 166 + // 设置商品数据
  167 + if (datas.goods.length) {
  168 + this.$set(this.commoditys, "list", datas.goods);
  169 + this.$set(this.titles, "commodityTitle", ext.keyword + "-商品");
247 } 170 }
248 171
249 - // 获取“热销商品”  
250 - if (datas.hotGoods && datas.hotGoods.length) {  
251 -  
252 - // 设置“热销商品”数据  
253 - this.$set(this, "hotGoods", datas.hotGoods);  
254 -  
255 - // 判断“热销商品”更多  
256 - if (datas.hotGoodsMore) {  
257 -  
258 - // 设置“热销商品”更多  
259 - this.$set(this, "hotGoodsMore", datas.hotGoodsMore);  
260 - }  
261 - }  
262 -  
263 - // 获取“最新上架”  
264 - if (datas.newGoods && datas.newGoods.length) {  
265 -  
266 - // 设置“最新上架”数据  
267 - this.$set(this, "newGoods", datas.newGoods);  
268 -  
269 - // 判断“最新上架”更多  
270 - if (datas.newGoodsMore) {  
271 -  
272 - // 设置“最新上架”更多  
273 - this.$set(this, "newGoodsMore", datas.newGoodsMore);  
274 - }  
275 - }  
276 -  
277 - // 获取“最近购买”  
278 - if (datas.newBuyGoods && datas.newBuyGoods.length) {  
279 -  
280 - // 设置“最近购买”数据  
281 - this.$set(this, "newBuyGoods", datas.newBuyGoods); 172 + // 设置达人数据
  173 + if (datas.shop.length) {
  174 + this.$set(this.darenLists, "list", datas.shop);
  175 + this.$set(this.titles, "darenListTitle", ext.keyword + "-达人");
282 } 176 }
283 -  
284 - // 获取“猜你喜欢”  
285 - if (datas.recommendGoods && datas.recommendGoods.length) {  
286 -  
287 - // 设置“猜你喜欢”数据  
288 - this.$set(this, "recommendGoods", datas.recommendGoods); 177 + // 设置商品数据
  178 + if (datas.foodsShop.length) {
  179 + this.$set(this.foodLists, "list", datas.foodsShop);
  180 + this.$set(this.foodLists, "coordinate", ext.coordinate);
  181 + this.$set(this.titles, "foodListTitle", ext.keyword + "-美食");
289 } 182 }
290 183
291 - /* 获取优选库“优选”数据 结束 */ 184 + /* 获取全局搜索数据 结束 */
292 185
293 } else if (res.code == 400) { 186 } else if (res.code == 400) {
294 187
295 - // 获取优选失败 188 + // 搜索失败
296 Toast(res.message); 189 Toast(res.message);
297 } else { 190 } else {
298 191
299 - // 获取优选失败  
300 - Toast("获取优选失败"); 192 + // 搜索失败
  193 + Toast("搜索失败");
301 } 194 }
302 }, 195 },
303 196
304 /** 197 /**
  198 + * 关注/取消关注达人
  199 + * @param {object} item [数据对象]
  200 + */
  201 + fansShop(item) {
  202 +
  203 + // 判断必要参数
  204 + if (item.id && this.getStore("uid")) {
  205 +
  206 + // 加载中提示
  207 + Indicator.open("加载中...");
  208 +
  209 + // 请求接口
  210 + this.http("/Api/" + (this.getApiVersion().dynamic) + "/fansShop", {
  211 + id: item.id,
  212 + uid: this.getStore("uid")
  213 + }, this.fansShopCallback, {
  214 + method: "POST",
  215 + item
  216 + });
  217 + }
  218 + },
  219 +
  220 + /**
  221 + * 关注/取消关注达人回调
  222 + * @param {object} res [服务器返回数据]
  223 + * @param {object} ext [扩展参数]
  224 + */
  225 + fansShopCallback(res, ext) {
  226 +
  227 + // 加载完成
  228 + Indicator.close();
  229 +
  230 + // 返回处理
  231 + if (res.code == 200) {
  232 +
  233 + // 解构数据
  234 + let {data: datas} = res;
  235 +
  236 + // 设置关注状态
  237 + if (ext.item.is_fans == "0") {
  238 +
  239 + // 关注按钮状态切换
  240 + this.$set(ext.item, "is_fans", "1");
  241 +
  242 + // 粉丝数增减处理
  243 + this.$set(ext.item, "fans_count", parseInt(ext.item.fans_count) + 1);
  244 +
  245 + // 关注达人成功
  246 + Toast("关注成功");
  247 + } else {
  248 +
  249 + // 关注按钮状态切换
  250 + this.$set(ext.item, "is_fans", "0");
  251 +
  252 + // 粉丝数增减处理
  253 + this.$set(ext.item, "fans_count", parseInt(ext.item.fans_count) - 1);
  254 +
  255 + // 关注达人成功
  256 + Toast("已取关");
  257 + }
  258 + } else if (res.code == 400) {
  259 +
  260 + // 关注/取消关注达人失败
  261 + Toast(res.data.message);
  262 + } else {
  263 +
  264 + // 关注/取消关注达人失败
  265 + Toast("关注/取消关注失败");
  266 + }
  267 + },
  268 +
  269 + /**
305 * 更多 270 * 更多
306 * @param {object} item [数据对象] 271 * @param {object} item [数据对象]
307 */ 272 */
@@ -310,13 +275,9 @@ @@ -310,13 +275,9 @@
310 275
311 276
312 console.log("more", item); 277 console.log("more", item);
313 -  
314 278
315 279
316 - // 判断并调用通用跳转  
317 - if (typeof this.$parent.gotoDetail === "function") {  
318 - this.$parent.gotoDetail(item);  
319 - } 280 +
320 }, 281 },
321 282
322 /** 283 /**
@@ -325,23 +286,17 @@ @@ -325,23 +286,17 @@
325 */ 286 */
326 toDetail(item) { 287 toDetail(item) {
327 288
328 -  
329 -  
330 - console.log("toDetail", item);  
331 -  
332 -  
333 -  
334 -  
335 // 判断并调用通用跳转 289 // 判断并调用通用跳转
336 if (typeof this.$parent.gotoDetail === "function") { 290 if (typeof this.$parent.gotoDetail === "function") {
337 291
338 - // 构造跳转详情页参数 292 + // 构造跳转参数
339 let options = { 293 let options = {
340 type: "2", 294 type: "2",
341 to: item.id, 295 to: item.id,
342 shop_type: item.shop_type 296 shop_type: item.shop_type
343 } 297 }
344 298
  299 + // 调用通用跳转
345 this.$parent.gotoDetail(options); 300 this.$parent.gotoDetail(options);
346 } 301 }
347 }, 302 },
@@ -352,12 +307,19 @@ @@ -352,12 +307,19 @@
352 */ 307 */
353 toShop(item) { 308 toShop(item) {
354 309
  310 + // 判断并调用通用跳转
  311 + if (typeof this.$parent.gotoDetail === "function") {
355 312
356 - console.log("toShop", item);  
357 -  
358 -  
359 - 313 + // 构造跳转参数
  314 + let options = {
  315 + type: "5",
  316 + to: item.shop_url,
  317 + shop_type: ""
  318 + }
360 319
  320 + // 调用通用跳转
  321 + this.$parent.gotoDetail(options);
  322 + }
361 }, 323 },
362 324
363 /** 325 /**
@@ -366,60 +328,183 @@ @@ -366,60 +328,183 @@
366 */ 328 */
367 toDarenProfile(item) { 329 toDarenProfile(item) {
368 330
  331 + // 判断并调用通用跳转
  332 + if (typeof this.$parent.gotoDetail === "function") {
369 333
370 - console.log("toDarenProfile", item);  
371 - 334 + // 构造跳转参数
  335 + let options = {
  336 + type: "24",
  337 + to: item.id,
  338 + shop_type: ""
  339 + }
372 340
  341 + // 调用通用跳转
  342 + this.$parent.gotoDetail(options);
  343 + }
  344 + },
373 345
  346 + /**
  347 + * 进入美食
  348 + * @param {object} item [数据对象]
  349 + */
  350 + toFood(item) {
  351 +
  352 + // 判断并调用通用跳转
  353 + if (typeof this.$parent.gotoDetail === "function") {
  354 +
  355 + // 判断是否有item.location参数
  356 + if (item.location) {
374 357
  358 + // 调用通用跳转
  359 + this.$parent.gotoDetail(item.location);
  360 + }
  361 + }
375 }, 362 },
376 363
377 /** 364 /**
378 - * 关注/取消关注达人  
379 - * @param {object} item [数据对象] 365 + * 搜索
  366 + * @param {String} keyword [搜索关键字]
380 */ 367 */
381 - fansShop(item) { 368 + doConfirm(keyword) {
382 369
  370 + // 判断搜索关键字
  371 + if (keyword && typeof keyword === "string") {
383 372
384 - console.log("fansShop", item);  
385 - 373 + // 设置搜索结果
  374 + this.setSearchHistoryArr(keyword);
  375 +
  376 + // 进行搜索
  377 + this.globalSearch(keyword);
  378 + } else if (keyword === "") {
  379 +
  380 + // 和清空input同操作
  381 + this.clearInput();
  382 + }
  383 + },
386 384
  385 + /**
  386 + * 搜索框取消按钮，销毁WebView
  387 + */
  388 + doCancel() {
387 389
  390 + // 判断destroy函数是否存在
  391 + if (typeof this.$parent.destroy === "function") {
  392 + this.$parent.destroy();
  393 + } else {
388 394
  395 + // 后退
  396 + window.history.go(-1);
  397 + }
389 }, 398 },
390 399
391 /** 400 /**
392 - * 进入美食  
393 - * @param {object} item [数据对象] 401 + * 清空input
394 */ 402 */
395 - toFood(item) { 403 + clearInput() {
396 404
  405 + // 传空字符串，清空会话搜索关键字
  406 + this.setSearchHistoryArr("");
397 407
398 - console.log("toFood", item); 408 + // 清空搜索结果数据
  409 + this.initSearchData();
  410 + },
  411 +
  412 + /**
  413 + * 初始化搜索结果数据
  414 + */
  415 + initSearchData() {
  416 +
  417 + /* 初始化搜索对象数据 开始 */
  418 +
  419 + // 初始化商品数据
  420 + this.$set(this.commoditys, "list", []);
  421 + this.$set(this.titles, "commodityTitle", "");
  422 +
  423 + // 初始化达人数据
  424 + this.$set(this.darenLists, "list", []);
  425 + this.$set(this.titles, "darenListTitle", "");
  426 +
  427 + // 初始化商品数据
  428 + this.$set(this.foodLists, "list", []);
  429 + this.$set(this.foodLists, "coordinate", null);
  430 + this.$set(this.titles, "foodListTitle", "");
  431 +
  432 + /* 初始化搜索对象数据 结束 */
399 433
  434 + },
400 435
  436 + /**
  437 + * 获取历史搜索结果Storage
  438 + */
  439 + getSearchHistoryArr() {
401 440
  441 + // 设置会话keyword
  442 + if (window.sessionStorage.getItem("keyword")) {
  443 +
  444 + // 设置搜索关键字
  445 + this.$refs.searchCom.setKeyword(window.sessionStorage.getItem("keyword"));
  446 + }
402 447
  448 + // 处理搜索历史Storage数组
  449 + if (window.localStorage.getItem("searchHistoryArr")) {
  450 +
  451 + // 获取搜索历史数组
  452 + this.$set(this, "searchHistoryArr", window.localStorage.getItem("searchHistoryArr").split(","));
  453 + }
403 }, 454 },
404 455
  456 + /**
  457 + * 设置历史搜索结果Storage
  458 + * @param {String} keyword [搜索关键字]
  459 + */
  460 + setSearchHistoryArr(keyword) {
  461 +
  462 + // 设置会话keyword
  463 + window.sessionStorage.setItem("keyword", keyword);
  464 +
  465 + // 设置input值，通过历史记录搜索时，会用到
  466 + this.$refs.searchCom.setKeyword(keyword);
  467 +
  468 + // 处理搜索历史Storage数组
  469 + if (!window.localStorage.getItem("searchHistoryArr")) {
  470 + window.localStorage.setItem("searchHistoryArr", "");
  471 + }
  472 +
  473 + // 判断keyword是否有值
  474 + if (keyword) {
405 475
  476 + // 数组压栈
  477 + this.searchHistoryArr.unshift(keyword);
406 478
  479 + // 数组去重
  480 + this.$set(this, "searchHistoryArr", Array.from(new Set(this.searchHistoryArr)));
407 481
  482 + // 判断数组大小，最多存8个
  483 + if (this.searchHistoryArr.length > 8) {
  484 +
  485 + // 循环弹出数组多余元素
  486 + for (let i = this.searchHistoryArr.length; i > 8 ; i--) {
  487 + this.searchHistoryArr.pop();
  488 + }
  489 + }
408 490
  491 + // 将数组信息序列化，存入Storage中
  492 + window.localStorage.setItem("searchHistoryArr", this.searchHistoryArr.join(","));
  493 + }
  494 + },
409 495
410 /** 496 /**
411 - * 搜索框取消按钮，销毁WebView 497 + * 清空搜索历史
412 */ 498 */
413 - doCancel() {  
414 -  
415 - // 判断destroy函数是否存在  
416 - if (typeof this.$parent.destroy === "function") {  
417 - this.$parent.destroy();  
418 - } else { 499 + clearSearchHistoryArr() {
419 500
420 - // 后退  
421 - window.history.go(-1); 501 + // 清除搜索历史Storage数组
  502 + if (window.localStorage.getItem("searchHistoryArr")) {
  503 + window.localStorage.setItem("searchHistoryArr", "");
422 } 504 }
  505 +
  506 + // 清除searchHistoryArr数组
  507 + this.$set(this, "searchHistoryArr", []);
423 } 508 }
424 }, 509 },
425 head: { 510 head: {
@@ -439,6 +524,18 @@ @@ -439,6 +524,18 @@
439 this.$emit("updateHead"); 524 this.$emit("updateHead");
440 } 525 }
441 } 526 }
  527 + },
  528 + mounted() {
  529 +
  530 + // 设置搜索历史和会话搜索关键字
  531 + this.getSearchHistoryArr();
  532 +
  533 + // 判断如果有搜索关键字，进行搜索
  534 + if (this.$refs.searchCom.getKeyword()) {
  535 +
  536 + // 搜索
  537 + this.doConfirm(this.$refs.searchCom.getKeyword());
  538 + }
442 } 539 }
443 } 540 }
444 </script> 541 </script>