From 5595dc8f1384b17b4853becb5a3756640f8bf2e8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=A7=E8=84=8F=E7=8B=BC?= <786316265@qq.com>
Date: Mon, 25 Aug 2025 16:56:14 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=95=86=E5=93=81=E8=BF=87?=
 =?UTF-8?q?=E6=B8=A1=E9=A1=B5=E9=9D=A2=E4=BB=A5=E5=8F=8A=E5=AF=B9=E5=85=B6?=
 =?UTF-8?q?=E5=AE=83=E9=A1=B5=E9=9D=A2=E5=81=9A=E4=BA=86=E7=9B=B8=E5=BA=94?=
 =?UTF-8?q?=E9=80=82=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/imgs/productdetail/商品详情.png | Bin 0 -> 383 bytes
 public/imgs/productdetail/小货车.png   | Bin 0 -> 357 bytes
 src/router/index.js                    |   2 +-
 src/views/ProductDetail.vue            |  56 ++++
 src/views/ProductSummary.vue           | 403 +++++++++++++++++++++++++
 src/views/Shop.vue                     |   2 +-
 6 files changed, 461 insertions(+), 2 deletions(-)
 create mode 100644 public/imgs/productdetail/商品详情.png
 create mode 100644 public/imgs/productdetail/小货车.png
 create mode 100644 src/views/ProductSummary.vue

diff --git a/public/imgs/productdetail/商品详情.png b/public/imgs/productdetail/商品详情.png
new file mode 100644
index 0000000000000000000000000000000000000000..b913a6a1300e6ad63cf205a125a4276527a1bcd2
GIT binary patch
literal 383
zcmeAS@N?(olHy`uVBq!ia0vp^d_XM3!3HF=W8NDADb50q$YKTtZeb8+WSBKa0w~B>
z9OUlAu<o49OCX0O-O<;Pfnj4m_n$;opqz-Oi(^Oy<K4+;d7B&rT5q;8o9iCryTWya
z?+Z(duxtiv5^EOgogbE+q8g$dsy7Z+J!bl$)|leTF=uYdrr9(9mbE?94NjQ%ytg!V
zzNTzi<h8w$$&La(7SH=P=^T$$NIqlA^H|}yMU%P%(`&ZZUS&_pOE{{{yB6)`$@(BD
zq<`7uahht0^VJiNxx!wZijhok4V=R$_vF+q0Rhqe2$#Ft-v55DFR)#9;*Cpo=RaGj
z%}tA(cE!f#pu+MU8F$yrV5m`6%(?Bi`bLnQK-<G!y`M}UADS$fuedcbeYLOiA1=i;
z(Fb>3H46y6x?}Sr`R!i+a~Wgxe)EOvXE4=g1vGK%#xdOgb-?RG(=!L7SG6ZLIX10)
bZ1IS>;P0YyQk(9B0+zwk)z4*}Q$iB}Vzrfr

literal 0
HcmV?d00001

diff --git a/public/imgs/productdetail/小货车.png b/public/imgs/productdetail/小货车.png
new file mode 100644
index 0000000000000000000000000000000000000000..e6e2c8ef130aba90d1344b64acbf23ba161437c3
GIT binary patch
literal 357
zcmV-r0h<1aP)<h;3K|Lk000e1NJLTq000mG000gM1^@s6CNG?d00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0QyNpK~#7FrBlHT
zf<O@DE+({L33i}XVEh3eu>-9@DS-;W7x01-umZIMO28LCaE9C&LI@GuWU|NZGB>w-
zC*n8`j32FO8qc=vq8pQd3oMZoV^DRQKIuX+-@qIiBL=01q4>g>U_yv>6h+*ybQ~ws
zN0?$RNCGKknk30(G68lzT9(D0c)*n;Qx&v^eqG^wlFTAdYM%773A71}r!oF8iLUP9
zbD&_8@J(qY*IlT3=FX^L{tj&0C}tZ%$%AY7(~v60Q0J<3rk{ZB0TrweOu^3ih68GI
z=F~<zD)<uc8Y`*qx~~1Is?PntP1EF2Il32X_0|6X({reioFGb600000NkvXXu0mjf
D)ESJt

literal 0
HcmV?d00001

diff --git a/src/router/index.js b/src/router/index.js
index 9791cfa..46bcdce 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -230,7 +230,7 @@ const routes = [
     }
   },
   {
-    path: '/productsummary',
+    path: '/productsummary/:id',
     name: 'productSummary',
     component: () => import('@/views/productSummary.vue'),
     meta: {
diff --git a/src/views/ProductDetail.vue b/src/views/ProductDetail.vue
index 6bd01fb..7c57f48 100644
--- a/src/views/ProductDetail.vue
+++ b/src/views/ProductDetail.vue
@@ -100,6 +100,29 @@
             </div>
           </div>
 
+          <div class="detail-group-container">
+            <!-- 第一组：商品详情图标 + 文本 -->
+            <div class="detail-item-group"> <!-- 每组独立容器 -->
+              <img src="/imgs/productdetail/商品详情.png" alt="商品详情" class="detail-icon">
+              <span class="detail-text">商品材质||
+              <el-tag
+                  v-for="tag in product.tags"
+                  :key="tag"
+                  size="small"
+                  class="product-tag"
+              >
+                {{ tag }}
+              </el-tag>||品牌||产地
+            </span>
+            </div>
+
+            <!-- 第二组：小货车图标 + 文本 -->
+            <div class="detail-item-group"> <!-- 每组独立容器 -->
+              <img src="/imgs/productdetail/小货车.png" alt="小货车" class="detail-icon">
+              <span class="detail-text">预计两小时内发货，后天送达</span>
+            </div>
+          </div>
+
           <!-- 商品描述 -->
           <div class="product-description">
             <h3>商品描述</h3>
@@ -536,6 +559,39 @@ watch(
   color: #333;
 }
 
+.detail-group-container {
+  display: flex;
+  flex-direction: column; /* 让两组纵向堆叠（上下排列） */
+  gap: 12px; /* 两组之间的垂直间距（可根据需求调整，如 16px） */
+  margin: 16px 0; /* 与上下其他内容的间距，保持页面呼吸感 */
+}
+
+/* 每组容器：控制图标和文本的横向对齐 */
+.detail-item-group {
+  display: flex; /* 组内图标和文本横向排列 */
+  align-items: center; /* 图标与文本垂直居中（避免错位） */
+  gap: 8px; /* 图标和文本之间的横向间距（可调整） */
+}
+
+/* 图标样式：保持原大小，避免拉伸 */
+.detail-icon {
+  width: 20px;
+  height: 20px;
+  object-fit: contain; /* 保持图片比例，不变形 */
+}
+
+/* 文本样式：保持原风格，优化 tag 间距 */
+.detail-text {
+  font-size: 14px;
+  color: #333;
+  line-height: 1.5;
+}
+
+/* 优化 tag 与文字的间距，避免拥挤 */
+.detail-text .product-tag {
+  margin: 0 4px; /* tag 左右留白，更美观 */
+}
+
 .product-description,
 .product-details {
   margin-bottom: 20px;
diff --git a/src/views/ProductSummary.vue b/src/views/ProductSummary.vue
new file mode 100644
index 0000000..32c29cf
--- /dev/null
+++ b/src/views/ProductSummary.vue
@@ -0,0 +1,403 @@
+<template>
+  <!-- 头部 -->
+  <div class="header">
+    <span @click="$router.go(-1)"><返回</span>
+    <el-icon @click="$router.push(`/product/${firstProduct.id}`)"><ShoppingCart /></el-icon>
+  </div>
+
+  <div class="products-container">
+    <div class="product-card">
+      <div class="product-image">
+        <el-carousel
+            :interval="4000"
+            indicator-position="outside"
+            style="min-height: 300px;"
+        >
+          <el-carousel-item v-for="(image, index) in firstProduct.images" :key="index">
+            <img :src="image" :alt="firstProduct.name" class="carousel-image" />
+          </el-carousel-item>
+        </el-carousel>
+      </div>
+
+      <div class="product-details">
+        <img :src="firstProduct.image" :alt="firstProduct.name" class="small-image" />
+        <div class="product-info">
+          <span class="product-name">{{ firstProduct.name }}</span>
+          <span class="product-price">{{ firstProduct.points }} 积分</span>
+        </div>
+        <span @click="$router.push(`/product/${firstProduct.id}`)" class="link">详情></span>
+      </div>
+
+      <div class="action">
+        <button class="button" @click="$router.push(`/product/${firstProduct.id}`)">立即购买</button>
+      </div>
+    </div>
+    <div v-for="product in products" :key="product.id" class="product-card">
+      <!-- 轮播图部分 -->
+      <div class="product-image">
+        <el-carousel
+          :interval="4000"
+          indicator-position="outside"
+          style="min-height: 300px;"
+        >
+          <el-carousel-item v-for="(image, index) in product.images" :key="index">
+            <img :src="image" :alt="product.name" class="carousel-image" />
+          </el-carousel-item>
+        </el-carousel>
+      </div>
+
+      <div class="product-details">
+        <img :src="product.image" :alt="product.name" class="small-image" />
+        <div class="product-info">
+          <span class="product-name">{{ product.name }}</span>
+          <span class="product-price">{{ product.points }} 积分</span>
+        </div>
+        <span @click="$router.push(`/product/${product.id}`)" class="link">详情></span>
+      </div>
+
+      <div class="action">
+        <button class="button" @click="$router.push(`/product/${product.id}`)">立即购买</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import api from '@/utils/api'
+import { useRoute, useRouter } from 'vue-router'
+import {ElMessage} from "element-plus";
+import {Bottom, ShoppingCart} from "@element-plus/icons-vue";
+
+const products = ref([])
+const firstProduct = ref([])
+
+const route = useRoute()
+const productId = ref(null)
+
+const getProducts = async () => {
+  try {
+    const { data } = await api.get('/products', {
+      params: {
+        page: 1,
+        limit: 20,
+        category: '',
+        keyword: '',
+        sort: ''
+      }
+    })
+    
+    console.log('API 响应数据:', data)
+    
+    // 根据你的 API 响应结构调整这里
+    if (data.data && data.data.products) {
+      products.value = data.data.products
+    } 
+    else if (Array.isArray(data.products)) {
+      products.value = data.products
+    }
+    else if (Array.isArray(data)) {
+      products.value = data
+    }
+    else {
+      console.error('无法解析的商品数据格式:', data)
+    }
+    
+    console.log('解析后的商品数据:', products.value)
+    
+  } catch (error) {
+    console.error('获取商品失败:', error)
+    console.error('错误详情:', error.response?.data)
+  }
+}
+
+const getFirstProduct = async () => {
+  try {
+    const productId = route.params.id
+
+    const [productRes] = await Promise.all([
+      api.get(`/products/${productId}`)
+    ])
+    console.log(productRes,'productRes');
+
+    firstProduct.value = productRes.data.data.product
+  } catch (error) {
+    ElMessage.error('获取商品详情失败')
+    console.log(error)
+  }
+}
+
+// 添加生命周期钩子来调用函数
+onMounted(() => {
+  productId.value = route.params.id
+  console.log('Product ID:', productId.value)
+  getProducts()
+  getFirstProduct()
+})
+
+</script>
+
+<style scoped>
+.header {
+  /* 基础布局 */
+  padding: 16px 20px;
+  background-color: #ffffff;
+  border-bottom: 1px solid #f0f0f0;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+
+  /* 固定在顶部 */
+  position: sticky;
+  top: 0;
+  z-index: 100;
+
+  /* 内容居中 */
+  display: flex;
+  align-items: center;
+  justify-content: space-between; /* 添加此项使内容分布在两端 */
+}
+
+.button {
+  background: #ff7700;
+  color: white;
+  border: none;
+  padding: 12px 24px;
+  border-radius: 6px;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 6px rgba(50, 142, 240, 0.2);
+  width: 50%;
+  margin: 12px auto 0; /* 修改这里：上下12px，左右自动居中 */
+  display: block; /* 添加此项使margin: auto生效 */
+}
+
+.button:hover {
+  background: linear-gradient(135deg, #337ecc, #2a6db3);
+  transform: translateY(-2px);
+  box-shadow: 0 6px 12px rgba(50, 142, 240, 0.3);
+}
+
+.button:active {
+  transform: translateY(0);
+  box-shadow: 0 2px 4px rgba(50, 142, 240, 0.2);
+}
+
+.header span {
+  /* 返回按钮样式 */
+  color: #333333;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+  padding: 6px 10px;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+
+  /* 添加返回图标占位 */
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.products-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  gap: 20px;
+  padding: 20px;
+  background: linear-gradient(to bottom, #ffae00, #f3f3f3);
+}
+
+.product-card {
+  border: 1px solid #e0e0e0;
+  border-radius: 12px;
+  padding: 16px;
+  background: white;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  transition: all 0.3s ease;
+  overflow: hidden;
+  width: 374px;
+  min-height: 526px;
+  display: flex;
+  flex-direction: column; /* 改为垂直布局 */
+}
+
+.product-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 8px 16px rgba(0,0,0,0.15);
+}
+
+.product-image {
+  position: relative;
+  margin-bottom: 12px;
+  border-radius: 8px;
+  overflow: hidden;
+  /* 关键：添加底部内边距，容纳指示器 */
+  padding-bottom: 30px;
+  min-height: 300px; /* 保留轮播图最小高度 */
+}
+
+.carousel-image {
+  width: 100%;
+  height: 100%;
+  object-fit: contain; /* 完整显示图片，不裁剪 */
+  background-color: #f5f5f5; /* 空白处用浅灰色填充，避免白屏 */
+}
+
+/* 修改部分开始 */
+.product-details {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  text-align: left;
+  margin-top: auto; /* 推到卡片底部 */
+  padding-top: 12px; /* 添加顶部间距 */
+  border-top: 1px solid #f0f0f0; /* 可选：添加分隔线 */
+}
+
+.small-image {
+  width: 60px;
+  height: 60px;
+  object-fit: cover;
+  border-radius: 8px;
+  border: 2px solid #f0f0f0;
+  flex-shrink: 0;
+}
+
+.product-info {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 60px;
+  flex-grow: 1;
+  min-width: 0;
+}
+
+.product-name {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+  line-height: 1.4;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  margin-bottom: 0;
+  width: 200px;
+}
+
+.product-price {
+  color: #e53935;
+  font-weight: bold;
+  font-size: 18px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+/* 修改部分结束 */
+
+/* 轮播图样式调整 */
+:deep(.el-carousel) {
+  border-radius: 8px;
+}
+
+:deep(.el-carousel__container) {
+  border-radius: 8px;
+}
+
+:deep(.el-carousel__indicators) {
+  bottom: 10px; /* 从 -25px 改为 10px，放在轮播图底部内侧 */
+  z-index: 10; /* 确保指示器在图片上方显示 */
+}
+
+:deep(.el-carousel__button) {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: #ccc;
+}
+
+:deep(.el-carousel__indicator.is-active .el-carousel__button) {
+  background-color: #409eff;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .products-container {
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 16px;
+    padding: 16px;
+  }
+
+  .product-card {
+    padding: 12px;
+    min-height: 450px; /* 移动端最小高度适配 */
+    width: 100%; /* 移动端卡片宽度占满父容器，避免超出屏幕 */
+  }
+
+  .product-image {
+    padding-bottom: 75%;
+    min-height: 200px; /* 移动端轮播图最小高度 */
+  }
+  
+  /* 响应式调整 */
+  .product-details {
+    gap: 10px;
+  }
+  
+  .small-image {
+    width: 50px;
+    height: 50px;
+  }
+  
+  .product-info {
+    height: 50px;
+  }
+  
+  .product-name {
+    font-size: 14px;
+  }
+  
+  .product-price {
+    font-size: 16px;
+  }
+}
+
+@media (max-width: 480px) {
+  .products-container {
+    grid-template-columns: repeat(1, 1fr);
+    gap: 12px;
+    padding: 12px;
+  }
+  
+  .product-card {
+    padding: 10px;
+  }
+  
+  .product-image {
+    height: 200px;
+  }
+  
+  /* 响应式调整 */
+  .product-details {
+    gap: 8px;
+  }
+  
+  .small-image {
+    width: 45px;
+    height: 45px;
+  }
+  
+  .product-info {
+    height: 45px;
+  }
+  
+  .product-name {
+    font-size: 13px;
+  }
+  
+  .product-price {
+    font-size: 15px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/Shop.vue b/src/views/Shop.vue
index d81b0a5..58b4611 100644
--- a/src/views/Shop.vue
+++ b/src/views/Shop.vue
@@ -350,7 +350,7 @@ const handleSearch = debounce(() => {
 }, 300)
 
 const goToProduct = (productId) => {
-  router.push(`/product/${productId}`)
+  router.push(`/productsummary/${productId}`)
 }
 
 const addToCart = (product) => {