yicangzongtai_app_240321/pages/user/bankCard/addBankCard.vue

<template>
	<view class="container">
		<navbar :config="config" backColor="#666666"></navbar>
			<form @submit="formSubmit">
				<view class="bg-fff">
					<view class="u-plr30">
						<!-- :value="index" -->
						<picker @change="bindPickerChange"	  range-key="name" :range="bankCardList">
				<view class="uni-form-item u-flex u-border-one-one">
					<view class="title u-font28 u-1A1A1A">银行卡名称：</view>
					<input class="uni-input u-font26" name="bank_name" disabled :value="dataform.bank_name" placeholder="请选择银行卡" />
				</view>
				</picker>
				<view class="uni-form-item u-flex u-border-one-one">
					<view class="title u-font28 u-1A1A1A">银行账号：</view>
					<input class="uni-input u-font26"type="number" maxlength="30"  name="card_num" :value="dataform.card_num" placeholder="请输入银行账号" />
				</view>
				<view class="uni-form-item u-flex u-border-one-one">
					<view class="title u-font28 u-1A1A1A">预留银行卡的姓名：</view>
					<input class="uni-input u-font26" name="name" :value="dataform.name" placeholder="请输入预留银行卡的姓名" />
				</view>
				<view class="uni-form-item u-flex">
					<view class="title u-font28 u-1A1A1A">预留银行卡的手机号：</view>
					<input class="uni-input u-font26" type="number" maxlength="11" name="mobile" :value="dataform.mobile" placeholder="请输入预留银行卡的手机号" />
				</view>
				</view>
				</view>
				<view class="uni-btn-v mt216 u-plr30">
					<button form-type="submit" class="u-btn">确认</button>
				</view>
			</form>
			
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				config: {
					back: true, //false是tolbar页面 是则不写
					title: '银行卡',
					color: '#1A1A1A',
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [1, "#FFFFFF"],
					statusBarFontColor: '#1A1A1A'
				},
				dataform:{
					bank_name:'',
					icon:'',
					card_num:'',
					name:'',
					mobile:'',
				},
				bankCardList:[] // 银行卡列表
			}
		},
		onLoad(options) {
			if(options.item){
				let itemData = JSON.parse(decodeURIComponent(options.item))
				this.dataform.id = itemData.id
				this.dataform.mobile = itemData.mobile
				this.dataform.name = itemData.name
				this.dataform.card_num = itemData.card_num
				this.dataform.icon = itemData.icon
				this.dataform.bank_name = itemData.bank_name
			}
			//获取银行卡列表
			this.$http.get('/bankcard/icon/select',).then(res => {
				if(res&&res.code==200){
					this.bankCardList=res.list
				}
			})
		},
		methods: {
			bindPickerChange(e){
				let index = e.detail.value;
				this.dataform.bank_name = this.bankCardList[index].name
				this.dataform.icon = this.bankCardList[index].icon
			},
			//点击确定
			formSubmit: function(e) {
				let that = this;
				let target = e.detail.value;
				if(!target.bank_name){
					this.$mUtil.toast('请选择银行卡')
					return false
				}
				if(!target.card_num){
					this.$mUtil.toast('请输入银行账号')
					return false
				}
				if(!target.name){
					this.$mUtil.toast('请输入预留银行卡的姓名')
					return false
				}
				if(!target.mobile){
					this.$mUtil.toast('请输入预留银行卡的手机号')
					return false
				}
				if(!target.mobile.match(this.$mConfig.telRegex)){
					this.$mUtil.toast('请输入正确手机号')
					return false
				}
				this.dataform.card_num = target.card_num
				this.dataform.name = target.name
				this.dataform.mobile = target.mobile
				this.$http.post('/member/bankcard/save',this.dataform).then(res => {
					if(res&&res.code==200){
						uni.showToast({
							title:"添加成功",
							icon:"none",
							duration:3000,
							success() {
								let pages = getCurrentPages(); // 当前页面
								let beforePage = pages[pages.length - 2]; // 前一个页面
									//app需要加$vm
									uni.navigateBack({
									     success: function() {
									         beforePage.$vm.getAccountMsg(); // 执行前一个页面的onLoad方法
											 beforePage.$vm.getBankCardList();//执行上一个页面的两个方法
									     }
									 });

								
						
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F5F5F5;
	}
	.title{
		width: 330rpx;
	}
	.bg-fff{
		background-color: #FFFFFF;
	}
	.uni-form-item{
		height: 104rpx;
		line-height: 104rpx;
	}
	.uni-input{
		height: 104rpx;
		width: 70%;
		line-height: 110rpx;
	}
	.ml40{
		margin-left: 40rpx;
	}
	.mt216{
		margin-top: 216rpx;
		display: flex;
		justify-content: center;
	}
</style>