diff --git a/README.md b/README.md
index 815815049b4ee162d57dad5ff5fdbcfff8708204..7cadbd45362393b27d98dda7cd6cf1e573500fbe 100644
--- a/README.md
+++ b/README.md
@@ -17,7 +17,7 @@ vue2 + vue-rotuer2 + vuex2 + webpack + ES6/7 + fetch + sass + flex + svg + http-
 - [x] 选择城市 -- 完成
 - [x] 搜索地址 -- 完成
 - [x] 展示所选地址附近商家列表 -- 完成
-- [ ] 搜索美食，餐馆
+- [x] 搜索美食，餐馆 -- 完成
 - [ ] 根据距离、销量、评分、特色菜等进行排序和筛选
 - [ ] 单个餐馆的详细信息展示，商品列表，优惠活动
 - [ ] 餐馆及单个商品的评价列表展示、筛选
diff --git a/src/components/common/shoplist.vue b/src/components/common/shoplist.vue
index 8b7bad4a6a2d32822116fcfc2f2bf13e9180709a..4f7052c1054febaf7f4466c4813ff344b5116e89 100644
--- a/src/components/common/shoplist.vue
+++ b/src/components/common/shoplist.vue
@@ -1,6 +1,6 @@
 <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;
+				}
 			}
 		}
 	}
diff --git a/src/components/header/head.vue b/src/components/header/head.vue
index 136852758da0e1dc44fcbfba73c4a883b9b10211..0edd0db4f7a20bcec14576d7391c3a108ac5aa77 100644
--- a/src/components/header/head.vue
+++ b/src/components/header/head.vue
@@ -71,6 +71,7 @@
         .title_text{
             @include sc(0.8rem, #fff);
             text-align: center;
+            font-weight: bold;
         }
     }
 </style>
diff --git a/src/images/icon_loading.png b/src/images/icon_loading.png
new file mode 100644
index 0000000000000000000000000000000000000000..905865615778ee5194deb84e4c6405860fc4c6e7
Binary files /dev/null and b/src/images/icon_loading.png differ
diff --git a/src/page/food/food.vue b/src/page/food/food.vue
index d5990107982d427dacb1dc14de8c114aefb4d34a..791f2918316ec5f32220f8447e22bc1cb02cfb55 100644
--- a/src/page/food/food.vue
+++ b/src/page/food/food.vue
@@ -1,18 +1,139 @@
 <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>
-
diff --git a/src/page/msite/msite.vue b/src/page/msite/msite.vue
index 2d5099d6f5178d5dc7fd051955befe81c63d674a..00394e903984134e636931eadbd56e6dca5360ea 100644
--- a/src/page/msite/msite.vue
+++ b/src/page/msite/msite.vue
@@ -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: {
 
diff --git a/src/page/search/search.vue b/src/page/search/search.vue
index 82cb9a7c79e0d31489940cbac9dc2dff072b4533..38987d53a2dc9bed702e997d685b046b15784eda 100644
--- a/src/page/search/search.vue
+++ b/src/page/search/search.vue
@@ -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>
diff --git a/src/service/getData.js b/src/service/getData.js
index cb5da5f271dc2ec78dec8ef12b18cdd95401c7c6..b96dbe5bc3a649acf0ec73ad52e6945f88705b12 100644
--- a/src/service/getData.js
+++ b/src/service/getData.js
@@ -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);