node

zhaoxiaoqiang

2022-08-05 2526592bcec6d5c31056c260fb96f60a9b3ae2fa

 src/views/user/login.vue

@@ -1,351 +1,359 @@
<!--
 * @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-05 09:42:48
 * @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
    })
  },
  methods: {
    //设置时间
    setTime(picker, arr) {
      if (!this.timepicker && picker) {
        this.timePicker = picker;
    // 存储倒计时
    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
      }
      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() {
      let v = this.$tool;
      if(v.checkValEmpty(this.idCardMation.idFrontUrl)){
        v.toast('请上传身份证正面')
        return
      }
      if(v.checkValEmpty(this.idCardMation.idBackUrl)){
        v.toast('请上传身份证反面')
        return
      }
      if(v.checkValEmpty(this.idCardMation.idCardAddr)){
        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(sessionStorage.mblNo){
      this.mblNo = sessionStorage.mblNo
    }
    if(sessionStorage.verCode){
      this.verCode = sessionStorage.verCode
    }
   
    this.code = this.getUrlCode("code");
    console.log('this.code:',this.code)
    console.log('this.$route.query.whichPage:',this.$route.query.whichPage)
    if (this.code && !this.$route.query.whichPage) {
      this.$api.wechatUserInfo({ code: this.code}).then(res => {
          console.log('res.body.openid:',res.body.openid)
          localStorage.axx_ins_client_openId = res.body.openid;
          localStorage.edu_ins_client_userMation = JSON.stringify(res.body);
      });
    }
  },
  methods: {
    ...mapActions(["login", "getVercode", "openIdLogin"]),
    //截取code值
    getUrlCode(name) {
      return (
        decodeURIComponent(
          (new RegExp("[?|&]" + name + "=" + "([^&;]+?)(&|#|;|$)").exec(
            location.href
          ) || [, ""])[1].replace(/\+/g, "%20")
        ) || null
      );
    },
    //登录验证
    loginBut() {
      let v = this.$tool;
      if (v.checkValEmpty(this.mblNo)) {
        v.toast("请输入手机号");
        return;
      }
      if (!v.checkPhone(this.mblNo)) {
        v.toast("请输入正确手机号");
        return;
      }
      if (v.checkValEmpty(this.verCode)) {
        v.toast("请输入验证码");
        return;
      }
      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);
      })
      // this.$store.dispatch("getVercode", {
      //   vm: this,
      //   mblNo: this.mblNo,
      //   verCodeType: 1
      // });
     
    },
    //发送验证码计时函数
    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>