admin

12_vuecli/mediaapp/src/views/book/BookPage.vue

@@ -79,10 +79,10 @@
       </van-tabs>
       <div class="type-product-list">
         <van-row gutter="10">
-            <van-col span="12" v-for="item in typeProductList" :key="item.id">
-              <ProductItem :val="item"></ProductItem>
-            </van-col>
-          </van-row>
+          <van-col span="12" v-for="item in typeProductList" :key="item.id">
+            <ProductItem :val="item"></ProductItem>
+          </van-col>
+        </van-row>
       </div>
     </div>
   </div>
@@ -148,8 +148,8 @@
 }
 </style>
 <script>
-import Vue from 'vue';
-import { Toast } from 'vant';
+import Vue from "vue";
+import { Toast } from "vant";
 
 Vue.use(Toast);
 import ProductItem from "@/components/ProductItem.vue";
@@ -158,49 +158,74 @@ export default {
   data() {
     return {
       dataList: [],
-      typeProductList: []
+      typeProductList: [],
     };
   },
   created() {
-    this.getDataList();
-    this.getTyepProduct();
+    Toast.loading({
+      message: "加载中...",
+      forbidClick: true,
+      duration: 0,
+    });
+    Promise.all([this.getDataList(), this.getTyepProduct()]).then(() => {
+      Toast.clear();
+    });
   },
   methods: {
     // tab切换
     tabChange(name) {
       let _typeUrl = "";
-      switch(name){
-        case 0:_typeUrl = "products";break;
-        case 1:_typeUrl = "category/classic";break;
-        case 2:_typeUrl = "category/homelife";break;
-        case 3:_typeUrl = "category/travel";break;
-        case 4:_typeUrl = "category/stationery";break;
+      switch (name) {
+        case 0:
+          _typeUrl = "products";
+          break;
+        case 1:
+          _typeUrl = "category/classic";
+          break;
+        case 2:
+          _typeUrl = "category/homelife";
+          break;
+        case 3:
+          _typeUrl = "category/travel";
+          break;
+        case 4:
+          _typeUrl = "category/stationery";
+          break;
       }
       this.getTyepProduct(_typeUrl);
     },
     // 获取分类商品数据
-    getTyepProduct(_typeUrl="products"){
-      let url = "/market/market/"+_typeUrl;
-      axios.get(url,{
-        params:{
-          start:0,
-          count:10
-        }
-      }).then((res)=>{
-        console.log(res)
-        this.typeProductList = res.data.data.products;
-      })
+    getTyepProduct(_typeUrl = "products") {
+      return new Promise((resolve, reject) => {
+        let url = "/market/market/" + _typeUrl;
+        axios
+          .get(url, {
+            params: {
+              start: 0,
+              count: 10,
+            },
+          })
+          .then((res) => {
+            this.typeProductList = res.data.data.products;
+            resolve(res);
+          })
+          .catch((error) => {
+            reject(error);
+          });
+      });
     },
     // 获取轮播图及新品发布数据
     getDataList() {
-      Toast.loading({
-        message: "加载中...",
-        forbidClick: true,
-        duration: 0
-      });
-      axios.get("/market/market/home/modules").then((res) => {
-        this.dataList = res.data.data.modules;
-        Toast.clear();
+      return new Promise((resolve, reject) => {
+        axios
+          .get("/market/market/home/modules")
+          .then((res) => {
+            this.dataList = res.data.data.modules;
+            resolve(res);
+          })
+          .catch((error) => {
+            reject(error);
+          });
       });
     },
   },