开始单个店铺页面功能

src/App.vue

@@ -4,5 +4,25 @@
   </div>
 </template>
 
-<style>
-</style>
+<script>
+export default {
+  name: "App",
+  created() {
+    //在页面加载时读取sessionStorage里的状态信息
+    if (sessionStorage.getItem("store")) {
+      this.$store.replaceState(
+        Object.assign(
+          {},
+          this.$store.state,
+          JSON.parse(sessionStorage.getItem("store"))
+        )
+      );
+    }
+
+    //在页面刷新时将vuex里的信息保存到sessionStorage里
+    window.addEventListener("beforeunload", () => {
+      sessionStorage.setItem("store", JSON.stringify(this.$store.state));
+    });
+  }
+};
+</script>

src/common/serve.js

@@ -19,13 +19,17 @@ export const loginByCode = (phone, code) => request('login/code', {
 
 
 //  新增收货地址
-export const addReceivingAddress = (Data) => request('/user/address', Data, 'POST');
+export const addReceivingAddress = (Data) => request('/user/address', Data);
 
 //  编辑收货地址
-export const editReceivingAddress = (Data) => request('/user/address/update', Data, 'POST');
+export const editReceivingAddress = (Data) => request('/user/address/update', Data);
 
 //  获取收货地址
 export const getReceivingAddress = () => request('/user/address', {}, 'GET');
 
 //  删除收货地址
-export const deleteReceivingAddress = (address_id) => request('/user/address/delete', { address_id }, 'POST');
+export const deleteReceivingAddress = (address_id) => request('/user/address/delete', { address_id });
+
+
+export const getNearbyShop = (lat,lng) => request('/scope/search', { lat,lng }, 'get');
+

src/common/stylus/index.styl

@@ -43,10 +43,16 @@
   bottom: 0;
   left: 16px;
   border-bottom: 1px solid #ebedf0;
-  -webkit-transform: scaleY(0.5);
-  transform: scaleY(0.5);
+  // -webkit-transform: scaleY(0.5);
+  // transform: scaleY(0.5);
+}
+.no-data{
+  text-align: center;
 }
 
+.scroll-list-wrap{
+  position();
+}
 
 .section{
   margin-top:10px;
@@ -67,7 +73,19 @@
 }
 .cube-slide-dots{
   bottom:4px;
-  }
+}
 .cube-slide-dots  span{
   height:2px;
-    }
+}
\ No newline at end of file
+
+
+// vant
+.van-search{
+  padding: 6px;
+}
+.van-search .van-icon{
+  font-size: 16px;
+}
+.van-tag{
+  line-height: 1;
+}
\ No newline at end of file

src/common/stylus/mixin.styl

 @import "~cube-ui/src/common/stylus/mixin.styl"
+
+position($pos=fixed){
+  position: $pos;
+  top:0;
+  bottom:0;
+  left:0;
+  right:0;
+}
\ No newline at end of file

src/common/stylus/variable.styl

@@ -6,8 +6,10 @@ $color-background = rgba(7, 17, 27, 1)
 $color-green = #07c160
 $color-dark-green = #06ae57
 $color-light-blue = #3ca0e6
+$color-blue = #1296fa
 
 
+$margin-top-10 = 10px
 $margin-top-20 = 20px
 
 

src/common/utils/components.js

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

src/components/address-list.vue

+<template>
+  <div>
+    <div v-for="address in options" :key="address.id">
+      <div class="van-cell van-address-item line" @click="onSelect(address)">
+        <div class="van-cell__value van-cell__value--alone van-address-item__value">
+          <div class="van-address-item__name">
+            {{address.address_detail}}
+            <van-tag v-if="address.label==1" color="#ffe1e1" text-color="#f44">家</van-tag>
+            <van-tag v-else-if="address.label==2" color="#3ca0e629" text-color="#3ca0e6">公司</van-tag>
+          </div>
+          <div class>{{address.address_suffix}}</div>
+          <div class="text-light-grey">{{address.name}}&nbsp;&nbsp;{{address.tel}}</div>
+        </div>
+        <div v-if="edit" class="van-address-item__edit" @click="onEdit(address)">
+          <i class="van-icon van-icon-edit"></i>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    options: {
+      type: Array
+    },
+    edit: {
+      default: false
+    }
+  },
+  methods: {
+    onEdit(address) {
+      this.$emit("edit", address);
+    },
+    onSelect(address) {
+      this.$emit("select", address);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.van-address-item__name {
+  font-weight: 600;
+  font-size: 15px;
+}
+.van-address-item__edit {
+  width: 20%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+</style>
\ No newline at end of file

src/components/cube-page.vue

@@ -72,7 +72,7 @@
         left: 0
         padding: 0 15px
         color: #fc9153
-    >.wrapper
+    .header~.wrapper
       height: calc(100% - 44px)
       overflow-x: hidden
       overflow-y: auto

src/components/shop-list.vue

 <template>
   <div class>
-    <li class="card" v-for="(item,index) in options" :key="item.id">
-      <div @click="onItemClick(item, index)" class="card-inner">
+    <li class="card" v-for="(item,index) in options" :key="index">
+      <div @click="onSelect(item)" class="card-inner">
         <div class="card-thumb">
           <van-image width="90" height="90" fit="contain" :src="$globalUrlFile+item.icon"></van-image>
         </div>
@@ -34,7 +34,11 @@ export default {
 
   computed: {},
 
-  methods: {}
+  methods: {
+    onSelect(item){
+      this.$router.push({name:'shop',params:{id:item.shop_id}})
+    }
+  }
 };
 </script>
 

src/router.js

@@ -7,8 +7,13 @@ const mineIndex = r => require.ensure([], () => r(require('./views/mine/index.vu
 const sellAddress = r => require.ensure([], () => r(require('./views/address/select-address.vue')))
 const addAddress = r => require.ensure([], () => r(require('./views/address/add-address.vue')))
 const address = r => require.ensure([], () => r(require('./views/address/address.vue')))
+const editAddress = r => require.ensure([], () => r(require('./views/address/edit-address.vue')))
 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')))
+ */
 
 Vue.use(Router);
 
@@ -53,18 +58,23 @@ export default new Router({
       component: address,
       meta: { title: '收货地址', keepAlive: false }
     },
-    /*{
+    {
       path: '/address/edit/:id',
       name: 'editAddress',
       component: editAddress,
       meta: { title: '修改地址', keepAlive: false }
-    }, */
+    },
     {
       path: '/location/choise',
       name: 'choiseLocation',
       component: choiseLocation,
       meta: { title: '收货地址', keepAlive: false }
     },
-    
+    {
+      path: '/shop/:id',
+      name: 'shop',
+      component: shop,
+      meta: { title: '', keepAlive: false }
+    },
   ]
 });

src/store/index.js

@@ -6,9 +6,9 @@ import actions from './actions'
 Vue.use(Vuex)
 
 const state = {
-	location:{lat:'',lng:'',formattedAddress:''}
-    // location:'定位中'
-	
+	location:{lat:'',lng:'',formattedAddress:''},
+	choise_position:{},
+	edit_address:{} // 待编辑的地址信息
 }
 export default new Vuex.Store({
 	state,

src/store/mutations.js

@@ -9,4 +9,15 @@ export default {
         state.location = info;
         console.log( info)
     },
+    // 地图定位：确认收货地址
+    CHOISE_POSITION(state, info){
+        state.choise_position = info
+    },
+    // 清空 地图选点信息
+    CLEAR_POSITION(state){
+        state.choise_position = {}
+    },
+    RECORD_ADDRESSINFO(state, info){
+        state.edit_address = info
+    }
 }
\ No newline at end of file

src/vant.js

@@ -6,19 +6,20 @@ import {
     Image,
     Grid,
     GridItem,
-    AddressList,
+    // AddressList,
     Row, Col,
     Cell, CellGroup ,
     Field,
-    Button 
+    Button,
+    Tag 
 } from 'vant'
 Vue.use(Search)
 Vue.use(Image)
 Vue.use(Grid)
 Vue.use(GridItem)
-Vue.use(AddressList);
+// Vue.use(AddressList);
 Vue.use(Row).use(Col);
 Vue.use(Cell).use(CellGroup);
 Vue.use(Field)
-
+Vue.use(Tag)
 Vue.use(Button)

src/views/address/add-address.vue

@@ -19,7 +19,9 @@
       />
       <van-field v-model="detailedAddress" clearable label="门牌号" placeholder="例：5号楼230室" />
       <van-row class="van-cell">
-        <van-col span="7" class="van-cell__title van-field__label"><span>标签</span></van-col>
+        <van-col span="7" class="van-cell__title van-field__label">
+          <span>标签</span>
+        </van-col>
         <van-col span="18">
           <cube-checker
             v-model="checkerType"
@@ -39,6 +41,7 @@
 <script>
 import { addReceivingAddress } from "../../common/serve";
 import utils from "../../common/utils/mUtils";
+import { mapState } from "vuex";
 export default {
   data() {
     return {
@@ -71,39 +74,73 @@ export default {
       receiverName: "", //收货人姓名
       receiverTel: "", //收货人手机号
       detailedAddress: "", //详细地址
-      receiverArea: "", //收货地址
       show: false //默认不显示地区选择
     };
   },
-  computed: {},
+  computed: {
+    ...mapState(["choise_position"]),
+    receiverArea() {
+      //收货地址
+      return this.choise_position.name;
+    }
+  },
   methods: {
     //添加收货地址
     async onSave() {
+      const position = this.choise_position;
       let Data = {
-        name: "地址名",
-        address: "地址信息",
-        lat: "121.513211",
-        lng: "31.300676",
+        // 地图选点记录的定位信息
+        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,
+        // input信息
         phone: this.receiverTel,
         user_name: this.receiverName,
-        address_detail: this.detailedAddress,
-        address_suffix: "231",
+        address_detail: position.name,
+        gender: this.checkerSex ? this.checkerSex : 0,
+        label: this.checkerType ? this.checkerType : 0,
 
-        area: {},
+        address_suffix: position.address +','+this.detailedAddress,
         is_default: 1
       };
+      if (this.receiverName == "") {
+        this.toast("请填写姓名");
+        return;
+      } else if (this.receiverTel == "") {
+        this.toast("请填写手机号");
+        return;
+      } else if (this.receiverArea == "") {
+        this.toast("请填写地址");
+        return;
+      } else if (this.detailedAddress == "") {
+        this.toast("请填写门牌号");
+        return;
+      }
+    
       let res = await addReceivingAddress(Data);
       if (res.code === 0) {
-        this.$toast.success("添加地址成功");
-        if (this.orderAddress) {
-          this.$router.push({ name: "confirmOrder" });
-        } else {
+        this.toast("添加地址成功");
+        this.$store.commit("CLEAR_POSITION")
         this.$router.push({ name: "address" });
-        }
+      } else {
+        this.$createToast({
+          txt: res.message,
+          type: "error"
+        }).show();
       }
     },
     onChoiseLocation(route) {
-        utils.onRouterLink(this,route);
+      utils.onRouterLink(this, route);
+    },
+    toast(content) {
+      this.$createToast({
+        txt: content,
+        type: "txt"
+      }).show();
     }
   }
 };
@@ -117,7 +154,7 @@ export default {
   padding: 10px 0;
 }
 
-.van-cell__title span{
+.van-cell__title span {
   font-weight: 600;
 }
 

src/views/address/address.vue

 <template>
   <div>
-        123
+    <div class="scroll-list-wrap">
+      <cube-scroll ref="scroll">
+        <div class="van-address-list">
+          <van-row>
+            <van-col span="24">
+              <cube-address-list :options="list" :edit="true" @edit="onEdit"></cube-address-list>
+            </van-col>
+          </van-row>
+        </div>
+      </cube-scroll>
+      <van-button type="danger" size="large" @click="onAdd" class="van-address-list__add">新增地址</van-button>
+    </div>
+
+    <!-- <van-address-list
+      v-model="chosenAddressId"
+      :list="list"
+      :switchable="false"
+      @add="onAdd"
+      @edit="onEdit"
+    />-->
   </div>
 </template>
+
+<script>
+import { getReceivingAddress } from "../../common/serve";
+import { mapMutations, mapState } from "vuex";
+
+export default {
+  data() {
+    return {
+      chosenAddressId: "-1", // 字符串类型!!!
+      list: []
+    };
+  },
+  computed: {
+    ...mapState(["orderAddress"]),
+    // 当由确认页面进入时，点击地址回到上一页
+    isGoBack() {
+      return this.orderAddress;
+    }
+  },
+  created() {
+    this.getReceivingAddress();
+  },
+  methods: {
+    async getReceivingAddress() {
+      let res = await getReceivingAddress();
+      let _data = res.data;
+      _data.forEach(el => {
+        let _obj = {
+          id: el.id.toString(),
+          name: el.name,
+          tel: el.phone,
+          label: el.label, // 地址类型：例：家
+          gender: el.gender, //性别
+          address_detail: el.address_detail,//地址
+          address_suffix: el.address_suffix,//门牌号
+          is_default: el.is_default,
+          location_id:el.location_id,
+          position: '121.69821,31.186741'
+        };
+        this.list.push(_obj);
+      });
+    },
+
+    onAdd() {
+      this.$router.replace({ name: "addAddress" });
+    },
+
+    onEdit(item, index) {
+      this.$store.commit("RECORD_ADDRESSINFO", item);
+      this.$router.replace({
+        name: "editAddress",
+        params: { id: item.location_id },
+        query: { position: item.position }
+      });
+    }
+  }
+};
+</script>
+
+<style lang="stylus" scoped>
+.van-address-list {
+  box-sizing: border-box;
+  height: 100%;
+  padding-bottom: 100px;
+}
+
+.van-address-list__add {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  z-index: 9999;
+}
+</style>
\ No newline at end of file

src/views/address/edit-address.vue

+<template>
+  <div class="add-address">
+    <van-cell-group>
+      <van-field v-model="nameValue" label="联系人" placeholder="姓名" clearable />
+      <van-row class="sex">
+        <van-col span="10" offset="7">
+          <cube-checker v-model="checkerSex" :options="sexOptions" type="radio" class="text-base" />
+        </van-col>
+      </van-row>
+      <van-field v-model="telValue" label="电话" type="tel" placeholder="手机号" clearable />
+      <van-field
+        ref="area"
+        class="area"
+        v-model="locationValue"
+        label="地址"
+        placeholder="选择收货地址"
+        @click="onChoiseLocation('choiseLocation')"
+        @focus="$refs.area.blur()"
+      />
+      <van-field v-model="detailValue" clearable label="门牌号" placeholder="例：5号楼230室" />
+      <van-row class="van-cell">
+        <van-col span="6" class="van-cell__title van-field__label">
+          <span>标签</span>
+        </van-col>
+        <van-col span="18">
+          <cube-checker
+            v-model="checkerLabel"
+            :options="typeOptions"
+            type="radio"
+            class="text-base"
+          />
+        </van-col>
+      </van-row>
+    </van-cell-group>
+    <div class="van-address-edit__buttons">
+      <van-button class="save" type="danger" size="large" @click="onSave">确定</van-button>
+    </div>
+    {{edit_address}}
+  </div>
+</template>
+
+<script>
+import { editReceivingAddress } from "../../common/serve";
+import utils from "../../common/utils/mUtils";
+import { mapState } from "vuex";
+export default {
+  data() {
+    return {
+      sexOptions: [
+        {
+          value: 1,
+          text: "先生"
+        },
+        {
+          value: 2,
+          text: "女士"
+        }
+      ],
+      typeOptions: [
+        {
+          value: 1,
+          text: "家"
+        },
+        {
+          value: 2,
+          text: "公司"
+        },
+        {
+          value: 3,
+          text: "学校"
+        }
+      ],
+      nameValue: "",
+      telValue: "",
+      locationValue: "", // 地址
+      detailValue: "", // 门牌号
+      checkerSex: "", // 性别
+      checkerLabel: "" // 标签
+    };
+  },
+  computed: {
+    ...mapState(["choise_position", "edit_address"])
+  },
+  created() {
+    const choiseP = this.choise_position;
+    this.nameValue = this.edit_address.name;
+    this.telValue = this.edit_address.tel;
+    this.locationValue = choiseP.name
+      ? choiseP.name
+      : this.edit_address.address_detail;
+    this.detailValue = this.edit_address.address_suffix;
+    this.checkerSex = this.edit_address.gender ? this.edit_address.gender : [];
+    this.checkerLabel = this.edit_address.label ? this.edit_address.label : [];
+  },
+  /*  watch: {
+      choise_position: {
+        handler(newVal, oldVal) {
+          this.locationValue = newVal.name;
+        },
+        immediate: true,
+        deep: true
+      }
+    }, */
+  methods: {
+    async onSave() {
+      let Data = {
+        // input信息
+        phone: this.telValue,
+        user_name: this.nameValue,
+        address_detail: this.locationValue,
+        gender: this.checkerSex ? this.checkerSex : 0,
+        label: this.checkerLabel ? this.checkerLabel : 0,
+
+        address_suffix: this.detailValue,
+        is_default: 1,
+        address_id: 1 // 没有省市区id，默认为1
+      };
+      if (this.receiverName == "") {
+        this.toast("请填写姓名");
+        return;
+      } else if (this.receiverTel == "") {
+        this.toast("请填写手机号");
+        return;
+      } else if (this.receiverArea == "") {
+        this.toast("请填写地址");
+        return;
+      } else if (this.detailedAddress == "") {
+        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(Data);
+      let res = await editReceivingAddress(Data);
+      if (res.code === 0) {
+        this.toast("修改地址成功");
+        this.$store.commit("CLEAR_POSITION");
+        this.$router.push({ name: "address" });
+      } else {
+        this.$createToast({
+          txt: res.message,
+          type: "error"
+        }).show();
+      }
+    },
+    onChoiseLocation(route) {
+      this.$router.push({ name: route, query: { position: this.$route.query.position } });
+    },
+    toast(content) {
+      this.$createToast({
+        txt: content,
+        type: "txt"
+      }).show();
+    }
+  }
+};
+</script>
+
+<style  lang="stylus" rel="stylesheet/stylus">
+@import '~common/stylus/mixin.styl';
+@import '~common/stylus/variable.styl';
+
+.sex {
+  padding: 10px 0;
+}
+
+.van-cell__title span {
+  font-weight: 600;
+}
+
+.cube-checker-item {
+  border-1px();
+  line-height: 14px;
+
+  &_active {
+    border-1px($color-light-blue);
+    color: $color-light-blue;
+    background: #f5fbff;
+  }
+}
+
+.van-address-edit__buttons {
+  padding: 32px 16px;
+}
+</style>
\ No newline at end of file

src/views/address/select-address.vue

 <template>
   <cube-page type="recycle-list" title="RecycleList">
-    <div slot="content" class="scroll-list-wrap">
+    <div slot="content">
       <van-search placeholder="请输入搜索关键词" shape="round"></van-search>
 
       <div class="scroll-list-wrap">
         <cube-scroll ref="scroll">
+          <div>
+            <!-- 当前定位 -->
             <section class="section">
               <div class="cube-index-list-anchor">当前定位</div>
               <van-cell :title="curLocation" icon="shop-o">
@@ -18,23 +20,25 @@
                 <span slot="title" class="text-extra-small text-light-grey">收货地址</span>
                 <span slot="right-icon" class="text-primary" @click="onLink('address')">管理地址</span>
               </van-cell>
-            <van-row v-for="address in addressList" :key="address.id">
+              <!-- 地址列表 -->
+              <van-row>
                 <van-col span="22" offset="2">
-                <div class="van-cell van-address-item line">
-                  <div class="van-cell__value van-cell__value--alone van-address-item__value">
-                    <div class="van-address-item__name">{{address.area}}</div>
-                    <div class>{{address.address_detail}}</div>
-                    <div class="text-light-grey">{{address.name}}&nbsp;&nbsp;{{address.tel}}</div>
-                  </div>
-                </div>
+                  <cube-address-list :options="addressList" @select="setDefaultAddress"></cube-address-list>
                 </van-col>
               </van-row>
+
               <van-row>
                 <van-col span="22" offset="2">
-                <van-cell title="新增地址" is-link class="text-primary" @click="onLink('addAddress')" />
+                  <van-cell
+                    title="新增地址"
+                    is-link
+                    class="text-primary"
+                    @click="onLink('addAddress')"
+                  />
                 </van-col>
               </van-row>
             </section>
+          </div>
         </cube-scroll>
       </div>
     </div>
@@ -42,7 +46,7 @@
 </template>
 
 <script>
-import { getReceivingAddress } from "../../common/serve";
+import { getReceivingAddress, editReceivingAddress } from "../../common/serve";
 import { mapState } from "vuex";
 import utils from "../../common/utils/mUtils";
 let map = {};
@@ -80,17 +84,30 @@ export default {
           id: el.id.toString(),
           name: el.name,
           tel: el.phone,
-          address: el.area.full_name + "," + el.address_detail,
-
-          area_id: el.area_id,
-          area: el.area.full_name,
+          label: el.label, // 地址类型：例：家
+          gender: el.gender, //性别
           address_detail: el.address_detail,
-          user_name: el.name,
+          address_suffix: el.address_suffix,
           is_default: el.is_default
         };
         this.addressList.push(_obj);
       });
     },
+    // 选择收货地址
+    async setDefaultAddress(item) {
+      this.$router.push({ name: "home" });
+      return;
+      Object.assign(item, { is_default: 1 });
+      let res = await editReceivingAddress(item);
+      if (res.code == 0) {
+        this.$router.push({ name: "home" });
+      } else {
+        this.$createToast({
+          txt: res.message,
+          type: "error"
+        }).show();
+      }
+    },
     onSelect() {},
     onRefreshLocation() {
       // 重新定位后，调用定位api
@@ -98,13 +115,16 @@ export default {
       this.$store.dispatch("GET_LOCATION", map);
     },
     onLink(route) {
-      utils.onRouterLink({ name: route });
+      utils.onRouterLink(this, route);
     }
   }
 };
 </script>
 
 <style scoped>
+.scroll-list-wrap {
+  top: 30px;
+}
 .cube-page > .wrapper .content {
   margin: 0;
 }
@@ -112,7 +132,4 @@ export default {
 .cube-index-list-anchor {
   background-color: transparent;
 }
-.van-address-item__name {
-  font-weight: 600;
-}
 </style>

src/views/home/index.vue

@@ -17,7 +17,9 @@
           <!-- 收货地址定位 -->
           <div class="location" @click="onRouterLink('sellAddress')">
             <i class="cubeic-location text-primary text-extra-large"></i>
-            <span class="text-medium">{{location.formattedAddress?location.formattedAddress:'定位中...'}}</span>
+            <span
+              class="text-medium"
+            >{{currentAddress.address_detail?currentAddress.address_detail:'定位中...'}}</span>
             <div class="location-action">
               <i class="cubeic-select text-extra-small"></i>
             </div>
@@ -74,6 +76,7 @@
 import CubePage from "../../components/cube-page.vue";
 import footGuide from "../../components/footer";
 import shopList from "../../components/shop-list";
+import { getNearbyShop, getReceivingAddress } from "../../common/serve";
 import { mapGeolocation, MAP } from "../../common/utils/mUtils";
 import { mapState } from "vuex";
 var map = {};
@@ -134,10 +137,10 @@ var d = [
 export default {
   data() {
     return {
-      loading: false,
+      loading: true,
+      currentAddress: {}, // 当前收货地址
 
       gridsData: d,
-
       shopsData: [b, b, b],
       scrollEvents: ["scroll"],
       scrollY: 0,
@@ -162,26 +165,65 @@ export default {
     };
   },
   created() {
-    setTimeout(() => {
+    /*  setTimeout(() => {
       map = new AMap.Map("amap", {
         resizeEnable: true,
         zoom: 16
       });
       this.$store.dispatch("GET_LOCATION", map);
-    }, 20);
-    if (this.location.lat) {
-      this.loading = false;
-    }
+    }, 20); */
+    // if (this.location.lat) {
+    //   this.loading = false;
+    // }
   },
-  computed: {
-    ...mapState(["location"])
+  mounted() {
+    this.initData();
   },
+  /* computed: {
+    ...mapState(["location"])
+  }, */
   components: {
     footGuide,
     CubePage,
     shopList
   },
   methods: {
+    async initData() {
+      let p2 = getReceivingAddress(); // 获取默认的收货地址
+      Promise.all([p2])
+        .then(result => {
+          let addressData = result[0].data;
+          // this.currentAddress = addressData.find(item => item.is_default==1);
+
+          this.currentAddress = addressData[4];
+          Object.assign(this.currentAddress, {
+            lat: 121.514158,
+            lng: 31.299059
+          });
+        })
+        .catch(error => {
+          console.log(error);
+        });
+      let msg = await getReceivingAddress(); // 获取默认的收货地址
+      if (msg.code == 0) {
+        let addressData = msg.data;
+        // this.currentAddress = addressData.find(item => item.is_default==1);
+        this.currentAddress = addressData[4];
+        Object.assign(this.currentAddress, {
+          lat: 121.514632,
+          lng: 31.298043
+        });
+      }
+      let res = await getNearbyShop(
+        this.currentAddress.lat,
+        this.currentAddress.lng
+      ); // 获取附近的商家
+      if (res.code == 0) {
+      }
+
+      this.loading = false;
+    },
+
     scrollHandler({ y }) {
       this.scrollY = -y;
     },
@@ -190,12 +232,12 @@ export default {
     onSlideEvent(item, index) {
       console.log(item, index);
     },
-    onRouterLink(route,query){
-      if(query){
-        this.$router.push({name:route,query:query})
+    onRouterLink(route, query) {
+      if (query) {
+        this.$router.push({ name: route, query: query });
         return;
       }
-      this.$router.push({name:route})
+      this.$router.push({ name: route });
     },
     // 获取数据
     loadData() {

src/views/location/choise.vue

 <template>
   <div>
+    <!-- 搜索框 -->
+    <van-search placeholder="小区/写字楼/学校等" shape="round"></van-search>
+
+    <!-- map -->
     <div class="amap-page-container">
       <el-amap
         vid="amap"
@@ -12,6 +16,8 @@
         class="amap-demo"
       ></el-amap>
     </div>
+
+    <!-- 搜索地址列表 -->
     <div class="location-box">
       <cube-scroll ref="scroll">
         <van-cell-group>
@@ -21,10 +27,13 @@
             icon="location-o"
             :title="item.name"
             :label="item.address"
+            :class="{active:index==0}"
             @click="selectAddress(item.id)"
           />
         </van-cell-group>
-        <cube-loading v-if="poisData==null" :size="20">正在定位</cube-loading>
+        <div v-if="poisData==null" class="no-data text-base">
+          <cube-loading :size="24"></cube-loading>正在定位
+        </div>
       </cube-scroll>
     </div>
   </div>
@@ -36,10 +45,12 @@ let amapManager = new VueAMap.AMapManager();
 
 export default {
   computed: {
-    lang() {
-      return this.$store.state.lang;
+    // 是否根据已有经纬度进行定位
+    hasPosition() {
+      return this.$route.query.position ? true : false;
     }
   },
+
   data() {
     let self = this;
     return {
@@ -52,26 +63,19 @@ export default {
         address: null
       },
       poisData: null,
-      lng: 0,
-      lat: 0,
-      lng2: 0,
-      lat2: 0,
-      loaded: false,
       plugin: [
         {
           pName: "Geolocation",
           events: {
             init(o) {
-              // o 是高德地图定位插件实例
+              /* o 是高德地图定位插件实例
+               * 若根据已有经纬度进行定位，则禁止获取用户当前地理位置
+               */
+              if (self.hasPosition) return;
               o.getCurrentPosition((status, result) => {
                 if (result && result.position) {
-                  self.lng = result.position.lng;
-                  self.lat = result.position.lat;
-                  self.center = [self.lng, self.lat];
-                  self.loaded = true;
+                  self.center = [result.position.lng, result.position.lat];
                   self.$nextTick();
-                } else {
-                  self.loaded = true;
                 }
               });
             }
@@ -83,19 +87,31 @@ export default {
           AMapUI.loadUI(["misc/PositionPicker"], function(PositionPicker) {
             var positionPicker = new PositionPicker({
               mode: "dragMap", //设定为拖拽地图模式，可选'dragMap'、'dragMarker'，默认为'dragMap'
-              map: map //依赖地图对象
+              map: map, //依赖地图对象
+              iconStyle: {
+                //自定义外观
+                url: "//webapi.amap.com/ui/1.0/assets/position-picker2.png", //图片地址
+                size: [48, 48], //要显示的点大小，将缩放图片
+                ancher: [24, 40] //锚点的位置，即被size缩放之后，图片的什么位置作为选中的位置
+              }
             });
             positionPicker.on("success", function(positionResult) {
               self.nowLocation = positionResult.regeocode.pois[0];
-              console.log(positionResult);
-              self.lng2 = positionResult.position.lng;
-              self.lat2 = positionResult.position.lat;
-              self.center2 = [self.lng2, self.lat2];
-              if (self.loaded) {
+              self.center2 = [
+                positionResult.position.lng,
+                positionResult.position.lat
+              ];
               self.poisData = positionResult.regeocode.pois;
-              }
+              console.log(positionResult);
             });
+            
+            if (self.hasPosition) {
+              let position = self.$route.query.position.split(",");
+              positionPicker.start(position);
+            } else {
               positionPicker.start();
+            }
+
             //TODO:事件绑定、结果处理等
           });
           AMapUI.loadUI(["control/BasicControl"], function(BasicControl) {
@@ -114,34 +130,21 @@ export default {
   methods: {
     selectAddress(id) {
       let pItem = null;
-      for (let i = 0; this.poisData.length; i++) {
-        if (this.poisData[i].id == id) {
-          pItem = this.poisData[i];
-          break;
-        }
-      }
       const curChoise = this.poisData.find(item => item.id == id);
-console.log(curChoise)
-    },
-    goBack() {
-      /* if(this.locationRequest){
-          this.$router.push({name: this.locationRequest,params:{action:true}});
-        }else{
-          this.$router.push({name: 'dish',params:{action:true}});
-        } */
-    },
-    projectCallBackData() {},
-    add() {
-      this.$router.push({ name: "addressAdd", params: { action: true } });
+      this.$store.commit("CHOISE_POSITION", curChoise);
+      this.$router.go(-1);
     }
   }
 };
 </script>
 
-<style scoped>
+<style lang="stylus" scoped>
+@import '~common/stylus/variable.styl';
+
 .amap-demo {
-  height: 200px;
+  height: 210px;
 }
+
 .location-box {
   position: absolute;
   top: 250px;
@@ -149,8 +152,13 @@ console.log(curChoise)
   left: 0;
   right: 0;
   margin: auto;
-}
-.van-cell__title span {
+
+  .active {
+    color: $color-blue;
+  }
+
+  .van-cell__title span {
     font-size: 14px;
+  }
 }
 </style>
\ No newline at end of file

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>
+    </div>
+  </cube-page>
+</template>
+
+<script type="text/ecmascript-6">
+  import CubePage from '../../components/cube-page.vue'
+  import goodsData from '../../data'
+
+  const goods = goodsData.goods
+
+  export default {
+    components: {
+      CubePage
+    },
+    data() {
+      return {
+        data: goods,
+        current: goods[3].name
+      }
+    },
+    methods: {
+      changeHandler(label) {
+        console.log('changed to:', label)
+      },
+      stickyChangeHandler(current) {
+        console.log('sticky-change', current)
+      }
+    }
+  }
+</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>