ajax

src/App.vue

@@ -6,5 +6,4 @@
   </div>
 </template>
 
-<style>
-</style>
+<style></style>

src/commom/gallery/Gallery.vue

@@ -19,7 +19,7 @@ export default {
       type: Array,
       default: function() {
         return [];
-    }
+      }
     }
   },
   data: function() {

src/pages/detail/Detail.vue

@@ -1,6 +1,10 @@
 <template>
   <div>
-    <detail-banner></detail-banner>
+    <detail-banner
+      :sightName="sightName"
+      :bannerImg="bannerImg"
+      :gallaryImgs="gallaryImgs"
+    ></detail-banner>
     <detail-header></detail-header>
     <div class="content"><detail-list :list="list"></detail-list></div>
   </div>
@@ -10,6 +14,7 @@
 import DetailBanner from "./components/banner";
 import DetailHeader from "./components/header";
 import DetailList from "./components/list";
+import axios from "axios";
 
 export default {
   name: "Detail",
@@ -18,36 +23,37 @@ export default {
     DetailHeader: DetailHeader,
     DetailList: DetailList
   },
+  methods: {
+    getDetailInfo: function() {
+      axios
+        .get("/api/detail.json", {
+          params: {
+            id: this.$route.params.id
+          }
+        })
+        .then(this.getDetailDataSucc);
+    },
+    getDetailDataSucc: function(res) {
+      res = res.data;
+      if (res.ret && res.data) {
+        const data = res.data;
+        this.sightName = data.sightName;
+        this.bannerImg = data.bannerImg;
+        this.gallaryImgs = data.gallaryImgs;
+        this.list = data.categoryList;
+      }
+    }
+  },
   data: function() {
     return {
-      list: [
-        {
-          title: "成人票",
-          children: [
-            {
-              title: "成人三馆联票",
-              children: [
-                {
-                  title: "成人三馆联票 - 某一连锁店销售"
-                }
-              ]
-            },
-            {
-              title: "成人五馆联票"
-            }
-          ]
-        },
-        {
-          title: "学生票"
-        },
-        {
-          title: "儿童票"
-        },
-        {
-          title: "特惠票"
-        }
-      ]
-    };
+      sightName: "",
+      bannerImg: "",
+      gallaryImgs: [],
+      list: []
+    }
+  },
+  activated: function() {
+    this.getDetailInfo();
   }
 };
 </script>

src/pages/detail/components/banner.vue

@@ -1,20 +1,17 @@
 <template>
   <div>
     <div class="banner" @click="handleBannerClick">
-      <img
-        class="banner-img"
-        src="https://img1.qunarzz.com/sight/p0/1602/a2/a2db6aea3707663a90.img.jpg_600x330_95322c03.jpg"
-      />
+      <img class="banner-img" :src="bannerImg" />
       <div class="banner-info">
-        <div class="banner-title">梦幻百花洲</div>
+        <div class="banner-title">{{ this.sightName }}</div>
         <div class="banner-number">
           <span class="iconfont back-icon banner-icon">&#xe638;</span>
-          39
+          {{ this.gallaryImgs.length }}
         </div>
       </div>
     </div>
     <commit-gallery
-      :imgs="imgs"
+      :imgs="gallaryImgs"
       v-show="showGallery"
       @close="handleGalleryClose"
     ></commit-gallery>
@@ -26,13 +23,14 @@ import CommitGallery from "commom/gallery/Gallery";
 
 export default {
   name: "DetailBanner",
+  props: {
+    sightName: String,
+    bannerImg: String,
+    gallaryImgs: Array
+  },
   data: function() {
     return {
-      showGallery: false,
-      imgs: [
-        "http://img1.qunarzz.com/sight/p0/1602/a2/a2db6aea3707663a90.img.jpg_r_800x800_f06fc71d.jpg",
-        "http://img1.qunarzz.com/sight/p0/1602/ec/ecf4f576181c285790.img.jpg_r_800x800_c2833cda.jpg"
-      ]
+      showGallery: false
     }
   },
   components: {

src/router/index.js

@@ -1,29 +1,30 @@
 import Vue from "vue";
-import VueRouter from "vue-router";
+import Router from "vue-router";
 import Home from "@/pages/home/home";
 import City from "@/pages/city/City";
 import Detail from "@/pages/detail/Detail";
 
-Vue.use(VueRouter);
+Vue.use(Router);
 
-const routes = [
-  {
-    path: "/",
-    name: "Home",
-    component: Home
-  },{
-    path: "/city",
-    name: "City",
-    component: City
-  },{
-    path: "/detail/:id",
-    name: "Detail",
-    component: Detail
+export default new Router({
+  routes: [
+    {
+      path: "/",
+      name: "Home",
+      component: Home
+    },
+    {
+      path: "/city",
+      name: "City",
+      component: City
+    },
+    {
+      path: "/detail/:id",
+      name: "Detail",
+      component: Detail
+    }
+  ],
+  scrollBehavior(to, from, savedPosition) {
+    return { x: 0, y: 0 };
   }
-];
-
-const router = new VueRouter({
-  routes
 });
-
-export default router;