|
|
|
|
@ -1,4 +1,290 @@ |
|
|
|
|
<!-- 充值 --> |
|
|
|
|
<template> |
|
|
|
|
<view class="draw-money-wrap u-p-b-30"> |
|
|
|
|
<view class="head-box"> |
|
|
|
|
<shopro-navbar :background="{ background: navBackground }" :backTextStyle="{ color: '#fff' }" backText="充值" |
|
|
|
|
backIconColor="#fff"></shopro-navbar> |
|
|
|
|
<!-- 账户 --> |
|
|
|
|
<view class="wallet-num-box u-flex u-row-between"> |
|
|
|
|
<view class=""> |
|
|
|
|
<view class="num-title">账户余额（元）</view> |
|
|
|
|
<view class="wallet-num">{{ userInfo.money || '0.00' }}</view> |
|
|
|
|
</view> |
|
|
|
|
<button class="u-reset-button log-btn" |
|
|
|
|
@tap="$Router.push({ path: '/pages/user/wallet/top-up-log' })">充值记录</button> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<!-- 充值输入卡片--> |
|
|
|
|
<view class="draw-card"> |
|
|
|
|
<view class="card-title">充值金额</view> |
|
|
|
|
<view class="input-box u-flex u-col-center"> |
|
|
|
|
<view calss="unit">￥</view> |
|
|
|
|
<input class="u-flex-1 u-p-l-10" type="digit" @focus="onTopupFous" @input="onTopupInput" v-model="money" |
|
|
|
|
placeholder-style="font-size: 30rpx; font-weight: 500;color:#C2C7CF;" placeholder="请输入充值金额" /> |
|
|
|
|
</view> |
|
|
|
|
<!-- 快捷充值 --> |
|
|
|
|
<view class="top-up-content u-p-b-30" v-if="initRecharge.moneys.length"> |
|
|
|
|
<view class="card-title">快捷充值</view> |
|
|
|
|
<view class="u-flex u-flex-wrap"> |
|
|
|
|
<view class="top-up-card u-flex u-row-center u-col-center u-m-b-30 u-m-r-30" |
|
|
|
|
:class="{'top-up-active':curMoneyCard === index}" v-for="(item,index) in initRecharge.moneys" |
|
|
|
|
:key="index" @tap="selectCard(index)"> |
|
|
|
|
<view class="top-up-value"> |
|
|
|
|
{{item.money}} |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<button class="u-reset-button save-btn" :style="{opacity:!money ? 0.7 : 1 }" :disabled="!money" |
|
|
|
|
@tap="confirmTopup">确认充值</button> |
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 充值说明 --> |
|
|
|
|
<view class="draw-notice"> |
|
|
|
|
<view class="title">充值说明</view> |
|
|
|
|
<view class="draw-list">1.充值为在线支付，即时到账，不支持退款；</view> |
|
|
|
|
<view class="draw-list"> |
|
|
|
|
2.充值后金额会自动进入您的余额账户，请注意查收。 |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
import { mapState, mapActions, mapGetters } from 'vuex'; |
|
|
|
|
import FormValidate from '@/shopro/validate/form'; |
|
|
|
|
import wechat from '@/shopro/wechat/wechat'; |
|
|
|
|
export default { |
|
|
|
|
components: {}, |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
money: '', //提现金额 |
|
|
|
|
showModal: false, |
|
|
|
|
curMoneyCard: '', |
|
|
|
|
navBackground: 'none' |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
computed: { |
|
|
|
|
...mapGetters(['userInfo', 'initRecharge']) |
|
|
|
|
}, |
|
|
|
|
async onLoad() {}, |
|
|
|
|
onPageScroll(e) { |
|
|
|
|
this.navBackground = e.scrollTop > 50 ? |
|
|
|
|
`url(${this.$IMG_URL}/imgs/user/draw_money_head_bg.png) no-repeat top / 100% auto` : 'none'; |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
// 充值输入框 |
|
|
|
|
onTopupInput(e) { |
|
|
|
|
this.$nextTick(() => { |
|
|
|
|
this.money = this.clearNoNum(e.detail.value) |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
// 获取焦点 |
|
|
|
|
onTopupFous() { |
|
|
|
|
this.curMoneyCard = '' |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
// 选择充值卡片 |
|
|
|
|
selectCard(index) { |
|
|
|
|
this.curMoneyCard = index |
|
|
|
|
this.money = this.initRecharge.moneys[index].money |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
confirmTopup() { |
|
|
|
|
const that = this; |
|
|
|
|
if (this.money <= 0) { |
|
|
|
|
this.$u.toast('请选择或输入充值金额'); |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
that.$http( |
|
|
|
|
'money.recharge', { |
|
|
|
|
recharge_money: that.money |
|
|
|
|
}, |
|
|
|
|
'确认中...' |
|
|
|
|
).then(res => { |
|
|
|
|
if (res.code === 1) { |
|
|
|
|
that.money = ''; |
|
|
|
|
that.$Router.push({ |
|
|
|
|
path: `/pages/order/payment/method`, |
|
|
|
|
query: { |
|
|
|
|
orderId: res.data.id, |
|
|
|
|
orderType: 'recharge' |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
} else { |
|
|
|
|
that.$u.toast(res.msg); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
// 校验金额 |
|
|
|
|
clearNoNum(val) { |
|
|
|
|
if (val == ".") { |
|
|
|
|
val = "0."; |
|
|
|
|
} |
|
|
|
|
val = val.replace(/[^\d.]/g, ""); |
|
|
|
|
//必须保证第一个为数字而不是. |
|
|
|
|
val = val.replace(/^\./g, ""); |
|
|
|
|
//保证只有出现一个.而没有多个. |
|
|
|
|
val = val.replace(/\.{2,}/g, "."); |
|
|
|
|
//保证.只出现一次，而不能出现两次以上 |
|
|
|
|
val = val |
|
|
|
|
.replace(".", "$#$") |
|
|
|
|
.replace(/\./g, "") |
|
|
|
|
.replace("$#$", "."); |
|
|
|
|
//只能输入两位小数 |
|
|
|
|
val = val.replace(/^(-)*(\d+)\.(\d\d).*$/, "$1$2.$3"); |
|
|
|
|
if (val.indexOf(".") < 0 && val != "") { |
|
|
|
|
//以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额 |
|
|
|
|
val = parseFloat(val); |
|
|
|
|
} |
|
|
|
|
return val |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<style lang="scss"> |
|
|
|
|
.head-box { |
|
|
|
|
// background: url($IMG_URL+'/imgs/user/draw_money_head_bg.png') no-repeat; |
|
|
|
|
// background-size: 100% auto; |
|
|
|
|
min-height: 400rpx; |
|
|
|
|
padding-bottom: var(--status-bar-height); |
|
|
|
|
|
|
|
|
|
// 可提现 |
|
|
|
|
.wallet-num-box { |
|
|
|
|
padding: 46rpx 40rpx 0; |
|
|
|
|
align-items: baseline; |
|
|
|
|
.num-title { |
|
|
|
|
font-size: 30rpx; |
|
|
|
|
font-weight: 500; |
|
|
|
|
color: #ffffff; |
|
|
|
|
margin-bottom: 20rpx; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.wallet-num { |
|
|
|
|
font-size: 60rpx; |
|
|
|
|
font-weight: 500; |
|
|
|
|
color: #F0D2A0; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.log-btn { |
|
|
|
|
width: 170rpx; |
|
|
|
|
height: 60rpx; |
|
|
|
|
line-height: 60rpx; |
|
|
|
|
border:1px solid #F0D2A0; |
|
|
|
|
// background: rgba(255, 255, 255, 0.1); |
|
|
|
|
|
|
|
|
|
border-radius: 30rpx; |
|
|
|
|
padding: 0; |
|
|
|
|
font-size: 24rpx; |
|
|
|
|
font-weight: 500; |
|
|
|
|
color: #F0D2A0; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// 提现输入卡片 |
|
|
|
|
.draw-card { |
|
|
|
|
background-color: #fff; |
|
|
|
|
border-radius: 20rpx; |
|
|
|
|
width: 690rpx; |
|
|
|
|
min-height: 400rpx; |
|
|
|
|
margin: -70rpx auto 30rpx; |
|
|
|
|
padding: 30rpx; |
|
|
|
|
|
|
|
|
|
.card-title { |
|
|
|
|
font-size: 30rpx; |
|
|
|
|
font-weight: 500; |
|
|
|
|
color: #333333; |
|
|
|
|
margin-bottom: 30rpx; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.input-box { |
|
|
|
|
width: 624rpx; |
|
|
|
|
border-bottom: 1rpx solid #eee; |
|
|
|
|
height: 100rpx; |
|
|
|
|
margin-bottom: 40rpx; |
|
|
|
|
|
|
|
|
|
.unit { |
|
|
|
|
font-size: 48rpx; |
|
|
|
|
color: #333; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.save-btn { |
|
|
|
|
width: 616rpx; |
|
|
|
|
height: 86rpx; |
|
|
|
|
line-height: 86rpx; |
|
|
|
|
// background: linear-gradient(-90deg, #a36fff, #5336ff); |
|
|
|
|
background: #F0D2A0; |
|
|
|
|
box-shadow: 0px 7rpx 11rpx 2rpx rgba(124, 103, 214, 0.34); |
|
|
|
|
border-radius: 43rpx; |
|
|
|
|
font-size: 30rpx; |
|
|
|
|
font-weight: 500; |
|
|
|
|
color: #ffffff; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// 充值卡片 |
|
|
|
|
.top-up-card { |
|
|
|
|
width: 190rpx; |
|
|
|
|
height: 124rpx; |
|
|
|
|
background: #F7F6FB; |
|
|
|
|
border-radius: 12rpx; |
|
|
|
|
transition: all linear 0.2s; |
|
|
|
|
|
|
|
|
|
&:nth-of-type(3n) { |
|
|
|
|
margin-right: 0 !important; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.top-up-value { |
|
|
|
|
font-size: 36rpx; |
|
|
|
|
font-weight: 500; |
|
|
|
|
color: #999999; |
|
|
|
|
|
|
|
|
|
&::after { |
|
|
|
|
content: '元'; |
|
|
|
|
font-size: 24rpx; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.top-up-active { |
|
|
|
|
background: #564BBD; |
|
|
|
|
transition: all linear 0.2s; |
|
|
|
|
|
|
|
|
|
.top-up-value { |
|
|
|
|
color: #fff |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// 提现说明 |
|
|
|
|
.draw-notice { |
|
|
|
|
width: 684rpx; |
|
|
|
|
min-height: 180rpx; |
|
|
|
|
background: #ffffff; |
|
|
|
|
border-radius: 20rpx; |
|
|
|
|
padding: 30rpx 35rpx; |
|
|
|
|
margin: 20rpx auto; |
|
|
|
|
|
|
|
|
|
.title { |
|
|
|
|
font-size: 30rpx; |
|
|
|
|
font-weight: 500; |
|
|
|
|
color: #333333; |
|
|
|
|
margin-bottom: 30rpx; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.draw-list { |
|
|
|
|
font-size: 24rpx; |
|
|
|
|
font-weight: 400; |
|
|
|
|
color: #999999; |
|
|
|
|
margin-bottom: 10rpx; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|
<!-- 充值 --> |
|
|
|
|
<template> |
|
|
|
|
<view class="draw-money-wrap u-p-b-30"> |
|
|
|
|
<view class="head-box"> |
|
|
|
|
@ -154,7 +440,8 @@ |
|
|
|
|
|
|
|
|
|
// 可提现 |
|
|
|
|
.wallet-num-box { |
|
|
|
|
padding: 20rpx 40rpx 0; |
|
|
|
|
padding: 46rpx 40rpx 0; |
|
|
|
|
align-items: baseline; |
|
|
|
|
|
|
|
|
|
.num-title { |
|
|
|
|
font-size: 30rpx; |
|
|
|
|
@ -217,12 +504,13 @@ |
|
|
|
|
width: 616rpx; |
|
|
|
|
height: 86rpx; |
|
|
|
|
line-height: 86rpx; |
|
|
|
|
background: linear-gradient(-90deg, #a36fff, #5336ff); |
|
|
|
|
// background: linear-gradient(-90deg, #a36fff, #5336ff); |
|
|
|
|
background: #F0D2A0; |
|
|
|
|
box-shadow: 0px 7rpx 11rpx 2rpx rgba(124, 103, 214, 0.34); |
|
|
|
|
border-radius: 43rpx; |
|
|
|
|
font-size: 30rpx; |
|
|
|
|
font-weight: 500; |
|
|
|
|
color: #ffffff; |
|
|
|
|
color: #09090B; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// 充值卡片 |
|
|
|
|
|
liudan
2 years ago
