优化价格显示

src/views/PayLoading.vue

@@ -63,13 +63,30 @@
               <div class="product-name">{{ item.name }}</div>
               <div class="product-spec">{{ item.specification || '默认规格' }}</div>
               <div class="product-price">
-                <el-icon><Coin /></el-icon>
-                {{ item.price }} × {{ item.quantity }}
+                <div class="item-price-container">
+                  <div class="item-main-price">
+                    <img src="/imgs/profile/融豆.png" alt="融豆" class="item-rongdou-icon" />
+                    <span class="item-rongdou-price">{{ item.rongdou_price }}</span>
+                  </div>
+                  <div class="item-sub-price">
+                    <el-icon class="item-points-icon"><Coin /></el-icon>
+                    <span class="item-points-price">{{ item.points_price }}</span>
+                  </div>
+                </div>
+                <span class="quantity-label">× {{ item.quantity }}</span>
               </div>
             </div>
             <div class="product-total">
-              <el-icon><Coin /></el-icon>
-              {{ (item.price * item.quantity) }}
+              <div class="total-price-container">
+                <div class="total-main-price">
+                  <img src="/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">
+                  <el-icon class="total-points-icon"><Coin /></el-icon>
+                  <span class="total-points-price">{{ (item.points_price * item.quantity) }}</span>
+                </div>
+              </div>
             </div>
           </div>
         </div>
@@ -81,21 +98,21 @@
         <div class="cost-item">
           <span class="label">商品总价：</span>
           <span class="value">
-            <el-icon><Coin /></el-icon>
-            {{ orderData.subtotal || 0 }}
+            <img src="/imgs/profile/融豆.png" alt="融豆" class="cost-rongdou-icon" />
+            {{ orderData.totalAmount || 0 }}
           </span>
         </div>
         <div class="cost-item">
           <span class="label">运费：</span>
           <span class="value">
-            <el-icon><Coin /></el-icon>
+            <img src="/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">
-            <el-icon><Coin /></el-icon>
+            <img src="/imgs/profile/融豆.png" alt="融豆" class="cost-rongdou-icon" />
             {{ orderData.totalAmount || 0 }}
           </span>
         </div>
@@ -180,8 +197,8 @@ const fetchOrderData = async () => {
       orderData.value = {
         orderNumber: order.order_no || 'ORD' + Date.now(),
         createTime: order.created_at || new Date().toISOString(),
-        totalAmount: order.total_points || 0,
-        subtotal: order.total_points || 0,
+        totalAmount: order.total_amount || 0,
+        subtotal: order.total_amount || 0,
         shippingFee: 0,
         address: {
           recipient: data.address?.receiver_name || order.username || '收件人',
@@ -196,7 +213,9 @@ const fetchOrderData = async () => {
           name: item.product_name,
           image: item.image_url || '/imgs/loading.png',
           specification: item.spec_info || '默认规格',
-          price: item.points_price || 0,
+          price: item.price || 0,
+          points_price: item.points_price || 0,
+          rongdou_price: item.rongdou_price || 0,
           quantity: item.quantity || 1
         }))
       }
@@ -472,5 +491,100 @@ onMounted(() => {
   font-size: 16px;
 }
 
+/* 商品价格显示样式 */
+.item-price-container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
+  margin-bottom: 4px;
+}
+
+.item-main-price {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.item-rongdou-icon {
+  width: 12px;
+  height: 12px;
+}
+
+.item-rongdou-price {
+  font-size: 12px;
+  font-weight: 500;
+  color: #333;
+}
+
+.item-sub-price {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.item-points-icon {
+  font-size: 10px;
+  color: #ffae00;
+}
+
+.item-points-price {
+  font-size: 10px;
+  color: #666;
+}
+
+.quantity-label {
+  font-size: 12px;
+  color: #666;
+  margin-top: 2px;
+}
+
+/* 商品总价显示样式 */
+.total-price-container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 2px;
+}
+
+.total-main-price {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.total-rongdou-icon {
+  width: 14px;
+  height: 14px;
+}
+
+.total-rongdou-price {
+  font-size: 14px;
+  font-weight: 500;
+  color: #ff4757;
+}
+
+.total-sub-price {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.total-points-icon {
+  font-size: 12px;
+  color: #ffae00;
+}
+
+.total-points-price {
+  font-size: 12px;
+  color: #666;
+}
+
+/* 费用明细融豆图标样式 */
+.cost-rongdou-icon {
+  width: 14px;
+  height: 14px;
+  margin-right: 2px;
+}
 
 </style>