Skip to content

V
vue2-elm

momo的小宝贝 / vue2-elm
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
V
vue2-elm

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 9ef52a9c 编写于 作者: M maguohua
浏览文件
操作

updata food

上级 eb3d752c
隐藏空白更改
内联 并排
Showing with 230 addition and 37 deletion
README.md
浏览文件 @ 9ef52a9c
......@@ -17,7 +17,7 @@ vue2 + vue-rotuer2 + vuex2 + webpack + ES6/7 + fetch + sass + flex + svg + http-
- [x] 选择城市 -- 完成
- [x] 搜索地址 -- 完成
- [x] 展示所选地址附近商家列表 -- 完成
- [ ] 搜索美食，餐馆
- [x] 搜索美食，餐馆 -- 完成
- [ ] 根据距离、销量、评分、特色菜等进行排序和筛选
- [ ] 单个餐馆的详细信息展示，商品列表，优惠活动
- [ ] 餐馆及单个商品的评价列表展示、筛选
......
src/components/common/shoplist.vue
浏览文件 @ 9ef52a9c
<template>
<div>
<ul v-load-more="loaderMore" v-if="false">
<div class="shoplist_container">
<ul v-load-more="loaderMore">
<router-link :to="{path: 'food', query:{}}" v-for="item in shopListArr" tag='li' :key="item.id" class="shop_li">
<section>
<img :src="imgBaseUrl + subImgUrl(item.image_path)" class="shop_img">
......@@ -70,7 +70,7 @@
import {mapState} from 'vuex'
import {imgBaseUrl} from '../../config/env'
import {msiteShopList} from '../../service/getData'
import {shopList} from '../../service/getData'
import {showBack, animate} from '../../config/mUtils'
import {loadMore} from '../../components/common/mixin'
......@@ -86,12 +86,13 @@ export default {
},
async mounted(){
//获取数据
this.shopListArr = await msiteShopList(this.latitude, this.longitude, this.offset);
this.shopListArr = await shopList(this.latitude, this.longitude, this.offset, this.restaurantCategoryId);
//开始监听scrollTop的值，达到一定程度后显示返回顶部按钮
showBack(status => {
this.showBackStatus = status;
});
},
props: [],
props: ['restaurantCategoryId'],
mixins: [loadMore],
components: {
......@@ -122,7 +123,7 @@ export default {
this.preventRepeatReuqest = true;
this.offset += 20;
let res = await msiteShopList(this.latitude, this.longitude, this.offset);
let res = await shopList(this.latitude, this.longitude, this.offset, this.restaurantCategoryId);
this.shopListArr = this.shopListArr.concat(res);
//当获取数据小于20，说明没有更多数据，不需要再次请求数据
if (res.length < 20) {
......@@ -140,6 +141,9 @@ export default {
<style lang="scss" scoped>
@import '../../style/mixin.scss';
.shoplist_container{
background-color: #fff;
}
.shop_li{
display: flex;
border-bottom: 0.025rem solid #f1f1f1;
......@@ -245,12 +249,15 @@ export default {
@include fj;
@include sc(0.5rem, #666);
.distance_time{
span{
color: #888;
}
.order_time{
color: $blue;
}
}
.segmentation{
color: #ccc;
.segmentation{
color: #ccc;
}
}
}
}
......
src/components/header/head.vue
浏览文件 @ 9ef52a9c
......@@ -71,6 +71,7 @@
.title_text{
@include sc(0.8rem, #fff);
text-align: center;
font-weight: bold;
}
}
</style>
src/page/food/food.vue
浏览文件 @ 9ef52a9c
<template>
<div>
<router-link tag='div' to='home'>food</router-link>
</div>
<div class="food_container">
<head-top :head-title="headTitle" goBack="true"></head-top>
<section class="sort_container">
<div class="sort_item" :class="{choose_type:sortBy == 'food'}" @click="chooseType('food')">
<span>{{foodTitle}}</span>
<svg width="10" height="10" xmlns="http://www.w3.org/2000/svg" version="1.1" class="sort_icon">
<polygon points="0,3 10,3 5,8"/>
</svg>
</div>
<div class="sort_item" :class="{choose_type:sortBy == 'sort'}" @click="chooseType('sort')">
<span>排序</span>
<svg width="10" height="10" xmlns="http://www.w3.org/2000/svg" version="1.1" class="sort_icon">
<polygon points="0,3 10,3 5,8"/>
</svg>
</div>
<div class="sort_item sort_by_activity" :class="{choose_type:sortBy == 'activity'}" @click="chooseType('activity')">
<span>筛选</span>
<svg width="10" height="10" xmlns="http://www.w3.org/2000/svg" version="1.1" class="sort_icon">
<polygon points="0,3 10,3 5,8"/>
</svg>
</div>
</section>
<section class="shop_list_container">
<shop-list :restaurantCategoryId="restaurant_category_id"></shop-list>
</section>
</div>
</template>
<script>
import {mapState, mapMutations} from 'vuex'
import headTop from '../../components/header/head'
import shopList from '../../components/common/shoplist'
import {msiteAdress} from '../../service/getData'
export default {
data(){
return {
geohash: '', // city页面传递过来的地址geohash
headTitle: '', // msiet页面头部标题
foodTitle: '',
restaurant_category_id: '', // 食品类型id值
sortBy: '', // 筛选的条件
}
},
async beforeMount(){
this.geohash = this.$route.query.geohash;
this.headTitle = this.$route.query.title;
this.foodTitle = this.headTitle
this.restaurant_category_id = this.$route.query.restaurant_category_id;
//刷新页面时，vuex状态丢失，经度纬度需要重新获取
if (!this.latitude) {
//获取位置信息
let res = await msiteAdress(this.geohash);
// 记录当前经度纬度
this.RECORD_ADDRESS(res)
}
},
mounted(){
},
components: {
headTop,
shopList
},
computed: {
...mapState([
'latitude','longitude'
])
},
methods: {
...mapMutations([
'RECORD_ADDRESS'
]),
chooseType(type){
if (this.sortBy !== type) {
this.sortBy = type;
if (type == 'food') {
this.foodTitle = '分类';
}else{
this.foodTitle = this.headTitle;
}
}else{
this.sortBy = '';
if (type == 'food') {
this.foodTitle = this.headTitle;
}
}
}
},
watch: {
}
}
</script>
<style lang="scss" scoped>
@import '../../style/mixin';
.food_container{
padding-top: 3.6rem;
}
.sort_container{
background-color: #fff;
border-bottom: 0.025rem solid #f1f1f1;
position: fixed;
top: 1.95rem;
right: 0;
width: 100%;
display: flex;
padding: 0.3rem;
z-index: 13;
.sort_item{
@include sc(0.55rem, #444);
@include wh(33.3%, 1rem);
text-align: center;
line-height: 1rem;
border-right: 0.025rem solid $bc;
.sort_icon{
vertical-align: middle;
transition: all .3s;
fill:#666;
}
}
.choose_type{
span{
color: $blue;
}
.sort_icon{
transform: rotate(180deg);
fill:$blue;
}
}
.sort_by_activity{
border-right: none;
}
}
</style>
src/page/msite/msite.vue
浏览文件 @ 9ef52a9c
......@@ -15,7 +15,7 @@
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide food_types_container" v-for="(item, index) in foodTypes" :key="index">
<router-link :to="{path: '/food', query: {geohash}}" v-for="foodItem in item" :key="foodItem.id" class="link_to_food">
<router-link :to="{path: '/food', query: {geohash, title: foodItem.title, restaurant_category_id: getCategoryId(foodItem.link)}}" v-for="foodItem in item" :key="foodItem.id" class="link_to_food">
<figure>
<img :src="imgBaseUrl + foodItem.image_url">
<figcaption>{{foodItem.title}}</figcaption>
......@@ -53,7 +53,7 @@ export default {
geohash: '', // city页面传递过来的地址geohash
msietTitle: '获取地址中...', // msiet页面头部标题
foodTypes: [], // 食品分类列表
hasGetData: false, //是否已经获取数据
hasGetData: false, //是否已经获取地理位置数据，成功之后再获取商铺列表信息
imgBaseUrl, //图片域名地址
}
},
......@@ -95,7 +95,16 @@ export default {
methods: {
...mapMutations([
'RECORD_ADDRESS'
])
]),
// 解码url地址，求去restaurant_category_id值
getCategoryId(url){
let urlData = decodeURIComponent(url.split('=')[1].replace('&target_name',''));
if (/restaurant_category_id/gi.test(urlData)) {
return JSON.parse(urlData).restaurant_category_id.id
}else{
return ''
}
}
},
watch: {
......
src/page/search/search.vue
浏览文件 @ 9ef52a9c
......@@ -39,9 +39,17 @@
<section class="search_history" v-if="searchHistory.length&&showHistory">
<h4 class="title_restaurant">搜索历史</h4>
<ul>
<li v-for="item in searchHistory">{{item}}</li>
<li v-for="(item, index) in searchHistory" :key="index" class="history_list">
<span class="history_text ellipsis">{{item}}</span>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="delete_icon" @click="deleteHistory(index)">
<line x1="8" y1="8" x2="18" y2="18" style="stroke:#999;stroke-width:3" />
<line x1="18" y1="8" x2="8" y2="18" style="stroke:#999;stroke-width:3" />
</svg>
</li>
</ul>
<footer class="clear_history" @click="clearAllHistory">清空搜索历史</footer>
</section>
<div class="search_none" v-if="emptyResult">很抱歉！无搜索结果</div>
</div>
</template>
......@@ -54,12 +62,13 @@ import {getStore, setStore} from '../../config/mUtils'
export default {
data(){
return {
geohash: '', //
searchValue: '', //
restaurantList: [], //
imgBaseUrl, //
searchHistory: [], //
showHistory: true, //
geohash: '', // msite页面传递过来的地址信息
searchValue: '', // 搜索内容
restaurantList: [], // 搜索返回的结果
imgBaseUrl, // 图片域名地址
searchHistory: [], // 搜索历史记录
showHistory: true, // 是否显示历史记录，只有在返回搜索结果后隐藏
emptyResult: false, // 搜索结果为空时显示
}
},
created(){
......@@ -76,12 +85,16 @@ export default {
headTop
},
methods:{
//点击提交按钮，搜索结果并显示，同时将搜索内容存入历史记录
async searchTarget(){
if (!this.searchValue) {
return
}
//隐藏历史记录
this.showHistory = false;
//获取搜索结果
this.restaurantList = await searchRestaurant(this.geohash, this.searchValue);
this.emptyResult = !this.restaurantList.length;
/**
* 点击搜索结果进入下一页面时进行判断是否已经有一样的历史记录
* 如果没有则新增，如果有则不做重复储存，判断完成后进入下一页
......@@ -103,16 +116,25 @@ export default {
}
setStore('searchHistory',this.searchHistory)
},
//搜索结束后，删除搜索内容直到为空时清空搜索结果，并显示历史记录
checkInput(){
if (this.searchValue === '') {
this.showHistory = true;
this.restaurantList = [];
this.showHistory = true; //显示历史记录
this.restaurantList = []; //清空搜索结果
this.emptyResult = false; //隐藏搜索为空提示
}
},
//点击删除按钮，删除当前历史记录
deleteHistory(index){
this.searchHistory.splice(index, 1);
setStore('searchHistory',this.searchHistory);
},
//清除所有历史记录
clearAllHistory(){
this.searchHistory = [];
setStore('searchHistory',this.searchHistory);
}
},
computed:{
},
}
}
</script>
......@@ -200,4 +222,37 @@ export default {
}
}
}
.search_history{
.history_list{
background-color: #fff;
border-bottom: 0.025rem solid $bc;
@include font(0.7rem, 2rem);
padding: 0 0.3rem;
display: flex;
justify-content: space-between;
align-items: center;
.history_text{
display: inline-block;
width: 80%;
}
.delete_icon{
@include wh(1rem, 1rem);
}
}
.clear_history{
background-color: #fff;
color: $blue;
@include font(.7rem, 2rem);
font-weight: bold;
text-align: center;
}
}
.search_none{
margin: 0 auto;
@include font(0.65rem, 1.75rem);
color: #333;
background-color: #fff;
text-align: center;
margin-top: 0.125rem;
}
</style>
src/service/getData.js
浏览文件 @ 9ef52a9c
......@@ -34,11 +34,11 @@ import * as search from './tempdata/search'
/**
* 获取msite商铺列表
*/
//export const msiteShopList = (latitude, longitude, offset) => fetch('GET', '/shopping/restaurants', {latitude, longitude, offset, limit: '20', 'extras[]':'activities'})
//export const shopList = (latitude, longitude, offset, restaurant_category_id = '') => fetch('GET', '/shopping/restaurants', {latitude, longitude, offset, limit: '20', 'extras[]':'activities', keyword: '', restaurant_category_id})
/**
* 获取msite商铺列表
* 获取search页面搜索结果
*/
//export const searchRestaurant = (geohash, keyword) => fetch('GET', '/v4/restaurants', {'extras[]':'restaurant_activity', geohash, keyword, type: 'search'})
export const searchRestaurant = (geohash, keyword) => fetch('GET', '/v4/restaurants', {'extras[]':'restaurant_activity', geohash, keyword, type: 'search'})
......@@ -56,6 +56,6 @@ export const currentcity = number => setpromise(city.currentcity);
export const searchplace = (cityid, value) => setpromise(city.searchdata);
export const msiteAdress = geohash => setpromise(msite.msiteAdress);
export const msiteFoodTypes = geohash => setpromise(msite.foodTypes);
export const msiteShopList = (latitude, longitude, offset) => setpromise(msite.shopList);
export const searchRestaurant = (geohash, keyword) => setpromise(search.searchData);
export const shopList = (latitude, longitude, offset) => setpromise(msite.shopList);
//export const searchRestaurant = (geohash, keyword) => setpromise(search.searchData);
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或