admin/jurong_circle_frontdesk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

商城实现

Browse Source
This commit is contained in:
大脏狼
2025-08-29 16:58:00 +08:00
parent 186ee157af
commit 6e0ae59f43
10 changed files with 613 additions and 445 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/router/index.js
View File

@@ -245,11 +245,11 @@ const routes = [
meta: { title: '确认订单' }
},
{
path: '/pay',
path: '/pay/:orderId',
name: 'Pay',
component: () => import('@/views/Pay.vue'),
meta: { title: '确认支付' },
props: route => ({ cartId: route.query.cartId })
props: route => ({ orderId: route.query.orderId })
},
{
path: '/cart',
@@ -266,9 +266,9 @@ const routes = [
{
path: '/payloading',
name: 'PayLoading',
component: () => import('../views/PayLoading.vue'),
component: () => import('@/views/PayLoading.vue'),
meta: { title: '支付确认' },
props: route => ({ cartId: route.query.cartId })
props: route => ({ orderId: route.query.orderId })
},
{
path: '/:pathMatch(.*)*',

55
src/views/BuyDetails.vue
View File

@@ -366,31 +366,42 @@ const handlePurchase = async () => {
}
try {
// 构建商品数据，直接跳转到Pay页面
const purchaseData = {
items: [{
id: product.value.id,
productId: product.value.id,
name: product.value.name,
image: product.value.image,
points: product.value.points,
quantity: quantity.value,
specificationId: specificationId,
specs: Object.keys(selectedSpecs.value).map(specName =>
`${specName}: ${selectedSpecs.value[specName].name}`
).join(', '),
orderNote: orderNote.value
}]
// 先将商品添加到购物车
const cartItem = {
productId: product.value.id,
quantity: quantity.value,
specificationId: specificationId,
points: product.value.points,
name: product.value.name,
image: product.value.image,
stock: product.value.stock
}
const addToCartResponse = await api.post('/cart/add', cartItem)
if (!addToCartResponse.data.success) {
throw new Error(addToCartResponse.data.message || '添加到购物车失败')
}
// 获取刚添加的购物车项ID
const cartItemId = addToCartResponse.data.data?.cart_item_id || addToCartResponse.data.data?.id || addToCartResponse.data.data?.cartItemId || addToCartResponse.data.id
if (!cartItemId) {
console.error('添加购物车API响应:', addToCartResponse.data)
throw new Error('无法获取购物车项ID')
}
// 跳转到Pay页面，传递商品数据
router.push({
path: '/pay',
query: {
from: 'buydetails',
cartData: JSON.stringify(purchaseData)
}
// 创建订单
const response = await api.post('/orders/create-from-cart', {
cart_item_ids: [cartItemId]
})
if (response.data.success) {
// 跳转到Pay页面
router.push(`/pay/${response.data.data.preOrderId}`)
} else {
throw new Error(response.data.message || '创建订单失败')
}
} catch (error) {
ElMessage.error(error.message || '操作失败，请重试')
}

42
src/views/Cart.vue
View File

@@ -80,23 +80,19 @@
</div>
<div class="item-actions">
<div class="quantity-controls">
<el-button
size="small"
<div
@click="decreaseQuantity(item)"
:disabled="item.quantity <= 1"
class="quantity-btn"
:class="['quantity-btn', { 'disabled': item.quantity <= 1 }]"
>
-
</el-button>
</div>
<span class="quantity">{{ item.quantity }}</span>
<el-button
size="small"
<div
@click="increaseQuantity(item)"
:disabled="item.quantity >= item.stock"
class="quantity-btn"
:class="['quantity-btn', { 'disabled': item.quantity >= item.stock }]"
>
+
</el-button>
</div>
</div>
<el-button
type="text"
@@ -292,13 +288,14 @@ const checkout = async () => {
const selectedIds = selectedItems.value.map(item => item.id)
// 向后端发送选中商品的id数组创建订单
const response = await api.post('/order/create-from-cart', {
const response = await api.post('/orders/create-from-cart', {
cart_item_ids: selectedIds
})
if (response.data.success) {
// 直接跳转到支付页面，不传递任何参数
router.push('/pay')
console.log('跳转支付页面的response',response.data.data.preOrderId)
router.push(`/pay/${response.data.data.preOrderId}`)
} else {
throw new Error(response.data.message || '创建订单失败')
}
@@ -337,6 +334,12 @@ onMounted(() => {
flex: 1;
}
.nav-right {
display: flex;
justify-content: center;
align-items: center;
}
.nav-center {
flex: 2;
text-align: center;
@@ -500,8 +503,6 @@ onMounted(() => {
.quantity-controls {
display: flex;
align-items: center;
border: 1px solid #e0e0e0;
border-radius: 4px;
overflow: hidden;
}
@@ -510,22 +511,27 @@ onMounted(() => {
height: 32px;
padding: 0;
border: none;
background: #f5f5f5;
background: transparent;
color: #666;
font-size: 16px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
user-select: none;
}
.quantity-btn:hover {
background: #e0e0e0;
background: transparent;
color: #333;
}
.quantity-btn:disabled {
background: #f9f9f9;
.quantity-btn.disabled {
background: transparent;
color: #ccc;
cursor: not-allowed;
pointer-events: none;
}
.quantity {

7
src/views/MyShop.vue
View File

@@ -76,6 +76,8 @@ import { useRouter } from 'vue-router'
import api from '@/utils/api' // 确保导入正确的api模块
import { ElMessage } from 'element-plus'
import {getImageUrl} from '@/config'
export default {
setup() {
const router = useRouter()
@@ -121,6 +123,11 @@ export default {
// 只取前3个商品作为精选商品
featuredProducts.value = data.data.products.slice(0, 3)
featuredProducts.value.forEach(product => {
if (product.image) {
product.image = getImageUrl(product.image)
}
})
} catch (error) {
console.error('获取商品列表失败:', error)
ElMessage.error('获取商品列表失败')

221
src/views/Orders.vue
View File

@@ -73,10 +73,17 @@
<h4 class="item-name">{{ item.product.name }}</h4>
<p class="item-desc">{{ truncateText(item.product.description, 40) }}</p>
<div class="item-price">
<span class="price">
<el-icon><Coin /></el-icon>
{{ item.points }}
</span>
<div class="price-group">
<span class="price">
<el-icon><Coin /></el-icon>
{{ item.points }}
</span>
<span class="plus-sign">+</span>
<span class="price">
<img src="/imgs/profile/融豆.png" alt="融豆" class="rongdou-icon" />
{{ item.rongdouPrice }}
</span>
</div>
<span class="quantity">x{{ item.quantity }}</span>
</div>
</div>
@@ -86,12 +93,21 @@
<!-- 订单总计 -->
<div class="order-total">
<div class="total-info">
<span>共{{ order.totalQuantity }}件商品</span>
<span class="total-points">
总计：<el-icon><Coin /></el-icon>{{ order.totalPoints }}
</span>
<span>共{{ order.totalQuantity }}件商品</span>
<div class="total-price">
<span>总计：</span>
<div class="total-price-group">
<span class="total-points">
<el-icon><Coin /></el-icon>{{ order.totalPoints }}
</span>
<span class="plus-sign">+</span>
<span class="total-rongdou">
<img src="/imgs/profile/融豆.png" alt="融豆" class="rongdou-icon" />{{ order.totalRongdou }}
</span>
</div>
</div>
</div>
</div>
<!-- 订单操作 -->
<div class="order-actions">
@@ -202,10 +218,18 @@
<span class="label">订单号：</span>
<span class="value">{{ orderDetail.orderNumber }}</span>
</div>
<div class="detail-item">
<span class="label">用户名：</span>
<span class="value">{{ orderDetail.username || '未知用户' }}</span>
</div>
<div class="detail-item">
<span class="label">下单时间：</span>
<span class="value">{{ formatDateTime(orderDetail.createdAt) }}</span>
</div>
<div class="detail-item">
<span class="label">更新时间：</span>
<span class="value">{{ formatDateTime(orderDetail.updatedAt) }}</span>
</div>
<div class="detail-item">
<span class="label">订单状态：</span>
<span class="value">
@@ -223,8 +247,14 @@
<div class="product-info">
<h5>{{ item.product.name }}</h5>
<p>{{ item.product.description }}</p>
<p v-if="item.specInfo" class="spec-info">规格：{{ item.specInfo }}</p>
<div class="product-price">
<span><el-icon><Coin /></el-icon>{{ item.points }} x {{ item.quantity }}</span>
<div class="detail-item-price-group">
<span><el-icon><Coin /></el-icon>{{ item.points }}</span>
<span class="plus-sign">+</span>
<span><img src="/imgs/profile/融豆.png" alt="融豆" class="rongdou-icon" />{{ item.rongdouPrice }}</span>
</div>
<span class="quantity-text">x {{ item.quantity }}</span>
</div>
</div>
</div>
@@ -246,11 +276,23 @@
<h4>费用明细</h4>
<div class="detail-item">
<span class="label">商品总计：</span>
<span class="value"><el-icon><Coin /></el-icon>{{ orderDetail.totalPoints }}</span>
<div class="value">
<span class="detail-price-group">
<span><el-icon><Coin /></el-icon>{{ orderDetail.totalPoints }}</span>
<span class="plus-sign">+</span>
<span><img src="/imgs/profile/融豆.png" alt="融豆" class="rongdou-icon" />{{ orderDetail.totalRongdou }}</span>
</span>
</div>
</div>
<div class="detail-item total">
<span class="label">实付积分：</span>
<span class="value"><el-icon><Coin /></el-icon>{{ orderDetail.totalPoints }}</span>
<span class="label">实付：</span>
<div class="value">
<span class="detail-price-group">
<span><el-icon><Coin /></el-icon>{{ orderDetail.totalPoints }}</span>
<span class="plus-sign">+</span>
<span><img src="/imgs/profile/融豆.png" alt="融豆" class="rongdou-icon" />{{ orderDetail.totalRongdou }}</span>
</span>
</div>
</div>
</div>
</div>
@@ -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 {

444
src/views/Pay.vue
View File

@@ -64,66 +64,36 @@
</div>
</div>
<!-- 订单商品信息 -->
<div class="order-items-section">
<div class="section-header">
<span class="title">订单商品</span>
</div>
<div class="items-list" v-if="paymentData.items && paymentData.items.length > 0">
<div class="item-card" v-for="item in paymentData.items" :key="item.id">
<div class="item-image">
<img :src="item.image || '/default-product.png'" :alt="item.name" />
</div>
<div class="item-info">
<div class="item-name">{{ item.name }}</div>
<div class="item-specs" v-if="item.specs">{{ item.specs }}</div>
<div class="item-price-quantity">
<span class="price">{{ item.points }}积分</span>
<span class="quantity">x{{ item.quantity }}</span>
</div>
</div>
<div class="item-total">
{{ item.points * item.quantity }}积分
</div>
</div>
</div>
<div class="no-items" v-else>
<p>暂无商品信息</p>
</div>
</div>
<!-- 支付金额 -->
<div class="amount-section">
<h3 class="section-title">支付</h3>
<div class="amount-display">
<div class="total-amount-large">
<!-- 根据支付方式显示对应图标 -->
<template v-if="selectedPaymentMethod === 'beans'">
<img src="/imgs/profile/融豆.png" alt="融豆" class="currency-icon" />
<!-- 根据商品价格动态显示支付格式 -->
<template v-if="paymentData.pointsAmount > 0 && paymentData.beansAmount > 0">
<!-- 积分+融豆混合支付 -->
<div class="currency-icon-group">
<div class="mixed-payment-item">
<el-icon class="currency-icon-el"><Coin /></el-icon>
<span class="mixed-amount">{{ paymentData.pointsAmount }}</span>
</div>
<span class="plus-sign-small">+</span>
<div class="mixed-payment-item">
<img src="/imgs/profile/融豆.png" alt="融豆" class="currency-icon" />
<span class="mixed-amount">{{ paymentData.beansAmount }}</span>
</div>
</div>
</template>
<template v-else-if="selectedPaymentMethod === 'points'">
<template v-else-if="paymentData.pointsAmount === 0 && paymentData.beansAmount > 0">
<!-- 仅融豆支付 -->
<img src="/imgs/profile/融豆.png" alt="融豆" class="currency-icon" />
<span class="amount-number">{{ paymentData.beansAmount }}</span>
</template>
<template v-else-if="paymentData.beansAmount === 0 && paymentData.pointsAmount > 0">
<!-- 仅积分支付 -->
<el-icon class="currency-icon-el"><Coin /></el-icon>
<span class="amount-number">{{ paymentData.pointsAmount }}</span>
</template>
<template v-else-if="selectedPaymentMethod === 'mixed'">
<div class="currency-icon-group">
<div class="mixed-payment-item">
<el-icon class="currency-icon-el"><Coin /></el-icon>
<span class="mixed-amount">{{ paymentData.pointsAmount || 0 }}</span>
</div>
<span class="plus-sign-small">+</span>
<div class="mixed-payment-item">
<img src="/imgs/profile/融豆.png" alt="融豆" class="currency-icon" />
<span class="mixed-amount">{{ paymentData.beansAmount || 0 }}</span>
</div>
</div>
</template>
<template v-else>
<!-- 默认显示融豆图标 -->
<img src="/imgs/profile/融豆.png" alt="融豆" class="currency-icon" />
</template>
<span class="amount-number" v-if="selectedPaymentMethod !== 'mixed'">{{ paymentData.totalAmount || 0 }}</span>
</div>
<div class="amount-breakdown" v-if="paymentData.pointsAmount > 0 || paymentData.beansAmount > 0">
<div v-if="paymentData.pointsAmount > 0" class="breakdown-item">
@@ -158,7 +128,7 @@
</div>
<div class="item-price">
<el-icon><Coin /></el-icon>
<span>{{ item.points || item.price }}</span>
<span>{{ item.points }}</span>
</div>
</div>
<div class="item-quantity">
@@ -172,7 +142,9 @@
<div class="payment-method-section">
<h3 class="section-title">支付方式</h3>
<div class="payment-options">
<!-- 仅融豆支付选项 -->
<div
v-if="paymentData.pointsAmount === 0 && paymentData.beansAmount > 0"
class="payment-option"
:class="{
active: selectedPaymentMethod === 'beans',
@@ -191,7 +163,9 @@
<el-icon class="check-icon" v-if="selectedPaymentMethod === 'beans'"><Check /></el-icon>
</div>
<!-- 仅积分支付选项 -->
<div
v-if="paymentData.beansAmount === 0 && paymentData.pointsAmount > 0"
class="payment-option"
:class="{
active: selectedPaymentMethod === 'points',
@@ -210,7 +184,9 @@
<el-icon class="check-icon" v-if="selectedPaymentMethod === 'points'"><Check /></el-icon>
</div>
<!-- 积分+融豆混合支付选项 -->
<div
v-if="paymentData.pointsAmount > 0 && paymentData.beansAmount > 0"
class="payment-option"
:class="{
active: selectedPaymentMethod === 'mixed',
@@ -227,7 +203,7 @@
<div class="payment-name">积分+融豆</div>
<div class="payment-desc">
<span v-if="isPaymentMethodAvailable('mixed')">使用积分和融豆组合支付</span>
<span v-else class="insufficient-balance">余额不足（当前：{{ userBalance.points + userBalance.beans }}）</span>
<span v-else class="insufficient-balance">余额不足（当前：融豆{{ userBalance.beans }} + 积分{{ userBalance.points }}）</span>
</div>
</div>
<el-icon class="check-icon" v-if="selectedPaymentMethod === 'mixed'"><Check /></el-icon>
@@ -241,31 +217,31 @@
<div class="payment-summary">
<div class="total-amount">
<span>实付：</span>
<!-- 根据支付方式显示对应图标 -->
<template v-if="selectedPaymentMethod === 'beans'">
<img src="/imgs/profile/融豆.png" alt="融豆" class="amount-icon" />
<!-- 根据商品价格动态显示实付格式 -->
<template v-if="paymentData.pointsAmount > 0 && paymentData.beansAmount > 0">
<!-- 积分+融豆混合支付 -->
<div class="amount-icon-group">
<div class="mixed-payment-item-small">
<el-icon class="amount-icon-el"><Coin /></el-icon>
<span class="mixed-amount-small">{{ paymentData.pointsAmount }}</span>
</div>
<span class="plus-sign-small">+</span>
<div class="mixed-payment-item-small">
<img src="/imgs/profile/融豆.png" alt="融豆" class="amount-icon" />
<span class="mixed-amount-small">{{ paymentData.beansAmount }}</span>
</div>
</div>
</template>
<template v-else-if="selectedPaymentMethod === 'points'">
<template v-else-if="paymentData.pointsAmount === 0 && paymentData.beansAmount > 0">
<!-- 仅融豆支付 -->
<img src="/imgs/profile/融豆.png" alt="融豆" class="amount-icon" />
<span class="amount">{{ paymentData.beansAmount }}</span>
</template>
<template v-else-if="paymentData.beansAmount === 0 && paymentData.pointsAmount > 0">
<!-- 仅积分支付 -->
<el-icon class="amount-icon-el"><Coin /></el-icon>
<span class="amount">{{ paymentData.pointsAmount }}</span>
</template>
<template v-else-if="selectedPaymentMethod === 'mixed'">
<div class="amount-icon-group">
<div class="mixed-payment-item-small">
<el-icon class="amount-icon-el"><Coin /></el-icon>
<span class="mixed-amount-small">{{ paymentData.pointsAmount || 0 }}</span>
</div>
<span class="plus-sign-small">+</span>
<div class="mixed-payment-item-small">
<img src="/imgs/profile/融豆.png" alt="融豆" class="amount-icon" />
<span class="mixed-amount-small">{{ paymentData.beansAmount || 0 }}</span>
</div>
</div>
</template>
<template v-else>
<!-- 默认显示融豆图标 -->
<img src="/imgs/profile/融豆.png" alt="融豆" class="amount-icon" />
</template>
<span class="amount" v-if="selectedPaymentMethod !== 'mixed'">{{ paymentData.totalAmount || 0 }}</span>
</div>
</div>
<el-button
@@ -273,10 +249,10 @@
size="large"
class="pay-button"
@click="confirmPayment"
:disabled="timeLeft <= 0 || paying || !selectedPaymentMethod"
:disabled="paying || !selectedPaymentMethod"
:loading="paying"
>
{{ timeLeft <= 0 ? '支付超时' : paying ? '支付中...' : '确认支付' }}
{{ paying ? '支付中...' : '确认支付' }}
</el-button>
</div>
</div>
@@ -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;

151
src/views/PayLoading.vue
View File

@@ -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>

67
src/views/ProductDetail.vue
View File

@@ -153,14 +153,6 @@
>
加入购物车
</el-button>
<el-button
type="primary"
size="large"
@click="buyNow"
:disabled="product.stock === 0 || totalPoints > userPoints"
>
{{ product.stock === 0 ? '缺货' : totalPoints > userPoints ? '积分不足' : '立即兑换' }}
</el-button>
</div>
<!-- 商品评价 -->
@@ -247,6 +239,7 @@ import {
Loading
} from '@element-plus/icons-vue'
import api from '@/utils/api'
import { getImageUrl } from '@/config'
import { watch } from 'vue'
@@ -290,8 +283,24 @@ const getProductDetail = async () => {
console.log(recommendedRes,'recommendedRes');
product.value = productRes.data.data.product
// 处理商品图片路径
if (product.value.image) {
product.value.image = getImageUrl(product.value.image)
}
if (product.value.images && Array.isArray(product.value.images)) {
product.value.images = product.value.images.map(img => getImageUrl(img))
}
reviews.value = reviewsRes.data.data.reviews || []
recommendedProducts.value = recommendedRes.data.data.products || []
// 处理推荐商品图片路径
recommendedProducts.value.forEach(item => {
if (item.image) {
item.image = getImageUrl(item.image)
}
})
} catch (error) {
ElMessage.error('获取商品详情失败')
router.go(-1)
@@ -359,49 +368,7 @@ const addToCart = async () => {
// 购物车数据同步和结算方法已移除
const buyNow = async () => {
if (!product.value) {
ElMessage.error('商品信息加载中，请稍后再试')
return
}
if (product.value.stock === 0) {
ElMessage.error('商品已售罄')
return
}
try {
// 先将商品添加到购物车
const cartItem = {
productId: product.value.id,
quantity: quantity.value,
categoryId: selectedCategory.value?.id || null,
sizeId: selectedSize.value?.id || null,
points: product.value.points,
name: product.value.name,
image: product.value.images?.[0] || '',
stock: product.value.stock
}
const response = await api.post('/cart/add', cartItem)
if (response.data.success) {
const cartId = response.data.data.cartId
// 跳转到支付页面
router.push({
path: '/pay',
query: {
cartId: cartId
}
})
} else {
throw new Error(response.data.message || '添加到购物车失败')
}
} catch (error) {
ElMessage.error(error.message || '操作失败，请重试')
}
}
const goToProduct = (productId) => {
router.replace(`/product/${productId}`)

35
src/views/ProductSummary.vue
View File

@@ -87,6 +87,8 @@ import { useRoute, useRouter } from 'vue-router'
import {ElMessage} from "element-plus";
import {Bottom, ShoppingCart} from "@element-plus/icons-vue";
import { getImageUrl } from '@/config'
const products = ref([])
const firstProduct = ref([])
const productDetail = ref([])
@@ -125,6 +127,13 @@ const getProducts = async () => {
console.error('无法解析的商品数据格式:', data)
}
// 处理商品图片路径
products.value.forEach(product => {
if (product.image) {
product.image = getImageUrl(product.image)
}
})
console.log('解析后的商品数据:', products.value)
// 预加载所有商品详情
@@ -146,6 +155,14 @@ const getFirstProduct = async () => {
console.log(productRes,'productRes');
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))
}
} catch (error) {
ElMessage.error('获取商品详情失败')
console.log(error)
@@ -160,8 +177,17 @@ const getProductDetail = async (productId) => {
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))
}
// 缓存商品详情
productDetailsCache.value[productId] = response.data.data.product
productDetailsCache.value[productId] = productDetail.value
} else {
console.error('无法解析商品详情数据:', response.data)
ElMessage.error('获取商品详情失败')
@@ -200,6 +226,13 @@ 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))
}
newCache[result.id] = result.product
}
})

28
src/views/Shop.vue
View File

@@ -180,6 +180,7 @@ import {
} from '@element-plus/icons-vue'
import api from '@/utils/api'
import { debounce } from 'lodash-es'
import { getImageUrl } from '@/config'
const router = useRouter()
const route = useRoute()
@@ -305,9 +306,22 @@ const getProducts = async (isLoadMore = false) => {
console.log(data,'response');
if (isLoadMore) {
products.value.push(...data.data.products)
const newProducts = data.data.products
// 处理新加载商品图片路径
newProducts.forEach(product => {
if (product.image) {
product.image = getImageUrl(product.image)
}
})
products.value.push(...newProducts)
} else {
products.value = data.data.products
// 处理商品图片路径
products.value.forEach(product => {
if (product.image) {
product.image = getImageUrl(product.image)
}
})
}
hasMore.value = data.data.hasMore
@@ -345,6 +359,12 @@ const getHotProducts = async () => {
try {
const {data} = await api.get('/products/hot')
hotProducts.value = data.data.products
// 处理热销商品图片路径
hotProducts.value.forEach(product => {
if (product.image) {
product.image = getImageUrl(product.image)
}
})
} catch (error) {
console.log(error)
} finally {
@@ -357,6 +377,12 @@ const getCheapProducts = async () => {
try {
const {data} = await api.get('/products/cheap')
cheapProducts.value = data.data.products
// 处理秒杀商品图片路径
cheapProducts.value.forEach(product => {
if (product.image) {
product.image = getImageUrl(product.image)
}
})
} catch (error) {
console.log(error)
} finally {