baiyuApp/pages_manage/login.vue

<template>
	<view class="column" style="height: 100vh;">
		 <view class="content flex-1" >
			 <view class="login pt14">
				<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"/>
						 </view>
					 </view> 
					 <view class="login-item">
						 <!-- <text>密码</text> -->
						 <view class="input-pwd">
							 <input v-model="password" placeholder="请输入密码" password type="text"/>
						 </view>
					 </view> 
					 <view class="btns">
						 <view class="login-btn" @click="login">登录</view>
					 </view>
				</view>
			 </view>
		 </view>
		<!-- <view class="footer-tips">重庆云联融智提供技术支持</view> -->
	</view>
</template>

<script>

import { login } from './api/manageCompany.js'
import IMSDK from "openim-uniapp-polyfill";
import { callingModule, meetingModule } from "@/pages_im/util/imCommon";
export default {
	data() {
		return {
			account:"",
			password:"",
		}
	},
	computed: {
	    imgPath() {
	      return this.$store.getters.imgpath
	    },
		appid() {
			return this.$store.getters.appid
		},
	  },
	onLoad(option) {
	},
	mounted() {

	},
	onShow() {
		// let loginPage = '';
		// // #ifdef MP-WEIXIN
		// loginPage = '/pages/auth/wxlogin';
		// // #endif
		// loginPage = '/pages/auth/login';
		// uni.reLaunch({
		// 	url:loginPage,
		// 	success: () => {
		// 		uni.hideLoading();
		// 	},
		// 	fail: () => {
		// 		uni.hideLoading();
		// 	}
		// });
		console.log(this.$store.getters.imgpath+'/app/images/card_icon.png')
	},
	methods: {
	    login(){
			if (!this.account || this.account.trim() === '') {
			    uni.showToast({
			        title: "请输入帐号",
			        icon: 'none',
			    });
			    return;
			}
			if (!this.password || this.password.trim() === '') {
			    uni.showToast({
			        title: "请输入密码",
			        icon: 'none',
			    });
			    return;
			}
			var data = {
				account:this.account,
				password: this.password,
				appid:this.appid
			};
			var that=this;
			uni.showLoading({
				title:"处理中..."
			})
			login(data).then(
				res => {
					uni.hideLoading()
					if(res.code==200){
						uni.showToast({icon:'success',title: "登录成功"});
						uni.setStorageSync('ManageToken',res.data.token);
						uni.setStorageSync('companyUserId',res.data.user.userId);
						uni.setStorageSync('companyUserInfo',JSON.stringify(res.data.user));
						uni.setStorageSync('CompanyUserToken',res.companyUserToken);
						uni.setStorageSync('companyUser',JSON.stringify(res.data.user));
						let CompanyUserToken=uni.getStorageSync("CompanyUserToken");
						if(!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" }); 	
									setTimeout(()=>{
										uni.$emit('refreshIM');
									},500);
							  }).catch((err) => console.log(err)).finally(() => {
								   uni.$emit('refreshIMMenu');
							      
							  });
						}
						uni.$emit('initSocket');
						uni.redirectTo({
							// url: '../user/index',
							url: "/pages_manage/index",
							animationType: 'pop-in',
							animationDuration: 100
						})
					}
					else{
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
					
				},
				rej => {}
			);
	   }
	 
	},
  
}
</script>

<style lang="scss" scoped>
page{
 	background-color: #ffffff;
}
.footer-tips {
			margin-top: 14rpx;
			text-align: center;
			font-family: PingFang SC,PingFang SC;
			font-weight: 500;
			font-size: 12px;
			color: #bbb;
		}
.content{
	 background-color: #ffffff;
	 display: flex;
	 flex-direction: column;
	 align-items: center;
	 justify-content: center;
	 // height: calc(100vh);
	  overflow-y: auto;
	 width: 100%;
	 .login{
		 width: 100%;
		 padding-bottom: 50rpx;
		.head{
			text-align: center;
			image{
				margin: 20rpx;
				margin-top: 20px;
				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 bottom, #cfe3ff, #cabbfd);
					background: #5c82ff;
					box-shadow: 0px 7rpx 6rpx 0px rgba(0, 0, 0, 0.2);
					border-radius: 40rpx;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: rgba(255, 255, 255, 1.0);
				}
			}
			
		}
		 
	}
}
.footer{
	color: #686866;
	width: 100%;
	 position: sticky;
	text-align: center;
	bottom: 60upx;
	z-index: 1;
	font-size: 28rpx;
}

</style>