封装接口

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
@ -1,27 +1,27 @@
 <template>
  <div class="home-page">
    <!-- 轮播图 -->
-    <el-carousel 
-      height="500px" 
+    <el-carousel
+      height="500px"
      indicator-position="outside"
      class="home-carousel"
    >
      <el-carousel-item v-for="item in 4" :key="item">
-        <img 
-          v-lazy="`https://picsum.photos/1200/500?random=${item}`" 
-          alt="轮播图片" 
+        <img
+          v-lazy="`https://picsum.photos/1200/500?random=${item}`"
+          alt="轮播图片"
          class="carousel-img"
-        >
+        />
      </el-carousel-item>
    </el-carousel>
-    
+
    <!-- 分类导航 -->
    <div class="category-nav">
      <h2 class="section-title">商品分类</h2>
      <div class="category-list">
-        <div 
-          v-for="category in categories" 
-          :key="category.id" 
+        <div
+          v-for="category in categories"
+          :key="category.id"
          class="category-item"
          @click="$router.push(`/category/${category.id}`)"
        >
@ -30,37 +30,41 @@
        </div>
      </div>
    </div>
-    
+
    <!-- 热门商品 -->
    <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" />
    </div>
-    
+
    <!-- 新品上市 -->
    <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" />
    </div>
-    
+
    <!-- 促销活动 -->
    <div class="promotion-section">
      <h2 class="section-title">限时促销</h2>
      <div class="promotion-container">
        <div class="promotion-item">
-          <img 
-            v-lazy="`https://picsum.photos/600/300?random=10`" 
-            alt="促销活动图片" 
+          <img
+            v-lazy="`https://picsum.photos/600/300?random=10`"
+            alt="促销活动图片"
            class="promotion-img"
-          >
+          />
          <div class="promotion-info">
            <h3>夏季大促</h3>
            <p>全场商品低至5折</p>
@ -68,11 +72,11 @@
          </div>
        </div>
        <div class="promotion-item">
-          <img 
-            v-lazy="`https://picsum.photos/600/300?random=11`" 
-            alt="促销活动图片" 
+          <img
+            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,152 +103,148 @@ 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>
 .home-page {
  .home-carousel {
    margin-bottom: 30px;
-    
+
    .carousel-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
-  
+
  .category-nav {
    margin-bottom: 40px;
-    
+
    .category-list {
      display: flex;
      justify-content: space-between;
@ -252,7 +252,7 @@ export default {
      gap: 20px;
      margin-top: 20px;
    }
-    
+
    .category-item {
      flex: 1;
      min-width: 120px;
@ -265,26 +265,26 @@ export default {
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.3s ease;
-      
+
      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        border-color: #409eff;
      }
-      
+
      .category-icon {
        font-size: 36px;
        color: #409eff;
        margin-bottom: 15px;
      }
-      
+
      .category-name {
        font-size: 16px;
        font-weight: 500;
      }
    }
  }
-  
+
  .section-title {
    font-size: 24px;
    color: #333;
@ -293,65 +293,66 @@ export default {
    display: inline-block;
    margin-bottom: 20px;
  }
-  
+
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
-    
+
    .more-link {
      color: #409eff;
      font-size: 14px;
      display: flex;
      align-items: center;
-      
+
      &:hover {
        text-decoration: underline;
      }
-      
+
      i {
        margin-left: 5px;
        font-size: 16px;
      }
    }
  }
-  
-  .hot-products, .new-products {
+
+  .hot-products,
+  .new-products {
    margin-bottom: 40px;
  }
-  
+
  .promotion-section {
    margin: 40px 0;
-    
+
    .promotion-container {
      display: flex;
      gap: 20px;
      margin-top: 20px;
-      
+
      @media (max-width: 768px) {
        flex-direction: column;
      }
    }
-    
+
    .promotion-item {
      flex: 1;
      position: relative;
      height: 300px;
      border-radius: 8px;
      overflow: hidden;
-      
+
      .promotion-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
-        
+
        &:hover {
          transform: scale(1.05);
        }
      }
-      
+
      .promotion-info {
        position: absolute;
        top: 0;
@ -366,12 +367,12 @@ export default {
        justify-content: center;
        padding: 20px;
        text-align: center;
-        
+
        h3 {
          font-size: 24px;
          margin-bottom: 10px;
        }
-        
+
        p {
          font-size: 16px;
          margin-bottom: 20px;
--- 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>