|
|
@@ -0,0 +1,269 @@
|
|
|
+<template>
|
|
|
+ <div class="login-container">
|
|
|
+ <div class="login_box">
|
|
|
+ <!-- 头像区域 -->
|
|
|
+ <!-- <div class="avatar_box">
|
|
|
+ <img src="../assets/logo.png" alt="">
|
|
|
+ </div> -->
|
|
|
+ <!-- 登录表单区域 -->
|
|
|
+ <!-- <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px" class="login_form">
|
|
|
+ <el-form-item prop="user_name">
|
|
|
+ <el-input prefix-icon="el-icon-search" v-model="loginForm.user_name" placeholder="用户名"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="password">
|
|
|
+ <el-input prefix-icon="el-icon-search" v-model="loginForm.password" placeholder="密码" type="password"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item class="btns">
|
|
|
+ <el-button type="primary" @click="login">登录</el-button>
|
|
|
+ <el-button type="info" @click="resetLoginForm">重置</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form> -->
|
|
|
+ </div>
|
|
|
+ <div class="new-login">
|
|
|
+ <div class="new-login-l">
|
|
|
+ <img src="@/assets/images/logo.png" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="new-login-r">
|
|
|
+ <div class="title">用户登录：</div>
|
|
|
+ <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" class="login-form" auto-complete="on" label-position="left">
|
|
|
+ <el-form-item prop="user_name">
|
|
|
+ <!-- <span class="svg-container">
|
|
|
+ <svg-icon icon-class="user" />
|
|
|
+ </span> -->
|
|
|
+ <i class="el-icon-user-solid"></i>
|
|
|
+ <el-input ref="user_name" v-model="loginForm.user_name" placeholder="用户名" name="user_name" type="text" tabindex="1" auto-complete="on" />
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item prop="password" class="password">
|
|
|
+ <!-- <span class="svg-container">
|
|
|
+ <svg-icon icon-class="password" />
|
|
|
+ </span> -->
|
|
|
+ <i class="el-icon-unlock"></i>
|
|
|
+ <el-input :key="passwordType" ref="password" v-model="loginForm.password" :type="passwordType" placeholder="密码" name="password" tabindex="2" auto-complete="on" @keyup.enter.native="handleLogin" />
|
|
|
+ <span class="show-pwd" @click="showPwd">
|
|
|
+ <!-- <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" /> -->
|
|
|
+ </span>
|
|
|
+ </el-form-item>
|
|
|
+ <!-- <el-form-item prop="password" class="rememberPassword">
|
|
|
+ <input id="remember-password-checkbox" v-model="rememberPassword" type="checkbox" value="remember-me" @click="doRememberPassword($event)">
|
|
|
+ <span for="remember-password-checkbox">
|
|
|
+ 记住密码
|
|
|
+ </span>
|
|
|
+ </input>
|
|
|
+ </el-form-item> -->
|
|
|
+ </el-form>
|
|
|
+ <el-button type="primary" :loading="loading" class="btn" @click.native.prevent="login">登录</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="position: absolute;bottom: 0;left: 0;right:0;color: #000;background: #fee; opacity: .7; font-size: 14px;">
|
|
|
+ <p style="text-align:center;line-height:16px;">
|
|
|
+ 版权所有
|
|
|
+ <a href="http://www.dairyinfo.com.cn" target="_blank">上海科湃腾信息科技有限公司</a>
|
|
|
+ <!-- <a style="margin-left: 20px;" href="https://beian.miit.gov.cn/" target="_blank">沪ICP备11008303号-3 </a> -->
|
|
|
+ </p>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { GetDataByName, PostDataByName, ajaxData } from '@/api/common'
|
|
|
+import {md5} from '@/utils/md5'
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ loginForm:{
|
|
|
+ user_name:"", //admin cyj
|
|
|
+ password:"" //123456
|
|
|
+
|
|
|
+ },
|
|
|
+ //表单验证规则
|
|
|
+ loginFormRules:{
|
|
|
+ user_name:[
|
|
|
+ { required:true, message:"请输入登录名称", trigger:"blur" }
|
|
|
+ ],
|
|
|
+ password:[
|
|
|
+ { required:true, message:"请输入登录密码", trigger:"blur" }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+
|
|
|
+ loading: false,
|
|
|
+ passwordType: 'password',
|
|
|
+ redirect: undefined,
|
|
|
+ rememberPassword: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ created(){
|
|
|
+
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ showPwd() {
|
|
|
+ if (this.passwordType === 'password') {
|
|
|
+ this.passwordType = ''
|
|
|
+ } else {
|
|
|
+ this.passwordType = 'password'
|
|
|
+ }
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.password.focus()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ login(){
|
|
|
+ var me = this
|
|
|
+
|
|
|
+ //validate表单预验证
|
|
|
+ this.$refs.loginFormRef.validate( valid => {
|
|
|
+ //如果false,就返回
|
|
|
+ if(!valid) return;
|
|
|
+ // var g_token = 111111
|
|
|
+ // sessionStorage.setItem("g_token",g_token)
|
|
|
+
|
|
|
+ // me.$router.push("/home")
|
|
|
+
|
|
|
+ //方法一：直接用axios请求
|
|
|
+ //.post是请求方式 也可以是Get
|
|
|
+ //这里 /test是后端的接口地址
|
|
|
+ //loginForm请求发的参数
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ var send_data = {
|
|
|
+ user_name:me.loginForm.user_name,
|
|
|
+ password: md5(me.loginForm.password)
|
|
|
+ }
|
|
|
+ this.$http.post("/login",send_data ,{ headers:{ } }).then(function(res){
|
|
|
+ //打印请求成功结果
|
|
|
+ console.log('res',res)
|
|
|
+ console.log('res.data',res.data)
|
|
|
+ if (res.data.code == 200) {
|
|
|
+
|
|
|
+ var g_token = res.data.data.token
|
|
|
+ // 设置全局缓存token
|
|
|
+ sessionStorage.setItem("g_token",g_token)
|
|
|
+ console.log('g_token',g_token)
|
|
|
+
|
|
|
+ var g_pastureId = res.data.data.pastureId
|
|
|
+ var g_employeeId = res.data.data.employeeId
|
|
|
+ var g_userNameSee = res.data.data.userName
|
|
|
+ var g_actualName = res.data.data.actualName
|
|
|
+
|
|
|
+
|
|
|
+ sessionStorage.setItem("g_pastureId",g_pastureId)
|
|
|
+ sessionStorage.setItem("g_employeeId",g_employeeId)
|
|
|
+ sessionStorage.setItem("g_userNameSee",g_userNameSee)
|
|
|
+ sessionStorage.setItem("g_actualName",g_actualName)
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ //成功登录后跳转页面
|
|
|
+ me.$router.push("/home")
|
|
|
+
|
|
|
+ } else {
|
|
|
+ me.$message({ type: 'error', message: '登陆失败！' + res.data.msg, duration: 2000 })
|
|
|
+
|
|
|
+ }
|
|
|
+ }).catch(function(error){
|
|
|
+ //打印请求失败结果
|
|
|
+ console.log('error',error)
|
|
|
+ me.$message({ type: 'error', message: '请求错误！' +error.response.data.errors, duration: 2000 })
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ // //方法二：用封装xios请求 、 路径写死
|
|
|
+ // PostDataByName(this.loginForm).then(response => {
|
|
|
+ // //打印请求成功结果
|
|
|
+ // console.log('response',response)
|
|
|
+ // })
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ //方法二：用封装axios请求、路径不写死
|
|
|
+ // ajaxData("/login" ,this.loginForm).then(res => {
|
|
|
+ // //打印请求成功结果
|
|
|
+ // console.log('response',res)
|
|
|
+ // this.$message({ type: 'error', message: '请求成功', duration: 2000 })
|
|
|
+ // //本地存储数据
|
|
|
+ // window.sessionStorage.setItem("token",res.data)
|
|
|
+ // //跳转路由到Home页面
|
|
|
+ // this.$router.push("/home")
|
|
|
+ // })
|
|
|
+ //跳转路由到Home页面
|
|
|
+ //this.$router.push("/home")
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ //重置登录表单
|
|
|
+ resetLoginForm(){
|
|
|
+ //this.$refs.loginFormRef直接绑定 resetFields()重置
|
|
|
+ this.$refs.loginFormRef.resetFields();
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<!-- 加了scoped，则是仅在此组件里生效 -->
|
|
|
+<style scoped>
|
|
|
+
|
|
|
+/* .login_container{background-color:#2b4b6b;height: 100%}
|
|
|
+.login_box{width:450px;height:300px;background-color:#fff;border-radius:3px;position:absolute;left:50%;top:50%;transform:translate(-50%, -50%)}
|
|
|
+.avatar_box{height:130px;width:130px;border:1px solid #eee;border-radius:50%;padding:10px;box-shadow:0 0 10px #ddd;position:absolute;left:50%;transform:translate(-50%, -50%);}
|
|
|
+.avatar_box img{width:100%}
|
|
|
+.login_form{position:absolute;bottom:0;width:100%;padding:0 20px;box-sizing: border-box}
|
|
|
+.btns{display:flex;justify-content: flex-end} */
|
|
|
+
|
|
|
+
|
|
|
+.login-container .el-input input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
|
|
|
+ -webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
|
|
|
+ box-shadow: 0 0 0px 1000px #fff inset !important;
|
|
|
+ -webkit-text-fill-color: #000 !important;
|
|
|
+}
|
|
|
+
|
|
|
+.login-container{position: relative;height: 100%;width: 100%; min-height: 500px;background: url("../assets/images/nlogin-bg1.jpg") no-repeat; }
|
|
|
+
|
|
|
+.new-login{ width: 50%;height: 42%;position: absolute;left: 0;right: 0;bottom: 0;top: 0;margin: auto; }
|
|
|
+.new-login-l{background: red;float:left;height:100%;width:50%;background: url("../assets/images/nlogin-bg2.png") no-repeat;position: relative; }
|
|
|
+.new-login-l img{position: absolute;left: 0;right: 0;bottom: 0;top: 0;margin: auto;width: 50%;height:23%;}
|
|
|
+.new-login-r{ background: #fff;float:left;height:100%;width:50%;position: relative;}
|
|
|
+.new-login-r .title{margin-top: 10%;font-size: 20px;font-weight: 600;color: #019969;text-align: center;}
|
|
|
+.new-login-r .login-form{ position: relative;width: 520px;max-width: 100%;overflow: hidden;height: 48%;}
|
|
|
+.login-form .svg-container{padding: 6px 5px 6px 15px; color: #999; vertical-align: middle; width: 30px; display: inline-block;}
|
|
|
+.login-form .el-input { display: inline-block; width: 80%; }
|
|
|
+
|
|
|
+.new-login-r .el-form-item {
|
|
|
+ border: none; background: #fff; border-radius: 5px; color: #999;width: 73%; margin: 10px auto;height: 30% }
|
|
|
+.new-login-r .el-form-item /deep/.el-form-item__content {
|
|
|
+ line-height: 16%; border-bottom: 1px solid #e7e7e7;
|
|
|
+ }
|
|
|
+ .new-login-r .el-form-item .el-form-item__content .el-input /deep/.el-input__inner{border: none !important;}
|
|
|
+
|
|
|
+ .rememberPassword /deep/.el-form-item__content {line-height:16%; border: none;padding-bottom: 10px;}
|
|
|
+ .rememberPassword /deep/.el-form-item__content span{padding-left: 5px;}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ .password{margin-top: 10px;margin-bottom: 20px;}
|
|
|
+ .btn{
|
|
|
+ position: absolute; overflow: hidden; width: 75%;left: 0;right: 0;bottom: 10%;margin: 0 auto; }
|
|
|
+ .btn span{background:#01996a;border: #01996a;border-radius: 5px;line-height: 40px; text-align: center;color:#fff; display: block;}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+</style>
|
