123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317 |
- <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, ajaxDataGet, ajaxDataPost, ajaxDataLogin} 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")
- var send_data = {
- user_name:me.loginForm.user_name,
- password: md5(me.loginForm.password)
- }
- ajaxDataLogin("/login" ,send_data).then(res => {
- //打印请求成功结果
- console.log('res',res)
- console.log('res.data',res.data)
- if (res.code == 200) {
-
- var g_token = res.data.token
- // 设置全局缓存token
- sessionStorage.setItem("g_token",g_token)
- console.log('g_token',g_token)
-
- var g_pastureId = res.data.pastureId
- var g_employeeId = res.data.employeeId
- var g_userNameSee = res.data.userName
- var g_actualName = res.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 })
- })
- })
-
-
-
- },
-
-
- //重置登录表单
- 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>
|