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:
dzl
2025-09-01 13:39:34 +08:00
parent ccf6d1b016
commit ed3116773e
3 changed files with 208 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

167
src/views/Pay.vue
View File

@@ -69,8 +69,8 @@
<h3 class="section-title">支付</h3>
<div class="amount-display">
<div class="total-amount-large">
<!-- 根据商品价格动态显示支付格式 -->
<template v-if="paymentData.pointsAmount > 0 && paymentData.beansAmount > 0">
<!-- 根据选择的支付方式动态显示支付格式 -->
<template v-if="selectedPaymentMethod === 'mixed' && paymentData.pointsAmount > 0 && paymentData.beansAmount > 0">
<!-- 积分+融豆混合支付 -->
<div class="currency-icon-group">
<div class="mixed-payment-item">
@@ -84,18 +84,22 @@
</div>
</div>
</template>
<template v-else-if="paymentData.pointsAmount === 0 && paymentData.beansAmount > 0">
<template v-else-if="selectedPaymentMethod === 'beans' && 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">
<template v-else-if="selectedPaymentMethod === 'points' && paymentData.pointsAmount > 0">
<!-- 仅积分支付 -->
<el-icon class="currency-icon-el"><Coin /></el-icon>
<span class="amount-number">{{ paymentData.pointsAmount }}</span>
</template>
<template v-else>
<!-- 未选择支付方式时的默认显示 -->
<span class="amount-number">请选择支付方式</span>
</template>
</div>
<div class="amount-breakdown" v-if="paymentData.pointsAmount > 0 || paymentData.beansAmount > 0">
<div class="amount-breakdown" v-if="selectedPaymentMethod && (paymentData.pointsAmount > 0 || paymentData.beansAmount > 0)">
<div v-if="paymentData.pointsAmount > 0" class="breakdown-item">
<el-icon><Coin /></el-icon>
<span>积分：{{ paymentData.pointsAmount }}</span>
@@ -142,9 +146,9 @@
<div class="payment-method-section">
<h3 class="section-title">支付方式</h3>
<div class="payment-options">
<!-- 仅融豆支付选项 -->
<!-- 融豆支付选项 -->
<div
v-if="paymentData.pointsAmount === 0 && paymentData.beansAmount > 0"
v-if="shouldShowPaymentMethod('beans')"
class="payment-option"
:class="{
active: selectedPaymentMethod === 'beans',
@@ -163,9 +167,9 @@
<el-icon class="check-icon" v-if="selectedPaymentMethod === 'beans'"><Check /></el-icon>
</div>
<!-- 仅积分支付选项 -->
<!-- 积分支付选项 -->
<div
v-if="paymentData.beansAmount === 0 && paymentData.pointsAmount > 0"
v-if="shouldShowPaymentMethod('points')"
class="payment-option"
:class="{
active: selectedPaymentMethod === 'points',
@@ -186,7 +190,7 @@
<!-- 积分+融豆混合支付选项 -->
<div
v-if="paymentData.pointsAmount > 0 && paymentData.beansAmount > 0"
v-if="shouldShowPaymentMethod('mixed')"
class="payment-option"
:class="{
active: selectedPaymentMethod === 'mixed',
@@ -217,8 +221,8 @@
<div class="payment-summary">
<div class="total-amount">
<span>实付：</span>
<!-- 根据商品价格动态显示实付格式 -->
<template v-if="paymentData.pointsAmount > 0 && paymentData.beansAmount > 0">
<!-- 根据选择的支付方式动态显示实付格式 -->
<template v-if="selectedPaymentMethod === 'mixed' && paymentData.pointsAmount > 0 && paymentData.beansAmount > 0">
<!-- 积分+融豆混合支付 -->
<div class="amount-icon-group">
<div class="mixed-payment-item-small">
@@ -232,16 +236,20 @@
</div>
</div>
</template>
<template v-else-if="paymentData.pointsAmount === 0 && paymentData.beansAmount > 0">
<template v-else-if="selectedPaymentMethod === 'beans' && 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">
<template v-else-if="selectedPaymentMethod === 'points' && paymentData.pointsAmount > 0">
<!-- 仅积分支付 -->
<el-icon class="amount-icon-el"><Coin /></el-icon>
<span class="amount">{{ paymentData.pointsAmount }}</span>
</template>
<template v-else>
<!-- 未选择支付方式时的默认显示 -->
<span class="amount">-</span>
</template>
</div>
</div>
<el-button
@@ -299,44 +307,20 @@ 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
}
// 仅基于商品的points_price价值总和计算支付总额
const totalPointsPrice = paymentData.value.items.reduce((sum, item) => sum + (item.points_price * item.quantity), 0)
const EXCHANGE_RATE = 10000 // 1融豆 = 10000积分
// 检查支付方式是否可用
if (!isPaymentMethodAvailable(method)) {
let message = ''
if (method === 'beans') {
if (totalBeansPrice === 0) {
message = '该订单不支持融豆支付'
} else {
message = `融豆余额不足，当前余额：${userBalance.value.beans}，需要：${totalBeansPrice}`
}
const requiredBeans = Math.ceil(totalPointsPrice / EXCHANGE_RATE)
message = `融豆余额不足，当前余额：${userBalance.value.beans}，需要：${requiredBeans}`
} else if (method === 'points') {
if (totalPointsPrice === 0) {
message = '该订单不支持积分支付'
} else {
message = `积分余额不足，当前余额：${userBalance.value.points}，需要：${totalPointsPrice}`
}
message = `积分余额不足，当前余额：${userBalance.value.points}，需要：${totalPointsPrice}`
} else if (method === 'mixed') {
if (totalPointsPrice === 0 && totalBeansPrice === 0) {
message = '该订单不支持混合支付'
} else {
message = `余额不足，当前余额：融豆${userBalance.value.beans}，积分${userBalance.value.points}，需要：融豆${totalBeansPrice}，积分${totalPointsPrice}`
}
message = `余额不足，无法完成支付`
}
ElMessage.warning(message)
return
@@ -346,17 +330,27 @@ const selectPaymentMethod = async (method) => {
// 根据选择的支付方式更新显示的金额
if (method === 'beans') {
paymentData.value.totalAmount = totalBeansPrice
// 融豆支付：按积分/10000计算所需融豆
const requiredBeans = Math.ceil(totalPointsPrice / EXCHANGE_RATE)
paymentData.value.totalAmount = totalPointsPrice
paymentData.value.pointsAmount = 0
paymentData.value.beansAmount = totalBeansPrice
paymentData.value.beansAmount = requiredBeans
} 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
// 积分+融豆支付：积分必须是10000的倍数，按（总积分-当前积分）/10000计算所需融豆
let availablePoints = Math.min(userBalance.value.points, totalPointsPrice)
// 确保积分是10000的倍数
availablePoints = Math.floor(availablePoints / 10000) * 10000
const remainingPoints = totalPointsPrice - availablePoints
const requiredBeans = Math.ceil(remainingPoints / EXCHANGE_RATE)
paymentData.value.totalAmount = totalPointsPrice
paymentData.value.pointsAmount = availablePoints
paymentData.value.beansAmount = requiredBeans
}
}
@@ -427,31 +421,56 @@ const fetchUserBalance = async () => {
// 检查支付方式是否可用
const isPaymentMethodAvailable = (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)
// 仅基于商品的points_price价值总和计算
const totalPointsPrice = paymentData.value.items.reduce((sum, item) => sum + (item.points_price * item.quantity), 0)
const EXCHANGE_RATE = 10000 // 1融豆 = 10000积分
switch (method) {
case 'beans':
// 如果所有商品的融豆价格总和为0，则不能选择融豆支付
if (totalBeansPrice === 0) return false
return userBalance.value.beans >= totalBeansPrice
// 融豆支付：检查总积分是否大于等于10000且融豆是否足够支付总积分价值
if (totalPointsPrice < 10000) {
return false
}
const requiredBeans = Math.ceil(totalPointsPrice / EXCHANGE_RATE)
return userBalance.value.beans >= requiredBeans
case 'points':
// 如果所有商品的积分价格总和为0，则不能选择积分支付
if (totalPointsPrice === 0) return false
// 积分支付：检查积分是否足够
return userBalance.value.points >= totalPointsPrice
case 'mixed':
// 如果积分价格和融豆价格都为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
// 混合支付：检查积分+融豆换算后是否足够
const totalUserBalanceInPoints = userBalance.value.points + (userBalance.value.beans * EXCHANGE_RATE)
return totalUserBalanceInPoints >= totalPointsPrice
default:
return true
}
}
// 检查支付方式是否应该显示
const shouldShowPaymentMethod = (method) => {
// 仅基于商品的points_price价值总和计算
const totalPointsPrice = paymentData.value.items.reduce((sum, item) => sum + (item.points_price * item.quantity), 0)
const EXCHANGE_RATE = 10000 // 1融豆 = 10000积分
switch (method) {
case 'beans':
// 当总积分大于等于10000且用户融豆足够支付总积分价值时显示融豆支付选项
if (totalPointsPrice < 10000) {
return false
}
const requiredBeans = Math.ceil(totalPointsPrice / EXCHANGE_RATE)
return totalPointsPrice > 0 && userBalance.value.beans >= requiredBeans
case 'points':
// 当用户积分足够支付时显示积分支付选项
return totalPointsPrice > 0 && userBalance.value.points >= totalPointsPrice
case 'mixed':
// 当用户积分不够但积分+融豆换算足够时显示混合支付选项
const pointsNotEnough = totalPointsPrice > 0 && userBalance.value.points < totalPointsPrice
return pointsNotEnough && isPaymentMethodAvailable('mixed')
default:
return false
}
}
const fetchPaymentData = async () => {
try {
loading.value = true
@@ -479,6 +498,7 @@ const fetchPaymentData = async () => {
name: item.product_name,
image: item.image_url,
points: item.points_price,
points_price: item.points_price, // 添加points_price字段
price: item.price,
rongdouPrice: item.rongdou_price,
quantity: item.quantity,
@@ -499,14 +519,15 @@ const fetchPaymentData = async () => {
items: items
}
// 根据价格自动选择支付方式
if (totalPointsPrice === 0 && totalBeansPrice > 0) {
// 根据用户余额自动选择支付方式
if (shouldShowPaymentMethod('beans')) {
await selectPaymentMethod('beans')
} else if (totalBeansPrice === 0 && totalPointsPrice > 0) {
} else if (shouldShowPaymentMethod('points')) {
await selectPaymentMethod('points')
} else if (totalPointsPrice > 0 && totalBeansPrice > 0) {
} else if (shouldShowPaymentMethod('mixed')) {
await selectPaymentMethod('mixed')
}
// 如果没有可用的支付方式，不自动选择，让用户看到所有选项都不可用
} else {
throw new Error(response.data.message || '获取订单信息失败')
}
@@ -520,7 +541,7 @@ const fetchPaymentData = async () => {
const handleGoBack = async () => {
try {
await ElMessageBox.confirm(
'确认要取消订单吗？取消后将无法恢复。',
'确认要取消订单吗？取消后可以在个人中心-我的订单里查看。',
'取消订单',
{
confirmButtonText: '确认取消',
@@ -577,13 +598,17 @@ const confirmPayment = async () => {
const orderData = {
orderId: paymentData.value.orderId,
addressId: selectedAddress.value.id,
paymentMethod: selectedPaymentMethod.value
paymentMethod: selectedPaymentMethod.value,
pointsAmount: paymentData.value.pointsAmount,
beansAmount: paymentData.value.beansAmount
}
// 向后端发送订单支付请求
const response = await api.post('/orders/confirm-payment', orderData)
console.log(orderData)
if (response.data.success) {
console.log(orderData)
ElMessage.success('订单创建成功！')
// 跳转到PayLoading页面，传递订单ID
@@ -594,9 +619,11 @@ const confirmPayment = async () => {
}
})
} else {
console.log(orderData)
throw new Error(response.data.message || '创建订单失败')
}
} catch (error) {
console.log(orderData)
if (error !== 'cancel') {
ElMessage.error(error.message || '创建订单失败，请重试')
}