kpi_web/pages/login/login.vue

<template>
	<view class="container" style="overflow: hidden;">
		<uni-card class = "car_body" style="margin-top: 250rpx; padding-bottom: 20px;">
			<view class="logo-img">
				<img src="/static/favicon.ico" alt="" srcset="">
			</view>
			<view class="content login_title">
				绩效考核系统
			</view>
			<uni-card style="margin: 20px 0 0 0;">
				<view class="uni-forms-item uni-column" >
					<input class="uni-input"  placeholder="请输入您的工号"  v-model.lazy="jobNo"  />
				</view>
			</uni-card>
			<uni-card style="margin: 20px 0 10px 0;">
				<view class="uni-forms-item uni-column">
					<input class="uni-input" password placeholder="请输入您的密码"   v-model.lazy="passWord"  />
				</view>
			</uni-card>
			
			<uni-row class="demo-uni-row"  style="margin: 20px 0 10px 0;">
				<uni-col :span="10">
					<uni-card style="margin: 0px 0 10px 0; padding: 0;">
						<view class="uni-forms-item uni-column">
							<input class="uni-input" placeholder="验证码"   v-model.lazy="scanCode"  />
						</view>
					</uni-card>
				</uni-col>
				<uni-col :span="14" @click="getScanCode" class="scancodeimg">
					<image class="scanCodeImg" :src="codeImg" mode="" ></image>
				</uni-col>
			</uni-row>
			
			<view class="uni-padding-wrap uni-common-mt"  @click="signInSystem">
				<button type="primary"  :loading="loading">登录</button>
			</view>
		</uni-card>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				codeImg:"/static/favicon.ico",
				codeId:"",
				scanCode:"",
				loading:false,
				jobNo:"",
				passWord:""
			};
		},
		onLoad() {
			this.getScanCode()
		},
		methods:{
			//获取验证码
			getScanCode(){
				let _this =this
				
				console.log('接口返回--34----');
				console.log(_this.devUrl)
				uni.request({
					url:_this.$commonMethod.localhostUrl+'/kpiapi/base/captcha',
					header: {
						// 'Content-Type': 'application/x-www-form-urlencoded'
						'Content-Type': 'application/json' //自定义请求头信息
					},
					method:'POST',//请求方式，必须为大写
					success: (res) => {
						console.log('接口返回--45----',res.data);
						if (res.data.code == 0){
							_this.codeImg = res.data.data.picPath
							_this.codeId = res.data.data.captchaid
						}
					},
					fail:function(e){
						_this.codeImg ="/static/favicon.ico"
					}
				}) 
			},
			//登录系统
			signInSystem(){
				let _this =this
				_this.loading = true
				uni.request({
					url:_this.$commonMethod.localhostUrl+'/kpiapi/base/login',
					header: {
						// 'Content-Type': 'application/x-www-form-urlencoded'
						'Content-Type': 'application/json' //自定义请求头信息
						
					},
					method:'POST',//请求方式，必须为大写
					data:{
						username:_this.jobNo,
						password:_this.passWord,
						captcha:_this.scanCode,
						captchaId:_this.codeId,
						openid:""
					},
					success: (res) => {
						// console.log('接口返回--login--3--',res.data);
						let callBackData = res.data
						// console.log('接口返回--login--3--',callBackData.data.userinfo);
						if(callBackData.code == 0){
							let setIsTrue = _this.$commonMethod.setSystemCacheData(callBackData.data.key,callBackData.data.token,_this.jobNo,_this.passWord,callBackData.data.userinfo,callBackData.data.usercont)
							if (setIsTrue){
								_this.$commonMethod.JumpUrl('/pages/index/index')
							}else{
								uni.showToast({
									title: "登录失败！网络链接超时！请检查网络！",
									duration: 3000
								})
							}
							
						}else{
							uni.showToast({
								title: callBackData.msg,
								duration: 3000
							})
							_this.loading = false
							_this.getScanCode()
						}
						
					},
					fail:function(e){
						_this.dialogToggle('error',e)
					}
				})
			},
			
		}
	}
</script>

<style lang="scss">
	page{
		background-image: url("/static/images/1.jpg") ;
		background-repeat:no-repeat;
		background-size: 100% 250%;
	}
	.container{
	
	}
	.scanCodeImg{
		width: 320rpx;
		height: 45px;
		margin-left: 10px;
		
	}
	.content{
		text-align: center;
		font-size: 50rpx;
		line-height: 100rpx;
		color: #F00;
		font-weight: bold;
	}
	.car_body{
		background-image: url("/static/images/2.jpg") ;
		background-size: 200% 100%;
		background-repeat:no-repeat;
		background-position: 50%;
		border: 0;
	}
	.logo-img{
		text-align: center;
		img{
			width: 30%;
		}
	}
	.scancodeimg{
		
		img{
			background-color: #FFF;
		}
	}
</style>