361 lines
7.9 KiB
Vue
361 lines
7.9 KiB
Vue
<template>
|
|
<view class="recharge-page">
|
|
<!-- 充值金额选择 -->
|
|
<view class="amount-section">
|
|
<view class="section-title">选择充值金额</view>
|
|
|
|
<view class="amount-grid">
|
|
<view
|
|
v-for="item in amountOptions"
|
|
:key="item.value"
|
|
class="amount-item"
|
|
:class="{ active: selectedAmount === item.value }"
|
|
@click="selectAmount(item.value)">
|
|
<text class="amount-value">¥{{ item.value }}</text>
|
|
<text class="amount-gift" v-if="item.gift">送{{ item.gift }}元</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 自定义金额 -->
|
|
<view class="custom-amount">
|
|
<text class="custom-label">其他金额</text>
|
|
<input
|
|
class="custom-input"
|
|
type="digit"
|
|
placeholder="请输入充值金额"
|
|
v-model="customAmount"
|
|
@input="onCustomInput" />
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 支付方式 -->
|
|
<view class="payment-section">
|
|
<view class="section-title">支付方式</view>
|
|
|
|
<view class="payment-list">
|
|
<view
|
|
v-for="item in paymentMethods"
|
|
:key="item.value"
|
|
class="payment-item"
|
|
:class="{ active: selectedPayment === item.value }"
|
|
@click="selectPayment(item.value)">
|
|
<image :src="item.icon" class="payment-icon"></image>
|
|
<text class="payment-name">{{ item.label }}</text>
|
|
<view class="payment-check">
|
|
<text v-if="selectedPayment === item.value" class="check-icon">✓</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 充值说明 -->
|
|
<view class="tips-section">
|
|
<view class="section-title">充值说明</view>
|
|
<view class="tips-content">
|
|
<text class="tip-item">• 充值金额实时到账，可用于支付订单</text>
|
|
<text class="tip-item">• 充值金额不可提现，请根据实际需求充值</text>
|
|
<text class="tip-item">• 如有疑问，请联系客服</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 底部按钮 -->
|
|
<view class="bottom-bar">
|
|
<view class="total-amount">
|
|
<text class="label">充值金额：</text>
|
|
<text class="amount">¥{{ finalAmount }}</text>
|
|
</view>
|
|
<button class="btn-confirm" @click="handleRecharge">确认充值</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
amountOptions: [
|
|
{ value: 100, gift: 0 },
|
|
{ value: 200, gift: 10 },
|
|
{ value: 500, gift: 30 },
|
|
{ value: 1000, gift: 80 },
|
|
{ value: 2000, gift: 200 },
|
|
{ value: 5000, gift: 600 }
|
|
],
|
|
selectedAmount: 100,
|
|
customAmount: '',
|
|
paymentMethods: [
|
|
{ label: '微信支付', value: 'wechat', icon: '/static/images/wechat-pay.png' },
|
|
{ label: '支付宝', value: 'alipay', icon: '/static/images/alipay.png' }
|
|
],
|
|
selectedPayment: 'wechat'
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
finalAmount() {
|
|
return this.customAmount || this.selectedAmount
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
selectAmount(value) {
|
|
this.selectedAmount = value
|
|
this.customAmount = ''
|
|
},
|
|
|
|
onCustomInput(e) {
|
|
this.selectedAmount = null
|
|
},
|
|
|
|
selectPayment(value) {
|
|
this.selectedPayment = value
|
|
},
|
|
|
|
async handleRecharge() {
|
|
if (!this.finalAmount || this.finalAmount <= 0) {
|
|
uni.showToast({
|
|
title: '请输入充值金额',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
try {
|
|
uni.showLoading({ title: '处理中...' })
|
|
|
|
const data = {
|
|
amount: this.finalAmount,
|
|
paymentMethod: this.selectedPayment
|
|
}
|
|
|
|
const res = await this.$http.post('/api/wallet/recharge', data)
|
|
|
|
if (res.code === 200) {
|
|
// 这里应该调起支付
|
|
// 暂时直接提示成功
|
|
uni.showToast({
|
|
title: '充值成功',
|
|
icon: 'success'
|
|
})
|
|
|
|
setTimeout(() => {
|
|
uni.navigateBack()
|
|
}, 1500)
|
|
} else {
|
|
uni.showToast({
|
|
title: res.message || '充值失败',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
} catch (e) {
|
|
console.error('充值失败', e)
|
|
uni.showToast({
|
|
title: '充值失败',
|
|
icon: 'none'
|
|
})
|
|
} finally {
|
|
uni.hideLoading()
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import '@/static/css/common.scss';
|
|
|
|
.recharge-page {
|
|
min-height: 100vh;
|
|
background: $bg-color;
|
|
padding-bottom: 160rpx;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
padding: 30rpx;
|
|
}
|
|
|
|
.amount-section {
|
|
background: #fff;
|
|
margin-bottom: 20rpx;
|
|
|
|
.amount-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 20rpx;
|
|
padding: 0 30rpx 30rpx;
|
|
|
|
.amount-item {
|
|
aspect-ratio: 1;
|
|
border: 2rpx solid #e0e0e0;
|
|
border-radius: 16rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
transition: all 0.3s;
|
|
|
|
&.active {
|
|
border-color: #4a9b9f;
|
|
background: rgba(74, 155, 159, 0.05);
|
|
}
|
|
|
|
.amount-value {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.amount-gift {
|
|
font-size: 24rpx;
|
|
color: #ff4d4f;
|
|
}
|
|
}
|
|
}
|
|
|
|
.custom-amount {
|
|
padding: 0 30rpx 30rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.custom-label {
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.custom-input {
|
|
flex: 1;
|
|
height: 80rpx;
|
|
border: 2rpx solid #e0e0e0;
|
|
border-radius: 8rpx;
|
|
padding: 0 20rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.payment-section {
|
|
background: #fff;
|
|
margin-bottom: 20rpx;
|
|
|
|
.payment-list {
|
|
padding: 0 30rpx 30rpx;
|
|
|
|
.payment-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 30rpx;
|
|
border: 2rpx solid #e0e0e0;
|
|
border-radius: 16rpx;
|
|
margin-bottom: 20rpx;
|
|
transition: all 0.3s;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
&.active {
|
|
border-color: #4a9b9f;
|
|
background: rgba(74, 155, 159, 0.05);
|
|
}
|
|
|
|
.payment-icon {
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.payment-name {
|
|
flex: 1;
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
}
|
|
|
|
.payment-check {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
border-radius: 50%;
|
|
border: 2rpx solid #e0e0e0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
.check-icon {
|
|
color: #4a9b9f;
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
&.active .payment-check {
|
|
border-color: #4a9b9f;
|
|
background: #4a9b9f;
|
|
|
|
.check-icon {
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.tips-section {
|
|
background: #fff;
|
|
|
|
.tips-content {
|
|
padding: 0 30rpx 30rpx;
|
|
|
|
.tip-item {
|
|
display: block;
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
line-height: 40rpx;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.bottom-bar {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: #fff;
|
|
padding: 20rpx 30rpx;
|
|
box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.05);
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.total-amount {
|
|
flex: 1;
|
|
|
|
.label {
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
}
|
|
|
|
.amount {
|
|
font-size: 40rpx;
|
|
font-weight: bold;
|
|
color: #ff4d4f;
|
|
}
|
|
}
|
|
|
|
.btn-confirm {
|
|
width: 280rpx;
|
|
height: 88rpx;
|
|
line-height: 88rpx;
|
|
background: linear-gradient(135deg, #4a9b9f 0%, #3d8185 100%);
|
|
color: #fff;
|
|
border-radius: 44rpx;
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
border: none;
|
|
}
|
|
}
|
|
</style>
|