VUE中fetch结合支付宝API验证银行卡号

标题VUE中fetch结合支付宝API验证银行卡号

工作中提出验证银行卡的需求，在项目基于vue的情况下，刚开始用正则，结果是不太准确
换个方法就是要使用支付宝去验证用户输入的手机号
Bank组件如下

<template>
	<div>
		<x-input title="银行卡号" placeholder="请输入银行卡号" type="text" @on-blur="checkBankNum" v-model="MyBankNum"></x-input>
        <x-input title="银行名称" placeholder="银行名称" type="text" v-model="MyBankName" disabled="disabled"></x-input>
	</div>
</template>
<script>
	import { XInput } from 'vux';
	import Banks from "@/assets/bank.json";
	 export default {
		components: {XInput},
		data(){
			MyBankName:"",//用户 输入的卡号所属的银行名称
			MyBankNum:"",//银行卡号
		},
		method:{
			checkBankNum(){
				let opts = {
		          method:"GET"
		        };
		        //支付宝的银行验证地址
		        let url = "https://ccdcapi.alipay.com/validateAndCacheCardInfo.json?_input_charset=utf-8&cardNo="+this.MyBankNum+"&cardBinCheck=true";
		        fetch(url,opts).then(res=>{return res.json();}).then((e)=>{
		          if(e.stat === "ok"&&e.validated === false){
		            this.$vux.toast.text('卡号输入有误！请重新输入', 'top');
		            this.MyBankNum = "";
		            this.MyBankName = "";
		          }else{
		            let bankName_ = e.bank;
		            console.log(Banks[bankName_]);
		            this.MyBankName = Banks[bankName_];
		          }
		        }).catch((error) => {