MeiMeiZhuan/pages/wallet/account.vue

<template>
	<view class="content">
		<view class="withdrawal-money">
			<view class="icon">{{ money }}</view>
			<text class="text">可提现金额</text>
		</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==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==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==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 == 1">
					<text class="tit">所属银行</text>
					<input class="input" v-model="tabItem.orderList.bankName" type="text" placeholder="请输入所属银行" placeholder-class="placeholder" />
				</view>
				<view class="row b-b">
					<text class="tit">电话号码</text>
					<input class="input" v-model="tabItem.orderList.phone" type="text" placeholder="请输入电话号码" placeholder-class="placeholder" />
				</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>
			</swiper-item>
		</swiper>

		<button class="add-btn up" @click="confirm">提交申请</button>
	</view>
</template>

<script>
import { aliInfo, bankInfo, setAliInfo, setBankInfo, extractBank, extractCash } from '@/api/wallet.js';
import { getMoneyStyle } from '@/utils/rocessor.js';
export default {
	filters: {
		getMoneyStyle
	},
	data() {
		return {
			type: 'alipay', //提现方式
			withdrawal: '', //提现金额
			minPrice: '', //最少提现金额
			money: '0.00', //可提现金额
			freeze: '0.0', //冻结金额
			tabCurrentIndex: 0,
			navList: [
				{
					state: 0,
					text: '支付宝',
					loadingType: 'more',
					orderList: {
						name: '',
						code: '',
						id: '',
						phone:''
					}
				},
				{
					state: 1,
					text: '银行卡',
					loadingType: 'more',
					orderList: {
						name: '',
						code: '',
						bankName: '',
						id: '',
						phone:''
					}
				}
				// {
				// 	state: 2,
				// 	text: '微信',
				// 	loadingType: 'more',
				// 	orderList: {
				// 		name: '',
				// 		code: '',
				// 		id: ''
				// 	}
				// }
			]
		};
	},

	onLoad(options) {
		this.loadData();
	},
	watch: {
		tabCurrentIndex(newValue, oldValue) {
			console.log(newValue);
			if(newValue==0){
				this.type ='alipay'
			}
			if(newValue==1){
				this.type ='bank'
			}
			if(newValue==2){
				this.type ='weixin'
			}
			console.log(this.type);
		}
	},
	methods: {
		// 加载余额信息
		async loadData() {
			extractBank({}).then(({ data }) => {
				this.money = parseFloat(data.brokerage_price);
				this.minPrice = data.minPrice;
				this.freeze = data.incommissionCount;
			});
		},
		//swiper 切换
		changeTab(e) {
			this.tabCurrentIndex = e.target.current;
		},
		//顶部tab点击
		tabClick(index) {
			this.tabCurrentIndex = index;
		},
		// 提交保存
		confirm() {
			
			let obj = this;
			// 获取当前选中的对象
			let arr = obj.navList[obj.tabCurrentIndex].orderList;
			let data = {
				extract_type: this.type, //bank -银行卡 alipay-支付宝 weixin-微信
				money: this.withdrawal, //金额
				money_type: 0, //0佣金1余额
				name: arr.name,
				phone:arr.phone
			};
			// 判断是否为支付宝
			if (obj.tabCurrentIndex == 0) {
				data.alipay_code = arr.code;
			}
			// 判断是否为银行卡
			if (obj.tabCurrentIndex == 1) {
				data.bankname = arr.bankName;
				data.cardnum = arr.code;
			}
			// 判断是否微信
			if (obj.tabCurrentIndex == 2) {
				data.weixin= arr.code;
			}
			
			if (arr.name == '') {
				this.$api.msg('必须填写姓名');
				return;
			}
			if (arr.code == '') {
				this.$api.msg('必须填写账号');
				return;
			}
			if (arr.phone == '') {
				this.$api.msg('必须填写电话号码');
				return;
			}
			if (arr.bankName == '') {
				this.$api.msg('必须填写所属银行');
				return;
			}
			if (this.withdrawal < this.minPrice) {
				this.$api.msg('提现金额必须大于' + this.minPrice);
				return;
			}
			uni.showModal({
			    title: '提示',
			    content: '请仔细查看银行卡号和支付宝账号无误并与本人名称一致，商家会在1-3个工作日转账至您本人账户',
			    success: function (res) {
			        if (res.confirm) {
			            console.log('用户点击确定');
						extractCash(data)
							.then(e => {
								uni.showToast({
									title: '提交成功',
									duration: 2000,
									position: 'top'
								});
								uni.navigateTo({
								    url: '/pages/award/award'
								});
							})
							.catch(e => {
								console.log();
							});
			        } else if (res.cancel) {
			            console.log('用户点击取消');
			        }
			    },
				fail:function(err){
					console.log(err)
				}
			});
			
		},
		/* 保存银行卡详细 */
		setBankInfo(obj) {
			setBankInfo(obj)
				.then(e => {
					uni.showToast({
						title: '修改成功',
						duration: 2000,
						position: 'top'
					});
					this.$api.prePage().dataUp();
				})
				.catch(e => {
					console.log(e);
				});
		},
		// 修改支付宝信息
		setAliInfo(obj) {
			setAliInfo(obj)
				.then(e => {
					uni.showToast({
						title: '修改成功',
						duration: 2000,
						position: 'top'
					});
					this.$api.prePage().dataUp();
				})
				.catch(e => {
					console.log(e);
				});
		}
	}
};
</script>

<style lang="scss">
.row {
	display: flex;
	align-items: center;
	position: relative;
	padding: 0 30rpx;
	height: 110rpx;
	background: #fff;
	.tit {
		flex-shrink: 0;
		width: 130rpx;
		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%;
}

.withdrawal-money {
	text-align: center;
	padding: 20rpx 0;
	background: #fff;
	margin: 20rpx 0;
	.icon {
		background-size: 100%;
		font-size: 42rpx;
		color: $font-color-dark;
		font-weight: bold;
		background-repeat: no-repeat;
		background-position: center;
	}
	.text {
		font-size: 28rpx;
		color: #666666;
	}
}

.swiper-box {
	height: 750rpx;
}

.navbar {
	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 #fc2a3f;
			}
		}
	}
}

.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: linear-gradient(0deg, rgba(250, 39, 64, 1), rgba(254, 85, 68, 1));
	border-radius: 40px;
	// box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
}
.row-box {
	margin-top: 30rpx;
	padding: 20rpx 30rpx;
	background: #fff;
	.title {
		font-size: $font-base + 2rpx;
		color: $font-color-dark;
	}
	.row {
		display: flex;
		align-items: center;
		position: relative;
		height: 80rpx;
		.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>