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 11 {{item.title}}
12 12 </div>
13 13 <div class="desc">
14   - {{item.fans}}粉丝
  14 + {{item.fans_count}}粉丝
15 15 </div>
16 16 </div>
17 17 </div>
... ...
src/components/goodsItem_4/goodsItem_4.vue
  View file @d2d543a
... ... @@ -14,9 +14,9 @@
14 14 <div class="integer">{{getInteger(item.price)}}.</div>
15 15 <div class="decimal">{{getDecimal(item.price)}}</div>
16 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 18 <div class="shop-name">
19   - 领头雁自营店
  19 + {{item.shop.title}}
20 20 </div>
21 21 <div class="buttons-box">
22 22 <div class="btn btn-primary">进店&gt;</div>
... ...
src/components/goodsItem_5/goodsItem_5.less
  View file @d2d543a
... ... @@ -12,15 +12,14 @@
12 12 height: auto;
13 13 .left-box {
14 14 display: flex;
15   - justify-content: space-between;
  15 + justify-content: flex-start;
16 16 align-items: center;
17   - width: 570px;
  17 + width: 690px;
18 18 .img-box {
19 19 display: flex;
20 20 justify-content: center;
21 21 align-items: center;
22 22 background-color: transparent;
23   - // margin: 0 auto;
24 23 width: 160px;
25 24 height: 160px;
26 25 border-radius: 8px;
... ... @@ -36,10 +35,11 @@
36 35 flex-direction: column;
37 36 justify-content: space-between;
38 37 align-items: center;
39   - width: 380px;
  38 + margin-left: 30px;
  39 + width: 500px;
40 40 height: 100%;
41 41 .top-box {
42   - width: 380px;
  42 + width: 500px;
43 43 .title {
44 44 color: #333333;
45 45 font-size: 28px;
... ... @@ -65,17 +65,18 @@
65 65 }
66 66 }
67 67 .bottom-box {
68   - width: 380px;
  68 + width: 500px;
69 69 white-space: nowrap;
70 70 text-overflow: ellipsis;
71 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 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 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 3 <div class="main-box">
4 4 <div class="left-box">
5 5 <div class="img-box">
... ... @@ -9,20 +9,20 @@
9 9 <div class="top-box">
10 10 <div class="title">{{item.title}}</div>
11 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 14 </div>
15 15 </div>
16 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 19 </div>
20 20 </div>
21 21 </div>
22 22 </div>
23   - <div class="right-box">
  23 + <div class="right-box" v-if="coordinate && (coordinate.longitude != '0' || coordinate.latitude != '0')">
24 24 <div class="distance-box">
25   - {{item.distance}}
  25 + {{item.juli}}m
26 26 </div>
27 27 </div>
28 28 </div>
... ... @@ -36,7 +36,7 @@
36 36  
37 37 }
38 38 },
39   - props: ["item"],
  39 + props: ["item", "coordinate"],
40 40 computed: {
41 41  
42 42 /**
... ... @@ -65,7 +65,6 @@
65 65 }
66 66 }
67 67 }
68   -
69 68 },
70 69 methods: {
71 70  
... ...
src/components/listCom/listCom.vue
  View file @d2d543a
... ... @@ -14,7 +14,8 @@
14 14  
15 15 <!-- 美食列表 -->
16 16 <goods-item-5 v-if="lists.style == '5'" @jump="jump"
17   - :item="item">
  17 + :item="item"
  18 + :coordinate="lists.coordinate">
18 19 </goods-item-5>
19 20  
20 21 <!-- 达人列表 -->
... ...
src/components/searchCom/searchCom.less
  View file @d2d543a
... ... @@ -21,42 +21,44 @@
21 21 border: 3px solid #f9f9ff;
22 22 border-radius: 32px;
23 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 29 width: 32px;
33 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 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 3 <div class="box">
4 4 <div class="search-group" :style="'border-color: ' + defaultSearchs.borderColor">
5 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 15 </div>
14 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 18 <img src="static/img/icon_clear_input.png" class="clear-input-img" />
17 19 </div>
18 20 </div>
19 21 </div>
20 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 24 </div>
23 25 </div>
24 26 </div>
... ... @@ -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 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 577  
578 578  
579 579 break;
580   - case "24": // 跳转达人详情页，跟参数from=redirect
  580 + case "24": // 跳转达人个人主页，跟参数from=redirect
581 581  
582   - // 达人详情页连接
  582 + // 达人个人主页连接
583 583 if (item.to) {
584 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 586 break;
587   - case "25": // 跳转达人详情页，跟参数from=redirect
  587 + case "25": // 跳转达人动态详情页，跟参数from=redirect
588 588  
589   - // 达人详情页连接
  589 + // 达人动态详情页连接
590 590 if (item.id) {
591 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 1 <template>
2 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 62 </div>
63 63 </template>
64 64  
... ... @@ -67,128 +67,51 @@
67 67 // 引入组件
68 68 import { Toast, Indicator } from "mint-ui";
69 69 import searchCom from "@/components/searchCom/searchCom";
  70 + import searchHistory from "@/components/searchHistory/searchHistory";
70 71 import textTitleBox from "@/components/textTitleBox/textTitleBox";
71 72 import listCom from "@/components/listCom/listCom";
72 73  
73   -
74   -
75   -
76   -
77 74 export default {
78 75 name: 'search',
79 76 data () {
80 77 return {
81 78 title: "",
  79 + searchHistoryArr: [],
82 80 searchs: {
83 81 backgroundColor: "#FAFBFD",
84 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 94 style: "4",
88 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 99 style: "daren-list",
109 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 104 style: "5",
145 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 110 components: {
183 111 searchCom,
  112 + searchHistory,
184 113 textTitleBox,
185   - listCom,
186   -
187   -
188   -
189   -
190   -
191   -
  114 + listCom
192 115 },
193 116 created() {
194 117  
... ... @@ -198,110 +121,152 @@
198 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 147 * @param {object} res [服务器返回数据]
224 148 * @param {object} ext [扩展参数]
225 149 */
226   - fansShopMessageListCallback(res, ext) {
  150 + globalSearchCallback(res, ext) {
227 151  
228 152 // 加载完成
229 153 Indicator.close();
230 154  
231   - // 下拉刷新结束
232   - this.$set(this, "isLoading", false);
233   -
234 155 // 返回处理
235 156 if (res.code == 200) {
236 157  
  158 + // 初始化搜素结果数据
  159 + this.initSearchData();
  160 +
237 161 // 解构数据
238 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 186 } else if (res.code == 400) {
294 187  
295   - // 获取优选失败
  188 + // 搜索失败
296 189 Toast(res.message);
297 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 271 * @param {object} item [数据对象]
307 272 */
... ... @@ -310,13 +275,9 @@
310 275  
311 276  
312 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 286 */
326 287 toDetail(item) {
327 288  
328   -
329   -
330   - console.log("toDetail", item);
331   -
332   -
333   -
334   -
335 289 // 判断并调用通用跳转
336 290 if (typeof this.$parent.gotoDetail === "function") {
337 291  
338   - // 构造跳转详情页参数
  292 + // 构造跳转参数
339 293 let options = {
340 294 type: "2",
341 295 to: item.id,
342 296 shop_type: item.shop_type
343 297 }
344 298  
  299 + // 调用通用跳转
345 300 this.$parent.gotoDetail(options);
346 301 }
347 302 },
... ... @@ -352,12 +307,19 @@
352 307 */
353 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 328 */
367 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 510 head: {
... ... @@ -439,6 +524,18 @@
439 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 541 </script>
... ...