154 lines
2.8 KiB
Vue
154 lines
2.8 KiB
Vue
<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>
|