feat(quickRecharge): 快速充值代码迁移
This commit is contained in:
woody
parent
6188a58194
commit
4a27790023
|
|
@ -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>
|
||||
|
|
@ -104,8 +104,6 @@ export default {
|
|||
},
|
||||
created() {
|
||||
const userInfo = uni.getStorageSync('userInfo') || this.userInfo
|
||||
console.log(userInfo.memberSign, '...userInfo')
|
||||
console.log(MEMBER_SIGN.ZERO_LEVEL, '...MEMBER_SIGN')
|
||||
if (userInfo.memberSign == MEMBER_SIGN.ZERO_LEVEL) {
|
||||
this.upgrade.name = '会员专区'
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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="36"
|
||||
v-model="rechargeAmount"
|
||||
placeholder="或输入自定义金额"
|
||||
></u-input>
|
||||
</template>
|
||||
<template v-else>
|
||||
<view class="tit">{{ '待支付金额' }}</view>
|
||||
|
|
@ -686,6 +696,7 @@ import * as api from '@/config/pay.js'
|
|||
import QRCode from 'qrcodejs2'
|
||||
import successDialog from '@/components/successDialog.vue'
|
||||
import * as act from '@/config/activity.js'
|
||||
import QuickRechargePanel from '@/components/QuickRechargePanel.vue'
|
||||
import {
|
||||
PAY_TYPE,
|
||||
PAY_CHANEL,
|
||||
|
|
@ -702,6 +713,7 @@ var payStatus
|
|||
export default {
|
||||
components: {
|
||||
successDialog,
|
||||
QuickRechargePanel,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -750,6 +762,8 @@ export default {
|
|||
UPGRADE_AREA,
|
||||
REPURCHASE_AREA,
|
||||
REISSUE_AREA,
|
||||
quickAmounts: [399, 1995, 3990, 10000, 30000, 50000], // 快速充值金额选项
|
||||
isQuickSelected: false, // 标记是否是快速选择触发的金额变化
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -760,6 +774,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)
|
||||
// 获取支付配置
|
||||
|
|
@ -817,6 +841,10 @@ export default {
|
|||
// this.getBankList()
|
||||
},
|
||||
methods: {
|
||||
onAmountSelected(data) {
|
||||
this.isQuickSelected = true // 标记这是快速选择触发的
|
||||
this.rechargeAmount = data.amount.toString()
|
||||
},
|
||||
toUnBind() {
|
||||
api
|
||||
.unBind({
|
||||
|
|
@ -1481,8 +1509,7 @@ export default {
|
|||
}
|
||||
|
||||
.contxt {
|
||||
margin-top: -220rpx;
|
||||
padding: 0 26rpx;
|
||||
padding: 40rpx 26rpx 0;
|
||||
padding-bottom: 300rpx;
|
||||
}
|
||||
|
||||
|
|
@ -1746,4 +1773,9 @@ export default {
|
|||
justify-content: space-between;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
.recharge-input {
|
||||
::v-deep .uni-input-placeholder {
|
||||
font-size: 48rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue