封装接口

2 months ago · 794884fc66
5 changed files with 137 additions and 106 deletions
--- a/.env.development
+++ b/.env.development
@ -0,0 +1,5 @@
+NODE_ENV='development'
+#   请求域名前缀
+VUE_APP_URL='https://swsz.api.js-dyyj.com'
+#   打包后输出目录
+VUE_APP_OUTPUTDIR='dist_dev'
--- a/.env.production
+++ b/.env.production
@ -0,0 +1,5 @@
+NODE_ENV='production'
+#   请求域名前缀
+VUE_APP_URL='https://api.sutenong.com'
+#   打包后输出目录
+VUE_APP_OUTPUTDIR='dist'
--- a/src/libs/axios.js
+++ b/src/libs/axios.js
@ -17,7 +17,7 @@ http.interceptors.request.use((config) => {
    config.baseURL = process.env.VUE_APP_URL;
  }
  
-  const token = store.state.user.userInfo.token;
+  const token = store.state.user?.userInfo?.token || '';
  config.headers['token'] = token
  config.headers['Content-Type'] = 'application/json;charset=UTF-8';
  
@ -84,7 +84,7 @@ http.interceptors.response.use(response => {
 });

 // 请求方法挂载
-Vue.prototype.get = (params, url, loading = true) => {
+Vue.prototype.get = (params, url, loading = false) => {
  return new Promise((resolve, reject) => {
    http.get(url, { 
      params,
@ -99,7 +99,7 @@ Vue.prototype.get = (params, url, loading = true) => {
  })
 }

-Vue.prototype.post = (data, url, loading = true) => {
+Vue.prototype.post = (data, url, loading = false) => {
  return new Promise((resolve, reject) => {
    http.post(url, data, {
      loading // 传递加载状态参数
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@ -11,7 +11,7 @@
          v-lazy="`https://picsum.photos/1200/500?random=${item}`"
          alt="轮播图片"
          class="carousel-img"
-        >
+        />
      </el-carousel-item>
    </el-carousel>

@ -35,7 +35,9 @@
    <div class="hot-products">
      <div class="section-header">
        <h2 class="section-title">热门商品</h2>
-        <a href="#" class="more-link">查看更多 <i class="el-icon-arrow-right"></i></a>
+        <a href="#" class="more-link"
+          >查看更多 <i class="el-icon-arrow-right"></i
+        ></a>
      </div>

      <ProductList :products="hotProducts" />
@ -45,7 +47,9 @@
    <div class="new-products">
      <div class="section-header">
        <h2 class="section-title">新品上市</h2>
-        <a href="#" class="more-link">查看更多 <i class="el-icon-arrow-right"></i></a>
+        <a href="#" class="more-link"
+          >查看更多 <i class="el-icon-arrow-right"></i
+        ></a>
      </div>

      <ProductList :products="newProducts" />
@ -60,7 +64,7 @@
            v-lazy="`https://picsum.photos/600/300?random=10`"
            alt="促销活动图片"
            class="promotion-img"
-          >
+          />
          <div class="promotion-info">
            <h3>夏季大促</h3>
            <p>全场商品低至5折</p>
@ -72,7 +76,7 @@
            v-lazy="`https://picsum.photos/600/300?random=11`"
            alt="促销活动图片"
            class="promotion-img"
-          >
+          />
          <div class="promotion-info">
            <h3>新品首发</h3>
            <p>限量发售，先到先得</p>
@ -85,13 +89,13 @@
 </template>

 <script>
-import { mapGetters, mapActions } from 'vuex'
-import ProductList from '../components/product/ProductList'
+import { mapGetters, mapActions } from "vuex";
+import ProductList from "../components/product/ProductList";

 export default {
-  name: 'Home',
+  name: "Home",
  components: {
-    ProductList
+    ProductList,
  },
  data() {
    return {
@ -99,135 +103,131 @@ export default {
      hotProducts: [
        {
          id: 1,
-          name: '超薄笔记本电脑',
+          name: "超薄笔记本电脑",
          price: 5999,
          originalPrice: 6999,
-          image: 'https://picsum.photos/300/300?random=1',
+          image: "https://picsum.photos/300/300?random=1",
          sales: 1254,
-          categoryId: 1
+          categoryId: 1,
        },
        {
          id: 2,
-          name: '智能手表',
+          name: "智能手表",
          price: 1599,
          originalPrice: 1799,
-          image: 'https://picsum.photos/300/300?random=2',
+          image: "https://picsum.photos/300/300?random=2",
          sales: 856,
-          categoryId: 1
+          categoryId: 1,
        },
        {
          id: 3,
-          name: '纯棉T恤',
+          name: "纯棉T恤",
          price: 99,
          originalPrice: 199,
-          image: 'https://picsum.photos/300/300?random=3',
+          image: "https://picsum.photos/300/300?random=3",
          sales: 2356,
-          categoryId: 2
+          categoryId: 2,
        },
        {
          id: 4,
-          name: '休闲牛仔裤',
+          name: "休闲牛仔裤",
          price: 199,
          originalPrice: 399,
-          image: 'https://picsum.photos/300/300?random=4',
+          image: "https://picsum.photos/300/300?random=4",
          sales: 1890,
-          categoryId: 2
+          categoryId: 2,
        },
        {
          id: 5,
-          name: '舒适沙发',
+          name: "舒适沙发",
          price: 2999,
          originalPrice: 3999,
-          image: 'https://picsum.photos/300/300?random=5',
+          image: "https://picsum.photos/300/300?random=5",
          sales: 324,
-          categoryId: 3
+          categoryId: 3,
        },
        {
          id: 6,
-          name: '智能扫地机器人',
+          name: "智能扫地机器人",
          price: 1899,
          originalPrice: 2299,
-          image: 'https://picsum.photos/300/300?random=6',
+          image: "https://picsum.photos/300/300?random=6",
          sales: 754,
-          categoryId: 3
-        }
+          categoryId: 3,
+        },
      ],
      // 模拟新品数据
      newProducts: [
        {
          id: 7,
-          name: '高清投影仪',
+          name: "高清投影仪",
          price: 3299,
          originalPrice: 3699,
-          image: 'https://picsum.photos/300/300?random=7',
+          image: "https://picsum.photos/300/300?random=7",
          sales: 156,
-          categoryId: 1
+          categoryId: 1,
        },
        {
          id: 8,
-          name: '保湿面霜',
+          name: "保湿面霜",
          price: 299,
          originalPrice: 359,
-          image: 'https://picsum.photos/300/300?random=8',
+          image: "https://picsum.photos/300/300?random=8",
          sales: 423,
-          categoryId: 4
+          categoryId: 4,
        },
        {
          id: 9,
-          name: '有机水果礼盒',
+          name: "有机水果礼盒",
          price: 159,
          originalPrice: 199,
-          image: 'https://picsum.photos/300/300?random=9',
+          image: "https://picsum.photos/300/300?random=9",
          sales: 287,
-          categoryId: 5
+          categoryId: 5,
        },
        {
          id: 10,
-          name: '经典文学名著',
+          name: "经典文学名著",
          price: 129,
          originalPrice: 199,
-          image: 'https://picsum.photos/300/300?random=10',
+          image: "https://picsum.photos/300/300?random=10",
          sales: 342,
-          categoryId: 6
+          categoryId: 6,
        },
        {
          id: 11,
-          name: '无线蓝牙耳机',
+          name: "无线蓝牙耳机",
          price: 799,
          originalPrice: 999,
-          image: 'https://picsum.photos/300/300?random=11',
+          image: "https://picsum.photos/300/300?random=11",
          sales: 567,
-          categoryId: 1
+          categoryId: 1,
        },
        {
          id: 12,
-          name: '运动鞋',
+          name: "运动鞋",
          price: 499,
          originalPrice: 699,
-          image: 'https://picsum.photos/300/300?random=12',
+          image: "https://picsum.photos/300/300?random=12",
          sales: 432,
-          categoryId: 2
-        }
-      ]
-    }
+          categoryId: 2,
+        },
+      ],
+    };
  },
  computed: {
-    ...mapGetters([
-      'getCategories'
-    ]),
+    ...mapGetters(["getCategories"]),
    categories() {
-      return this.getCategories
-    }
+      return this.getCategories;
+    },
  },
  created() {
-    this.fetchCategories()
+    this.fetchCategories();
  },
  methods: {
-    ...mapActions([
-      'fetchCategories'
-    ])
-  }
-}
+    ...mapActions(["fetchCategories"]),
+  },
+};
 </script>

 <style lang="scss" scoped>
@ -317,7 +317,8 @@ export default {
    }
  }

-  .hot-products, .new-products {
+  .hot-products,
+  .new-products {
    margin-bottom: 40px;
  }

--- a/src/views/Index.vue
+++ b/src/views/Index.vue
@ -30,6 +30,7 @@ export default {
  },
  data() {
    return {
+      topBanner: [],
      newProducts: [
        {
          id: 7,
@ -74,6 +75,25 @@ export default {
      ],
    };
  },
+  created() {
+    this.getTopBanner();
+  },
+  methods: {
+    getTopBanner() {
+      // 头部banner
+      this.post(
+        {
+          type_id: 6,
+          position: 0,
+        },
+        "/api/adv/getAdv"
+      ).then((res) => {
+        if (res) {
+          this.topBanner = res.data;
+        }
+      });
+    },
+  },
 };
 </script>