medicine-xcx/pagesA/my_other_list/channel/wallet/index.vue

<template>
	<view class="wallte">
		<text class="title">钱包余额</text>
		<view class="money_num">
			<text>￥</text>
			<text class="num">{{user_info.wallet}}</text>
		</view>
		<view class="grid">
			<text class="title">提现到微信零钱</text>
			<view class="input_box">
				<text class="text_icon">￥</text>
				<input type="number" v-model="money" >
				<text class="withdraw_deposit" @click="allMoney">全部提现</text>
			</view>
			<text class="info_text">提现手续费为10%</text>
		</view>
		<view class="info flex align-center justify-between">
			<view>
				<text class="dit">·</text>
				<text>预计24小时到账</text>
			</view>
			<view class="theme-color" @click="toInfo">余额明细</view>
		</view>
		<button class="btn_money" @click="addMoney">立即提现</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				money: null,
				showMoney: 0,
				user_info: {},
				type: 0
			}
		},
		onLoad(options) {
			this.type = options.type
			this.getUserInfo()
		},
		methods: {
			toInfo () {
				uni.navigateTo({
					url: '/pagesA/my_other_list/webmaster/reward_centers/index?title=余额明细&type=' + this.type
				})
			},
			// 全部提现
			allMoney(){
				this.money = this.user_info.wallet
			},
			getUserInfo(){
				uni.showLoading();
				this.$api('getUserInfo',{money: this.money}).then(res => {
					let { code, result, message} = res;
					if( code == 200) {
						this.user_info = {...result.account,...result.userInfo}
					}else{
						this.$Toast(message);
					}
					uni.hideLoading();
				}).catch(err => {
					uni.hideLoading();
					this.$Toast(err.message);
				})
			},
			// 立即体现
			addMoney(){
				uni.showLoading();
				this.$api('getMoneyStation',{money: this.money}).then(res => {
					let { code, result, message} = res;
					uni.hideLoading();
					if( code == 200) {
						that.user_info.wallet = 0
						this.$Toast(result)
					}else{
						this.$Toast(message);
					}
				}).catch(err => {
					uni.hideLoading();
					this.$Toast(err.message);
				})
			}
		}
	}
</script>

<style lang="scss">
	.wallte{
		display: flex;
		flex-direction: column;
		text-align: center;
		.money_num{
			padding-top: 44rpx;
			padding-bottom: 40rpx;
			color: #DB0618;
			.num{
				font-size: 62rpx;
			}
		}
		.grid{
			width: 689rpx;
			height: 300rpx;
			margin: 0 auto;
			border-radius: 26rpx;
			padding-top: 23rpx;
			box-sizing: border-box;
			background-color: #F5F5F5;
			.title{
				font-size: 30rpx;
				font-weight: bold;
			}
			.input_box{
				width: 669rpx;
				margin-top: 78rpx;
				margin-bottom: 33rpx;
				display: flex;
				justify-content: flex-start;
				border-bottom: 1px solid #B5B0B0;
				.text_icon{
					padding-left: 20rpx;
					color: #707070;
					font-size: 35rpx;
					font-weight: bold;
				}
				.withdraw_deposit{
					font-size: 26rpx;
					padding-right: 35rpx;
					color: #01AEEA;
				}
				input{
					flex: 1;
					text-align: left;
					font-size: 35rpx;
				}
			}
			.info_text{
				display: flex;
				justify-content: flex-start;
				margin-left: 28rpx;
				font-size: 26rpx;
				color: #707070;
			}
		}
		.info{
			display: flex;
			margin-top: 28rpx;
			padding: 0 50rpx;
			color: #707070;
			.dit{
				font-size: 48rpx;
				font-weight: bold;
				line-height: 40rpx;
				padding-right: 20rpx;
			}
		}
	}
	.title{
		padding-top: 60rpx;
		font-size: 32rpx;
		font-weight: bold;
	}
	.money_num{
		
	}
	.btn_money{
		width: 668rpx;
		height: 88rpx;
		font-size: 34rpx;
		line-height: 88rpx;
		position: fixed;
		left: 45rpx;
		bottom: 66rpx;
		background-color: #01AEEA;
		color: #fff;
		border-radius: 38rpx;
	}
	
</style>