updata

src/App.vue

 <template>
-	<div id="app">
+	<div>
 		<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position:absolute;width:0;height:0;visibility:hidden">
 			<defs>
 				<symbol viewBox="0 0 60 60" id="eleme">
@@ -55,6 +55,6 @@
 
 </script>
 
-<style lang="less" scoped>
-  	
+<style lang="scss">
+  @import './style/common.scss';
 </style>

src/main.js

@@ -3,8 +3,7 @@ import VueRouter from 'vue-router'
 import routes from './router/router'
 import store from './store/'
 import {routerMode} from './config/env'
-import FastClick from './plugins/fastclick';
-import './style/common.scss'
+import FastClick from './plugins/fastclick'
 import './config/rem'
 
 

src/page/msite/msite.vue

 <template>
     <div>
     	<head-top signin-up='msite'>
-    		<router-link to="/search" class="link_search" slot="search">
+    		<router-link :to="'/search/' + geohash" class="link_search" slot="search">
 	    		<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1">
 	    			<circle cx="9" cy="9" r="8" stroke="rgb(255,255,255)" stroke-width="2" fill="none"/>
 	    			<line x1="15" y1="15" x2="20" y2="20" style="stroke:rgb(255,255,255);stroke-width:2"/>

src/page/search/search.vue

 <template>
-  	<div class="marginTop">
+  	<div class="paddingTop">
         <head-top head-title="搜索" goBack="true"></head-top>
         <form class="search_form">
-            <input type="search" name="search" class="search_input">
-            <input type="submit" name="submit" class="search_submit">
+            <input type="search" name="search" placeholder="请输入商家或美食名称" class="search_input" v-model="searchValue" @input="checkInput">
+            <input type="submit" name="submit" class="search_submit" @click.prevent="searchTarget">
         </form>
+        <section v-if="restaurantList.length">
+            <h4 class="title_restaurant">商家</h4>
+            <ul class="list_container">
+                <router-link :to="{path:'/shop', query:{id:item.id}}" tag="li" v-for="item in restaurantList" :key="item.id" class="list_li">
+                    <section class="item_left">
+                        <img :src="imgBaseUrl + item.image_path" class="restaurant_img">
+                    </section>
+                    <section class="item_right">
+                        <div class="item_right_text">
+                            <p>
+                                <span>{{item.name}}</span>
+                                <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="14" class="pay_icon">
+                                    <polygon points="0,14 4,0 24,0 20,14" style="fill:none;stroke:#FF6000;stroke-width:1" />
+                                    <line x1="1.5" y1="12" x2="20" y2="12" style="stroke:#FF6000;stroke-width:1.5"/>
+                                    <text x="3.5" y="9" style="fill:#FF6000;font-size:9;font-weight:bold;">支付</text>
+                                </svg>
+                            </p>
+                            <p>月售 {{item.month_sales}} 单</p>
+                            <p>{{item.delivery_fee}} 元起送 / 距离{{item.distance}}</p>
+                        </div>
+                        <ul class="item_right_detail">
+                            <li v-for="activities in item.restaurant_activity" :key="activities.id">
+                                <span :style="{backgroundColor: '#' + activities.icon_color}" class="activities_icon">{{activities.icon_name}}</span>
+                                <span>{{activities.name}}</span>
+                                <span class="only_phone">(手机客户端专享)</span>
+                            </li>
+                        </ul>
+                    </section>
+                </router-link>
+            </ul>
+        </section>
+        <section class="search_history" v-if="searchHistory.length&&showHistory">
+            <h4 class="title_restaurant">搜索历史</h4>
+            <ul>
+                <li v-for="item in searchHistory">{{item}}</li>
+            </ul>
+        </section>
     </div>
 </template>
 
 <script>
 import headTop from '../../components/header/head'
-
+import {searchRestaurant} from '../../service/getData'
+import {imgBaseUrl} from '../../config/env'
+import {getStore, setStore} from '../../config/mUtils'
 
 export default {
 	data(){
         return {
-
+            geohash: '', //
+            searchValue: '', //
+            restaurantList: [], //
+            imgBaseUrl, //
+            searchHistory: [], //
+            showHistory: true, //
         }
+    },
+    created(){
+       
     },
     mounted(){
-
+        this.geohash = this.$route.params.geohash;
+        //获取搜索历史记录
+        if (getStore('searchHistory')) {
+            this.searchHistory = JSON.parse(getStore('searchHistory'));
+        }
     },
     components:{
         headTop
     },
     methods:{
-
+        async searchTarget(){
+            if (!this.searchValue) {
+                return 
+            }
+            this.showHistory = false;
+            this.restaurantList = await searchRestaurant(this.geohash, this.searchValue);
+            /**
+             * 点击搜索结果进入下一页面时进行判断是否已经有一样的历史记录
+             * 如果没有则新增，如果有则不做重复储存，判断完成后进入下一页
+             */
+            let history = getStore('searchHistory');
+            if (history) { 
+                let checkrepeat = false;
+                this.searchHistory = JSON.parse(history);
+                this.searchHistory.forEach(item => {
+                    if (item == this.searchValue) {
+                        checkrepeat = true;
+                    }
+                })
+                if (!checkrepeat) {
+                    this.searchHistory.push(this.searchValue)
+                }
+            }else {
+                this.searchHistory.push(this.searchValue)
+            }
+            setStore('searchHistory',this.searchHistory)
+        },
+        checkInput(){
+            if (this.searchValue === '') {
+                this.showHistory = true;
+                this.restaurantList = [];
+            } 
+        }
     },
     computed:{
 
@@ -39,12 +122,82 @@ export default {
 
     .search_form{
         background-color: #fff;
+        padding: 0.5rem;
         .search_input{
-
+            border: 0.025rem solid $bc;
+            @include wh(78%, 1.5rem);
+            @include sc(0.65rem, #333);
+            border-radius: 0.125rem;
+            background-color: #f2f2f2;
+            font-weight: bold;
+            padding: 0 0.25rem;
         }
         .search_submit{
-
+            border: 0.025rem solid $blue;
+            @include wh(20%, 1.5rem);
+            @include sc(0.65rem, #fff);
+            border-radius: 0.125rem;
+            background-color: $blue;
+            font-weight: bold;
+            padding: 0 0.25rem;
+        }
+    }
+    .title_restaurant{
+        font-size: 0.7rem;
+        line-height: 2rem;
+        text-indent: 0.5rem;
+        font-weight: bold;
+        color: #666;
+    }
+    .list_container{
+        background-color: #fff;
+    }
+    .list_li{
+        display: flex;
+        justify-content: 'center';
+        padding: 0.5rem;
+        border-bottom: 0.025rem solid $bc;
+        .item_left{
+            margin-right: 0.25rem;
+            .restaurant_img{
+                @include wh(1.7rem, 1.7rem);
+            }
+        }
+        .item_right{
+            font-size: 0.55rem;
+            flex: 1;
+            .item_right_text{
+                padding-bottom: 0.25rem;
+                border-bottom: 0.025rem solid $bc;
+                p{
+                    line-height: .9rem;
+                }
+                .pay_icon{
+                    margin-bottom: -0.08rem;
+                }
+            }
+            .item_right_detail{
+                margin-top: 0.25rem;
+                li{
+                    font-size: 0;
+                    span{
+                        font-size: .5rem;
+                        vertical-align: middle;
+                        display: inline-block;
+                        margin-bottom: 0.2rem;
+                    }
+                    .activities_icon{
+                        @include sc(.5rem, #fff);
+                        font-weight: bold;
+                        padding: .04rem;
+                        border-radius: 0.15rem;
+                        margin-right: 0.125rem;
+                    }
+                    .only_phone{
+                        color: #FF6000;
+                    }
+                }
+            }
         }
     }
-
 </style>

src/router/router.js

@@ -23,7 +23,7 @@ export default [{
         { path: '/city/:cityid', component: city },    //当前选择城市页
         { path: '/msite', component: msite, },         //所有商铺列表页
         { path: '/food', component: food },            //特色商铺列表页
-        { path: '/search', component: search },        //搜索页
+        { path: '/search/:geohash', component: search },        //搜索页
         { path: '/shop', component: shop },            //商铺详情页
         { path: '/login', component: login },          //登陆注册页
         { path: '/profile', component: profile },      //个人信息页

src/service/getData.js

@@ -2,39 +2,43 @@ import fetch from '../config/fetch'
 import * as home from './tempdata/home'
 import * as city from './tempdata/city'
 import * as msite from './tempdata/msite'
-
+import * as search from './tempdata/search'
 /**
  * 获取首页默认地址
  */
-//const cityGuess = () => fetch('GET', '/v1/cities', {type: 'guess'})
+//export const cityGuess = () => fetch('GET', '/v1/cities', {type: 'guess'})
 /**
  * 获取首页热门城市
  */
-//const hotcity = () => fetch('GET', '/v1/cities', {type: 'hot'})
+//export const hotcity = () => fetch('GET', '/v1/cities', {type: 'hot'})
 /**
  * 获取首页所有城市
  */
-//const groupcity = () => fetch('GET', '/v1/cities', {type: 'group'})
+//export const groupcity = () => fetch('GET', '/v1/cities', {type: 'group'})
 /**
  * 获取当前所在城市
  */
-//const currentcity = number => fetch('GET', '/v1/cities/' + number, {})
+//export const currentcity = number => fetch('GET', '/v1/cities/' + number, {})
  /**
  * 获取搜索地址
  */
-//const searchplace = (cityid, value) => fetch('GET', '/v1/pois', {type: 'search', city_id: cityid, keyword: value})
+//export const searchplace = (cityid, value) => fetch('GET', '/v1/pois', {type: 'search', city_id: cityid, keyword: value})
 /**
  * 获取msite页面地址信息
  */
-//const msiteAdress = geohash => fetch('GET', '/v2/pois/' + geohash, {})
+//export const msiteAdress = geohash => fetch('GET', '/v2/pois/' + geohash, {})
 /**
  * 获取msite页面食品分类列表
  */
-//const msiteFoodTypes = geohash => fetch('GET', '/v2/index_entry', {geohash, group_type:'1', 'flags[]':'F'})
+//export const msiteFoodTypes = geohash => fetch('GET', '/v2/index_entry', {geohash, group_type:'1', 'flags[]':'F'})
 /**
  * 获取msite商铺列表
  */
-//const msiteShopList = (latitude, longitude, offset) => fetch('GET', '/shopping/restaurants', {latitude, longitude, offset, limit: '20', 'extras[]':'activities'})
+//export const msiteShopList = (latitude, longitude, offset) => fetch('GET', '/shopping/restaurants', {latitude, longitude, offset, limit: '20', 'extras[]':'activities'})
+/**
+ * 获取msite商铺列表
+ */
+//export const searchRestaurant = (geohash, keyword) => fetch('GET', '/v4/restaurants', {'extras[]':'restaurant_activity', geohash, keyword, type: 'search'})
 
 
 
@@ -45,14 +49,13 @@ const setpromise = data => {
 	})
 }
 
-const cityGuess = () => setpromise(home.guesscity)
-const hotcity = () => setpromise(home.hotcity)
-const groupcity = () => setpromise(home.groupcity)
-const currentcity = number => setpromise(city.currentcity)
-const searchplace = (cityid, value) => setpromise(city.searchdata)
-const msiteAdress = geohash => setpromise(msite.msiteAdress)
-const msiteFoodTypes = geohash => setpromise(msite.foodTypes)
-const msiteShopList = (latitude, longitude, offset) => setpromise(msite.shopList)
-
+export const cityGuess = () => setpromise(home.guesscity);
+export const hotcity = () => setpromise(home.hotcity);
+export const groupcity = () => setpromise(home.groupcity);
+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 {cityGuess, hotcity, groupcity, currentcity, searchplace, msiteAdress, msiteFoodTypes, msiteShopList}
\ No newline at end of file

src/style/common.scss

@@ -5,7 +5,7 @@ body, div, span, header, footer, nav, section, aside, article, ul, dl, dt, dd, l
     font-style: normal;
     text-decoration: none;
     border: none;
-    color: #666;
+    color: #333;
     box-sizing: border-box;
     font-weight: lighter;
     font-family: "Microsoft Yahei",sans-serif;
@@ -70,6 +70,6 @@ html,body{
     white-space: nowrap;
 }
 
-.marginTop{
-    margin-top: 1.95rem;
+.paddingTop{
+    padding-top: 1.95rem;
 }
\ No newline at end of file

src/style/mixin.scss

@@ -23,17 +23,17 @@ $bc: #e4e4e4;
     transform: translateY(-50%);
 }
 
-//字体大小、行高、字体
-@mixin font($size, $line-height, $family: 'Microsoft YaHei') {  
-	font: #{$size}/#{$line-height} $family;
-}
-
 //宽高
 @mixin wh($width, $height){
 	width: $width;
 	height: $height;
 }
 
+//字体大小、行高、字体
+@mixin font($size, $line-height, $family: 'Microsoft YaHei') {  
+	font: #{$size}/#{$line-height} $family;
+}
+
 //字体大小，颜色
 @mixin sc($size, $color){
 	font-size: $size;