shop-uniapp-240426/pages/user/bankCart/editBankCart.vue

<template>
	<view>
		<u-navbar
			:title="$t('page.editBankCart.title')"
			:safeAreaInsetTop="false"
			placeholder
			@leftClick="leftClick"
			>
		</u-navbar>
		
		<u--form
		labelPosition="left"
		:model="model1"
		:rules="rules"
		class="line"
		ref="uForm"
		>
			<u-form-item
			:label="$t('page.editBankCart.name')"
			prop="userInfo.name"
			borderBottom
			labelWidth="80px"
			>
				<u--input
				v-model="model1.userInfo.name"
				:placeholder="$t('page.editBankCart.name-placeholder')"
				border="none"
				></u--input>
			</u-form-item>
			<u-form-item
			:label="$t('page.editBankCart.Bank-of-deposit')"
			prop="userInfo.title"
			borderBottom
			labelWidth="80px"
			@click="showIdType = true"
			>
				<u--input
				v-model="model1.userInfo.title"
				border="none"
				@focus="showIdType = true"
				:placeholder="$t('page.editBankCart.Bank-of-deposit-placeholder')"
				@blur="bankOfDepositeditBankCart"
				></u--input>
				
				<!-- 选择开户行 -->
				<!-- <u-action-sheet
				:show="showIdType"
				:actions="bankOfDepositActions"
				:title="$t('page.editBankCart.Bank-of-deposit-placeholder')"
				@close="showIdType = false"
				@select="bankOfDepositSelect"
				></u-action-sheet> -->
			</u-form-item>
			<u-form-item
			:label="$t('page.editBankCart.cart-number')"
			prop="userInfo.no"
			borderBottom
			labelWidth="80px"
			>
				<u--input
				v-model="model1.userInfo.no"
				:placeholder="$t('page.editBankCart.cart-number-placeholder')"
				border="none"
				></u--input>
			</u-form-item>
		</u--form>
		<u-button class="submit"
		size="large" @click="submit"
		:text="$t('page.editBankCart.submit')"></u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showIdType : false,
				bankOfDepositActions : [
					{
						name: '交通银行',
					},
					{
						name : '中国人民银行'
					},
					{
						name : '中国农商银行'
					}
				],
				model1: {
					userInfo: {
						name: '',
						title : '',
						no : '',
						uid : 1
					},
				},
				rules: {
					'userInfo.name': {
						type: 'string',
						required: true,
						message: this.$t('page.editBankCart.name-placeholder'),
						trigger: ['blur', 'change']
					},
					'userInfo.title': {
						type: 'string',
						required: true,
						message: this.$t('page.editBankCart.Bank-of-deposit-placeholder'),
						trigger: ['blur', 'change']
					},
					'userInfo.no': {
						type: 'string',
						required: true,
						message: this.$t('page.editBankCart.cart-number-placeholder'),
						trigger: ['blur', 'change']
					},
				},
			}
		},
		methods: {
			leftClick(){
				if(this.$route.query.type == 1){
					return uni.navigateTo({
						url:'/pages/user/bankCardWithdrawal/bankCardWithdrawal'
					});
				}
				uni.navigateTo({
					url: '/pages/user/bankCart/bankCart'
				})
			},
			addBankCart(){		//添加银行卡
				this.request('saveBankCardPage',this.model1.userInfo).then(res=>{
					if(res.code === 200){
						uni.$u.toast(this.$t('page.editBankCart.add-success'));
						setTimeout(()=>{
							if(this.$route.query.type == 1){
								return uni.navigateTo({
									url:'/pages/user/bankCardWithdrawal/bankCardWithdrawal'
								});
							}
							uni.navigateTo({
								url: "/pages/user/bankCart/bankCart"
							})
						},500)
					}
				})
			},
			submit(){
				this.$refs.uForm.validate().then(res => {
					this.addBankCart();
				})
			},
			bankOfDepositSelect(e){
				this.model1.userInfo.title = e.name
			},
			bankOfDepositeditBankCart(){
				let a = false
				this.bankOfDepositActions.forEach(n => {
					if(n.name == this.model1.userInfo.bankOfDeposit){
						a = true
					}
				})
				if(!a){
					this.model1.userInfo.bankOfDeposit = ''
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.line{
		background-color: #fff;
		padding: 5px 10px;
		margin-top: 10px;
		.celi{
			border-radius: 10px;
			margin: 10px 0;
		}
	}
	.submit{
		border-radius: 30px;
		background-color: #ED762F;
		color: #fff;
		margin: 10px;
		width: calc(100% - 20px);
	}
</style>