From 8d50c6dadfa870a3582451fdf437868c1c96371e Mon Sep 17 00:00:00 2001
From: dzl <786316265@qq.com>
Date: Tue, 2 Sep 2025 17:05:49 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9B=BE=E7=89=87=E8=B7=AF=E5=BE=84=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development             |  2 +-
 .env.production              |  2 +-
 src/config/index.js          | 17 ++++++++--
 src/views/BuyDetails.vue     |  3 +-
 src/views/Cart.vue           |  3 +-
 src/views/Matching.vue       |  4 +--
 src/views/MyProfile.vue      | 33 ++++++++++++++------
 src/views/MyShop.vue         |  5 +--
 src/views/Orders.vue         | 11 ++++---
 src/views/Pay.vue            | 25 +++++++--------
 src/views/PayLoading.vue     | 11 ++++---
 src/views/ProductDetail.vue  | 60 +++++++++++++++++++++++++++++++++++-
 src/views/ProductSummary.vue | 35 ++++++---------------
 src/views/Shop.vue           |  6 ++--
 14 files changed, 144 insertions(+), 73 deletions(-)

diff --git a/.env.development b/.env.development
index 8686c0c..304410c 100644
--- a/.env.development
+++ b/.env.development
@@ -1,3 +1,3 @@
 # 开发环境配置
 VITE_API_BASE_URL=/api
-VITE_UPLOAD_BASE_URL=http://localhost:3000/api/upload
\ No newline at end of file
+VITE_UPLOAD_BASE_URL=/api/upload
\ No newline at end of file
diff --git a/.env.production b/.env.production
index 8c9f662..070f7a2 100644
--- a/.env.production
+++ b/.env.production
@@ -1,5 +1,5 @@
 # 生产环境配置
 VITE_API_BASE_URL=https://www.zrbjr.com/api
-VITE_UPLOAD_BASE_URL=https://www.zrbjr.com/api/upload
+VITE_UPLOAD_BASE_URL=https://minio.zrbjr.com/api/upload
 # VITE_API_BASE_URL=http://114.55.111.44:3001/api
 # VITE_UPLOAD_BASE_URL=http://114.55.111.44:3001/api/upload
diff --git a/src/config/index.js b/src/config/index.js
index 4af2945..c874e11 100644
--- a/src/config/index.js
+++ b/src/config/index.js
@@ -21,20 +21,31 @@ export const { baseURL, uploadURL } = config[env]
 
 // 获取完整的图片URL
 export const getImageUrl = (imagePath) => {
+  // console.log('getImageUrl called with:', imagePath)
   if (!imagePath) return ''
   if (imagePath.startsWith('http')) return imagePath
   
-  // 在开发环境下，直接返回相对路径，让Vite代理处理
+  // 如果图片路径以/uploads开头，直接返回原路径
+  if (imagePath.startsWith('/uploads')) {
+    // console.log('Image starts with /uploads, returning original path:', imagePath)
+    return imagePath
+  }
+  
+  // 在开发环境下，也需要根据路径前缀处理
   if (env === 'development') {
+    const cleanBaseURL = baseURL.replace(/\/$/, '')
     const cleanImagePath = imagePath.startsWith('/') ? imagePath : `/${imagePath}`
-    return cleanImagePath
+    const fullUrl = `${cleanBaseURL}${cleanImagePath}`
+    console.log('Development environment, returning:', fullUrl)
+    return fullUrl
   }
   
   // 生产环境下使用完整URL
   const cleanBaseURL = baseURL.replace(/\/$/, '')
   const cleanImagePath = imagePath.startsWith('/') ? imagePath : `/${imagePath}`
+  const fullUrl = `${cleanBaseURL}${cleanImagePath}`
   
-  return `${cleanBaseURL}${cleanImagePath}`
+  return fullUrl
 }
 
 // 获取上传配置
diff --git a/src/views/BuyDetails.vue b/src/views/BuyDetails.vue
index e68ed67..1531917 100644
--- a/src/views/BuyDetails.vue
+++ b/src/views/BuyDetails.vue
@@ -32,7 +32,7 @@
               <span class="price-label">实付</span>
               <div class="price-container">
                 <div class="main-price">
-                  <img src="/imgs/profile/融豆.png" alt="融豆" class="rongdou-icon" />
+                  <img :src="getImageUrl('/imgs/profile/融豆.png')" alt="融豆" class="rongdou-icon" />
                   <span class="rongdou-price">{{ totalPrice }}</span>
                 </div>
                 <div class="sub-price">
@@ -130,6 +130,7 @@ import {
   ArrowRight
 } from '@element-plus/icons-vue'
 import api from '@/utils/api'
+import { getImageUrl } from '@/config'
 
 const route = useRoute()
 const router = useRouter()
diff --git a/src/views/Cart.vue b/src/views/Cart.vue
index 28183c8..7d49698 100644
--- a/src/views/Cart.vue
+++ b/src/views/Cart.vue
@@ -65,7 +65,7 @@
               />
             </div>
             <div class="item-image">
-              <img :src="item.image || '/imgs/productdetail/商品主图.png'" :alt="item.name" />
+              <img :src="getImageUrl(item.product.image_url) || '/imgs/productdetail/商品主图.png'" :alt="item.name" />
             </div>
             <div class="item-info">
               <div class="item-name">{{ item.name }}</div>
@@ -140,6 +140,7 @@ import {
   Coin
 } from '@element-plus/icons-vue'
 import api from '@/utils/api'
+import { getImageUrl } from '@/config'
 
 const router = useRouter()
 
diff --git a/src/views/Matching.vue b/src/views/Matching.vue
index df27f18..0b9e53c 100644
--- a/src/views/Matching.vue
+++ b/src/views/Matching.vue
@@ -54,7 +54,7 @@
                 step="100"
                 placeholder="请输入5000-50000之间的金额"
               >
-                <template #prepend><img src="/imgs/profile/融豆.png" alt="融豆" class="bean-image"></template>
+                <template #prepend><img :src="getImageUrl('/imgs/profile/融豆.png')" alt="融豆" class="bean-image"></template>
               </el-input>
             </div>
           </div>
@@ -349,7 +349,7 @@
                   :src="getImageUrl(transferDialog.voucher)" 
                   :preview-src-list="[getImageUrl(transferDialog.voucher)]"
                   alt="转账凭证"
-                  fit="cover"
+                  fit="contain"
                   :lazy="true"
                 >
                   <template #placeholder>
diff --git a/src/views/MyProfile.vue b/src/views/MyProfile.vue
index eb10e07..128f34b 100644
--- a/src/views/MyProfile.vue
+++ b/src/views/MyProfile.vue
@@ -64,7 +64,7 @@
         <div class="balance-item">
           <span class="balance-label">我的融豆</span>
           <div class="balance-content">
-            <img src="/imgs/profile/融豆.png" alt="融豆" class="bean-image">
+            <img :src="getImageUrl('/imgs/profile/融豆.png')" alt="融豆" class="bean-image">
             <div class="balance-value">{{ Math.abs(accountInfo.balance) }}</div>
           </div>
         </div>
@@ -137,6 +137,7 @@ import { useRouter } from 'vue-router';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import { User, Plus } from '@element-plus/icons-vue';
 import api from '@/utils/api';
+import { getImageUrl } from '@/config';
 
 export default {
   setup() {
@@ -144,6 +145,7 @@ export default {
     const router = useRouter();
     const avatarUrl = ref('');
     const newAvatar = ref('');
+    const uploadedAvatarData = ref(null);
     const showAvatarUpload = ref(false);
     const accountInfo = ref({ balance: '0.00', is_distribute: false });
     const isLoading = ref(false);
@@ -177,10 +179,12 @@ export default {
             };
             // 确保加载头像
             if (response.data.user?.avatar) {
-              avatarUrl.value = response.data.data.avatar;
+              // 使用getImageUrl处理头像路径
+              const processedAvatarUrl = getImageUrl(response.data.user.avatar);
+              avatarUrl.value = processedAvatarUrl;
               // 更新store中的头像
               if(userStore.user) {
-                userStore.setUserAvatar(response.data.data.avatar);
+                userStore.setUserAvatar(processedAvatarUrl);
               }
             }
           }
@@ -258,7 +262,10 @@ export default {
         });
         
         if (response.data.success) {
-          newAvatar.value = response.data.url;
+          // 保存上传响应数据
+          uploadedAvatarData.value = response.data.data;
+          // 使用url作为显示地址
+          newAvatar.value = response.data.data.url;
           ElMessage.success('头像上传成功');
         } else {
           ElMessage.error(response.data.message || '上传失败');
@@ -272,26 +279,30 @@ export default {
     // 确认更新头像
     const confirmAvatarUpload = async () => {
       try {
-        if (!newAvatar.value) {
+        if (!newAvatar.value || !uploadedAvatarData.value) {
           ElMessage.error('请先选择头像');
           return;
         }
         
+        // 使用path提交给后端
+        const avatarPath = uploadedAvatarData.value.path;
         const response = await api.put('/user/profile', { 
-          avatar: newAvatar.value
+          avatar: avatarPath
         });
         
         if (response.data.success) {
-          avatarUrl.value = newAvatar.value;
-          // 更新用户store中的头像信息 - 修改这里
+          // 使用url作为显示地址
+          avatarUrl.value = uploadedAvatarData.value.url;
+          // 更新用户store中的头像信息
           if(userStore.user) {
             userStore.setUser({
               ...userStore.user,
-              avatar: newAvatar.value
+              avatar: uploadedAvatarData.value.url
             });
           }
           showAvatarUpload.value = false;
           newAvatar.value = '';
+          uploadedAvatarData.value = null;
           ElMessage.success('头像更新成功');
         } else {
           ElMessage.error(response.data.message || '头像更新失败');
@@ -334,6 +345,7 @@ export default {
       avatarUrl,
       newAvatar,
       showAvatarUpload,
+      uploadedAvatarData,
       accountInfo,
       isLoading,
       functionItems,
@@ -343,7 +355,8 @@ export default {
       confirmAvatarUpload,
       handleLogout,
       handleDistributeChange,
-      userStore
+      userStore,
+      getImageUrl
     };
   }
 };
diff --git a/src/views/MyShop.vue b/src/views/MyShop.vue
index dd26b4f..3ffa92f 100644
--- a/src/views/MyShop.vue
+++ b/src/views/MyShop.vue
@@ -56,7 +56,7 @@
                   <div class="product-name">{{ product.name }}</div>
                   <div class="product-price">
                     <div class="main-price">
-                      <img src="/imgs/profile/融豆.png" alt="融豆" class="rongdou-icon" />
+                      <img :src="getImageUrl('/imgs/profile/融豆.png')" alt="融豆" class="rongdou-icon" />
                       <span class="rongdou-price">{{ product.rongdou_price }}</span>
                     </div>
                     <div class="sub-price">
@@ -162,7 +162,8 @@ export default {
       featuredProducts,
       loading,
       getUserPoints,
-      goToCategory
+      goToCategory,
+      getImageUrl
     }
   }
 }
diff --git a/src/views/Orders.vue b/src/views/Orders.vue
index de9d728..7024a41 100644
--- a/src/views/Orders.vue
+++ b/src/views/Orders.vue
@@ -75,7 +75,7 @@
                   <div class="item-price">
                     <div class="item-price-container">
                       <div class="item-main-price">
-                        <img src="/imgs/profile/融豆.png" alt="融豆" class="item-rongdou-icon" />
+                        <img :src="getImageUrl('/imgs/profile/融豆.png')" alt="融豆" class="item-rongdou-icon" />
                         <span class="item-rongdou-price">{{ item.rongdouPrice }}</span>
                       </div>
                       <div class="item-sub-price">
@@ -97,7 +97,7 @@
                 <span>总计：</span>
                 <div class="total-price-group">
                   <span class="total-rongdou">
-                    <img src="/imgs/profile/融豆.png" alt="融豆" class="total-rongdou-icon" />
+                    <img :src="getImageUrl('/imgs/profile/融豆.png')" alt="融豆" class="total-rongdou-icon" />
                     {{ order.totalRongdou }}
                   </span>
                 </div>
@@ -255,7 +255,7 @@
               <div class="product-price">
                 <div class="detail-item-price-container">
                   <div class="detail-item-main-price">
-                    <img src="/imgs/profile/融豆.png" alt="融豆" class="detail-rongdou-icon" />
+                    <img :src="getImageUrl('/imgs/profile/融豆.png')" alt="融豆" class="detail-rongdou-icon" />
                     <span class="detail-rongdou-price">{{ item.rongdouPrice }}</span>
                   </div>
                   <div class="detail-item-sub-price">
@@ -283,7 +283,7 @@
             <span class="label">商品总计：</span>
             <div class="value">
               <span class="detail-price-group">
-                <img src="/imgs/profile/融豆.png" alt="融豆" class="cost-rongdou-icon" />
+                <img :src="getImageUrl('/imgs/profile/融豆.png')" alt="融豆" class="cost-rongdou-icon" />
                 <span>{{ orderDetail.totalRongdou }}</span>
               </span>
             </div>
@@ -292,7 +292,7 @@
             <span class="label">实付：</span>
             <div class="value">
               <span class="detail-price-group">
-                <img src="/imgs/profile/融豆.png" alt="融豆" class="cost-rongdou-icon" />
+                <img :src="getImageUrl('/imgs/profile/融豆.png')" alt="融豆" class="cost-rongdou-icon" />
                 <span>{{ orderDetail.totalRongdou }}</span>
               </span>
             </div>
@@ -316,6 +316,7 @@ import {
   Plus
 } from '@element-plus/icons-vue'
 import api from '@/utils/api'
+import { getImageUrl } from '@/config'
 
 const router = useRouter()
 const userStore = useUserStore()
diff --git a/src/views/Pay.vue b/src/views/Pay.vue
index 9ef3515..229eb8c 100644
--- a/src/views/Pay.vue
+++ b/src/views/Pay.vue
@@ -74,7 +74,7 @@
               <!-- 积分+融豆混合支付 -->
               <div class="payment-price-container">
                 <div class="payment-main-price">
-                  <img src="/imgs/profile/融豆.png" alt="融豆" class="payment-rongdou-icon" />
+                  <img :src="getImageUrl('/imgs/profile/融豆.png')" alt="融豆" class="payment-rongdou-icon" />
                   <span class="payment-rongdou-price">{{ totalRongdouPrice }}</span>
                 </div>
                 <div class="payment-sub-price">
@@ -87,7 +87,7 @@
               <!-- 仅融豆支付 -->
               <div class="payment-price-container">
                  <div class="payment-main-price">
-                   <img src="/imgs/profile/融豆.png" alt="融豆" class="payment-rongdou-icon" />
+                   <img :src="getImageUrl('/imgs/profile/融豆.png')" alt="融豆" class="payment-rongdou-icon" />
                    <span class="payment-rongdou-price">{{ totalRongdouPrice }}</span>
                  </div>
                  <div class="payment-sub-price">
@@ -100,7 +100,7 @@
               <!-- 仅积分支付 -->
               <div class="payment-price-container">
                  <div class="payment-main-price">
-                   <img src="/imgs/profile/融豆.png" alt="融豆" class="payment-rongdou-icon" />
+                   <img :src="getImageUrl('/imgs/profile/融豆.png')" alt="融豆" class="payment-rongdou-icon" />
                    <span class="payment-rongdou-price">{{ totalRongdouPrice }}</span>
                  </div>
                  <div class="payment-sub-price">
@@ -113,7 +113,7 @@
               <!-- 未选择支付方式时的默认显示 -->
               <div class="payment-price-container">
                 <div class="payment-main-price">
-                   <img src="/imgs/profile/融豆.png" alt="融豆" class="payment-rongdou-icon" />
+                   <img :src="getImageUrl('/imgs/profile/融豆.png')" alt="融豆" class="payment-rongdou-icon" />
                    <span class="payment-rongdou-price">{{ totalRongdouPrice }}</span>
                  </div>
                  <div class="payment-sub-price">
@@ -129,7 +129,7 @@
               <span>积分：{{ paymentData.pointsAmount }}</span>
             </div>
             <div v-if="paymentData.beansAmount > 0" class="breakdown-item">
-              <img src="/imgs/profile/融豆.png" alt="融豆" class="breakdown-icon" />
+              <img :src="getImageUrl('/imgs/profile/融豆.png')" alt="融豆" class="breakdown-icon" />
               <span>融豆：{{ paymentData.beansAmount }}</span>
             </div>
           </div>
@@ -157,7 +157,7 @@
               <div class="item-price">
                 <div class="item-price-container">
                   <div class="item-main-price">
-                    <img src="/imgs/profile/融豆.png" alt="融豆" class="item-rongdou-icon" />
+                    <img :src="getImageUrl('/imgs/profile/融豆.png')" alt="融豆" class="item-rongdou-icon" />
                     <span class="item-rongdou-price">{{ item.rongdouPrice }}</span>
                   </div>
                   <div class="item-sub-price">
@@ -188,7 +188,7 @@
             }"
             @click="selectPaymentMethod('beans')"
           >
-            <img src="/imgs/profile/融豆.png" alt="融豆" class="payment-icon-img" />
+            <img :src="getImageUrl('/imgs/profile/融豆.png')" alt="融豆" class="payment-icon-img" />
             <div class="payment-info">
               <div class="payment-name">融豆支付</div>
               <div class="payment-desc">
@@ -233,7 +233,7 @@
             <div class="payment-icon-group">
               <el-icon class="payment-icon"><Coin /></el-icon>
               <span class="plus-sign">+</span>
-              <img src="/imgs/profile/融豆.png" alt="融豆" class="payment-icon-img" />
+              <img :src="getImageUrl('/imgs/profile/融豆.png')" alt="融豆" class="payment-icon-img" />
             </div>
             <div class="payment-info">
               <div class="payment-name">积分+融豆</div>
@@ -258,7 +258,7 @@
             <!-- 积分+融豆混合支付 -->
             <div class="bottom-price-container">
               <div class="bottom-main-price">
-                <img src="/imgs/profile/融豆.png" alt="融豆" class="bottom-rongdou-icon" />
+                <img :src="getImageUrl('/imgs/profile/融豆.png')" alt="融豆" class="bottom-rongdou-icon" />
                 <span class="bottom-rongdou-price">{{ paymentData.beansAmount }}</span>
               </div>
               <span class="bottom-plus-sign">+</span>
@@ -272,7 +272,7 @@
             <!-- 仅融豆支付 -->
             <div class="bottom-price-container">
               <div class="bottom-main-price">
-                <img src="/imgs/profile/融豆.png" alt="融豆" class="bottom-rongdou-icon" />
+                <img :src="getImageUrl('/imgs/profile/融豆.png')" alt="融豆" class="bottom-rongdou-icon" />
                 <span class="bottom-rongdou-price">{{ paymentData.beansAmount }}</span>
               </div>
               <span class="bottom-plus-sign" v-if="paymentData.pointsAmount > 0">+</span>
@@ -286,7 +286,7 @@
             <!-- 仅积分支付 -->
             <div class="bottom-price-container">
               <div class="bottom-main-price" v-if="paymentData.beansAmount > 0">
-                <img src="/imgs/profile/融豆.png" alt="融豆" class="bottom-rongdou-icon" />
+                <img :src="getImageUrl('/imgs/profile/融豆.png')" alt="融豆" class="bottom-rongdou-icon" />
                 <span class="bottom-rongdou-price">{{ paymentData.beansAmount || 0 }}</span>
               </div>
               <span class="bottom-plus-sign" v-if="paymentData.beansAmount > 0 && paymentData.pointsAmount > 0">+</span>
@@ -300,7 +300,7 @@
             <!-- 未选择支付方式时的默认显示 -->
             <div class="bottom-price-container">
               <div class="bottom-main-price" v-if="paymentData.beansAmount > 0">
-                <img src="/imgs/profile/融豆.png" alt="融豆" class="bottom-rongdou-icon" />
+                <img :src="getImageUrl('/imgs/profile/融豆.png')" alt="融豆" class="bottom-rongdou-icon" />
                 <span class="bottom-rongdou-price">{{ paymentData.beansAmount || 0 }}</span>
               </div>
               <span class="bottom-plus-sign" v-if="paymentData.beansAmount > 0 && paymentData.pointsAmount > 0">+</span>
@@ -338,6 +338,7 @@ import {
   Check
 } from '@element-plus/icons-vue'
 import api from '@/utils/api'
+import { getImageUrl } from '@/config'
 
 const route = useRoute()
 const router = useRouter()
diff --git a/src/views/PayLoading.vue b/src/views/PayLoading.vue
index f278a00..3d1b9ef 100644
--- a/src/views/PayLoading.vue
+++ b/src/views/PayLoading.vue
@@ -65,7 +65,7 @@
               <div class="product-price">
                 <div class="item-price-container">
                   <div class="item-main-price">
-                    <img src="/imgs/profile/融豆.png" alt="融豆" class="item-rongdou-icon" />
+                    <img :src="getImageUrl('/imgs/profile/融豆.png')" alt="融豆" class="item-rongdou-icon" />
                     <span class="item-rongdou-price">{{ item.rongdou_price }}</span>
                   </div>
                   <div class="item-sub-price">
@@ -79,7 +79,7 @@
             <div class="product-total">
               <div class="total-price-container">
                 <div class="total-main-price">
-                  <img src="/imgs/profile/融豆.png" alt="融豆" class="total-rongdou-icon" />
+                  <img :src="getImageUrl('/imgs/profile/融豆.png')" alt="融豆" class="total-rongdou-icon" />
                   <span class="total-rongdou-price">{{ (item.rongdou_price * item.quantity) }}</span>
                 </div>
                 <div class="total-sub-price">
@@ -98,21 +98,21 @@
         <div class="cost-item">
           <span class="label">商品总价：</span>
           <span class="value">
-            <img src="/imgs/profile/融豆.png" alt="融豆" class="cost-rongdou-icon" />
+            <img :src="getImageUrl('/imgs/profile/融豆.png')" alt="融豆" class="cost-rongdou-icon" />
             {{ orderData.totalAmount || 0 }}
           </span>
         </div>
         <div class="cost-item">
           <span class="label">运费：</span>
           <span class="value">
-            <img src="/imgs/profile/融豆.png" alt="融豆" class="cost-rongdou-icon" />
+            <img :src="getImageUrl('/imgs/profile/融豆.png')" alt="融豆" class="cost-rongdou-icon" />
             {{ orderData.shippingFee || 0 }}
           </span>
         </div>
         <div class="cost-item total">
           <span class="label">总计：</span>
           <span class="value">
-            <img src="/imgs/profile/融豆.png" alt="融豆" class="cost-rongdou-icon" />
+            <img :src="getImageUrl('/imgs/profile/融豆.png')" alt="融豆" class="cost-rongdou-icon" />
             {{ orderData.totalAmount || 0 }}
           </span>
         </div>
@@ -133,6 +133,7 @@ import {
   Coin
 } from '@element-plus/icons-vue'
 import api from '@/utils/api'
+import { getImageUrl } from '@/config'
 
 const route = useRoute()
 const router = useRouter()
diff --git a/src/views/ProductDetail.vue b/src/views/ProductDetail.vue
index 6bb8a62..cd8adcb 100644
--- a/src/views/ProductDetail.vue
+++ b/src/views/ProductDetail.vue
@@ -58,7 +58,7 @@
           <div class="product-price">
             <div class="price-container">
               <div class="main-price">
-                <img src="/imgs/profile/融豆.png" alt="融豆" class="rongdou-icon" />
+                <img :src="getImageUrl('/imgs/profile/融豆.png')" alt="融豆" class="rongdou-icon" />
                 <span class="rongdou-price">{{ product.rongdou_price }}</span>
               </div>
               <div class="sub-price">
@@ -719,6 +719,35 @@ watch(
   color: #333;
 }
 
+.quantity-selector :deep(.el-input-number) {
+  background: transparent;
+  border: none;
+}
+
+.quantity-selector :deep(.el-input-number .el-input__wrapper) {
+  background: transparent;
+  border: none;
+  box-shadow: none;
+}
+
+.quantity-selector :deep(.el-input-number .el-input__inner) {
+  background: transparent;
+  border: none;
+}
+
+.quantity-selector :deep(.el-input-number .el-input-number__decrease),
+.quantity-selector :deep(.el-input-number .el-input-number__increase) {
+  background: transparent;
+  border: none;
+  color: #409eff;
+}
+
+.quantity-selector :deep(.el-input-number .el-input-number__decrease:hover),
+.quantity-selector :deep(.el-input-number .el-input-number__increase:hover) {
+  background: transparent;
+  color: #66b1ff;
+}
+
 .action-buttons {
   display: flex;
   gap: 12px;
@@ -731,6 +760,35 @@ watch(
 
 .action-buttons .el-button {
   flex: 1;
+  background: linear-gradient(135deg, #ff6b35, #ff8c42);
+  border: none;
+  border-radius: 25px;
+  color: white;
+  font-size: 16px;
+  font-weight: 600;
+  padding: 14px 24px;
+  box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
+  transition: all 0.3s ease;
+  text-transform: none;
+}
+
+.action-buttons .el-button:hover {
+  background: linear-gradient(135deg, #ff5722, #ff7043);
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);
+}
+
+.action-buttons .el-button:active {
+  transform: translateY(0);
+  box-shadow: 0 2px 10px rgba(255, 107, 53, 0.3);
+}
+
+.action-buttons .el-button:disabled {
+  background: linear-gradient(135deg, #ccc, #ddd);
+  color: #999;
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: none;
 }
 
 .product-reviews {
diff --git a/src/views/ProductSummary.vue b/src/views/ProductSummary.vue
index ff87d81..9396e33 100644
--- a/src/views/ProductSummary.vue
+++ b/src/views/ProductSummary.vue
@@ -23,18 +23,18 @@
             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" />
+            <img :src="getImageUrl(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" />
+        <img :src="getImageUrl(firstProduct.image)" :alt="firstProduct.name" class="small-image" />
         <div class="product-info">
           <span class="product-name">{{ firstProduct.name }}</span>
           <div class="product-price">
             <div class="main-price">
-              <img src="/imgs/profile/融豆.png" alt="融豆" class="rongdou-icon" />
+              <img :src="getImageUrl('/imgs/profile/融豆.png')" alt="融豆" class="rongdou-icon" />
               <span class="rongdou-price">{{ firstProduct.rongdou_price }}</span>
             </div>
             <div class="sub-price">
@@ -68,18 +68,18 @@
           style="min-height: 300px;"
         >
           <el-carousel-item v-for="(image, index) in (productDetailsCache[product.id]?.images || [])" :key="index">
-            <img :src="image" :alt="product.name" class="carousel-image" />
+            <img :src="getImageUrl(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" />
+        <img :src="getImageUrl(product.image)" :alt="product.name" class="small-image" />
         <div class="product-info">
           <span class="product-name">{{ product.name }}</span>
           <div class="product-price">
             <div class="main-price">
-              <img src="/imgs/profile/融豆.png" alt="融豆" class="rongdou-icon" />
+              <img :src="getImageUrl('/imgs/profile/融豆.png')" alt="融豆" class="rongdou-icon" />
               <span class="rongdou-price">{{ product.rongdou_price }}</span>
             </div>
             <div class="sub-price">
@@ -145,12 +145,7 @@ const getProducts = async () => {
       console.error('无法解析的商品数据格式:', data)
     }
     
-    // 处理商品图片路径
-    products.value.forEach(product => {
-      if (product.image) {
-        product.image = getImageUrl(product.image)
-      }
-    })
+    // 不需要预处理图片路径，在模板中使用getImageUrl处理
     
     console.log('解析后的商品数据:', products.value)
     
@@ -174,13 +169,7 @@ const getFirstProduct = async () => {
 
     firstProduct.value = productRes.data.data.product
     
-    // 处理第一个商品的图片路径
-    if (firstProduct.value.image) {
-      firstProduct.value.image = getImageUrl(firstProduct.value.image)
-    }
-    if (firstProduct.value.images && Array.isArray(firstProduct.value.images)) {
-      firstProduct.value.images = firstProduct.value.images.map(img => getImageUrl(img))
-    }
+    // 不需要预处理图片路径，在模板中使用getImageUrl处理
   } catch (error) {
     ElMessage.error('获取商品详情失败')
     console.log(error)
@@ -244,13 +233,7 @@ const loadAllProductDetails = async () => {
   const newCache = { ...productDetailsCache.value }
   results.forEach(result => {
     if (result) {
-      // 处理缓存商品的图片路径
-      if (result.product.image) {
-        result.product.image = getImageUrl(result.product.image)
-      }
-      if (result.product.images && Array.isArray(result.product.images)) {
-        result.product.images = result.product.images.map(img => getImageUrl(img))
-      }
+      // 不需要预处理图片路径，在模板中使用getImageUrl处理
       newCache[result.id] = result.product
     }
   })
diff --git a/src/views/Shop.vue b/src/views/Shop.vue
index 452d007..5d4584d 100644
--- a/src/views/Shop.vue
+++ b/src/views/Shop.vue
@@ -65,7 +65,7 @@
             <h4 class="recommend-name">{{ product.name }}</h4>
             <div class="recommend-price-container">
               <div class="main-price">
-                <img src="/imgs/profile/融豆.png" alt="融豆" class="rongdou-icon" />
+                <img :src="getImageUrl('/imgs/profile/融豆.png')" alt="融豆" class="rongdou-icon" />
                 <span class="rongdou-price">{{ product.rongdou_price }}</span>
               </div>
               <div class="sub-price">
@@ -91,7 +91,7 @@
             <h4 class="recommend-name">{{ product.name }}</h4>
             <div class="recommend-price-container">
               <div class="main-price">
-                <img src="/imgs/profile/融豆.png" alt="融豆" class="rongdou-icon" />
+                <img :src="getImageUrl('/imgs/profile/融豆.png')" alt="融豆" class="rongdou-icon" />
                 <span class="rongdou-price">{{ product.rongdou_price }}</span>
               </div>
               <div class="sub-price">
@@ -140,7 +140,7 @@
           <h4 class="product-name">{{ product.name }}</h4>
           <div class="product-price">
             <div class="main-price">
-              <img src="/imgs/profile/融豆.png" alt="融豆" class="rongdou-icon" />
+              <img :src="getImageUrl('/imgs/profile/融豆.png')" alt="融豆" class="rongdou-icon" />
               <span class="rongdou-price">{{ product.rongdou_price }}</span>
             </div>
             <div class="sub-price">