xingmingyi_applet/pages/user/funManage/bindMethods.vue

<template>
	<view class="container" :class="{ show: loaded }">
		<view class="tabs dfsb">
			<view class="tab-item" :class="type == 'alipay' ? 'on' : ''" @click="setTabEvent('alipay')">支付宝</view>
			<!-- <view class="tab-item" :class="type == 'wechat' ? 'on' : ''" @click="setTabEvent('wechat')">微信</view> -->
			<view class="tab-item" :class="type == 'bank' ? 'on' : ''" @click="setTabEvent('bank')">银行卡</view>
		</view>
		<!-- 支付宝绑定 -->
		<view class="item" v-if="type == 'alipay'">
			<view class="input-item">
				<text class="input-item-title">实名姓名</text>
				<input type="text" v-model="reqData.alipay_name" placeholder="请输入收款人姓名" />
			</view>
			<view class="input-item">
				<text class="input-item-title">支付宝账号</text>
				<input type="text" v-model="reqData.alipay_num" placeholder="请输入支付宝账号" />
			</view>
		</view>
		<!-- 		<view v-if="type == 'alipay'" class="upload-box">
			<text class="upload-box-title">支付宝收款码</text>
			<view class="img-box" @click="choose_img_upload">
				<image :src="reqData.alipay_num.alipay_img_url || '../../static/bg/upload-icon.png'" mode="aspectFit">
				</image>
			</view>
		</view> -->

		<!-- 微信绑定 -->
		<!-- <view class="item" v-if="type == 'wechat'">
						<view class="input-item">
				<text class="input-item-title">收款人姓名</text>
				<input type="text" v-model="reqData.wechat_num.wechat_num1" placeholder="请输入收款人姓名" />
			</view>
			<view class="input-item">
				<text class="input-item-title">微信账号</text>
				<input type="text" v-model="reqData.wechat_num.wechat_num" placeholder="请输入微信账号" />
			</view>
		</view>
		<view v-if="type == 'wechat'" class="upload-box">
			<text class="upload-box-title">微信收款码</text>
			<view class="img-box" @click="choose_img_upload"><image :src="reqData.wechat_num.wechat_img_url || '../../static/bg/upload-icon.png'" mode="aspectFit"></image></view>
		</view> -->

		<!-- 银行卡绑定 -->
		<view class="item" v-if="type == 'bank'">
			<view class="input-item">
				<text class="input-item-title">姓名</text>
				<input type="text" v-model="reqData.bank_name" placeholder="请输入姓名" />
			</view>
			<view class="input-item">
				<text class="input-item-title">银行名称</text>
				<input type="text" v-model="reqData.bank_name" placeholder="例:中国工商银行" />
			</view>
			<view class="input-item">
				<text class="input-item-title">开户支行</text>
				<input type="text" v-model="reqData.open_bank" placeholder="请输入开户支行" />
			</view>
			<view class="input-item">
				<text class="input-item-title">银行卡号</text>
				<input type="number" v-model="reqData.bank_num" placeholder="请输入银行卡号" />
			</view>
		</view>
		<view class="btn-box"><u-button color="#ED742F" ref="confirmBtn" text="确认" @click="submitClickEvent"></u-button></view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			flag:'-1',
			type: 'alipay',
			loaded: false,
			reqData: {}
		};
	},

	onLoad(options) {
		this.flag=options.flag||'-1';
		this.loadData();
		this.loaded = true;
	},

	methods: {
		/**
		 * 请求数据只是为了代码不那么乱
		 * 分次请求未作整合
		 */
		async loadData() {
			// type 类型:  1=支付宝 2=银行卡
			const res = await this.$api.request('/user_pay/payInfo',{
				type: this.type=='alipay'?1:2
			});
			if (res.code == '200') {
				this.loaded = true;
				let data = res.data;
				this.reqData = data;
			} else {
				this.$api.toast(res.msg);
			}
		},

		setTabEvent(type) {
			this.type = type;
			this.loadData();
		},

		submitClickEvent() {
			console.log(11,this.type == 'alipay');
			if (this.type == 'alipay') {
				this.saveAli();
			} else if (this.type == 'wechat') {
				this.saveWx();
			} else {
				this.saveBank();
			}
		},

		saveAli() {
			if (!this.reqData.alipay_name) {
				this.$api.toast('请输入姓名');
				return;
			}
			if (!this.reqData.alipay_num) {
				this.$api.toast('请输入支付宝账号');
				return;
			}
			this.setColletMoneyEvent(this.reqData);
		},

		saveWx() {
			let _this = this;
			if (!_this.reqData.wechat_num.wechat_num) {
				_this.$api.toast('请输入微信账号');
				return;
			}
			_this.setColletMoneyEvent(_this.reqData.wechat_num);
		},

		saveBank() {
			if (!this.reqData.bank_num) {
				this.$api.toast('请输入银行卡号');
				return;
			} else if (!this.reqData.open_bank) {
				this.$api.toast('请输入开户行名称');
				return;
			} else if (!this.reqData.bank_name) {
				this.$api.toast('请输入姓名');	
			// 	return;	
			// }else if (!this.reqData.bank_sub) {	
			// 	this.$api.toast('请输入支行名称');
				return;
			}
			this.setColletMoneyEvent(this.reqData);
		},

		async setColletMoneyEvent(data) {
			let num = this.type == 'alipay' ? 1 : 2; // 2：银行卡 1：支付宝
			const res = await this.$api.request('/user_pay/setPay', {
				type: num,
				...data
			});
			if (res.code == '200') {
				this.$api.toast(res.msg);
				setTimeout(() => {
					uni.navigateBack();
				}, 800);
			} else {
				this.$api.toast(res.msg);
			}
		}, 
	}
};
</script>
<style>
page {
	background-color: #f5f5f5;
}
</style>
<style lang="scss" scoped>
.container {
	width: 100%;
	height: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 20rpx;
	opacity: 0;
	transition: opacity 0.2s;

	&.show {
		opacity: 1;
	}

	.tabs {
		width: 100%;
		height: 100rpx;
		
		background-color: #ffffff;

		.tab-item {
			flex: 1;
			height: 100rpx;
			font-size: 32rpx;
			color: #333;
			border-bottom: 1rpx solid #fff;

			&.on {
				border-bottom: 1rpx solid #ff2200;
				color: #ff2200;
			}
		}
	}

	.item {
		width: 100%;
		height: auto;
		padding: 30rpx 30rpx 0;
		background-color: #ffffff;

		.input-item {
			width: 100%;
			height: 100rpx;
			display: flex;
			align-items: center;
			border-bottom: 1px solid #eeeeee;

			&:last-child {
				border-bottom: none;
			}

			.input-item-title {
				font-size: 32rpx;
				color: #333;
			}

			input {
				text-align: right;
				flex: 1;
				font-size: 32rpx;
				color: #333;
			}
		}
	}
}

.upload-box {
	width: 750rpx;
	height: 414rpx;
	background-color: #ffffff;
	display: flex;
	flex-direction: column;
	align-items: center;

	.upload-box-title {
		width: 100%;
		padding: 30rpx;
		font-size: 32rpx;
		color: #333;
	}

	.img-box {
		width: 430rpx;
		height: 270rpx;
		background-color: #d8d8d8;
		border-radius: 4rpx;
		margin-top: 10rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}
}

.btn-box {
	margin-top: 60rpx;
	width: 100%;
	height: auto;
	padding: 0 30rpx;
}
</style>