Skip to content

Commit b806e66

Browse files
author
fanny
committed
complete city search
1 parent 553f24d commit b806e66

File tree

6 files changed

+192
-5
lines changed

6 files changed

+192
-5
lines changed

‎src/NOTE.txt

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ Boolean，是指在DOM树中，注册了该listener的元素，是否会先于
4040

4141
### flex布局 https://blog.csdn.net/baiding1123/article/details/47663217
4242

43-
### css书写顺序
43+
### 规范————————css书写顺序
4444
3.3 属性书写顺序
4545
[建议] 同一 rule set 下的属性在书写时，应按功能进行分组，并以 Formatting Model（布局方式、位置） > Box Model（尺寸） > Typographic（文本相关） > Visual（视觉效果） 的顺序书写，以提高代码的可读性。
4646
解释：
@@ -78,4 +78,9 @@ Visual 相关属性包括：background / color / transition / list-style 等
7878
}
7979

8080

81-
### setTimeout setInterval es6箭头函数不改变this指向
81+
### setTimeout setInterval es6箭头函数不改变this指向
82+
83+
### 规范———————
84+
变量用驼峰
85+
数据库字段 下划线
86+
css样式 下划线

‎src/config/urls.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
export default {
22
city: '/v1/cities',
3-
user: '/v1/user'
3+
user: '/v1/user',
4+
searchplace: '/v1/pois/'
45
}

‎src/main.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ const axiosIns = axios.create()
2525
// 在main.js设置全局的请求次数，请求的间隙
2626
axiosIns.defaults.retry = 4
2727
axiosIns.defaults.retryDelay = 1000
28-
axiosIns.defaults.timeout = 20000
28+
axiosIns.defaults.timeout = 40000
2929
axiosIns.defaults.baseURL = baseUrl
3030
// 添加请求拦截器
3131
axiosIns.interceptors.request.use(function (config) {

‎src/page/city/city.vue

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
<template>
2+
<div class="city_container">
3+
<head-top :head-title="cityname" go-back='true'>
4+
<router-link to="/home" slot="change-city">切换城市</router-link>
5+
</head-top>
6+
<form class="city_form" v-on:submit.prevent>
7+
<div>
8+
<input type="search" name="city" placeholder="输入学校、商务楼、地址" class="city_input input_style" required v-model='inputVaule'>
9+
</div>
10+
<div>
11+
<input type="submit" name="submit" class="city_submit input_style" @click='postpois' value="提交">
12+
</div>
13+
</form>
14+
<header v-if="historytitle" class="pois_search_history">搜索历史</header>
15+
<ul class="getpois_ul">
16+
<li v-for="(item, index) in placelist" @click="nextPage(item, index)" :key="index">
17+
<h4 class="pois_name ellipsis">{{item.name}}</h4>
18+
<p class="pois_address ellipsis">{{item.address}}</p>
19+
</li>
20+
</ul>
21+
<footer v-if="historytitle && placelist.length" class="clear_all_history" @click="clearAll">清空所有</footer>
22+
<div class="search_none_place" v-if="placeNone">很抱歉：无搜索结果</div>
23+
</div>
24+
</template>
25+
<script>
26+
import headTop from '@/components/header/head'
27+
import {getStore, setStore, removeStore} from '@/config/mUtils'
28+
import url from '@/config/urls'
29+
30+
export default {
31+
data () {
32+
return {
33+
inputVaule: '', // 搜索地址
34+
cityId: '', // 当前城市id
35+
cityname: '', // 当前城市名字
36+
placelist: [], // 搜索城市列表
37+
placeHistory: [], // 历史搜索记录
38+
historytitle: true, // 默认显示搜索历史头部，点击搜索后隐藏
39+
placeNone: false // 搜索无结果，显示提示信息
40+
}
41+
},
42+
mounted () {
43+
this.initData()
44+
this.getCityName()
45+
},
46+
components: {
47+
headTop
48+
},
49+
methods: {
50+
getCityName () {
51+
this.cityId = this.$route.params.cityId
52+
this.$axios.get(url.city + '/' + this.cityId).then((res) => {
53+
this.cityname = res.name
54+
})
55+
},
56+
initData () {
57+
// 获取搜索历史记录
58+
if (getStore('placeHistory')) {
59+
this.placelist = JSON.parse(getStore('placeHistory'))
60+
} else {
61+
this.placelist = []
62+
}
63+
},
64+
postpois () {
65+
if (this.inputVaule) {
66+
let query = '?city_id=' + this.cityId + '&keyword=' + this.inputVaule + '&type=search'
67+
this.$axios.get(url.searchplace + query).then((res) => {
68+
console.log(res)
69+
this.historytitle = false
70+
this.placelist = res
71+
this.placeNone = res.length === 0
72+
})
73+
}
74+
},
75+
/**
76+
* 点击搜索结果进入下一页面时进行判断是否已经有一样的历史记录
77+
* 如果没有则新增，如果有则不做重复储存，判断完成后进入下一页
78+
*/
79+
nextPage (item, index) {
80+
let history = getStore('placeHistory')
81+
let choosePlace = this.placelist[index]
82+
let geohash = item.geohash
83+
if (history) {
84+
let checkrepeat = false
85+
this.placeHistory = JSON.parse(history)
86+
this.placeHistory.forEach(item => {
87+
if (item.geohash === geohash) {
88+
checkrepeat = true
89+
}
90+
})
91+
if (!checkrepeat) {
92+
this.placeHistory.push(choosePlace)
93+
}
94+
} else {
95+
this.placeHistory.push(choosePlace)
96+
}
97+
setStore('placeHistory', this.placeHistory)
98+
this.$router.push({path: '/msite', query: {geohash}})
99+
},
100+
clearAll () {
101+
removeStore('placeHistory')
102+
this.initData()
103+
}
104+
}
105+
}
106+
</script>
107+
<style lang="scss">
108+
@import '../../style/city.scss'
109+
</style>

‎src/router/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ const router = new Router({
8585
},
8686
// 当前选择城市页
8787
{
88-
path: '/city/:cityid',
88+
path: '/city/:cityId',
8989
component: city
9090
},
9191
// 所有商铺列表页

‎src/style/city.scss

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
@import './mixin.scss';
2+
.city_container {
3+
padding-top: 2.35rem;
4+
.change_city {
5+
right: 0.4rem;
6+
@include ct;
7+
@include sc(.6rem, $fc)
8+
}
9+
.city_form {
10+
padding-top: .4rem;
11+
border-top: 1px solid $bc;
12+
border-bottom: 1px solid $bc;
13+
background-color: $fc;
14+
div {
15+
margin: 0 auto;
16+
width: 90%;
17+
text-align: center;
18+
.input_style {
19+
margin-bottom: .4rem;
20+
border-radius: .1rem;
21+
@include wh(100%, 1.4rem);
22+
}
23+
.city_input {
24+
padding: 0 .3rem;
25+
border: 1px solid $bc;
26+
@include sc(.65rem, #333);
27+
}
28+
.city_submit {
29+
background-color: $blue;
30+
@include sc(.65rem, $fc)
31+
}
32+
}
33+
}
34+
.pois_search_history {
35+
padding-left: .5rem;
36+
border-top: 1px solid $bc;
37+
border-bottom: 1px solid $bc;
38+
@include font(.475rem, .8rem);
39+
}
40+
.getpois_ul {
41+
border-top: 1px solid $bc;
42+
background-color: $fc;
43+
li {
44+
margin: 0 auto;
45+
padding-top: .65rem;
46+
border-bottom: 1px solid $bc;
47+
.pois_name {
48+
margin: 0 auto .35rem;
49+
width: 90%;
50+
@include sc(.65rem, #333);
51+
}
52+
.pois_address {
53+
margin: 0 auto .55rem;
54+
width: 90%;
55+
@include sc(.45rem, #999);
56+
}
57+
}
58+
}
59+
.search_none_place {
60+
margin: 0 auto;
61+
@include font(.65rem, 1.75rem);
62+
text-indent: .5rem;
63+
background-color: $fc;
64+
color: #333;
65+
}
66+
.clear_all_history {
67+
text-align: center;
68+
line-height: 2rem;
69+
@include sc(.7rem, #666);
70+
background-color: $fc;
71+
}
72+
}

0 commit comments

Comments
 (0)