heshanApp/pages/company/login.vue

<template>
  <view class="content">
  	<view class="inner">
  		<view class="form-box">
  			<view class="form-item">
  				<text class="label">员工帐号</text>
  				<input type="text" v-model="form.userName" placeholder="登录帐号" placeholder-class="form-input" />
  			</view>
  			<view class="form-item">
  			 	<text class="label">员工密码</text>
  			 	<input type="password" v-model="form.password"   placeholder="登录密码" placeholder-class="form-input" />
  			</view>
  		</view>
  	</view>
	<view class="tips">
		<checkbox  :checked="isAgreement" @click="handleAgreement()" />
		<view  @click="handleAgreement()">您同意并接受</view>
		<view class="btn"  @click="openContent('userHealth')">《健康客服协议》</view>
	</view>
  	<view class="btn-box">
  		<view class="sub-btn" :style="{opacity: isLoading ? 0.6 : 1}" @click="submit()">{{isLoading ? '登录中...' : '员工登录'}}</view>
  	</view>
	
  </view>
</template>

<script>
import {login} from '@/api/companyUser'
import IMSDK from "openim-uniapp-polyfill";
import { callingModule, meetingModule } from "@/pages_im/util/imCommon";
export default {
  data() {
    return {
		form:{
			userName:null,
			password:null
		},
		isAgreement:false,
		registrationID:"",
		isAgreePrivacy:false,
		isLoading:false,
    }
  },
  computed: {
	  
  },
  onLoad() {
	  // #ifdef APP-PLUS
		  this.isAgreePrivacy = this.$isAgreePrivacy();
		  if (this.isAgreePrivacy) {
			this.getRegistrationID();
		  }
	  // #endif
  },
  onHide() {
  },
  onUnload() {
  },
  mounted() {
    
  },
  methods: {
	getRegistrationID() {
			this.registrationID = uni.getStorageSync("registrationID");
			this.form.jpushId=this.registrationID;
			if (this.registrationID == null || this.registrationID == "") {
				uni.getPushClientId({success: res => {
						uni.setStorageSync("registrationID", res.cid);
						this.registrationID = res.cid;
						this.form.jpushId=this.registrationID;
					}
				});
			}
	},
	openContent(type){
	  	uni.navigateTo({
	  		url:"/pages/user/agreement?type="+type
	  	});
	},
	handleAgreement(){
	  	this.isAgreement=!this.isAgreement;
	},
	submit(){

		if(this.isLoading) return;

		if(!this.isAgreement){
			uni.showToast({
				icon:'none',
				title: "请先同意协议后再登录",
			});
			return;
		}
		this.isLoading = true;
		uni.showLoading({ title: '登录中..', mask: true });
	 	login(this.form).then(res => {
	 			if(res.code==200){
					 uni.showLoading({ title: '登录中..', mask: true });
					 uni.setStorageSync('companyId',res.user.companyId);
					 uni.setStorageSync('companyUserId',res.user.userId);
					 uni.setStorageSync('companyUser',JSON.stringify(res.user));
					 uni.setStorageSync('CompanyUserToken',res.companyUserToken);
					 IMSDK.asyncApi(IMSDK.IMMethods.Logout, IMSDK.uuid()).then(() => {
					 		callingModule?.endCall();
					 		meetingModule?.endCall();
					 		uni.removeStorage({ key: 'IMToken' });
					 		uni.removeStorage({ key: 'IMUserID' });
					 		uni.removeStorage({key: "IMHasLogin" }); 	
							uni.hideLoading();
							uni.showToast({icon:'success',title: "登录成功", mask: true});
							uni.$emit('refreshIM');
							setTimeout(()=>{
								uni.$emit('refreshIMMenu');
								uni.redirectTo({url: '/pages/company/index' }); 
							},2000);
					   }).catch((err) => {
						    uni.hideLoading();
							this.isLoading = false;
							uni.showToast({
								title:"登录失败",
								icon:"error"
							})
					   }).finally(() => {
						  
					   });
					  
	 			}else{
					this.isLoading = false;
	 				uni.showToast({
	 					icon:'none',
	 					title: res.msg,
	 				});
	 			}
	 		}).catch(err => {
				this.isLoading = false;
				uni.hideLoading();
				uni.showToast({
					title:"登录失败",
					icon:"error"
				});
				console.error(err);
			});
	 },
  },
  
}
</script>

<style lang="scss">
	page{
		height: 100%;
	}
	.content{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		.inner{
			padding: 20upx;
			.form-box{
				padding: 0 30upx;
				background: #FFFFFF;
				border-radius: 16upx;
				.form-item{
					padding: 30upx 0;
					display: flex;
					align-items: flex-start;
					border-bottom: 1px solid #F1F1F1;
					&:last-child{
						border-bottom: none;
					}
					.label{
						width: 150upx;
						text-align: left;
						font-size: 30upx;
						line-height: 44upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #222222;
						flex-shrink: 0;
					}
					input{
						text-align: left;
					}
					.form-input{
						font-size: 30upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #999999;
						text-align: left;
					}
					 
				}
			}
			 
		}
		.btn-box{
			height: 120upx;
			padding: 0 30upx;
			display: flex;
			align-items: center;
			justify-content: center;
			.sub-btn{
				width: 100%;
				height: 88upx;
				line-height: 88upx;
				text-align: center;
				font-size: 30upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				background: #FF5030;
				border-radius: 44upx;
			}
		}
	}
	.tips{
		margin-top: 15rpx;
		padding: 0rpx 30rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 28rpx;
		color: #000;
		checkbox{
			
		}
		.btn{
			color: #FF5030;
		}
	}
</style>