|
@@ -1,66 +1,95 @@
|
|
|
<template>
|
|
|
<view class="content">
|
|
|
- <view class="row-box">
|
|
|
+ <view class="top_box">
|
|
|
+ <text class="yue-tit">当前余额:</text>
|
|
|
+ <text class="yue-num">¥{{ userInfo.now_money | parseFloatNum }}</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="line_box"></view>
|
|
|
+
|
|
|
+ <view class="cz_box">
|
|
|
+ <view class="cz_wrap">
|
|
|
+ <text class="cz_tit">¥</text>
|
|
|
+ <input class="cz_input" type="number" v-model="money" @focus="changeNum()" placeholder="请输入充值金额" placeholder-class="placeholder" />
|
|
|
+ </view>
|
|
|
+ <view class="zc_list_box">
|
|
|
+ <view class="zc_list_price" :class="{ seletPrice: seletNum == item }" @click="seletChange(item, index)" v-for="(item, index) in list" :key="index">
|
|
|
+ {{ item | parseFloatNum }}元
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- <view class="line_box"></view> -->
|
|
|
+
|
|
|
+ <!-- <view class="row-box">
|
|
|
<view class="title">充值金额</view>
|
|
|
<view class="row">
|
|
|
<text class="tit">¥</text>
|
|
|
<input class="input" type="number" v-model="money" placeholder="请输入充值金额" placeholder-class="placeholder" />
|
|
|
</view>
|
|
|
- </view>
|
|
|
+ </view> -->
|
|
|
|
|
|
- <view class="list">
|
|
|
- <radio-group @change="tabRadio">
|
|
|
- <!-- #ifdef APP-PLUS -->
|
|
|
- <label>
|
|
|
- <view class="box">
|
|
|
- <view class="icon iconfont iconzhifubao"></view>
|
|
|
- <view class="title-box">
|
|
|
- <view class="title"><text>支付宝充值</text></view>
|
|
|
- </view>
|
|
|
- <view class="right"><radio value="alipay" color="#5dbc7c" :checked="type == 'alipay'" /></view>
|
|
|
- </view>
|
|
|
- </label>
|
|
|
- <label>
|
|
|
- <view class="box">
|
|
|
- <view class="icon iconfont iconweixin1"></view>
|
|
|
- <view class="title-box">
|
|
|
- <view class="title"><text>微信充值</text></view>
|
|
|
- <view class="node"><text>真实姓名(代勇明)</text></view>
|
|
|
- </view>
|
|
|
- <view class="right"><radio value="weixin" color=" #5dbc7c" :checked="type == 'weixin'" /></view>
|
|
|
- </view>
|
|
|
- </label>
|
|
|
- <!-- #endif -->
|
|
|
- </radio-group>
|
|
|
+ <!-- <view class="rechar-box">
|
|
|
+ <view class="rechar-title">注意事项</view>
|
|
|
+ <view class="rechar-text" v-for="(item, index) in zhuyi" :key="index">
|
|
|
+ <text>{{ index + 1 }}.{{item}}</text>
|
|
|
+ </view>
|
|
|
+ </view> -->
|
|
|
+ <view class="line_box"></view>
|
|
|
+ <view class="cz-type">
|
|
|
+ <view class="type-left">
|
|
|
+ <view class="icon"><image src="https://37shop.liuniu946.com/front/img/weixin.png" mode=""></image></view>
|
|
|
+ <view class="tit">微信支付</view>
|
|
|
+ </view>
|
|
|
+ <view class="type-right"><image src="https://zhibo.liuniu946.com/img/checked.png" mode=""></image></view>
|
|
|
</view>
|
|
|
- <button class="add-btn up" :class="{ 'active-bg': payLoding }" @click="!payLoding ? confirm() : ''">确认充值</button>
|
|
|
+ <button class="add-btn up" :class="{ 'active-bg': payLoding }" @click="!payLoding ? confirm() : ''">立即充值</button>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { getMoneyStyle } from '@/utils/rocessor.js';
|
|
|
// #ifdef H5
|
|
|
-import { rechargeWechat } from '@/api/wallet.js';
|
|
|
+import { rechargeWechat, rechargeIndex } from '@/api/wallet.js';
|
|
|
// #endif
|
|
|
// #ifdef MP
|
|
|
-import { rechargeRoutine } from '@/api/wallet.js';
|
|
|
+import { rechargeWechat, rechargeRoutine, rechargeIndex } from '@/api/wallet.js';
|
|
|
// #endif
|
|
|
import { mapState } from 'vuex';
|
|
|
export default {
|
|
|
filters: {
|
|
|
- getMoneyStyle
|
|
|
+ getMoneyStyle,
|
|
|
+ // 去处小数点后的0
|
|
|
+ parseFloatNum(clock) {
|
|
|
+ return parseFloat(clock);
|
|
|
+ }
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
type: 'weixin',
|
|
|
- money: '', //充值金额
|
|
|
- payLoding: false //是否加载中
|
|
|
+ money: 300, //充值金额
|
|
|
+ payLoding: false ,//是否加载中
|
|
|
+ list: [
|
|
|
+ '300',
|
|
|
+ '200',
|
|
|
+ '150',
|
|
|
+ '100',
|
|
|
+ '50'
|
|
|
+ ],
|
|
|
+ seletNum: '300', // 选中
|
|
|
+ zhuyi: [],
|
|
|
+ quota: '', // 送的钱
|
|
|
+ typeText: 0, // 0-微信 1-佣金
|
|
|
};
|
|
|
},
|
|
|
- onLoad(options) {},
|
|
|
+ onLoad(options) {
|
|
|
+ this.loadData();
|
|
|
+ },
|
|
|
computed: {
|
|
|
// #ifdef H5
|
|
|
- ...mapState(['weichatObj'])
|
|
|
+ ...mapState(['weichatObj', 'userInfo'])
|
|
|
+ // #endif
|
|
|
+ // #ifdef MP
|
|
|
+ ...mapState(['userInfo'])
|
|
|
// #endif
|
|
|
},
|
|
|
methods: {
|
|
@@ -70,17 +99,55 @@ export default {
|
|
|
url: url
|
|
|
});
|
|
|
},
|
|
|
+ changeNum() {
|
|
|
+ this.seletNum = this.money = '';
|
|
|
+ console.log(this.seletNum, this.money);
|
|
|
+ },
|
|
|
+ seletChange(item, index) {
|
|
|
+ this.seletNum = item;
|
|
|
+ this.seletMoney = item;
|
|
|
+ console.log(this.seletNum);
|
|
|
+ this.money = item
|
|
|
+ },
|
|
|
// 切换选中对象
|
|
|
tabRadio(e) {
|
|
|
- this.type = e;
|
|
|
+ this.type = e.detail.value;
|
|
|
+ if ( e.detail.value == 'weixin' ) {
|
|
|
+ this.typeText = 0
|
|
|
+ } else {
|
|
|
+ this.typeText = 1
|
|
|
+ }
|
|
|
},
|
|
|
+ // 充值金额
|
|
|
+ rechargeXuan(item) {
|
|
|
+ this.money = item.price;
|
|
|
+ this.quota = item.quota;
|
|
|
+ },
|
|
|
+
|
|
|
+ loadData() {
|
|
|
+ // rechargeIndex().then(({data}) => {
|
|
|
+ // console.log(data);
|
|
|
+ // this.zhuyi = data.recharge_attention;
|
|
|
+ // this.money = data.recharge_quota[0].price;
|
|
|
+ // this.quota = data.recharge_quota[0].quota;
|
|
|
+ // this.list = data.recharge_quota;
|
|
|
+ // })
|
|
|
+ },
|
|
|
+
|
|
|
// 提交
|
|
|
confirm() {
|
|
|
let obj = this;
|
|
|
obj.payLoding = true;
|
|
|
+ if( !obj.money ) {
|
|
|
+ obj.$api.msg('请输入金额');
|
|
|
+ obj.payLoding = false;
|
|
|
+ return;
|
|
|
+ }
|
|
|
// #ifdef H5
|
|
|
- rechargeWechat({ price: this.money, from: this.type })
|
|
|
- .then(e => {
|
|
|
+ rechargeWechat({
|
|
|
+ price: this.money,
|
|
|
+ from: this.type ,
|
|
|
+ }).then(e => {
|
|
|
let da = e.data.data;
|
|
|
obj.weichatObj.chooseWXPay({
|
|
|
timestamp: da.timestamp,
|
|
@@ -92,7 +159,10 @@ export default {
|
|
|
uni.showToast({
|
|
|
title: '充值成功',
|
|
|
duration: 2000,
|
|
|
- position: 'top'
|
|
|
+ position: 'top',
|
|
|
+ success: function(res) {
|
|
|
+ uni.navigateBack()
|
|
|
+ }
|
|
|
});
|
|
|
}
|
|
|
});
|
|
@@ -114,13 +184,18 @@ export default {
|
|
|
signType: da.signType,
|
|
|
paySign: da.paySign,
|
|
|
success: function(res) {
|
|
|
- uni.redirectTo({
|
|
|
- url: '/pages/money/paySuccess'
|
|
|
+ uni.showToast({
|
|
|
+ title: '充值成功',
|
|
|
+ duration: 2000,
|
|
|
+ position: 'top',
|
|
|
+ success: function(res) {
|
|
|
+ uni.navigateBack()
|
|
|
+ }
|
|
|
});
|
|
|
},
|
|
|
-
|
|
|
+
|
|
|
})
|
|
|
-
|
|
|
+
|
|
|
obj.payLoding = false;
|
|
|
})
|
|
|
.catch(e => {
|
|
@@ -129,33 +204,6 @@ export default {
|
|
|
});
|
|
|
// #endif
|
|
|
},
|
|
|
- //获取订单列表
|
|
|
- loadData(source) {
|
|
|
- console.log(source);
|
|
|
- //这里是将订单挂载到tab列表下
|
|
|
- let index = this.tabCurrentIndex;
|
|
|
- let navItem = this.navList[index];
|
|
|
- let state = navItem.state;
|
|
|
- if (source === 'tabChange' && navItem.loaded === true) {
|
|
|
- //tab切换只有第一次需要加载数据
|
|
|
- return;
|
|
|
- }
|
|
|
- if (navItem.loadingType === 'loading') {
|
|
|
- //防止重复加载
|
|
|
- return;
|
|
|
- }
|
|
|
- navItem.loadingType = 'loading';
|
|
|
- setTimeout(() => {
|
|
|
- let orderList = [];
|
|
|
- orderList.forEach(item => {
|
|
|
- navItem.orderList.push(item);
|
|
|
- });
|
|
|
- //loaded新字段用于表示数据加载完毕,如果为空可以显示空白页
|
|
|
- this.$set(navItem, 'loaded', true);
|
|
|
- //判断是否还有数据, 有改为 more, 没有改为noMore
|
|
|
- navItem.loadingType = 'more';
|
|
|
- }, 600);
|
|
|
- }
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
@@ -163,26 +211,186 @@ export default {
|
|
|
<style lang="scss">
|
|
|
page {
|
|
|
height: 100%;
|
|
|
+ background: #ffffff;
|
|
|
+}
|
|
|
+.top_box {
|
|
|
+ padding: 20rpx 26rpx 20rpx 47rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ .yue-tit {
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ .yue-num {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ff6f0f;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
+.line_box {
|
|
|
+ width: 100%;
|
|
|
+ height: 20rpx;
|
|
|
+ background: #f8f8f8;
|
|
|
+}
|
|
|
+.cz_box {
|
|
|
+ padding: 40rpx 20rpx 20rpx;
|
|
|
+ .cz_wrap {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding-bottom: 20rpx;
|
|
|
+ border-bottom: 1px solid #e6e6e6;
|
|
|
+ .cz_tit {
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ .cz_input {
|
|
|
+ text-align: right;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ // color: #BFBFBF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .zc_list_box {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ .zc_list_price {
|
|
|
+ width: 202rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ background: #f0f0f0;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ margin-top: 36rpx;
|
|
|
+ margin-right: 50rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ &:nth-child(3n) {
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .seletPrice {
|
|
|
+ background: linear-gradient(180deg, #08c4e6, #50ead2);
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.recha-box {
|
|
|
+ padding: 50rpx 30rpx 0;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ .recha-frame {
|
|
|
+ width: 210rpx;
|
|
|
+ height: 181rpx;
|
|
|
+ border: 1px solid #dbdede;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ margin-right: 30rpx;
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+ &:nth-child(3n) {
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+ .recha-top {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .recha-img {
|
|
|
+ width: 64rpx;
|
|
|
+ height: 62rpx;
|
|
|
+ }
|
|
|
+ .recha-tit {
|
|
|
+ margin-left: 10rpx;
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .recha-song {
|
|
|
+ margin-top: 20rpx;
|
|
|
+ font-size: $font-base;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ff9900;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .select-frame {
|
|
|
+ border: 1px solid #ef041f;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.rechar-box {
|
|
|
+ padding: 30rpx 20rpx 0;
|
|
|
+ .rechar-title {
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333333;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+ }
|
|
|
+ .rechar-text {
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+}
|
|
|
+.cz-type {
|
|
|
+ margin-top: 22rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 32rpx;
|
|
|
+ align-items: center;
|
|
|
+ .type-left {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .icon {
|
|
|
+ height: 48rpx;
|
|
|
+ image {
|
|
|
+ width: 48rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tit {
|
|
|
+ margin-left: 12rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .type-right {
|
|
|
+ image {
|
|
|
+ width: 36rpx;
|
|
|
+ height: 36rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
.add-btn {
|
|
|
&.modified {
|
|
|
color: $base-color;
|
|
|
}
|
|
|
&.up {
|
|
|
- background-color: $base-color;
|
|
|
+ // background:$base-color;
|
|
|
color: #fff;
|
|
|
}
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
- width: 690rpx;
|
|
|
+ width: 560rpx;
|
|
|
height: 80rpx;
|
|
|
margin: 0 auto;
|
|
|
- margin-top: 30rpx;
|
|
|
+ margin-top: 120rpx;
|
|
|
font-size: $font-lg;
|
|
|
- border-radius: 10rpx;
|
|
|
- // box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
|
|
|
+ background: linear-gradient(90deg, #08C4E6, #50EAD2);
|
|
|
+ box-shadow: 0px 12rpx 45rpx 5rpx rgba(36, 17, 2, 0.04);
|
|
|
+ border-radius: 8rpx;
|
|
|
}
|
|
|
.row-box {
|
|
|
margin-top: 30rpx;
|
|
@@ -229,9 +437,15 @@ page {
|
|
|
width: 100%;
|
|
|
height: 120rpx;
|
|
|
border-bottom: 1px solid $border-color-light;
|
|
|
+ padding-right: 25rpx;
|
|
|
.icon {
|
|
|
font-size: 48rpx;
|
|
|
padding-right: 20rpx;
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+ .yongjing {
|
|
|
+ width: 48rpx;
|
|
|
+ height: 48rpx;
|
|
|
}
|
|
|
.iconweixin1 {
|
|
|
color: #18bf16;
|