angelo
/
web-base-h5
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(pay/index): 充值页面添加快捷充值按钮

This commit is contained in:
woody 2025-07-11 14:56:28 +08:00
parent a16b7d70c2
commit 073775840b
3 changed files with 215 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

153
components/QuickRechargePanel.vue Normal file
View File

@ -0,0 +1,153 @@
<template>
<view class="quick-recharge-panel">
<view class="panel-title">请选择充值金额</view>
<view class="amount-grid">
<view
v-for="(amount, index) in amounts"
:key="index"
class="amount-item"
:class="{ selected: selectedIndex === index }"
@click="selectAmount(amount, index)"
>
<view class="amount-value">
<text class="amount-number">{{ formatAmount(amount) }}</text>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
name: 'QuickRechargePanel',
props: {
// 预设金额数组
amounts: {
type: Array,
default: () => [100, 200, 500, 1000, 2000, 5000],
},
// 货币符号
currencySymbol: {
type: String,
default: '',
},
// 默认选中的索引
defaultSelected: {
type: Number,
default: -1,
},
},
data() {
return {
selectedIndex: this.defaultSelected,
}
},
methods: {
selectAmount(amount, index) {
this.selectedIndex = index
this.$emit('amount-selected', {
amount,
index,
})
},
// 清空选中状态
clear() {
this.selectedIndex = -1
},
// 格式化金额显示千分位
formatAmount(amount) {
return amount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
},
},
}
</script>
<style lang="scss" scoped>
.quick-recharge-panel {
margin-top: 20rpx;
padding: 20rpx;
background: #fff;
border-radius: 20rpx;
box-shadow: 0px 2px 20rpx 0px rgba(204, 204, 204, 0.3);
}
.panel-title {
font-size: 28rpx;
font-weight: 600;
color: #333333;
margin-bottom: 30rpx;
text-align: center;
}
.amount-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20rpx;
}
.amount-item {
position: relative;
padding: 24rpx 10rpx;
background: #f8f9fa;
border-radius: 16rpx;
text-align: center;
transition: all 0.3s ease;
cursor: pointer;
border: 2rpx solid transparent;
&:hover {
transform: translateY(-2rpx);
box-shadow: 0px 4px 20rpx 0px rgba(0, 91, 172, 0.15);
}
&.selected {
background: linear-gradient(135deg, #005bac 0%, #0070d4 100%);
color: #fff;
border-color: #005bac;
box-shadow: 0px 4px 20rpx 0px rgba(0, 91, 172, 0.3);
.amount-value {
color: #fff;
}
}
&:active {
transform: translateY(0);
}
}
.amount-value {
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
color: #333333;
}
.currency-symbol {
font-size: 24rpx;
margin-right: 4rpx;
opacity: 0.8;
}
.amount-number {
font-size: 52rpx;
font-weight: 700;
letter-spacing: 2rpx;
}
// 响应式设计
@media (max-width: 375px) {
.amount-grid {
grid-template-columns: repeat(3, 1fr);
}
.amount-item {
padding: 25rpx 15rpx;
}
.amount-number {
font-size: 40rpx;
}
}
</style>

2
config/request.js
View File

@ -19,7 +19,7 @@ module.exports = vm => {
//#ifdef DEV_SERVER
console.log('DEV_SERVER')
config.baseURL = 'http://t-app.beida666.com/prod-api'
config.baseURL = 'http://192.168.0.86:8080'
//#endif
//#ifdef QA_SERVER

88
pages/pay/index.vue
View File

@ -1,11 +1,21 @@
<template>
<view class="content">
<view class="index_header"> </view>
<view class="contxt">
<!-- 充值 -->
<template v-if="isRecharge">
<div class="tit4">{{ '充值金额' }}</div>
<u-input class="czinputbox" v-model="rechargeAmount"></u-input>
<div class="tit4">充值金额</div>
<QuickRechargePanel
ref="quickRechargePanel"
:amounts="quickAmounts"
@amount-selected="onAmountSelected"
style="margin-bottom: 20rpx"
/>
<u-input
class="recharge-input"
fontSize="34"
v-model="rechargeAmount"
placeholder="或输入自定义金额"
></u-input>
</template>
<template v-else>
<view class="tit">{{ '待支付金额' }}</view>
@ -184,8 +194,8 @@
</view>
<u-radio-group v-model="whatPay">
<u-radio
activeColor="red"
size="14"
activeColor="#005BAC"
size="18"
label=""
:name="PAY_TYPE.BAO_FU_WECHAT"
>
@ -202,8 +212,8 @@
</view>
<u-radio-group v-model="whatPay">
<u-radio
activeColor="red"
size="14"
activeColor="#005BAC"
size="18"
label=""
:name="PAY_TYPE.BAO_FU_WECHAT_SCAN"
>
@ -220,8 +230,8 @@
</view>
<u-radio-group v-model="whatPay">
<u-radio
activeColor="red"
size="14"
activeColor="#005BAC"
size="18"
label=""
:name="PAY_TYPE.HUI_FU_WECHAT"
>
@ -239,8 +249,8 @@
</view>
<u-radio-group v-model="whatPay">
<u-radio
activeColor="red"
size="14"
activeColor="#005BAC"
size="18"
label=""
:name="PAY_TYPE.WECHAT_PAY"
>
@ -255,8 +265,8 @@
</view>
<u-radio-group v-model="whatPay">
<u-radio
activeColor="red"
size="14"
activeColor="#005BAC"
size="18"
label=""
:name="PAY_TYPE.ALI_PAY"
>
@ -285,8 +295,8 @@
<u-radio-group v-model="whatPay">
<u-radio
activeColor="red"
size="14"
activeColor="#005BAC"
size="18"
label=""
:name="PAY_TYPE.HUI_FU_BANK_CARD + index"
>
@ -309,8 +319,8 @@
</view>
<u-radio-group v-model="whatPay">
<u-radio
activeColor="red"
size="14"
activeColor="#005BAC"
size="18"
label=""
:name="PAY_TYPE.TONG_LIAN_WECHAT"
>
@ -337,8 +347,8 @@
</view>
<u-radio-group v-model="whatPay">
<u-radio
activeColor="red"
size="14"
activeColor="#005BAC"
size="18"
label=""
:name="PAY_TYPE.JING_DONG_BANK_CARD + index"
>
@ -361,8 +371,8 @@
</view>
<u-radio-group v-model="whatPay">
<u-radio
activeColor="red"
size="14"
activeColor="#005BAC"
size="18"
label=""
:name="PAY_TYPE.JING_DONG_H5"
>
@ -389,8 +399,8 @@
</view>
<u-radio-group v-model="whatPay">
<u-radio
activeColor="red"
size="14"
activeColor="#005BAC"
size="18"
label=""
:name="PAY_TYPE.TONG_LIAN_BANK_CARD + index"
>
@ -779,6 +789,7 @@
import * as api from '@/config/pay.js'
import QRCode from 'qrcodejs2'
import successDialog from '@/components/successDialog.vue'
import QuickRechargePanel from '@/components/QuickRechargePanel.vue'
import * as act from '@/config/activity.js'
import {
PAY_REDIRECT_URL,
@ -790,6 +801,7 @@ var payStatus
export default {
components: {
successDialog,
QuickRechargePanel,
},
data() {
return {
@ -832,6 +844,8 @@ export default {
qrcodeimg: '',
onlinePay: true,
unBindCode: '',
quickAmounts: [330, 990, 4950, 10000, 30000, 50000], // 快速充值金额选项
isQuickSelected: false, // 标记是否是快速选择触发的金额变化
}
},
computed: {
@ -842,6 +856,16 @@ export default {
return false
},
},
watch: {
rechargeAmount(newVal, oldVal) {
// 当充值金额变化时，如果不是快速选择触发的，则清空快速选择状态
if (!this.isQuickSelected && newVal && this.$refs.quickRechargePanel) {
this.$refs.quickRechargePanel.clear()
}
// 重置标志位
this.isQuickSelected = false
},
},
async onLoad(options) {
this.paramsPost = JSON.parse(options.paramsPost || '{}')
await this.getPayConfig()
@ -917,6 +941,11 @@ export default {
stringToBoolean(str) {
return str === 'true' ? true : false
},
// 处理快速充值金额选择
onAmountSelected(data) {
this.isQuickSelected = true // 标记这是快速选择触发的
this.rechargeAmount = data.amount.toString()
},
//查询充值抽奖次数
getLuckdrawDetail() {
// 抽奖支付处理（查询订单支付信息以及显示等）
@ -1503,8 +1532,8 @@ export default {
}
.contxt {
margin-top: -220rpx;
padding: 0 26rpx;
// margin-top: -220rpx;
padding: 40rpx 26rpx 0;
padding-bottom: 300rpx;
}
@ -1560,7 +1589,7 @@ export default {
.pf {
display: flex;
align-items: center;
font-size: 12px;
font-size: 28rpx;
font-family:
PingFang SC-Semibold,
PingFang SC;
@ -1600,7 +1629,7 @@ export default {
.flex_ac_i {
display: flex;
align-items: center;
font-size: 12px;
font-size: 28rpx;
font-family:
PingFang SC-Regular,
PingFang SC;
@ -1768,4 +1797,9 @@ export default {
justify-content: space-between;
padding-bottom: 15px;
}
.recharge-input {
::v-deep .uni-input-placeholder {
font-size: 48rpx;
}
}
</style>