MeiMeiZhuan/pages/wallet/nummanage.vue

<template>
	<view class="content">
		<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">{{ tabIndex == 1 ? '微信号' : '真实姓名' }}</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>
				</view>
				<view class="row b-b" v-if="tabIndex == 2">
					<text class="tit">手机号</text>
					<input class="input" v-model="tabItem.orderList.phone" 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.bankName" type="text" placeholder="请输入验证码" placeholder-class="placeholder" />
					<text class="red"  @click="verification">{{ countDown == 0 ? '获取验证码' : countDown }}</text>
				</view>
				<view class="row b-b" v-if="tabIndex != 1">
					<text class="tit">{{ tabIndex == 0 ? '支付宝账号' : '银行卡号' }}</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.bankName" 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.bankName" type="text" placeholder="请输入所属支行" placeholder-class="placeholder" />
				</view>
			</swiper-item>
		</swiper>
		<button class="add-btn up" @click="confirm">确认</button>
	</view>
</template>

<script>
import { aliInfo, bankInfo, setAliInfo, setBankInfo } from '@/api/wallet.js';
export default {
	data() {
		return {
			phone:0,//手机号
			countDown: 0, //倒计时
			tabCurrentIndex: 0,
			navList: [
				{
					state: 0,
					text: '支付宝',
					loadingType: 'more',
					orderList: {
						name: '',
						code: '',
						id:''
					}
				},
				{
					state: 1,
					text: '微信',
					loadingType: 'more',
					orderList: {
						name: '',
						code: '',
						id:''
					}
				},
				{
					state: 2,
					text: '银行卡',
					loadingType: 'more',
					orderList: {
						name: '',
						code: '',
						bankName: '',
						id:''
					}
				}
			]
		};
	},
	watch: {
		// 监听倒计时
		countDown(i) {
			if (i == 0) {
				clearInterval(this.time);
			}
		}
	},
	onLoad(options) {
		this.tabCurrentIndex = +options.state || 0;
	},

	methods: {
		//发送验证码
		verification() {
			let obj = this;
			if (this.phone == '') {
				this.$api.msg('请输入电话号码');
				return;
			}
			if (this.phone.length < 11) {
				this.$api.msg('请输入正确的手机号');
				return;
			}
			// 判断是否在倒计时
			if (obj.countDown > 0) {
				return false;
			} else {
				obj.countDown = 60;
				obj.time = setInterval(() => {
					obj.countDown--;
				}, 1000);
				//调用验证码接口
				verify({
					phone: obj.phone,
					type: 'VERIFICATION_CODE'
				})
					.then(({ data }) => {})
					.catch(err => {
						console.log(err);
					});
			}
		},
		//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;
			console.log(obj.navList);
			if (obj.tabCurrentIndex == 1) {
				obj.setBankInfo({
					fullname: arr.name,
					bank: arr.bankName,
					bankno: arr.code,
					id:arr.id
				});
			}
			if (obj.tabCurrentIndex == 0) {
				obj.setAliInfo({
					fullname: arr.name,
					alino: arr.code,
					id:arr.id
				});
			}
		},
		/* 保存银行卡详细 */
		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;
	.red{
		flex-shrink: 0;
		width: 170rpx;
		font-size: 30rpx;
		color: #FC4141;
		padding-left: 20rpx;
		border-left: 1px solid #CCCCCC;
	}
	.tit {
		flex-shrink: 0;
		width: 150rpx;
		font-size: 30rpx;
		color: $font-color-dark;
		margin-right: 20rpx;
	}
	.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%;
}

.swiper-box {
	height: 700rpx;
}

.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: #333333;
			&: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:560rpx;
	height:80rpx;
	background:linear-gradient(0deg,rgba(250,39,64,1),rgba(254,85,68,1));
	border-radius:40rpx;
}
</style>