fontend-web/src/views/login/signIn.vue

<template>
  <div class="signIn">
    <div class="handleBox">
      <p class="loginTitle">{{ $t('login.signIn.title') }}</p>
      <div class="loginItem loginItemFrist">
        <span class="itemTitle">{{ $t('login.phone') }}：</span>
        <div class="inputBox">
          <input
            v-model="phoneNum"
            type="text"
            :placeholder="$t('login.phone_p')"
          />
        </div>
      </div>
      <div class="loginItem">
        <span class="itemTitle">{{ $t('login.password') }}：</span>
        <div class="inputBox">
          <input
            v-model="password"
            type="password"
            :placeholder="$t('login.password_p')"
          />
        </div>
      </div>

      <div class="motionBox loginItem">
        <span class="itemTitle"></span>
        <div class="motion">
          <el-checkbox v-model="checked" @change="motion">{{
            $t('login.signIn.selfMotion')
          }}</el-checkbox>
          <router-link to="/forgotPassword">
            <span class="forget">{{ $t('login.signIn.forget') }}？</span>
          </router-link>
        </div>
      </div>

      <div class="loginItem">
        <span class="itemTitle"></span>
        <el-button
          @click="submit"
          type="primary"
          class="loginBtn"
          :loading="loading"
          >{{ $t('login.signIn.title') }}</el-button
        >
      </div>
      <div class="trunRightBox">
        <span class="itemTitle"></span>
        <router-link to="/signUp">
          <span class="signNow">{{ $t('login.signIn.atOnce') }} >></span>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
import Cookie from '@/common/cookie';
import {signIn, getPayPassword} from '@/api/user';
export default {
  data() {
    return {
      checked: '',
      phoneNum: '',
      password: '',
      backToUrl: '',
      loading: false,
    };
  },
  created() {
    this.keyupSubmit();
    // console.log(window.location.search.split('=')[1]);
    this.backToUrl = window.location.search.split('=')[1];

    //字符串转为Boolean类型
    if (Cookie.get('is_motion') != undefined) {
      this.checked = eval(Cookie.get('is_motion').toLowerCase());
    }

    // if( this.checked === true ){
    //   this.login(Cookie.get('phoneNum'),Cookie.get('password'))
    // }
  },
  methods: {
    keyupSubmit() {
      document.onkeydown = () => {
        let _key = window.event.keyCode;
        if (_key === 13) {
          this.submit();
        }
      };
    },
    submit() {
      if (this.phoneNum === '') {
        //请输入手机号
        this.$message.warning(this.$t('login.phone_tip'));
      } else if (this.password === '') {
        this.$message.warning(this.$t('login.password_tip'));
      } else {
        this.loading = true;
        this.login(this.phoneNum, this.password);
      }
    },
    motion(e) {
      Cookie.set('is_motion', e);
    },
  },
};
</script>

<style lang="scss">
.signIn {
  .handleBox {
    width: 400px;
    height: 350px;
    background-color: #fff;
    border-radius: 4px;
    overflow: hidden;
  }

  .loginTitle {
    color: #333;
    font-size: 20px;
    text-align: center;
    margin-top: 35px;
    margin-bottom: 41px;
  }

  .loginItem {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .loginItemFrist {
    margin-bottom: 15px;
  }

  .inputBox {
    width: 251px;
    height: 42px;
    border: 1px solid rgba(241, 241, 241, 1);
    border-radius: 4px;
    display: flex;
    align-items: center;
  }

  .itemTitle {
    width: 90px;
    font-size: 16px;
    color: #545663;
  }

  .trunRightBox {
    display: flex;
    justify-content: flex-end;
    margin-right: 32px;
  }

  .motionBox {
    margin-top: 12px;
    margin-bottom: 21px;
  }

  .motion {
    display: flex;
    justify-content: space-between;
    width: 251px;
    .el-checkbox__inner {
      width: 16px;
      height: 16px;
    }
    .el-checkbox__inner::after {
      left: 5px;
    }
    .el-checkbox__label {
      color: #545663;
      font-size: 12px;
      padding-left: 7px;
    }
  }

  .el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: #333;
    border-color: #333;
  }

  .forget {
    color: #e8494a;
    font-size: 12px;
  }
  .signNow {
    color: #9ba0bc;
    font-size: 12px;
  }
  .loginBtn {
    width: 251px;
    height: 42px;
    border-radius: 4px;
    background-color: #e8494a;
    border: 2px solid #e8494a;
    color: #fefeff;
    margin-bottom: 11px;
    &:hover {
      background: #9f2023;
      border: 2px solid #9f2023;
      opacity: 1;
      color: #ba8889;
    }
  }
}
</style>