yzf/pages/user/set/editBank.vue

<template>
	<view class="container">
		<view class="navList flex" v-if="!info.id">
			<template  v-for="(item, index) in navList">
				<view class="navItem" v-if="bankInfo[item.type]=='1'"
					:class="{ activeItem: tabIndex === index,tip:index == 0 }" @click="tabClick(index)">{{ item.name }}
				</view>
			</template>
		</view>
		<view class="login_text" v-if="tabIndex == 0">
			<view class="login_input flex" style="padding-top: 45rpx;">
				<view class="login_name">姓名</view>
				<view class="login_name"><input class="uni-input" type="text" v-model="info.bank_real_name"
						placeholder="请输入真实姓名" /></view>
			</view>
			<view class="login_input flex">
				<view class="login_name"><text>银行</text></view>
				<view class="login_name"><input class="uni-input" type="idcard" v-model="info.bank"
						placeholder="请输入银行" /></view>
			</view>
			<view class="login_input flex">
				<view class="login_name"><text>银行卡账号</text></view>
				<view class="login_name"><input class="uni-input" type="idcard" v-model="info.bank_code"
						placeholder="请输入银行卡账号" /></view>
			</view>
			<view class="login_input flex">
				<view class="login_name"><text>开户行</text></view>
				<view class="login_name"><input class="uni-input" type="idcard" v-model="info.bank_name"
						placeholder="请输入开户行" /></view>
			</view>
		</view>
		<view class="login_text" v-if="tabIndex == 1">
			<view class="login_input flex" style="padding-top: 45rpx;">
				<view class="login_name">姓名</view>
				<view class="login_name"><input class="uni-input" type="text" v-model="info.name"
						placeholder="请输入真实姓名" /></view>
			</view>
			<view class="login_input flex">
				<view class="login_name"><text>支付宝账号</text></view>
				<view class="login_name"><input class="uni-input" type="idcard" v-model="info.phone"
						placeholder="请输入支付宝账号" /></view>
			</view>
			<view class="login_input">
				<view class="login_name" @click="scImg">
					<image :src="info.qrcode||'/static/image/img19.png'"></image>
				</view>
			</view>
		</view>
		<view class="login_text" v-if="tabIndex == 2">
			<view class="login_input flex" style="padding-top: 45rpx;">
				<view class="login_name">姓名</view>
				<view class="login_name"><input class="uni-input" type="text" v-model="info.name"
						placeholder="请输入真实姓名" /></view>
			</view>
			<!-- <view class="login_input flex">
				<view class="login_name"><text>微信账号</text></view>
				<view class="login_name"><input class="uni-input" type="idcard" v-model="info.phone"
						placeholder="请输入微信账号" /></view>
			</view> -->
			<view class="login_input">
				<view class="login_name" @click="scImg">
					<image :src="info.qrcode||'/static/image/img19.png'"></image>
				</view>
			</view>
		</view>
		<view class="submission">
			<button class="golden" type="golden" hover-class="none" @click="submission">确认</button>
		</view>
	</view>
</template>
<script>
	import {
		bankInfo,
		addBank,
		getBank
	} from '@/api/set.js';
	import {
		upload
	} from '@/api/order.js';
	export default {
		data() {
			return {
				navList: [{
					name: '银行卡',
					show: true,
					type: "sell_bank_open"
				}, {
					name: '支付宝',
					show: true,
					type: "sell_alipay_open"
				}, {
					name: '微信',
					show: true,
					type: "sell_weixin_open"
				}],
				tabIndex: 0,
				info: {
					id: '',
					bank_real_name: '',
					bank_code: '',
					bank: '',
					bank_name: '',
					default: 0,
					name: '',
					phone: '',
					qrcode: ''
				},
				type: 'bank',
				loding: false,
				bankInfo: {
					sell_alipay_open: "0",
					sell_bank_open: "0",
					sell_weixin_open: "0"
				}
			};
		},
		onLoad(option) {
			if (option.type) {
				if (option.type == 'alipay') {
					this.tabIndex = 1
				} else if (option.type == 'wx') {
					this.tabIndex = 2
				} else {
					this.tabIndex = 0
				}
			}
			if (option.id) {
				this.info.id = option.id
				this.type = option.type
				this.getList()
			}
			this.getBank();
			// getMoneyLog({
			// 		page: navItem.page,
			// 		limit: navItem.limit
			// 	},navItem.type)
		},
		onShow() {},
		methods: {
			getBank() {
				getBank({}).then(res => {
					this.bankInfo = res.data;
				});
			},
			tabClick(index) {
				this.tabIndex = index
				if (index == 0) {
					this.type = 'bank'
				} else if (index == 1) {
					this.type = 'alipay'
					this.info.name = ''
					this.info.phone = ''
					this.info.qrcode = ''
				} else {
					this.type = 'wx'
					this.info.name = ''
					this.info.phone = ''
					this.info.qrcode = ''
				}
			},
			getList() {
				let obj = this
				bankInfo({
					id: obj.info.id
				}).then(res => {
					obj.info = res.data.info
				});
			},
			submission() {
				let obj = this
				if (obj.tabIndex == 0) {
					if (!obj.info.bank_real_name) {
						uni.showToast({
							title: '请输入真实姓名',
							icon: 'none',
						})
						return
					}
					if (!obj.info.bank) {
						uni.showToast({
							title: '请输入银行',
							icon: 'none',
						})
						return
					}
					if (!obj.info.bank_code) {
						uni.showToast({
							title: '请输入银行卡号',
							icon: 'none',
						})
						return
					}
					if (obj.info.bank_code.length < 16) {
						uni.showToast({
							title: '请输入正确的银行卡号',
							icon: 'none',
						})
						return
					}
					if (!obj.info.bank_name) {
						uni.showToast({
							title: '请输入开户行',
							icon: 'none',
						})
						return
					}
				} else {
					if (!obj.info.name) {
						uni.showToast({
							title: '请输入姓名',
							icon: 'none',
						})
						return
					}
					if (!obj.info.phone && obj.tabIndex == 1) {
						uni.showToast({
							title: '请输入账号',
							icon: 'none',
						})
						return
					}
					if (!obj.info.qrcode) {
						uni.showToast({
							title: '请输入收款码',
							icon: 'none',
						})
						return
					}
				}
				let data = ''
				if (obj.info.id) {
					data = {
						id: 0,
						bank: obj.info.bank, //银行
						bank_name: obj.info.bank_name, //开户行
						bank_code: obj.info.bank_code, //银行卡号
						real_name: obj.info.bank_real_name, //开户人
						default: 0, //1设为默认，0取消默认
						id: obj.info.id,
						type: obj.type,
						name: obj.info.name,
						phone: obj.info.phone,
						qrcode: obj.info.qrcode,
					}
				} else {
					data = {
						id: 0,
						bank: obj.info.bank, //银行
						bank_name: obj.info.bank_name, //开户行
						bank_code: obj.info.bank_code, //银行卡号
						real_name: obj.info.bank_real_name, //开户人
						default: 0, //1设为默认，0取消默认
						name: obj.info.name,
						phone: obj.info.phone,
						qrcode: obj.info.qrcode,
						type: obj.type
					}
				}
				uni.showLoading({
					title: '提交中',
					mask: true
				});
				addBank(data).then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 1000
					})
					setTimeout(function() {
						uni.navigateTo({
							url: '/pages/user/set/bindBank'
						})
					}, 1000);
				});
			},
			//上传图片
			scImg() {
				upload({
					file: ''
				}).then((e) => {
					console.log(e, 55)
					this.info.qrcode = e[0].url;
				});
			},
		},
	};
</script>
<style lang="scss" scoped>
	.login_text {
		width: 100%;
		// padding: 25rpx 0rpx;
		font-size: 28rpx !important;
		padding: 0rpx 25rpx;
	}

	.login_input {
		border-bottom: 1px solid #464755;
		padding: 35rpx;
	}

	.uni-input {
		width: 450rpx;
		text-align: left !important;
		font-size: 26rpx;
	}

	.submission {
		padding: 80rpx 25rpx;

		.golden {
			background: #0C5AFA;
			color: #ffffff;
		}
	}

	.login_name {
		color: #ffffff;
	}

	.login_name image {
		width: 100rpx;
		height: 100rpx;
	}

	.navList {
		padding: 20rpx 50rpx;
		background: #1F2A4A;
		width: 100%;
		z-index: 9;

		.navItem {
			color: #fff;
			font-size: 30rpx;
			text-align: center;
			width: 50%;

			&.activeItem {
				color: #0C5AFA;
				position: relative;

				&:after {
					content: '';
					position: absolute;
					left: 36%;
					bottom: -20rpx;
					width: 30%;
					height: 8rpx;
					// transform: translateX(-50%);
					border-bottom: 4rpx solid #0C5AFA;
					border-radius: 0rpx 20rpx 0rpx 0rpx;
				}
			}

			&.tip {
				border-right: 1rpx solid #333D5B;
			}
		}
	}
</style>