Login100.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317
  1. <template>
  2. <div class="login-container">
  3. <div class="login_box">
  4. <!-- 头像区域 -->
  5. <!-- <div class="avatar_box">
  6. <img src="../assets/logo.png" alt="">
  7. </div> -->
  8. <!-- 登录表单区域 -->
  9. <!-- <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px" class="login_form">
  10. <el-form-item prop="user_name">
  11. <el-input prefix-icon="el-icon-search" v-model="loginForm.user_name" placeholder="用户名"></el-input>
  12. </el-form-item>
  13. <el-form-item prop="password">
  14. <el-input prefix-icon="el-icon-search" v-model="loginForm.password" placeholder="密码" type="password"></el-input>
  15. </el-form-item>
  16. <el-form-item class="btns">
  17. <el-button type="primary" @click="login">登录</el-button>
  18. <el-button type="info" @click="resetLoginForm">重置</el-button>
  19. </el-form-item>
  20. </el-form> -->
  21. </div>
  22. <div class="new-login">
  23. <div class="new-login-l">
  24. <img src="@/assets/images/logo.png" alt="">
  25. </div>
  26. <div class="new-login-r">
  27. <div class="title">用户登录:</div>
  28. <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" class="login-form" auto-complete="on" label-position="left">
  29. <el-form-item prop="user_name">
  30. <!-- <span class="svg-container">
  31. <svg-icon icon-class="user" />
  32. </span> -->
  33. <i class="el-icon-user-solid"></i>
  34. <el-input ref="user_name" v-model="loginForm.user_name" placeholder="用户名" name="user_name" type="text" tabindex="1" auto-complete="on" />
  35. </el-form-item>
  36. <el-form-item prop="password" class="password">
  37. <!-- <span class="svg-container">
  38. <svg-icon icon-class="password" />
  39. </span> -->
  40. <i class="el-icon-unlock"></i>
  41. <el-input :key="passwordType" ref="password" v-model="loginForm.password" :type="passwordType" placeholder="密码" name="password" tabindex="2" auto-complete="on" @keyup.enter.native="handleLogin" />
  42. <span class="show-pwd" @click="showPwd">
  43. <!-- <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" /> -->
  44. </span>
  45. </el-form-item>
  46. <!-- <el-form-item prop="password" class="rememberPassword">
  47. <input id="remember-password-checkbox" v-model="rememberPassword" type="checkbox" value="remember-me" @click="doRememberPassword($event)">
  48. <span for="remember-password-checkbox">
  49. 记住密码
  50. </span>
  51. </input>
  52. </el-form-item> -->
  53. </el-form>
  54. <el-button type="primary" :loading="loading" class="btn" @click.native.prevent="login">登录</el-button>
  55. </div>
  56. </div>
  57. <div style="position: absolute;bottom: 0;left: 0;right:0;color: #000;background: #fee; opacity: .7; font-size: 14px;">
  58. <p style="text-align:center;line-height:16px;">
  59. 版权所有
  60. <a href="http://www.dairyinfo.com.cn" target="_blank">上海科湃腾信息科技有限公司</a>
  61. <!-- <a style="margin-left: 20px;" href="https://beian.miit.gov.cn/" target="_blank">沪ICP备11008303号-3 </a> -->
  62. </p>
  63. </div>
  64. </div>
  65. </template>
  66. <script>
  67. import { GetDataByName, PostDataByName, ajaxDataGet, ajaxDataPost, ajaxDataLogin} from '@/api/common'
  68. import {md5} from '@/utils/md5'
  69. export default {
  70. data() {
  71. return {
  72. loginForm:{
  73. user_name:"", //admin cyj
  74. password:"" //123456
  75. },
  76. //表单验证规则
  77. loginFormRules:{
  78. user_name:[
  79. { required:true, message:"请输入登录名称", trigger:"blur" }
  80. ],
  81. password:[
  82. { required:true, message:"请输入登录密码", trigger:"blur" }
  83. ]
  84. },
  85. loading: false,
  86. passwordType: 'password',
  87. redirect: undefined,
  88. rememberPassword: ''
  89. }
  90. },
  91. created(){
  92. },
  93. methods:{
  94. showPwd() {
  95. if (this.passwordType === 'password') {
  96. this.passwordType = ''
  97. } else {
  98. this.passwordType = 'password'
  99. }
  100. this.$nextTick(() => {
  101. this.$refs.password.focus()
  102. })
  103. },
  104. login(){
  105. var me = this
  106. //validate表单预验证
  107. this.$refs.loginFormRef.validate( valid => {
  108. //如果false,就返回
  109. if(!valid) return;
  110. // var g_token = 111111
  111. // sessionStorage.setItem("g_token",g_token)
  112. // me.$router.push("/home")
  113. //方法一:直接用axios请求
  114. //.post是请求方式 也可以是Get
  115. //这里 /test是后端的接口地址
  116. //loginForm请求发的参数
  117. // var send_data = {
  118. // user_name:me.loginForm.user_name,
  119. // password: md5(me.loginForm.password)
  120. // }
  121. // this.$http.post("/login",send_data ,{ headers:{ } }).then(function(res){
  122. // //打印请求成功结果
  123. // console.log('res',res)
  124. // console.log('res.data',res.data)
  125. // if (res.data.code == 200) {
  126. // var g_token = res.data.data.token
  127. // // 设置全局缓存token
  128. // sessionStorage.setItem("g_token",g_token)
  129. // console.log('g_token',g_token)
  130. // var g_pastureId = res.data.data.pastureId
  131. // var g_employeeId = res.data.data.employeeId
  132. // var g_userNameSee = res.data.data.userName
  133. // var g_actualName = res.data.data.actualName
  134. // sessionStorage.setItem("g_pastureId",g_pastureId)
  135. // sessionStorage.setItem("g_employeeId",g_employeeId)
  136. // sessionStorage.setItem("g_userNameSee",g_userNameSee)
  137. // sessionStorage.setItem("g_actualName",g_actualName)
  138. // //成功登录后跳转页面
  139. // me.$router.push("/home")
  140. // } else {
  141. // me.$message({ type: 'error', message: '登陆失败!' + res.data.msg, duration: 2000 })
  142. // }
  143. // }).catch(function(error){
  144. // //打印请求失败结果
  145. // console.log('error',error)
  146. // me.$message({ type: 'error', message: '请求错误!' +error.response.data.errors, duration: 2000 })
  147. // })
  148. // //方法二:用封装xios请求 、 路径写死
  149. // PostDataByName(this.loginForm).then(response => {
  150. // //打印请求成功结果
  151. // console.log('response',response)
  152. // })
  153. //方法二:用封装axios请求、路径不写死
  154. // ajaxData("/login" ,this.loginForm).then(res => {
  155. // //打印请求成功结果
  156. // console.log('response',res)
  157. // this.$message({ type: 'error', message: '请求成功', duration: 2000 })
  158. // //本地存储数据
  159. // window.sessionStorage.setItem("token",res.data)
  160. // //跳转路由到Home页面
  161. // this.$router.push("/home")
  162. // })
  163. //跳转路由到Home页面
  164. //this.$router.push("/home")
  165. var send_data = {
  166. user_name:me.loginForm.user_name,
  167. password: md5(me.loginForm.password)
  168. }
  169. ajaxDataLogin("/login" ,send_data).then(res => {
  170. //打印请求成功结果
  171. console.log('res',res)
  172. console.log('res.data',res.data)
  173. if (res.code == 200) {
  174. var g_token = res.data.token
  175. // 设置全局缓存token
  176. sessionStorage.setItem("g_token",g_token)
  177. console.log('g_token',g_token)
  178. var g_pastureId = res.data.pastureId
  179. var g_employeeId = res.data.employeeId
  180. var g_userNameSee = res.data.userName
  181. var g_actualName = res.data.actualName
  182. sessionStorage.setItem("g_pastureId",g_pastureId)
  183. sessionStorage.setItem("g_employeeId",g_employeeId)
  184. sessionStorage.setItem("g_userNameSee",g_userNameSee)
  185. sessionStorage.setItem("g_actualName",g_actualName)
  186. //成功登录后跳转页面
  187. me.$router.push("/home")
  188. } else {
  189. me.$message({ type: 'error', message: '登陆失败!' + res.data.msg, duration: 2000 })
  190. }
  191. }).catch(function(error){
  192. //打印请求失败结果
  193. console.log('error',error)
  194. me.$message({ type: 'error', message: '请求错误!' +error.response.data.errors, duration: 2000 })
  195. })
  196. })
  197. },
  198. //重置登录表单
  199. resetLoginForm(){
  200. //this.$refs.loginFormRef直接绑定 resetFields()重置
  201. this.$refs.loginFormRef.resetFields();
  202. }
  203. }
  204. }
  205. </script>
  206. <!-- 加了scoped,则是仅在此组件里生效 -->
  207. <style scoped>
  208. /* .login_container{background-color:#2b4b6b;height: 100%}
  209. .login_box{width:450px;height:300px;background-color:#fff;border-radius:3px;position:absolute;left:50%;top:50%;transform:translate(-50%, -50%)}
  210. .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%);}
  211. .avatar_box img{width:100%}
  212. .login_form{position:absolute;bottom:0;width:100%;padding:0 20px;box-sizing: border-box}
  213. .btns{display:flex;justify-content: flex-end} */
  214. .login-container .el-input input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
  215. -webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
  216. box-shadow: 0 0 0px 1000px #fff inset !important;
  217. -webkit-text-fill-color: #000 !important;
  218. }
  219. .login-container{position: relative;height: 100%;width: 100%; min-height: 500px;background: url("../assets/images/nlogin-bg1.jpg") no-repeat; }
  220. .new-login{ width: 50%;height: 42%;position: absolute;left: 0;right: 0;bottom: 0;top: 0;margin: auto; }
  221. .new-login-l{background: red;float:left;height:100%;width:50%;background: url("../assets/images/nlogin-bg2.png") no-repeat;position: relative; }
  222. .new-login-l img{position: absolute;left: 0;right: 0;bottom: 0;top: 0;margin: auto;width: 50%;height:23%;}
  223. .new-login-r{ background: #fff;float:left;height:100%;width:50%;position: relative;}
  224. .new-login-r .title{margin-top: 10%;font-size: 20px;font-weight: 600;color: #019969;text-align: center;}
  225. .new-login-r .login-form{ position: relative;width: 520px;max-width: 100%;overflow: hidden;height: 48%;}
  226. .login-form .svg-container{padding: 6px 5px 6px 15px; color: #999; vertical-align: middle; width: 30px; display: inline-block;}
  227. .login-form .el-input { display: inline-block; width: 80%; }
  228. .new-login-r .el-form-item {
  229. border: none; background: #fff; border-radius: 5px; color: #999;width: 73%; margin: 10px auto;height: 30% }
  230. .new-login-r .el-form-item /deep/.el-form-item__content {
  231. line-height: 16%; border-bottom: 1px solid #e7e7e7;
  232. }
  233. .new-login-r .el-form-item .el-form-item__content .el-input /deep/.el-input__inner{border: none !important;}
  234. .rememberPassword /deep/.el-form-item__content {line-height:16%; border: none;padding-bottom: 10px;}
  235. .rememberPassword /deep/.el-form-item__content span{padding-left: 5px;}
  236. .password{margin-top: 10px;margin-bottom: 20px;}
  237. .btn{
  238. position: absolute; overflow: hidden; width: 75%;left: 0;right: 0;bottom: 10%;margin: 0 auto; }
  239. .btn span{background:#01996a;border: #01996a;border-radius: 5px;line-height: 40px; text-align: center;color:#fff; display: block;}
  240. </style>