cansnow
252 lines
7.2 KiB
Vue
252 lines
7.2 KiB
Vue
<template>
|
||
<view class="red-bag-page">
|
||
<u-navbar back-icon-name="close" :back-icon-size="36" back-icon-color="#333333" :border-bottom="false"
|
||
title="充值" title-color="#000000" :title-size="36" :title-bold="true">
|
||
<view slot="right">
|
||
<view class="u-m-r-20">
|
||
<u-icon name="more-dot-fill" color="#333333" :size="36"></u-icon>
|
||
</view>
|
||
</view>
|
||
</u-navbar>
|
||
<u-top-tips ref="uTips" :navbar-height="statusBarHeight + navbarHeight" type="error"></u-top-tips>
|
||
<view class="u-m-30" style="background-color: #ffffff;color: #000000;font-size: 34rpx;border-radius: 10rpx;">
|
||
<view class="u-flex u-row-between u-col-center u-p-20" :style="payValue>maxPayLimit?'color:#fa3534':''">
|
||
<view>
|
||
<text>金额</text>
|
||
</view>
|
||
<view>
|
||
<u-input input-align="right" v-model="payValue" :border="false"
|
||
@input="amountInputChange" type="digit"
|
||
:custom-style="{color:payValue>maxPayLimit?'#fa3534':'#000000',fontSize:'34rpx'}"
|
||
placeholder="¥0.00" placeholder-style="color:#cccccc;font-size:34rpx;" :clearable="false"/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<view class="u-m-30" style="background-color: #ffffff;color: #000000;font-size: 34rpx;border-radius: 10rpx;">
|
||
<view class="u-flex u-row-between u-col-center"
|
||
style="width: 100%;padding: 30rpx 20rpx;" @click="selectPayWay">
|
||
<view>
|
||
<text>充值方式</text>
|
||
</view>
|
||
<view>
|
||
<u-icon color="#606266" name="arrow-right"
|
||
label-pos="left" label-color="#000000" label-size="32rpx"
|
||
:label="selectedPayWay.text"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view :style="payValue>maxPayLimit?'color:#fa3534;text-align: center;margin-top: 120rpx;':'text-align: center;margin-top: 120rpx;'"
|
||
class="u-flex u-row-center u-col-center">
|
||
<view style="font-size:36px;margin-right: 10rpx;font-weight: 500;margin-bottom: 10rpx;">¥</view>
|
||
<view style="font-size:50px;font-weight: 400;">{{valueFormat()}}</view>
|
||
</view>
|
||
|
||
<view class="u-flex u-row-center u-col-center u-m-t-30">
|
||
<view @click="showPwdPop"
|
||
style="font-size: 36rpx; background-color:#19be6b;color:#ffffff;border-radius: 16rpx;text-align: center;padding: 26rpx 100rpx;">充值</view>
|
||
</view>
|
||
|
||
<!-- 支付方式 -->
|
||
<u-action-sheet :tips="tips" :list="payWaylist" @click="payWayClick" v-model="payWayshow"></u-action-sheet>
|
||
|
||
|
||
<u-popup v-model="passwordPopFlag" mode="bottom" border-radius="14" length="70%"
|
||
:mask-close-able="false">
|
||
<view class="u-p-30">
|
||
<view>
|
||
<view class="u-flex u-row-between">
|
||
<view style="width: 100rpx;" @click="closePwdPop">
|
||
<u-icon name="close"></u-icon>
|
||
</view>
|
||
<view v-if="pwdErrorTips.length>0"
|
||
style="text-align: center;color: #FC5531;font-size: 34rpx">
|
||
{{pwdErrorTips}}
|
||
</view>
|
||
<view v-else style="text-align: center;font-weight: bold;font-size: 32rpx;">
|
||
<text>请输入支付密码</text>
|
||
</view>
|
||
<view style="width: 100rpx;">
|
||
<text></text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="u-m-t-30 u-p-b-30 u-border-bottom" style="text-align: center;font-size: 18px;">
|
||
<view>充值到零钱</view>
|
||
<view style="font-weight: bold;">
|
||
<text style="margin-right: 6rpx;">¥</text><text style="font-size: 26px;">{{valueFormat()}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="u-m-t-50">
|
||
<u-message-input :breathe="true" :maxlength="6" :dot-fill="true"
|
||
@change="inputChange" @finish="inputFinish" :focus="pwdFocus">
|
||
</u-message-input>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
payValue:"",
|
||
redBagRemark:"",
|
||
// 状态栏高度，H5中，此值为0，因为H5不可操作状态栏
|
||
statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
|
||
// 导航栏内容区域高度，不包括状态栏高度在内
|
||
navbarHeight: 44,
|
||
chatGroupId:'',
|
||
passwordPopFlag:false,
|
||
pwdFocus:false,
|
||
pwdErrorTips:'',
|
||
payWayshow:false,
|
||
maxPayLimit:100000,
|
||
payWaylist:[
|
||
{
|
||
text: '银行卡1',
|
||
color:'#19be6b',
|
||
fontSize:32,
|
||
subText:'推荐',
|
||
payID:1
|
||
},
|
||
{
|
||
text: '银行卡2',
|
||
color:'#2979ff',
|
||
fontSize:32,
|
||
payID:2
|
||
}
|
||
],
|
||
tips: {
|
||
text: '选择充值方式',
|
||
color: '#000000',
|
||
fontSize: 36
|
||
},
|
||
selectedPayWay:{
|
||
text: '请选择',
|
||
payID:0
|
||
}
|
||
};
|
||
},
|
||
onLoad:function(option){
|
||
this.chatGroupId=option.chatGroupId;
|
||
},
|
||
methods:{
|
||
valueFormat:function(){
|
||
if(this.payValue.length<1){
|
||
return "0.00"
|
||
}
|
||
if(this.payValue.toString().indexOf(".")==-1){
|
||
return this.payValue+'.00';
|
||
}else{
|
||
return this.payValue;
|
||
}
|
||
},
|
||
amountInputChange:function(e){
|
||
console.log(e);
|
||
if(Number(e)>this.maxPayLimit){
|
||
this.showTips("单次充值金额不可超过"+this.maxPayLimit+"元");
|
||
this.payValue="";
|
||
}
|
||
},
|
||
|
||
selectPayWay:function(){
|
||
let that=this;
|
||
that.payWayshow=true;
|
||
},
|
||
payWayClick:function(index){
|
||
//console.log(`点击了第${index + 1}项`,this.payWaylist[index]);
|
||
this.selectedPayWay=this.payWaylist[index];
|
||
},
|
||
showPwdPop:function(){
|
||
let that=this;
|
||
if(this.payValue.length<1||this.payValue<=0){
|
||
this.showTips("未填写[金额]");
|
||
return;
|
||
}
|
||
if(this.payValue>this.maxPayLimit){
|
||
this.showTips("单次充值金额不可超过"+this.maxPayLimit+"元");
|
||
return;
|
||
}
|
||
if(this.selectedPayWay.payID<1){
|
||
this.showTips("请选择充值方式");
|
||
return;
|
||
}
|
||
this.passwordPopFlag=true;
|
||
this.pwdErrorTips="";
|
||
setTimeout(function(){
|
||
that.pwdFocus=true;
|
||
},1000)
|
||
},
|
||
closePwdPop:function(){
|
||
this.pwdErrorTips="";
|
||
this.passwordPopFlag=false;
|
||
this.pwdFocus=false;
|
||
},
|
||
inputChange(e){
|
||
this.pwdErrorTips="";
|
||
},
|
||
inputFinish(e) {
|
||
//this.pwdFocus=fasle;
|
||
let that=this;
|
||
console.log('输入结束，当前值为：' + e);
|
||
let param={
|
||
accountBalance:this.payValue,
|
||
tradePwd:e
|
||
};
|
||
that.$u.api.imUser.validatePayTradePwd(param).then(res => {
|
||
console.log("交易密码校验结果",res);
|
||
if(res.code==200){
|
||
this.submit();
|
||
}else{
|
||
let message=res.message?res.message:'支付密码错误';
|
||
this.globalUtil.utilAlert(message);
|
||
this.pwdErrorTips=message;
|
||
return;
|
||
}
|
||
})
|
||
},
|
||
submit:function(){
|
||
let that=this;
|
||
let param={
|
||
payValue:Number(this.payValue).toFixed(2),
|
||
payWay:this.selectedPayWay.payID,
|
||
}
|
||
that.$u.api.imUser.toPayUserBalance(param).then(res =>{
|
||
if(res.code==200){
|
||
that.userAccount=res.data;
|
||
this.$u.vuex("vuex_userAccountInfo",that.userAccount);
|
||
this.closePwdPop();
|
||
this.globalUtil.utilAlert("充值成功!",3000);
|
||
setTimeout(function(){
|
||
uni.navigateBack();
|
||
},2000)
|
||
}
|
||
})
|
||
console.log("充值参数",param);
|
||
},
|
||
|
||
showTips(title) {
|
||
this.$refs.uTips.show({
|
||
title: title?title:'未填写[金额]',
|
||
type:'error'
|
||
});
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.red-bag-page{
|
||
background-color: #f1f1f1;
|
||
}
|
||
</style>
|
||
<style>
|
||
page{
|
||
background-color: #f1f1f1;
|
||
}
|
||
</style>
|