samehome/pages/withdrawal/addOrEditBankCard.vue

<template>
	<view class="main">
		<!-- nav -->
		<navigation>{{ pageState === 'addBank' ? i18n.AddBankInformation : i18n.EditBankInformation }}</navigation>
			<!-- #ifdef APP-PLUS -->
			  <view class="content">
				<!-- #endif -->
			<!-- #ifdef H5 -->
			  <view class="contentH5">
				<!-- #endif -->
			
			<u--form class="form" :model="bankInfo" :rules="rules" ref="uForm" errorType="toast">
				<view class="inputBody">
					<view class="title">{{ i18n.FirstName }}</view>
					<view class="input-item">
						<u-form-item class="input-item" prop="acctName" ref="item1">
							<u-input class="input" v-model="bankInfo.acctName" color="#fff" fontSize="32rpx"
								border="none" :placeholder="i18n.enterName">
							</u-input>
						</u-form-item>
					</view>
					<view class="title">{{ i18n.Account }}</view>
					<view class="input-item">
						<u-form-item class="input-item" prop="acctId" ref="item1">
							<u-input class="input" v-model="bankInfo.acctId" color="#fff" fontSize="32rpx" border="none"
								:placeholder="i18n.enterAccount">
							</u-input>
						</u-form-item>
					</view>
				</view>
				<view class="inputBody">
					<view class="title">{{ i18n.BankName }}</view>
					<view class="input-item">
						<u-form-item class="input-item" prop="email" ref="item1">
							<u-input class="input" v-model="bankInfo.bankName" color="#fff" fontSize="32rpx"
								border="none" :placeholder="i18n.enterBankName">
							</u-input>
						</u-form-item>
					</view>
					<view class="title">{{ i18n.BankCode }}</view>
					<view class="input-item">
						<u-form-item class="input-item" prop="bankCode" ref="item1">
							<u-input class="input" v-model="bankInfo.bankCode" color="#fff" fontSize="32rpx"
								border="none" :placeholder="i18n.enterBankCode">
							</u-input>
						</u-form-item>
					</view>
				</view>
			</u--form>

			<u-button class="button" color="#00E8A2" :throttleTime="500" :disabled="btnIsCanClick" @click="bank">
				{{ i18n.Confirm }}
			</u-button>

		</view>




	</view>
</template>

<script>
	import api from '@/utils/api'
	export default {
		name: "withdrawalRecord",
		data() {
			return {
				rules: {
					acctName: {
						type: 'string',
						required: true,
						message: this.$t('withdrawal').enterName,
						trigger: ['blur', 'change'],
					},
					bankName: {
						type: 'string',
						required: true,
						message: this.$t('withdrawal').enterBankName,
						trigger: ['blur', 'change']
					},
					acctId: {
						type: 'string',
						required: true,
						message: this.$t('withdrawal').enterAccount,
						trigger: ['blur', 'change']
					},
					bankCode: {
						type: 'string',
						required: true,
						message: this.$t('withdrawal').enterBankCode,
						trigger: ['blur', 'change']
					},
				},
				bankInfo: {
					bankCode: null,
					bankName: null,
					acctName: null,
					acctId: null,
				},
				pageState: 'addBank', // 页面状态,是添加还是编辑银行卡
			};
		},
		computed: {
			i18n() {
				return this.$t("withdrawal");
			},
			btnIsCanClick() {
				if (this.bankInfo.bankCode && this.bankInfo.bankName && this.bankInfo.acctName && this.bankInfo.acctId) {
					return false
				} else {
					return true
				}
			}
		},
		onLoad(option) {
			this.getBank()
		},
		onShow() {},
		methods: {
			// 获取银行卡信息
			getBank() {
				api.bankCardInfo().then(res => {
					this.bankInfo = res;
					if (this.bankInfo.id) {
						this.pageState = 'editBank' || 'addBank';
					}
				})
			},
			// 修改或添加银行卡
			bank() {
				this.$refs.uForm.validate().then(res => {
					let bankInfo = {
						bankCode: this.bankInfo.bankCode,
						bankName: this.bankInfo.bankName,
						acctName: this.bankInfo.acctName,
						acctId: this.bankInfo.acctId,
					}
					if (this.bankInfo.id) {
						bankInfo.id = this.bankInfo.id
					}
					api.bindBank(bankInfo).then(res => {
						if (this.bankInfo.id) {
							uni.$u.toast(this.$t("me").ModifiedSuccessfully)
						} else {
							uni.$u.toast(this.$t("me").addSuccessfully)
						}
						setTimeout(() => {
							uni.navigateBack({})
						}, 600)
					})
				}).catch(errors => {
					console.log('err')
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	/deep/ .u-form-item__body {
		padding: 0 0;
	}

	.main {

		.content {
			margin-top: 200rpx;
			padding: 32rpx;

			.inputBody {
				overflow: hidden;
				background: #211F32;
				border-radius: 32rpx;
				padding: 32rpx;
				margin-bottom: 32rpx;

				.title {
					font-size: 32rpx;
					color: #A1A0A8;
					margin-bottom: 20rpx;
				}

				.input-item {
					height: 112rpx;
					background: #323045;
					border-radius: 32rpx;
					padding-left: 40rpx;
					margin-bottom: 20rpx;

					.input {
						height: 112rpx;
					}
				}



			}


			.button {
				position: fixed;
				bottom: 40rpx;
				width: 686rpx;
				box-sizing: border-box;
				height: 112rpx;
				background: #00E8A2;
				border-radius: 32rpx;
				font-weight: 700;
				font-size: 32rpx;
				color: #15141F !important;

			}
		}
		
		.contentH5{
			margin-top: 100rpx;
			padding: 32rpx;
		
			.inputBody {
				overflow: hidden;
				background: #211F32;
				border-radius: 32rpx;
				padding: 32rpx;
				margin-bottom: 32rpx;
		
				.title {
					font-size: 32rpx;
					color: #A1A0A8;
					margin-bottom: 20rpx;
				}
		
				.input-item {
					height: 112rpx;
					background: #323045;
					border-radius: 32rpx;
					padding-left: 40rpx;
					margin-bottom: 20rpx;
		
					.input {
						height: 112rpx;
					}
				}
		
		
		
			}
		
		
			.button {
				position: fixed;
				bottom: 40rpx;
				width: 686rpx;
				box-sizing: border-box;
				height: 112rpx;
				background: #00E8A2;
				border-radius: 32rpx;
				font-weight: 700;
				font-size: 32rpx;
				color: #15141F !important;
		
			}
		}
		

	}
</style>