商城实现

src/views/PayLoading.vue

@@ -62,10 +62,14 @@
             <div class="product-info">
               <div class="product-name">{{ item.name }}</div>
               <div class="product-spec">{{ item.specification || '默认规格' }}</div>
-              <div class="product-price">¥{{ item.price }} × {{ item.quantity }}</div>
+              <div class="product-price">
+                <el-icon><Coin /></el-icon>
+                {{ item.price }} × {{ item.quantity }}
+              </div>
             </div>
             <div class="product-total">
-              ¥{{ (item.price * item.quantity).toFixed(2) }}
+              <el-icon><Coin /></el-icon>
+              {{ (item.price * item.quantity) }}
             </div>
           </div>
         </div>
@@ -76,31 +80,29 @@
         <h3 class="section-title">费用明细</h3>
         <div class="cost-item">
           <span class="label">商品总价：</span>
-          <span class="value">¥{{ orderData.subtotal || 0 }}</span>
+          <span class="value">
+            <el-icon><Coin /></el-icon>
+            {{ orderData.subtotal || 0 }}
+          </span>
         </div>
         <div class="cost-item">
           <span class="label">运费：</span>
-          <span class="value">¥{{ orderData.shippingFee || 0 }}</span>
+          <span class="value">
+            <el-icon><Coin /></el-icon>
+            {{ orderData.shippingFee || 0 }}
+          </span>
         </div>
         <div class="cost-item total">
           <span class="label">总计：</span>
-          <span class="value">¥{{ orderData.totalAmount || 0 }}</span>
+          <span class="value">
+            <el-icon><Coin /></el-icon>
+            {{ orderData.totalAmount || 0 }}
+          </span>
         </div>
       </div>
     </div>
 
-    <!-- 底部操作按钮 -->
-    <div class="bottom-actions">
-      <el-button 
-        type="primary" 
-        size="large"
-        class="pay-btn"
-        @click="confirmPayment"
-        :loading="paying"
-      >
-        {{ paying ? '支付中...' : '确认付款' }}
-      </el-button>
-    </div>
+
   </div>
 </template>
 
@@ -110,7 +112,8 @@ import { useRoute, useRouter } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { 
   ArrowLeft,
-  Warning
+  Warning,
+  Coin
 } from '@element-plus/icons-vue'
 import api from '@/utils/api'
 
@@ -119,7 +122,6 @@ const router = useRouter()
 
 // 响应式数据
 const loading = ref(false)
-const paying = ref(false)
 const orderData = ref({
   orderNumber: '',        // 订单编号
   createTime: '',         // 订单创建时间
@@ -169,19 +171,34 @@ const fetchOrderData = async () => {
       throw new Error('无效的订单ID')
     }
     
-    // 从后端获取完整订单信息
-    const response = await api.get(`/order/detail/${orderId}`)
+    // 从后端获取待支付订单信息
+    const response = await api.get(`/orders/${orderId}`)
     console.log('API响应:', response)
     if (response.data.success) {
       const data = response.data.data
+      const order = data.order || data
       orderData.value = {
-        orderNumber: data.orderNumber,
-        createTime: data.createTime,
-        totalAmount: data.totalAmount,
-        subtotal: data.subtotal,
-        shippingFee: data.shippingFee,
-        address: data.address,
-        cartItems: data.cartItems
+        orderNumber: order.order_no || 'ORD' + Date.now(),
+        createTime: order.created_at || new Date().toISOString(),
+        totalAmount: order.total_points || 0,
+        subtotal: order.total_points || 0,
+        shippingFee: 0,
+        address: {
+          recipient: data.address?.receiver_name || order.username || '收件人',
+          phone: data.address?.receiver_phone || order.phone || '手机号',
+          province: data.address?.province_name || '',
+          city: data.address?.city_name || '',
+          district: data.address?.district_name || '',
+          detail: data.address?.detailed_address || '暂无地址信息'
+        },
+        cartItems: (data.items || order.items || []).map(item => ({
+          id: item.id,
+          name: item.product_name,
+          image: item.image_url || '/imgs/loading.png',
+          specification: item.spec_info || '默认规格',
+          price: item.points_price || 0,
+          quantity: item.quantity || 1
+        }))
       }
     } else {
       throw new Error(response.data.message || '获取订单信息失败')
@@ -227,35 +244,7 @@ const fetchOrderData = async () => {
   }
 }
 
-const confirmPayment = async () => {
-  try {
-    paying.value = true
-    
-    const orderId = route.query.orderId
-    if (!orderId) {
-      ElMessage.error('订单ID无效')
-      return
-    }
-    
-    // 向后端发送支付确认请求
-    const response = await api.post(`/order/pay/${orderId}`, {
-      orderId: orderId,
-      paymentMethod: 'online' // 可以根据需要调整支付方式
-    })
-    
-    if (response.data.success) {
-      ElMessage.success('支付成功！')
-      // 跳转到支付成功页面或订单列表
-      router.push('/orders')
-    } else {
-      throw new Error(response.data.message || '支付失败')
-    }
-  } catch (error) {
-    ElMessage.error(error.message || '支付处理失败')
-  } finally {
-    paying.value = false
-  }
-}
+
 
 // 生命周期
 onMounted(() => {
@@ -421,12 +410,28 @@ onMounted(() => {
 .product-price {
   font-size: 12px;
   color: #666;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.product-price .el-icon {
+  color: #ffae00;
+  font-size: 12px;
 }
 
 .product-total {
   font-size: 14px;
   font-weight: 500;
   color: #ff4757;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.product-total .el-icon {
+  color: #ffae00;
+  font-size: 14px;
 }
 
 .cost-item {
@@ -446,26 +451,26 @@ onMounted(() => {
 .cost-item.total .value {
   color: #ff4757;
   font-size: 16px;
-}
-
-.bottom-actions {
-  padding: 16px;
-  background: white;
-  border-top: 1px solid #eee;
   display: flex;
+  align-items: center;
+  gap: 4px;
 }
 
-.pay-btn {
-  width: 100%;
-  height: 48px;
-  background: #ffae00;
-  border: none;
-  border-radius: 24px;
+.cost-item .value {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.cost-item .value .el-icon {
+  color: #ffae00;
+  font-size: 14px;
+}
+
+.cost-item.total .value .el-icon {
+  color: #ffae00;
   font-size: 16px;
-  font-weight: 500;
 }
 
-.pay-btn:hover {
-  background: #e69900;
-}
+
 </style>