<!-- 账号密码登录页 -->
<template>
<view class="page">
<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>
</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',
duration: 3000
});
}
if (!this.username.length) {
this.focusUsername = true
return uni.showToast({
title: '请输入手机号/用户名/邮箱',
icon: 'none',
duration: 3000
});
}
if (this.needCaptcha && this.captcha.length != 4) {
this.$refs.captcha.getImageCaptcha()
return uni.showToast({
title: '请输入验证码',
icon: 'none',
duration: 3000
});
}
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',
url: '/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) {
.uni-content {
height: auto;
}
}
.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>
uniapp页面里面的登录注册模板
最新推荐文章于 2024-08-05 18:05:44 发布