首页基本完成

src/components/loginBox.vue

@@ -1,21 +1,61 @@
 <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.label}}</li>
+          <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
-            v-if="selectedTab==='phone'"
-            class="tab-item">
-            <el-input placeholder="请输入内容" v-model="input5" class="input-with-select">
-              <el-select v-model="select" slot="prepend" placeholder="请选择">
-                <el-option label="餐厅名" value="1"></el-option>
-                <el-option label="订单号" value="2"></el-option>
-                <el-option label="用户电话" value="3"></el-option>
+          <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-button slot="append" icon="el-icon-search"></el-button>
             </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>
@@ -35,13 +75,277 @@
               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)
         }
       }
 
@@ -50,10 +354,15 @@
 
 <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;
@@ -76,28 +385,145 @@
         color: @lightBlack;
       }
     }
+    .no-code-notice{
+      font-size: 14px;
+      color: @lighterBlack;
+      margin: 20px 0 0 15px;
+      & .notice-link{
+        color:@primaryBlue;
+      }
+    }
     & .tab-item-container{
-      margin-top: 30px;
+      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>
+<!--全局样式覆写-->
 <style lang="less">
   @import "../assets/less/_variable.less";
+  .el-checkbox{
+    color:@lighterBlack;
+  }
   .el-input *{
     transition: border-color .2s cubic-bezier(.645,.045,.355,1);
     border-radius: 0!important;
   }
   .el-input:focus-within{
+    & .prepend-icon{
+      color:@primaryBlue
+    }
     & *{
 
       border-color: @primaryBlue;
     }
 
   }
-
-  .el-input__inner:focus{
-    /*border: 0;*/
-    border-color: @primaryBlue;
+  .el-input__inner {
+    height: 50px;
+    line-height: 50px;
+    &:focus {
+      /*border: 0;*/
+      border-color: @primaryBlue;
+    }
   }
+    .el-select .el-input {
+      width:50px;
+    }
+
+    .el-input-group__prepend{
+      width: 52px!important;
+      padding: 0;
+      & .el-select{
+        margin: -10px 0;
+        & .el-input__inner{
+          padding: 0;
+        }
+      }
+      & .el-input__suffix {
+        right:0;
+        & .el-input__inner{
+          padding-right: 0;
+        }
+
+      }
+
+
+    }
+
 </style>

src/components/loginBoxComponent/findComponent.vue

@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+    export default {
+        name: "findComponent"
+    }
+</script>
+
+<style scoped>
+
+</style>

src/components/loginBoxComponent/loginComponent.vue

@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+    export default {
+        name: "loginComponent"
+    }
+</script>
+
+<style scoped>
+
+</style>

src/components/loginBoxComponent/setComponent.vue

@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+    export default {
+        name: "setComponent"
+    }
+</script>
+
+<style scoped>
+
+</style>

src/views/index.vue

@@ -27,7 +27,7 @@
       </div>
       <div class="currency-container">
         <div class="currency-layer">
-          <currency-block v-for="item,index in currencyDataList" :currency-data="item"></currency-block>
+          <currency-block v-for="item,index in currencyDataList" :key="index" :currency-data="item"></currency-block>
         </div>
       </div>
 
@@ -37,7 +37,8 @@
       <join-gain-block
         class="jg-block"
         v-for="item,index in joinGainInfoDataList"
-        :join-gain-info-data="item">
+        :join-gain-info-data="item"
+         :key="index">
       </join-gain-block>
     </div>
     <div class="full-pic">
@@ -58,7 +59,7 @@
     <div class="one-stop-container">
       <special-title title="全方位 一站式服务" eng-title="All-around one-stop service"></special-title>
       <div class="intro-container">
-        <rhombus-block v-for="item,index in infoDataList" :info-data="item"></rhombus-block>
+        <rhombus-block v-for="item,index in infoDataList" :key="index" :info-data="item"></rhombus-block>
       </div>
     </div>
     <right-helper></right-helper>
@@ -226,10 +227,11 @@
     right: 0;
     top:180px;
     width: 390px;
-    height: 494px;
+    height: 526px;
     background-color: rgba(255, 255, 255, 0.4);
     padding: 15px;
     & .box-inner{
+      position: relative;
       height: 100%;
       width: 100%;
       background-color: white;