11

src/apis/home.ts

@@ -0,0 +1,12 @@
+// 登陆相关接口
+import request from '@/utils/index'
+
+// 轮播接口
+export const getBannerList = () => request.get('/v1/home/banner_list')
+// GPU说明列表
+export const getGpuList = () => request.get('/v1/home/gpu_list')
+// 获取产品优势
+export const getAdvantage = () => request.get('/v1/home/p_advantages_list')
+
+// 获取热门产品信息
+export const getHotProduct = () => request.get('/v1/product/host_info')

src/utils/index.ts

@@ -32,10 +32,9 @@ request.interceptors.request.use(
 // 响应拦截器（统一处理错误、code 等）
 request.interceptors.response.use(
   (response) => {
-    console.log('响应数据:', response);
+
     // 假设后端返回格式为 { code: 200, data: ..., message: '' }
     const { code, data, message } = response.data;
-    console.log('请求成功:', data);
     if (code === 1) {
       return data;
     } else {
@@ -45,7 +44,7 @@ request.interceptors.response.use(
   },
   (error) => {
     // 网络错误 or 超时等
-    console.error('请求异常:', error.response.data);
+
     return Promise.reject(error.response.data);
   }
 );

src/views/home/index.vue

@@ -1,11 +1,11 @@
 <template>
   <div>
-  <div style="height: 550px; overflow: hidden;">
+    <div style="height: 550px; overflow: hidden;">
-    <a-carousel :after-change="onChange" style="height: 100%;">
+      <a-carousel :after-change="onChange" style="height: 100%;">
-      <div class="banner-slide"></div>
+        <div v-for="item in bannerList" :key="item.id" class="banner-slide" :style="{
-      <!-- 如果有多张，可以 v-for -->
+          background: `url(${item.image_url})`}"></div>
-    </a-carousel>
+      </a-carousel>
-  </div>
+    </div>
     <div class="one">
       <div>
         <h3>GPU选型</h3>
@@ -37,16 +37,17 @@
               :style="{ 'border-top': `3px solid ${listColor[index]}` }">
               <div class="name"
                 style="font-size: 24px;font-weight: bold;padding: 20px;border-bottom: 1px solid #c9c9c9;text-align: center;">
-                {{ value.title
+                {{ value.gpu_type }}
-                }}</div>
+              </div>
               <div class="price" style="margin: 30px 0;">
-                <span style="font-size: 24px;font-weight: bold;color: #5b85fe;">¥{{ value.price }}</span>
+                <span style="font-size: 24px;font-weight: bold;color: #5b85fe;">¥{{ value.payOnTime }}</span>
                 <span style="font-size: 12px;">/小时</span>
               </div>
               <div style="padding-bottom: 40px;line-height: 40px;">
-                <div>内存：{{ value.memory }}</div>
+                <!-- 修改这里：添加单位 -->
-                <div>显存：{{ value.graphicsMemory }}</div>
+                <div>内存：{{ value.memory }}GB</div>
-                <div>GPU：{{ value.GPU }}</div>
+                <div>显存：{{ value.vram }}GB</div>
+                <div>GPU：{{ value.gpu_num }}个</div>
               </div>
             </div>
           </div>
@@ -64,7 +65,7 @@
             <div v-for="item in advantageList">
               <img :src="item.img" alt="" srcset="" width="200" height="158">
               <div class="title">{{ item.title }}</div>
-              <div class="subtitle">{{ item.subtitle }}</div>
+              <div class="subtitle">{{ item.description }}</div>
             </div>
           </div>
         </div>
@@ -103,38 +104,129 @@
   </div>
 
 </template>
+
 <script lang="ts" setup>
+
 import { ref } from 'vue'
+import { getBannerList, getGpuList, getAdvantage, getHotProduct } from '@/apis/home';
 import one from '@/assets/1.png'
 import two from '@/assets/2.png'
 import three from '@/assets/3.png'
 import firth from '@/assets/4.png'
+import defaultBanner from '@/assets/banner2.png';
 const listColor = ref(['#7ed321', '#21d3c0', '#35a4de'])
-const source = ref(
+const source = ref([])
-  [
+const advantageList = ref([])
-    { title: 'NVIDIA A100', price: '3.28', memory: '64GB', graphicsMemory: '40GB', GPU: 1 },
+const bannerList = ref<any[]>([
-    { title: 'NVIDIA A100', price: '6.56', memory: '128GB', graphicsMemory: '80GB', GPU: 2 },
+  { id: 0, image_url: defaultBanner }
-    { title: 'NVIDIA A100', price: '13.12', memory: '256GB', graphicsMemory: '16GB', GPU: 4 },
+]);
-  ]
+
-)
-const advantageList = ref(
-  [
-    { img: one, title: '灵活弹性', subtitle: '支持按需、包周期两种计费方式,可以根据使用场景选择。' },
-    { img: two, title: '安全保障', subtitle: '提供网络防火墙功能，对公网连接进行严格访问控制' },
-    { img: three, title: '方便易用', subtitle: '提供完善的API体系，便捷的将云服务器与您的内部监控、运营系统相结合' },
-    { img: firth, title: '服务优势', subtitle: '7*24小时服务支持，60s之内问题相应机制' },
-  ]
-)
 const onChange = (current: number) => {
   console.log(current);
 };
+
+
+// 请求轮播
+const fetchBannerList = async () => {
+  try {
+    console.log('开始请求轮播图数据...');
+    const res: any = await getBannerList();
+    console.log('API返回数据:', res);
+    
+    // 处理返回的数据
+    if (res && Array.isArray(res) && res.length > 0) {
+      const processedList = res.map((item: any, index: number) => {
+        // 确保每个item都有id
+        const processedItem = {
+          id: item.id || index,
+          image_url: item.image_url || defaultBanner
+        };
+        
+        // 处理http协议问题
+        if (processedItem.image_url && processedItem.image_url.startsWith('http://')) {
+          processedItem.image_url = processedItem.image_url.replace('http://', 'https://');
+        }
+        
+        return processedItem;
+      });
+      
+      bannerList.value = processedList;
+      console.log('处理后的轮播图数据:', bannerList.value);
+    } else {
+      // API返回空数据或无效数据，使用默认图片
+      console.log('API返回无效数据，使用默认图片');
+      bannerList.value = [{ id: 0, image_url: defaultBanner }];
+    }
+  } catch (error: any) {
+    console.error('轮播图请求失败:', error);
+    // 请求失败时使用默认图片
+    bannerList.value = [{ id: 0, image_url: defaultBanner }];
+  }
+};
+
+// 请求GPU列表
+const getGPUList = async () => {
+  try {
+    const res: any = await getGpuList();
+    console.log('数据内容:', JSON.stringify(res, null, 2));
+    source.value = res;
+    console.log('GPU列表请求成功:', res);
+
+  } catch (error: any) {
+    console.error('GPU列表请求失败:', error);
+  }
+}
+
+// 请求产品优势
+const getAdvantageList = async () => {
+  try {
+    const res: any = await getAdvantage();
+    const list = res;
+
+    // 给每个 item 添加 img 字段
+    list.forEach((item: any, index: number) => {
+      if (index === 0) {
+        item.img = one;
+      } else if (index === 1) {
+        item.img = two;
+      } else if (index === 2) {
+        item.img = three;
+      } else {
+        item.img = firth;
+      }
+    });
+
+    advantageList.value = list;
+  } catch (error: any) {
+    console.error('产品优势请求失败:', error);
+  }
+}
+
+// 热门产品
+const getHotProductList = async () => {
+  try {
+    const res = await getHotProduct();
+    console.log('热门产品请求成功:', res);
+  } catch (error: any) {           // 捕获错误
+    console.error('热门产品请求失败:', error);
+  }
+}
+
+
+
+fetchBannerList();
+getGPUList();
+getAdvantageList();
+// getHotProductList();
+
 </script>
 <style scoped lang="scss">
 .banner-slide {
   width: 100%;
-  height:550px;
+  height: 550px;
-  background: url('@/assets/banner2.png') no-repeat center / cover;
+  // background: url('@/assets/banner2.png') no-repeat center / cover;
 }
+
 .one {
   display: flex;
   justify-content: space-around;