jp-youdian-Inspection/pages/login/login.vue

<template >
	<view>
		<view class="logo">
			<image class="img" src="@/assets/img/logo/logo.png" mode=""></image>
			
		</view>
		<view  class="logoText">
			<view>优电联盟</view>
			<view>巡检端</view>
			
			

		</view>
		<!-- 手机号/密码 -->
		<view class="input-box">
			
			<u-input  v-model="userName"  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&&userName.length
		 }" @click="submit" >登录</button>
		 
		 <view class="reset" v-if="0" @click="gotoUrl('/pages/login/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 {
				userName:"",
				password:"",
			}
		},
		onLoad(){
			
			this.query()
		},
		methods: {
			
			query(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				
				API.findByOpenId({
					noerror:true,
					openId: this.jphelp.getOpenId(),
				 
				
				}).then((response) => {
					
					if(response.message){
						uni.hideLoading();
						if(response.message=='没有权限'){
							
							uni.showModal({
								title:"提示",
								showCancel:false,
								content:"没有权限"
							})
						}
					}else{
						this.loginset(response)
						
						uni.switchTab({
							url: '/pages/index/index'
						})
					}
					
					
				
				}).catch(error => {
					
					uni.hideLoading();
					
				})
			},
			submit(){
				if(!(this.userName.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.userName,
					openId: this.jphelp.getOpenId(),
					noerror:true,
					roleName:'XJ',
					//type:2,
				}).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)
						
						uni.switchTab({
							url: '/pages/index/index'
						})
						
					}
				
				}).catch(error => {
					uni.hideLoading();
					uni.showToast({
						icon: "none",
						title: error?error:"登录失败"
					})
				})
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	
	page{
		background: linear-gradient(180deg, rgba(218,238,254,1) 40%,rgba(203,234,255,0) 100%);
		padding-top: 160rpx;
	}
	.logoText{
		text-align: center;
		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;
		
		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: 144rpx;
			height: 144rpx;
			border-radius: 16px;
		}
	}

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