ysg/pages/money/account.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">开户银行</text>
					<!-- range是你要显示的数组，range-key是数组中你要显示的那一项，range-key="{{'label'}}" ，range-key中的数据要加引号！！！！！才生效！ -->
					<picker class="input" :range="bankList" mode="selector" :value="addressIndex" @change="changeBank">
						<view v-if="bankList[bankIndex]">{{bankList[bankIndex] }}</view>
						<view v-else class="font-color-gray">开户银行</view>
					</picker>
				</view>
				<view class="row b-b">
					<text class="tit">所属支行</text>
					<input class="input" v-model="tabItem.orderList.zhiBank" type="text" placeholder="所属支行"
						placeholder-class="placeholder" />
				</view>
				<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">
					<text class="tit">{{ tabIndex == 0 ? '账号' : '银行卡号' }}</text>
					<input class="input" v-model="tabItem.orderList.code" 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,
		extractBank
	} from '@/api/wallet.js';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				bankList: [],
				bankIndex: 0,
				addressDetail: '',
				addressIndex: [0],
				tabCurrentIndex: 0,
				addressData: {
					name: '',
					mobile: '',
					area: '',
					default: false,
					id: ''
				},
				navList: [
					// {
					// 	state: 0,
					// 	text: '支付宝',
					// 	loadingType: 'more',
					// 	orderList: {
					// 		name: '',
					// 		code: '',
					// 		id: ''
					// 	}
					// },

					{
						state: 1,
						text: '银行卡',
						loadingType: 'more',

						orderList: {

							name: '',
							code: '',
							id: '',
							bank: '',
							zhiBank: ''
						}
					}
				]
			};
		},

		onLoad(options) {
			this.tabCurrentIndex = +options.state || 0;
			// this.loadAli();
			// this.loadBank();
			this.onCityClick();
		},
		computed: {
			...mapState('user', ['bankInfo'])
		},
		methods: {
			...mapMutations('user', ['addBank']),
			changeBank(e) {
				console.log(e, '22221');
				this.bankIndex = e.target.value
			},
			//选择下拉框
			onCityClick() {
				extractBank({}).then(({
					data
				}) => {
					console.log(data, '22222');
					// this.navList.orderList.name = data.extractBank
					this.bankList = data.extractBank
				})
			},
			//加载数据
			loadAli(source) {
				aliInfo({}).then(({
					data
				}) => {
					let order = this.navList[0].orderList;
					this.$set(order, 'name', data.fullname);
					this.$set(order, 'code', data.alino);
					this.$set(order, 'id', data.id);
				});
			},
			loadBank() {
				bankInfo({}).then(({
					data
				}) => {
					console.log(data, '22222');
					let order = this.navList[1].orderList;
					this.$set(order, 'name', data.fullname);
					this.$set(order, 'code', data.bankno);
					this.$set(order, 'bankName', data.bank);
					this.$set(order, 'id', data.id);
				});
			},
			//swiper 切换
			changeTab(e) {
				this.tabCurrentIndex = e.target.current;
			},
			//顶部tab点击
			tabClick(index) {
				this.tabCurrentIndex = index;
			},
			// 提交保存
			confirm() {
				let obj = this;
				let arr = obj.navList[0].orderList;
				arr.bank = obj.bankList[obj.bankIndex]
				this.addBank(arr);
		
				// prevPage.$vm.sh = 100; //修改上一页data里面的sh参数值为100

				if (obj.tabCurrentIndex == 0) {
					if (!arr.name) {
						return this.$api.msg('请输入提款人姓名');
					}
					if (!obj.bankList[obj.bankIndex]) {
						// console.log(obj.bankList[obj.bankIndex]);
						return this.$api.msg('请输入所属银行');
					}
					if (!arr.code) {
						return this.$api.msg('请输入银行卡号');
					}
					if (!arr.zhiBank) {
						return this.$api.msg('请输入所属支行');
					}
					let data = {
						fullname: arr.name,

						bank: obj.bankList[obj.bankIndex] + '(' + arr.zhiBank + ')',
						bankno: arr.code
					};
					console.log(data, '4444');
					// #ifdef H5
					// prevPage.$vm.bankData = data;
					// console.log(data, '54454');
					// #endif
					// #ifdef MP
					// prevPage.setData({
					// 	bankData: data
					// });
					// #endif
					// obj.setBankInfo({
					// 	fullname: arr.name,
					// 	bank: arr.bankName,
					// 	bankno: arr.code,
					// 	id:arr.id
					// });
					uni.navigateBack({
						delta: 1
					});
				}
				// if (obj.tabCurrentIndex == 0) {
				// 	if (!arr.name) {
				// 		return this.$api.msg('请输入提款人姓名');
				// 	}
				// 	if (!arr.code) {
				// 		return this.$api.msg('请输入支付宝账号');
				// 	}
				// 	let data = {
				// 		fullname: arr.name,
				// 		alino: arr.code
				// 	};
				// 	// #ifdef H5
				// 	prevPage.$vm.aliData = data;
				// 	// #endif

				// 	// #ifdef MP
				// 	prevPage.setData({
				// 		bankData: data
				// 	});
				// 	// #endif
				// 	// obj.setAliInfo({
				// 	// 	fullname: arr.name,
				// 	// 	alino: arr.code,
				// 	// 	id:arr.id
				// 	// });
				// 	uni.navigateBack({
				// 		delta: 1
				// 	});
				// }
			},
			/* 保存银行卡详细 */
			setBankInfo(obj) {
				setBankInfo(obj)
					.then(e => {
						uni.showToast({
							title: '修改成功',
							duration: 2000,
							position: 'top'
						});
						this.$api.prePage().dataUp();
						setTimeout(() => {
							uni.navigateBack();
						}, 1500);
					})
					.catch(e => {
						console.log(e);
					});
			},
			// 修改支付宝信息
			setAliInfo(obj) {
				setAliInfo(obj)
					.then(e => {
						uni.showToast({
							title: '修改成功',
							duration: 2000,
							position: 'top'
						});
						this.$api.prePage().dataUp();
						setTimeout(() => {
							uni.navigateBack();
						}, 1500);
					})
					.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 {
			margin-right: 50rpx;
			flex-shrink: 0;
			width: 120rpx;
			font-size: 30rpx;
			color: $font-color-dark;
		}

		.input {
			display: flex;
			align-items: center;
			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: 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 $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;
		// box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
	}
</style>