{{ item.product.name }}
{{ truncateText(item.product.description, 40) }}
-
-
@@ -86,12 +93,21 @@
+
+ 
+ {{ item.rongdouPrice }}
+
+
x{{ item.quantity }}
+ {{ item.rongdouPrice }}
+
+
- 共{{ order.totalQuantity }}件商品
-
- 总计：
+
+ 总计：
+
+
+
{{ order.totalRongdou }}
+
+
@@ -202,10 +218,18 @@
订单号：
{{ orderDetail.orderNumber }}
+
+ 用户名：
+ {{ orderDetail.username || '未知用户' }}
+
下单时间：
{{ formatDateTime(orderDetail.createdAt) }}
+
+ 更新时间：
+ {{ formatDateTime(orderDetail.updatedAt) }}
+
订单状态：
@@ -223,8 +247,14 @@
@@ -246,11 +276,23 @@
{{ item.product.name }}
{{ item.product.description }}
+规格：{{ item.specInfo }}
-
+
+ x {{ item.quantity }}
{{ item.rongdouPrice }}
+ 费用明细
商品总计：
-
+
+
{{ orderDetail.totalRongdou }}
+
+
- 实付积分：
-
@@ -331,6 +373,17 @@ const getStatusType = (status) => {
return typeMap[status] || 'info'
}
+const mapOrderStatus = (backendStatus) => {
+ const statusMap = {
+ 'pre_order': 'pending',
+ 'pending': 'pending',
+ 'shipped': 'shipped',
+ 'completed': 'completed',
+ 'cancelled': 'cancelled'
+ }
+ return statusMap[backendStatus] || 'pending'
+}
+
const getStatusText = (status) => {
const textMap = {
pending: '待发货',
@@ -451,13 +504,40 @@ const submitReview = async () => {
}
}
-const viewOrderDetail = async (orderId) => {
+const viewOrderDetail = (orderId) => {
try {
- const response = await api.get(`/orders/${orderId}`)
- orderDetail.value = response.data
+ console.log('正在查找订单详情，订单ID:', orderId)
+
+ // 从已加载的订单列表中查找对应订单
+ const order = orders.value.find(o => o.id === orderId)
+ console.log('找到的订单数据:', order)
+
+ if (!order) {
+ ElMessage.error('未找到订单信息')
+ return
+ }
+
+ // 直接使用已映射的订单数据
+ orderDetail.value = {
+ id: order.id,
+ orderNumber: order.orderNumber,
+ createdAt: order.createdAt,
+ updatedAt: order.updatedAt || order.createdAt,
+ username: order.username || '未知用户',
+ status: order.status,
+ totalPoints: order.totalPoints,
+ totalRongdou: order.totalRongdou,
+ totalQuantity: order.totalQuantity,
+ items: order.items || [],
+ shippingAddress: order.shippingAddress || null,
+ trackingNumber: order.trackingNumber || null
+ }
+
+ console.log('设置的订单详情数据:', orderDetail.value)
showOrderDetail.value = true
} catch (error) {
- ElMessage.error('获取订单详情失败')
+ console.error('查看订单详情失败:', error)
+ ElMessage.error(`查看订单详情失败: ${error.message || '未知错误'}`)
}
}
@@ -478,13 +558,41 @@ const getOrders = async (isLoadMore = false) => {
})
console.log(data,'response');
+ // 映射后端数据结构到前端需要的格式
+ const mappedOrders = data.data.orders.map(order => ({
+ id: order.id,
+ orderNumber: order.order_no,
+ createdAt: order.created_at,
+ updatedAt: order.updated_at,
+ username: order.username,
+ status: mapOrderStatus(order.status),
+ totalPoints: order.total_points,
+ totalRongdou: order.total_rongdou,
+ totalQuantity: order.items?.reduce((sum, item) => sum + item.quantity, 0) || 0,
+ items: order.items?.map(item => ({
+ id: item.id,
+ productId: item.product_id,
+ quantity: item.quantity,
+ points: item.points_price,
+ rongdouPrice: item.rongdou_price,
+ specInfo: item.spec_info,
+ product: {
+ name: item.product_name || '商品名称',
+ description: item.description || '商品描述',
+ image: item.image_url || '/imgs/loading.png'
+ }
+ })) || [],
+ shippingAddress: order.address || null,
+ trackingNumber: null
+ }))
+
if (isLoadMore) {
- orders.value.push(...data.data.orders)
+ orders.value.push(...mappedOrders)
} else {
- orders.value = data.data.orders
+ orders.value = mappedOrders
}
- hasMore.value = data.data.hasMore
+ hasMore.value = data.data.pagination.page < data.data.pagination.pages
page.value++
updateStatusCounts()
@@ -702,6 +810,12 @@ onMounted(() => {
align-items: center;
}
+.price-group {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+}
+
.price {
display: flex;
align-items: center;
@@ -711,6 +825,30 @@ onMounted(() => {
font-size: 14px;
}
+.plus-sign {
+ color: #999;
+ font-size: 12px;
+ margin: 0 2px;
+}
+
+.rongdou-icon {
+ width: 14px;
+ height: 14px;
+ object-fit: contain;
+}
+
+.detail-price-group {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+}
+
+.detail-item-price-group {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+}
+
.quantity {
color: #999;
font-size: 12px;
@@ -728,7 +866,20 @@ onMounted(() => {
align-items: center;
}
-.total-points {
+.total-price {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.total-price-group {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+}
+
+.total-points,
+.total-rongdou {
display: flex;
align-items: center;
gap: 4px;
@@ -877,6 +1028,13 @@ onMounted(() => {
}
.detail-product .product-price {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 8px;
+}
+
+.detail-item-price-group {
display: flex;
align-items: center;
gap: 4px;
@@ -885,6 +1043,29 @@ onMounted(() => {
font-size: 14px;
}
+.quantity-text {
+ color: #999;
+ font-size: 12px;
+}
+
+.detail-price-group {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ color: #ff6b35;
+ font-weight: 600;
+}
+
+.spec-info {
+ font-size: 12px;
+ color: #666;
+ margin: 4px 0;
+ background: #f5f5f5;
+ padding: 2px 8px;
+ border-radius: 4px;
+ display: inline-block;
+}
+
/* 响应式设计 */
@media (max-width: 480px) {
.order-header {
diff --git a/src/views/Pay.vue b/src/views/Pay.vue
index 985693d..ec15865 100644
--- a/src/views/Pay.vue
+++ b/src/views/Pay.vue
@@ -64,66 +64,36 @@
-
-
+
+
{{ orderDetail.totalRongdou }}
+
+
-
-
- 订单商品
-
-
-
-
-
-
-
-
- ![]()
-
-
-
- {{ item.name }}
- {{ item.specs }}
-
- {{ item.points }}积分
- x{{ item.quantity }}
-
-
- {{ item.points * item.quantity }}积分
-
-
-
- 暂无商品信息
-支付
-
-
-
+
+
+
+
+ {{ paymentData.beansAmount }}
+
+
+
+
+
+
+
+
-
+
+
+
+
+ +
+
+
+ {{ paymentData.beansAmount }}
+
+
+ {{ paymentData.beansAmount }}
+
+ {{ paymentData.beansAmount }}
+
+
+
-
-
-
-
-
-
- +
-
-
- {{ paymentData.beansAmount || 0 }}
-
-
- {{ paymentData.beansAmount || 0 }}
-
-
- {{ paymentData.totalAmount || 0 }}
@@ -158,7 +128,7 @@
@@ -172,7 +142,9 @@
- {{ timeLeft <= 0 ? '支付超时' : paying ? '支付中...' : '确认支付' }}
+ {{ paying ? '支付中...' : '确认支付' }}
@@ -301,6 +277,7 @@ const router = useRouter()
// 响应式数据
const loading = ref(false)
const paying = ref(false)
+
const selectedPaymentMethod = ref('') // 当前选择的支付方式
const paymentData = ref({
totalAmount: 0,
@@ -322,15 +299,44 @@ const selectedAddress = ref(null)
// 方法
const selectPaymentMethod = async (method) => {
+ const totalPointsPrice = paymentData.value.items.reduce((sum, item) => sum + (item.points * item.quantity), 0)
+ const totalBeansPrice = paymentData.value.items.reduce((sum, item) => sum + (item.rongdouPrice * item.quantity), 0)
+
+ // 检查支付方式是否符合商品价格要求
+ if (method === 'beans' && totalPointsPrice > 0) {
+ ElMessage.warning('此订单包含积分商品，不能仅使用融豆支付')
+ return
+ }
+ if (method === 'points' && totalBeansPrice > 0) {
+ ElMessage.warning('此订单包含融豆商品，不能仅使用积分支付')
+ return
+ }
+ if (method === 'mixed' && (totalPointsPrice === 0 || totalBeansPrice === 0)) {
+ ElMessage.warning('此订单不支持混合支付')
+ return
+ }
+
// 检查支付方式是否可用
if (!isPaymentMethodAvailable(method)) {
let message = ''
if (method === 'beans') {
- message = `融豆余额不足，当前余额：${userBalance.value.beans}，需要：${paymentData.value.totalAmount}`
+ if (totalBeansPrice === 0) {
+ message = '该订单不支持融豆支付'
+ } else {
+ message = `融豆余额不足，当前余额：${userBalance.value.beans}，需要：${totalBeansPrice}`
+ }
} else if (method === 'points') {
- message = `积分余额不足，当前余额：${userBalance.value.points}，需要：${paymentData.value.totalAmount}`
+ if (totalPointsPrice === 0) {
+ message = '该订单不支持积分支付'
+ } else {
+ message = `积分余额不足，当前余额：${userBalance.value.points}，需要：${totalPointsPrice}`
+ }
} else if (method === 'mixed') {
- message = `融豆和积分余额不足，当前余额：融豆${userBalance.value.beans} + 积分${userBalance.value.points} = ${userBalance.value.beans + userBalance.value.points}，需要：${paymentData.value.totalAmount}`
+ if (totalPointsPrice === 0 && totalBeansPrice === 0) {
+ message = '该订单不支持混合支付'
+ } else {
+ message = `余额不足，当前余额：融豆${userBalance.value.beans}，积分${userBalance.value.points}，需要：融豆${totalBeansPrice}，积分${totalPointsPrice}`
+ }
}
ElMessage.warning(message)
return
@@ -338,32 +344,19 @@ const selectPaymentMethod = async (method) => {
selectedPaymentMethod.value = method
- // 当切换支付方式时，向后端获取对应的支付金额
- if (paymentData.value.orderId) {
- await fetchPaymentAmountByMethod(method)
- }
-}
-
-// 根据支付方式获取支付金额
-const fetchPaymentAmountByMethod = async (paymentMethod) => {
- try {
- const response = await api.post('/payment/calculate', {
- orderId: paymentData.value.orderId,
- paymentMethod: paymentMethod
- })
-
- if (response.data.success) {
- const data = response.data.data
- // 更新支付数据
- paymentData.value.totalAmount = data.totalAmount || 0
- paymentData.value.pointsAmount = data.pointsAmount || 0
- paymentData.value.beansAmount = data.beansAmount || 0
- } else {
- ElMessage.error(response.data.message || '获取支付金额失败')
- }
- } catch (error) {
- console.error('获取支付金额失败:', error)
- ElMessage.error('获取支付金额失败，请重试')
+ // 根据选择的支付方式更新显示的金额
+ if (method === 'beans') {
+ paymentData.value.totalAmount = totalBeansPrice
+ paymentData.value.pointsAmount = 0
+ paymentData.value.beansAmount = totalBeansPrice
+ } else if (method === 'points') {
+ paymentData.value.totalAmount = totalPointsPrice
+ paymentData.value.pointsAmount = totalPointsPrice
+ paymentData.value.beansAmount = 0
+ } else if (method === 'mixed') {
+ paymentData.value.totalAmount = totalPointsPrice + totalBeansPrice
+ paymentData.value.pointsAmount = totalPointsPrice
+ paymentData.value.beansAmount = totalBeansPrice
}
}
@@ -420,10 +413,10 @@ const fetchUserBalance = async () => {
const pointsResponse = await api.get('/user/points')
userBalance.value.points = pointsResponse.data?.currentPoints ?? pointsResponse.data?.points ?? 0
- // 获取用户融豆（从用户资料接口获取）
+ // 获取用户融豆（从用户资料接口获取，需要取反）
const profileResponse = await api.get('/user/profile')
if (profileResponse.data.success && profileResponse.data.user) {
- userBalance.value.beans = parseFloat(profileResponse.data.user.balance) || 0
+ userBalance.value.beans = -(parseFloat(profileResponse.data.user.balance) || 0)
}
} catch (error) {
console.error('获取用户余额失败:', error)
@@ -434,16 +427,26 @@ const fetchUserBalance = async () => {
// 检查支付方式是否可用
const isPaymentMethodAvailable = (method) => {
- const totalAmount = paymentData.value.totalAmount
+ // 计算商品的总积分价格和总融豆价格
+ const totalPointsPrice = paymentData.value.items.reduce((sum, item) => sum + (item.points * item.quantity), 0)
+ const totalBeansPrice = paymentData.value.items.reduce((sum, item) => sum + (item.rongdouPrice * item.quantity), 0)
switch (method) {
case 'beans':
- return userBalance.value.beans >= totalAmount
+ // 如果所有商品的融豆价格总和为0，则不能选择融豆支付
+ if (totalBeansPrice === 0) return false
+ return userBalance.value.beans >= totalBeansPrice
case 'points':
- return userBalance.value.points >= totalAmount
+ // 如果所有商品的积分价格总和为0，则不能选择积分支付
+ if (totalPointsPrice === 0) return false
+ return userBalance.value.points >= totalPointsPrice
case 'mixed':
- // 融豆和积分总和是否足够（1积分=1融豆）
- return (userBalance.value.beans + userBalance.value.points) >= totalAmount
+ // 如果积分价格和融豆价格都为0，则不能选择混合支付
+ if (totalPointsPrice === 0 && totalBeansPrice === 0) return false
+ // 检查用户余额是否足够支付
+ const hasEnoughPoints = totalPointsPrice === 0 || userBalance.value.points >= totalPointsPrice
+ const hasEnoughBeans = totalBeansPrice === 0 || userBalance.value.beans >= totalBeansPrice
+ return hasEnoughPoints && hasEnoughBeans
default:
return true
}
@@ -453,6 +456,12 @@ const fetchPaymentData = async () => {
try {
loading.value = true
+ // 从路由参数获取订单ID
+ const orderId = route.params.orderId
+ if (!orderId) {
+ throw new Error('订单ID不存在')
+ }
+
// 先获取用户余额信息
await fetchUserBalance()
@@ -460,84 +469,74 @@ const fetchPaymentData = async () => {
await getAddressList()
// 从后端获取当前用户的待支付订单信息
- const response = await api.get('/order/pending-payment')
+ const response = await api.get(`/orders/pending-payment/${orderId}`)
if (response.data.success) {
const data = response.data.data
+ const items = (data.items || []).map(item => ({
+ id: item.id,
+ productId: item.product_id,
+ name: item.product_name,
+ image: item.image_url,
+ points: item.points_price,
+ price: item.price,
+ rongdouPrice: item.rongdou_price,
+ quantity: item.quantity,
+ description: item.description,
+ specInfo: item.spec_info
+ }))
+
+ // 计算总积分价格和总融豆价格
+ const totalPointsPrice = items.reduce((sum, item) => sum + (item.points * item.quantity), 0)
+ const totalBeansPrice = items.reduce((sum, item) => sum + (item.rongdouPrice * item.quantity), 0)
+
paymentData.value = {
- totalAmount: data.totalAmount || 0,
- pointsAmount: data.pointsAmount || 0,
- beansAmount: data.beansAmount || 0,
- orderId: data.orderId || null,
- items: data.items || []
+ totalAmount: 0, // 初始不设置总金额，等用户选择支付方式后再设置
+ pointsAmount: totalPointsPrice, // 积分金额
+ beansAmount: totalBeansPrice, // 融豆金额
+ orderId: data.id || null, // 订单ID
+ orderNo: data.order_no || '', // 订单号
+ items: items
+ }
+
+ // 根据价格自动选择支付方式
+ if (totalPointsPrice === 0 && totalBeansPrice > 0) {
+ await selectPaymentMethod('beans')
+ } else if (totalBeansPrice === 0 && totalPointsPrice > 0) {
+ await selectPaymentMethod('points')
+ } else if (totalPointsPrice > 0 && totalBeansPrice > 0) {
+ await selectPaymentMethod('mixed')
}
} else {
throw new Error(response.data.message || '获取订单信息失败')
}
} catch (error) {
ElMessage.error(error.message || '获取订单信息失败')
- router.go(-1)
} finally {
loading.value = false
}
}
const handleGoBack = async () => {
- // 如果倒计时还在进行中，显示确认弹窗
- if (timeLeft.value > 0) {
- try {
- await ElMessageBox.confirm(
- '确认要放弃付款吗？',
- '提示',
- {
- confirmButtonText: '确认',
- cancelButtonText: '取消',
- type: 'warning'
- }
- )
-
- // 用户确认放弃付款，先保存订单数据到后端，然后跳转到PayFailed页面
- try {
- if (paymentData.value.orderId) {
- // 将当前支付数据保存为失败订单
- await api.post('/order/save-failed', {
- orderId: paymentData.value.orderId,
- orderData: {
- orderNumber: 'ORD' + Date.now(),
- createTime: new Date().toISOString(),
- totalAmount: paymentData.value.totalAmount,
- subtotal: paymentData.value.totalAmount - 10, // 假设运费为10元
- shippingFee: 10,
- cartItems: paymentData.value.items,
- status: 'failed'
- }
- })
- }
- } catch (error) {
- console.error('保存失败订单数据失败:', error)
+ try {
+ await ElMessageBox.confirm(
+ '确认要取消订单吗？取消后将无法恢复。',
+ '取消订单',
+ {
+ confirmButtonText: '确认取消',
+ cancelButtonText: '继续支付',
+ type: 'warning'
}
-
- // 跳转到PayFailed页面，传递orderId参数
- if (paymentData.value.orderId) {
- router.push(`/payfailed?orderId=${paymentData.value.orderId}`)
- } else {
- router.push(`/payfailed`)
- }
- } catch {
- // 用户取消，什么都不做，留在当前页面
- }
- } else {
- // 倒计时已结束，直接返回
+ )
+
+ // 用户确认取消订单
router.go(-1)
+ } catch {
+ // 用户取消，什么都不做，留在当前页面
}
}
const confirmPayment = async () => {
- if (timeLeft.value <= 0) {
- ElMessage.error('支付超时，请重新下单')
- return
- }
-
if (!selectedPaymentMethod.value) {
ElMessage.error('请选择支付方式')
return
@@ -549,8 +548,21 @@ const confirmPayment = async () => {
}
try {
+ // 根据商品价格显示确认信息
+ let confirmMessage = ''
+ const totalPoints = paymentData.value.pointsAmount
+ const totalRongdou = paymentData.value.beansAmount
+
+ if (totalPoints > 0 && totalRongdou > 0) {
+ confirmMessage = `确认支付 ${totalPoints} 积分 + ${totalRongdou} 融豆？`
+ } else if (totalPoints === 0 && totalRongdou > 0) {
+ confirmMessage = `确认支付 ${totalRongdou} 融豆？`
+ } else if (totalRongdou === 0 && totalPoints > 0) {
+ confirmMessage = `确认支付 ${totalPoints} 积分？`
+ }
+
await ElMessageBox.confirm(
- `确定要支付 ¥${paymentData.value.totalAmount} 吗？`,
+ confirmMessage,
'确认支付',
{
confirmButtonText: '确定支付',
@@ -563,22 +575,13 @@ const confirmPayment = async () => {
// 创建订单数据
const orderData = {
- items: paymentData.value.items,
- paymentMethod: selectedPaymentMethod.value,
- totalAmount: paymentData.value.totalAmount,
+ orderId: paymentData.value.orderId,
addressId: selectedAddress.value.id,
- address: {
- recipientName: selectedAddress.value.recipientName,
- recipientPhone: selectedAddress.value.recipientPhone,
- province: selectedAddress.value.province,
- city: selectedAddress.value.city,
- district: selectedAddress.value.district,
- detailAddress: selectedAddress.value.detailAddress
- }
+ paymentMethod: selectedPaymentMethod.value
}
- // 向后端发送创建订单请求
- const response = await api.post('/orders/create', orderData)
+ // 向后端发送订单支付请求
+ const response = await api.post('/orders/confirm-payment', orderData)
if (response.data.success) {
ElMessage.success('订单创建成功！')
@@ -587,7 +590,7 @@ const confirmPayment = async () => {
router.push({
path: '/payloading',
query: {
- orderId: response.data.data.orderId
+ orderId: paymentData.value.orderId
}
})
} else {
@@ -1063,78 +1066,7 @@ onMounted(() => {
margin-top: 16px;
}
-.order-items-section .item-card {
- display: flex;
- align-items: center;
- padding: 16px 0;
- border-bottom: 1px solid #f0f0f0;
-}
-.order-items-section .item-card:last-child {
- border-bottom: none;
-}
-
-.order-items-section .item-image {
- width: 80px;
- height: 80px;
- margin-right: 16px;
- border-radius: 8px;
- overflow: hidden;
-}
-
-.order-items-section .item-image img {
- width: 100%;
- height: 100%;
- object-fit: cover;
-}
-
-.order-items-section .item-info {
- flex: 1;
- margin-right: 16px;
-}
-
-.order-items-section .item-name {
- font-size: 16px;
- font-weight: 500;
- color: #333;
- margin-bottom: 8px;
- line-height: 1.4;
-}
-
-.item-specs {
- font-size: 14px;
- color: #666;
- margin-bottom: 8px;
-}
-
-.item-price-quantity {
- display: flex;
- align-items: center;
- gap: 16px;
-}
-
-.item-price-quantity .price {
- color: #409eff;
- font-weight: 500;
-}
-
-.item-price-quantity .quantity {
- color: #666;
- font-size: 14px;
-}
-
-.order-items-section .item-total {
- font-size: 16px;
- font-weight: 500;
- color: #409eff;
- text-align: right;
-}
-
-.order-items-section .no-items {
- text-align: center;
- padding: 40px 20px;
- color: #999;
-}
.payment-icon {
color: #ffae00;
diff --git a/src/views/PayLoading.vue b/src/views/PayLoading.vue
index a692702..872b70c 100644
--- a/src/views/PayLoading.vue
+++ b/src/views/PayLoading.vue
@@ -62,10 +62,14 @@
支付方式
实付：
-
-
-
+
+
+
+
+ {{ paymentData.beansAmount }}
+
+
+
+
+
+
+
+
-
+
+
+
+
+ +
+
+
+ {{ paymentData.beansAmount }}
+
+
+ {{ paymentData.beansAmount }}
+
+ {{ paymentData.beansAmount }}
+
+
+
-
-
-
-
-
-
- +
-
-
- {{ paymentData.beansAmount || 0 }}
-
-
- {{ paymentData.beansAmount || 0 }}
-
-
- {{ paymentData.totalAmount || 0 }}
{{ item.name }}
{{ item.specification || '默认规格' }}
- ¥{{ item.price }} × {{ item.quantity }}
+
+
- ¥{{ (item.price * item.quantity).toFixed(2) }}
+
费用明细
商品总价：
- ¥{{ orderData.subtotal || 0 }}
+
+
运费：
- ¥{{ orderData.shippingFee || 0 }}
+
+
总计：
- ¥{{ orderData.totalAmount || 0 }}
+
+
-
-
-
- {{ paying ? '支付中...' : '确认付款' }}
-
-
+
@@ -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;
-}
+
\ No newline at end of file
diff --git a/src/views/ProductDetail.vue b/src/views/ProductDetail.vue
index e8fe2ef..cc67d94 100644
--- a/src/views/ProductDetail.vue
+++ b/src/views/ProductDetail.vue
@@ -153,14 +153,6 @@
>
加入购物车