ylrz_scrm_company_h5/pages/auth/login.vue

<template>
	<view>
		 <view class="content">
			 <view class="login">
				<view class="head">
					 <image src="/static/logo.png" ></image>
					 <p class="title">销售管理端</p>
					 <p class="desc">客户沟通更智能</p>
				</view>
				<view class="login">
					 <view class="login-item">
						 <!-- <text>帐号</text> -->
						 <view class="input-account">
							 <input v-model="account" placeholder="请输入帐号" type="text" ></input>
						 </view>
					 </view> 
					 <view class="login-item">
						 <!-- <text>密码</text> -->
						 <view class="input-pwd">
							 <input v-model="password"  placeholder="请输入密码" type="password" ></input>
						 </view>
					 </view> 
					 <view class="btns">
						 <view class="login-btn" @click="login">登录</view>
					 </view>
				</view>
			 </view>
		 </view>
		 <view class="footer">
			 <p>版权所有 @2024</p>
		 </view>
		 
	</view>
</template>

<script>

import { login } from '@/api/user.js'
export default {
	data() {
		return {
			account:"",
			password:"",
		}
	},
	onLoad(option) 
	{
	},
	onUnload() {
	},
	mounted() {

	},
	methods: {
	    login(){
			if (this.utils.isEmpty(this.account)) {
				uni.showToast({
					title: "请输入帐号",
					icon: 'none',
				});
				return
			}
			if (this.utils.isEmpty(this.password)) {
				uni.showToast({
					title: "请输入密码",
					icon: 'none',
				});
				return
			}
			var data = {
				account:this.account,
				password: this.password,
			};
			var that=this;
			uni.showLoading({
				title:"处理中..."
			})
			login(data).then(
				res => {
					uni.hideLoading()
					if(res.code==200){
						uni.setStorageSync('AppToken',res.data.token);
						uni.setStorageSync('companyUserId',res.data.user.userId);
						uni.$emit('initSocket');
						uni.reLaunch({
							url: '../user/index',
							animationType: 'pop-in',
							animationDuration: 100
						})
					}
					else{
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
					
				},
				rej => {}
			);
	   }
	 
	},
  
}
</script>

<style lang="scss" scoped>
page{
 	background-color: #ffffff;
}
.content{
	 background-color: #ffffff;
	 display: flex;
	 flex-direction: column;
	 align-items: center;
	 justify-content: center;
	 height: calc(100vh);
	 width: 100%;
	 .login{
		 width: 100%;
		 padding-bottom: 50rpx;
		.head{
			text-align: center;
			image{
				padding: 20rpx;
				width: 120rpx;
				height: 120rpx;
				border-radius: 10rpx;
				box-shadow:0px 0px 20rpx rgba(0,0,0,0.2);
			}
			.title{
			 	color: #141414;
			 	margin:50upx 0upx 30upx 0rpx;
			 	font-size: 38rpx;
				font-weight: 500;
			 }
			 .desc{
			 	color: #686866;
			 	padding:0 0 30rpx 0rpx;
			 	font-size: 28rpx;
			 }
		}
		.login{
			width: 100%;
		 	padding: 30rpx 50rpx;
			.login-item{
				margin-bottom: 30rpx;
				text-align: left;
				.input-account{
					margin-top: 20rpx;
					margin-bottom: 20rpx;
					border-radius:40rpx;
					border:solid 1rpx #e4e4e4;
					height: 80rpx;	
					width: 100%;
					background:url(../../static/account.png) no-repeat 0 center;
					background-size: 30rpx 30rpx;
					background-position: 30rpx;
					input{
						margin-left: 80rpx;
						height: 80rpx;
						line-height: 80rpx
					}
				 
				}
				.input-pwd{
					margin-top: 20rpx;
					margin-bottom: 20rpx;
					border-radius:40rpx;
					border:solid 1rpx #e4e4e4;
					height: 80rpx;	
					width: 100%;
					background:url(../../static/password.png) no-repeat 0 center;
					background-size: 30rpx 30rpx;
					background-position: 30rpx;
					input{
						margin-left: 80rpx;
						height: 80rpx;
						line-height: 80rpx
					}
				}
			}
			.btns{
				margin: 60rpx 0rpx;
				.login-btn {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 100%;
					height: 80rpx;
					background: linear-gradient(to right, #115296 0%, #115296 100%);
					background: -moz-linear-gradient(to right, #115296 0%, #115296 100%);
					box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
					border-radius: 40rpx;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: rgba(255, 255, 255, 1);
				}
			}
			
		}
		 
	}
}
.footer{
	color: #686866;
	width: 100%;
	position: fixed;
	text-align: center;
	bottom: 60upx;
	font-size: 28rpx;
}

</style>