@@ -26,8 +26,8 @@
< / div >
< / div >
< / div >
< / div >
< ! - - 充值优惠 提示 - - >
< ! - - 充值提示 : 赠送开启时显示充值优惠 , 关闭时显示 API 商店充值 提示 - - >
< div class = "recharge-benefit-alert" >
< div class = "recharge-benefit-alert" v-if = "rechargeConfig.recharge_bonus_enabled" >
< el -alert
< el -alert
title = "充值优惠"
title = "充值优惠"
description = "充值满1000元即可享受商务洽谈优惠, 获得专属服务支持"
description = "充值满1000元即可享受商务洽谈优惠, 获得专属服务支持"
@@ -50,6 +50,28 @@
< / template >
< / template >
< / el-alert >
< / el-alert >
< / div >
< / div >
< div class = "recharge-benefit-alert" v-else-if = "rechargeConfig.api_store_recharge_tip" >
< el -alert
title = "API商店充值提示"
type = "info"
:closable = "false"
show -icon
>
< template # default >
< div class = "benefit-content" >
{ { rechargeConfig . api _store _recharge _tip } }
< el-button
type = "primary"
size = "small"
@click ="showBusinessConsultation = true"
class = "consultation-btn"
>
商务洽谈
< / el-button >
< / div >
< / template >
< / el-alert >
< / div >
<!-- 余额状态提示 -- >
<!-- 余额状态提示 -- >
< div v-if = "walletInfo.is_arrears" class="balance-alert arrears-alert" >
< div v-if = "walletInfo.is_arrears" class="balance-alert arrears-alert" >
@@ -163,21 +185,21 @@
< h4 class = "preset-title" > 选择充值金额 < / h4 >
< h4 class = "preset-title" > 选择充值金额 < / h4 >
< div class = "preset-amounts-grid" >
< div class = "preset-amounts-grid" >
< div
< div
v-for = "bonus in rechargeConfig.alipay_recharge_b onu s"
v-for = "item in p resetAmountOpti ons"
:key = "bonus .recharge_amount"
:key = "item .recharge_amount"
class = "preset-amount-card"
class = "preset-amount-card"
: class = "{ active: selectedPresetAmount === bonus .recharge_amount }"
: class = "{ active: selectedPresetAmount === item .recharge_amount }"
@click ="selectPresetAmount(bonus .recharge_amount)"
@click ="selectPresetAmount(item .recharge_amount)"
>
>
< div class = "preset-amount-main" >
< div class = "preset-amount-main" >
< div class = "preset-amount-value" > ¥ { { formatPrice ( bonus . recharge _amount ) } } < / div >
< div class = "preset-amount-value" > ¥ { { formatPrice ( item . recharge _amount ) } } < / div >
< div class = "preset-bonus-info" >
< div v-if = "rechargeConfig.recharge_bonus_enabled && item.bonus_amount > 0" class= "preset-bonus-info">
< span class = "bonus-label" > 赠送 < / span >
< span class = "bonus-label" > 赠送 < / span >
< span class = "bonus-amount" > ¥ { { formatPrice ( bonus . bonus _amount ) } } < / span >
< span class = "bonus-amount" > ¥ { { formatPrice ( item . bonus _amount ) } } < / span >
< / div >
< / div >
< / div >
< / div >
< div class = "preset-amount-total" >
< div class = "preset-amount-total" >
实到账 : ¥ { { formatPrice ( bonus . recharge _amount + bonus . bonus _amount ) } }
实到账 : ¥ { { formatPrice ( item . recharge _amount + ( rechargeConfig . recharge _bonus _enabled ? item . bonus _amount : 0 ) ) } }
< / div >
< / div >
< / div >
< / div >
@@ -189,7 +211,7 @@
>
>
< div class = "preset-amount-main" >
< div class = "preset-amount-main" >
< div class = "preset-amount-value" > 自定义金额 < / div >
< div class = "preset-amount-value" > 自定义金额 < / div >
< div class = "preset-bonus-info" >
< div v-if = "rechargeConfig.recharge_bonus_enabled" class= "preset-bonus-info">
< span class = "bonus-label" > 赠送 < / span >
< span class = "bonus-label" > 赠送 < / span >
< span class = "bonus-amount" > { { getCustomBonusText ( ) } } < / span >
< span class = "bonus-amount" > { { getCustomBonusText ( ) } } < / span >
< / div >
< / div >
@@ -219,8 +241,8 @@
< / el-input >
< / el-input >
< div class = "form-tip" > 最低充值金额 : ¥ { { rechargeConfig . min _amount } } , 最多支持两位小数 < / div >
< div class = "form-tip" > 最低充值金额 : ¥ { { rechargeConfig . min _amount } } , 最多支持两位小数 < / div >
<!-- 显示赠送信息 -- >
<!-- 赠送开启时 显示赠送信息 -- >
< div v-if = "wechatForm.amount && getCurrentBonusAmount() > 0" class="bonus-info" >
< div v-if = "rechargeConfig.recharge_bonus_enabled && wechatForm.amount && getCurrentBonusAmount() > 0" class="bonus-info" >
< el -alert
< el -alert
: title = "`充值 ¥${wechatForm.amount} 可享受赠送 ¥${formatPrice(getCurrentBonusAmount())}`"
: title = "`充值 ¥${wechatForm.amount} 可享受赠送 ¥${formatPrice(getCurrentBonusAmount())}`"
type = "success"
type = "success"
@@ -261,21 +283,21 @@
< h4 class = "preset-title" > 选择充值金额 < / h4 >
< h4 class = "preset-title" > 选择充值金额 < / h4 >
< div class = "preset-amounts-grid" >
< div class = "preset-amounts-grid" >
< div
< div
v-for = "bonus in rechargeConfig.alipay_recharge_b onu s"
v-for = "item in p resetAmountOpti ons"
:key = "bonus .recharge_amount"
:key = "item .recharge_amount"
class = "preset-amount-card"
class = "preset-amount-card"
: class = "{ active: selectedPresetAmount === bonus .recharge_amount }"
: class = "{ active: selectedPresetAmount === item .recharge_amount }"
@click ="selectPresetAmount(bonus .recharge_amount)"
@click ="selectPresetAmount(item .recharge_amount)"
>
>
< div class = "preset-amount-main" >
< div class = "preset-amount-main" >
< div class = "preset-amount-value" > ¥ { { formatPrice ( bonus . recharge _amount ) } } < / div >
< div class = "preset-amount-value" > ¥ { { formatPrice ( item . recharge _amount ) } } < / div >
< div class = "preset-bonus-info" >
< div v-if = "rechargeConfig.recharge_bonus_enabled && item.bonus_amount > 0" class= "preset-bonus-info">
< span class = "bonus-label" > 赠送 < / span >
< span class = "bonus-label" > 赠送 < / span >
< span class = "bonus-amount" > ¥ { { formatPrice ( bonus . bonus _amount ) } } < / span >
< span class = "bonus-amount" > ¥ { { formatPrice ( item . bonus _amount ) } } < / span >
< / div >
< / div >
< / div >
< / div >
< div class = "preset-amount-total" >
< div class = "preset-amount-total" >
实到账 : ¥ { { formatPrice ( bonus . recharge _amount + bonus . bonus _amount ) } }
实到账 : ¥ { { formatPrice ( item . recharge _amount + ( rechargeConfig . recharge _bonus _enabled ? item . bonus _amount : 0 ) ) } }
< / div >
< / div >
< / div >
< / div >
@@ -287,7 +309,7 @@
>
>
< div class = "preset-amount-main" >
< div class = "preset-amount-main" >
< div class = "preset-amount-value" > 自定义金额 < / div >
< div class = "preset-amount-value" > 自定义金额 < / div >
< div class = "preset-bonus-info" >
< div v-if = "rechargeConfig.recharge_bonus_enabled" class= "preset-bonus-info">
< span class = "bonus-label" > 赠送 < / span >
< span class = "bonus-label" > 赠送 < / span >
< span class = "bonus-amount" > { { getCustomBonusText ( ) } } < / span >
< span class = "bonus-amount" > { { getCustomBonusText ( ) } } < / span >
< / div >
< / div >
@@ -317,8 +339,8 @@
< / el-input >
< / el-input >
< div class = "form-tip" > 最低充值金额 : ¥ { { rechargeConfig . min _amount } } , 最多支持两位小数 < / div >
< div class = "form-tip" > 最低充值金额 : ¥ { { rechargeConfig . min _amount } } , 最多支持两位小数 < / div >
<!-- 显示赠送信息 -- >
<!-- 赠送开启时 显示赠送信息 -- >
< div v-if = "alipayForm.amount && getCurrentBonusAmount() > 0" class="bonus-info" >
< div v-if = "rechargeConfig.recharge_bonus_enabled && alipayForm.amount && getCurrentBonusAmount() > 0" class="bonus-info" >
< el -alert
< el -alert
: title = "`充值 ¥${alipayForm.amount} 可享受赠送 ¥${formatPrice(getCurrentBonusAmount())}`"
: title = "`充值 ¥${alipayForm.amount} 可享受赠送 ¥${formatPrice(getCurrentBonusAmount())}`"
type = "success"
type = "success"
@@ -427,6 +449,7 @@
< / template >
< / template >
< script setup >
< script setup >
import { computed } from 'vue'
import { financeApi } from '@/api'
import { financeApi } from '@/api'
import BusinessConsultationDialog from '@/components/common/BusinessConsultationDialog.vue'
import BusinessConsultationDialog from '@/components/common/BusinessConsultationDialog.vue'
import { useCertification } from '@/composables/useCertification'
import { useCertification } from '@/composables/useCertification'
@@ -468,13 +491,29 @@ const walletInfo = ref({
is _low _balance : false ,
is _low _balance : false ,
} )
} )
// 充值配置
// 充值配置(含赠送开关与 API 商店充值提示)
const rechargeConfig = ref ( {
const rechargeConfig = ref ( {
min _amount : '1.00' ,
min _amount : '1.00' ,
max _amount : '100000.00' ,
max _amount : '100000.00' ,
recharge _bonus _enabled : false ,
api _store _recharge _tip : '' ,
alipay _recharge _bonus : [ ]
alipay _recharge _bonus : [ ]
} )
} )
// 关闭赠送时的预设金额(仅展示金额,无赠送)
const PRESET _AMOUNTS _NO _BONUS = [ 1000 , 5000 , 10000 ]
// 预设金额选项:开启赠送用配置规则,关闭赠送用固定金额列表
const presetAmountOptions = computed ( ( ) => {
if ( rechargeConfig . value . recharge _bonus _enabled && rechargeConfig . value . alipay _recharge _bonus ? . length ) {
return rechargeConfig . value . alipay _recharge _bonus . map ( ( b ) => ( {
recharge _amount : b . recharge _amount ,
bonus _amount : b . bonus _amount ? ? 0
} ) )
}
return PRESET _AMOUNTS _NO _BONUS . map ( ( amount ) => ( { recharge _amount : amount , bonus _amount : 0 } ) )
} )
// 对公转账信息
// 对公转账信息
const transferInfo = ref ( {
const transferInfo = ref ( {
bankName : '中国银行股份有限公司海口美苑路支行' ,
bankName : '中国银行股份有限公司海口美苑路支行' ,
@@ -647,17 +686,21 @@ const loadRechargeConfig = async () => {
// 直接调用API, 不需要认证保护
// 直接调用API, 不需要认证保护
const response = await financeApi . getRechargeConfig ( )
const response = await financeApi . getRechargeConfig ( )
if ( response && response . data ) {
if ( response && response . data ) {
rechargeConfig . value = response . data || {
rechargeConfig . value = {
min _amount : '50.00' ,
... response . data ,
max _amount : '10000 0.00' ,
min _amount : response . data ? . min _amount ? ? '5 0.00' ,
alipay _recharge _bonus : [ ]
max _amount : response . data ? . max _amount ? ? '100000.00' ,
recharge _bonus _enabled : response . data ? . recharge _bonus _enabled ? ? false ,
api _store _recharge _tip : response . data ? . api _store _recharge _tip ? ? '' ,
alipay _recharge _bonus : response . data ? . alipay _recharge _bonus ? ? [ ]
}
}
// 设置默认选中的预设金额(选择第一个赠送规则 )
// 设置默认选中的预设金额:有赠送规则选第一条,否则选第一个预设金额(如 1000 )
if ( rechargeConfig . value . alipay _recharge _b onu s && rechargeConfig . value . alipay _recharge _b onu s . length > 0 ) {
const opti ons = p resetAmountOpti ons. value
const firstB onu s = rechargeConfig . value . alipay _recharge _bonus [ 0 ]
if ( opti ons && options . length > 0 ) {
selectedPresetAmount . value = firstB onu s. recharge _amount
const first = opti ons[ 0 ]
const amountStr = firstBonus . recharge _amount . toString ( )
selectedPresetAmount . value = first . recharge _amount
const amountStr = first . recharge _amount . toString ( )
alipayForm . amount = amountStr
alipayForm . amount = amountStr
wechatForm . amount = amountStr
wechatForm . amount = amountStr
}
}
@@ -734,16 +777,15 @@ const selectCustomAmount = () => {
wechatForm . amount = '' // 清空微信金额输入框
wechatForm . amount = '' // 清空微信金额输入框
}
}
// 根据充值金额获取赠送金额
// 根据充值金额获取赠送金额(关闭赠送时恒为 0)
const getBonusAmount = ( rechargeAmount ) => {
const getBonusAmount = ( rechargeAmount ) => {
if ( ! rechargeAmount || ! rechargeConfig . value . alipay _recharge _bonus ) {
if ( ! rechargeConfig . value . recharge _bonus _enabled || ! rechargeAmount || ! rechargeConfig . value . alipay _recharge _bonus ? . length ) {
return 0
return 0
}
}
const amount = parseFloat ( rechargeAmount )
const amount = parseFloat ( rechargeAmount )
const bonusRules = rechargeConfig . value . alipay _recharge _bonus
const bonusRules = rechargeConfig . value . alipay _recharge _bonus
// 按充值金额从高到低排序,找到第一个匹配的赠送规则
for ( let i = bonusRules . length - 1 ; i >= 0 ; i -- ) {
for ( let i = bonusRules . length - 1 ; i >= 0 ; i -- ) {
const rule = bonusRules [ i ]
const rule = bonusRules [ i ]
if ( amount >= rule . recharge _amount ) {
if ( amount >= rule . recharge _amount ) {
@@ -754,15 +796,14 @@ const getBonusAmount = (rechargeAmount) => {
return 0
return 0
}
}
// 获取当前预设金额的赠送金额
// 获取当前预设金额的赠送金额(关闭赠送时恒为 0)
const getCurrentBonusAmount = ( ) => {
const getCurrentBonusAmount = ( ) => {
if ( ! rechargeConfig . value . recharge _bonus _enabled ) return 0
if ( selectedPresetAmount . value === 'custom' ) {
if ( selectedPresetAmount . value === 'custom' ) {
// 根据当前选择的充值方式获取金额
const currentAmount = selectedMethod . value === 'wechat' ? wechatForm . amount : alipayForm . amount
const currentAmount = selectedMethod . value === 'wechat' ? wechatForm . amount : alipayForm . amount
return getBonusAmount ( currentAmount )
return getBonusAmount ( currentAmount )
}
}
const bonus = rechargeConfig . value . alipay _recharge _bonus ? . find (
const bonus = rechargeConfig . value . alipay _recharge _bonus . find (
( item ) => item . recharge _amount === selectedPresetAmount . value
( item ) => item . recharge _amount === selectedPresetAmount . value
)
)
return bonus ? parseFloat ( bonus . bonus _amount ) : 0
return bonus ? parseFloat ( bonus . bonus _amount ) : 0
@@ -770,26 +811,25 @@ const getCurrentBonusAmount = () => {
// 获取自定义金额的赠送文本
// 获取自定义金额的赠送文本
const getCustomBonusText = ( ) => {
const getCustomBonusText = ( ) => {
if ( ! rechargeConfig . value . recharge _bonus _enabled ) return '暂无'
if ( selectedPresetAmount . value === 'custom' ) {
if ( selectedPresetAmount . value === 'custom' ) {
return '根据实际充值金额计算'
return '根据实际充值金额计算'
}
}
return '0.00'
return '0.00'
}
}
// 获取自定义金额的总到账金额
// 获取自定义金额的总到账金额(关闭赠送时仅为本金)
const getCustomTotalAmount = ( ) => {
const getCustomTotalAmount = ( ) => {
if ( selectedPresetAmount . value === 'custom' ) {
if ( selectedPresetAmount . value === 'custom' ) {
// 根据当前选择的充值方式获取金额
const currentAmount = selectedMethod . value === 'wechat' ? wechatForm . amount : alipayForm . amount
const currentAmount = selectedMethod . value === 'wechat' ? wechatForm . amount : alipayForm . amount
const amount = parseFloat ( currentAmount || 0 )
const amount = parseFloat ( currentAmount || 0 )
const bonus = getBonusAmount ( amount )
const bonus = getBonusAmount ( amount )
return formatPrice ( amount + bonus )
return formatPrice ( amount + bonus )
}
}
const item = presetAmountOptions . value . find ( ( i ) => i . recharge _amount === selectedPresetAmount . value )
const bonus = rechargeConfig . value . alipay _recharge _bonus . find (
if ( ! item ) return '0.00'
( item ) => item . recharge _amount === selectedPresetAmount . value
const bonus = rechargeConfig . value . recharge _bonus _enabled ? item . bonus _amount : 0
)
return formatPrice ( parseFloat ( item . recharge _amount ) + parseFloat ( bonus ) )
return bonus ? formatPrice ( parseFloat ( bonus . recharge _amount ) + parseFloat ( bonus . bonus _amount ) ) : '0.00'
}
}
// 支付宝充值
// 支付宝充值