fx66/src/components/loginBox.vue

<template>
    <div class="main">
        <ul class="tab-container">
          <li @click="changeTab(item.id)" v-for="item,index in tabList" :key="index" :class="{'active':item.id===selectedTab||item.default}">{{item.label}}</li>
        </ul>
        <div class="tab-item-container">
          <div class="account-container">
            <el-input v-if="type.account==='phone'" @change="phoneAccountChanged"  placeholder="请输入内容" v-model="loginInfo.account" class="input-with-select special-input">
              <el-select v-model="loginInfo.selectArea" slot="prepend" placeholder="请选择">
                <el-option
                  v-for='item,index in areaOptions'
                  :key="index"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-input>
            <el-input v-if="type.account==='email'" @change="emailAccountChanged" class="special-input" placeholder="请输入您的邮箱号码" v-model="loginInfo.account">
              <template slot="prepend"><i  class="prepend-icon iconfont">&#xe600;</i> </template>
            </el-input>
          </div>
          <div v-if="checkBoxState('','login','code',2)||checkBoxState('phone','find','','')"  class="code-container">
            <div class="code-input-inner">
              <el-input  class="special-input"  placeholder="请输入验证码" v-model="loginInfo.code"></el-input>
              <button class="send-code-button" @click="sendMessage" :class="{'disabled':disableSend}">{{sendButtonText}}</button>
            </div>
            <p class="no-code-notice" v-if="showNoCodeNotice&&checkBoxState('','set','','')">收不到短信？试试 <a class="notice-link" href="#">语音验证码</a></p>

          </div>
          <div v-if="checkBoxState('','login','pwd',2)||checkBoxState('phone','find','','')"  class="password-container">
            <el-input class="special-input" type="password" placeholder="请输入内容" v-model="loginInfo.password">
              <template slot="prepend"><i  class="prepend-icon iconfont">&#xe6c5;</i> </template>
              <i slot="suffix" class="el-input__icon iconfont">&#xe653;</i>
            </el-input>
          </div>
          <div class="action-container">
            <div class="login-action" v-if="checkBoxState('','login','',2)">
              <div class="login-action__phone" v-if="checkBoxState('phone','login','code',2)">
                <el-checkbox label="我已了解风险提示！" v-model="loginInfo.checkItem"></el-checkbox>
              </div>
              <div class="login-action__pwd" v-if="checkBoxState('','login','pwd',2)">
                <el-checkbox label="记住密码" v-model="loginInfo.rememberPwd"></el-checkbox>
                <p class="forget-pwd" @click="handleForgetPwd">忘记密码？</p>
              </div>
            </div>
            <div class="set-action" v-if="checkBoxState('','set','',2)">
              <p class="go-back" @click="buttonTextChange();switchNoticeTextChange();">返回</p>
            </div>
            <div class="find-action" v-if="checkBoxState('','find','','')">
              <p class="go-back" @click="handleGoBack">返回</p>
            </div>
          </div>
          <div class="button-container">
            <p class="top-notice no-code-notice" v-if="showNoCodeNotice&&checkBoxState('','login','','')">收不到短信？试试 <a class="notice-link" href="#">语音验证</a></p>
            <button class="action-button" :class="{'disabled':disableAction}" @click="handleActionClick">{{buttonText}}</button>
            <p class="switch-notice" @click="handleSwitch">{{switchNoticeText}}</p>
          </div>

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

<script>
    export default {
      name: "loginBox",
      data(){
        return{
          selectedTab:'phone',
          tabList: {
            'phone': {
              id: 'phone',
              label: '手机'
            },
            'email': {
              id: 'email',
              label: '邮箱'
            },
          },
          tabListGroup:{
            'login': {
              'phone': {
                id: 'phone',
                label: '手机'
              },
              'email': {
                id: 'email',
                label: '邮箱'
              },
            },
            'phone-find':{
              'phone': {
                id: 'phone',
                label: '手机找回密码',
                default:true,
              },
            },
            'email-find':{
              'email': {
                id: 'phone',
                label: '邮箱找回密码',
                default:true,
              },
            },
            'email-set':{
              'phone': {
                id: 'phone',
                label: '邮箱设置密码',
                default:true,
              },
            },
            'phone-set':{
              'phone': {
                id: 'phone',
                label: '手机设置密码',
                default:true,
              },
            },
          },
          areaOptions:[
            {
              label:'中国',
              value:'+86'
            }
          ],
          buttonText:'',
          switchNoticeText:'',
          loginInfo:{
            selectArea:'+86',
            account:'',
            code:'',
            password:'',
            checkItem:false,
            rememberPwd:false,
          },
          showNoCodeNotice:false,
          disableAction:true,
          disableSend:false,
          sendButtonText:'发送验证码',
          nextSendCountDown:0,
          countDownTimerId:"",
          type:{
            account:'phone',//email phone
            action:'login',//login find set
            password:'code',//code pwd
            step:1,//0 1 2
          },
          typeList:{
            account:['email','phone'],
            action:['login','find','set'],
            password:['code','pwd'],
            step:[0,1,2],
          },


        }
      }
      ,
      computed:{




      },
      mounted(){
        this.buttonText=this.buttonTextChange();
        this.switchNoticeText=this.switchNoticeTextChange();
        // this.type.password='psw';
      },
      // watch:{
      //   type:function () {
      //     this.setTypeFullCode()
      //   },
      //   deep:true
      //
      // },
      methods:{
        changeTab(id){
          if(this.tabList.length<2){
            return;
          }
          this.disableAction=true;
          this.selectedTab=id;
          this.type.step=1;
          this.type.account=id;
          this.type.action='login';
          this.type.password='code';
          this.buttonText=this.buttonTextChange();
          this.switchNoticeText=this.switchNoticeTextChange();
          this.loginInfo.account='';
        },
        checkBoxState(account,action,password,step){//根据条件设置各个输入框的状态
          let type=this.type;
          if(
            account&&//如果account是空的
            !(typeof account!=='object'?account===type.account://如果account不是数组，那么直接比较
              !!(~account.indexOf(type.account)))//如果是数组，利用indexOf查找是否在数组中
          ){//注意是反着来的 如果判断为真说明不符合条件 那么函数返回假 下方同理
            return false;
          }
          if(
            action&&
            !(typeof action!=='object'?action===type.action:
              !!(~action.indexOf(type.action)))
          ){
            return false;
          }
          if(
            password&&
            !(typeof password!=='object'?password===type.password:
              !!(~password.indexOf(type.password)))
          ){
            return false;
          }
          if(
            step&&
            !(typeof step!=='object'?step===type.step:
              !!(~step.indexOf(type.step)))
          ){
            return false;
          }

          return true;



        },
        tabItemChange(){
          if(this.checkBoxState('email','find','','')){
            this.tabList=this.tabListGroup["email-find"];
            return;
          }
          if(this.checkBoxState('phone','find','','')){
            this.tabList=this.tabListGroup["phone-find"];
            return;
          }
          if(this.checkBoxState('','login','','')){
            this.tabList=this.tabListGroup.login;
            return;
          }
          if(this.checkBoxState('email','set','','')){
            this.tabList=this.tabListGroup["email-set"];
            return;
          }
          if(this.checkBoxState('phone','set','','')){
            this.tabList=this.tabListGroup["phone-set"];
            return;
          }
        },
        textChange(){
          this.buttonText=this.buttonTextChange();
          this.switchNoticeText=this.switchNoticeTextChange();
          this.tabItemChange();
          this.showNoCodeNotice=false;
        } ,
        handleForgetPwd(){
          this.type.action='find';
          this.textChange();

        },
        handleGoBack(){
          this.type.action='login';
          this.textChange();

        },
        buttonTextChange(){
          let text='';
          // console.log(this.checkBoxState('','','',1))
          if(this.checkBoxState('','','',1)){return '下一步';}
          if(this.checkBoxState('email','find','','')){return '下一步'}
          switch(this.type.action){
            case'find':
              return '确定找回';
              break;
            case'set':
              return '确定';
              break;
            case'login':
              return '注册/登录';
              break;
          }
        },
        phoneAccountChanged(val){
          this.disableAction=!/^(1)[0-9]{10}$/.test(val);
        },
        emailAccountChanged(val){
          this.disableAction=!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(val);
        },
        switchNoticeTextChange() {
          if(this.checkBoxState('','login','code',2)){
            return '切换密码登录'
          }
          if(this.checkBoxState('','login','pwd',2)){
            return '切换验证码登录'
          }
          if(this.checkBoxState('email','find','','')){
            return '手机找回密码'
          }
          if(this.checkBoxState('phone','find','','')){
            return '邮箱找回密码'
          }
          return ''
        },
        handleActionClick(){
          if(this.disableAction)return;
          if(this.checkBoxState('email','find','','')){
            console.log(123)
          }
          if(this.checkBoxState('phone','login','',2)){
            console.log(this.loginInfo.selectArea+this.loginInfo.account);
          }
          if(this.checkBoxState('','','',1)&&!this.checkBoxState('email','find','','')){
            this.type.step+=1;

          }


          //must bottom
          this.textChange();

        },
        handleSwitch(){
          // console.log(this.checkBoxState('','login','code',2))
          if(this.checkBoxState('','login','','')){
            this.type.password=this.checkBoxState('','login','code',2)?'pwd':'code';

          }
          if(this.checkBoxState('','find','','')){
            this.type.account=this.checkBoxState('email','find','','')?'phone':'email';

          }
          this.textChange();
        },
        sendMessage(){
          if(this.disableSend)return;
          this.disableSend=true;
          this.nextSendCountDown=2;//todo
          this.countDownTimerId=setInterval(()=>{
            if(this.nextSendCountDown===0){
              clearInterval(this.countDownTimerId);
              this.sendButtonText="发送验证码";
              this.showNoCodeNotice=true;
              this.disableSend=false;
            }else{
              this.sendButtonText=`${this.nextSendCountDown}s重新发送`;
              this.nextSendCountDown--;
            }

          },1000)
        }
      }

    }
</script>

<style scoped lang="less">
  @import "../assets/less/_variable.less";
  .el-input__icon{
    font-size: 26px;
    padding-right: 14px;
  }
  .main{
    width: 100%;
    height: 100%;
    padding: 25px;

    & .tab-container{

      box-sizing: border-box;
      border-bottom: solid 2px #e5e5e5;

      display:inline-flex;
      justify-content: space-around;
      width: 100%;
      &>li{
        transition: border-bottom-color 0.25s ease;
        cursor: pointer;
        margin-bottom: -2px;
        box-sizing: border-box;

        &.active{
          border-bottom: 2px solid @primaryBlue;
        }
        padding: 0 30px 20px;
        font-size: 20px;
        color: @lightBlack;
      }
    }
    .no-code-notice{
      font-size: 14px;
      color: @lighterBlack;
      margin: 20px 0 0 15px;
      & .notice-link{
        color:@primaryBlue;
      }
    }
    & .tab-item-container{
      margin-top: 15px;
      & .special-input{
        margin-top: 20px;
      }
      & .code-container{
        & .code-input-inner{
          display:flex ;
          align-items: flex-end;
          & .send-code-button{
            border: 0;
            margin-left: 10px;
            width: 134px;
            height: 50px;
            background-color: #ffe366;
            cursor: pointer;
          }
        }


      }
      & .button-container{
        width: 310px;
        position: absolute;
        bottom:30px;
        left: 25px;
        & .action-button{
          cursor: pointer;
          border: 0;
          font-size: 18px;
          color: #fffcfc;
          width: 100%;
          height: 50px;
          background-color: @primaryBlue;
        }
        & .switch-notice{
          font-size: 14px;
          color: #666666;
          margin-top: 20px;
          cursor: pointer;
        }
        & .top-notice{
          margin-top: 0;
          margin-bottom: 20px;
        }
      }
      & .action-container{
        margin-top: 12px;
        font-size: 14px;
        color:@lighterBlack;
        & .login-action{

          & .login-action__phone{
            text-align: left;
          }
          & .login-action__pwd{
            & .forget-pwd{
              cursor: pointer;
            }
            display: flex;
            justify-content: space-between;
          }

        }
        & .find-action{
          text-align: right;
          cursor: pointer;
        }
      }
    }
  }
  .disabled{
    background-color: #dcdcdc!important;
    cursor: default!important;
  }
  .prepend-icon{
    display: inline-block;
    font-size: 21px;
    /*padding: 0 1px;*/
  }
</style>
<!--全局样式覆写-->