yzf/pages/user/set/editBank.vue

<template>
	<view class="container">
		<view class="navList flex" v-if="!info.id">
			<view v-for="(item, index) in navList" :key="index" class="navItem"
				:class="{ activeItem: tabIndex === index,tip:index == 0 }" @click="tabClick(index)">{{ item }}
			</view>
		</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 } from '@/api/set.js';
	import { upload } from '@/api/order.js';
	export default {
		data() {
			return{
				navList:['银行卡','支付宝','微信'],
				tabIndex:0,
				info:{
					id:'',
					bank_real_name:'',
					bank_code:'',
					bank:'',
					bank_name:'',
					default:0,
					name:'',
					phone:'',
					qrcode:''
				},
				type:'bank'
			};
		},
		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()
			}
			// getMoneyLog({
			// 		page: navItem.page,
			// 		limit: navItem.limit
			// 	},navItem.type)
		},
		onShow() {},
		methods: {
			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){
						uni.showToast({
							title: '请输入账号',
							icon: 'none',
						})
						return
					}
					if(!obj.info.qrcode){
						uni.showToast({
							title: '请输入收款码',
							icon: 'none',
						})
						return
					}
				}
				let data = ''
				if(obj.info.id){
					data = {
						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 = {
						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
					}
				}
				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.xinxi.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>