assess-app/pages/login/index.vue

<template>
  <view class="page-box login-box">
      <view class="login-form sys-radius-50 " >
        <view class="from-title">
          <view class="title-list">
            <view class="title-text  sys-size-28 text-center sys-weight-600" :class="{'default-text':type===1}" @click="setType(1)">验证码登录</view>
            <view class="title-text sys-size-28 text-center sys-weight-600" :class="{'default-text':type===2}" @click="setType(2)">密码登录</view>
          </view>
          <view class="title-bg one-background-color" :class="{'title-bg-two':type===2}">
            <view class="bg-icon dominant-background-color "></view>
          </view>
        </view>
        <view class="from-box one-background-color " :class="{'one-from':type===1,'two-from':type===2}">
          <view class="from-animation animate__animated animate__fadeIn"  v-if="type===1" >
            <view class="input-item  sys-from-background-color sys-radius-30 " :class="{'apply-shake':phoneShake}">
              <input type="number" class="login-input" placeholder="请输入手机号" maxlength="11" v-model="loginData.phone"></input>
            </view>
            <view class="input-item  input-send sys-from-background-color sys-radius-30" :class="{'apply-shake':codedShake}">
              <input type="number" class="login-input" placeholder="请输入验证码" v-model="loginData.code"></input>
              <view class="login-send text-color-dominant sys-size-28 sys-weight-400" @click="getVerifiedCode" v-if="timeNum<=0">发送验证码</view>
              <view class="login-send text-color-dominant sys-size-28 sys-weight-400" v-else>{{ timeNum }} s</view>
            </view>
          </view>
          <view class="from-animation animate__animated animate__fadeIn" v-else>
            <view class="input-item  sys-from-background-color sys-radius-30 " :class="{'apply-shake':phoneShake}">
              <input type="number" class="login-input" placeholder="请输入手机号"  v-model="loginData.phone" maxlength="11"></input>
            </view>
            <view class="input-item   sys-from-background-color sys-radius-30" :class="{'apply-shake':passwordShake}">
              <input type="password" class="login-input" placeholder="请输入密码" v-model="loginData.password"></input>
            </view>
          </view>

          <view class="input-agreement" @click="setIsConsent" :class="{'apply-shake':consentShake}">
            <image class="agreement-agree" v-if="isConsent" src="/static/img/login/Checked1@3x.png" mode="aspectFill"></image>
            <image class="agreement-agree" v-else src="/static/img/login/Checked2@3x.png" mode="aspectFill"></image>
            <view class="agreement-text text-color-666 sys-size-24">已阅读并同意</view>
            <view class="agreement-text text-color-dominant sys-size-24">《隐私政策》</view>
          </view>

          <view
              class="input-but dominant-background-color text-color-fff sys-size-30 sys-radius-100 sys-weight-600"
              :class="{'sys-selected-but':isLogin,'sys-unselected-but':!isLogin}"
              @click="login"
          >登陆</view>
        </view>
      </view>
      <view class="register-box">
        <view class="register-text sys-weight-400 sys-size-24 text-color-666">还没有账号？</view>
        <view class="register-text text-color-dominant sys-size-24 sys-weight-400">立即注册</view>
      </view>
      <view class="wx-box">
        <view class="wx-title">
          <view class="wx-wire"></view>
          <view class="wx-text sys-size-24 text-color-7c sys-weight-400">第三方登录</view>
          <view class="wx-wire"></view>
        </view>
        <image class="wx-logo" src="/static/img/login/wx-img.png" mode="aspectFill"></image>
      </view>


  </view>
</template>
<script>
  import {commonSend} from "@/api/common";
  import tools from "@/service/tools";
  import {login} from "@/api/login";

  export default {
    components: {

    },
    data() {
      return {
        type:1,
        loginData: {
          phone: '',
          password: '',
          code: '',
        },
        phoneShake:false,
        passwordShake:false,
        codedShake:false,
        consentShake:false,
        isConsent:false,
        isLogin:false,
        timeNum: 0,
        timer: null,
      }
    },
    watch:{
      'loginData': {
        handler() {
          this.verifyData()
        },
        deep: true
      },
      'isConsent':function () {
        this.verifyData()
      }
    },
    mounted() {

    },
    methods: {
      setShake(type){
        if(type===1){
          this.phoneShake=true
        }else if(type===2){
          this.passwordShake=true
        }else if(type===3){
          this.codedShake=true
        }else if(type===4){
          this.consentShake=true
        }
        setTimeout(()=>{
          this.phoneShake=false
          this.passwordShake=false
        },500)
      },
      login() {
        if (this.loginData.phone === '') {
          tools.error('请输入手机号码');
          this.setShake(1)
          return;
        }
        if (this.type !== 1) {
          if (this.loginData.password === '') {
            this.setShake(2)
            tools.error('请输入登陆密码');
            return;
          }
        } else {
          if (this.loginData.code === '') {
            this.setShake(3)
            tools.error('请输入验证码');
            return;
          }
        }
        if (!this.isConsent) {
          this.setShake(4)
          tools.error('请阅读并同意协议');
          return;
        }
        login(this.loginData).then((res) => {
          if (res.code === 1) {
            tools.setLoginData(res.data, true)
          } else {
            tools.error(res.msg)
          }
        })
      },
      verifyData(){
        if(this.type===1){
          this.isLogin=this.loginData.phone!=='' && this.loginData.code!=='' && this.isConsent
        }else {
          this.isLogin=this.loginData.phone!=='' && this.loginData.password!=='' && this.isConsent
        }
      },
      getVerifiedCode() {
        if (this.timeNum > 0) {
          return;
        }
        if (this.loginData.phone === '') {
          tools.error("请输入手机号码")
          return;
        }
        let regPhone = /^(?:(?:\+|00)86)?1\d{10}$/;
        if (!regPhone.test(this.loginData.phone)) {
          tools.error("手机号码格式错误")
          return;
        }
        commonSend({
          'phone': this.loginData.phone,
          'send_type': 'retrieve'
        }).then((res) => {
          if (res.code === 1) {
            tools.success(res.msg);
            this.timeNum = 60;
            this.timer = setInterval(() => {
              this.timeNum--;
              if (this.timeNum <= 0) {
                clearInterval(this.timer);
              }
            }, 1000);
          } else {
            tools.error(res.msg);
          }
        })
      },
      setIsConsent(){
        this.isConsent=!this.isConsent
      },
      setType(type){
        if(type!==this.type){
          this.type=type
        }
      },

    },
  }
</script>
<style lang="scss" scoped>
  @import "/static/css/login.css";
  .page-box{
    position: relative;
    padding-top: 370rpx;
    .login-form{
      margin: 0 30rpx;
      border-radius: 50rpx;
      background-color: rgba(255,255,255,0.5);
      .from-title{
        border-radius: 50rpx 50rpx 0 0;
        height: 110rpx;
        position: relative;

        .title-bg{
          position: absolute;
          border-radius: 50rpx 50rpx 0 0;
          top: 0;
          left: 0;
          height:110rpx;
          width: 50%;
          transition: .5s ease;
          z-index: 0;
          .bg-icon{
            margin: 86rpx auto 0 auto;
            width: 36rpx;
            height: 6rpx;
            border-radius: 99rpx;
          }
        }
        .title-bg-two{
          left: 50%;
          transition: .5s ease;
        }
        //.title-bg::after {
        //  content: '';
        //  position: absolute;
        //  right: -50rpx;
        //  bottom: 0;
        //  width: 50rpx;
        //  height:50rpx;
        //  background-color: #fff;
        //  border-radius: 50rpx 50rpx  50rpx 0;
        //}
        .title-list{
          display: flex;
          justify-content: space-between;
          z-index: 1;
          position: relative;
          .title-text{
            width: 50%;
            height: 110rpx;
            line-height: 102rpx;
            color: #333333;
          }
          .default-text{
            color: #10B261;
          }
          .title-text:first-child{
            background-image: url("/static/img/login/right.png");
            background-repeat: no-repeat;
            background-position: right bottom;
          }
          .title-text:last-child{
            background-image: url("/static/img/login/left.png");
            background-repeat: no-repeat;
            background-position: left bottom;
          }
        }

      }
      .from-box{
        box-shadow: 0rpx 4rpx 36rpx 0rpx rgba(196,196,196,0.25);
        border-radius: 0 0 50rpx 50rpx;
        padding: 50rpx 45rpx;
        .input-item{
          height: 96rpx;
          padding: 28rpx 40rpx;
          box-sizing: border-box;
          .login-input{
            width: 100%;
          }
        }
        .input-item:last-child{
          margin-top: 30rpx;
        }
        .input-send{
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .login-input{
            width:calc(100% - 140rpx) ;
          }
          .login-send{
            width: 140rpx;
            text-align: center;
          }
        }
        .input-agreement{
          margin-top: 25rpx;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .agreement-agree{
            width: 32rpx;
            height: 32rpx;
            transition: .5s ease;
          }
          .agreement-text{
            margin-left: 18rpx;
          }
        }
        .input-but{
          margin-top: 40rpx;
          width: 100%;
          height: 96rpx;
          line-height: 96rpx;
          text-align: center;
        }
      }
      .one-from{
        border-radius: 0 50rpx 50rpx 50rpx;
      }
      .two-from{
        border-radius:  50rpx 0 50rpx 50rpx;
      }
    }
    .register-box{
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 60rpx;
      .register-text{
        height: 34rpx;
        line-height: 34rpx;
      }
      .register-text:last-child{
        margin-right: 5rpx;
      }
    }
    .wx-box{
      position: absolute;
      bottom: calc(60rpx + env(safe-area-inset-bottom));
      left: 0;
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .wx-title{
        display: flex;
        justify-content: center;
        align-items: center;
        .wx-wire{
          background: linear-gradient( 90deg, #D9D9D9 0%, rgba(115,115,115,0) 100%);
          width: 174rpx;
          height: 2rpx;
          border-radius: 50%;
        }
        .wx-text{
          margin: 0 15rpx;
          height: 34rpx;
          line-height: 34rpx;
        }
      }
      .wx-logo{
        margin: 25rpx auto 0 auto;
        width: 80rpx;
        height: 80rpx;
      }
    }

  }
</style>