店铺首页

src/common/serve.js

@@ -30,6 +30,12 @@ export const getReceivingAddress = () => request('/user/address', {}, 'GET');
 //  删除收货地址
 export const deleteReceivingAddress = (address_id) => request('/user/address/delete', { address_id });
 
-
+// 附近商家
 export const getNearbyShop = (lat,lng) => request('/scope/search', { lat,lng }, 'get');
 
+// 获取店铺信息
+export const getShopInfo = (shop_id) => request('shop', { shop_id }, 'get');
+
+// 获取一个商家的菜品
+export const allCategoryAndGoods = (shop_id) => request('/shop/goods/shop', { shop_id}, 'get');
+

src/common/stylus/index.styl

@@ -18,19 +18,19 @@
   }
  
 .text-extra-small{
-  font-size: $font-size-12
+  font-size: $fontsize-small
 }
 .text-base{
-  font-size: $font-size-14
+  font-size: $fontsize-medium
 }
 .text-medium{
-  font-size: $font-size-16
+  font-size: $fontsize-large
 }
 .text-large{
-  font-size: $font-size-18
+  font-size: $fontsize-large-x
 }
 .text-extra-large{
-  font-size: $font-size-20
+  font-size: $fontsize-large-xx
 }
 
 
@@ -47,7 +47,17 @@
   // transform: scaleY(0.5);
 }
 .no-data{
-  text-align: center;
+      height: 300px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    color:#999;
+}
+.word-one{
+  overflow: hidden;
+  text-overflow:ellipsis;
+  white-space: nowrap;
 }
 
 .scroll-list-wrap{

src/common/stylus/mixin.styl

@@ -6,4 +6,30 @@ position($pos=fixed){
   bottom:0;
   left:0;
   right:0;
+}
+
+word-line($clamp = 2){
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: $clamp;
+  overflow: hidden;
+}
+
+
+flex($h=center,$v= center){
+	display: flex;
+  justify-content: $h;
+  align-items: $v
+}
+
+
+wh($width, $height){
+	width: $width;
+	height: $height;
+}
+
+scw($size,$c,$w=500){
+  font-size: $size;
+  color: $c;
+  font-weight: $w !important;
 }
\ No newline at end of file

src/common/stylus/variable.styl

@@ -13,8 +13,18 @@ $margin-top-10 = 10px
 $margin-top-20 = 20px
 
 
-$font-size-12 = 12px
-$font-size-14 = 14px
-$font-size-16 = 16px
-$font-size-18 = 18px
-$font-size-20 = 20px
+// $font-size-12 = 12px
+// $font-size-14 = 14px
+// $font-size-16 = 16px
+// $font-size-18 = 18px
+// $font-size-20 = 20px
+
+
+// $fontsize-large-xxxx = 30px
+// $fontsize-large-xxx = 24px
+// $fontsize-large-xx = 20px
+// $fontsize-large-x = 18px
+// $fontsize-large = 16px
+// $fontsize-medium = 14px
+// $fontsize-small = 12px
+// $fontsize-small-s = 10px
\ No newline at end of file

src/common/utils/components.js

 import CubePage from "../../components/cube-page.vue"; 
 import addressList from "../../components/address-list.vue"; 
+import CubeBuyCart from "../../components/cube-buy-cart.vue"; 
 
 function plugin (Vue){
     if(plugin.installed)return;
     Vue.component('cube-page',CubePage)
     Vue.component('cube-address-list',addressList)
-
+    Vue.component('cube-buy-cart',CubeBuyCart)
 }
 export default plugin;
\ No newline at end of file

src/common/utils/mUtils.js

@@ -11,6 +11,22 @@ export function MAP(key = 'c066bb79c8747e4d84aa9e86276f8174') {
   })
 }
 
+
+export const localstorage = {
+  save(key, value) {
+      localStorage.setItem(key, JSON.stringify(value));
+  },
+  fetch(key) {
+      return JSON.parse(localStorage.getItem(key)) || [];
+  },
+  remove(key) {
+      localStorage.removeItem(key);
+  },
+  clear() {
+      localStorage.clear();
+  }
+};
+
 export default {
   onRouterLink(vm,route, query) {
     if (query) {

src/components/cube-buy-cart.vue

+ <template>
+  <section class="cart_module">
+    <transition name="showReduce">
+      <span
+        @click="removeOutCart(foods.category_id, foods.item_id, foods.specfoods[0].food_id, foods.specfoods[0].name, foods.specfoods[0].price, '', foods.specfoods[0].packing_fee, foods.specfoods[0].sku_id, foods.specfoods[0].stock)"
+        v-if="foodNum"
+      >
+        <i class="cubeic-remove add_icon"></i>
+      </span>
+    </transition>
+    <transition name="fade">
+      <span class="cart_num" v-if="foodNum">{{foodNum}}</span>
+    </transition>
+    <i class="cubeic-add add_icon" @click="addToCart()"></i>
+    <!-- <svg
+      class="add_icon"
+      @click="addToCart(foods.category_id, foods.item_id, foods.specfoods[0].food_id, foods.specfoods[0].name, foods.specfoods[0].price, '', foods.specfoods[0].packing_fee, foods.specfoods[0].sku_id, foods.specfoods[0].stock, $event)"
+    >
+      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cart-add" />
+    </svg>-->
+  </section>
+</template>
+
+<script>
+import { mapState, mapMutations } from "vuex";
+export default {
+  data() {
+    return {
+      showMoveDot: [] //控制下落的小圆点显示隐藏
+    };
+  },
+  mounted() {},
+  computed: {
+    ...mapState(["cartList"]),
+    /**
+     * 监听cartList变化，更新当前商铺的购物车信息shopCart，同时返回一个新的对象
+     */
+    shopCart: function() {
+      return Object.assign({}, this.cartList[this.shopId]);
+    },
+    //shopCart变化的时候重新计算当前商品的数量
+    foodNum: function() {
+      let category_id = this.categoryId;
+      let item_id = this.foods.item_id;
+      if (
+        this.shopCart &&
+        this.shopCart[category_id] &&
+        this.shopCart[category_id][item_id]
+      ) {
+        let num = 0;
+        Object.values(this.shopCart[category_id][item_id]).forEach(
+          (item, index) => {
+            num += item.num;
+          }
+        );
+        return num;
+      } else {
+        return 0;
+      }
+    }
+  },
+  props: ["food", "shopId", "categoryId"],
+  methods: {
+    ...mapMutations(["ADD_CART", "REDUCE_CART"]),
+    //移出购物车
+    removeOutCart(
+      category_id,
+      item_id,
+      food_id,
+      name,
+      price,
+      specs,
+      packing_fee,
+      sku_id,
+      stock
+    ) {
+      if (this.foodNum > 0) {
+        this.REDUCE_CART({
+          shopid: this.shopId,
+          category_id,
+          item_id,
+          food_id,
+          name,
+          price,
+          specs,
+          packing_fee,
+          sku_id,
+          stock
+        });
+      }
+    },
+    //加入购物车，计算按钮位置。
+    addToCart() {
+      const addInfo = {
+        shopid: this.shopId,
+        category_id: this.categoryId,
+        food_id: food.id,
+        name: food.name,
+        favorable_price:food.favorable_price,
+        price:food.price
+      };
+      this.$store.commit('ADD_CART',addInfo);
+      let elLeft = event.target.getBoundingClientRect().left;
+      let elBottom = event.target.getBoundingClientRect().bottom;
+      this.showMoveDot.push(true);
+      this.$emit("showMoveDot", this.showMoveDot, elLeft, elBottom);
+    },
+    //显示规格列表
+    showChooseList(foodScroll) {
+      this.$emit("showChooseList", foodScroll);
+    },
+    //点击多规格商品的减按钮，弹出提示
+    showReduceTip() {
+      this.$emit("showReduceTip");
+    }
+  }
+};
+</script>
+
+<style lang="stylus" scoped>
+@import '~common/stylus/mixin.styl';
+
+.cart_module {
+  .add_icon {
+    position: relative;
+    z-index: 999;
+  }
+
+  .cart_button {
+    display: flex;
+    align-items: center;
+  }
+
+  .cubeic-add {
+    scw(20px, #3190e8);
+  }
+
+  .specs_reduce_icon {
+    fill: #999;
+  }
+
+  .cart_num {
+    // @include sc(.65rem, #666);
+    min-width: 1rem;
+    text-align: center;
+    font-family: Helvetica Neue, Tahoma;
+  }
+
+  .choose_specification {
+    .choose_icon_container {
+      display: flex;
+      align-items: center;
+
+      .show_chooselist {
+        display: block;
+        // @include sc(.55rem, #fff);
+        padding: 0.1rem 0.2rem;
+        background-color: $blue;
+        border-radius: 0.2rem;
+        border: 1px solid $blue;
+      }
+    }
+  }
+}
+
+.showReduce-enter-active, .showReduce-leave-active {
+  transition: all 0.3s ease-out;
+}
+
+.showReduce-enter, .showReduce-leave-active {
+  opacity: 0;
+  transform: translateX(1rem);
+}
+
+.fade-enter-active, .fade-leave-active {
+  transition: all 0.3s;
+}
+
+.fade-enter, .fade-leave-active {
+  opacity: 0;
+}
+
+.fadeBounce-enter-active, .fadeBounce-leave-active {
+  transition: all 0.3s;
+}
+
+.fadeBounce-enter, .fadeBounce-leave-active {
+  opacity: 0;
+  transform: scale(0.7);
+}
+</style>
+

src/router.js

@@ -11,9 +11,9 @@ const editAddress = r => require.ensure([], () => r(require('./views/address/edi
 const choiseLocation = r => require.ensure([], () => r(require('./views/location/choise.vue')))
 
 const shop = r => require.ensure([], () => r(require('./views/shopItem/index.vue')))
-/* const choiseLocation = r => require.ensure([], () => r(require('./views/location/choise.vue')))
-const choiseLocation = r => require.ensure([], () => r(require('./views/location/choise.vue')))
- */
+ const searchLocation = r => require.ensure([], () => r(require('./views/search/location-search.vue')))
+// const choiseLocation = r => require.ensure([], () => r(require('./views/location/choise.vue')))
+ 
 
 Vue.use(Router);
 
@@ -68,7 +68,13 @@ export default new Router({
       path: '/location/choise',
       name: 'choiseLocation',
       component: choiseLocation,
-      meta: { title: '收货地址', keepAlive: false }
+      meta: { title: '确认收货地址', keepAlive: false }
+    },
+    {
+      path: '/location/search',
+      name: 'searchLocation',
+      component: searchLocation,
+      meta: { title: '确认收货地址', keepAlive: false }
     },
     {
       path: '/shop/:id',

src/store/index.js

@@ -6,9 +6,18 @@ import actions from './actions'
 Vue.use(Vuex)
 
 const state = {
-	location:{lat:'',lng:'',formattedAddress:''},
-	choise_position:{},
-	edit_address:{} // 待编辑的地址信息
+	location: { lat: '', lng: '', formattedAddress: '' },
+	choise_position: {
+		id: 0,
+		location: {
+			lat: 0,
+			lng: 0,
+			P: 0,
+			Q: 0
+		}
+	},
+	edit_address: {}, // 待编辑的地址信息
+	cartList: {}, // 加入购物车的商品列表
 }
 export default new Vuex.Store({
 	state,

src/store/mutations.js

@@ -2,22 +2,73 @@ export default {
     // 记录当前地理位置
     RECORD_ADDRESS(state, info) {
         state.location = info;
-        console.log( info)
+        console.log(info)
     },
     // 重新定位
     REFRESH_LOCATION(state, info) {
         state.location = info;
-        console.log( info)
+        console.log(info)
     },
     // 地图定位：确认收货地址
-    CHOISE_POSITION(state, info){
+    CHOISE_POSITION(state, info) {
         state.choise_position = info
     },
     // 清空 地图选点信息
-    CLEAR_POSITION(state){
-        state.choise_position = {}
+    CLEAR_POSITION(state) {
+        state.choise_position = {
+            id: 0,
+            location: {
+                lat: 0,
+                lng: 0,
+                P: 0,
+                Q: 0
+            }
+        }
     },
-    RECORD_ADDRESSINFO(state, info){
+    // 记录待 编辑地址信息
+    RECORD_ADDRESSINFO(state, info) {
         state.edit_address = info
+    },
+
+    // 加入购物车
+    ADD_CART(state, {
+        shopid,
+        category_id,
+        item_id,
+        food_id,
+        name,
+        price,
+        specs,
+        packing_fee,
+        sku_id,
+        stock
+    }) {
+        // cartList 中记录各个店铺下->各个分类下->多个商品
+        let cart = state.cartList;
+        let shop = cart[shopid] = (cart[shopid] || {});
+        let category = shop[category_id] = (shop[category_id] || {});
+        let item = category[item_id] = (category[item_id] || {});
+        if (item[food_id]) {
+            item[food_id]['num']++;
+        } else {
+            item[food_id] = {
+                "num": 1,
+                "id": food_id,
+                "name": name,
+                "price": price,
+                "specs": specs,
+                "packing_fee": packing_fee,
+                "sku_id": sku_id,
+                "stock": stock
+            };
+        }
+        state.cartList = { ...cart };
+        //存入localStorage
+        setStore('buyCart', state.cartList);
+    },
+
+    // 移出购物车
+    REDUCE_CART() {
+
     }
 }
\ No newline at end of file

src/vant.js

@@ -11,15 +11,18 @@ import {
     Cell, CellGroup ,
     Field,
     Button,
-    Tag 
+    Tag,
+    Card,
+    Tab, Tabs 
 } from 'vant'
 Vue.use(Search)
 Vue.use(Image)
 Vue.use(Grid)
 Vue.use(GridItem)
-// Vue.use(AddressList);
+Vue.use(Card);
 Vue.use(Row).use(Col);
 Vue.use(Cell).use(CellGroup);
 Vue.use(Field)
 Vue.use(Tag)
 Vue.use(Button)
+Vue.use(Tab).use(Tabs);

src/views/address/add-address.vue

@@ -142,6 +142,11 @@ export default {
         type: "txt"
       }).show();
     }
+  },
+  // 清除 允许切换地址的标记
+  beforeRouteLeave(to, from, next) {
+    this.$store.commit("CLEAR_POSITION");
+    next();
   }
 };
 </script>

src/views/address/address.vue

@@ -59,7 +59,7 @@ export default {
           address_suffix: el.address_suffix,//门牌号
           is_default: el.is_default,
           location_id:el.location_id,
-          position: '121.69821,31.186741'
+          position: `${el.location.lat},${el.location.lng}`
         };
         this.list.push(_obj);
       });

src/views/address/edit-address.vue

@@ -35,7 +35,6 @@
     <div class="van-address-edit__buttons">
       <van-button class="save" type="danger" size="large" @click="onSave">确定</van-button>
     </div>
-    {{edit_address}}
   </div>
 </template>
 
@@ -83,9 +82,10 @@ export default {
   },
   created() {
     const choiseP = this.choise_position;
+
     this.nameValue = this.edit_address.name;
     this.telValue = this.edit_address.tel;
-    this.locationValue = choiseP.name
+    this.locationValue = choiseP.id
       ? choiseP.name
       : this.edit_address.address_detail;
     this.detailValue = this.edit_address.address_suffix;
@@ -113,37 +113,40 @@ export default {
 
         address_suffix: this.detailValue,
         is_default: 1,
-        address_id: 1 // 没有省市区id，默认为1
+        address_id: 0 // 没有省市区id，默认为1
       };
-      if (this.receiverName == "") {
+      if (this.nameValue == "") {
         this.toast("请填写姓名");
         return;
-      } else if (this.receiverTel == "") {
+      } else if (this.telValue == "") {
         this.toast("请填写手机号");
         return;
-      } else if (this.receiverArea == "") {
+      } else if (this.locationValue == "") {
         this.toast("请填写地址");
         return;
-      } else if (this.detailedAddress == "") {
+      } else if (this.detailValue == "") {
         this.toast("请填写门牌号");
         return;
       }
       // 若重新选择定位，则添加地图选点记录的定位信息
       const position = this.choise_position;
-      if (position.name) {
-        let mapInfo = {
-          name: position.name,
-          address: position.address,
-          map_id: position.id,
-          lat: position.location.lat,
-          lng: position.location.lng,
-          p: position.location.P,
-          r: position.location.Q,
-          address_detail: position.name
-        };
-        Object.assign(Data, mapInfo);
+      console.log(position);
+      let mapInfo = {
+        name: position.name,
+        address: position.address,
+        map_id: format(position, position.id),
+        lat: format(position, position.location.lat),
+        lng: format(position, position.location.lng),
+        p: format(position, position.location.P),
+        r: format(position, position.location.Q),
+        address_detail: position.name
+      };
+      Object.assign(Data, mapInfo);
+      function format(data, value) {
+        return Object.keys(data).length ? value : 0;
       }
       console.log(Data);
+      return;
       let res = await editReceivingAddress(Data);
       if (res.code === 0) {
         this.toast("修改地址成功");
@@ -157,7 +160,10 @@ export default {
       }
     },
     onChoiseLocation(route) {
-      this.$router.push({ name: route, query: { position: this.$route.query.position } });
+      this.$router.push({
+        name: route,
+        query: { geohash: this.$route.query.position }
+      });
     },
     toast(content) {
       this.$createToast({
@@ -165,6 +171,11 @@ export default {
         type: "txt"
       }).show();
     }
+  },
+  // 清除 允许切换地址的标记
+  beforeRouteLeave(to, from, next) {
+    this.$store.commit("CLEAR_POSITION");
+    next();
   }
 };
 </script>

src/views/address/select-address.vue

 <template>
   <cube-page type="recycle-list" title="RecycleList">
     <div slot="content">
-      <van-search placeholder="请输入搜索关键词" shape="round"></van-search>
+      <van-search placeholder="请输入搜索关键词" shape="round" @click="onLink('searchLocation')"></van-search>
 
       <div class="scroll-list-wrap">
         <cube-scroll ref="scroll">
@@ -81,7 +81,7 @@ export default {
       let _data = res.data;
       _data.forEach(el => {
         let _obj = {
-          id: el.id.toString(),
+          // id: el.id.toString(),
           name: el.name,
           tel: el.phone,
           label: el.label, // 地址类型：例：家
@@ -95,8 +95,8 @@ export default {
     },
     // 选择收货地址
     async setDefaultAddress(item) {
-      this.$router.push({ name: "home" });
-      return;
+      // this.$router.push({ name: "home" });
+      // return;
       Object.assign(item, { is_default: 1 });
       let res = await editReceivingAddress(item);
       if (res.code == 0) {
@@ -123,7 +123,7 @@ export default {
 
 <style scoped>
 .scroll-list-wrap {
-  top: 30px;
+  top: 40px;
 }
 .cube-page > .wrapper .content {
   margin: 0;

src/views/home/index.vue

@@ -81,7 +81,7 @@ import { mapGeolocation, MAP } from "../../common/utils/mUtils";
 import { mapState } from "vuex";
 var map = {};
 var b = {
-  shop_id: 1,
+  shop_id: '8e3a39b19ec215d4c9c424ac1608751c',
   name: "清吧",
   address: "重庆市,市辖区,涪陵区",
   icon: "files/shop/77/image/a4558aa3-ccb2-4f2c-b5db-1461a25c12a9.jpg",

src/views/location/choise.vue

 <template>
   <div>
     <!-- 搜索框 -->
-    <van-search placeholder="小区/写字楼/学校等" shape="round"></van-search>
+    <van-search placeholder="小区/写字楼/学校等" shape="round" @click="onSearch"></van-search>
 
     <!-- map -->
     <div class="amap-page-container">
@@ -34,6 +34,10 @@
         <div v-if="poisData==null" class="no-data text-base">
           <cube-loading :size="24"></cube-loading>正在定位
         </div>
+       
+        <div v-else-if="poisData.length==0" class="no-data text-base">
+          地址查询失败
+        </div>
       </cube-scroll>
     </div>
   </div>
@@ -47,7 +51,7 @@ export default {
   computed: {
     // 是否根据已有经纬度进行定位
     hasPosition() {
-      return this.$route.query.position ? true : false;
+      return this.$route.query.geohash ? true : false;
     }
   },
 
@@ -104,9 +108,14 @@ export default {
               self.poisData = positionResult.regeocode.pois;
               console.log(positionResult);
             });
+            positionPicker.on("fail", function(positionResult) {
+              console.log(positionResult);
+              self.poisData = [];
+ 
+            });
             
             if (self.hasPosition) {
-              let position = self.$route.query.position.split(",");
+              let position = self.$route.query.geohash.split(",");
               positionPicker.start(position);
             } else {
               positionPicker.start();
@@ -133,6 +142,9 @@ export default {
       const curChoise = this.poisData.find(item => item.id == id);
       this.$store.commit("CHOISE_POSITION", curChoise);
       this.$router.go(-1);
+    },
+    onSearch(){
+      this.$router.replace({name:'searchLocation',query:{geohash:this.$route.query.geohash}})
     }
   }
 };

src/views/search/location-search.vue

+<template>
+  <div>
+    <!--  <van-row>
+      <form action="/">
+        <van-search
+        ref="search"
+          v-model="searchValue"
+          placeholder="请输入搜索关键词"
+          show-action
+          shape="round"
+          @search="onSearch"
+          @cancel="onCancel"
+        />
+      </form>
+    </van-row>-->
+
+    <div class="van-search van-search--show-action" style="background: rgb(255, 255, 255);">
+      <div class="van-search__content van-search__content--round">
+        <div class="van-cell van-cell--borderless van-field">
+          <div class="van-cell__value van-cell__value--alone">
+            <div class="van-field__body">
+              <input
+                id="search"
+                v-model="keyword"
+                type="search"
+                placeholder="请输入搜索关键词"
+                class="van-field__control"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="van-search__action" @click="onCancel">取消</div>
+    </div>
+
+    <!-- <input id="search" type="text" /> -->
+
+    <div class="container">
+      <cube-scroll ref="scroll">
+        <!-- 输入提示的容器对象 -->
+        <div id="suggestContainer" class="text-medium"></div>
+
+        <van-row v-if="keyword==''&&searchHistory.length" class="history-box margin-bt-space">
+          <p class="text-medium text-color-gray"></p>
+          <van-cell title="历史搜索">
+            <i slot="right-icon" class="cubeic-delete text-medium" @click="onClearHistory"></i>
+          </van-cell>
+          <div class="history-list">
+            <van-tag
+              v-for="tag in searchHistory"
+              :key="tag.id"
+              size="large"
+              color="#f1f1f1"
+              class="text-default-gray"
+              @click="setCurrentGeohash(tag)"
+            >{{tag.name}}</van-tag>
+          </div>
+        </van-row>
+
+        <div v-else-if="keyword==''&& searchHistory.length==0" class="no-data">暂无历史搜索</div>
+      </cube-scroll>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+import { localstorage } from "../../common/utils/mUtils";
+let vm = {};
+export default {
+  data() {
+    vm = this;
+    return {
+      fromPath: "", //路由
+      keyword: "",
+      searchHistory: [] // 搜索历史记录
+    };
+  },
+  created() {
+    // document.title = this.shopInfo.name;
+  },
+  mounted() {
+    const storage = localstorage.fetch("search-location");
+    this.searchHistory = storage.length ? storage : [];
+    this.events();
+  },
+  computed: {
+    ...mapState(["shopInfo"])
+  },
+  methods: {
+    events() {
+      AMapUI.loadUI(["misc/PoiPicker"], function(PoiPicker) {
+        var poiPicker = new PoiPicker({
+          input: "search", //输入框id
+          suggestContainer: "suggestContainer"
+        });
+
+        poiPicker.on("poiPicked", function(poiResult) {
+          vm.poiPickedFn(poiResult.item);
+          console.log(poiResult);
+        });
+        // poiPicker.suggest("川沙");
+      });
+    },
+    /**
+     * 点击搜索结果进入下一页面时进行判断是否已经有一样的历史记录
+     * 如果没有则新增，如果有则不做重复储存，判断完成后进入下一页
+     */
+    recordHistory(poi) {
+      let repeatPoi = this.searchHistory.find(item => item.id == poi.id);
+      if (typeof repeatPoi == "undefined") {
+        this.searchHistory.push(poi);
+      }
+      localstorage.save("search-location", this.searchHistory);
+      //   this.searchHistory = [];
+    },
+    //监听poi选中信息
+    poiPickedFn(poi) {
+      this.recordHistory(poi);
+      // 用户选中的poi点信息 存入Vuex
+      this.$store.commit("CHOISE_POSITION", poi);
+      this.$router.go(-1);
+    },
+    setCurrentGeohash(){
+        
+    },
+    onRouterLink(keyword) {
+      this.$router.replace({
+        name: "searchList",
+        query: { keyword: keyword }
+      });
+    },
+    onClearHistory() {
+      this.$createDialog({
+        type: "confirm",
+        icon: "cubeic-alert",
+        title: "",
+        content: "确认删除全部历史记录？",
+        confirmBtn: {
+          text: "删除",
+          active: true
+        },
+        cancelBtn: {
+          text: "取消"
+        },
+        onConfirm: () => {
+          localstorage.remove("search-location");
+          this.searchHistory = [];
+        }
+      }).show();
+    },
+    onCancel() {
+      this.$router.replace({
+        name: this.fromPath,
+        query: { geohash: this.$route.query.geohash }
+      });
+    }
+  },
+  beforeRouteEnter(to, from, next) {
+    next(vm => {
+      vm.fromPath = from.name;
+    });
+  }
+};
+</script>
+
+<style lang="stylus" scoped>
+@import '~common/stylus/mixin.styl';
+
+.history-box {
+  padding: 0 10px;
+
+  .history-list {
+    width: 110%;
+  }
+
+  .van-cell {
+    padding-left: 0;
+    padding-right: 0;
+
+    &__title span {
+      font-size: 16px;
+    }
+
+    &:not(:last-child)::after {
+      border: none;
+    }
+  }
+
+  .van-tag {
+    min-width: 34px;
+    margin: 0 10px 10px 0;
+    text-align: center;
+    line-height: 22px;
+    color: #999;
+  }
+}
+
+.container {
+  position();
+  top: 40px;
+  padding: 10px 0 10px 10px;
+  background-color: #fff;
+}
+
+.action-btn {
+  background-color: transparent;
+  line-height: 26px;
+
+  &.van-tag--round:after {
+    border-radius: 999px !important;
+  }
+}
+</style>
\ No newline at end of file

src/views/shopItem/children/shop.vue

+<template>
+  <cube-page type="scroll-nav-side container" title="ScrollNav">
+    <div slot="content">
+      <div class="view-wrapper">
+        <cube-scroll-nav
+          :side="true"
+          :data="data"
+          :current="current"
+          @change="changeHandler"
+          @sticky-change="stickyChangeHandler"
+        >
+          <div class="prepend-header" slot="prepend">
+            <van-image width="76" height="76" :src="$globalUrlFile+shopInfo.icon"></van-image>
+            <section class="prepend-content">
+              <h1>{{shopInfo.name}}</h1>
+              <p class="text-light-grey text-extra-small">评价4.2 月售 等描述</p>
+              <van-tag plain type="danger">满减</van-tag>
+            </section>
+          </div>
+
+          <van-tabs v-model="active" animated>
+            <van-tab v-for="(tab,index) in tabs" :key="index" :title="tab">内容 {{ tab }}</van-tab>
+          </van-tabs>
+
+          <cube-scroll-nav-panel
+            v-for="item in data"
+            :key="item.category_name"
+            :label="item.category_name"
+            :title="item.category_name"
+          >
+            <div class="content">
+              <section class="card" v-for="food in item.goods_list" :key="food.id">
+                <van-card desc="月售360 好评率88%" :title="food.name" :thumb="$globalUrlFile+food.icon">
+                  <!-- <div slot="tags">
+                    <van-tag plain type="danger">标签</van-tag>
+                    <van-tag plain type="danger">标签</van-tag>
+                  </div>-->
+                  <div slot="price" class="card__bottom">
+                    <section>
+                      <div class="card__origin-price">
+                        <span>¥</span>
+                        <span>{{food.price}}</span>
+                      </div>
+                      <div v-if="food.favorable_price" class="card__price">
+                        <span>¥</span>
+                        <span>{{food.favorable_price}}</span>
+                      </div>
+                    </section>
+                    <cube-buy-cart
+                      :shopId="shopId"
+                      :categoryId="item.category_id"
+                      :foods="food"
+                      @moveInCart="listenInCart"
+                      @showChooseList="showChooseList"
+                      @showReduceTip="showReduceTip"
+                      @showMoveDot="showMoveDotFun"
+                    ></cube-buy-cart>
+                  </div>
+                </van-card>
+              </section>
+            </div>
+          </cube-scroll-nav-panel>
+        </cube-scroll-nav>
+      </div>
+    </div>
+  </cube-page>
+</template>
+
+<script type="text/ecmascript-6">
+import { allCategoryAndGoods, getShopInfo } from "../../../common/serve";
+import CubePage from "../../../components/cube-page.vue";
+import goodsData from "../../../data";
+
+const goods = goodsData.goods;
+
+export default {
+  components: {
+    CubePage
+  },
+  data() {
+    return {
+      data: goods,
+      current: 0, //当前导航 active 项的 key 值
+      shopId: this.$route.params.id,
+      shopInfo: {},
+      tabs: ["点餐", "评价", "商家"]
+    };
+  },
+  created() {
+    this.initData();
+  },
+  methods: {
+    async initData() {
+      let res = await allCategoryAndGoods(this.shopId);
+      if (res.code == 0) {
+        this.data = res.data;
+        this.current = res.data[0].category_name;
+      }
+      let msg = await getShopInfo(this.shopId);
+      if (msg.code == 0) {
+        this.shopInfo = msg.data;
+      }
+    },
+    changeHandler(label) {
+      console.log("changed to:", label);
+    },
+    stickyChangeHandler(current) {
+      console.log("sticky-change", current);
+    },
+    //显示下落圆球
+    showMoveDotFun(showMoveDot, elLeft, elBottom) {
+      this.showMoveDot = [...this.showMoveDot, ...showMoveDot];
+      this.elLeft = elLeft;
+      this.elBottom = elBottom;
+    },
+    listenInCart() {},
+    showChooseList() {},
+    showReduceTip() {},
+    showMoveDotFun() {}
+  }
+};
+</script>
+
+<style lang="stylus">
+@import '~common/stylus/variable.styl';
+@import '~common/stylus/mixin.styl';
+
+.view-wrapper {
+  background: url('https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3340225592,2502432116&fm=26&gp=0.jpg') no-repeat; // ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3340225592,2502432116&fm=26&gp=0.jpg) no-repeat;
+  background-size: cover;
+}
+
+.container.scroll-nav-side {
+  .cube-scroll-nav-bar {
+    width: 80px;
+    background-color: transparent;
+
+    .cube-scroll-wrapper {
+      width: 100%;
+    }
+
+    span {
+      font-size: $fontsize-small;
+    }
+  }
+
+  .cube-scroll-nav-panel-title {
+    scw($fontsize-small, #6e6e6e, 600);
+  }
+}
+
+.card__bottom {
+  width: 100%;
+  flex(space-between);
+
+  .card__price {
+    display: inline-block;
+    font-size: $fontsize-medium;
+    color: #878588;
+    text-decoration: line-through;
+  }
+
+  .card__origin-price {
+    display: inline-block;
+    margin-right: 8px;
+
+    &>span:nth-of-type(1) {
+      scw($fontsize-medium, #ff5f4b, 600);
+    }
+
+    &>span:nth-of-type(2) {
+      scw($fontsize-large, #ff5f4b, 600);
+    }
+  }
+}
+
+.van-card {
+  background-color: #fff;
+
+  &__bottom {
+    position: absolute;
+    bottom: 0;
+    top: 72%;
+  }
+
+  &__price {
+    width: 100%;
+  }
+
+  &__title {
+    font-weight: 600;
+    line-height: 24px;
+    font-size: $fontsize-small;
+  }
+
+  &__desc {
+    font-size: $fontsize-small-s;
+  }
+}
+
+.scroll-nav-side {
+  background-color: #fff;
+
+  .view-wrapper {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+  }
+
+  .prepend-header {
+    text-align: center;
+    font-size: 20px;
+
+    .prepend-content {
+      background-color: #fff;
+      padding: 20px 0 10px;
+
+      p {
+        padding: 10px;
+      }
+    }
+  }
+
+  .cube-scroll-nav-main {
+    background-color: #efeff4;
+  }
+
+  .cube-sticky-fixed {
+    background-color: #efeff4;
+  }
+
+  .cube-scroll-nav-bar-item {
+    padding: 15px;
+  }
+
+  .cube-scroll-nav-bar-item_active {
+    background-color: #fff;
+  }
+
+  .cube-scroll-nav-panels {
+    background-color: #fff;
+  }
+
+  .cube-scroll-nav-panel {
+  }
+
+  .cube-scroll-nav-panel-title {
+    padding: 15px;
+    font-size: 16px;
+    background-color: #fff;
+  }
+}
+</style>

src/views/shopItem/index.vue

 <template>
-  <cube-page type="scroll-nav-side" title="ScrollNav">
-    <div slot="content">
-      <div class="view-wrapper">
-        <cube-scroll-nav
-          :side="true"
-          :data="data"
-          :current="current"
-          @change="changeHandler"
-          @sticky-change="stickyChangeHandler">
-          <ul class="prepend-header" slot="prepend">
-            <li>11</li>
-            <li>22</li>
-            <li>333</li>
-          </ul>
-          <cube-scroll-nav-panel
-            v-for="item in data"
-            :key="item.name"
-            :label="item.name"
-            :title="item.name">
-            <ul>
-              <li v-for="food in item.foods">
-                <div>
-                  <img :src="food.icon">
-                  <p>{{food.name}}</p>
-                </div>
-              </li>
-            </ul>
-          </cube-scroll-nav-panel>
-        </cube-scroll-nav>
-      </div>
+  <cube-page type="scroll-nav-side container" title="ScrollNav">
+    <div slot="content" class="scroll-list-wrap">
+      <cube-sticky :pos="scrollY">
+        <cube-scroll :scroll-events="scrollEvents" @scroll="scrollHandler">
+          <section class="page-header">
+            <van-image width="76" height="76" :src="$globalUrlFile+shopInfo.icon"></van-image>
+            <div class="prepend-content">
+              <h1>{{shopInfo.name}}</h1>
+              <p class="text-light-grey text-extra-small">评价4.2 月售 等描述</p>
+              <van-tag plain type="danger">满减</van-tag>
+            </div>
+          </section>
+
+          <van-tabs animated>
+            <van-tab v-for="(tab,index) in tabs" :key="index" :title="tab.name">
+              <keep-alive>
+                <component :is="tab.component"></component>
+              </keep-alive>
+            </van-tab>
+          </van-tabs>
+        </cube-scroll>
+      </cube-sticky>
     </div>
   </cube-page>
 </template>
 
 <script type="text/ecmascript-6">
-  import CubePage from '../../components/cube-page.vue'
-  import goodsData from '../../data'
+import { allCategoryAndGoods, getShopInfo } from "../../common/serve";
+import shopTab from "./children/shop";
+import goodsData from "../../data";
 
-  const goods = goodsData.goods
+const goods = goodsData.goods;
 
-  export default {
-    components: {
-      CubePage
-    },
-    data() {
-      return {
-        data: goods,
-        current: goods[3].name
+export default {
+  components: {
+    shopTab
+  },
+  data() {
+    return {
+      scrollY: 0,
+      scrollEvents: ["scroll"],
+      data: goods,
+      current: 0, //当前导航 active 项的 key 值
+      shopId: 0,
+      shopInfo: {},
+      tabs: [
+        { name: "点餐", component: 'shopTab' },
+        { name: "评价", component: 'shopTab' },
+        { name: "商家", component: 'shopTab' }
+      ]
+    };
+  },
+  created() {
+    this.shopId = this.$route.params.id;
+    this.initData();
+  },
+  methods: {
+    scrollHandler() {},
+    async initData() {
+      let res = await allCategoryAndGoods(this.shopId);
+      if (res.code == 0) {
+        this.data = res.data;
+        this.current = res.data[0].category_name;
       }
-    },
-    methods: {
-      changeHandler(label) {
-        console.log('changed to:', label)
-      },
-      stickyChangeHandler(current) {
-        console.log('sticky-change', current)
+      let msg = await getShopInfo(this.shopId);
+      if (msg.code == 0) {
+        this.shopInfo = msg.data;
       }
-    }
+    },
+    changeHandler(label) {
+      console.log("changed to:", label);
+    },
+    stickyChangeHandler(current) {
+      console.log("sticky-change", current);
+    },
+    //显示下落圆球
+    showMoveDotFun(showMoveDot, elLeft, elBottom) {
+      this.showMoveDot = [...this.showMoveDot, ...showMoveDot];
+      this.elLeft = elLeft;
+      this.elBottom = elBottom;
+    },
+    listenInCart() {},
+    showChooseList() {},
+    showReduceTip() {},
+    showMoveDotFun() {}
   }
+};
 </script>
 
-<style lang="stylus" rel="stylesheet/stylus">
-  .scroll-nav-side
-    background-color: #fff
-    .view-wrapper
-      position: fixed
-      top: 0
-      left: 0
-      bottom: 0
-      width: 100%
-    .prepend-header
-      width: 90%
-      margin: 20px auto
-      text-align: center
-      font-size: 20px
-      line-height: 1.6
-      border-radius: 2px
-      box-shadow: 0 0 4px rgba(0, 0, 0, .2)
-    .cube-scroll-nav-main
-      background-color: #efeff4
-    .cube-sticky-fixed
-      background-color: #efeff4
-    .cube-scroll-nav-bar
-      width: 120px
-      background-color: transparent
-    .cube-scroll-nav-bar-item
-      padding: 15px
-    .cube-scroll-nav-bar-item_active
-      background-color: #fff
-    .cube-scroll-nav-panels
-      background-color: #fff
-    .cube-scroll-nav-panel
-      img
-        width: 114px
-        height: 114px
-      ul
-        overflow: hidden
-        font-size: 14px
-        line-height: 1.4
-        color: #666
-      li
-        float: left
-        width: 50%
-        div
-          width: 114px
-          margin: auto
-          p
-            overflow: hidden
-            white-space: nowrap
-            text-overflow: ellipsis
-    .cube-scroll-nav-panel-title
-      padding: 15px
-      font-size: 16px
-      background-color: #fff
+<style lang="stylus">
+@import '~common/stylus/variable.styl';
+@import '~common/stylus/mixin.styl';
+
+.view-wrapper {
+  background: url('https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3340225592,2502432116&fm=26&gp=0.jpg') no-repeat; // ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3340225592,2502432116&fm=26&gp=0.jpg) no-repeat;
+  background-size: cover;
+}
+
+.container.scroll-nav-side {
+  .cube-scroll-nav-bar {
+    width: 80px;
+    background-color: transparent;
+
+    .cube-scroll-wrapper {
+      width: 100%;
+    }
+
+    span {
+      font-size: $fontsize-small;
+    }
+  }
+
+  .cube-scroll-nav-panel-title {
+    scw($fontsize-small, #6e6e6e, 600);
+  }
+}
+.van-tabs__content{
+  height:600px;}
+.scroll-nav-side {
+  background-color: #fff;
+
+  .view-wrapper {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+  }
+
+  .page-header {
+    text-align: center;
+    font-size: 20px;
+
+    .prepend-content {
+      background-color: #fff;
+      padding: 20px 0 10px;
+
+      p {
+        padding: 10px;
+      }
+    }
+  }
+}
 </style>