xhq/pages/user/sqdl.vue

<template>
	<view class="content">
		<view class="flex nav-list">
			<view class="item" v-for="(item,index) in navList" :class="{'action': current == index}"
				@click="changeNavT(index)">
				{{item.tit}}
			</view>
		</view>
		<view class="" style="height: 20rpx;">

		</view>
		<view class="tab">
			<template v-if="current == 0">
				<view class="bd-wrap flex">
					<view class="bg-name">
						真实姓名：
					</view>
					<view class="bg-val">
						<input type="text" value="" placeholder="请输入真实姓名" class="val-ipt" v-model="bankInfo.fullname"
							ref="name" />
					</view>
				</view>
				<!-- <view class="bd-wrap flex">
					<view class="bg-name">
						手机号：
					</view>
					<view class="bg-val">
						<input type="text" value="" placeholder="请输入手机号" class="val-ipt" v-model="bankInfo.phone"
							ref="phone" />
					</view>
				</view> -->
				<view class="bd-wrap flex">
					<view class="bg-name">
						银行卡号：
					</view>
					<view class="bg-val">
						<input type="text" value="" placeholder="请输入银行卡号" class="val-ipt" v-model="bankInfo.bankno"
							ref="address" />
					</view>
				</view>
				<view class="bd-wrap flex">
					<view class="bg-name">
						开户行：
					</view>
					<view class="bg-val">
						<input type="text" value="" placeholder="请输入开户行" class="val-ipt" v-model="bankInfo.bank"
							ref="storenamae" />
					</view>
				</view>
				<view class="bd-wrap flex">
					<view class="bg-name">
						所属支行：
					</view>
					<view class="bg-val">
						<input type="text" value="" placeholder="请输入所属支行" class="val-ipt" v-model="bankInfo.subbranch"
							ref="storenamae" />
					</view>
				</view>
			</template>
			<template v-if="current == 1">
				<view class="bd-wrap flex">
					<view class="bg-name">
						真实姓名：
					</view>
					<view class="bg-val">
						<input type="text" value="" placeholder="请输入真实姓名" class="val-ipt" v-model="aliInfo.fullname"
							ref="name" />
					</view>
				</view>
				<view class="bd-wrap flex">
					<view class="bg-name">
						支付宝账号：
					</view>
					<view class="bg-val">
						<input type="text" value="" placeholder="请输入支付宝账号" class="val-ipt" v-model="aliInfo.alino"
							ref="name" />
					</view>
				</view>
			</template>
			<template v-if="current == 2">
				<view class="bd-wrap flex">
					<view class="bg-name">
						真实姓名：
					</view>
					<view class="bg-val">
						<input type="text" value="" placeholder="请输入真实姓名" class="val-ipt" v-model="wxInfo.fullname"
							ref="name" />
					</view>
				</view>
				<view class="bd-wrap flex">
					<view class="bg-name">
						微信账号：
					</view>
					<view class="bg-val">
						<input type="text" value="" placeholder="请输入微信账号" class="val-ipt" v-model="wxInfo.wxno"
							ref="name" />
					</view>
				</view>
				<view class="bd-wrap flex">
					<view class="bg-name">
						收款码：
					</view>
					<view class="bg-val">
						<image v-if="!wxInfo.qr" src="../../static/img/add.png" mode="" @click="upimg(2)"></image>
						<image v-else :src="wxInfo.qr" mode="" @click="upimg(2)"></image>
					</view>
				</view>
			</template>
		</view>
		<view class="btm-btn" @click="bank">
			{{current == 0? '保存银行卡信息': (current == 1? '保存支付宝信息': '保存微信信息')}}
		</view>
	</view>
</template>
<script>
	import pickerAddress from '@/components/wangding-pickerAddress/wangding-pickerAddress.vue';
	import {
		enroll
	} from '@/api/index.js'
	import {
		getLevelList,
		bank,
		bankInfo,
		setWx,
		setAli,
		getAli,
		getWx
	} from '@/api/user.js'
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import { upload } from '@/api/order.js';
	export default {
		components: {
			pickerAddress
		},
		data() {
			return {
				current: 0,
				navList: [{
						tit: '银行卡',
						info: {},
					}, {
						tit: '支付宝',
						info: {}
					},
					// {
					// 	tit: '微信',
					// 	info: {}
					// }
				],
				type: 1,
				aliInfo: {
					fultname: '',
					alino: '',
					qr: '',
					id: 0
				},
				wxInfo: {
					fultname: '',
					wxno: '',
					qr: '',
					id: 0
				},
				bankInfo: {
					fullname: '',
					phone: '',
					bankno: '',
					bank: '',
					subbranch: '',
				},
				loading: false,
			};
		},
		onLoad(opt) {
			
		},
		watch: {
			current(n, o) {

			}
		},
		onShow() {
			this.getbankInfo()
		},
		onReachBottom() {

		},
		computed: {
			...mapState('user', ['userInfo'])
		},
		methods: {
			upimg(type) {
				let that = this
				upload({
					file: ''
				})
					.then(e => {
						console.log(e,'e')
						if(type == 1) {
							that.aliInfo.qr = e[0].url
						}else {
							that.wxInfo.qr = e[0].url
						}
					})
					.catch(e => {});
			},
			changeNavT(index) {
				if (index == this.current) {
					return
				}
				this.current = index
			},
			getbankInfo() {
				bankInfo().then(res => {
					console.log(res);
					if (res.data && res.data.id) {
						this.bankInfo = res.data
					}
				})
				getAli().then(res => {
					if (res.data && res.data.id) {
						this.aliInfo = res.data
					}
				})
				getWx().then(res => {
					if (res.data && res.data.id) {
						this.wxInfo = res.data
					}
				})
			},
			// 选中城市切换
			onCityClick({
				data
			}) {
				// let address = this.addressData.address;
				// address.province = data[0];
				// address.city = data[1];
				// address.district = data[2];
				this.address = data.join('-');
			},
			bank() {
				let that = this
				let setInfo,qdata;
				if (that.loading) {
					return
				}
				if (that.current == 0) {
					// 校验银行卡
					setInfo = bank
					if (that.bankInfo.fullname == '') {
						return that.$api.msg('请输入您的姓名')
					}
					// if (that.bankInfo.phone == '') {
					// 	return that.$api.msg('请输入手机号')
					// }
					if (that.bankInfo.bankno == '') {
						return that.$api.msg('请输入银行卡号')
					}
					if (that.bankInfo.bank == '') {
						return that.$api.msg('请输入银行')
					}
					if (that.bankInfo.subbranch == '') {
						return that.$api.msg('请输入所属支行')
					}
					qdata = that.bankInfo
				} else if (that.current == 1) {
					//校验支付宝
					setInfo = setAli
					if (that.aliInfo.fullname == '') {
						return that.$api.msg('请输入您的姓名')
					}
					if (that.aliInfo.wxno == '') {
						return that.$api.msg('请输入支付宝账号')
					}
					
					qdata = that.aliInfo

				} else if (that.current == 2) {
					//校验微信
					setInfo = setWx
					if (that.wxInfo.fullname == '') {
						return that.$api.msg('请输入您的姓名')
					}
					if (that.wxInfo.wxno == '') {
						return that.$api.msg('请输入微信账号')
					}
					if (that.wxInfo.qr == '') {
						return that.$api.msg('请上传微信收款码')
					}
					qdata = that.wxInfo
				}

				that.loading = true


				setInfo(qdata).then(res => {
					console.log(res);
					uni.showToast({
						title: '提交成功',
						duration: 2000
					});
				}).catch(err => {
					console.log('err');
					that.loading = false
				})
			}
		}
	};
</script>
<style lang="scss" scoped>
	.tab {
		width: 690rpx;
		margin: auto;
		// height: 606rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
	}

	.bd-wrap {
		width: 690rpx;
		// height: 100rpx;
		padding: 20rpx 0;
		background-color: #fff;
		border-bottom: 1px solid #f2f2f2;
		// line-height: 100rpx;
		font-size: 32rpx;
		position: relative;

		.code {
			position: absolute;
			width: 100rpx;
			height: 100rpx;
			right: 10rpx;
			color: $base-color;
			font-size: 23rpx;
		}

		.bg-name {
			width: 280rpx;
			height: 100%;
			padding-left: 20rpx;
		}

		.bg-val {
			width: 430rpx;
			height: 100%;

			.val-ipt {
				padding-top: 10rpx;
				display: inline-block;
				width: 100%;
				height: 100%;
				// background-color: #009100;
				padding-left: 10rpx;

			}

			image {
				width: 150rpx;
				height: 150rpx;
			}
		}
	}

	.btm-btn {
		margin: 60rpx auto 0;
		font-size: 34rpx;
		font-weight: 500;
		color: #FFFFFF;
		text-align: center;
		line-height: 82rpx;

		width: 560rpx;
		height: 80rpx;
		background: #FA2740;
		border-radius: 40rpx;
	}

	.nav-list {
		justify-content: space-around;
		background-color: #fff;
		font-weight: 500;
		color: #333333;

		.item {
			padding: 28rpx 20rpx 16rpx;

		}

		.action {
			color: $base-color;
			font-weight: bold;
			border-bottom: 2px solid red;
		}
	}
</style>