|
@@ -1,15 +1,18 @@
|
|
|
<template>
|
|
|
<div class="food-list-page">
|
|
|
<div class="banner-wrap">
|
|
|
- <SearchBar class="search-bar" @search="onSearch"></SearchBar>
|
|
|
+ <SearchBar class="search-bar"
|
|
|
+ @change="onInputChange"
|
|
|
+ placeholder="请输入美食"
|
|
|
+ ></SearchBar>
|
|
|
</div>
|
|
|
<div class="select-wrap">
|
|
|
- <Select
|
|
|
+ <!-- <Select
|
|
|
class="select"
|
|
|
:valueList="orderList"
|
|
|
v-model="orderIdx"
|
|
|
:placeholder="'排序'"
|
|
|
- ></Select>
|
|
|
+ ></Select> -->
|
|
|
<Select
|
|
|
class="select"
|
|
|
v-model="typeIdx"
|
|
@@ -27,33 +30,18 @@
|
|
|
<div class="card-list">
|
|
|
<!-- <div class="grid-sizer"></div> -->
|
|
|
<article
|
|
|
- @click="onClickFoodList(index)"
|
|
|
- >
|
|
|
- <div class="img-wrap">
|
|
|
- <img class="photo" :src="foodList[0].img" alt="" draggable="false">
|
|
|
- <div class="address">
|
|
|
- <img class="icon" src="@/assets/img/service/address-white.png" alt="" draggable="false">
|
|
|
- fdaslkfdj
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <h2>sadfslf</h2>
|
|
|
- <h2>sadfslf</h2>
|
|
|
- <h2>sadfslf</h2>
|
|
|
- <h2>sadfslf</h2>
|
|
|
- </article>
|
|
|
- <article
|
|
|
v-for="(item, index) in foodList"
|
|
|
:key="index"
|
|
|
@click="onClickFoodList(index)"
|
|
|
>
|
|
|
<div class="img-wrap">
|
|
|
- <img class="photo" :src="item.img" alt="" draggable="false">
|
|
|
+ <img class="photo" :src="require(`@/assets/img/service/food/${item.coverName}`)" alt="" draggable="false">
|
|
|
<div class="address">
|
|
|
<img class="icon" src="@/assets/img/service/address-white.png" alt="" draggable="false">
|
|
|
{{item.address}}
|
|
|
</div>
|
|
|
</div>
|
|
|
- <h2>{{item.title}}</h2>
|
|
|
+ <h2>{{item.name}}</h2>
|
|
|
</article>
|
|
|
</div>
|
|
|
|
|
@@ -63,6 +51,7 @@
|
|
|
<script>
|
|
|
import SearchBar from "@/components/SearchTransparent.vue";
|
|
|
import Select from "@/components/Select.vue";
|
|
|
+import serveData from "@/assets/data/serve/data.js";
|
|
|
|
|
|
export default {
|
|
|
components: {
|
|
@@ -71,26 +60,27 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+ keyword: '',
|
|
|
orderIdx: 0,
|
|
|
typeIdx: 0,
|
|
|
attractionIdx: 0,
|
|
|
- foodList: [
|
|
|
- {
|
|
|
- img: require('@/assets/img/service/food1.png'),
|
|
|
- address: '芜湖市凤凰美食街中心广场',
|
|
|
- title: '虾籽面',
|
|
|
- },
|
|
|
- {
|
|
|
- img: require('@/assets/img/service/food1.png'),
|
|
|
- address: '芜湖市凤凰美食街中心广场',
|
|
|
- title: '虾籽面',
|
|
|
- },
|
|
|
- {
|
|
|
- img: require('@/assets/img/service/food1.png'),
|
|
|
- address: '芜湖市凤凰美食街中心广场',
|
|
|
- title: '虾籽面',
|
|
|
- },
|
|
|
- ]
|
|
|
+ // foodList: [
|
|
|
+ // {
|
|
|
+ // img: require('@/assets/img/service/food1.png'),
|
|
|
+ // address: '芜湖市凤凰美食街中心广场',
|
|
|
+ // title: '虾籽面',
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // img: require('@/assets/img/service/food1.png'),
|
|
|
+ // address: '芜湖市凤凰美食街中心广场',
|
|
|
+ // title: '虾籽面',
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // img: require('@/assets/img/service/food1.png'),
|
|
|
+ // address: '芜湖市凤凰美食街中心广场',
|
|
|
+ // title: '虾籽面',
|
|
|
+ // },
|
|
|
+ // ]
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
@@ -103,24 +93,24 @@ export default {
|
|
|
]
|
|
|
},
|
|
|
typeList() {
|
|
|
- return [
|
|
|
- '全部',
|
|
|
- '中餐',
|
|
|
- '西餐',
|
|
|
- ]
|
|
|
+ return serveData.typeList
|
|
|
},
|
|
|
attractionList() {
|
|
|
- return [
|
|
|
- '全部',
|
|
|
- '景点1',
|
|
|
- '景点2',
|
|
|
- '景点3',
|
|
|
- ]
|
|
|
+ return serveData.attractionList
|
|
|
+ },
|
|
|
+ foodList() {
|
|
|
+ return serveData.restaurantList.filter((item) => {
|
|
|
+ return item.typeIdx === this.typeIdx || this.typeIdx === 0
|
|
|
+ }).filter((item) => {
|
|
|
+ return item.attractionIdx === this.attractionIdx || this.attractionIdx === 0
|
|
|
+ }).filter((item) => {
|
|
|
+ return item.name.includes(this.keyword) || item.address.includes(this.keyword) || this.keyword === ''
|
|
|
+ })
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
- onSearch() {
|
|
|
-
|
|
|
+ onInputChange(v) {
|
|
|
+ this.keyword = v
|
|
|
},
|
|
|
onClickFoodList(index) {
|
|
|
this.$router.push({name: 'FoodDetail'})
|