login-withpwd.vue 4.0 KB
Newer Older
DCloud_JSON's avatar
1.0.0  
DCloud_JSON 已提交
1
<!-- 账号密码登录页 -->
DCloud_JSON's avatar
DCloud_JSON 已提交
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64
<template>
	<view class="uni-content">
		<!-- 顶部文字 -->
		<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>
				<text class="forget">忘记了?</text>
				<text class="link" @click="toRetrievePwd">找回密码</text>
			</view>
			<text class="link" @click="toRegister">注册账号</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
			}
		},
		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'
65
				//如果刚好用户名输入框的值为手机号码,就把它传到retrieve页面,根据该手机号找回密码
DCloud_JSON's avatar
DCloud_JSON 已提交
66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100
				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)
DCloud_JSON's avatar
DCloud_JSON 已提交
101 102 103 104 105 106 107 108 109 110 111 112 113
				}
				
				let data = {
					"password": this.password,
					"captcha": this.captcha
				}
				
				if (/^1\d{10}$/.test(this.username)) {
					data.mobile = this.username
				}else{
					data.username = this.username
				}
				
DCloud_JSON's avatar
DCloud_JSON 已提交
114 115 116
				uniIdCo.login(data).then(e => {
					this.loginSuccess(e)
				}).catch(e => {
117 118 119 120 121
					if(e.errCode == 'uni-id-captcha-required'){
						this.needCaptcha = true
					}else if(this.needCaptcha){
						//登录失败,自动重新获取验证码
						this.$refs.captcha.getImageCaptcha()
DCloud_JSON's avatar
DCloud_JSON 已提交
122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156
					}
				})
			},
			/* 前往注册 */
			toRegister(e) {
				console.log(e);
				uni.navigateTo({
					url: '/uni_modules/uni-id-pages/pages/register/register'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/uni_modules/uni-id-pages/common/login-page.scss";

	.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>