优化价格显示

src/views/ProductSummary.vue

@@ -32,7 +32,16 @@
         <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.rongdou_price }} 融豆</span>
+          <div class="product-price">
+            <div class="main-price">
+              <img src="/imgs/profile/融豆.png" alt="融豆" class="rongdou-icon" />
+              <span class="rongdou-price">{{ firstProduct.rongdou_price }}</span>
+            </div>
+            <div class="sub-price">
+              <el-icon class="points-icon"><Coin /></el-icon>
+              <span class="points-price">{{ firstProduct.points_price }}</span>
+            </div>
+          </div>
         </div>
         <span @click="$router.push(`/product/${firstProduct.id}`)" class="link">详情></span>
       </div>
@@ -68,7 +77,16 @@
         <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.rongdou_price }} 融豆</span>
+          <div class="product-price">
+            <div class="main-price">
+              <img src="/imgs/profile/融豆.png" alt="融豆" class="rongdou-icon" />
+              <span class="rongdou-price">{{ product.rongdou_price }}</span>
+            </div>
+            <div class="sub-price">
+              <el-icon class="points-icon"><Coin /></el-icon>
+              <span class="points-price">{{ product.points_price }}</span>
+            </div>
+          </div>
         </div>
         <span @click="$router.push(`/product/${product.id}`)" class="link">详情></span>
       </div>
@@ -85,7 +103,7 @@ 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";
+import {Bottom, ShoppingCart, Coin} from "@element-plus/icons-vue";
 
 import { getImageUrl } from '@/config'
 
@@ -171,36 +189,36 @@ const getFirstProduct = async () => {
   }
 }
 
-const getProductDetail = async (productId) => {
-  try {
-    const response = await api.get(`/products/${productId}`)
+// const getProductDetail = async (productId) => {
+//   try {
+//     const response = await api.get(`/products/${productId}`)
     
-    if (response.data && response.data.data && response.data.data.product) {
-      productDetail.value = response.data.data.product
+//     if (response.data && response.data.data && response.data.data.product) {
+//       productDetail.value = response.data.data.product
       
-      // 处理商品详情的图片路径
-      if (productDetail.value.image) {
-        productDetail.value.image = getImageUrl(productDetail.value.image)
-      }
-      if (productDetail.value.images && Array.isArray(productDetail.value.images)) {
-        productDetail.value.images = productDetail.value.images.map(img => getImageUrl(img))
-      }
+//       // 处理商品详情的图片路径
+//       if (productDetail.value.image) {
+//         productDetail.value.image = getImageUrl(productDetail.value.image)
+//       }
+//       if (productDetail.value.images && Array.isArray(productDetail.value.images)) {
+//         productDetail.value.images = productDetail.value.images.map(img => getImageUrl(img))
+//       }
       
-      // 缓存商品详情
-      productDetailsCache.value[productId] = productDetail.value
-    } else {
-      console.error('无法解析商品详情数据:', response.data)
-      ElMessage.error('获取商品详情失败')
-    }
+//       // 缓存商品详情
+//       productDetailsCache.value[productId] = productDetail.value
+//     } else {
+//       console.error('无法解析商品详情数据:', response.data)
+//       ElMessage.error('获取商品详情失败')
+//     }
     
-    return productDetail.value
-  } catch (error) {
-    console.error('获取商品详情失败:', error)
-    console.error('错误详情:', error.response?.data)
-    ElMessage.error('获取商品详情失败')
-    throw error
-  }
-}
+//     return productDetail.value
+//   } catch (error) {
+//     console.error('获取商品详情失败:', error)
+//     console.error('错误详情:', error.response?.data)
+//     ElMessage.error('获取商品详情失败')
+//     throw error
+//   }
+// }
 
 // 预加载所有商品详情的函数
 const loadAllProductDetails = async () => {
@@ -407,13 +425,51 @@ onMounted(async () => {
 }
 
 .product-price {
-  color: #e53935;
-  font-weight: bold;
-  font-size: 18px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+  margin-top: auto; /* 推到底部 */
+}
+
+.main-price {
   display: flex;
   align-items: center;
   gap: 4px;
-  margin-top: auto; /* 推到底部 */
+  color: #e53935;
+  font-weight: bold;
+  font-size: 18px;
+}
+
+.rongdou-icon {
+  width: 16px;
+  height: 16px;
+  object-fit: contain;
+}
+
+.rongdou-price {
+  color: #e53935;
+  font-weight: bold;
+}
+
+.sub-price {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  margin-left: 20px;
+  margin-top: 2px;
+}
+
+.points-icon {
+  width: 12px;
+  height: 12px;
+  color: #666;
+}
+
+.points-price {
+  font-size: 12px;
+  color: #666;
+  font-weight: normal;
 }
 
 .link {