You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
581 lines
13 KiB
581 lines
13 KiB
<template>
|
|
<view :style="colorStyle">
|
|
<!-- #ifdef MP -->
|
|
<view class="accountTitle">
|
|
<view :style="{height:getHeight.barTop+'px'}"></view>
|
|
<view class="sysTitle colorfff" :style="{height:getHeight.barHeight+'px'}" @click="goarrow">
|
|
<text class="iconfont icon-ic_leftarrow"></text>
|
|
<view>账户充值</view>
|
|
</view>
|
|
</view>
|
|
<view :style="{height:(getHeight.barTop+getHeight.barHeight)+'px'}"></view>
|
|
<!-- #endif -->
|
|
<form @submit="submitSub">
|
|
<view class="paymentCon">
|
|
<view class="payment-top">
|
|
<span class="name">我的余额</span>
|
|
<view class="money">{{ userinfo.now_money || 0 }}</view>
|
|
<!-- <view class="pictrue">
|
|
<image src="../static/chongzhi.png"></image>
|
|
</view> -->
|
|
</view>
|
|
</view>
|
|
<view class="payment">
|
|
<!-- <view class="nav acea-row row-between-wrapper" v-if="balanceStatus">
|
|
<view class="item" :class="(active==index && index==0)?'on on1':(active==index && index==1)?'on on2':index!=1?'on3':''" v-for="(item,index) in navRecharge" :key="index" @click="navRecharges(index)">
|
|
{{item}}
|
|
</view>
|
|
</view> -->
|
|
<view class='tip picList' v-if='!active' >
|
|
<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)" v-if="item.price">
|
|
<view>
|
|
<view class="pic-number-pic">¥<text class="money">{{ item.price }}</text></view>
|
|
<view class="pic-number">赠送{{ item.give_money }}元</view>
|
|
<view class="label" v-if="parseInt(item.is_welfare)">充值福利</view>
|
|
</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)">
|
|
<input type="digit" :placeholder="activePic == picList.length?'':'自定义'" v-model="money" class="pic-box-money" placeholder-class="placeholders" />
|
|
</view> -->
|
|
</view>
|
|
<view class="tip" v-else>
|
|
<view class="title">转入佣金</view>
|
|
<view class='input acea-row row-middle'><text>￥</text><input @input='inputNum' :maxlength="moneyMaxLeng" placeholder="请输入转入佣金金额" type='digit' placeholder-class='placeholder' v-model="number" name="number"></input></view>
|
|
<view class="tips-title acea-row row-between-wrapper">
|
|
<view>当前可转入佣金<text class='font-num'>{{userinfo.commissionCount || 0}}</text>元,冻结佣金<text class='font-num'>{{userinfo.broken_commission}}</text>元</view>
|
|
<view class="font-num" @click="allChange">全部转入</view>
|
|
</view>
|
|
</view>
|
|
<view class="tips-box">
|
|
<view class="tips">注意事项</view>
|
|
<view class="tips-samll acea-row row-top row-between" v-for="item in rechargeAttention" :key="item">
|
|
<view class="drop"></view>
|
|
<view class="info">{{ item }}</view>
|
|
</view>
|
|
</view>
|
|
<button class='but bg-color' formType="submit" > {{active ? '立即转入': '立即充值' }}</button>
|
|
</view>
|
|
</form>
|
|
<!-- 确认框 -->
|
|
<tuiModal
|
|
:show="showModal"
|
|
title="温馨提示"
|
|
content="转入余额后无法再次转出，确认是否转入余额"
|
|
:maskClosable="false"
|
|
@click="handleClick"></tuiModal>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
getUserInfo,
|
|
rechargeAPi,
|
|
getRechargeApi,
|
|
memberCardCreate
|
|
} from '@/api/user.js';
|
|
import tuiModal from "@/components/tui-modal/index.vue"
|
|
import {toLogin} from '@/libs/login.js';
|
|
import {orderOfflinePayType} from '@/api/order.js';
|
|
import {mapGetters} from "vuex";
|
|
import colors from "@/mixins/color";
|
|
import {openPaySubscribe} from '@/utils/SubscribeMessage.js';
|
|
export default {
|
|
components: {
|
|
tuiModal
|
|
},
|
|
mixins:[colors],
|
|
data() {
|
|
let that = this;
|
|
return {
|
|
// #ifdef MP
|
|
getHeight: this.$util.getWXStatusHeight(),
|
|
// #endif
|
|
now_money: 0,
|
|
navRecharge: ['账户充值', '佣金转入'],
|
|
active: 0,
|
|
number: '',
|
|
userinfo: {},
|
|
placeholder: "0.00",
|
|
from: '',
|
|
isAuto: false, //没有授权的不会自动授权
|
|
isShowAuth: false, //是否隐藏授权
|
|
picList: [],
|
|
activePic: 0,
|
|
money: "",
|
|
numberPic:'',
|
|
rechar_id:0,
|
|
password: '',
|
|
goodsList: [],
|
|
pay_order_id: '',
|
|
payType: '',
|
|
totalPrice: '0',
|
|
formContent: '',
|
|
// #ifdef H5
|
|
isWeixin: this.$wechat.isWeixin(),
|
|
// #endif
|
|
type: '',
|
|
rechargeAttention:[],
|
|
moneyMaxLeng:8,
|
|
showModal: false,
|
|
balanceStatus:0
|
|
};
|
|
},
|
|
computed: mapGetters(['isLogin']),
|
|
watch:{
|
|
isLogin:{
|
|
handler:function(newV,oldV){
|
|
if(newV){
|
|
//#ifndef MP
|
|
this.getUserInfo();
|
|
this.getRecharge();
|
|
//#endif
|
|
}
|
|
},
|
|
deep:true
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
if (this.isLogin) {
|
|
this.getUserInfo();
|
|
this.getRecharge();
|
|
} else {
|
|
toLogin();
|
|
}
|
|
},
|
|
onShow() {
|
|
uni.removeStorageSync('form_type_cart');
|
|
},
|
|
methods: {
|
|
allChange(){
|
|
this.number = this.userinfo.commissionCount;
|
|
},
|
|
goarrow(){
|
|
let pages = getCurrentPages();
|
|
let prevPage = pages[pages.length - 2];
|
|
if(prevPage){
|
|
uni.navigateBack()
|
|
}else{
|
|
uni.reLaunch({
|
|
url: '/pages/index/index'
|
|
})
|
|
}
|
|
},
|
|
inputNum: function(e) {
|
|
let val = e.detail.value;
|
|
let dot = val.indexOf('.');
|
|
if(dot>-1){
|
|
this.moneyMaxLeng = dot+3;
|
|
}else{
|
|
this.moneyMaxLeng = 8
|
|
}
|
|
},
|
|
/**
|
|
* 选择金额
|
|
*/
|
|
picCharge(idx, item) {
|
|
this.activePic = idx;
|
|
if (item === undefined) {
|
|
this.rechar_id = 0;
|
|
this.numberPic = "";
|
|
} else {
|
|
this.money = "";
|
|
this.rechar_id = item.id;
|
|
this.numberPic = item.price;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 充值额度选择
|
|
*/
|
|
getRecharge() {
|
|
getRechargeApi().then(res => {
|
|
this.picList = res.data.recharge_quota;
|
|
if (this.picList[0]) {
|
|
this.rechar_id = this.picList[0].id;
|
|
this.numberPic = this.picList[0].price;
|
|
}
|
|
this.rechargeAttention = res.data.recharge_attention || [];
|
|
this.balanceStatus = res.data.user_extract_balance_status;
|
|
}).catch(res => {
|
|
this.$util.Tips({
|
|
title: res
|
|
})
|
|
});
|
|
},
|
|
navRecharges: function(index) {
|
|
this.active = index;
|
|
},
|
|
getUserInfo: function() {
|
|
let that = this;
|
|
getUserInfo().then(res => {
|
|
that.$set(that, 'userinfo', res.data);
|
|
})
|
|
},
|
|
handleClick(e){
|
|
let index = e.index;
|
|
if(index == 1){
|
|
let data = {
|
|
price: this.number,
|
|
type: 1,
|
|
// #ifdef H5
|
|
from: this.$wechat.isWeixin() ? "weixin" : "weixinh5",
|
|
// #endif
|
|
// #ifdef MP
|
|
from: 'routine',
|
|
// #endif
|
|
};
|
|
rechargeAPi(data).then(res=>{
|
|
this.$util.Tips({
|
|
title: res.msg
|
|
}, {
|
|
url: "/pages/users/user_money/index"
|
|
})
|
|
}).catch(err => {
|
|
return this.$util.Tips({
|
|
title: err
|
|
})
|
|
});
|
|
}
|
|
this.showModal = false;
|
|
},
|
|
submitSub: function(e) {
|
|
let that = this
|
|
let value = e.detail.value.number;
|
|
// 转入余额
|
|
if (that.active) {
|
|
if (parseFloat(value) < 0 || parseFloat(value) == NaN || value == undefined || value == "") {
|
|
return that.$util.Tips({
|
|
title: '请输入金额'
|
|
});
|
|
}
|
|
this.showModal = true;
|
|
} else {
|
|
let data = {
|
|
price: this.numberPic ? this.numberPic : this.money,
|
|
rechar_id: this.rechar_id,
|
|
type: 0,
|
|
// #ifdef H5
|
|
from: this.$wechat.isWeixin() ? "weixin" : "weixinh5",
|
|
// #endif
|
|
// #ifdef MP
|
|
from: 'routine',
|
|
// #endif
|
|
};
|
|
rechargeAPi(data).then(res=>{
|
|
uni.navigateTo({
|
|
url: `/pages/goods/cashier/index?order_id=${res.data.order_id}&from_type=recharge`
|
|
})
|
|
}).catch(err => {
|
|
return this.$util.Tips({
|
|
title: err
|
|
})
|
|
});
|
|
|
|
// this.totalPrice = this.rechar_id == 0 ? parseFloat(this.money) : parseFloat(this.numberPic);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.bgcolor{
|
|
background-color: var(--view-theme)
|
|
}
|
|
.accountTitle{
|
|
position: fixed;
|
|
left:0;
|
|
top:0;
|
|
width: 100%;
|
|
z-index: 99;
|
|
.sysTitle{
|
|
width: 100%;
|
|
position: relative;
|
|
font-weight: 500;
|
|
color: #FFFFFF;
|
|
font-size: 30rpx;
|
|
display:flex;
|
|
margin-top: 20rpx;
|
|
.iconfont{
|
|
// position: absolute;
|
|
margin-left: 12rpx;
|
|
font-size: 36rpx;
|
|
// left:11rpx;
|
|
// width: 60rpx;
|
|
}
|
|
}
|
|
}
|
|
.payment {
|
|
position: relative;
|
|
width: 710rpx;
|
|
border-radius: 32rpx;
|
|
margin:40rpx auto;
|
|
padding-bottom: 64rpx;
|
|
}
|
|
|
|
.payment .nav {
|
|
height: 96rpx;
|
|
line-height: 96rpx;
|
|
background-color: #f5f5f5;
|
|
border-radius: 32rpx 32rpx 0 0;
|
|
}
|
|
|
|
.payment .nav .item {
|
|
font-size: 30rpx;
|
|
color: #333;
|
|
width: 280rpx;
|
|
text-align: center;
|
|
padding-right: 40rpx;
|
|
position: relative;
|
|
&.on1{
|
|
padding-right: 62rpx;
|
|
background-image: url('../static/titleLeft.png');
|
|
&::after{
|
|
margin-left: 150rpx;
|
|
}
|
|
}
|
|
&.on2{
|
|
padding-left: 62rpx;
|
|
background-image: url('../static/titleRight.png');
|
|
&::after{
|
|
margin-left: 192rpx;
|
|
}
|
|
}
|
|
&.on3{
|
|
padding-left: 62rpx;
|
|
}
|
|
}
|
|
|
|
.payment .nav .item.on {
|
|
font-weight: bold;
|
|
width: 407rpx;
|
|
height: 96rpx;
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
text-align: center;
|
|
&::after{
|
|
width: 38rpx;
|
|
height: 30rpx;
|
|
border: 2px solid var(--view-theme);
|
|
border-left: 2px solid transparent !important;
|
|
border-top: 2px solid transparent !important;
|
|
border-right: 2px solid transparent !important;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
content: ' ';
|
|
left: 0;
|
|
bottom: 10rpx;
|
|
}
|
|
}
|
|
|
|
.payment .input {
|
|
margin: 32rpx auto 0 auto;
|
|
font-size: 56rpx;
|
|
color: #333333;
|
|
background: #F5F5F5;
|
|
border-radius: 16rpx;
|
|
height: 114rpx;
|
|
}
|
|
|
|
.payment .input text {
|
|
padding-left: 26rpx;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.payment .input input {
|
|
width: 520rpx;
|
|
height: 94rpx;
|
|
font-size: 60rpx;
|
|
margin-left: 24rpx;
|
|
font-family: 'SemiBold';
|
|
}
|
|
|
|
.payment .input .placeholder {
|
|
font-weight: 400;
|
|
color: #DDDDDD;
|
|
height: 100%;
|
|
line-height: 94rpx;
|
|
font-size: 32rpx;
|
|
}
|
|
|
|
.payment .tip {
|
|
font-size: 26rpx;
|
|
color: #888888;
|
|
padding: 30rpx 33rpx 0 33rpx;
|
|
.title{
|
|
font-weight: 400;
|
|
color: #333333;
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
|
|
.payment .but {
|
|
color: #080313;
|
|
font-size: 28rpx;
|
|
width: 646rpx;
|
|
height: 88rpx;
|
|
border-radius: 50rpx;
|
|
margin: 150rpx auto 0 auto;
|
|
line-height: 88rpx;
|
|
font-weight: 500;
|
|
background: #FAAD35;
|
|
}
|
|
|
|
.paymentCon{
|
|
// background: linear-gradient(180deg, var(--view-minorColorT) 0%, #f5f5f5 100%);
|
|
padding-top: 32rpx;
|
|
}
|
|
|
|
.payment-top {
|
|
width: 710rpx;
|
|
height: 180rpx;
|
|
background: linear-gradient(-55deg, #EAA931, #FEE38F);
|
|
margin: 0 auto;
|
|
border-radius:10rpx;
|
|
padding: 33rpx 60rpx;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
text-align: center;
|
|
|
|
.name {
|
|
font-size: 28rpx;
|
|
color: #080313;
|
|
}
|
|
|
|
.money {
|
|
font-size: 68rpx;
|
|
color: #080313;
|
|
font-family: 'SemiBold';
|
|
margin-top: 16rpx;
|
|
}
|
|
.pictrue{
|
|
width: 186rpx;
|
|
height: 186rpx;
|
|
position: absolute;
|
|
right: 60rpx;
|
|
top: 66rpx;
|
|
|
|
image{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.picList {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
.pic-box {
|
|
width: 204rpx;
|
|
height: 144rpx;
|
|
border-radius: 20rpx;
|
|
padding: 28rpx 0 26rpx 0;
|
|
margin: 16rpx 16rpx 0 0;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
|
|
&:nth-child(3n) {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.label{
|
|
position: absolute;
|
|
left:-2rpx;
|
|
top:-18rpx;
|
|
width: 118rpx;
|
|
height: 40rpx;
|
|
background: linear-gradient(270deg, #FAAD14 0%, #FF7D00 100%);
|
|
border-radius: 16rpx 0 16rpx 0;
|
|
color: #fff;
|
|
font-size: 22rpx;
|
|
text-align: center;
|
|
line-height: 40rpx;
|
|
}
|
|
}
|
|
|
|
.pic-box-color {
|
|
background-color:#1B1A1D;
|
|
color: #C6C4CA;
|
|
// border: 1px solid #F5F5F5;
|
|
}
|
|
|
|
.pic-number {
|
|
font-size: 24rpx;
|
|
font-weight: 400;
|
|
color: #7B7A7F;
|
|
margin-top: 6rpx;
|
|
}
|
|
|
|
.pic-number-pic {
|
|
font-size: 36rpx;
|
|
font-weight: 500;
|
|
width: 100%;
|
|
text-align: center;
|
|
|
|
.money{
|
|
margin-left: 10rpx;
|
|
}
|
|
}
|
|
|
|
.pic-box-money{
|
|
height: 70rpx;
|
|
font-size: 32rpx;
|
|
text-align: center;
|
|
font-weight: 500;
|
|
line-height: 70rpx;
|
|
}
|
|
|
|
.placeholders{
|
|
color: #333333;
|
|
}
|
|
|
|
.pic-box-color-active {
|
|
background: linear-gradient(-55deg, #EAA931, #FEE38F);
|
|
color: #080313;
|
|
.pic-number,.placeholders{
|
|
color: #080313 !important;
|
|
}
|
|
}
|
|
}
|
|
.tips-box{
|
|
margin-top: 48rpx;
|
|
width: 100%;
|
|
padding:32rpx;
|
|
box-sizing: border-box;
|
|
background: #1B1A1D;
|
|
.tips {
|
|
font-size: 32rpx;
|
|
color: #C6C4CA;
|
|
font-weight: 600;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
.tips-samll {
|
|
font-size: 24rpx;
|
|
color: #C6C4CA;
|
|
margin-bottom: 20rpx;
|
|
|
|
.drop{
|
|
width: 10rpx;
|
|
height: 10rpx;
|
|
background-color: #EAA931;
|
|
border-radius: 50%;
|
|
margin-top: 12rpx;
|
|
}
|
|
|
|
.info{
|
|
width: 620rpx;
|
|
}
|
|
}
|
|
.tip-box {
|
|
margin-top: 30rpx;
|
|
}
|
|
}
|
|
.tips-title{
|
|
margin-top: 32rpx;
|
|
font-size: 26rpx;
|
|
color: #333;
|
|
}
|
|
</style>
|
|
|