还原

zhaoxiaoqiang

2022-08-05 1aabe35193870f66acae5013fb10003a5bb16b96

还原

 src/components/upload/uploadIdCard.vue

@@ -1,7 +1,7 @@
<!--
 * @Date: 2019-08-30 18:04:49
 * @LastEditors: zxq
 * @LastEditTime: 2022-08-04 16:08:29
 * @LastEditTime: 2022-06-10 14:38:34
 * @Description:
 -->
<template>
@@ -10,37 +10,33 @@
      <!--上传按钮-->
      <div class="pic-item-box-z" @click="handleUploadPicture(1)">
        <img v-if="picZ.fileUrl" :src="picZ.fileUrl" alt />
        <img v-if="!picZ.fileUrl && cardFont" :src="cardFont" alt />
        <img v-if="!picZ.fileUrl&&cardFont" :src="cardFont" alt />
      </div>
      <!--上传按钮-->
      <div class="pic-item-box-f" @click="handleUploadPicture(2)">
        <img v-if="picF.fileUrl" :src="picF.fileUrl" alt />
        <img v-if="!picF.fileUrl && cardBack" :src="cardBack" alt />
        <img v-if="!picF.fileUrl&&cardBack" :src="cardBack" alt />
      </div>
    </div>
    <!-- 真正的上传按钮-->
    <div>
      <!-- <label class="upload" > -->
        <input
          style="cursor:pointer"
          type="file"
  
          ref="uploadImg"
          @change="handlePhotoChange($event, 1)"
          accept="image/jpg, image/jpeg, image/png"
        />
      <!-- </label> -->
      <!-- <label class="upload"  > -->
        <input
          style="cursor:pointer"
          type="file"

          ref="androidInputFileCapture"
          @change="handlePhotoChange($event, 2)"
          accept="image/*"
          capture="camera"
        />
      <!-- </label> -->
      <input
        style="display: none;cursor:pointer"
        type="file"
        id='androidInputFileImage'
        ref="androidInputFileImage"
        @change="handlePhotoChange($event,1)"
        accept="image/jpg, image/jpeg, image/png"
      />
      <input
        style="display: none;cursor:pointer;"
        type="file"
        id='androidInputFileCapture'
        ref="androidInputFileCapture"
        @change="handlePhotoChange($event,2)"
        accept="image/*"
        capture="camera"
      />
    </div>
    <!--选择上传图片还是拍照-->
    <van-action-sheet
@@ -73,42 +69,42 @@
      picZ: {},
      picF: {},
      zOrf: "",
      isFirst: true,
      isFirst: true
    };
  },
  props: {
    cardFont: {
      type: String,
      type: String
    },
    cardBack: {
      type: String,
    },
      type: String
    }
  },
  watch: {
    cardFont: function (newVal, oldVal) {
    cardFont: function(newVal, oldVal) {
      if (newVal) {
        this.picList[0].fileId = this.cardFont.slice(1);
        this.picList[0].fileUrl = this.cardFont;
      }
    },
    cardBack: function (newVal, oldVal) {
    cardBack: function(newVal, oldVal) {
      if (this.cardBack) {
        this.picList[1].fileId = this.cardBack.slice(1);
        this.picList[1].fileUrl = this.cardBack;
      }
    },
    }
  },
  methods: {
    ...mapMutations([SET_APP_LOADING]),
    // 处理图片上传的事件(deleteIndex---删除图片的索引)
    handlePhotoChange: function (evt, type) {
    handlePhotoChange: function(evt,type) {
      let that = this;
      let shebei = this.judgeBrand(navigator.userAgent.toLowerCase());
      that.SET_APP_LOADING(true);
      // 图片是单选还是多选
      const files = Array.prototype.slice.call(evt.target.files);
      // 图片的处理
      files.forEach(function (file, i) {
      files.forEach(function(file, i) {
        // 图片的拍摄方向
        var orientation;
        // 格式是否支持的判断
@@ -120,86 +116,86 @@
        // 获取文件内容
        let reader = new FileReader();
        // reader.readAsArrayBuffer(file);
        reader.onload = function (e) {
          // EXIF.getData(file, function() {
          //     orientation = EXIF.getTag(this, "Orientation");
          // console.log(orientation)
          // 使用exif，处理图片的旋转问题，然后执行回调函数(orientation永远是0);
          // if(type==2&&orientation){
          //       // 拍照上传
          //       that.getImgData(e.target.result, orientation, function(data) {
          //         // 这里可以使用校正后的图片data了
          //         var img = new Image();
          //         img.src = data;
          //         // 图片加载完毕之后进行压缩，然后上传
          //         if (img.complete) {

          //           callback();
          //         } else {
          //           img.onload = callback;
          //         }
          //         // 图片的路径获取成功后
          //         function callback(){
          //           // 压缩后的图片的base64字符串
          //           let data = that.compress(img);
          //           // 调取接口上传图片
          //           that.submitUploadImg(that.fileType, data);
          //         }
          //     });
          // }else{
          var comimg = new Image();
          comimg.src = e.target.result;
          comimg.onload = function (eimg) {
            let num = 1;
            if (this.width < this.height) {
              num = 8;
            }
            that.getImgData(e.target.result, num, function (data) {
              // 这里可以使用校正后的图片data了
              var img = new Image();
              img.src = data;
              // 图片加载完毕之后进行压缩，然后上传
              if (img.complete) {
                callback();
              } else {
                img.onload = callback;
              }
              // 图片的路径获取成功后
              function callback() {
                // 压缩后的图片的base64字符串
                console.log(img.width, img.height);
                let data = that.compress(img);
                // 调取接口上传图片
                that.submitUploadImg(that.fileType, data);
              }
            });
          };
          // }
          // })
        reader.onload = function(e) {
            // EXIF.getData(file, function() {
            //     orientation = EXIF.getTag(this, "Orientation");
                // console.log(orientation)
                // 使用exif，处理图片的旋转问题，然后执行回调函数(orientation永远是0);
                // if(type==2&&orientation){
                //       // 拍照上传
                //       that.getImgData(e.target.result, orientation, function(data) {
                //         // 这里可以使用校正后的图片data了
                //         var img = new Image();
                //         img.src = data;
                //         // 图片加载完毕之后进行压缩，然后上传
                //         if (img.complete) {
                          
                //           callback();
                //         } else {
                //           img.onload = callback;
                //         }
                //         // 图片的路径获取成功后
                //         function callback(){
                //           // 压缩后的图片的base64字符串
                //           let data = that.compress(img);
                //           // 调取接口上传图片
                //           that.submitUploadImg(that.fileType, data);
                //         }
                //     });
                // }else{
                  var comimg = new Image();
                  comimg.src = e.target.result;
                  comimg.onload = function(eimg){
                  let num = 1;
                  if(this.width<this.height){
                      num = 8
                  }
                  that.getImgData(e.target.result, num, function(data) {
                      // 这里可以使用校正后的图片data了
                      var img = new Image();
                      img.src = data;
                      // 图片加载完毕之后进行压缩，然后上传
                      if (img.complete) {
                        callback();
                      } else {
                        img.onload = callback;
                      }
                      // 图片的路径获取成功后
                      function callback() {
                        // 压缩后的图片的base64字符串
                        console.log(img.width,img.height)
                        let data = that.compress(img);
                        // 调取接口上传图片
                        that.submitUploadImg(that.fileType, data);
                        }
                    });
                  }
                // }
            // })
        };
        reader.readAsDataURL(file);
      });
    },
    // type文件上传的路径，data图片的base64字符串(删除图片即重新上传)
    submitUploadImg: function (type, base64) {
    submitUploadImg: function(type, base64) {
      let that = this;
      // 防止操作的模态窗
      let submitInfo = {
        base64Data: base64.split(",")[1], // 文件base64
        suffix: base64.split(",")[0].split(";")["0"].split("/")[1],
        suffix: base64.split(",")[0].split(";")["0"].split("/")[1]
      };
      this.$api.uploadFile(submitInfo).then(
        (res) => {
        res => {
          if (that.zOrf == 1) {
            that.picZ = {
              fileUrl: res.body.fileUrl,
              fileId: res.body.fileId,
              fileId: res.body.fileId
            };
            that.picList[0] = that.picZ;
          } else {
            that.picF = {
              fileUrl: res.body.fileUrl,
              fileId: res.body.fileId,
              fileId: res.body.fileId
            };
            that.picList[1] = that.picF;
          }
@@ -208,7 +204,7 @@
          }
          that.SET_APP_LOADING(false);
        },
        (error) => {
        error => {
          this.SET_APP_LOADING(false);
        }
      );
@@ -219,9 +215,9 @@
        this.$api
          .getIdCardInfo({
            idBackId: this.picList[1].fileId,
            idFrontId: this.picList[0].fileId,
            idFrontId: this.picList[0].fileId
          })
          .then((res) => {
          .then(res => {
            let obj = res.body;
            obj.idBackUrl = this.picList[1].fileUrl;
            obj.idFrontUrl = this.picList[0].fileUrl;
@@ -230,14 +226,14 @@
      }
    },
    // 图片旋转处理
    getImgData: function (img, dir, next) {
    getImgData: function(img, dir, next) {
      // @param {string} img 图片的base64
      // @param {int} dir exif获取的方向信息
      // @param {function} next 回调方法，返回校正方向后的base64
      var image = new Image();
      let canvas = document.createElement("canvas");
      let ctx = canvas.getContext("2d");
      image.onload = function () {
      image.onload = function() {
        let resultWidth = 0;
        let resultHeight = 0;
        let maxWidthOrHeight = 1024;
@@ -286,23 +282,23 @@
      image.src = img;
    },
    compress(img) {
      let quality = 0.92, //压缩比例
        let quality = 0.92, //压缩比例
        w = img.width,
        h = img.height,
        canvas = document.createElement("canvas"),
        ctx = canvas.getContext("2d");
      canvas.width = w;
      canvas.height = h;
      ctx.drawImage(img, 0, 0, w, h);
      return canvas.toDataURL("image/jpeg", quality);
        canvas.width = w;
        canvas.height = h;
        ctx.drawImage(img, 0, 0, w, h);
        return canvas.toDataURL("image/jpeg", quality);
    },
    checkAuth(id) {
      // authStatus: 0 未授权  1授权---用户授权后才能执行下一步
      this.$api
        .checkAuth({
          fileId: id,
          fileId: id
        })
        .then((res) => {
        .then(res => {
          if (res.body.authStatus === 1) {
            this.$emit("on-check-auth", "下一步");
          }
@@ -317,22 +313,10 @@
    },
    // 选择拍照或者相册选项
    handleMenuSelect(item, index) {
      console.log(this.$refs);
      console.log(this.$refs.androidInputFileCapture);
      console.log(this.$refs.uploadImg);
      console.log(document.getElementById('androidInputFileCapture'));
      if (index === 0) {
        // this.$refs.androidInputFileCapture.dispatchEvent(
        //   new MouseEvent("click")
        // );
         this.$nextTick(()=>{
          this.$refs.androidInputFileCapture.click();
         })
        this.$refs.androidInputFileCapture.click();
      } else {
        this.$refs.uploadImg.dispatchEvent(new MouseEvent("click"));
        //  this.$nextTick(()=>{
        //     this.$refs.uploadImg.click();
        //  })
        this.$refs.androidInputFileImage.click();
      }
      this.selectModel = false;
    },
@@ -341,60 +325,42 @@
      this.selectModel = true;
    },
    judgeBrand(sUserAgent) {
      var isIphone = sUserAgent.match(/iphone/i) == "iphone";
      var isHuawei = sUserAgent.match(/huawei/i) == "huawei";
      var isHonor = sUserAgent.match(/honor/i) == "honor";
      var isOppo = sUserAgent.match(/oppo/i) == "oppo";
      var isOppoR15 = sUserAgent.match(/pacm00/i) == "pacm00";
      var isVivo = sUserAgent.match(/vivo/i) == "vivo";
      var isXiaomi = sUserAgent.match(/mi\s/i) == "mi ";
      var isXiaomi2s = sUserAgent.match(/mix\s/i) == "mix ";
      var isRedmi = sUserAgent.match(/redmi/i) == "redmi";
      var isSamsung = sUserAgent.match(/sm-/i) == "sm-";
      if (isIphone) {
        return "iphone";
      } else if (isHuawei || isHonor) {
        return "huawei";
      } else if (isOppo || isOppoR15) {
        return "oppo";
      } else if (isVivo) {
        return "vivo";
      } else if (isXiaomi || isRedmi || isXiaomi2s) {
        return "xiaomi";
      } else if (isSamsung) {
        return "samsung";
      } else {
        return "default";
      }
    },
       var isIphone = sUserAgent.match(/iphone/i) == "iphone";
       var isHuawei = sUserAgent.match(/huawei/i) == "huawei";
       var isHonor = sUserAgent.match(/honor/i) == "honor";
       var isOppo = sUserAgent.match(/oppo/i) == "oppo";
       var isOppoR15 = sUserAgent.match(/pacm00/i) == "pacm00";
       var isVivo = sUserAgent.match(/vivo/i) == "vivo";
       var isXiaomi = sUserAgent.match(/mi\s/i) == "mi ";
       var isXiaomi2s = sUserAgent.match(/mix\s/i) == "mix ";
       var isRedmi = sUserAgent.match(/redmi/i) == "redmi";
       var isSamsung = sUserAgent.match(/sm-/i) == "sm-";
       if (isIphone) {
           return 'iphone';
       } else if (isHuawei || isHonor) {
           return 'huawei';
       } else if (isOppo || isOppoR15) {
           return 'oppo';
       } else if (isVivo) {
           return 'vivo';
       } else if (isXiaomi || isRedmi || isXiaomi2s) {
           return 'xiaomi';
       } else if (isSamsung) {
           return 'samsung';
       } else {
           return 'default';
       }
   }
  },
  created(){
  //  let 
  //  console.log(shebei);
  }
};
</script>

<style lang="less" scoped>
<style lang="less" scoped >
.component-photo-upload {
  .upload {
    cursor: pointer;
    display: block;
    width: 100px;
    height: 100px;
    line-height: 100px;
    position: relative;
    text-align: center;
    overflow: hidden;
  }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    margin: -1px;
  }
  .pic-title {
    h4 {
      padding: 10px 0;

 src/views/user/login.vue

@@ -1,351 +1,331 @@
<!--
 * @Author: 小明丶
 * @Date: 2020-05-23 11:05:09
 * @Date: 2019-08-15 10:20:56
 * @LastEditors: zxq
 * @LastEditTime: 2022-07-08 14:54:57
 * @Description: 上传身份证
-->
 * @LastEditTime: 2022-08-04 10:42:08
 * @Description: 登录页面
 -->
<template>
  <div class="upload-IDcard-page">
    <v-navbar title="订单申请"></v-navbar>
    <div class="steps-box">
      <div></div>
      <div class="steps">
        <p></p>
        <div class="step-1">1</div>
        <div class="step-2">2</div>
        <div class="step-3">3</div>
  <div class="login-page">
    <div class="logo-box">
      <div class="logo-img-box">
        <img src="../../../static/img/logo.png" alt="logo" class="logo-pic" />
      </div>
      <p>爱享学</p>
    </div>
    <div class="tit-box">
      <p>身份证照片上传</p>
      <p>请确保照片清晰可见，以便顺利申请</p>
    </div>
    <div class="idcard-box">
      <upLoadIdCard :cardBack="idCardMation.idBackUrl" :cardFont="idCardMation.idFrontUrl"></upLoadIdCard>
    </div>
    <div class="id-mation-box">
      <div class="tit">
        <p>请核对身份证信息</p>
      </div>
      <div class="mation">
        <h-cell v-model="idCardMation.usrIdName" isMust  label="姓名"></h-cell>
        <h-cell v-model="idCardMation.usrIdCard" isMust readonly label="身份证号"></h-cell>
        <h-cell v-model="idCardMation.sex" readonly isMust label="性别"></h-cell>
        <h-cell v-model="idCardMation.idCardAddr" isMust label="身份证地址"></h-cell>
        <h-cell v-model="idDate" readonly isLink isMust label="有效期" @click.native="isShoTime = true"></h-cell>
      </div>
    <h-ipt
      icon="iconxingming"
      :maxlength="11"
      type="text"
      :getClose="true"
      v-model="mblNo"
      placeholder="请输入手机号"
      class="myipt"
    ></h-ipt>
    <h-ipt icon="iconmima" :maxlength="6" v-model="verCode" placeholder="请输入短信验证码" class="myiptTwo">
      <template slot="right">
        <div>
          <button
            class="getcode"
            :disabled="btnDis"
            :style="btnDis?'color:#E6E6E6':'color:#62A0FF'"
            @click="sendCode"
          >{{btnText}}</button>
        </div>
      </template>
    </h-ipt>
    <div class="text-box">
      <van-checkbox v-model="checked" shape="round" icon-size="16px">
        <template #default>
          <p class="xieyi">
            <span>我已阅读并同意</span>
            <span @click.stop="showAgree(1)">《隐私政策》</span>
            <span @click.stop="showAgree(2)">《用户注册服务协议》</span>
          </p>
        </template>
      </van-checkbox>
    </div>
    <div class="btn-box">
      <button @click="goNext">下一步</button>
      <button @click="loginBut">登录</button>
    </div>
    <van-popup v-model="isShoTime" position="bottom">
      <div class="text-center-g flex-around-g time-label">
        <p
          class="flex-1-g"
          :class="[timeIndex===0 ? 'active':'']"
          @click="setTimeIndex(0)"
        >开始：{{startDay}}</p>
        <p
          class="flex-1-g"
          :class="[timeIndex===1 ? 'active':'']"
          @click="setTimeIndex(1)"
        >结束：{{endDay}}</p>
      </div>
      <van-datetime-picker
        ref="timepicker"
        item-height='45'
        visible-item-count='4'
        :show-toolbar="false"
        v-model="currentDate"
        @change="setTime"
        :min-date="minDate"
        :max-date="maxDate"
        type="date"
      />
      <van-button class="btn-time" @click="refreshData">确定</van-button>
    </van-popup>
    <!-- <div class="idcard-box">
      <upLoadIdCard :cardBack="idCardMation.idBackUrl" :cardFont="idCardMation.idFrontUrl"></upLoadIdCard>
    </div> -->
  </div>
</template>
<script>
import Bus from "../../bus";
import Vue from "vue";
import { DatetimePicker } from "vant";
import { Popup } from "vant";

<script>
import { mapActions } from "vuex";
import Vue from "vue";
import { RadioGroup, Radio } from "vant";
import { Checkbox, CheckboxGroup } from "vant";
import { Popup } from "vant";
import { Icon } from "vant";
Vue.use(Icon);
Vue.use(Popup);
Vue.use(DatetimePicker);
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
Vue.use(Radio);
Vue.use(RadioGroup);

export default {
  data() {
    return {
      readOnlyName: false,
      readOnlyId: false,
      readOnlySex: false,
      minDate: new Date(1990, 0, 1),
      maxDate: new Date(2030, 11, 31),
      startDay: "", // 开始时间
      endDay: "", //结束时间
      timeIndex: 0,
      isShoTime: false,
      timePicker: null,
      currentDate: new Date(1990, 0, 1),
      idCardMation: {}, //身份证相关信息
      //idCardUserInfo:{},//身份证照片信息
      checked: false, //协议勾选
      radio: "",
      //数据
      // 18108048791 1234qwer
      mblNo: "", //用户手机号
      verCode: "", //验证码
      openId: 456, //微信openId
      //点击显示密码为明文,眼睛的样式也是根据这个来判断的
      pwdType: "password",
      test: false,
      loginImg: "static/img/logo.png",
      timer: "",
      showSend: true,
      btnText: "发送验证码",
      btnDis: false,
      miao: 60,
      code: "",
      ShowAgreen: false, //协议展示框
      Agreend: "", //协议
    };
  },
  computed: {
    idDate() {
      if (
        this.idCardMation.idCardValidBegin &&
        this.idCardMation.idCardValidEnd
      ) {
        return (
          this.idCardMation.idCardValidBegin +
          "-" +
          this.idCardMation.idCardValidEnd
        );
      }
    },
    // cardBack() {
    //   return this.idCardMation.idBackUrl;
    // },
    // cardFont() {
    //   return this.idCardMation.idFrontUrl;
    // }
  },
  created() {
    // this.$api.createInitIdInfo().then(res => {
    //   this.idCardMation = res.body;
    //   if (this.idCardMation.usrIdName) {
    //     this.readOnlyName = true;
    //   }
    //   if (this.idCardMation.usrIdCard) {
    //     this.readOnlyId = true;
    //   }
    //   if (this.idCardMation.sex) {
    //     this.readOnlySex = true;
    //   }
    // });
  },
  beforeUpdate(){
    // let _this = this
    // Bus.$on('getIdUserInfo',(msg)=>{
    //   _this.idCardMation = msg
    // })
    // 存储倒计时
    if(this.$route.query.whichPage && sessionStorage.beforeDate){
      this.miao = Math.round(new Date().getTime()/1000 - sessionStorage.beforeDate/1000)
      if(this.miao < 60){
        this.getSecond(60 - this.miao)
      }else{
        this.miao = 60
      }
    }
    if(sessionStorage.mblNo){
      this.mblNo = sessionStorage.mblNo
    }
    if(sessionStorage.verCode){
      this.verCode = sessionStorage.verCode
    }
  },
  methods: {
    //设置时间
    setTime(picker, arr) {
      if (!this.timepicker && picker) {
        this.timePicker = picker;
      }
      let v = arr ? arr : picker.getValues(),
        time = v[0] + "." + v[1] + "." + v[2];
      if (this.timeIndex === 0) {
        this.startDay = time;
      } else {
        this.endDay = time;
      }
    },
    setTimeIndex(index) {
      this.timeIndex = index;
      this.setPickerValue();
    },
    // 设置日期的值
    setPickerValue() {
      if (this.timePicker) {
        let timeArr = [];
        if (this.timeIndex === 0) {
          timeArr = this.startDay;
        } else {
          timeArr = this.endDay;
        }
        this.currentDate = new Date(timeArr);
      }
    },
    // 时间切换刷新统计数据
    refreshData() {
      if (this.timePicker) {
        let arr = this.timePicker.getValues();
        this.setTime(null, arr);
        this.idCardMation.idCardValidBegin = this.startDay;
        this.idCardMation.idCardValidEnd = this.endDay;
      }
      this.isShoTime = false;
    },
    // 下一步
    goNext() {
    ...mapActions(["login", "getVercode"]),
    //登录验证
    loginBut() {
      let v = this.$tool;
      if(v.checkValEmpty(this.idCardMation.idFrontUrl)){
        v.toast('请上传身份证正面')
        return
      if (v.checkValEmpty(this.mblNo)) {
        v.toast("请输入手机号");
        return;
      }
      if(v.checkValEmpty(this.idCardMation.idBackUrl)){
        v.toast('请上传身份证反面')
        return
      if (!v.checkPhone(this.mblNo)) {
        v.toast("请输入正确手机号");
        return;
      }
      if(v.checkValEmpty(this.idCardMation.idCardAddr)){
        v.toast('请输入身份证详细地址')
        return
      if (v.checkValEmpty(this.verCode)) {
        v.toast("请输入验证码");
        return;
      }
      // if(!v.checkValEmpty(this.idCardMation.idCardAddr)){
      //   v.toast('请输入正确的身份证详细地址')
      //   return
      // }
      this.$api.saveIdInfo({...this.idCardMation,}).then(res => {
          let str = location.host
          //保存成功后获取人脸识别地址
          // this.$api.getFaceUrl({
          //   callbackUrl:`https://${str}/aic_cus/#/order-handling/face-recognition`
          // }).then(res=>{
          //   window.location.href = res.body.faceUrl
          // })
          this.$router.push({
            path: "/order-handling/face-recognition",
            query: {isFaceBack:'1'}
          });
      if (!this.checked) {
        v.toast("请确认并勾选用户协议");
        return;
      }
      this.login({
        vm: this,
        mblNo: this.mblNo,
        verCode: this.verCode,
        // openId: localStorage.axx_ins_client_openId
      });
    }
    },
    sendCode() {
      let v = this.$tool;
      if (v.checkValEmpty(this.mblNo)) {
        v.toast("请输入手机号");
        return;
      }
      if (!v.checkPhone(this.mblNo)) {
        v.toast("请输入正确手机号");
        return;
      }
      this.$api.getVerCode({
        mblNo: this.mblNo,
        verCodeType: 1
      }).then(res=>{
        sessionStorage.beforeDate = new Date().getTime()
        this.getSecond(60);
      })
    },
    //发送验证码计时函数
    getSecond(wait) {
      let _this = this;
      let _wait = wait;
      if (wait == 0) {
        this.btnText = "获取验证码";
        wait = _wait;
        this.btnDis = false;
        clearTimeout(this.timer)
      } else {
        this.btnDis = true;
        this.btnText = "验证码(" + wait + "s)";
        wait--;
        this.timer = setTimeout(function() {
          _this.getSecond(wait);
        }, 1000);
      }
    },
    // 展示协议
    showAgree(which) {
      sessionStorage.mblNo = this.mblNo
      sessionStorage.verCode = this.verCode
      if(which == 1){
        this.$router.push({
          path:'/agreement',
          query:{
            from:'login',
            tit:'隐私协议',
            agrUrl:'./static/ys.pdf'
          }
        })
      }
      if(which == 2){
        this.$router.push({
          path:'/agreement',
          query:{
            from:'login',
            tit:'用户注册服务协议',
            agrUrl:'./static/zc.pdf'
          }
        })
      }
    },
  },
  
  beforeRouteLeave (to, from, next) {
    // ...
    clearTimeout(this.timer)
    next()
  }
};
</script>
<style lang="less" scoped>
.upload-IDcard-page {
  & {
    min-height: 100vh;
  }
  .steps-box {
.login-page {
  padding-top: 42px;
  box-sizing: border-box;
  .logo-box {
    & {
      display: flex;
      text-align: center;
      font-size: 18px;
      margin-bottom: 30px;
    }
    div {
      width: 50%;
    img {
      width: 55px;
      height: 83px;
    }
    .steps {
      height: 65px;
      position: relative;
      p {
        border-bottom: 1px dashed #b3b3b3;
        height: 32px;
      }
      .step-1 {
        text-align: center;
        line-height: 30px;
        color: #fff;
        width: 30px;
        height: 30px;
        background: rgba(81, 148, 254, 1);
        box-shadow: 0px 0px 8px 0px rgba(81, 148, 254, 0.64);
        border-radius: 50%;
        position: absolute;
        left: -15px;
        top: 19px;
      }
      .step-2 {
        text-align: center;
        line-height: 28px;
        width: 28px;
        height: 28px;
        background: rgba(255, 255, 255, 1);
        border: 1px solid rgba(113, 123, 133, 1);
        border-radius: 50%;
        position: absolute;
        left: 55px;
        top: 19px;
      }
      .step-3 {
        text-align: center;
        line-height: 28px;
        width: 28px;
        height: 28px;
        background: rgba(255, 255, 255, 1);
        border: 1px solid rgba(113, 123, 133, 1);
        border-radius: 50%;
        position: absolute;
        left: 130px;
        top: 19px;
      }
    }
  }
  .tit-box {
    & {
      width: 343px;
      height: 75px;
    .logo-img-box {
      display: inline-block;
      width: 100px;
      height: 100px;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 0px 10px 0px rgba(47, 103, 192, 0.1);
      border-radius: 5px;
      margin: auto;
      box-shadow: 0px 0px 12px 0px rgba(34, 105, 209, 0.2);
      border-radius: 15px;
      box-sizing: border-box;
      padding: 16px 17px;
      padding-top: 11px;
    }
    p:nth-of-type(1) {
      margin-bottom: 10px;
      font-size: 16px;
    p {
      margin-top: 16px;
      font-size: 17px;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
    }
    p:nth-of-type(2) {
      font-size: 12px;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(153, 153, 153, 1);
    }
  }
  .idcard-box {
    & {
      margin-top: 29px;
    }
  .myipt {
    margin-top: 51px;
  }
  .id-mation-box {
  .myiptTwo {
    margin-top: 20px;
    margin-bottom: 17px;
  }
  .getcode {
    font-size: 13px;
    font-family: PingFang SC;
    font-weight: 500;
    text-decoration: underline;
    color: rgba(98, 160, 255, 1);
    outline: none;
    height: 30px;
    border: 0;
    background: #fff;
  }
  .text-box {
    & {
      width: 100%;
      padding: 0 10%;
      box-sizing: border-box;
      padding-left: 17px;
      margin-top: 27px;
    }
    .tit {
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
    }
    .mation {
      box-sizing: border-box;
      padding: 0 26px;
    .xieyi {
      span:nth-of-type(1) {
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(153, 153, 153, 1);
      }
      span:nth-of-type(2) {
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #5194fe;
      }
      span:nth-of-type(3) {
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #5194fe;
      }
    }
  }
  .btn-box {
    text-align: center;
    margin-top: 32px;
    padding-bottom: 37px;
    & {
      width: 100%;
      text-align: center;
      margin-top: 37px;
    }
    button {
      width: 320px;
      width: 80%;
      height: 44px;
      background: rgba(81, 148, 254, 1);
      background: linear-gradient(
        90deg,
        rgba(82, 142, 255, 1),
        rgba(105, 167, 255, 1)
      );
      box-shadow: 0px 8px 15px 0px rgba(91, 152, 255, 0.28);
      border-radius: 22px;
      color: #fff;
      border: 0;
      outline: none;
      border: 0;
      color: #fff;
    }
  }
  .time-label {
    .lh(65px);
    color: @c-text-999;
  .agreenBox {
    width: 80vw;
    height: 70vh;
    padding: 60px 20px 30px 20px;
    position: relative;
  }

    .active {
      color: @c-text-default;
    }
  .agreen-html {
    width: 100%;
    height: 100%;
    overflow: scroll;
    box-sizing: border-box;
  }
  .btn-time {
    display: block;
    text-align: center;
    line-height: 40px;
    width: 320px;
    height: 40px;
    background-color: @c-bg-default;
    color: @c-text-fff;
    border-radius: 22px;
    margin: 15px auto;

  .close-agreen {
    .lh(30px);
    .flex(center, center);

    .van-icon {
      font-size: @font-16;
    }
  }
}
</style>
</style>