login-withpwd.vue

<!-- 账号密码登录页 -->
<template>
  <view class="uni-content">
    <view class="login-logo">
      <image :src="logo"></image>
    </view>
    <!-- 顶部文字 -->
    <text class="title title-box">账号密码登录</text>
    <uni-forms>
      <uni-forms-item name="username">
        <uni-easyinput :focus="focusUsername" @blur="focusUsername = false" class="input-box" :inputBorder="false" v-model="username" placeholder="请输入手机号/用户名/邮箱" />
      </uni-forms-item>
      <uni-forms-item name="password">
        <uni-easyinput :focus="focusPassword" @blur="focusPassword = false" class="input-box" clearable type="password" :inputBorder="false" v-model="password"
                       placeholder="请输入密码" />
      </uni-forms-item>
    </uni-forms>
    <uni-captcha v-if="needCaptcha" focus ref="captcha" scene="login-by-pwd" v-model="captcha" />
    <!-- 带选择框的隐私政策协议组件 -->
    <uni-id-pages-agreements scope="login" ref="agreements" ></uni-id-pages-agreements>
    <button class="uni-btn" type="primary" @click="pwdLogin">登录</button>
    <!-- 忘记密码 -->
    <view class="link-box">
      <view v-if="!config.isAdmin">
        <text class="forget">忘记了？</text>
        <text class="link" @click="toRetrievePwd">找回密码</text>
      </view>
      <text class="link" @click="toRegister">{{config.isAdmin ? '注册管理员账号': '注册账号'}}</text>
      <!-- <text class="link" @click="toRegister" v-if="!config.isAdmin">注册账号</text> -->
    </view>
    <!-- 悬浮登录方式组件 -->
    <uni-id-pages-fab-login ref="uniFabLogin"></uni-id-pages-fab-login>
  </view>
</template>

<script>
import mixin from '@/uni_modules/uni-id-pages/common/login-page.mixin.js';
const uniIdCo = uniCloud.importObject("uni-id-co",{
  errorOptions:{
    type:'toast'
  }
})
export default {
  mixins: [mixin],
  data() {
    return {
      "password": "",
      "username": "",
      "captcha": "",
      "needCaptcha": false,
      "focusUsername":false,
      "focusPassword":false,
      "logo": "/static/logo.png"
    }
  },
  onShow() {
    // #ifdef H5
    document.onkeydown = event => {
      var e = event || window.event;
      if (e && e.keyCode == 13) { //回车键的键值为13
        this.pwdLogin()
      }
    };
    // #endif
  },
  methods: {
    // 页面跳转，找回密码
    toRetrievePwd() {
      let url = '/uni_modules/uni-id-pages/pages/retrieve/retrieve'
      //如果刚好用户名输入框的值为手机号码，就把它传到retrieve页面，根据该手机号找回密码
      if (/^1\d{10}$/.test(this.username)) {
        url += `?phoneNumber=${this.username}`
      }
      uni.navigateTo({
        url
      })
    },
    /**
     * 密码登录
     */
    pwdLogin() {
      if(!this.password.length){
        this.focusPassword = true
        return uni.showToast({
          title: '请输入密码',
          icon: 'none'
        });
      }
      if(!this.username.length){
        this.focusUsername = true
        return uni.showToast({
          title: '请输入手机号/用户名/邮箱',
          icon: 'none'
        });
      }
      if(this.needCaptcha && this.captcha.length!=4){
        this.$refs.captcha.getImageCaptcha()
        return uni.showToast({
          title: '请输入验证码',
          icon: 'none'
        });
      }

      if (this.needAgreements && !this.agree) {
        return this.$refs.agreements.popup(this.pwdLogin)
      }

      let data = {
        "password": this.password,
        "captcha": this.captcha
      }

      if (/^1\d{10}$/.test(this.username)) {
        data.mobile = this.username
      }else if(/@/.test(this.username)) {
        data.email = this.username
      }else{
        data.username = this.username
      }

      uniIdCo.login(data).then(e => {
        this.loginSuccess(e)
      }).catch(e => {
        if(e.errCode == 'uni-id-captcha-required'){
          this.needCaptcha = true
        }else if(this.needCaptcha){
          //登录失败，自动重新获取验证码
          this.$refs.captcha.getImageCaptcha()
        }
      })
    },
    /* 前往注册 */
    toRegister() {
      uni.navigateTo({
        url: this.config.isAdmin ? '/uni_modules/uni-id-pages/pages/register/register-admin': '/uni_modules/uni-id-pages/pages/register/register',
		fail(e) {
			console.error(e);
		}
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/uni_modules/uni-id-pages/common/login-page.scss";
@media screen and (min-width: 690px) {

}
.forget{
  font-size: 12px;
  color: #8a8f8b;
}

.link-box {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  justify-content: space-between;
  margin-top: 20px;
}

.link {
  font-size: 12px;
}
</style>