zhengyi/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>
					<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>
				<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>
			</swiper-item>
		</swiper>

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

<script>
import { aliInfo, bankInfo, setAliInfo, setBankInfo } from '@/api/wallet.js';
import { edit } from '@/api/user.js';
import { mapState, mapMutations } from 'vuex';
import { orderData, getUserInfo,service } from '@/api/user.js';
export default {
	data() {
		return {
			tabCurrentIndex: 0,
			navList: [
				{
					state: 0,
					text: '支付宝',
					loadingType: 'more',
					orderList: {
						name: '',
						code: '',
						id: ''
					}
				},
				{
					state: 1,
					text: '银行卡',
					loadingType: 'more',
					orderList: {
						name: '',
						code: '',
						bankName: '',
						id: ''
					}
				}
			]
		};
	},
	computed: {
		...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
	},
	onLoad(options) {
		this.tabCurrentIndex = +options.state || 0;
		console.log(this.userInfo,'123456')
		if(this.userInfo.alipay_code != null){
			this.navList[0].orderList.code = this.userInfo.alipay_code
		}
		if(this.userInfo.alipay_name != null){
			this.navList[0].orderList.name = this.userInfo.alipay_name
		}
		if(this.userInfo.bank_code != null){
			this.navList[1].orderList.code = this.userInfo.bank_code
		}
		if(this.userInfo.bank_name != null){
			this.navList[1].orderList.bankName = this.userInfo.bank_name
		}
		if(this.userInfo.bank_user_name != null){
			this.navList[1].orderList.name = this.userInfo.bank_user_name
		}
		// this.loadAli();
		// this.loadBank();
	},

	methods: {
		...mapMutations('user', ['setUserInfo', 'setOrderInfo']),
		//加载数据
		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 }) => {
				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[obj.tabCurrentIndex].orderList;
			console.log(arr);
			let pages = getCurrentPages(); //获取所有页面栈实例列表
			console.log(pages);
			let nowPage = pages[pages.length - 1]; //当前页页面实例
			let prevPage = pages[pages.length - 2]; //上一页页面实例
			console.log(prevPage);
			// prevPage.$vm.sh = 100;   //修改上一页data里面的sh参数值为100
			if (obj.tabCurrentIndex == 1) {
				if (!arr.name) {
					return this.$api.msg('请输入提款人姓名');
				}
				if (!arr.bankName) {
					return this.$api.msg('请输入所属银行');
				}
				if (!arr.code) {
					return this.$api.msg('请输入银行卡号');
				}
				let data = {
					bank_user_name: arr.name,
					bank_name: arr.bankName,
					bank_code: arr.code
				};
				// // #ifdef H5
				// prevPage.$vm.bankData = data;
				// // #endif
				// // #ifdef MP
				// prevPage.setData({
				// 	bankData: data
				// });
				// // #endif
				edit({
					bank_user_name: arr.name,
					bank_name: arr.bankName,
					bank_code: arr.code
				}).then(e => {
					obj.$api.msg('修改成功');
					obj.getUserInfo();
				});
				// obj.setBankInfo({
				// 	fullname: arr.name,
				// 	bank: arr.bankName,
				// 	bankno: arr.code,
				// 	id:arr.id
				// });
			}
			if (obj.tabCurrentIndex == 0) {
				if (!arr.name) {
					return this.$api.msg('请输入提款人姓名');
				}
				if (!arr.code) {
					return this.$api.msg('请输入支付宝账号');
				}
				let data = {
					alipay_name: arr.name,
					alipay_code: arr.code
				};
				// // #ifdef H5
				// prevPage.$vm.aliData = data;
				// // #endif

				// // #ifdef MP
				// prevPage.setData({
				// 	bankData: data
				// });
				// // #endif
				console.log(111);
				edit({
					alipay_name: arr.name,
					alipay_code: arr.code
				})
					.then(e => {
						console.log(e, '123456');
						obj.$api.msg('修改成功');
						obj.getUserInfo();
					})
					.catch(e => {
						console.log(e);
					});
				// obj.setAliInfo({
				// 	fullname: arr.name,
				// 	alino: arr.code,
				// 	id:arr.id
				// });
			}
		},
		// 更新用户信息
		getUserInfo() {
			getUserInfo({})
				.then(({ data }) => {
					console.log(data)
					this.setUserInfo(data);
					// 获取用户数据完毕后在获取订单数据防止多次跳转到登录页
					orderData({})
						.then(({ data }) => {
							this.setOrderInfo(data);
							uni.navigateBack({
								delta: 1
							});
						})
						.catch(e => {
							this.setOrderInfo({
								complete_count: 0, //完成
								received_count: 0, //待收货
								unshipped_count: 0, //待发货
								order_count: 0, //订单总数
								unpaid_count: 0 //待付款
							});
						});
				})
				.catch(e => {
					console.log(e);
				});
		},
		/* 保存银行卡详细 */
		// 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 {
		flex-shrink: 0;
		width: 120rpx;
		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%;
}

.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>