cbz-sj/pages/mine/wallet/withdraw.vue

<template>
	<view class="content">
		<view class="box">
			<view class="top">
				<view class="text_style1">可以提现金额</view>
				<view class="money">￥{{money}}</view>
			</view>
			<view class="hflex acenter jbetween cell" style="margin-top: 184rpx;">
				<view class="text_style2">提现至</view>
				<view class="hflex acenter" @click="open">
					<view class="text_style3" v-if="bank.length > 0">{{bank[active].number}}</view>
					<view class="text_style3" v-else>选择银行卡</view>
					<u-icon name="arrow-right" color="#000" size="10"></u-icon>
				</view>
			</view>
			<view class="cell1">
				<view class="text_style2">提现金额</view>
				<u-input v-model="value" placeholder="请输入提现金额" border="bottom" fontSize="20" @change="change">
					<view slot="prefix" class="text_style2">￥</view>
					<template slot="suffix">
						<view class="text1" @click="all">全部提现</view>
					</template>
				</u-input>
			</view>
			<view class="cell1 hflex acenter jbetween">
				<view class="text_style1">提现手续费</view>
				<view class="text_style2">￥{{service_money}}</view>
			</view>
			<view class="cell1 hflex acenter jbetween">
				<view class="text_style1">实际到账金额</view>
				<view class="text_style2">￥{{amount}}</view>
			</view>
			<view class="bottom">
				<view class="btn" @click="withdraw">立即提现</view>
			</view>
		</view>
		<u-popup :show="show" round="20" bgColor="#F4F4F4" :closeable="true" closeIconPos="top-left" mode="bottom" @close="close" :safeAreaInsetBottom="false">
			<view class="popup_bg">
				<view class="title">选择银行卡</view>
				<view class="add hflex acenter jbetween" @click="add">
					<view class="hflex acenter">
						<u-icon name="plus-circle" color="#506DFF" size="19"></u-icon>
						<view class="add_text">去添加</view>
					</view>
					<u-icon name="arrow-right" color="#9D9D9D" size="12"></u-icon>
				</view>
				<view class="list">
					<block v-for="(item,index) in bank" :key="index">
						<view class="hflex acenter jbetween item" @click="select(index)">
							<view class="hflex acenter">
								<view class="bank_name">{{item.bank}}({{item.number}})</view>
							</view>
							<view v-if="active == index">
								<u-icon name="checkbox-mark" color="#506DFF" size="14"></u-icon>
							</view>
						</view>
					</block>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	var that = ''
	export default {
		data() {
			return {
				money: '0.00',
				value: '',
				service: 0,
				service_money: 0,
				amount: 0,
				bank: [
				],
				active: -1,
				max_money: 10000,
				min_money: 1,
				show: false
			}
		},
		onLoad(options) {
			that = this 
			that.money = options.money
			var ser = Number(options.service)
			console.log('ser',ser);
			that.service = ser / 100
			console.log('service',that.service);
			that.getList()
			// that.getData()
		},
		methods: {
			getList() {
				$api.req({
					url: '/data/api.business.User/user_bank',
					method: 'POST'
				}, function(res) {
					if(res.code == 1) {
						that.bank = res.data.list
						/* var c = ''
						if(that.bank.length > 0) {
							for(var i=0;i<that.bank.length;i++) {
								c = that.bank[i].number.substr(-4)
								that.$set(that.bank[i],'number',c)
							}
						} */
					}
				})
			},
			getData() {
				$api.req({
					url: '/data/api.auth.Center/getwithinfo',
					method: 'POST',
					
				}, function(res) {
					if(res.code == 1) {
						that.money = res.data.money
						that.max_money = res.data.withdraw_max_price
						that.min_money = res.data.withdraw_min_price
						that.service = res.data.poundage_proportion / 100
						
					}
				})
			},
			// 全部体系那
			all() {
				that.value = that.money
				that.service_money = (Number(that.value) * that.service).toFixed(2)
				that.amount = (that.value - that.service_money).toFixed(2)
			},
			// 输入框发生改变
			change(e) {
				that.value = e
				console.log('1',Number(that.value));
				console.log('2',that.service);
				console.log((Number(that.value) * that.service));
				that.service_money = (Number(that.value) * that.service).toFixed(2)
				that.amount = (that.value - that.service_money).toFixed(2)
				console.log(that.service_money);
				console.log(that.amount);
			},
			// 立即提现
			withdraw() {
				if(that.active == -1) {
					$api.info("请先选择银行卡")
					return
				}
				if(that.value > 0) {
					if(Number(that.value) > Number(that.max_money) || Number(that.value) < Number(that.min_money)) {
						$api.info('请选择在'+that.min_money+'与'+that.max_money+'之间')
					} else {
						$api.req({
							url: '/data/api.business.User/user_withdrawal',
							method: 'POST',
							data: {
								money: that.value,
								bank_number: that.bank[that.active].number
							}
						},function(res) {
							if(res.code == 1) {
								$api.info(res.info)
								$api.jump(-1)
							}
						})
					}
				} else {
					$api.info("请输入提现金额")
				}
			},
			open() {
				that.show = true
			},
			close() {
				that.show = false
			},
			add() {
				$api.jump('/pages/mine/wallet/add')
			},
			select(index) {
				that.active = index
				that.close()
				that.bankName = that.bank[index].name
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content::v-deep {
		padding: 0 30rpx;
		position: relative;
		.box {
			margin: 32rpx 0 20rpx;
			.top {
				position: absolute;
				left: 0;
				top: 0;
				width: 750rpx;
				padding: 32rpx 30rpx 20rpx;
				background: linear-gradient(360deg, #F4F4F4 0%, #F2F6FC 100%);
			}
			.text_style1 {
				font-size: 30rpx;
				color: #666;
			}
			.money {
				font-size: 60rpx;
				color: #222;
				margin: 20rpx 0;
			}
			.text_style2 {
				font-size: 28rpx;
				color: #222;
			}
			.cell {
				padding: 32rpx 0;
				border-bottom: 1rpx solid #f3f3f3;
				
				.text_style3 {
					font-size: 24rpx;
					color: #222;
					padding-right: 8rpx;
				}
			}
			.cell1 {
				margin: 32rpx 0;
				.u-input {
					width: 100% !important;
					height: 104rpx !important;
					font-size: 60rpx !important;
					box-sizing: border-box;
					// padding: 30rpx 48rpx !important;
					margin: 26rpx 0;
				}
				.text1 {
					font-size: 26rpx;
					color: #506dff;
				}
			}
			.bottom {
				margin-top: 100rpx;
				.btn {
					width: 100%;
					height: 84rpx;
					border-radius: 48rpx;
					background-color: #506dff;
					text-align: center;
					line-height: 84rpx;
					font-size: 36rpx;
					color: #fff;
				}
			}
		}
		.popup_bg {
			width: 100%;
			background: #F4F4F4;
			box-sizing: border-box;
			padding: 0 30rpx 150rpx;
			border-radius: 40rpx 40rpx 0px 0px;
			.title {
				width: 100%;
				text-align: center;
				font-size: 36rpx;
				font-weight: 400;
				color: #000000;
				line-height: 50rpx;
				padding: 32rpx 0;
			}
			.add {
				width: 100%;
				height: 96rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				margin: 12rpx 0 20rpx;
				box-sizing: border-box;
				padding: 30rpx 20rpx;
				.add_text {
					font-size: 32rpx;
					font-weight: 400;
					color: #555555;
					line-height: 44rpx;
					padding-left: 24rpx;
				}
			}
			.list {
				background: #FFFFFF;
				border-radius: 10px;
				box-sizing: border-box;
				padding: 0 20rpx;
				.item {
					padding: 40rpx 0;
					border-bottom: 1rpx solid #F6F6F6;
					.bank_icon {
						width: 40rpx;
						height: 40rpx;
					}
					.bank_name {
						font-weight: 400;
						color: #555555;
						line-height: 40rpx;
					}
				}
				.item:nth-last-child(1) {
					border: none;
				}
			}
		}
	}
</style>