|
|
|
@ -1,34 +1,59 @@
|
|
|
|
|
<template> |
|
|
|
|
<view> |
|
|
|
|
<view class="payment-top acea-row row-column row-center-wrapper"> |
|
|
|
|
<text class="name">我的余额</text> |
|
|
|
|
<view class="pic"> |
|
|
|
|
<text> |
|
|
|
|
¥ |
|
|
|
|
<text class="pic-font">{{ now_money || 0 }}</text> |
|
|
|
|
</text> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<view class="recharge"> |
|
|
|
|
<view class="nav acea-row row-around row-middle"> |
|
|
|
|
<view |
|
|
|
|
class="item" |
|
|
|
|
:class="active === navRechargeIndex ? 'on' : ''" |
|
|
|
|
v-for="(item, navRechargeIndex) in navRecharge" |
|
|
|
|
:key="navRechargeIndex" |
|
|
|
|
@click="navRecharges(navRechargeIndex)" |
|
|
|
|
>{{ item }}</view> |
|
|
|
|
<view class="item on">账户充值</view> |
|
|
|
|
</view> |
|
|
|
|
<view class="info-wrapper"> |
|
|
|
|
<view class="money"> |
|
|
|
|
<text>¥</text> |
|
|
|
|
<input type="number" placeholder="0.00" v-model="money" /> |
|
|
|
|
</view> |
|
|
|
|
<view class="tips" v-if="!active"> |
|
|
|
|
提示:当前余额为 |
|
|
|
|
<text>¥{{ now_money || 0 }}</text> |
|
|
|
|
<view class="picList acea-row row-between mt-20"> |
|
|
|
|
<view |
|
|
|
|
class="pic-box pic-box-color acea-row row-center-wrapper row-column" |
|
|
|
|
:class="activePic === index ? 'pic-box-color-active' : ''" |
|
|
|
|
v-for="(item, index) in picList" |
|
|
|
|
:key="index" |
|
|
|
|
@click="picCharge(index, item)" |
|
|
|
|
> |
|
|
|
|
<view class="pic-number-pic"> |
|
|
|
|
<text> |
|
|
|
|
{{ item.price }} |
|
|
|
|
<text class="pic-number">元</text> |
|
|
|
|
</text> |
|
|
|
|
</view> |
|
|
|
|
<view class="pic-number">赠送:{{ item.give_price }} 元</view> |
|
|
|
|
</view> |
|
|
|
|
<view |
|
|
|
|
class="pic-box pic-box-color acea-row row-center-wrapper" |
|
|
|
|
:class="activePic == picList.length ? 'pic-box-color-active' : ''" |
|
|
|
|
@click="picCharge(picList.length, money)" |
|
|
|
|
> |
|
|
|
|
<input |
|
|
|
|
type="number" |
|
|
|
|
placeholder="其他" |
|
|
|
|
v-model="money" |
|
|
|
|
class="pic-box-money pic-number-pic" |
|
|
|
|
:class="activePic == picList.length ? 'pic-box-color-active' : ''" |
|
|
|
|
/> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<view class="pay-btn bg-color-red" @click="recharge">{{ active ? "立即转入" : "立即充值" }}</view> |
|
|
|
|
<view class="tip">提示:充值后帐户的金额不能提现</view> |
|
|
|
|
<view class="pay-btn bg-color-red" @click="recharge">立即充值</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</template> |
|
|
|
|
<script> |
|
|
|
|
import { mapGetters } from "vuex"; |
|
|
|
|
import { weapppay } from "@/libs/wechat"; |
|
|
|
|
import { isWeixin } from "@/utils"; |
|
|
|
|
import { rechargeWechat } from "@/api/user"; |
|
|
|
|
import { weappPay } from "@/libs/wechat"; |
|
|
|
|
import { rechargeWechat, getRechargeApi } from "@/api/user"; |
|
|
|
|
import { add, sub } from "@/utils/bc"; |
|
|
|
|
|
|
|
|
|
export default { |
|
|
|
@ -37,198 +62,194 @@ export default {
|
|
|
|
|
props: {}, |
|
|
|
|
data: function() { |
|
|
|
|
return { |
|
|
|
|
navRecharge: ["账户充值"], |
|
|
|
|
active: 0, |
|
|
|
|
payType: ["weixin"], |
|
|
|
|
from: isWeixin() ? "weixin" : "weixinh5", |
|
|
|
|
from: this.$deviceType, |
|
|
|
|
money: "", |
|
|
|
|
now_money: "" |
|
|
|
|
now_money: "", |
|
|
|
|
picList: [], |
|
|
|
|
activePic: 0, |
|
|
|
|
numberPic: "", |
|
|
|
|
paid_price: "" |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
computed: mapGetters(["userInfo"]), |
|
|
|
|
mounted: function() { |
|
|
|
|
this.now_money = this.userInfo.now_money; |
|
|
|
|
this.now_money = this.userInfo.nowMoney; |
|
|
|
|
this.getRecharge(); |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
navRecharges: function(index) { |
|
|
|
|
this.active = index; |
|
|
|
|
}, |
|
|
|
|
recharge: function() { |
|
|
|
|
let that = this, |
|
|
|
|
price = Number(this.money); |
|
|
|
|
if (that.active) { |
|
|
|
|
if (price === 0) { |
|
|
|
|
uni.showToast({ |
|
|
|
|
title: "请输入您要转入的金额", |
|
|
|
|
icon: "none", |
|
|
|
|
duration: 2000 |
|
|
|
|
}); |
|
|
|
|
return; |
|
|
|
|
} else if (price < 0.01) { |
|
|
|
|
/** |
|
|
|
|
* 充值额度选择 |
|
|
|
|
*/ |
|
|
|
|
getRecharge() { |
|
|
|
|
getRechargeApi() |
|
|
|
|
.then(res => { |
|
|
|
|
this.picList = res.data.recharge_price_ways || []; |
|
|
|
|
if (this.picList[0]) { |
|
|
|
|
this.paid_price = this.picList[0].price; |
|
|
|
|
this.numberPic = this.picList[0].give_price; |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
.catch(res => { |
|
|
|
|
uni.showToast({ |
|
|
|
|
title: "转入金额不能低于0.01", |
|
|
|
|
title: |
|
|
|
|
err.msg || err.response.data.msg || err.response.data.message, |
|
|
|
|
icon: "none", |
|
|
|
|
duration: 2000 |
|
|
|
|
}); |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
uni.showModal({ |
|
|
|
|
title: "转入余额", |
|
|
|
|
content: "转入余额无法在转出,请确认转入?", |
|
|
|
|
success: function(res) { |
|
|
|
|
if (res.confirm) { |
|
|
|
|
rechargeWechat({ price: price, from: that.from, type: 1 }) |
|
|
|
|
.then(res => { |
|
|
|
|
that.now_money = add( |
|
|
|
|
price, |
|
|
|
|
parseInt(that.userInfo.now_money) |
|
|
|
|
); |
|
|
|
|
that.userInfo.brokerage_price = sub( |
|
|
|
|
that.userInfo.brokerage_price, |
|
|
|
|
price |
|
|
|
|
); |
|
|
|
|
that.money = ""; |
|
|
|
|
uni.showToast({ |
|
|
|
|
title: res.msg, |
|
|
|
|
icon: "none", |
|
|
|
|
duration: 2000 |
|
|
|
|
}); |
|
|
|
|
}) |
|
|
|
|
.catch(err => { |
|
|
|
|
uni.showToast({ |
|
|
|
|
title: err.msg || err.response.data.msg|| err.response.data.message, |
|
|
|
|
icon: "none", |
|
|
|
|
duration: 2000 |
|
|
|
|
}); |
|
|
|
|
}); |
|
|
|
|
} else if (res.cancel) { |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
/** |
|
|
|
|
* 选择金额 |
|
|
|
|
*/ |
|
|
|
|
picCharge(idx, item) { |
|
|
|
|
this.activePic = idx; |
|
|
|
|
if (idx == this.picList.length) { |
|
|
|
|
this.paid_price = ""; |
|
|
|
|
this.numberPic = ""; |
|
|
|
|
} else { |
|
|
|
|
this.money = ""; |
|
|
|
|
this.paid_price = item.give_price; |
|
|
|
|
this.numberPic = item.price; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
recharge: function() { |
|
|
|
|
let that = this, |
|
|
|
|
price = Number(this.money); |
|
|
|
|
if (this.picList.length == this.activePic && price === 0) { |
|
|
|
|
uni.showToast({ |
|
|
|
|
title: "请输入您要充值的金额", |
|
|
|
|
icon: "none", |
|
|
|
|
duration: 2000 |
|
|
|
|
}); |
|
|
|
|
return; |
|
|
|
|
} else if (this.picList.length == this.activePic && price < 0.01) { |
|
|
|
|
uni.showToast({ |
|
|
|
|
title: "充值金额不能低于0.01", |
|
|
|
|
icon: "none", |
|
|
|
|
duration: 2000 |
|
|
|
|
}); |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
let prices = "", |
|
|
|
|
paid_price = ""; |
|
|
|
|
if (price) { |
|
|
|
|
prices = price; |
|
|
|
|
paid_price = 0; |
|
|
|
|
} else { |
|
|
|
|
prices = that.numberPic; |
|
|
|
|
paid_price = that.paid_price; |
|
|
|
|
} |
|
|
|
|
rechargeWechat({ |
|
|
|
|
price: prices, |
|
|
|
|
// from: that.from, |
|
|
|
|
from: that.from, |
|
|
|
|
paidPrice: paid_price |
|
|
|
|
}) |
|
|
|
|
.then(res => { |
|
|
|
|
console.log(res); |
|
|
|
|
var data = res.data.data; |
|
|
|
|
weappPay(res.data.data) |
|
|
|
|
.then(() => { |
|
|
|
|
prices = add(prices, paid_price); |
|
|
|
|
that.now_money = add(prices, parseFloat(that.userInfo.nowMoney)); |
|
|
|
|
uni.showToast({ |
|
|
|
|
title: "支付成功", |
|
|
|
|
icon: "success", |
|
|
|
|
duration: 2000 |
|
|
|
|
}); |
|
|
|
|
this.$yrouter.back(); |
|
|
|
|
}) |
|
|
|
|
.finally(res => { |
|
|
|
|
//if(typeof(res) == "undefined") return |
|
|
|
|
uni.showToast({ |
|
|
|
|
title: "已取消", |
|
|
|
|
title: res, |
|
|
|
|
icon: "none", |
|
|
|
|
duration: 2000 |
|
|
|
|
}); |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
} else { |
|
|
|
|
if (price === 0) { |
|
|
|
|
uni.showToast({ |
|
|
|
|
title: "请输入您要充值的金额", |
|
|
|
|
icon: "none", |
|
|
|
|
duration: 2000 |
|
|
|
|
}); |
|
|
|
|
return; |
|
|
|
|
} else if (price < 0.01) { |
|
|
|
|
}) |
|
|
|
|
.catch(function() { |
|
|
|
|
uni.showToast({ |
|
|
|
|
title: "支付失败", |
|
|
|
|
icon: "none", |
|
|
|
|
duration: 2000 |
|
|
|
|
}); |
|
|
|
|
}); |
|
|
|
|
}) |
|
|
|
|
.catch(err => { |
|
|
|
|
console.log(err); |
|
|
|
|
uni.showToast({ |
|
|
|
|
title: "充值金额不能低于0.01", |
|
|
|
|
title: |
|
|
|
|
err.msg || err.response.data.msg || err.response.data.message, |
|
|
|
|
icon: "none", |
|
|
|
|
duration: 2000 |
|
|
|
|
}); |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
rechargeWechat({ price: price, from: that.from }) |
|
|
|
|
.then(res => { |
|
|
|
|
var data = res.data; |
|
|
|
|
if (data.type == "weixinh5") { |
|
|
|
|
location.replace(data.data.mweb_url); |
|
|
|
|
uni.showModal({ |
|
|
|
|
title: "提示", |
|
|
|
|
content: "充值余额", |
|
|
|
|
confirmText: "已充值", |
|
|
|
|
cancelText: "查看余额", |
|
|
|
|
success: function(res) { |
|
|
|
|
if (res.confirm) { |
|
|
|
|
that.$yrouter.replace({ |
|
|
|
|
path: "/user/account" |
|
|
|
|
}); |
|
|
|
|
} else if (res.cancel) { |
|
|
|
|
that.$yrouter.replace({ |
|
|
|
|
path: "/user/account" |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
} else { |
|
|
|
|
weappPay(data.data) |
|
|
|
|
.then(res => { |
|
|
|
|
that.now_money = add( |
|
|
|
|
price, |
|
|
|
|
parseInt(that.userInfo.now_money) |
|
|
|
|
); |
|
|
|
|
uni.showToast({ |
|
|
|
|
title: "支付成功", |
|
|
|
|
icon: "success", |
|
|
|
|
duration: 2000 |
|
|
|
|
}); |
|
|
|
|
}) |
|
|
|
|
.catch(function() { |
|
|
|
|
uni.showToast({ |
|
|
|
|
title: "支付失败", |
|
|
|
|
icon: "none", |
|
|
|
|
duration: 2000 |
|
|
|
|
}); |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
.catch(err => { |
|
|
|
|
uni.showToast({ |
|
|
|
|
title: err.msg || err.response.data.msg|| err.response.data.message, |
|
|
|
|
icon: "none", |
|
|
|
|
duration: 2000 |
|
|
|
|
}); |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<style scoped lang="less"> |
|
|
|
|
#iframe { |
|
|
|
|
display: none; |
|
|
|
|
} |
|
|
|
|
.pic-box-color-active { |
|
|
|
|
background-color: #00c17b !important; |
|
|
|
|
color: #fff !important; |
|
|
|
|
} |
|
|
|
|
.picList { |
|
|
|
|
margin-bottom: 0.3 * 100rpx; |
|
|
|
|
margin-top: 0.3 * 100rpx; |
|
|
|
|
} |
|
|
|
|
.font-color { |
|
|
|
|
color: #e83323; |
|
|
|
|
} |
|
|
|
|
.recharge { |
|
|
|
|
width: 7.03*100rpx; |
|
|
|
|
padding: 0.5*100rpx 0.63*100rpx 0.45*100rpx; |
|
|
|
|
border-radius: 0.1 * 100rpx; |
|
|
|
|
width: 100%; |
|
|
|
|
background-color: #fff; |
|
|
|
|
margin: 0.2*100rpx auto 0 auto; |
|
|
|
|
border-radius: 0.1*100rpx; |
|
|
|
|
margin: 0.2 * 100rpx auto 0 auto; |
|
|
|
|
padding: 0.3 * 100rpx; |
|
|
|
|
border-top-right-radius: 0.39 * 100rpx; |
|
|
|
|
border-top-left-radius: 0.39 * 100rpx; |
|
|
|
|
margin-top: -0.45 * 100rpx; |
|
|
|
|
box-sizing: border-box; |
|
|
|
|
} |
|
|
|
|
.recharge .nav { |
|
|
|
|
height: 0.75*100rpx; |
|
|
|
|
line-height: 0.75*100rpx; |
|
|
|
|
padding: 0 1*100rpx; |
|
|
|
|
height: 0.75 * 100rpx; |
|
|
|
|
line-height: 0.75 * 100rpx; |
|
|
|
|
padding: 0 1 * 100rpx; |
|
|
|
|
} |
|
|
|
|
.recharge .nav .item { |
|
|
|
|
font-size: 0.3*100rpx; |
|
|
|
|
font-size: 0.3 * 100rpx; |
|
|
|
|
color: #333; |
|
|
|
|
} |
|
|
|
|
.recharge .nav .item.on { |
|
|
|
|
font-weight: bold; |
|
|
|
|
border-bottom: 0.04*100rpx solid #e83323; |
|
|
|
|
border-bottom: 0.04 * 100rpx solid #e83323; |
|
|
|
|
} |
|
|
|
|
.recharge .info-wrapper { |
|
|
|
|
text-align: center; |
|
|
|
|
} |
|
|
|
|
.recharge .info-wrapper .money { |
|
|
|
|
margin-top: 0.6*100rpx; |
|
|
|
|
padding-bottom: 0.2*100rpx; |
|
|
|
|
margin-top: 0.6 * 100rpx; |
|
|
|
|
padding-bottom: 0.2 * 100rpx; |
|
|
|
|
border-bottom: 1px dashed #ddd; |
|
|
|
|
text-align: center; |
|
|
|
|
} |
|
|
|
|
.recharge .info-wrapper .money text { |
|
|
|
|
font-size: 0.56*100rpx; |
|
|
|
|
.recharge .info-wrapper .money span { |
|
|
|
|
font-size: 0.56 * 100rpx; |
|
|
|
|
color: #333; |
|
|
|
|
font-weight: bold; |
|
|
|
|
} |
|
|
|
|
.recharge .info-wrapper .money input { |
|
|
|
|
display: inline-block; |
|
|
|
|
width: 3*100rpx; |
|
|
|
|
font-size: 0.84*100rpx; |
|
|
|
|
width: 3 * 100rpx; |
|
|
|
|
font-size: 0.84 * 100rpx; |
|
|
|
|
text-align: center; |
|
|
|
|
color: #282828; |
|
|
|
|
font-weight: bold; |
|
|
|
|
padding-right: 0.7*100rpx; |
|
|
|
|
padding-right: 0.7 * 100rpx; |
|
|
|
|
} |
|
|
|
|
.recharge .info-wrapper .money input::placeholder { |
|
|
|
|
color: #ddd; |
|
|
|
@ -245,26 +266,67 @@ export default {
|
|
|
|
|
.recharge .info-wrapper .money input:-ms-input-placeholder { |
|
|
|
|
color: #ddd; |
|
|
|
|
} |
|
|
|
|
.recharge .info-wrapper .tips { |
|
|
|
|
font-size: 0.26*100rpx; |
|
|
|
|
color: #888; |
|
|
|
|
margin: 0.25*100rpx auto 0 auto; |
|
|
|
|
line-height: 1.5; |
|
|
|
|
padding: 0 0.3*100rpx; |
|
|
|
|
.tip { |
|
|
|
|
font-size: 0.28 * 100rpx; |
|
|
|
|
color: #333333; |
|
|
|
|
font-weight: 800; |
|
|
|
|
margin-bottom: 0.14 * 100rpx; |
|
|
|
|
} |
|
|
|
|
.recharge .info-wrapper .tips text { |
|
|
|
|
.recharge .info-wrapper .tips span { |
|
|
|
|
color: #ef4a49; |
|
|
|
|
} |
|
|
|
|
.recharge .info-wrapper .pay-btn { |
|
|
|
|
display: block; |
|
|
|
|
width: 5.5*100rpx; |
|
|
|
|
height: 0.86*100rpx; |
|
|
|
|
margin: 0.5*100rpx auto 0 auto; |
|
|
|
|
line-height: 0.86*100rpx; |
|
|
|
|
width: 100%; |
|
|
|
|
height: 0.86 * 100rpx; |
|
|
|
|
margin: 0.5 * 100rpx auto 0 auto; |
|
|
|
|
line-height: 0.86 * 100rpx; |
|
|
|
|
text-align: center; |
|
|
|
|
color: #fff; |
|
|
|
|
border-radius: 0.5*100rpx; |
|
|
|
|
font-size: 0.3*100rpx; |
|
|
|
|
border-radius: 0.5 * 100rpx; |
|
|
|
|
font-size: 0.3 * 100rpx; |
|
|
|
|
font-weight: bold; |
|
|
|
|
} |
|
|
|
|
.payment-top { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 3.5 * 100rpx; |
|
|
|
|
background-color: #00c17b; |
|
|
|
|
} |
|
|
|
|
.payment-top .name { |
|
|
|
|
font-size: 0.26 * 100rpx; |
|
|
|
|
color: rgba(255, 255, 255, 0.8); |
|
|
|
|
margin-top: -0.38 * 100rpx; |
|
|
|
|
margin-bottom: 0.3 * 100rpx; |
|
|
|
|
} |
|
|
|
|
.payment-top .pic { |
|
|
|
|
font-size: 0.32 * 100rpx; |
|
|
|
|
color: #fff; |
|
|
|
|
} |
|
|
|
|
.payment-top .pic-font { |
|
|
|
|
font-size: 0.78 * 100rpx; |
|
|
|
|
color: #fff; |
|
|
|
|
} |
|
|
|
|
.picList .pic-box { |
|
|
|
|
width: 32%; |
|
|
|
|
height: auto; |
|
|
|
|
border-radius: 0.2 * 100rpx; |
|
|
|
|
margin-top: 0.21 * 100rpx; |
|
|
|
|
padding: 0.2 * 100rpx 0; |
|
|
|
|
} |
|
|
|
|
.pic-box-color { |
|
|
|
|
background-color: #f4f4f4; |
|
|
|
|
color: #656565; |
|
|
|
|
} |
|
|
|
|
.pic-number { |
|
|
|
|
font-size: 0.22 * 100rpx; |
|
|
|
|
} |
|
|
|
|
.pic-number-pic { |
|
|
|
|
font-size: 0.38 * 100rpx; |
|
|
|
|
margin-right: 0.1 * 100rpx; |
|
|
|
|
text-align: center; |
|
|
|
|
} |
|
|
|
|
.pic-box-money { |
|
|
|
|
width: 100%; |
|
|
|
|
display: block; |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|