jp-housekeep-electric/pages/login/login.vue

<template >
	<view>
		<view class="logo">
			<image class="img" src="@/assets/img/logo.png" mode=""></image>
			
		</view>
		<view  class="logoText">
			e家能源
		</view>
		<!-- 手机号/密码 -->
		<view class="input-box">
			
			<u-input  v-model="phone"  style="padding: 0 20px" class="tel-input" type="text"  placeholder="请输入手机号码" />
		
			<u-input  v-model="password" style="padding: 0 20px" class="password-input" type="password"  placeholder="请输入密码" :password-icon="true" />

		</view>
		
		 <button class="login-disable" :class="{
			 login:password.length&&phone.length
		 }" @click="submit" >登录</button>
		 
		 <view class="reset"  @click="gotoUrl('/pages/mine/findBackPassword')" >
		 	忘记密码？ <span style="color:#387aea ;">点击找回</span>
		 </view>
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/user.js'
	import {
		checkPhone
	} from '@/apis/utils'
	export default {
		data() {
			return {
				phone:"",
				password:"",
			}
		},
		onLoad(){
			
			this.query()
		},
		methods: {
			loginset(response){
				
				var token = response ? response.data.token : '';
				this.carhelp.setToken(token);
				this.carhelp.setPersonInfo(response.data.regUser);
				this.carhelp.setPersonInfoPlus(response.data)
				
				//this.gotoUrl("pages/user/index")
				uni.redirectTo({
					url: '/pages/statistics/statistics'
				})
			},
			query(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				
				API.findByOpenId({
					noerror:true,
					openId: this.carhelp.getOpenId(),
					
				}).then((response) => {
					if(response.message){
						uni.hideLoading();
						if(response.message=='没有权限'){
							
							uni.showModal({
								title:"提示",
								showCancel:false,
								content:"没有权限"
							})
						}
					}else{
						this.loginset(response)
					}
				}).catch(error => {
					uni.hideLoading();
					
				})
			},
			submit(){
				if(!(this.phone.length&&this.password.length)){
					return
				}
				var checkPhoneResult = checkPhone(this.phone);
					
				if (checkPhoneResult !== true) {
					uni.showToast({
						icon: "none",
						title: checkPhoneResult,
						
					})
					return;
				}
				
				if(!this.password.length){
					uni.showToast({
						icon: "none",
						title: "请输入密码"
					})
					return
				}
				
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				
				API.login({
					password:this.password,
					phone:this.phone,
					openId: this.carhelp.getOpenId(),
					noerror:true,
				}).then((response) => {
					
					if(response.message){
						uni.hideLoading();
						if(response.message=='没有权限'){
							
							uni.showModal({
								title:"提示",
								showCancel:false,
								content:"没有权限"
							})
						}else{
							uni.showToast({
								icon: "none",
								title: response.message?response.message:"登录失败"
							})
						}
					}else{
						this.loginset(response)
					}
				
				}).catch(error => {
					uni.hideLoading();
					uni.showToast({
						icon: "none",
						title: error?error:"登录失败"
					})
				})
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	
	page{
		background-color: #fff;
		padding-top: 160rpx;
	}
	.logoText{
		width: 160rpx;
		margin: 0 auto;
		line-height: 46rpx;
		color: rgba(16,16,16,1);
		font-size: 32rpx;
		margin-top: 20rpx;
	}
	.logo{
		margin: 0 auto;
		width: 160rpx;
		height: 160rpx;
		border-radius: 16px;
		background: linear-gradient(180deg, rgba(31,85,255,1) 0%,rgba(39,171,255,1) 100%);
		display: flex;
		align-items: center;
		justify-content: center;
		.img{
			
			width: 112rpx;
			height: 112rpx;
		}
	}

.input-box{
	padding: 0 58rpx;
	margin-top: 112rpx;
	.tel-input,.password-input{
		 display: flex;align-items: center;
		border-radius: 50px;
		background-color: rgba(248,248,248,1);
		color: rgba(16,16,16,1);
		height: 100rpx;
		line-height: 100rpx;
		padding: 0 48rpx;
		margin-bottom: 40rpx;
	}
	
}

.login-disable{
	margin: 80rpx 56rpx 40rpx;
	border-radius: 100rpx;
	background-color: rgba(223,223,223,1);
	color: rgba(255, 255, 255, 1);
}
.login{
	background-color: rgba(27,119,251,1);
}

.reset{
	color: rgba(119,119,119,1);
	text-align: center;
}
</style>