From 794884fc66867a1eabd4b2096d26020e1929fb18 Mon Sep 17 00:00:00 2001
From: chenkainan <chenkainan163@163.com>
Date: Tue, 19 Aug 2025 09:55:46 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B0=81=E8=A3=85=E6=8E=A5=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development    |   5 ++
 .env.production     |   5 ++
 src/libs/axios.js   |   6 +-
 src/views/Home.vue  | 207 ++++++++++++++++++++++----------------------
 src/views/Index.vue |  20 +++++
 5 files changed, 137 insertions(+), 106 deletions(-)
 create mode 100644 .env.development
 create mode 100644 .env.production

diff --git a/.env.development b/.env.development
new file mode 100644
index 0000000..73c4a95
--- /dev/null
+++ b/.env.development
@@ -0,0 +1,5 @@
+NODE_ENV='development'
+#   请求域名前缀
+VUE_APP_URL='https://swsz.api.js-dyyj.com'
+#   打包后输出目录
+VUE_APP_OUTPUTDIR='dist_dev'
\ No newline at end of file
diff --git a/.env.production b/.env.production
new file mode 100644
index 0000000..8808c55
--- /dev/null
+++ b/.env.production
@@ -0,0 +1,5 @@
+NODE_ENV='production'
+#   请求域名前缀
+VUE_APP_URL='https://api.sutenong.com'
+#   打包后输出目录
+VUE_APP_OUTPUTDIR='dist'
\ No newline at end of file
diff --git a/src/libs/axios.js b/src/libs/axios.js
index 728d487..d7fc7af 100644
--- 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 // 传递加载状态参数
diff --git a/src/views/Home.vue b/src/views/Home.vue
index d0d2430..906682c 100644
--- 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;
diff --git a/src/views/Index.vue b/src/views/Index.vue
index 91a086d..55f530a 100644
--- 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>