Skip to content

Commit 39f4519

Browse files
author
zhongchubing
committed
feat: 主流搜索引擎搜索
1 parent e4f62bb commit 39f4519

File tree

10 files changed

+192
-29
lines changed

10 files changed

+192
-29
lines changed

‎geekape-nav-main/components/Affiche.vue

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
height="30px"
55
direction="vertical"
66
indicator-position="none"
7-
:setActiveItem="carouselActive"
87
>
98
<el-carousel-item>
109
<p class="medium">

‎geekape-nav-main/components/AppHeader.vue

Lines changed: 11 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
<template>
2-
<el-header>
2+
<div>
3+
<el-header>
34
<div>
45
<nuxt-link to="/"><img class="header-logo" src="/logo-nav.png" /></nuxt-link>
6+
<AppSearch />
57
</div>
68
<el-row type="flex">
79
<el-col>
@@ -11,7 +13,8 @@
1113
<i class="el-icon-menu" @click="$emit('handleShowMenu')"></i>
1214
</el-col>
1315
</el-row>
14-
</el-header>
16+
</el-header>
17+
</div>
1518
</template>
1619

1720
<script>
@@ -20,12 +23,16 @@ export default {
2023
name: "AppHeader",
2124
components: {AppSearch},
2225
props: {
23-
2426
dialogFormVisible: {
2527
type: Boolean,
2628
default: false
2729
}
2830
},
31+
data() {
32+
return {
33+
searchType: 'station'
34+
}
35+
}
2936
};
3037
</script>
3138

@@ -68,27 +75,16 @@ export default {
6875
6976
7077
@media screen and (max-width: 568px) {
71-
.app-search {
72-
/deep/ .el-select {
73-
display: none;
74-
}
75-
}
76-
7778
.header-logo,
7879
.menu-toggle-btn {
7980
display: block;
8081
}
8182
}
8283
@media screen and (min-width: 569px) {
83-
.app-search {
84-
/deep/ .el-select {
85-
display: block;
86-
}
87-
}
88-
8984
.header-logo,
9085
.menu-toggle-btn {
9186
display: none;
9287
}
9388
}
89+
9490
</style>

‎geekape-nav-main/components/AppNavList.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
<script>
1010
import AppNavItem from "./AppNavItem";
1111
export default {
12+
name: 'AppNavList',
1213
components: {
1314
AppNavItem
1415
},

‎geekape-nav-main/components/AppSearch.vue

Lines changed: 151 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,136 @@
11
<template>
22
<div class="app-search">
3+
<!-- <el-tabs v-model="searchType">-->
4+
<!-- <el-tab-pane label="站内" name="station"></el-tab-pane>-->
5+
<!-- <el-tab-pane label="百度" name="baidu"></el-tab-pane>-->
6+
<!-- <el-tab-pane label="谷歌" name="google"></el-tab-pane>-->
7+
<!-- <el-tab-pane label="360" name="360"></el-tab-pane>-->
8+
<!-- <el-tab-pane label="必应" name="bing"></el-tab-pane>-->
9+
<!-- <el-tab-pane label="搜狗" name="sogou"></el-tab-pane>-->
10+
<!-- </el-tabs>-->
11+
12+
313
<el-autocomplete
414
v-model="state"
5-
:fetch-suggestions="querySearchAsync"
6-
placeholder="请输入内容"
15+
:fetch-suggestions="queryData"
16+
:placeholder="placeholder"
717
@select="handleSelect"
818
suffix-icon="el-icon-search"
9-
></el-autocomplete>
19+
>
20+
<template v-slot:prepend>
21+
<el-select v-model="searchType" class="search-type-box">
22+
<el-option label="站内" value="station"></el-option>
23+
<el-option label="百度" value="baidu"></el-option>
24+
<el-option label="谷歌" value="google"></el-option>
25+
<el-option label="360" value="360"></el-option>
26+
<el-option label="必应" value="bing"></el-option>
27+
<el-option label="搜狗" value="sogou"></el-option>
28+
</el-select>
29+
</template>
30+
</el-autocomplete>
1031
</div>
1132
</template>
1233

1334
<script>
1435
import axios from "../plugins/axios";
1536
import {API_NAV} from "../api";
37+
import {titleCase} from "../utils/utils";
38+
39+
const searchGather = {
40+
station: {
41+
name: '站内',
42+
placeholder: '站内搜索'
43+
},
44+
baidu: {
45+
name: '百度',
46+
placeholder: '百度搜索',
47+
root: 'https://www.baidu.com/s?wd='
48+
},
49+
google: {
50+
name: '谷歌',
51+
placeholder: '百度搜索',
52+
root: 'https://www.google.com.hk/search?q='
53+
},
54+
'360': {
55+
name: '360',
56+
placeholder: '360搜索',
57+
root: 'https://www.so.com/s?q='
58+
},
59+
'bing': {
60+
name: '必应',
61+
placeholder: '必应搜索',
62+
root: 'https://cn.bing.com/search?q='
63+
},
64+
'sogou': {
65+
name: '搜狗',
66+
placeholder: '搜狗搜索',
67+
root: 'https://www.sogou.com/web?query='
68+
},
69+
}
70+
1671
1772
export default {
1873
name: "AppSearch",
74+
props: {
75+
76+
},
1977
data() {
2078
return {
2179
restaurants: [],
2280
state: '',
23-
timeout: null
81+
searchType: 'station',
82+
timeout: null
83+
}
84+
},
85+
computed: {
86+
placeholder() {
87+
return searchGather[this.searchType]['placeholder']
2488
}
2589
},
2690
methods: {
27-
async querySearchAsync(query, cb) {
91+
queryData(query, cb) {
92+
if (this.searchType === 'station') {
93+
this.queryStation(query, cb)
94+
} else {
95+
this.queryBaidu(query, cb)
96+
}
97+
},
98+
async queryStation(query, cb) {
2899
if (query !== '') {
29-
const { data } = await axios.get(API_NAV + `?keyword=${query}`)
100+
const {data} = await axios.get(API_NAV + `?keyword=${query}`)
30101
if (Array.isArray(data.data)) {
31-
const finalData = data.data.map(item=> (item.value = item.name, item))
102+
const finalData = data.data.map(item => (item.value = item.name, item))
32103
cb(finalData)
33104
}
34105
} else {
35106
cb([])
36107
}
37108
},
109+
async queryBaidu(query, cb) {
110+
const res = await axios.get(`/5a1Fazu8AA54nxGko9WTAnF6hhy/su?&wd=${query}&cb=getJSONPData`)
111+
try {
112+
const data = eval(res)
113+
const finalData = data.s.reduce((t, v) => [...t, {value: v}], [])
114+
cb(finalData)
115+
} catch (e) {
116+
cb([])
117+
}
118+
},
119+
38120
handleSelect(item) {
39-
window.open(item.href)
121+
let url = ''
122+
if (this.searchType === 'station') {
123+
this.$router.push(`/nav/${item._id}`)
124+
} else {
125+
url = searchGather[this.searchType].root + item.value
126+
window.open(url)
127+
}
128+
},
129+
},
130+
131+
mounted() {
132+
window.getJSONPData = function (data) {
133+
return data;
40134
}
41135
}
42136
}
@@ -46,18 +140,64 @@ export default {
46140
.app-search {
47141
display: flex;
48142
justify-content: center;
143+
49144
.el-select {
50145
width: 300px;
146+
border-right: 1px solid #eee;
51147
}
52-
.el-input__inner {
53-
border: 1px solid #dfe1e5;
148+
/deep/ .el-input-group__append, /deep/ .el-input-group__prepend {
149+
border: 0;
150+
}
151+
152+
/deep/ .el-input__inner {
153+
border: 0;
54154
box-shadow: none;
55-
background: #fff;
155+
background: #f5f7fa;
156+
}
157+
158+
.search-type-box {
159+
width: 80px;
56160
}
57161
58162
/deep/ .el-select .el-input.is-focus .el-input__inner {
59163
border-color: #dfe1e5;
60164
box-shadow: 0 0 20px rgba(#000, .1);
61165
}
62166
}
167+
168+
@media screen and (max-width: 568px) {
169+
.app-search {
170+
display: none;
171+
}
172+
}
173+
@media screen and (min-width: 569px) {
174+
.app-search {
175+
display: block;
176+
}
177+
}
178+
179+
180+
//
181+
//.app-search {
182+
// padding: 180px 0;
183+
// background: #fff;
184+
// flex-direction: column;
185+
// align-items: center;
186+
//
187+
// /deep/ .el-tabs__header,
188+
// /deep/ .el-input__inner {
189+
// max-width: 600px;
190+
// width: 600px;
191+
// margin: auto;
192+
// }
193+
// /deep/ .el-tabs__nav-wrap::after {
194+
// background-color: transparent;
195+
// }
196+
// /deep/ .el-input__inner {
197+
// border-radius: 30px;
198+
// }
199+
// .el-tabs {
200+
// margin-bottom: 20px;
201+
// }
202+
//}
63203
</style>

‎geekape-nav-main/mixins/layoutMixin.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,12 @@ const layoutMixin = {
6464
} else {
6565
this.showMenuType = 'half'
6666
}
67+
} else {
68+
if (isMobileSize()) {
69+
this.showMenuType = 'none'
70+
} else {
71+
this.showMenuType = 'half'
72+
}
6773
}
6874
}
6975
},

‎geekape-nav-main/nuxt.config.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,13 @@ module.exports = {
7373
'^/api' : '/'
7474
}
7575
},
76+
'/5a1Fazu8AA54nxGko9WTAnF6hhy': {
77+
target: 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy', // 目标接口域名
78+
changeOrigin: true,
79+
pathRewrite: {
80+
'^/5a1Fazu8AA54nxGko9WTAnF6hhy' : '/'
81+
}
82+
},
7683
},
7784

7885
/*

‎geekape-nav-main/pages/index.vue

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@
1515
<affiche />
1616
<div class="website-wrapper" v-for="item in data" :key="item.name">
1717
<p class="website-title" :id="item._id">{{ item.name }}</p>
18-
<WebsiteList :list="item.list" />
1918
<app-nav-list :list="item.list" />
2019
</div>
2120
</div>

‎geekape-nav-main/pages/nav/_id.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div>
2+
<div :style="{ marginLeft: contentMarginLeft }">
33
<AppNavMenus
44
:categorys="category"
55
:show-menu-type="showMenuType"

‎geekape-nav-main/utils/utils.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,3 +16,8 @@ export function isMobileSize() {
1616
const width = window.innerWidth || document.body.clientWidth
1717
return width < 568
1818
}
19+
20+
export function titleCase(str) {
21+
const newStr = str.slice(0,1).toUpperCase() +str.slice(1).toLowerCase();
22+
return newStr;
23+
}

‎geekape-nav-main/yarn.lock

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1875,6 +1875,11 @@ aws4@^1.8.0:
18751875
resolved "https://registry.npmjs.org/aws4/-/aws4-1.10.0.tgz#a17b3a8ea811060e74d47d306122400ad4497ae2"
18761876
integrity sha512-3YDiu347mtVtjpyV3u5kVqQLP242c06zwDOgpeRnybmXlYYsLbtTrUBUm8i8srONt+FWobl5aibnU1030PeeuA==
18771877

1878+
axios-jsonp@^1.0.4:
1879+
version "1.0.4"
1880+
resolved "https://registry.npm.taobao.org/axios-jsonp/download/axios-jsonp-1.0.4.tgz#28878a48bbf38dbf07875fa283d9cf958c63b498"
1881+
integrity sha1-KIeKSLvzjb8Hh1+ig9nPlYxjtJg=
1882+
18781883
axios-retry@^3.1.8:
18791884
version "3.1.8"
18801885
resolved "https://registry.npmjs.org/axios-retry/-/axios-retry-3.1.8.tgz#ffcfed757e1fab8cbf832f8505bb0e0af47c520c"
@@ -9469,6 +9474,11 @@ vue-hot-reload-api@^2.3.0:
94699474
resolved "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"
94709475
integrity sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==
94719476

9477+
vue-jsonp@^2.0.0:
9478+
version "2.0.0"
9479+
resolved "https://registry.npm.taobao.org/vue-jsonp/download/vue-jsonp-2.0.0.tgz#3bfac56bb72941a2511c11e1a123b876f03427f7"
9480+
integrity sha1-O/rFa7cpQaJRHBHhoSO4dvA0J/c=
9481+
94729482
vue-loader@^15.9.3:
94739483
version "15.9.3"
94749484
resolved "https://registry.npmjs.org/vue-loader/-/vue-loader-15.9.3.tgz#0de35d9e555d3ed53969516cac5ce25531299dda"

0 commit comments

Comments
 (0)