7131/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.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>
				<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>
			</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>
				<view class="bd-wrap flex">
					<view class="bg-name">
						收款码：
					</view>
					<view class="bg-val">
						<image v-if="!aliInfo.qr" src="../../static/img/add.png" mode="" @click="upimg(1)"></image>
						<image v-else :src="aliInfo.qr" mode="" @click="upimg(1)"></image>
					</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.phone"
							ref="phone" />
					</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>
				<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.phone"
							ref="phone" />
					</view>
				</view>
			</template>
			<!-- <view class="bd-wrap flex">
				<view class="bg-name">
					验证码：
				</view>
				<view class="bg-val flex">
					<input type="text" value="" placeholder="请输入验证码" class="val-iptt" v-model="captcha"
						ref="captcha" />
					<view class="code"  @click="verification()">{{ countDown == 0 || countDown<0 ? '验证码' : countDown }}</view>
				</view>
			</view> -->
		</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 { register, verify } from '@/api/login.js';
	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 {
				captcha: '',
				countDown: 0 ,//倒计时
				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: {
			//发送验证码
			verification() {
				let obj = this;
				let index = this.current;
				let phone;
				if(index == 0) {
					phone = this.bankInfo.phone
				}else if(index == 1) {
					phone = this.aliInfo.phone
				}else if(index == 2) {
					phone = this.wxInfo.phone
				}
				if (!phone) {
					this.$api.msg('请输入手机号');
					return;
				}
				if (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: phone,
						type: 'verify'
					})
						.then(({ data }) => {})
						.catch(err => {
							console.log(err);
						});
				}
			},
			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('请输入支付宝账号')
					}
					if (that.aliInfo.qr == '') {
						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
				}
				// qdata.captcha = that.captcha
				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: #f64342;
			font-size: 23rpx;
		}

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

		.bg-val {
			width: 430rpx;
			height: 100%;
			.code {
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.val-ipt {
				padding-top: 10rpx;
				display: inline-block;
				width: 100%;
				height: 100%;
				// background-color: #009100;
				padding-left: 10rpx;

			}
			.val-iptt {
				width: 70%;
			}

			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: #EC5A54;
			border-bottom: 2px solid red;
		}
	}
</style>