mz/pages/wallet/withdrawal.vue

<template>
	<view class="content">
		<view class="tip">提现7个工作日到账</view>
		<!-- 可提现金额 -->
		<view class="row-box">
			<view class="title">提现金额</view>
			<view class="row">
				<text class="tit">￥</text>
				<input class="input" type="number" v-model="withdrawal" :placeholder="'最低提现金额' + minPrice + '元'" placeholder-class="placeholder" />
				<view class="buttom" @click="withdrawal = money">全部提现</view>
			</view>
		</view>
		<view class="navbar">
			<view v-for="(item, index) in navList" :key="index" class="nav-item" :class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">{{ item.text }}</view>
		</view>
		<swiper :current="tabCurrentIndex" class="swiper-box" duration="300" @change="changeTab">
			<swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navList" :key="tabIndex">
				<view class="row b-b">
					<text class="tit">姓名</text>
					<input class="input" v-model="tabItem.orderList.name" type="text" placeholder="提款人姓名" placeholder-class="placeholder" />
				</view>
				<view class="row b-b" v-if="tabIndex==1">
					<text class="tit">账号</text>
					<input class="input" v-model="tabItem.orderList.code" type="text" placeholder="请输入账号" placeholder-class="placeholder" />
				</view>
				<view class="row b-b" v-if="tabIndex==0">
					<text class="tit">银行卡号</text>
					<input class="input" v-model="tabItem.orderList.code" type="text" placeholder="请输入银行卡号" placeholder-class="placeholder" />
				</view>
				<view class="row b-b" v-if="tabIndex==2">
					<text class="tit">微信号</text>
					<input class="input" v-model="tabItem.orderList.code" type="text" placeholder="请输入微信号" placeholder-class="placeholder" />
				</view>
				<view class="row b-b" v-if="tabIndex == 0">
					<text class="tit">所属银行</text>
					<input class="input" v-model="name" type="text" placeholder="请输入所属银行" placeholder-class="placeholder" />
				</view>
				<view class="row b-b" v-if="tabIndex == 0">
					<text class="tit">开户行</text>
					<input class="input" v-model="tabItem.orderList.bankName" type="text" placeholder="请输入开户地址所属支行" placeholder-class="placeholder" />
				</view>
			</swiper-item>
			
		</swiper>
		<!-- <view class="money-top">
			<view class="money">{{ money || 0.00 }}</view>
			<view class="text">可提现金额</view>
		</view> -->
		<button class="add-btn up" @click="confirm">提交申请</button>
	</view>
</template>

<script>
import { withdraw_info,save_withdraw } from '@/api/wallet.js';
import LbPicker from '@/components/lb-picker/index.vue'
export default {
	components: {
		LbPicker
	},
	data() {
		return {
			withdrawal: '', //提现金额
			minPrice: '', //最少提现金额
			money: '0.00', //可提现金额
			tabCurrentIndex: 0,
			extract_type:'',//支付方式
			token:'',
			name:'',
			show: false,
			extract_bank:[],
			navList: [
				// {
				// 	state: 0,
				// 	text: '支付宝',
				// 	loadingType: 'more',
				// 	orderList: {
				// 		name: '',
				// 		code: '',
				// 		id: ''
				// 	}
				// },
				{
					state: 0,
					text: '银行卡',
					loadingType: 'more',
					orderList: {
						name: '',
						code: '',
						bankName: '',
						id: ''
					}
				},
				// {
				// 	state: 2,
				// 	text: '微信',
				// 	loadingType: 'more',
				// 	orderList: {
				// 		name: '',
				// 		code: '',
				// 		id: ''
				// 	}
				// }
			]
		};
	},

	onLoad() {
		this.loadData();
	},
	methods: {
		// 加载余额信息
		async loadData() {
			withdraw_info({}).then(({ data }) => {
				this.money = data.brokerage_price;
				this.minPrice = data.extract_min_money;
				this.extract_bank = data.extract_bank;
				// this.freeze = data.incommissionCount;
			});
		},
		// 提交保存
		confirm() {
			let obj = this;
			// 获取当前选中的对象
			let arr = obj.navList[obj.tabCurrentIndex].orderList;
			let data = {
				money: obj.withdrawal, //金额
				name: arr.name
			};
			// 判断是否为支付宝
			// if (obj.tabCurrentIndex == 0) {
			// 	data.alipay_code = arr.code;
			// 	data.extract_type = 'alipay'
			// }
			// 判断是否为银行卡
			if (obj.tabCurrentIndex == 0) {
				data.bankname = obj.name+','+arr.bankName;
				data.cardnum = arr.code;
				data.extract_type = 'bank'
			}
			// 判断是否微信
			if (obj.tabCurrentIndex == 2) {
				data.weixin= arr.code;
				data.extract_type = 'weixin'
			}
			if (obj.withdrawal < obj.minPrice) {
				obj.$api.msg('提现金额必须大于' + obj.minPrice);
				return;
			}
			console.log(data,55)
			save_withdraw(data)
				.then(e => {
					obj.$api.msg(e.msg);
					obj.withdrawal = '';
					obj.loadData();
					setTimeout(function() {
						uni.navigateTo({
							url:'/pages/wallet/commission'
						})
					  }, 1000);
				})
				.catch(e => {
					console.log();
				});
		},
		//swiper 切换
		changeTab(e) {
			this.tabCurrentIndex = e.target.current;
		},
		//顶部tab点击
		tabClick(index) {
			this.tabCurrentIndex = index;
		},
	}
};
</script>

<style lang="scss">
.row {
	display: flex;
	align-items: center;
	position: relative;
	padding: 0 30rpx;
	height: 110rpx;
	background: #fff;
	.tit {
		flex-shrink: 0;
		width: 180rpx;
		font-size: 30rpx;
		color: $font-color-dark;
	}
	.input {
		flex: 1;
		font-size: 30rpx;
		color: $font-color-dark;
	}
	.iconlocation {
		font-size: 36rpx;
		color: $font-color-light;
	}
}
page,
.content {
	background: $page-color-base;
	height: 100%;
	padding-top: 10rpx;
}
.tip{
	font-size: 30rpx;
	width: 100%;
	color: #6786FB;
	background:rgba(103,134,251,0.18);
	padding: 15rpx 25rpx;
	
}
// 可提现金额
.money-top {
	width: 100%;
	height: 120rpx;
	background: #FFFFFF;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	margin-bottom: 50rpx;
	.text {
		font-size: $font-base;
		font-weight: 500;
		color: rgba(102,102,102,1);
	}
	.money {
		font-size: 42rpx;
		font-weight: bold;
		color: rgba(51,51,51,1);
	}
}

.swiper-box {
	margin-bottom: 25rpx;
	height: 500rpx;
}

.navbar {
	margin-top: 20rpx;
	display: flex;
	height: 40px;
	padding: 0 5px;
	background: #fff;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
	position: relative;
	z-index: 10;
	.nav-item {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		font-size: 15px;
		color: $font-color-dark;
		position: relative;
		&.current {
			color: $base-color;
			&:after {
				content: '';
				position: absolute;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				width: 44px;
				height: 0;
				border-bottom: 2px solid $base-color;
			}
		}
	}
}

.add-btn {
	&.up {
		background-color: $base-color;
		color: #fff;
	}
	display: flex;
	align-items: center;
	justify-content: center;
	width: 690rpx;
	height: 80rpx;
	margin: 0 auto;
	margin-top: 30rpx;
	font-size: $font-lg;
	border-radius: 10rpx;

	background: $base-color;
	border-radius: 40px;
	// box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
}
.row-box {
	padding: 20rpx 30rpx;
	background: #fff;
	.title {
		font-size: $font-base + 2rpx;
		color: $font-color-dark;
	}
	.row {
		display: flex;
		align-items: center;
		position: relative;
		height: 150rpx;
		.tit {
			flex-shrink: 0;
			width: 40rpx;
			font-size: 30rpx;
			color: $font-color-dark;
		}
		.input {
			flex: 1;
			font-size: 30rpx;
			color: $font-color-dark;
		}
		.iconlocation {
			font-size: 36rpx;
			color: $font-color-light;
		}

		.buttom {
			color: $font-color-spec;
			font-size: $font-base;
		}
	}
}
</style>