Skip to content

Commit c2ddfc8

Browse files
author
15826954460
committed
页面主题
1 parent 74d0033 commit c2ddfc8

File tree

5 files changed

+186
-149
lines changed

5 files changed

+186
-149
lines changed

‎components/index/artistic.vue

+93-95
Original file line numberDiff line numberDiff line change
@@ -1,128 +1,126 @@
11
<template>
22
<section class="m-istyle">
3-
<dl @mouseover="over">
3+
<dl @mouseover="mouseover">
44
<dt>有格调</dt>
5-
<dd
6-
:class="{active:kind==='all'}"
7-
kind="all"
8-
keyword="景点">全部</dd>
9-
<dd
10-
:class="{active:kind==='part'}"
11-
kind="part"
12-
keyword="美食">约会聚餐</dd>
13-
<dd
14-
:class="{active:kind==='spa'}"
15-
kind="spa"
16-
keyword="丽人">丽人SPA</dd>
17-
<dd
18-
:class="{active:kind==='movie'}"
19-
kind="movie"
20-
keyword="电影">电影演出</dd>
21-
<dd
22-
:class="{active:kind==='travel'}"
23-
kind="travel"
24-
keyword="旅游">品质出游</dd>
5+
<dd :class="{active:kind==='all'}" kind="all" keyword="景点">全部</dd>
6+
<dd :class="{active:kind==='part'}" kind="part" keyword="美食">约会聚餐</dd>
7+
<dd :class="{active:kind==='spa'}" kind="spa" keyword="丽人">丽人SPA</dd>
8+
<dd :class="{active:kind==='movie'}" kind="movie" keyword="电影">电影演出</dd>
9+
<dd :class="{active:kind==='travel'}" kind="travel" keyword="旅游">品质出游</dd>
2510
</dl>
2611
<ul class="ibody">
27-
<!-- <li
28-
v-for="item in cur"
29-
:key="item.title">
30-
<el-card
31-
:body-style="{ padding: '0px' }"
32-
shadow="never">
33-
<img
34-
:src="item.img"
35-
class="image">
12+
<li v-for="item in cur" :key="item.title">
13+
<el-card :body-style="{ padding: '0px' }" shadow="never">
14+
<img :src="item.img" class="image">
3615
<ul class="cbody">
3716
<li class="title">{{ item.title }}</li>
38-
<li class="pos"><span>{{ item.pos }}</span></li>
39-
<li class="price">￥<em>{{ item.price }}</em><span>/起</span></li>
17+
<li class="pos">
18+
<span>{{ item.pos }}</span>
19+
</li>
20+
<li class="price">
21+
￥
22+
<em>{{ item.price }}</em>
23+
<span>/起</span>
24+
</li>
4025
</ul>
4126
</el-card>
42-
</li> -->
27+
</li>
4328
</ul>
4429
</section>
4530
</template>
4631
<script>
32+
import { createNamespacedHelpers } from "vuex";
33+
const { mapState } = createNamespacedHelpers("geo");
34+
const axios = require("../../server/interface/utils/axios");
4735
export default {
4836
data: () => {
4937
return {
50-
kind: 'all',
38+
kind: "all",
5139
list: {
5240
all: [],
5341
part: [],
5442
spa: [],
5543
movie: [],
5644
travel: []
5745
}
58-
}
46+
};
5947
},
6048
computed: {
61-
// cur: function () {
62-
// return this.list[this.kind]
63-
// }
49+
...mapState({
50+
position: state => state.position
51+
}),
52+
cur: function() {
53+
return this.list[this.kind];
54+
}
6455
},
65-
async mounted(){
66-
// let {status, data:{count, pois}} = await this.$axios.get('/search/resultsByKeywords', {
67-
// params: {
68-
// keyword: '景点',
69-
// city: this.$store.state.geo.position.city
70-
// }
71-
// })
72-
// if(status === 200 && count > 0) {
73-
// let r = pois.filter((item)=>item.photos.length).map((item, index)=>{
74-
// return {
75-
// title: item.name,
76-
// pos: item.type.split(';')[0],
77-
// price: item.biz_ext.cost || '暂无',
78-
// img: item.photos[0].url,
79-
// url: '//abc.com'
80-
// }
81-
// })
82-
// this.list[this.kind]=r.slice(0,9);
83-
// }
84-
// else
85-
// {
86-
// this.list[this.kind]= [];
87-
// }
56+
// 默认初始化的时候，获取一次数据
57+
async mounted() {
58+
let {
59+
status,
60+
data: { count, pois }
61+
} = await axios.get("/search/resultsByKeywords", {
62+
params: {
63+
keyword: "景点",
64+
city: this.position.city
65+
}
66+
});
67+
if (status === 200 && count > 0) {
68+
let r = pois
69+
.filter(item => item.photos.length)
70+
.map((item, index) => {
71+
return {
72+
title: item.name,
73+
pos: item.type.split(";")[0],
74+
price: item.biz_ext.cost || "暂无",
75+
img: item.photos[0].url,
76+
url: "//abc.com"
77+
};
78+
});
79+
this.list[this.kind] = r.slice(0, 9);
80+
} else {
81+
this.list[this.kind] = [];
82+
}
8883
},
8984
methods: {
90-
over: async function(e) {
91-
// let dom = e.target
92-
// let tag = dom.tagName.toLowerCase()
93-
// let self = this
94-
// if (tag === 'dd') {
95-
// this.kind = dom.getAttribute('kind')
96-
// let keyword = dom.getAttribute('keyword')
97-
98-
// let {status, data:{count, pois}} = await self.$axios.get('/search/resultsByKeywords', {
99-
// params: {
100-
// keyword,
101-
// city: this.$store.state.geo.position.city
102-
// }
103-
// })
104-
// if(status === 200 && count > 0) {
105-
// let r = pois.filter((item)=>item.photos.length).map((item, index)=>{
106-
// return {
107-
// title: item.name,
108-
// pos: item.type.split(';')[0],
109-
// price: item.biz_ext.cost || '暂无',
110-
// img: item.photos[0].url,
111-
// url: '//abc.com'
112-
// }
113-
// })
114-
// this.list[this.kind]=r.slice(0,9);
115-
// }
116-
// else
117-
// {
118-
// this.list[this.kind]= [];
119-
// }
120-
121-
// }
85+
mouseover: async function(e) {
86+
let dom = e.target;
87+
let tag = dom.tagName.toLowerCase();
88+
let self = this;
89+
if (tag === "dd") {
90+
this.kind = dom.getAttribute("kind");
91+
let keyword = dom.getAttribute("keyword");
92+
let {
93+
status,
94+
data: { count, pois }
95+
} = await axios.get("/search/resultsByKeywords", {
96+
params: {
97+
keyword,
98+
city: this.position.city
99+
}
100+
});
101+
if (status === 200 && count > 0) {
102+
// 根据实际业务进行数据过滤
103+
let r = pois
104+
.filter(item => item.photos.length)
105+
.map((item, index) => {
106+
// 再次进行数据结构的修改
107+
return {
108+
title: item.name,
109+
pos: item.type.split(";")[0],
110+
price: item.biz_ext.cost || "暂无",
111+
img: item.photos[0].url,
112+
url: "//abc.com"
113+
};
114+
});
115+
this.list[this.kind] = r.slice(0, 9);
116+
} else {
117+
this.list[this.kind] = [];
118+
}
119+
}
122120
}
123121
}
124-
}
122+
};
125123
</script>
126124
<style lang="scss">
127-
@import "@/assets/css/index/artistic.scss";
125+
@import "@/assets/css/index/artistic.scss";
128126
</style>

‎components/public/header/searchbar.vue

+11-9
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
<el-col :span="3" class="left">
55
<img src="//s0.meituan.net/bs/fe-web-meituan/e5eeaef/img/logo.png" alt="美团">
66
</el-col>
7-
<span>{{position.city}}</span>
87
<el-col :span="15" class="center">
98
<div class="wrapper">
109
<el-input
@@ -19,19 +18,18 @@
1918
</button>
2019
<dl v-if="isHotPlace" class="hotPlace">
2120
<dt>热门搜索</dt>
22-
<!-- $store.state.search.hotPlace.slice(0, 5) -->
23-
<dd v-for="(item, index) in hotPlace" :key="index">{{ item }}</dd>
21+
<dd v-for="(item, index) in hotPlace" :key="index">{{ item.name }}</dd>
2422
</dl>
2523
<dl v-if="isSearchList" class="searchList">
2624
<dd v-for="(item,index) in searchList" :key="index">{{ item.name}}</dd>
2725
</dl>
2826
</div>
2927
<p class="suggest">
30-
<!-- <a
31-
v-for="(item, index) in $store.state.search.hotPlace.slice(0, 5)"
28+
<a
29+
v-for="(item, index) in hotPlace"
3230
:key="index"
3331
href="#"
34-
>{{ item.name }}</a>-->
32+
>{{ item.name }}</a>
3533
</p>
3634
<ul class="nav">
3735
<li>
@@ -74,22 +72,26 @@
7472
<script>
7573
import _ from "lodash"; // 参考 https://www.lodashjs.com/docs/4.17.5.html
7674
import { createNamespacedHelpers } from "vuex";
77-
const { mapState } = createNamespacedHelpers("geo");
75+
const { mapState: mapState1 } = createNamespacedHelpers("geo");
76+
const { mapState: mapState2 } = createNamespacedHelpers("search");
7877
const axios = require("../../../server/interface/utils/axios");
7978
8079
export default {
8180
data() {
8281
return {
8382
search: "", //当前输入框的值
8483
isFocus: false, //是否聚焦
85-
hotPlace: ["火锅", "火锅", "火锅", "火锅"], // 热门搜索数据
84+
// hotPlace: ["火锅", "火锅", "火锅", "火锅"], // 热门
8685
searchList: [] // 搜索数据
8786
};
8887
},
8988
computed: {
90-
...mapState({
89+
...mapState1({
9190
position: state => state.position
9291
}),
92+
...mapState2({
93+
hotPlace: state => state.hotPlace.slice(0, 5)
94+
}),
9395
isHotPlace() {
9496
return this.isFocus && !this.search;
9597
},

‎server/interface/search.js

+50-22
Original file line numberDiff line numberDiff line change
@@ -10,27 +10,27 @@ const router = new Router({
1010
const sign = Config.sign;
1111

1212
router.get("/top", async ctx => {
13-
// try {
14-
// let top = await Poi.find({
15-
// 'name': new RegExp(ctx.query.input),
16-
// city: ctx.query.city
17-
// })
18-
// ctx.body = {
19-
// code: 0,
20-
// top: top.map(item => {
21-
// return {
22-
// name: item.name,
23-
// type: item.type
24-
// }
25-
// }),
26-
// type: top.length ? top[0].type : ''
27-
// }
28-
// } catch (e) {
29-
// ctx.body = {
30-
// code: -1,
31-
// top: []
32-
// }
33-
// }
13+
try {
14+
// let top = await Poi.find({
15+
// 'name': new RegExp(ctx.query.input),
16+
// city: ctx.query.city
17+
// })
18+
// ctx.body = {
19+
// code: 0,
20+
// top: top.map(item => {
21+
// return {
22+
// name: item.name,
23+
// type: item.type
24+
// }
25+
// }),
26+
// type: top.length ? top[0].type : ''
27+
// }
28+
} catch (e) {
29+
// ctx.body = {
30+
// code: -1,
31+
// top: []
32+
// }
33+
}
3434
let {
3535
status,
3636
data: { top }
@@ -46,8 +46,35 @@ router.get("/top", async ctx => {
4646
};
4747
});
4848

49+
/** 热门模块 */
4950
router.get("/hotPlace", async ctx => {
5051
let city = ctx.store ? ctx.store.geo.position.city : ctx.query.city;
52+
// 查找数据库中的数据
53+
try {
54+
// let result = await Poi.find({
55+
// city,
56+
// type: ctx.query.type || '景点'
57+
// }).limit(10)
58+
//
59+
// ctx.body = {
60+
// code: 0,
61+
// result: result.map(item => {
62+
// return {
63+
// name: item.name,
64+
// type: item.type
65+
// }
66+
// })
67+
// }
68+
} catch (e) {
69+
// ctx.body = {
70+
// code: -1,
71+
// result: []
72+
// }
73+
}
74+
/**
75+
* vuex 为服务端和客户端共享的状态，可以通过ctx上下环境来获取
76+
* 如果客户端有就直接从客户端取，否则从查询参数中获取
77+
*/
5178
let {
5279
status,
5380
data: { result }
@@ -62,14 +89,15 @@ router.get("/hotPlace", async ctx => {
6289
};
6390
});
6491

92+
/** 根据关键字进行检索 */
6593
router.get("/resultsByKeywords", async ctx => {
6694
const { city, keyword } = ctx.query;
6795
let {
6896
status,
6997
data: { count, pois }
7098
} = await axios.get(`${Config.requestUrl}/search/resultsByKeywords`, {
7199
params: {
72-
city,
100+
city: city,
73101
keyword,
74102
sign
75103
}

0 commit comments

Comments
 (0)