From 517a6c839179522c3fa39136dd39fdbeee45c49d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=A7=E8=84=8F=E7=8B=BC?= <786316265@qq.com>
Date: Fri, 22 Aug 2025 16:21:37 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E4=BA=86=E7=82=B9=E5=87=BB?=
 =?UTF-8?q?=E6=8E=A8=E8=8D=90=E5=95=86=E5=93=81=E4=B8=8D=E8=B7=B3=E8=BD=AC?=
 =?UTF-8?q?=E7=9A=84bug=EF=BC=8C=E4=BF=AE=E6=94=B9=E4=BA=86=E9=83=A8?=
 =?UTF-8?q?=E5=88=86=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/ProductDetail.vue | 58 ++++++++++++++++++++++++++++---------
 1 file changed, 45 insertions(+), 13 deletions(-)

diff --git a/src/views/ProductDetail.vue b/src/views/ProductDetail.vue
index 928733c..6bd01fb 100644
--- a/src/views/ProductDetail.vue
+++ b/src/views/ProductDetail.vue
@@ -42,6 +42,9 @@
               <img :src="image" :alt="product.name" class="product-image" />
             </el-carousel-item>
           </el-carousel>
+          <div v-for="(image, index) in product.images" :key="index" class="small-images">
+            <img :src="image" :alt="product.name" class="small-image" />
+          </div>
         </div>
 
         <!-- 商品信息 -->
@@ -236,6 +239,8 @@ import {
 } from '@element-plus/icons-vue'
 import api from '@/utils/api'
 
+import { watch } from 'vue'
+
 const route = useRoute()
 const router = useRouter()
 const userStore = useUserStore()
@@ -320,7 +325,7 @@ const buyNow = async () => {
 }
 
 const goToProduct = (productId) => {
-  router.push(`/product/${productId}`)
+  router.replace(`/product/${productId}`)
 }
 
 const previewImage = (image) => {
@@ -342,15 +347,26 @@ const getUserPoints = async () => {
 
 // 生命周期
 onMounted(() => {
-  getProductDetail()
+  //getProductDetail()
   getUserPoints()
 })
+
+watch(
+  () => route.params.id,
+  (newId) => {
+    if (newId) {
+      getProductDetail()
+      quantity.value = 1 // 重置数量
+    }
+  },
+  { immediate: true }
+)
 </script>
 
 <style scoped>
 .product-detail-page {
   min-height: 100vh;
-  background-color: #f5f5f5;
+  background: linear-gradient(to bottom, #ffae00, #f3f3f3);
 }
 
 .navbar {
@@ -394,12 +410,12 @@ onMounted(() => {
 }
 
 .product-detail {
-  background: white;
+  background: transparent;
 }
 
 .product-images {
   padding: 20px;
-  background: white;
+  background: transparent;
 }
 
 .product-image {
@@ -409,10 +425,29 @@ onMounted(() => {
   border-radius: 8px;
 }
 
+/* 小图容器样式 */
+.small-images {
+  display: flex;
+  justify-content: center;
+  gap: 12px;
+  margin-top: 16px;
+  flex-wrap: wrap;
+}
+
+/* 小图样式 */
+.small-image {
+  width: 64px;
+  height: 64px;
+  object-fit: cover;
+  border-radius: 6px;
+  border: 2px solid transparent;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
 .product-info {
   padding: 20px;
-  background: white;
-  border-bottom: 8px solid #f5f5f5;
+  background: transparent;
 }
 
 .product-header {
@@ -522,7 +557,6 @@ onMounted(() => {
 .detail-item {
   display: flex;
   padding: 8px 0;
-  border-bottom: 1px solid #f5f5f5;
 }
 
 .detail-label {
@@ -556,8 +590,7 @@ onMounted(() => {
   display: flex;
   gap: 12px;
   padding: 20px;
-  background: white;
-  border-top: 1px solid #eee;
+  background: transparent;
   position: sticky;
   bottom: 0;
 }
@@ -568,8 +601,7 @@ onMounted(() => {
 
 .product-reviews {
   padding: 20px;
-  background: white;
-  border-bottom: 8px solid #f5f5f5;
+  background: transparent;
 }
 
 .reviews-header {
@@ -661,7 +693,7 @@ onMounted(() => {
 
 .recommended-products {
   padding: 20px;
-  background: white;
+  background: transparent;
 }
 
 .recommended-products h3 {