lichunlei
/
cyb_configserver_com


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445
							<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>实名认证-创业帮</title>
    <meta name="keywords" content="实名认证-创业帮">
    <meta name="description" content="实名认证-创业帮">
    <meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,shrink-to-fit=no,user-scalable=no" name="viewport" viewport="cover">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta content="telephone=no" name="format-detection">
    <meta content="email=no" name="format-detection">
    <meta name="apple-mobile-web-app-title" content="实名认证-创业帮">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <link rel="stylesheet" href="./static/css/crop.css">
    <link rel="stylesheet" href="./static/css/main.css">
    <style>
      .uploadimg{height:114px;}
      .imgtitle{
      	z-index:99;
      	width:100%;
      	top:80%;
      	left:50%;
      	transform:translate(-50%, -50%);
      }
      @media only screen and (max-device-height : 500px){
      	.f11{font-size:11px};
      	.f12{font-size:12px !important;}
      	.f14{font-size:14px;}
      	.uploadimg{font-size:12px;height:114px;}
      	.mb12{margin-bottom:12px;}
      	.pt8{padding-top:8px;}
      	.pt16{padding-top:16px;}
      }
      
      
    </style>
  </head>
  <body class="nopb pt0" style="padding-top:0;">
    <div id="app" v-cloak>
      <van-nav-bar class="user_rank_explan_title" left-arrow title="实名认证" @click-left="goback" v-if="toptitleisshow">
        <template #left> <img src="./static/images/left.png" alt=""></template>
      </van-nav-bar>
      <div class="pt16 pb16 pl16 pr16 bb8f7f7f7">
        <div class="f14 c333 mb12">上传照片</div>
        <van-row class="mb12 pt8" gutter="13">
          <van-col span="12">
            <div class="rel" @click="ocr">
              <div class="tc f11 caaa abs imgtitle">身份证正面照片</div><img class="uploadimg" :src="CertFrontImage" alt="" width="100%">
            </div>
            <div class="tc f11 c999 pt4"><span> 识别不了？</span><span class="c333" style="text-decoration:underline;color:#FFA402;" @click="uploadphoto(1)">点击上传</span></div>
          </van-col>
          <van-col span="12">
            <div class="rel" @click="bocr">
              <div class="tc f11 caaa abs imgtitle">身份证背面照片</div><img class="uploadimg" :src="CertReverseImage" alt="" width="100%">
            </div>
            <div class="tc f11 c999 pt4"><span> 识别不了？</span><span class="c333" style="text-decoration:underline;color:#FFA402;" @click="uploadphoto(2)">点击上传</span></div>
          </van-col>
        </van-row>
        <van-row class="pt16" gutter="13">
          <van-col class="tc" span="12" @click="uploadphoto(3)">
            <div class="spbgc rel">
              <div class="tc f11 caaa abs imgtitle">手持身份证照片</div><img class="uploadimg" :src="HandCertImage" alt="" style="width:100%;">
            </div>
            <div class="tc f11 c999 pt4"></div>
          </van-col>
          <van-col span="12">
            <div class="rel" @click="ocrbank">
              <div class="tc f11 caaa abs imgtitle">结算卡照片(含卡号)</div><img class="uploadimg" :src="BankCardPositiveImage" alt="" width="100%">
            </div>
            <div class="tc f11 c999 pt4"><span> 识别不了？</span><span class="c333" style="text-decoration:underline;color:#FFA402;" @click="uploadphoto(4)">点击上传</span></div>
          </van-col>
        </van-row>
      </div>
      <div class="mb20 bb8f7f7f7">
        <van-field v-model="real.RealName" @input="checkValue" label="姓名" placeholder="请输入您的姓名"></van-field>
        <van-field v-model="real.CertId" @input="checkValue" @blur="verIdCard" label="身份证号" placeholder="请输入您的身份证号码"></van-field>
        <van-field v-model="real.SettleBankCardNo" @input="checkValue" label="结算银行卡" placeholder="请输入您的结算银行卡号"></van-field>
        <van-field v-model="real.BankMobile" @input="checkValue" label="预留手机号" placeholder="请输入结算银行卡预留手机号"></van-field>
        <van-field v-model="real.SettleBankName" placeholder="请选择" @change="checkValue" readonly @click="typeisshow" label="结算银行名称" right-icon="arrow-down"></van-field>
        <van-field v-model="real.BankName" @input="checkValue" placeholder="请填入银行卡开户行全称" label="填入开户行"></van-field>
        <van-popup v-model="BankNameflag" position="bottom">
          <van-picker title="开户行全称" show-toolbar :columns="BankNamelist" @confirm="banknamefn" @cancel="BankNameflag = false"></van-picker>
        </van-popup>
        <van-field v-model="real.Areas" is-link @change="checkValue" readonly label="工作地区" placeholder="请选择您所在的地区" @click="show = true"></van-field>
      </div>
      <div class="pt16 bc333" v-cloak>
        <van-button type="primary" block color="#FFD500" :disabled="canRegist ? false : true" @click="submitbtn">确认提交</van-button>
        <van-popup v-model="show" position="bottom" round style="padding-top:0;"> 
          <van-area :area-list="areaList" @confirm="onareaConfirm" @cancel="show = false"> </van-area>
        </van-popup>
      </div>
      <van-dialog v-model="showresult" theme="round-button" @close="back" confirm-button-text="知道了" v-if="dialogstatus === '1'">
        <div class="pt16 pl16 pr16 tc"><img src="./static/images/success@3x.png" width="48">
          <div class="f14 c333">认证成功</div>
          <div class="pt16 pb16 f12 c999">欢迎加入创业帮团队</div>
        </div>
      </van-dialog>
      <van-dialog v-model="showresult" theme="round-button" confirm-button-text="返回修改" v-if="dialogstatus !== '1'">
        <div class="pt16 pl16 pr16 tc"><img src="./static/images/fail@3x.png" width="48">
          <div class="f14 c333">认证失败</div>
          <div class="pt16 pb16 f12 c999">{{failinfo}}</div>
        </div>
      </van-dialog>
      <input type="file" accept="image/*" id="upload" style="display:none;">
      <input type="file" accept="image/*" id="upload1" style="display:none;">
      <van-popup v-model="choseType" position="bottom"> 
        <van-picker title="开户银行" show-toolbar :columns="typecolumns" @confirm="choseTypeonConfirm" @cancel="choseType = false"></van-picker>
      </van-popup>
    </div>
    <script src="./static/js/clipboard.min.js"></script> 
    <script src="./static/js/klm-vv.min.js"></script>
    <script src="./static/js/appfunc.min.js"></script>
    <script src="./static/js/klm-axios-config.js"></script>
    <script src="./static/js/publicfn.js"></script>
    <script src="./static/js/exif.js"></script>
    <script src="./static/js/transformation-matrix.js"></script>
    <script src="./static/js/prefix-umd.js"></script>
    <script src="./static/js/index.js"></script>
    <script src="./static/js/arealist.js"></script>
    <script>
      const postbaseRequest = (url, parameter) => {
      	let param = new URLSearchParams();
      	param.append('value', parameter);
      	return request({
      		url,
      		method: 'post',
      		headers: {
      			// 	'Access-Control-Allow-Origin':'*'
      			'Content-Type': 'application/x-www-form-urlencoded'
      		},
      		data: param,
      	});
      };    
    </script>
    <script>
      //上回后回调方法，用于调用缩放、裁切、旋转功能
      function OnStart(){
      	if(PublicLib.getCookieInfo('userIsSign') === 'true'){
      		app.isagreenment = true;
      	}
      	PublicLib.putCookieInfo('userIsSign', '');
      };
      function AppUpload(imgpath) {
      	setTimeout(function () {
      		app.iscut = true;
      		if(app.imgtype === 3){
      			PublicLib.WapCropForApp(380, 600,  'upload1', imgpath, 1);
      				// 添加本地上传图片方法
      		} else {
      			PublicLib.WapCropForApp(600, 380, 'upload', imgpath, 1);
      		};
      	}, 300);
      };
      //裁切结束后回调方法
      function ShowPhoto(url) {
      	app.iscut = false;
      	//获取最终的图片地址
      	app.changebankimg(url);
      };
      // 通过 CDN 引入时不会自动注册 Lazyload 组件
      // 可以通过下面的方式手动注册
      Vue.use(vant.Lazyload);
      
      // 在 #app 标签下渲染一个按钮组件
      let app = new Vue({
      	el: '#app',
      	data() {
      		return {
      			activeIcon:'./static/images/checked@3x.png',
      			inactiveIcon:'./static/images/unchecked@3x.png',
      			isagreenment:false,
      			Bankdetailname:'',
      			BankType:'',
      			BankNameflag:false,
      			BankNamelist:[], 
      			choseType:false,
      			iscut:false,
      			toptitleisshow,
      			showresult: false,
      			dialogstatus: '1',
      			failinfo:'',
      			real:{
      				//- 手机号码
      				Mobile:'',
      				//- 姓名
      				RealName:'',
      				BankMobile:'',
      				//- 身份证号
      				CertId:'',
      				//- 银行卡号
      				SettleBankCardNo:'',
      				//- 身份正面
      				CertFrontImage:'',
      				//- 身份反面
      				CertReverseImage:'',
      				//- 银行卡正面
      				HandCertImage:'',
      				//- 银行卡反面
      				BankCardPositiveImage:'',
      				//- 地区
      				Areas:'',
      				Id:'',
      			},
      			CertFrontImage:'./static/images/realauth-1.png',
      			//- 身份反面
      			CertReverseImage:'./static/images/realauth-2.png',
      			//- 手持正面
      			HandCertImage:'./static/images/realauth-3.png',
      			//- 银行卡反面
      			BankCardPositiveImage:'./static/images/realauth-4.png',
      			canRegist: false,
      			show: false,
      			cascaderValue: '',
      			areaList,
      			imgtype:'',
      			typecolumns:[],
      			SettleBankName:'',
      			type:'',
      			// 选项列表，children 代表子选项，支持多级嵌套
      			test:false,
      		};
      	},
      	created() {
      		this.type = browsertype.versions.ios ? 'ios' : 'android';
      		this.giveToast();
      		//- this.getuserinfo();
      		if(PublicLib.getCookieInfo('userId') === '14'){
      			this.test = true;
      		};
      	},
      	methods: {
      		//- OCR身份证正面
      		ocr(){
      			PublicLib.OCRIdCard(1);
      		},
      		//- OCR身份证反面
      		bocr(){
      			PublicLib.OCRIdCard(2);
      		},
      		//- OCR银行卡正面
      		ocrbank(){
      			PublicLib.OCRBankCard();
      		},
      		getBase64Info(type,base64,cardnum,name = ''){
      			setTimeout(async()=>{
      				const res = await postbaseRequest('api/PublicMethod/UploadPhotoByBase64?t='+Math.random(6),base64);
      				if(res.status !== '1') return tips('图片上传失败，请重试！');
      				//- ID正面
      				if(type === 1){
      					this.real.CertId = cardnum.replaceAll(' ','');
      					this.real.RealName = name;
      					this.real.CertFrontImage = res.data;
      					this.CertFrontImage = showHost + res.data;
      					//- this.CertFrontImage = base64;
      				//- ID反面
      				}else if(type === 2){
      					//- this.ocrimg = base64;
      					//- this.date = cardnum;
      					this.real.CertReverseImage = res.data;
      					this.CertReverseImage = showHost + res.data;
      				//- 银行卡
      				}else{
      					//- this.ocrbankimg = base64;
      					this.real.SettleBankCardNo = cardnum.replaceAll(' ','');
      					//- this.bankcardexpore = name;
      					this.real.BankCardPositiveImage = res.data;
      					this.BankCardPositiveImage = showHost + res.data;
      				};
      			},500);
      		},
      		checkLogin(){
      			this.checkValue();
      			setTimeout(() => {
      				if(this.isagreenment === false){
      					this.isagreenment = false;
      				}else{
      					this.isagreenment = false;
      					PublicLib.Goto({Url:'user-maker-service'});
      				};
      			},100)
      		},
      		//- 年龄验证
      		verIdCard(){
      			if(!verificationIdCardNumber(this.real.CertId)) return tips('身份证格式错误！');
      			const year =  '' + (new Date().getFullYear() - 66) + fillzero((new Date().getMonth() + 1)) + fillzero((new Date().getDate()));
      			const year3 =  '' + (new Date().getFullYear() - 18) + fillzero((new Date().getMonth() + 1)) + fillzero((new Date().getDate()));
      			year2 = this.real.CertId.substring(6,14);
      			if(Number(year) >= Number(year2) || Number(year2) > Number(year3)) {
      				//超龄
      				tips('年龄范围为18~65周岁，请填写符合的身份证')
      				return true;
      			}else{
      				return false;
      			}
      		},
      		async BankNameflagfn(){
      			//- this.BankNameflag = true;
      			//- //- 发起请求
      			//- res = await getRequest('api/v1/openbanktable/list?t='+Math.random(6),JSON.stringify({PageSize:50,PageNum:1,SearchKey:this.Bankdetailname}));
      			//- if(res.status !== '1') return tips(user.info);
      			//- //- console.log(res)
      			//- let arr = [];
      			//- res.data.forEach(item=>{
      			//-   arr.push(item.BankName);
      			//- })
      			//- this.BankNamelist = arr;
      		},
      		banknamefn(data){
      			this.BankNameflag = false;
      			this.real.BankName = data;
      		},
      		//- 选择器选择
      		choseTypeonConfirm(date){
      			this.real.SettleBankName = date.value;
      			this.choseType = false;
      			this.checkValue();
      		},
      		async typeisshow(){
      			this.choseType = true;
      			res = await getRequest('api/v1/merchantaddinfo/options?t='+Math.random(6),JSON.stringify({PageSize:1000,PageNum:1,Kind:4}));
      			if(res.status !== '1') return tips('账户类型请求错误，请关闭重试！');
      			this.typecolumns = res.data;
      		},
      		giveToast(){
      			//- vant.Toast('提示');
      			// 警告通知
      			vant.Notify({ color: '#333', background: '#FFD500',duration: 5000, message: '请先上传图片，确保上传的照片真实、清晰可辨' });
      		},
      		checkValue(){
      			console.log(123);
      			this.canRegist = (this.real.BankMobile !== '' && this.real.BankName !== '' && this.real.SettleBankName !== '' && this.real.RealName !== '' && this.real.CertId !== '' && this.real.Areas !== '' && this.real.SettleBankCardNo !== '' && this.real.CertFrontImage !== '' && this.real.CertReverseImage !== '' && this.real.HandCertImage !== '' && this.real.BankCardPositiveImage !== '') ? true : false;
      			//- this.canRegist = (this.isagreenment && this.real.Mobile !== '' && this.real.BankName !== '' && this.real.SettleBankName !== '' && this.real.RealName !== '' && this.real.CertId !== '' && this.real.Areas !== '' && this.real.SettleBankCardNo !== '' && this.real.CertFrontImage !== '' && this.real.CertReverseImage !== '' && this.real.HandCertImage !== '' && this.real.BankCardPositiveImage !== '') ? true : false;
      		},
      		back(){
      				//- this.goback();
      		},
      		onareaConfirm(value){
      			let str = '';
      			value.forEach(item=>{
      				str += `${item.name},`
      			});
      			str = str.substr(0,str.length - 1);
      			this.real.Areas = str;
      			console.log(str);
      			this.show = false;
      			this.checkValue();
      		},
      		//- 获取四要素
      		async getuserinfo(){
      			//- 获取用户ID
      		const Id = PublicLib.getCookieInfo('userId');
      		//- 实名认证四要素
      		const res = await getRequest('api/v1/users/authinfo?t='+Math.random(6),JSON.stringify({Id}));
      		this.real.RealName = res.data.RealName;
      		this.real.Mobile = res.data.Mobile;
      		this.real.CertId = res.data.CertId;
      		this.real.SettleBankCardNo = res.data.SettleBankCardNo;
      		this.real.Id = Id;
      		},
      		async submitbtn(){
      			if(verification(this.real.BankMobile)) return;
      			if(!verificationIdCardNumber(this.real.CertId)) return tips('身份证格式错误！');
      			if(!verificationbankcardId(this.real.SettleBankCardNo)) return tips('银行卡格式错误！');
      			//- 年龄限制
      			if(this.verIdCard()) return;
      			const Id = PublicLib.getCookieInfo('userId');
      			const res = await postRequest('api/v1/users/postauth?t='+Math.random(6),JSON.stringify({
      				Mobile:this.real.Mobile.trim(),
      				BankMobile:this.real.BankMobile.trim(),
      				RealName:this.real.RealName.trim(),
      				CertId:this.real.CertId.trim(),
      				SettleBankCardNo:this.real.SettleBankCardNo.trim(),
      				Areas:this.real.Areas.trim(),
      				BankName:this.real.BankName.trim(),
      				SettleBankName:this.real.SettleBankName.trim(),
      				CertFrontImage:this.real.CertFrontImage.trim(),
      				CertReverseImage:this.real.CertReverseImage.trim(),
      				HandCertImage:this.real.HandCertImage.trim(),
      				BankCardPositiveImage:this.real.BankCardPositiveImage.trim(),
      				Id,
      				Distribute:1,
      				}));
      			if(res.status === '1'){
      				this.dialogstatus = res.status;
      				this.failinfo = res.info;
      				this.showresult = true;
      			}else if(res.status === '2'){
      				tips('实名认证成功');
      				setTimeout(()=>{
      					PublicLib.Goto({Url:'user-login'});
      				},2000);
      			}else{
      				tips(res.info);
      			};
      		},
      		goback(){
      			if(this.iscut){
      				this.iscut = false;  
      			}else{
      				PublicLib.GoBack({Level:1});
      			};
      		},
      		uploadphoto(type){
      			this.imgtype = type;
      				if (isWeb) {
      					if(type === 3){
      						PublicLib.WapCrop(380, 600, 'upload1', 1);
      					}else{
      						PublicLib.WapCrop(600, 380, 'upload', 1);
      					}
      				};
      				PublicLib.UploadPhoto({
      					Quality:1,
      					PhotoCount:1,
      					Width:300,
      					Height:300,
      				});
      		},
      		changebankimg(url){
      			switch(this.imgtype){
      				case 1:
      					this.real.CertFrontImage = url;
      					this.CertFrontImage = showHost + url;
      				break;
      				case 2:
      					this.real.CertReverseImage = url;
      					this.CertReverseImage = showHost + url;
      				break;
      				case 3:
      					this.real.HandCertImage = url;
      					this.HandCertImage = showHost + url;
      				break;
      				case 4:
      					this.real.BankCardPositiveImage = url;
      					this.BankCardPositiveImage = showHost + url;
      				break;
      			};
      			this.checkValue();
      		},
      	}
      });
    </script>
  </body>
</html>