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>
	<!--#ifdef H5 -->
	
	<!-- #endif -->

<script>
	export default {
		data() {
			return {
				codeImg:"/static/favicon.ico",
				codeId:"",
				scanCode:"",
				loading:false,
				jobNo:"",
				passWord:"",
				wechatConfig:{
					agentid:"",
					corpid:"",
					jsapi_ticket:"",
					nonceStr:"",
					orderid:"",
					signature:"",
					state:"",
					timestamp:""
				}
			};
		},
		onLoad() {
			this.getScanCode()
			
			
			// let routes = getCurrentPages();
			// var paraString = location.href.split("/#")[0];;
			// // var paras = paraString.split("=");
			// console.log(paraString,"routes------------->");
			this.getWechatConfig()
		},
		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)
					}
				})
			},
			//获取企业微信配置
			getWechatConfig(){
				let _this =this
				
				uni.request({
					url:_this.$commonMethod.localhostUrl+'/kpiapi/base/get_work_wechat_jsapi_config',
					header: {
						// 'Content-Type': 'application/x-www-form-urlencoded'
						'Content-Type': 'application/json' //自定义请求头信息
						
					},
					method:'POST',//请求方式，必须为大写
					data:{
						url:location.href.split("/#")[0],
						state:1
					},
					success: (res) => {
						console.log('接口返回--login--31--',res.data);
						let callBackData = res.data
						console.log('接口返回--login--312--',callBackData.data);
						if(callBackData.code == 0){
							let backDataInfo = callBackData.data
							_this.wechatConfig={
								agentid:backDataInfo.agentid,
								corpid:backDataInfo.corpid,
								jsapi_ticket:backDataInfo.jsapi_ticket,
								nonceStr:backDataInfo.nonceStr,
								orderid:backDataInfo.orderid,
								signature:backDataInfo.signature,
								state:backDataInfo.state,
								timestamp:backDataInfo.timestamp
							}
							// _this.wechatWork()
						}else{
							uni.showToast({
								title: callBackData.msg,
								duration: 3000
							})
							
						}
						
					},
					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>