city-ajax Final

src/pages/city/City.vue

@@ -2,8 +2,8 @@
   <div>
     <city-header></city-header>
     <city-search></city-search>
-    <city-list></city-list>
-    <city-alphabet></city-alphabet>
+    <city-list :cities="cities" :hot="hotCities"></city-list>
+    <city-alphabet :cities="cities"></city-alphabet>
   </div>
 </template>
 
@@ -12,6 +12,8 @@ import CityHeader from "./components/header";
 import CitySearch from "./components/search";
 import CityList from "./components/list";
 import CityAlphabet from "./components/Alphabet";
+import axios from "axios";
+
 export default {
   name: "City",
   components: {
@@ -19,10 +21,30 @@ export default {
     CitySearch: CitySearch,
     CityList: CityList,
     CityAlphabet: CityAlphabet
+  },
+  data: function() {
+    return {
+      cities: {},
+      hotCities: []
+    };
+  },
+  methods: {
+    getCityInfo: function() {
+      axios.get("/api/city.json").then(this.getCityInfoSucc);
+    },
+    getCityInfoSucc: function(res) {
+      res = res.data;
+      if (res.ret && res.data) {
+        const data = res.data;
+        this.cities = data.cities;
+        this.hotCities = data.hotCities;
+      }
+    }
+  },
+  mounted: function() {
+    this.getCityInfo();
   }
-}
+};
 </script>
 
-<style lang="stylus" scoped>
-
-</style>
+<style lang="stylus" scoped></style>

src/pages/city/components/Alphabet.vue

@@ -1,19 +1,14 @@
 <template>
   <ul class="list">
-    <li class="item">A</li>
-    <li class="item">A</li>
-    <li class="item">A</li>
-    <li class="item">A</li>
-    <li class="item">A</li>
-    <li class="item">A</li>
-    <li class="item">A</li>
-    <li class="item">A</li>
-    <li class="item">A</li>
+    <li class="item" v-for="(item, key) of cities" :key="key">{{ key }}</li>
   </ul>
 </template>
 
 <script>
 export default {
+  props: {
+    cities: Object
+  },
   name: "CityAlphabet"
 }
 </script>

src/pages/city/components/list.vue

@@ -7,23 +7,26 @@
           <div class="button-wrapper">
             <div class="button">北京</div>
           </div>
-          <div class="button-wrapper">
-            <div class="button">北京</div>
-          </div>
         </div>
       </div>
       <div class="area">
-        <div class="title border-topbottom">当前城市</div>
+        <div class="title border-topbottom">热门城市</div>
         <div class="button-list">
-          <div class="button-wrapper">
-            <div class="button">北京</div>
+          <div class="button-wrapper" v-for="item of hot" :key="item.id">
+            <div class="button">{{ item.name }}</div>
           </div>
         </div>
       </div>
-      <div class="area">
-        <div class="title border-topbottom">A</div>
+      <div class="area" v-for="(item, key) of cities" :key="key">
+        <div class="title border-topbottom">{{ key }}</div>
         <div class="item-list">
-          <div class="item border-topbottom">阿拉尔</div>
+          <div
+            class="item border-topbottom"
+            v-for="innerItem of item"
+            :key="innerItem.id"
+          >
+            {{ innerItem.name }}
+          </div>
         </div>
       </div>
     </div>
@@ -34,6 +37,10 @@
 import BScroll from "better-scroll";
 export default {
   name: "CityList",
+  props: {
+    hot: Array,
+    cities: Object
+  },
   mounted: function() {
     this.BScroll = new BScroll(this.$refs.wrapper);
   }