jinNiucourseMall_uniapp/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="logoimg" ></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="请输入密码" password type="text"></input>
						 </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 { mapGetters } from 'vuex';
export default {
	data() {
		return {
			account:"",
			password:"",
		}
	},
	computed: {
	    imgPath() {
	      return this.$store.state.imgpath
	    },
		appid() {
			return this.$store.state.appid
		},
	  },
	onLoad(option) {
	},
	computed: {
		...mapGetters(['logoimg']),
	},
	watch: {
	    logoimg: {
	      immediate: true,          // 页面一进入就检查一次
	      handler(val) {
			  return val
	      }
	    },
	},
	mounted() {

	},
	onShow() {
		if(uni.getStorageSync('ManageToken')){
			uni.navigateTo({
				url:'/pages_manage/index'
			})
		}
		console.log(this.$store.state.imgpath+'/app/images/card_icon.png')
	},
	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,
				appId:this.appid
			};
			var that=this;
			uni.showLoading({
				title:"处理中..."
			})
			login(data).then(
				res => {
					uni.hideLoading()
					if(res.code==200){
						uni.setStorageSync('ManageToken',res.data.token);
						uni.setStorageSync('companyUserId',res.data.user.userId);
						uni.setStorageSync('companyUserInfo',JSON.stringify(res.data.user));
						uni.$emit('initSocket');
						uni.reLaunch({
							// 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{
				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 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>