fetch data ajax

@@ -19,18 +19,9 @@ import Tabs from './components/tabs';
 import Layout from './components/layout';
 import Layout from './components/layout';
 import YohoPage from './yoho';
 import YohoPage from './yoho';
 import UfoPage from './ufo';
 import UfoPage from './ufo';
-const TYPE = {notuse: 'notuse', use: 'use', overtime: 'overtime'};
 
 
 export default {
 export default {
   name: 'ListPage',
   name: 'ListPage',
-  asyncData({store}) {
-    return Promise.all([
-      store.dispatch('coupon/yoho/fetchYohoList', {
-        type: TYPE.notuse,
-        refresh: true
-      })
-    ]);
-  },
   components: {
   components: {
     Tabs,
     Tabs,
     TabPane: Tabs.Pane,
     TabPane: Tabs.Pane,

@@ -14,10 +14,13 @@
     >
     >
       <SlideItem class="slide-item">
       <SlideItem class="slide-item">
         <ExchangeBox class="" v-model="inputCouponCode" @click="onSubmitCode"></ExchangeBox>
         <ExchangeBox class="" v-model="inputCouponCode" @click="onSubmitCode"></ExchangeBox>
-        <ScrollView class="scroll-view" ref="notuse" :data="getNotUseList" :options="scrollOptions" v-if="getNotUseList.length" :reach-bottom="reachBottom">
-          <CouponItem :item="item" v-for="(item, index) in getNotUseList" :key="index + '' + item.coupon_id"></CouponItem>
-        </ScrollView>
-        <Empty v-else></Empty>
+        <Loading class="loading" v-if="showLoading"></Loading>
+        <template v-else>
+          <ScrollView class="scroll-view" ref="notuse" :data="getNotUseList" :options="scrollOptions" v-if="getNotUseList.length" :reach-bottom="reachBottom">
+            <CouponItem :item="item" v-for="(item, index) in getNotUseList" :key="index + '' + item.coupon_id"></CouponItem>
+          </ScrollView>
+          <Empty v-else></Empty>
+        </template>
       </SlideItem>
       </SlideItem>
 
 
       <SlideItem class="slide-item">
       <SlideItem class="slide-item">
@@ -49,7 +52,7 @@ import CouponItem from '../components/coupon-item';
 import Empty from '../components/empty';
 import Empty from '../components/empty';
 import ScrollView from '../components/scroll-view';
 import ScrollView from '../components/scroll-view';
 
 
-import {Slide} from 'cube-ui';
+import {Slide, Loading} from 'cube-ui';
 
 
 const TYPE = {notuse: 'notuse', use: 'use', overtime: 'overtime'};
 const TYPE = {notuse: 'notuse', use: 'use', overtime: 'overtime'};
 
 
@@ -62,6 +65,7 @@ export default {
       selectType: TYPE.notuse,
       selectType: TYPE.notuse,
       selectFilterId: 0,
       selectFilterId: 0,
       inputCouponCode: '',
       inputCouponCode: '',
+      showLoading: true,
       tabLabels: [
       tabLabels: [
         {
         {
           label: '未使用',
           label: '未使用',
@@ -110,16 +114,24 @@ export default {
     }
     }
   },
   },
   mounted() {
   mounted() {
-    this.fetchYohoNum();
-
-    this.$store.dispatch('coupon/yoho/fetchYohoList', {
-      type: TYPE.use,
-      refresh: true
-    });
-
-    this.$store.dispatch('coupon/yoho/fetchYohoList', {
-      type: TYPE.overtime,
-      refresh: true
+    Promise.all([
+      this.fetchYohoNum(),
+      this.$store.dispatch('coupon/yoho/fetchYohoList', {
+        type: TYPE.notuse,
+        refresh: true
+      }),
+      this.$store.dispatch('coupon/yoho/fetchYohoList', {
+        type: TYPE.use,
+        refresh: true
+      }),
+      this.$store.dispatch('coupon/yoho/fetchYohoList', {
+        type: TYPE.overtime,
+        refresh: true
+      })
+    ]).then(() => {
+      this.showLoading = false;
+    }).catch(() => {
+      this.showLoading = false;
     });
     });
   },
   },
   methods: {
   methods: {
@@ -179,7 +191,8 @@ export default {
     SlideItem: Slide.Item,
     SlideItem: Slide.Item,
     CouponItem,
     CouponItem,
     Empty,
     Empty,
-    ScrollView
+    ScrollView,
+    Loading
   }
   }
 };
 };
 </script>
 </script>
@@ -231,4 +244,8 @@ export default {
 .tab-slide-container {
 .tab-slide-container {
   height: 100%;
   height: 100%;
 }
 }
+
+.loading {
+  margin: 40px auto;
+}
 </style>
 </style>