lichunlei
/
cyb_configserver_com


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228
							<!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">
  </head>
  <body class="nopb pt0" style="padding-top:0;">
    <div id="app" v-cloak>
      <van-nav-bar class="user_rank_explan_title user_title_normal" left-arrow @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 mb6">上传结算卡照片</div>
        <van-row class="pt8 pb8" @click="takephoto">
          <van-col offset="4" span="16"><img :src="showphoto" alt="" width="100%"></van-col>
        </van-row>
      </div>
      <div class="mb20 bb8f7f7f7">
        <van-field v-model="username" @input="checkValue" label="变更人" readonly></van-field>
        <van-field v-model="real.Mobile" @input="checkValue" label="手机号" readonly></van-field>
        <van-field class="user-phone" center clearable label="验证码" @input="checkValue" placeholder="请输入验证码" v-model="real.MobileCode">
          <template #button>
            <van-button class="fl plain-nb" plain color="#ff502a" @click="getsmscode" v-if="codeisclick">获取验证码</van-button>
            <van-button class="fl plain-nb" plain color="#ff502a" disabled v-else>{{countdown}}s</van-button>
          </template>
        </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 class="mb12" v-model="real.SettleBankName" placeholder="请选择" readonly @click="typeisshow" label="结算银行名称" right-icon="arrow-down"></van-field>
        <van-field class="mb12" v-model="Bankdetailname" placeholder="模糊搜索" label="搜索信息"></van-field>
        <van-field class="mb12" v-model="real.BankName" placeholder="请填入信息后选择银行卡开户行全称" label="选择开户行" readonly right-icon="arrow-down" @click="BankNameflagfn"></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>
      </div>
      <div class="pt16 bc333" v-cloak>
        <van-button type="primary" block color="#FFD500" :disabled="canRegist ? false : true" @click="uploadheadhpotofn">确认提交</van-button>
      </div>
      <van-dialog v-model="showSuccess" theme="round-button" @close="closefinish" confirm-button-text="知道了">
        <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="showFail" theme="round-button" confirm-button-text="返回修改">
        <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">信息有误，请核对信息确认无误后提交</div>
        </div>
      </van-dialog>
      <input type="file" accept="image/*" id="upload" 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>
      //上回后回调方法，用于调用缩放、裁切、旋转功能
      function AppUpload(imgpath) {
        setTimeout(function () {
          PublicLib.WapCropForApp(600, 380, 'upload', imgpath, 1);
        }, 300);
      }
      //裁切结束后回调方法
      function ShowPhoto(url) {
        //获取最终的图片地址
        app.changebankimg(url);
      }
      if (isWeb) {
        PublicLib.WapCrop(600, 380, 'upload', 1);
      }
      // 通过 CDN 引入时不会自动注册 Lazyload 组件
      // 可以通过下面的方式手动注册
      Vue.use(vant.Lazyload);
      PublicLib.SetStatusBarBgColor({bgcolor:'ffffff'});
      // 在 #app 标签下渲染一个按钮组件
      let app = new Vue({
        el: '#app',
        data() {
          return {
            Bankdetailname:'',
            BankType:'',
            BankNameflag:false,
            BankNamelist:[], 
            choseType:false,
            toptitleisshow:false,
            active: 0,
            showSuccess: false,
            showFail: false,
            username: '',
            real:{
              SettleBankCardNo: '',
              Mobile: '',
              MobileCode: '',
              BankName:'',
              SettleBankName:'',
              BankCardPositiveImage:'',
              BankMobile:''
            },
            showphoto:'./static/images/realauth-4-b.png',
            canRegist: false,
            show: false,
            codeisclick:true,
            countdown:60,
            typecolumns:[],
            SettleBankName:'',
          };
        },
        mounted() {
          this.toptitleisshow = toptitleisshow;                                             
          this.giveToast();
          this.getbankinfo();
        },
        methods: {
          closefinish(){
            this.goback();
          },
          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;
            this.checkValue()
          },
          //- 选择器选择
          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: 3000, message: '请选择中/农/工/建/招等大型银行或者商业银行，有助于到账' });
          },
          takephoto(){
            PublicLib.UploadPhoto({
              Quality:1,
              PhotoCount:1,
              Width:300,
              Height:300,
            });
          },
          checkValue(){
            this.canRegist = (this.username !== '' && this.real.Mobile !== '' && this.real.MobileCode !== '' && this.real.BankName !== '' && this.real.SettleBankName !== '' && this.real.SettleBankCardNo !== '' && this.real.BankCardPositiveImage !== '') ? true : false;
          },
          goback(){
            PublicLib.GoBack({Level:2});
          },
          async getbankinfo(){
            const Id = PublicLib.getCookieInfo('userId');
            const res = await getRequest('api/v1/users/authinfo?t='+Math.random(6),JSON.stringify({Id}));
            if(res.status !== '1' ) return tips('获取结算卡信息失败，请重试！')
            this.username = res.data.RealName;
            this.real.Mobile = res.data.Mobile;
          },
          //- 获取验证码
          async getsmscode(){
            if(verification(this.real.Mobile)) return;
             this.codeisclick = false;
            setTimeout(()=>{
              this.codeisclick = true;
            },60000);
            const timer = setInterval(()=>{
              this.countdown--;
              if(this.countdown === 0) {
                this.countdown = 60;
                clearInterval(timer);
              }
            },1000);
            const res = await postRequest('api/v1/mobilecodecheck/sendsms',JSON.stringify({Mobile:this.real.Mobile}));
            if(res) tips('验证码已发送，请注意查收');
          },
          changebankimg(url){
            this.real.BankCardPositiveImage = url;
            this.showphoto = showHost + url;
            this.checkValue();
          },
          //- 变更结算卡
          async uploadheadhpotofn(){
            if(verification(this.real.BankMobile)) return;
            if(!verificationbankcardId(this.real.SettleBankCardNo)) return tips('银行卡格式错误！');
            const Id = PublicLib.getCookieInfo('userId');
            const res = await postRequest('api/v1/users/changebankcard?t='+Math.random(6),JSON.stringify({Id,SettleBankCardNo:this.real.SettleBankCardNo,BankCardPositiveImage:this.real.BankCardPositiveImage,Mobile:this.real.Mobile,MobileCode:this.real.MobileCode,BankName:this.real.BankName,SettleBankName:this.real.SettleBankName,BankMobile:this.real.BankMobile}));
            if(res.status !== '1') return this.showFail = true;
            this.showSuccess = true;
          }
        }
      });
    </script>
  </body>
</html>