liuminjian
hace 4 años
Se han modificado 1 ficheros con 205 adiciones y 143 borrados
Unificar vista
Opciones de diferencias
-
+205 -143src/views/login.vue
+ 205
- 143
src/views/login.vue
Ver fichero
| @@ -1,164 +1,226 @@ | |||||
| <template> | <template> | ||||
| <div class="login_page"> | |||||
| <div class="focus-logo"> | |||||
| <img src="@/assets/images/login-logo.png" /> | |||||
| </div> | |||||
| <ul class="head_nav clear"> | |||||
| <li @click="isSmsLogin=false" :class="{active:!isSmsLogin}"> | |||||
| 账号登录 | |||||
| </li> | |||||
| <li @click="isSmsLogin=true" :class="{active:isSmsLogin}"> | |||||
| 验证码登录 | |||||
| </li> | |||||
| </ul> | |||||
| <div class="login_page"> | |||||
| <div class="focus-logo"> | |||||
| <img src="@/assets/images/login-logo.png" /> | |||||
| </div> | |||||
| <ul class="head_nav clear"> | |||||
| <li @click="isSmsLogin = false" :class="{ active: !isSmsLogin }"> | |||||
| 账号登录 | |||||
| </li> | |||||
| <li @click="isSmsLogin = true" :class="{ active: isSmsLogin }"> | |||||
| 验证码登录 | |||||
| </li> | |||||
| </ul> | |||||
| <div class="form_main"> | |||||
| <van-form @submit="handleLogin"> | |||||
| <van-field | |||||
| v-model="formData.username" | |||||
| name="username" | |||||
| label="用户名" | |||||
| placeholder="用户名" | |||||
| v-if="!isSmsLogin" | |||||
| /> | |||||
| <van-field | |||||
| v-model="formData.password" | |||||
| type="password" | |||||
| name="password" | |||||
| label="密码" | |||||
| placeholder="密码" | |||||
| v-if="!isSmsLogin" | |||||
| /> | |||||
| <van-field | |||||
| v-model="formData.code" | |||||
| center | |||||
| clearable | |||||
| label="验证码" | |||||
| placeholder="请输入图形验证码" | |||||
| v-if="!isSmsLogin" | |||||
| > | |||||
| <template #button> | |||||
| <img class="code-img" :src="codeUrl" @click="getCode"/> | |||||
| </template> | |||||
| </van-field> | |||||
| <van-field v-model="formData.mobile" v-if="isSmsLogin" label="手机号" placeholder="请输入手机号码"/> | |||||
| <van-field | |||||
| v-model="formData.smsCode" | |||||
| center | |||||
| clearable | |||||
| label="短信验证码" | |||||
| placeholder="请输入短信验证码" | |||||
| v-if="isSmsLogin" | |||||
| > | |||||
| <template #button> | |||||
| <van-button size="small" type="primary" @click.native.prevent="getSmsCode">{{computeTime>0 ? `(${computeTime}s)已发送` : '获取验证码'}}</van-button> | |||||
| </template> | |||||
| </van-field> | |||||
| <div class="form_main"> | |||||
| <van-form @submit="handleLogin"> | |||||
| <van-field | |||||
| v-model="formData.username" | |||||
| name="username" | |||||
| label="用户名" | |||||
| placeholder="用户名" | |||||
| v-if="!isSmsLogin" | |||||
| /> | |||||
| <van-field | |||||
| v-model="formData.password" | |||||
| type="password" | |||||
| name="password" | |||||
| label="密码" | |||||
| placeholder="密码" | |||||
| v-if="!isSmsLogin" | |||||
| /> | |||||
| <van-field | |||||
| v-model="formData.code" | |||||
| center | |||||
| clearable | |||||
| label="验证码" | |||||
| placeholder="请输入图形验证码" | |||||
| v-if="!isSmsLogin" | |||||
| > | |||||
| <template #button> | |||||
| <img class="code-img" :src="codeUrl" @click="getCode" /> | |||||
| </template> | |||||
| </van-field> | |||||
| <van-field | |||||
| v-model="formData.mobile" | |||||
| v-if="isSmsLogin" | |||||
| label="手机号" | |||||
| placeholder="请输入手机号码" | |||||
| /> | |||||
| <van-field | |||||
| v-model="formData.smsCode" | |||||
| center | |||||
| clearable | |||||
| label="短信验证码" | |||||
| placeholder="请输入短信验证码" | |||||
| v-if="isSmsLogin" | |||||
| > | |||||
| <template #button> | |||||
| <van-button | |||||
| size="small" | |||||
| type="primary" | |||||
| @click.native.prevent="getSmsCode" | |||||
| >{{ | |||||
| computeTime > 0 ? `(${computeTime}s)已发送` : "获取验证码" | |||||
| }}</van-button | |||||
| > | |||||
| </template> | |||||
| </van-field> | |||||
| <div class="form-submit"> | |||||
| <van-button round block type="info" native-type="submit">登录</van-button> | |||||
| </div> | |||||
| </van-form> | |||||
| <div class="form-submit"> | |||||
| <van-button | |||||
| round | |||||
| block | |||||
| type="info" | |||||
| native-type="submit" | |||||
| :loading="loading" | |||||
| >登录</van-button | |||||
| > | |||||
| </div> | </div> | ||||
| </van-form> | |||||
| </div> | </div> | ||||
| </div> | |||||
| </template> | </template> | ||||
| <script> | <script> | ||||
| import { getCodeImg , getSmsCode , smsLogin } from "@/api/login"; | |||||
| import { getCodeImg, getSmsCode, smsLogin } from "@/api/login"; | |||||
| import Cookies from "js-cookie"; | |||||
| export default { | export default { | ||||
| name: 'login', | |||||
| data () { | |||||
| return { | |||||
| formData:{ | |||||
| username: null, //账号 | |||||
| password:null, //密码 | |||||
| code:null, //图片验证码 | |||||
| uuid:null, //识别uuid | |||||
| mobile:null, //手机号 | |||||
| }, | |||||
| codeUrl:'', //验证码 | |||||
| isSmsLogin: false, //是否手机验证码 | |||||
| computeTime: 0, | |||||
| } | |||||
| name: "login", | |||||
| data() { | |||||
| return { | |||||
| formData: { | |||||
| username: "admin", //账号 | |||||
| password: "admin123", //密码 | |||||
| code: null, //图片验证码 | |||||
| uuid: null, //识别uuid | |||||
| mobile: null, //手机号 | |||||
| smsCode: null, //短信验证码 | |||||
| }, | |||||
| loading: false, | |||||
| codeUrl: "", //验证码 | |||||
| isSmsLogin: false, //是否手机验证码 | |||||
| computeTime: 0, | |||||
| }; | |||||
| }, | |||||
| created() { | |||||
| this.getCode(); | |||||
| }, | |||||
| methods: { | |||||
| getCode() { | |||||
| getCodeImg().then((res) => { | |||||
| this.formData.uuid = res.uuid; | |||||
| this.codeUrl = "data:image/gif;base64," + res.img; | |||||
| }); | |||||
| }, | }, | ||||
| created(){ | |||||
| this.getCode() | |||||
| getSmsCode() { | |||||
| if (!this.computeTime) { | |||||
| let myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/; | |||||
| if (!myreg.test(this.formData.mobile)) { | |||||
| this.$notify({ type: "warning", message: "手机号格式不正确" }); | |||||
| return false; | |||||
| } | |||||
| getSmsCode(this.formData.mobile).then((res) => { | |||||
| if (res.code === 200) { | |||||
| this.$notify({ type: "success", message: "验证码已发送" }); | |||||
| this.loginForm.uuid = res.uuid; | |||||
| this.computeTime = 60; | |||||
| this.timer = setInterval(() => { | |||||
| this.computeTime--; | |||||
| if (this.computeTime <= 0) { | |||||
| clearInterval(this.timer); | |||||
| } | |||||
| }, 1000); | |||||
| } | |||||
| }); | |||||
| } | |||||
| }, | }, | ||||
| methods:{ | |||||
| getCode(){ | |||||
| getCodeImg().then(res=>{ | |||||
| this.formData.uuid = res.uuid; | |||||
| this.codeUrl = "data:image/gif;base64," + res.img; | |||||
| }) | |||||
| }, | |||||
| getSmsCode(){ | |||||
| if (!this.computeTime) { | |||||
| getSmsCode(this.formData.mobile).then(res =>{ | |||||
| if(res.code === 200){ | |||||
| Notify({ type: 'success', message: '验证码已发送' }); | |||||
| this.loginForm.uuid = res.uuid; | |||||
| this.computeTime = 60; | |||||
| this.timer = setInterval(() => { | |||||
| this.computeTime--; | |||||
| if (this.computeTime <= 0) { | |||||
| clearInterval(this.timer) | |||||
| } | |||||
| }, 1000); | |||||
| } | |||||
| }) | |||||
| } | |||||
| }, | |||||
| handleLogin(values){ | |||||
| if(this.isSmsLogin){ //短信登录 | |||||
| }else{ //账号密码登录 | |||||
| } | |||||
| // this.$store.dispatch("Login",this.formData).then((res) =>{ | |||||
| // console.log(res) | |||||
| // }) | |||||
| handleLogin(values) { | |||||
| if (this.isSmsLogin) { | |||||
| //短信登录 | |||||
| let myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/; | |||||
| if (!myreg.test(this.formData.mobile)) { | |||||
| this.$notify({ type: "warning", message: "手机号格式不正确" }); | |||||
| return false; | |||||
| } else if (this.formData.smsCode == "") { | |||||
| this.$notify({ type: "warning", message: "短信验证码不能为空" }); | |||||
| return false; | |||||
| } | } | ||||
| } | |||||
| } | |||||
| this.loading = true; | |||||
| this.$store | |||||
| .dispatch("SmsLogin", this.formData) | |||||
| .then(() => { | |||||
| this.$router.push({ path: this.redirect || "/" }).catch(() => {}); | |||||
| }) | |||||
| .catch(() => { | |||||
| this.loading = false; | |||||
| }); | |||||
| } else { | |||||
| //账号密码登录 | |||||
| if (this.formData.username == "") { | |||||
| this.$notify({ type: "warning", message: "账号不能为空" }); | |||||
| return false; | |||||
| } else if (this.formData.password == "") { | |||||
| this.$notify({ type: "warning", message: "密码不能为空" }); | |||||
| return false; | |||||
| } else if (this.formData.code == "") { | |||||
| this.$notify({ type: "warning", message: "图片验证码不能为空" }); | |||||
| return false; | |||||
| } | |||||
| this.$store | |||||
| .dispatch("Login", this.formData) | |||||
| .then(() => { | |||||
| this.$router.push({ path: this.redirect || "/" }).catch(() => {}); | |||||
| }) | |||||
| .catch(() => { | |||||
| this.loading = false; | |||||
| this.getCode(); | |||||
| }); | |||||
| } | |||||
| }, | |||||
| }, | |||||
| }; | |||||
| </script> | </script> | ||||
| <!-- Add "scoped" attribute to limit CSS to this component only --> | <!-- Add "scoped" attribute to limit CSS to this component only --> | ||||
| <style scoped lang="scss"> | <style scoped lang="scss"> | ||||
| .login_page { | .login_page { | ||||
| .focus-logo{ | |||||
| width: 310px; | |||||
| margin:0 auto 40px; | |||||
| padding-top: 60px; | |||||
| img{ | |||||
| width: 100%; | |||||
| } | |||||
| .focus-logo { | |||||
| width: 310px; | |||||
| margin: 0 auto 40px; | |||||
| padding-top: 60px; | |||||
| img { | |||||
| width: 100%; | |||||
| } | |||||
| } | } | ||||
| .head_nav{ | |||||
| li{ | |||||
| width: 50%; | |||||
| float: left; | |||||
| height: 90px; | |||||
| line-height: 90px; | |||||
| text-align: center; | |||||
| font-size: 30px; | |||||
| background:#fff; | |||||
| border-bottom: 2px solid #fff; | |||||
| &.active{ | |||||
| background: #F5F5F5; | |||||
| border-bottom:2px solid #2386EE; | |||||
| color: #2386EE; | |||||
| } | |||||
| } | |||||
| border-bottom: 1px solid #B3BBD1; | |||||
| border-top: 1px solid #eee; | |||||
| } | |||||
| .form_main{ | |||||
| .form-submit{margin: 40px 40px 0;} | |||||
| .code-img{width: 220px;} | |||||
| } | |||||
| .head_nav { | |||||
| li { | |||||
| width: 50%; | |||||
| float: left; | |||||
| height: 90px; | |||||
| line-height: 90px; | |||||
| text-align: center; | |||||
| font-size: 30px; | |||||
| background: #fff; | |||||
| border-bottom: 2px solid #fff; | |||||
| &.active { | |||||
| background: #f5f5f5; | |||||
| border-bottom: 2px solid #2386ee; | |||||
| color: #2386ee; | |||||
| } | |||||
| } | |||||
| border-bottom: 1px solid #b3bbd1; | |||||
| border-top: 1px solid #eee; | |||||
| } | |||||
| .form_main { | |||||
| .form-submit { | |||||
| margin: 40px 40px 0; | |||||
| } | |||||
| .code-img { | |||||
| width: 220px; | |||||
| } | |||||
| } | |||||
| } | } | ||||
| </style> | </style> | ||||