Fx66/src/components/Login.vue

<template>
  <div class="login-ctnr">
    <!-- 注册框 -->
    <div class="login-block" v-if="logintype==0">
      <div class="contain">
        <div class="tab-box">
          <span :class="{active:operation=='mobile'}" @click="tabChange()">手机注册</span>
          <span :class="{active:operation=='email'}" @click="tabChange()">邮箱注册</span>
        </div>
        <div class="input-line">
          <span class="icon-box" v-show="operation=='email'">
            <i class="iconfont icon-tubiao01"></i>
          </span>
          <span class="country-box" v-show="operation=='mobile'">
            <el-select v-model="coutry">
              <el-option
                v-for="item in c_options"
                :key="item.code"
                :label="item.ch_name"
                :value="item.code"
              ></el-option>
            </el-select>
          </span>
          <input type="text" :placeholder="intip" class="input-user" v-model="regInfo.intype">
        </div>
        <div class="verify-line">
          <input type="text" placeholder="请输入验证码" v-model="regInfo.verifyCode">
          <button class="btn-primary" @click="sendCode()" v-if="verifyState == 0">发送验证码</button>
          <button class="btn-primary" @click="sendCode()" v-if="verifyState == 1" :class="{disgrey:verifyState == 1}">已发送{{secondNum}}</button>
          <button class="btn-primary" @click="sendCode()" v-if="verifyState == 2">重新发送</button>
        </div>
        <div class="input-line">
          <span class="icon-box"><i class="iconfont icon-mima"></i></span>
          <input type="password" placeholder="请输入您的密码" class="input-user" v-model="regInfo.passWord">
          <span class="icon-box keyboard"><i class="iconfont icon-keyboard"></i></span>
        </div>
        <div class="tip-line">
          <input type="checkbox" v-model='warnRead'>
          <p style="cursor:auto">我已了解<span @click="wranDialog = true">风险提示</span>!</p>
          <span @click="logintype=1">立即登录!</span>
          <div class="warn-box" v-show="registered&&operation=='mobile'">*该手机号码已注册,请尝试更换其它手机号码</div>
          <div class="warn-box" v-show="registered&&operation=='email'">*该邮箱已注册</div>
        </div>
        <button class="bottom-btn" @click="loginAction()">注册</button>
      </div>
    </div>
    <!-- 登录框 -->
    <div class="login-block" v-if="logintype==1">
      <div class="contain">
        <div class="tab-box">
          <span :class="{active:operation=='mobile'}" @click="operation='mobile'">手机登录</span>
          <span :class="{active:operation=='email'}" @click="operation='email'">邮箱登录</span>
        </div>
        <div class="input-line">
          <span class="icon-box" v-show="operation=='email'">
            <i class="iconfont icon-tubiao01"></i>
          </span>
          <span class="country-box" v-show="operation=='mobile'">
            <el-select v-model="coutry">
              <el-option
                v-for="item in c_options"
                :key="item.code"
                :label="item.ch_name"
                :value="item.code"
              ></el-option>
            </el-select>
          </span>
          <input type="text" :placeholder="intip" class="input-user" v-model="loginInfo.intype">
        </div>
        <div class="input-line">
          <span class="icon-box"><i class="iconfont icon-mima"></i></span>
          <input type="password" placeholder="请输入您的密码" class="input-user" v-model="loginInfo.passWord">
        </div>
        <div class="tip-line">
          <p @click="logintype = 2">忘记密码？</p>
          <span @click="logintype = 0">立即注册!</span>
        </div>
        <button class="bottom-btn" @click="loginAction()">登录</button>
      </div>
    </div>
    <!-- 密码找回 -->
    <div class="login-block" v-if="logintype == 2">
      <div class="contain">
        <div class="tab-box">
          <span :class="{active:operation=='email'}" @click="operation='email'">邮箱找回</span>
          <span :class="{active:operation=='mobile'}" @click="operation='mobile'">手机找回</span>
        </div>
        <div class="input-line">
          <span class="icon-box" v-show="operation=='email'">
            <i class="iconfont icon-tubiao01"></i>
          </span>
          <span class="country-box" v-show="operation=='mobile'">
            <el-select v-model="coutry">
              <el-option
                v-for="item in c_options"
                :key="item.code"
                :label="item.ch_name"
                :value="item.code"
              ></el-option>
            </el-select>
          </span>
          <input type="text" :placeholder="intip" class="input-user" v-model="resetInfo.intype">
        </div>
        <div class="verify-line" v-if="operation=='mobile'">
          <input type="text" placeholder="请输入验证码" v-model="resetInfo.verifyCode">
          <button class="btn-primary">发送验证码</button>
        </div>
        <div class="input-line" v-if="operation=='mobile'">
          <span class="icon-box"><i class="iconfont icon-mima"></i></span>
          <input type="text" placeholder="请输入您的新密码" class="input-user" v-model="resetInfo.oldPassWord">
          <span class="icon-box keyboard"><i class="iconfont icon-keyboard"></i></span>
        </div>
        <div class="input-line" v-if="operation=='mobile'">
          <span class="icon-box"><i class="iconfont icon-mima"></i></span>
          <input type="text" placeholder="请再次输入您的新密码" class="input-user" v-model="resetInfo.newPassWord">
          <span class="icon-box keyboard"><i class="iconfont icon-keyboard"></i></span>
        </div>
        <div class="tip-line">
          <p></p>
          <span @click="logintype = 1">返回登录!</span>
        </div>
        <button class="bottom-btn" v-if="operation == 'email' && verifyState == 0" @click='reCode()'>发送邮件</button>
        <button class="bottom-btn" v-if="operation == 'email' && verifyState == 1" @click='reCode()'>已发送{{secondNum}}</button>
        <button class="bottom-btn" v-if="operation == 'email' && verifyState == 2" @click='reCode()'>重新发送</button>
        <button class="bottom-btn" v-if="operation == 'mobile'" @click="loginAction()">修改密码</button>
      </div>
    </div>
    <!-- 登录成功页面 -->
    <div class="login-block" v-if="logintype == 3">
      <div class="contain">
        <p class="user-msg">欢迎您，{{loginInfo.userName}}!</p>
        <div class="whole-line">
          <button v-if="applicationStatus == 0" class="whole-btn" @click="golink('/apply')">申请经纪商</button>
          <button v-if="applicationStatus == 1" class="whole-btn" @click="golink('/apply')">您的申请正在审核中</button>
          <button v-if="applicationStatus == 2" class="whole-btn" @click="golink('/apply')">您的申请已通过</button>
          <button v-if="applicationStatus == -1" class="whole-btn" @click="golink('/apply')">您的申请已被拒绝</button>
        </div>
      </div>
    </div>
    <!-- 弹出框 -->
    <el-dialog
     title="FX66平台风险提示及免责声明" 
     :visible.sync="wranDialog"
     center
     width="1100px"
     >
      <div class="dialog-box">
        <div class="dialog-content">
          <h1>尊敬的FX66平台用户：</h1>
          <p>由于数字资产具有极高的投资风险，实行7*24小时连续交易，它没有像中国股市有涨跌停限制，且易受外界因素影响，价格波动较大！ 比特币不由货币当局发行，不具有法偿性与强制性，请务必在了解数字资产市场风险与风险自担的前提下谨慎、理性投资。</p>
          <ul v-for="item in warns">
            <h2>{{item.title}}</h2>
            <li v-for="list in item.lists">{{list}}</li>
          </ul>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="tipRead()" round>我已阅读</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import {getcookie,getInfo,typeVerify,sendEmail,sendMessage,inputTest,goRegister,goLogin,resetCode,goReset,getStatus} from '../assets/js/common.js'
  import bus from '../assets/js/bus.js'
  export default{
    data(){
      return{
        applicationStatus:0,
        warnRead:false,
        countDown:'',
        secondNum:60,
        registered:false,
        verifyState:0,
        logintype:1,
        wranDialog:false,
        operation:"mobile",
        coutry:'86',
        c_options:[],
        warns:[
          {
            title:"一、风险提示：",
            lists:[
              "1 、数字资产市场是全新的、未经确认的，而且可能不会增长。目前，数字资产主要由投机者大量使用，零售和商业市场使用相对较少。因此，数字资产价格易产生波动，并进而对数字资产投资产生不利影响。",
              "2、因各国法律、法规和规范性文件的制定或者修改，数字资产交易随时可能被暂停、或被禁止。因此造成的经济损失全部由用户自行承担。",
              "3、用户参与数字资产交易，需承受较高风险。用户应了解和理解此投资有可能导致部分损失或全部损失，所以用户应该以能承受的损失程度来决定投资的金额。用户应了解和理解数字资产会产生衍生风险，所以如有任何疑问，建议先寻求理财顾问的协助。此外，除了上述提及过的风险以外，还会有未能预测的风险存在。",
              "4 、用户应慎重考虑并用清晰的判断能力去评估自己的财政状况及上述各项风险而作出任何买卖数字资产的决定，并承担由此产生的全部损失，FX66对此不承担任何责任。",
              "5 、用户了解FX66仅作为用户获取数字资产信息、寻找交易方、就数字资产的交易进行协商及开展交易的场所，FX66不参与用户的任何交易，故用户应自行谨慎判断确定相关数字资产及/或信息的真实性、合法性和有效性，并自行承担因此产生的责任与损失。",
              "6、 FX66的任何意见、消息、探讨、分析、价格、建议和其他资讯均是一般的市场评论，并不构成投资建议。FX66不承担任何因依赖该资讯直接或间接而产生的损失，包括但不限于任何利润损失。",
              "7、FX66的内容会随时更改并不作另行通知，FX66已采取合理措施确保网站资讯的准确性，但并不能保证其准确性程度，亦不会承担任何因FX66的资讯或因未能链结互联网、传送或接收任何通知和信息时的延误或失败而直接或间接产生的损失。",
              "8、使用互联网形式的交易系统亦存有风险，包括但不限于软件，硬件和互联网链结的失败等。由于FX66不能控制互联网的可靠性和可用性，FX66不会对失真，延误和链结失败而承担任何责任。"
            ]
          },
          {
            title:"二、反洗钱：",
            lists:[
              "为了维护金融稳定，防范洗钱风险。FX66将严格遵循相关法律，严格实行账户实名制，防范可能存在的金融风险。",
              "1、FX66遵守和执行反洗钱法的规定，对用户进行身份识别、客户身份资料和交易记录保存制度，以及大额的和可疑交易报告的制度。",
              "2、用户注册、挂失交易密码或者资金密码时，应当提供并上传身份证复印件，FX66对用户提供的身份证信息进行识别和比对。FX66有合理的理由怀疑用户使用虚假身份注册时，有权拒绝注册或者注销已经注册的账户。",
              "3、FX66参照《金融机构大额交易和可疑交易报告管理办法》的规定，保存大额交易和有洗钱嫌疑的交易记录，在监管机构要求提供大额交易和可疑交易的记录时，向监管机构提供。",
              "4、FX66对用户身份信息以及大额交易、可疑交易记录进行保存，依法协助、配合司法机关和行政执法机关打击洗钱活动，依照法律法规的规定协助司法机关、海关、税务等部门查询、冻结和扣划客户存款。",
              "5、用户需要承诺在FX66注册的账户为本人操作，提供的所有证件，信息均真实有效。若在验证账户时发现提供的信息为虚假， 伪造或拒绝，虚假陈述资金来源及去向等，FX66有权在不通知用户的情况下冻结账户，并向公安机关举报。"
            ]
          },
          {
            title:"三、免责声明：",
            lists:[
              "1、FX66提供的信息（包括且不限于币种介绍、投资分析报告、预测文章信息及其他评论、数据、图表、指标、理论、直接的或暗示的指示）等仅供参考，FX66力求但不保证信息的准确性、完整。FX66不对因使用本网站全部或部分内容产生的或因依赖本网站内容而引致的任何损失承担任何责任。",
              "2、FX66可能提供部分与其他网站的链接，前述链接仅为方便您的使用，FX66不对所链接网站的信息的真实性、有效性、合法性承担任何责任。",
              "3、通过FX66服务购买或获取任何数据、信息或进行交易等行为或替代行为产生的费用及损失，包括但不限于收入损失，交易利润或合同损失，业务中断，预期可节省的货币的损失， 信息的损失，机会、商誉或声誉的损失，数据的损坏或损失，购买替代产品或服务的成本，数字资产消亡或退出市场，任何由于侵权（包括过失）、违约或其他任何原因产生的间接的、特殊的或附带性的损失或损害。",
              "4、不论在何种情况下，FX66均不对由于信息网络正常的设备维护，信息网络连接故障，电脑、通讯或其他系统的故障，电力故障，罢工，劳动争议，暴乱，起义，骚乱，生产力或生产资料不足，火灾，洪水，风暴，爆炸，战争，政府行为，司法行政机关的命令或第三方的不作为而造成的不能服务或延迟服务承担责任。",
              "5、基于互联网的特殊性，FX66不担保服务不会受中断，对服务的及时性、安全性都不作担保。FX66力图使用户能对本网站进行安全访问和使用，但FX66不能保证FX66包含的全部信息、程序、文本等完全安全，不受任何病毒、木马等恶意程序的干扰和破坏，故用户登陆、使用FX66任何服务或下载及使用该下载的任何程序、信息、数据等均是用户个人的决定并自行承担风险及可能产生的损失。",
              "6、基于区块链交易平台的特殊性，FX66力图确保平台 365*24 小时保持在线。但FX66不能保证因 DDoS 攻击、服务器供应商暂停服务、网络供应商暂停服务或其他不可抗力等原因造成网站无法访问，交易大厅无法正常挂单、撤单，已挂单交易未能正常成交，区块链资产充提币长时间未到账等情况。由于以上原因造成用户资产损失的情况，FX66不承担任何责任。",
              "7、用户有义务妥善保管好用户名和密码。通过用户的用户名和密码编辑、发布的任何信息或做出的任何行为都将被视为是用户自己的行为，对因此产生的任何损失FX66不承担任何责任。",
              "8、任何非因FX66的原因而引起的与FX66服务有关的其它损失。",
              "数字货币可能存在矿工预挖、庄家操控、团队解散、技术缺陷等问题，其价格波动较大，可能发生资产归零的风险。因此我们强烈建议您在自身能承受的风险范围内参与数字货币交易。请注意止盈止损，合理评估风险，请勿投入高于个人承受能力的金额！ 最终解释权归FX66所有。FX66感谢有您的陪伴！"
            ]
          }
        ],
        regInfo:{
          intype:'',
          verifyCode:'',
          passWord:''
        },
        loginInfo:{
          intype:'',
          passWord:'',
          userName:''
        },
        resetInfo:{
          intype:'',
          verifyCode:'',
          oldPassWord:'',
          newPassWord:''
        }
      }
    },
    computed:{
      intip:function(){
        let val='';
        if (this.operation == "mobile") {
          val="请输入您的手机号码"
        }else{
          val="请输入您的邮箱"
        }
        return val;
      }
    },
    mounted(){
      this.$nextTick(()=>{
        let token = getcookie("token");
        if (token) {
          this.logintype = 3;
          this.loginInfo.userName = getcookie("username");
        }else{
          this.logintype = 1;
        }
        var that = this;
        bus.$on("goout",function(){
          that.logintype = 1;//源代码里为什么是this,因为他用的是箭头函数不传入this
          that.loginInfo.passWord = "";
        })
        this.getCountry();
        getStatus(this);
      })
    },
    methods:{
      golink(url){
        this.$router.push({path:"/applyAgent"});
      },
      reCode(){
        resetCode(this);
      },
      loginAction(){
        //不用做格式的检测因为后台会检测
        var flag = inputTest(this);
        //判断是哪种框，选择相应的动作，0代表注册、1代表登录、2代表密码找回
        switch(this.logintype){
          case 0:
            goRegister(this,flag);
            break;
          case 1:
            goLogin(this,'',flag);
            break;
          case 2:
            goReset(this,flag);
            break;
        }
      },
      sendCode(){
        if (!this.regInfo.intype) {
          //判断为不为空
          this.$notify({
              title:'提示',
              message:this.intip,
              type:'warning',
              duration:2000
            })
          return false;
        }else{
          //判断格式
          var verifyRes = typeVerify(this.regInfo.intype,this.operation,this);
          if (verifyRes) {
            return false;
          }
        };
        //设置参数
        let params={};
        if (this.operation == 'email') {
          params = {
            email:this.regInfo.intype,
            codetype:'validate',
            param:"FzmDateTime|FzmRandom",
            platkey:'zhaobi',
          };
        }else{
          params = {
            mobile:this.regInfo.intype,
            codetype:'validate',
            param:"FzmRandom",
            platkey:'zhaobi',
            area:this.coutry
          };
        }
        sendEmail(this,params,this.operation);
      },
      getCountry(){
        getInfo(this,this.urlApi.phoneCountry,'GET','',(res)=>{
          this.c_options=res.data;
        });
      },
      tipRead(){
        this.warnRead=true;
        this.wranDialog=false;
      },
      tabChange(){
        this.regInfo.intype = '';
        this.loginInfo.intype = '';
        if (this.operation == 'mobile') {
          this.operation = 'email';
        }else{
          this.operation = 'mobile';
          
        }
      }
    }
  }
</script>
<style scoped>
  .login-ctnr{
    width: 1200px;
    margin: 0 auto;
    position: absolute;
    left: 50%;
    margin-left: -600px;
    top: 0;
    margin-top: 180px;
    .login-block{
      width: 390px;
      background-color: hsla(0,0%,100%,.4);
      padding: 15px;
      position: absolute;
      right: 0;
      top: 0;
      z-index: 50;
      .contain{
        background-color: #fff;
        padding: 50px 20px 0;
        color: #333;
        .tab-box{
          border-bottom: 2px solid #e5e5e5;
          margin-bottom: 30px;
          .active{
            border-bottom: 2px solid #1a6fa6;
            margin-bottom: -2px;
            color: var(--text-color-active);
          }
          span{
            display: inline-block;
            font-size: 20px;
            color: #333;
            width: 110px;
            padding-bottom: 20px;
            cursor: pointer;
          }
        }
        .input-line{
          width: 310px;
          height: 50px;
          line-height: 50px;
          border:1px solid #dcdcdc;
          text-align: left;
          margin-bottom: 10px;
          position: relative;
          .country-box{
            display: inline-block;
            width: 50px;
            height: 50px;
            /deep/ .el-input{
              .el-input__inner{
                padding: 0px 14px 0px 4px;
                height: 45px;
                line-height: 45px;
                border-radius: 0;
                font-size: 12px;
                border:0px;
                border-right: 1px solid #dcdcdc;
              }
              .el-input__suffix{
                right: 0;
              }
            }
          }
          .icon-box{
            display: inline-block;
            width: 50px;
            height: 50px;

            border-right: 1px solid #dcdcdc;
            text-align: center;
            i{
              color: #ccc;
              font-size: 24px;
            }
          }
          .input-user{
            width: 250px;
            border: 0px;
            font-size: 14px;
            text-indent: 5px;
          }
          .keyboard{
            position: absolute;
            top: 0;
            right: 0;
            i{
              font-size: 30px;
            }
          }
        }
        .verify-line{
          width: 310px;
          height: 50px;
          text-align: left;
          margin-bottom: 10px;
          position: relative;
          input{
            font-size: 14px;
            width: 165px;
            height: 50px;
            text-indent: 5px;
            border:1px solid #dcdcdc;
          }
          button{
            color: #666;
            width: 130px;
            height: 50px;
            position: absolute;
            right: 0;
          }
        }
        .tip-line{
          width: 310px;
          margin-bottom: 26px;
          display: flex;
          align-items: center;
          font-size: 14px;
          position: relative;
          input{
            margin-right: 10px;
          }
          p{
            display: inline-block;
            cursor: pointer;
            span{
              position: relative;
            }
          }
          span{
            color: #1a6fa6;
            position: absolute;
            right: 0;
            cursor: pointer;
          }
          .warn-box{
            position: absolute;
            left: 0;
            bottom: -23px;
            color: red;
          }
        }
        .bottom-btn{
          width: 150px;
          height: 50px;
          font-size: 18px;
          background-color: #1a6fa6;
          border: 0;
          color: #fff;
          border-radius: 0;
          cursor: pointer;
          margin-bottom: 30px;
        }
        .user-msg{
          font-size: 25px;
          color: #1a6fa6;
        }
        .whole-line{
          margin-top: 50px;
          .whole-btn{
            width: 100%;
            height: 50px;
            line-height: 50px;
            border:1px solid #d2d2d2;
            background-color: transparent;
            margin-bottom: 70px;
            font-size: 18px;
            cursor: pointer;
          }
        }
      }
    }
  }
</style>
<style>
  .el-select-dropdown.el-popper{
    width: 130px;
    border-radius: 2px;
    margin-top: 6px;
    .el-scrollbar{
      .el-select-dropdown__wrap.el-scrollbar__wrap{
        .el-select-dropdown__list{
          .el-select-dropdown__item.selected{
            color: #fff;
            background-color: #20a0ff;
            &.hover{
              background-color: #1c8de0;
            }
          }
        }
      }
    }
  }
  .el-popper[x-placement^=bottom] .popper__arrow{
    display: none;
  }
  .login-ctnr{
    .el-dialog__header{
      padding: 30px 20px 0px;
      .el-dialog__title{
        color: #165e8d;
        font-size: 24px;
        font-weight: 700;
      }
      .el-dialog__headerbtn{
        font-size: 24px;
        .el-icon-close{
          color: #bfcbd9;
          &:hover{
            color: #20a0ff;
          }
        }
      }
    }
    .el-dialog__body{
      padding: 30px 20px 5px;
      .dialog-box{
        overflow: hidden;
        .dialog-content{
          padding: 30px;
          background-color: #f6f6f6;
          height: 500px;
          overflow-y: scroll;
          margin: -16px;
          h1{
            font-size: 16px;
            color: #165e8d;
            line-height: 24px;
          }
          p{
            line-height: 24px;
          }
          ul{
            margin-top: 30px;
            h2{
              font-size: 16px;
              color: #165e8d;
              line-height: 24px;
            }
            li{
              line-height: 24px;
            }
          }
        }
      } 
    }
    .dialog-footer{
      padding: 10px 20px 15px;
      .el-button--primary{
        background-color: #1a6fa6;
        width: 140px;
        height: 40px;
        border: 0;
        font-size: 18px;
      }
    }
  }
</style>