login

最新推荐文章于 2021-05-06 09:44:58 发布

weixin_38107457

最新推荐文章于 2021-05-06 09:44:58 发布

阅读量3.2k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_38107457/article/details/106551631

版权

vue 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

验证码
在这里插入图片描述

<!--验证码组件--> 

<template>

  <div
    class="ValidCode disabled-select"
    :style="`width:${width}; height:${height}`"
    @click="refreshCode"
  >
    <span
      v-for="(item, index) in codeList"
      :key="index"
      :style="getStyle(item)"
    >{{ item.code }}</span>
  </div>
</template>
<script>

export default {
  name: 'ValidCode',
  model: {
    prop: 'value',
    event: 'input'
  },

  props: {
    width: {
      type: String,
      default: '100px'
    },

    height: {
      type: String,
      default: '33px'
    },
    length: {
      type: Number,
      default: 4
    },
    refresh: {
      type: Number
    }

  },

  data () {
    return {
      codeList: []
    }

  },

  watch: {
    refresh () {
      this.createdCode()
    }

  },
  mounted () {
    this.createdCode()
  },
  methods: {
    refreshCode () {
      this.createdCode()
    },
    createdCode () {
      const len = this.length
      const codeList = []
      const chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz0123456789'
      const charsLen = chars.length
      // 生成
      for (let i = 0; i < len; i++) {
        const rgb = [Math.round(Math.random() * 220), Math.round(Math.random() * 240), Math.round(Math.random() * 200)]
        codeList.push({
          code: chars.charAt(Math.floor(Math.random() * charsLen)),
          color: `rgb(${rgb})`,
          fontSize: `${10 + (+[Math.floor(Math.random() * 10)] + 6)}px`,
          padding: `${[Math.floor(Math.random() * 10)]}px`,
          transform: `rotate(${Math.floor(Math.random() * 90) - Math.floor(Math.random() * 90)}deg)`
        })

      }

      // 指向
      this.codeList = codeList
      // 将当前数据派发出去
      console.log(codeList.map(item => item.code).join(''))
      this.$emit('input', codeList.map(item => item.code).join(''))
    },
    getStyle (data) {
      return `color: ${data.color}; font-size: ${data.fontSize}; padding: ${data.padding}; transform: ${data.transform}`
    }

  }

}

</script>

<style scoped>

  .ValidCode{
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    width: 100px;
    height: 32px;
    margin-top: 15px;
    background: #e8e8ef;
    border-radius: 6px;
  }
  .ValidCode span{

      display: inline-block;

}

</style>

<template>
  <div class="elForm">
    <el-container style="height:100%">
  <el-header style="height:84px;line-height: 104px;">
    <div>
      <el-row>
        <el-col :span='6' :offset="1">
          <img src="../../assets/images/sfDie.png" alt="" style="height: 30px;width: 298px;">
        </el-col>
      </el-row>
    </div>
  </el-header>
  <el-main ref="getheight">
     <el-carousel :interval="5000" arrow="always" :height="bannerHeight +'px'">
       <el-carousel-item v-for="item in imgList" :key="item.id">
            <img ref="bannerHeight" :src="item.idView" class="banner_img" @load="imgLoad">
	  </el-carousel-item>
    
     </el-carousel>


  </el-main>
  <el-footer>
    <div style="text-align: center;height:  60px;line-height: 60px;font-size: 13px;color: #7A7A7A;">
      Copyright 2017   顺丰速运   版权所有   粤ICP备08034243号
    </div>
  </el-footer>
</el-container>
  
    <div class="card">
        <el-card>
           <div>
             <div class="tab-title">
               
                <div style="border-bottom: 2px solid #fff;color:#303133;font-weight: 700;width: 100%;text-align:  center;height: 60px;line-height: 60px;font-size: 16px;">手机验证码登入</div> 
             </div>

             <div class="tab-content">
  
            <div v-if="cur==0" class="loginUser">
             <el-input placeholder="请输入手机号码"  maxlength="11" size="small" prefix-icon="el-icon-user" v-model="form.username"></el-input>
             <span v-if="shownametext" style="font-family: PingFang-SC-Regular;font-size: 12px;color: #FF3C5B;letter-spacing: 0.29px;">{{nametext}}</span>
             <el-input placeholder="请输入密码" size="small" type="password" prefix-icon="el-icon-lock" v-model="form.password"></el-input>  
              <span v-if="false" style="font-family: PingFang-SC-Regular;font-size: 12px;color: #FF3C5B;letter-spacing: 0.29px;">密码输入有误</span>
          <div class="valid-code">
                  <el-input v-model.trim="formValidCode" size="small"  prefix-icon="el-icon-key" placeholder="请输入验证码" />
                  <valid-code
                    v-model="validCode"
                    :refresh="refreshCode"
                  />
                 
          </div>
           <span v-if="showValid" style="font-family: PingFang-SC-Regular;font-size: 12px;color: #FF3C5B;letter-spacing: 0.29px;">验证码输入有误</span>
          <div style="margin-top: 15px;">
            <el-checkbox v-model="checked">已同意相关</el-checkbox><span style="font-family: PingFang-SC-Regular;font-size: 13px;color: #003900;letter-spacing: 0.32px;line-height: 18px;;">《顺丰速运隐私政策》</span>
          </div>
          <div align="center">
              <!-- <el-button type="primary" style="width: 100%;margin-top: 40px;">登录</el-button> -->
          </div>
          <div style="display: flex;align-content: space-between;justify-content: space-between;margin-top: 15px">
            <div style="font-family: PingFang-SC-Regular;font-size: 13px;color: #2196F3;letter-spacing: 0.32px;" @click="Newregister">注册新账号</div>
            <div style="font-family: PingFang-SC-Regular;font-size: 13px;color: #2196F3;letter-spacing: 0.32px;">忘记密码</div>
          </div>
        </div>
    
      <div v-if="cur==1" class="loginUser">
         <el-input placeholder="请输入手机号码"  size="small" prefix-icon="el-icon-user" v-model="phoneNum" @blur="TakeTel"></el-input>
             <span v-if="showNum" style="font-family: PingFang-SC-Regular;font-size: 12px;color: #FF3C5B;letter-spacing: 0.29px;">{{Numtext}}</span>
          <div class="valid-code">
                  <el-input v-model="validCodeII" @input="changevalidCodeII" size="small" prefix-icon="el-icon-key" placeholder="请输入验证码" />
                  <valid-code
                    v-model="phoneCode"
                    :refresh="refreshCode"
                    ref="getchild"
                  />
          </div>
          <span v-if="showPhoneValid" style="font-family: PingFang-SC-Regular;font-size: 12px;color: #FF3C5B;letter-spacing: 0.29px;">{{NumPhoneCode}}</span>
     
          <div class="valid-code">
              <el-input size="small"  class="codeBtn" placeholder="请输入短信验证码" v-model="vefiyCode" />
              <el-button size="small" style=" height: 30px;margin-top: 15px;" type="button" class="getNumber"  @click="getCode" :disabled="codeDisabled">{{codeMsg}}</el-button>
          </div>
           <span v-if="showvefiyCode" style="font-family: PingFang-SC-Regular;font-size: 12px;color: #FF3C5B;letter-spacing: 0.29px;">验证码输入有误</span>
          <div style="margin-top: 15px;">
            <!-- <el-checkbox v-model="checked" @change="changerule">已同意相关隐私政策条款</el-checkbox> -->
             <el-checkbox v-model="checked" @change="changerule">已同意相关</el-checkbox><span style="font-family: PingFang-SC-Regular;font-size: 13px;color: #003900;letter-spacing: 0.32px;line-height: 18px;;">《顺丰速运隐私政策》</span>
          </div>
          <div align="center">
              <el-button type="primary" :disabled="disabledBtn" @click="signByPhone" style="width: 100%;margin-top: 40px;">登录</el-button>
          </div>
          <div style="display: flex;align-content: space-between;justify-content: space-between;">
            <div style="font-family: PingFang-SC-Regular;font-size: 13px;color: #fff;letter-spacing: 0.32px;" @click="Newregister">注册新账号</div>
            <div style="font-family: PingFang-SC-Regular;font-size: 13px;color: #fff;letter-spacing: 0.32px;">忘记密码</div>
          </div>
          <div style="text-align: center;margin-top: 10px;">
            <!-- <el-checkbox v-model="tenBtn">10天内免登入</el-checkbox> -->
            <el-divider><span style="font-family: PingFang-SC-Regular;font-size: 11px;color: #909399;letter-spacing: 0.32px;">未注册用户登录成功即注册</span></el-divider>

          </div>
      </div>
    </div>
           
    </div>

        </el-card>  
    </div>  

    <!---->    
    <el-dialog
  title=" "
  :visible.sync="dialogVisible"
  width="50%"
  class="diaDiv"
  >
  <div style="border-bottom: 2px solid #e2e2e2;margin-bottom: 10px;height:  60px;line-height: 60px;text-align:  center;font-size: 16px;font-weight: 700;">隐私政策</div>
  <sf-rlus></sf-rlus>
  <div style="text-align:  center;margin-top: 10px;">
    <el-button type="primary" @click="agree">同意上述条款</el-button>
  </div>
  <!--  -->
</el-dialog>

  </div>
</template>

<script>
// 引入组件
import ValidCode from '../../components/ValidCode'
import SfRlus from '../../components/SfRlus'
import {sendMsg, signByPhone} from '../../api/https'
import Cookie from 'js-cookie'
const common = require('../../../config')
import gConf from 'gConf'
export default {
  components:{
    ValidCode,
    SfRlus
  },
  data() {
    return {
      imgList:[
        {idView:require('../../assets/images/pic_banner01.png')},
        {idView:require('../../assets/images/pic_banner02.png')},
        {idView:require('../../assets/images/pic_banner03.png')},
      ],
       // 图片父容器高度
      bannerHeight :'',
      dialogVisible:false,
      showvefiyCode:false,
      appKey:'',
      appSecret:'',
      phoneNum:'',  // 手机登录 手机号码
      showNum:false,
      Numtext:'',
      phoneValidCode:'',
      nametext:'',
      validCodeII:'',
      NumPhoneCode:'', // 手机登录  验证码
      vefiyCode:'',  // 手机短信验证码
      shownametext:false,
      showPhoneValid:false,
      phoneCode:'',
      showValid:false,
       // 是否禁用按钮
      codeDisabled: false,
        // 倒计时秒数
      countdown: 60,
        // 按钮上的文字
      codeMsg: '获取验证码',
        // 定时器
      timer: null,
      checked: false,
      tenBtn:true,
      cur:1,
      validCode:'', // 验证码
      refreshCode:0,  // 刷新验证码
      formValidCode:'', // 输入验证码框
      disabledBtn:true,
      form: {
        username: '',
        password: ''
      }
    }
  },
 
  methods: {
   imgLoad(){
     this.$nextTick(()=>{
       this.bannerHeight = this.$refs.bannerHeight[0].height
       console.log(this.$refs.bannerHeight[0].height)
     })
   },
    TakeTel(){
      if(!this.phoneNum){
        this.showNum = true
        this.Numtext = "手机号码不能为空"
      }else{
        this.phoneNum=this.phoneNum.replace(/[^\.\d]/g,'');
        this.phoneNum=this.phoneNum.replace('.','');
        this.showNum = false
      }
    },
    changerule(val){
      if(val){
        this.dialogVisible = true
       // this.disabledBtn = true
      }else{
        //this.disabledBtn = true
         this.dialogVisible = false
      }

    },
    agree(){
      this.checked = true
        this.dialogVisible = false
      this.disabledBtn = false
    },
    // 账号登录
     async login() {
     
    },
    // 手机登录
    async signByPhone(){
      
      if(this.validCodeII){
        var codeI = this.validCodeII
         codeI = codeI.toLowerCase()
       var codeII = this.phoneCode
       codeII = codeII.toLowerCase()

      }
       // yanz
      
    
      // 手机号校验
      if(this.phoneNum == ''){
         this.showNum = true
         this.Numtext = "手机号码不能为空"
      }else if ((!(/^1[3|4|5|8][0-9]\d{4,8}$/.test(this.phoneNum)))){
          this.showNum = true
         this.Numtext = "请输入正确手机号码"
      }else if (this.validCodeII == ''){
        this.showPhoneValid = true
        this.NumPhoneCode = '验证码不能为空'
        this.$refs.getchild.refreshCode()
      }else if(this.validCodeII.toLowerCase() !== this.phoneCode.toLowerCase()){
         this.showPhoneValid = true
        this.NumPhoneCode = '验证码不正确'
        this.$refs.getchild.refreshCode()

      }else if(codeI !== codeII){
        this.showPhoneValid = true
        this.NumPhoneCode = '输入错误，请重新输入'
        this.$refs.getchild.refreshCode()
      }
        

      try{
         let result = await signByPhone({
           userPhone:this.phoneNum,
           verificationCode:this.vefiyCode,
           source:'SCC_COLD',
           type:3,
           appId:'string',
           appKey:this.appKey,
           appSecret:this.appSecret,
           deviceId:'string',
           isBinding:'false',
         })
         console.log(result)
         if(result.data.success){

        
           console.log(result.data.data.obj.token)
          Cookie.set('token', result.data.data.obj.jwtToken)
          Cookie.set('phone', this.phoneNum)
          Cookie.set('getToken', result.data.data.obj.token)
          Cookie.set('JWTTOKEN',result.data.data.obj.jwtToken)
          Cookie.set('reload', true)
         
           if(result.data.success){
          this.$store.commit('clearMenu')
          //this.$store.commit('setMenu', res.data.menu)
          this.$store.commit('addMenu', this.$router)
          this.$router.push({  path: '/', 'name': 'page1'})

        }
           switch(result.data.errcod){
        //       this.$notify({
        //   title: '温馨提醒',
        //   message: '获取验证码成功',
        //   type: 'success'
        // });
         case 'phoneNumError':
              
          this.$notify.error({
          title: '温馨提醒',
          message: '验证码错误',
          
        });
          break
        case 'errorCodeWrong':
               
           this.$notify.error({
          title: '温馨提醒',
          message: '验证码错误',
        });
            break  
        case null:
           this.$notify({
          title: '温馨提醒',
          message: '登录成功',
          type: 'success'
        });
   
        break
        case 'vdateerror':    
          this.$notify.error({
          title: '温馨提醒',
          message: '验证码已过期',
          
        });
        break
        case 'exceedDayLimit':
          this.$notify.error({
          title: '温馨提醒',
          message: '今日登录次数超限',
          
        });
          break
        case 'errorUserNameNotExists':
           this.$notify.error({
          title: '温馨提醒',
          message: '用户不存在',
          
        });
              break
           }
         }else{
           this.$notify.error({
          title: '温馨提醒',
          message: result.data.errorMessage,
          
        });

      }

    //      if(result.status == 200){
    //     const Cookie = "JWTTOKEN=eyJhbGciOiJIUzI1NiJ9.eyJ1c2VybmFtZSI6IjE1NjI1Nzc1OTY0IiwiZXhwRGF0ZSI6MTU4MDgxOTk1MzkyMn0.0z1__7roUNduqaKoxvX8v-LtzJef0hNJNyyLhXJ3QSg;JSESSIONID="
    //   const token = "eyJhbGciOiJIUzI1NiJ9.eyJ1c2VybmFtZSI6IjE4ODEzNTc5ODgzIiwiZXhwRGF0ZSI6MTU4MjA4NDY4OTE5NH0.2JmHEmdObntGcCwWzAJo5NTjisDV7gZx1tKodKRhGo0"
    //   this.$http.post('api/permission/getMenu', this.form).then(res => {
    //     res = res.data
    //     if (res.code === 20000) {
    //       this.$store.commit('clearMenu')
    //       this.$store.commit('setMenu', res.data.menu)
    //       this.$store.commit('setToken', token)
    //        this.$store.commit('setJWTTOKEN', token)
    //       this.$store.commit('addMenu', this.$router)
    //       this.$router.push({ name: 'home' })
    //     } else {
    //       this.$message.warning(res.data.message)
    //     }
    //   })

    // }
      }catch(err){
        console.log(err)
      }


    },
    // 获取手机验证码

    // 获取验证码
      getCode() {
        // 验证码60秒倒计时
        this.sendMsg()
        if (!this.timer) {
          this.timer = setInterval(() => {
            if (this.countdown > 0 && this.countdown <= 60) {
              this.countdown--;
               this.codeDisabled = true
              // 请求接扣 
              if (this.countdown !== 0) {
                this.codeMsg = "重新发送(" + this.countdown + ")";
              } else {
                clearInterval(this.timer);
                this.codeMsg = "获取验证码";
                this.countdown = 60;
                this.timer = null;
                this.codeDisabled = false;
              }
            }
          }, 1000)
        }
      },

      // 短信验证码
        async sendMsg(){
         try{
              const result = await sendMsg({
              phone:this.phoneNum
           })
            console.log(result)
            if(result.data.success){
              this.$notify({
          title: '温馨提醒',
          message: '获取验证码成功',
          type: 'success'
        });
        }else{
           this.$notify({
          title: '温馨提醒',
          message: result.data.message,
          type: 'success'
        });

        }
       }catch(err){
          console.log(err)
        }     
      },
      changePhoneNum(){
        this.showNum = false

      },
      changevalidCodeII(){
        this.showPhoneValid = false

      },

      Newregister(){
        alert('')
      },

      // 验证码
      onInputBlut(){
        console.log(this.formValidCode)
        console.log(this.validCode)
      }
  },
  mounted(){
   this.imgLoad()
   window.addEventListener('resize',()=>{
     this.bannerHeight = this.$refs.bannerHeight[0].height
     this.imgLoad()
   },false)
     
},

  created(){
     
     console.log('gConf',gConf)
     if(gConf){
       this.appKey = gConf.appKey
        this.appSecret = gConf.appSecret
        console.log('this.appKey',this.appKey)

     }
     
  }
}
</script>

<style scoped>
.elForm {
  background-color: #fff;
  height: 100%;
}
.card{
  position: absolute;
  top: 17%;
  left: 65%;
  z-index: 2000;
}
.valid-code{
  display: flex;
}
.valid-code .el-input{
  margin-right: 10px;
  flex: 1;

}
li{ float:left; list-style:none} 
.tab-title{
    display: flex;
    height: 50px;
    line-height: 50px;
    text-align: center;
}
.tab-title .classTab{
width: 50%;
font-family: PingFangSC-Semibold;
font-size: 16px;
color: #BEBEBE;
letter-spacing: 0.39px;
}
.tab-title .active{
    font-family: PingFangSC-Semibold;
    font-size: 16px;
    color: #333333;
    letter-spacing: 0.39px;
    border-bottom: 2px solid #2196F3;
}
.loginUser{
    position: absolute;
    top: 15%;
    left: 14%;
    width: 300px;
}
</style>

<style >
.elForm .el-form-item__label{
  text-align: left;
}
.elForm .el-card{
  height: 402px;
  width: 411px;
}
.elForm .el-card__body{
  padding: 0;
}
.elForm .el-input{
  margin-top: 15px;
}
.diaDiv .el-dialog__header{
  padding: 0px !important;
}
 .carousel_image_type{
     width: 100%;
  }
  .banner_img{
    width: 100%;
  }
.el-main{
  padding: 0px !important;
}
.el-divider__text{
  padding: 0  !important;
}   
</style>