Delivery-merchant/pages/Addipc.vue

<template>
	<view class="authentication">
		<view class="title">添加银行卡</view>
		<view class="inpt">
			<input type="number" value="" placeholder="点击输入*** 银行卡号" v-model="ipc" />
			<view class="right">
				<image class="img" src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-26-15-37-46LVTmoDST.png" mode=""></image>
				<view class="text1">扫描绑定</view>
			</view>
		</view>
		<u-button type="primary" :disabled="!canSubmit" @click="submit">下一步</u-button>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import Titlenav from '../components/Titlenav.vue';
export default {
	components: {
		Titlenav
	},
	data() {
		return {
			ipc: ''
		};
	},
	computed: {
		...mapState(['systemInfo']),
		canSubmit() {
			if (this.ipc) {
				return true;
			} else {
				return false;
			}
		}
	},
	methods: {
		submit() {
			// if (!/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(this.idNo)) {
			// 	this.toast('请输入正确身份证');
			// 	return;
			// }
			uni.navigateTo({
				url: '/pages/Walletdetails'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.authentication {
	/deep/ .uni-input-placeholder {
		font-size: 13px;
		font-weight: 400;
		color: #aaabad;
		line-height: 24px;
	}
	/deep/ .u-btn {
		height: 48px;
		font-size: 16px;
		margin: 0 22px;
	}
	margin: 10px 20px 0;
	.title {
		font-size: 24px;
		font-weight: bold;
		color: #000000;
		line-height: 33px;
	}
	.inpt {
		background: #f5f7fa;
		border-radius: 8px;
		padding: 8px 16px;
		margin: 30px 0 60px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.right {
			text-align: center;
			.img {
				width: 24px;
				height: 24px;
			}
			.text1 {
				font-size: 10px;
				font-weight: 400;
				color: #aaabad;
				line-height: 14px;
			}
		}
	}
}
</style>