feat: ✨ 商家端增加修改密码,手机号登录
chc
parent
f7a9bff2ba
commit
7d0b3c6908
|
|
@ -1,4 +1,4 @@
|
|||
import { commonUrl, getRequest, uploadFileRequest ,uploadFile} from "@/libs/axios";
|
||||
import { commonUrl, getRequest, uploadFileRequest, uploadFile, request} from "@/libs/axios";
|
||||
|
||||
// 通过id获取子地区
|
||||
export const getChildRegion = (id) => {
|
||||
|
|
@ -25,3 +25,10 @@ export const upLoadFileMethods = (bold) => {
|
|||
console.log(bold)
|
||||
return uploadFileRequest(uploadFile, bold);
|
||||
};
|
||||
|
||||
/**
|
||||
* 发送短信验证码
|
||||
*/
|
||||
export function sendSms (params) {
|
||||
return getRequest(`${commonUrl}/common/common/sms/${params.verificationEnums}/${params.mobile}`,params);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -37,6 +37,11 @@ export const login = params => {
|
|||
return postRequestWithNoTokenData("/passport/login/userLogin", params);
|
||||
};
|
||||
|
||||
// 手机登陆
|
||||
export const storeSmsLogin = params => {
|
||||
return postRequestWithNoToken("/passport/login/smsLogin", params);
|
||||
};
|
||||
|
||||
// 登出
|
||||
export const logout = () => {
|
||||
return postRequest("/passport/login/logout");
|
||||
|
|
@ -50,7 +55,10 @@ export const userInfo = params => {
|
|||
export const userMsg = params => {
|
||||
return getRequest('/settings/storeSettings', params)
|
||||
}
|
||||
|
||||
//验证短信验证码
|
||||
export const validateCode = params => {
|
||||
return postRequestWithNoToken("/passport/login/resetByMobile", params);
|
||||
};
|
||||
// 初始化验证码
|
||||
export const initCaptcha = params => {
|
||||
return getRequestWithNoToken("/common/captcha/init", params);
|
||||
|
|
@ -107,6 +115,10 @@ export const sendCodeEmail = (email, params) => {
|
|||
export const editEmail = params => {
|
||||
return postRequest("/email/editEmail", params);
|
||||
};
|
||||
// 忘记密码并修改
|
||||
export const forgetAndModify = params => {
|
||||
return postRequest("/passport/login/resetPassword", params);
|
||||
};
|
||||
// 个人中心修改密码
|
||||
export const changePass = params => {
|
||||
return postRequest("/passport/login/modifyPass", params);
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import ViewUI from 'view-design';
|
|||
import Util from '../libs/util';
|
||||
import VueRouter from 'vue-router';
|
||||
import Cookies from 'js-cookie';
|
||||
import {routers} from './router';
|
||||
import { routers } from './router';
|
||||
|
||||
Vue.use(VueRouter);
|
||||
|
||||
|
|
@ -16,10 +16,10 @@ const RouterConfig = {
|
|||
/**
|
||||
* 解决重复点击菜单会控制台报错bug
|
||||
*/
|
||||
const routerPush = VueRouter.prototype.push
|
||||
VueRouter.prototype.push = function push(location) {
|
||||
return routerPush.call(this, location).catch(error=> error)
|
||||
}
|
||||
const routerPush = VueRouter.prototype.push
|
||||
VueRouter.prototype.push = function push(location) {
|
||||
return routerPush.call(this, location).catch(error => error)
|
||||
}
|
||||
|
||||
export const router = new VueRouter(RouterConfig);
|
||||
|
||||
|
|
@ -32,10 +32,15 @@ router.beforeEach((to, from, next) => {
|
|||
const name = to.name;
|
||||
|
||||
if (!Cookies.get('userInfoSeller') && name !== 'login') {
|
||||
// 判断是否已经登录且前往的页面不是登录页
|
||||
next({
|
||||
name: 'login'
|
||||
});
|
||||
if (name === 'forgetPassword') {
|
||||
console.log(name)
|
||||
Util.toDefaultPage([...routers], name, router, next);
|
||||
} else {
|
||||
// 判断是否已经登录且前往的页面不是登录页
|
||||
next({
|
||||
name: 'login'
|
||||
});
|
||||
}
|
||||
} else if (Cookies.get('userInfoSeller') && name === 'login') {
|
||||
// 判断是否已经登录且前往的是登录页
|
||||
Util.title();
|
||||
|
|
|
|||
|
|
@ -10,6 +10,11 @@ export const loginRouter = {
|
|||
},
|
||||
component: () => import("@/views/login.vue")
|
||||
};
|
||||
export const forgetPasswordRouter = {
|
||||
path: "/forgetPassword",
|
||||
name: "forgetPassword",
|
||||
component: () => import("@/views/ForgetPassword.vue")
|
||||
};
|
||||
|
||||
// 作为Main组件的子页面展示但是不在左侧菜单显示的路由写在otherRouter里
|
||||
export const otherRouter = {
|
||||
|
|
@ -193,4 +198,4 @@ export const page500 = {
|
|||
component: () => import("@/views/error-page/500.vue")
|
||||
};
|
||||
// 所有上面定义的路由都要写在下面的routers里
|
||||
export const routers = [loginRouter, otherRouter, page500, page403];
|
||||
export const routers = [loginRouter, forgetPasswordRouter, otherRouter, page500, page403];
|
||||
|
|
|
|||
|
|
@ -0,0 +1,331 @@
|
|||
<template>
|
||||
<div class="forget-password" @click='$refs.verify.show = false'>
|
||||
<div style="height:50px;"></div>
|
||||
<!-- 顶部logo -->
|
||||
<div class="logo-box">
|
||||
<img
|
||||
:src="$store.state.logoImg" width='150'
|
||||
@click="$router.push('/')"
|
||||
/>
|
||||
<div>修改密码</div>
|
||||
</div>
|
||||
<div class="login-container">
|
||||
<!-- 验证手机号 -->
|
||||
<Form
|
||||
ref="formFirst"
|
||||
:model="formFirst"
|
||||
:rules="ruleInline"
|
||||
style="width:300px;"
|
||||
v-show="step === 0"
|
||||
>
|
||||
<FormItem prop="mobile">
|
||||
<i-input
|
||||
type="text"
|
||||
v-model="formFirst.mobile"
|
||||
clearable
|
||||
placeholder="手机号"
|
||||
>
|
||||
<Icon type="md-phone-portrait" slot="prepend"></Icon>
|
||||
</i-input>
|
||||
</FormItem>
|
||||
<FormItem prop="code">
|
||||
<i-input
|
||||
type="text"
|
||||
v-model="formFirst.code"
|
||||
clearable
|
||||
placeholder="手机验证码"
|
||||
>
|
||||
<Icon
|
||||
type="ios-text-outline"
|
||||
style="font-weight: bold"
|
||||
slot="prepend"
|
||||
/>
|
||||
<Button slot="append" @click="sendCode">{{ codeMsg }}</Button>
|
||||
</i-input>
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Button @click="verifyBtnClick" long :type="verifyStatus?'success':'default'">{{verifyStatus?'验证通过':'点击完成安全验证'}}</Button>
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Button type="error" @click="next" :loading="loading" long>下一步</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
<Form
|
||||
ref="form"
|
||||
:model="form"
|
||||
:rules="ruleInline"
|
||||
style="width:300px;"
|
||||
v-show="step === 1"
|
||||
>
|
||||
<FormItem prop="password">
|
||||
<i-input
|
||||
type="password"
|
||||
v-model="form.password"
|
||||
clearable
|
||||
placeholder="请输入至少六位密码"
|
||||
>
|
||||
<Icon type="md-lock" slot="prepend"></Icon>
|
||||
</i-input>
|
||||
</FormItem>
|
||||
<FormItem prop="password">
|
||||
<i-input
|
||||
type="password"
|
||||
v-model="form.oncePasd"
|
||||
clearable
|
||||
placeholder="请再次输入密码"
|
||||
>
|
||||
<Icon type="md-lock" slot="prepend"></Icon>
|
||||
</i-input>
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Button type="error" size="large" @click="handleSubmit" :loading="loading1" long>提交</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
<!-- 拼图验证码 -->
|
||||
<verify
|
||||
ref="verify"
|
||||
class="verify-con"
|
||||
:verifyType="verifyType"
|
||||
@change="verifyChange"
|
||||
></verify>
|
||||
<div class="login-btn"><a @click="$router.push('login')">前往登录</a></div>
|
||||
</div>
|
||||
<div class="foot">
|
||||
<Row type="flex" justify="space-around" class="help">
|
||||
<a class="item" href="https://pickmall.cn/" target="_blank">帮助</a>
|
||||
<a class="item" href="https://pickmall.cn/" target="_blank">隐私</a>
|
||||
<a class="item" href="https://pickmall.cn/" target="_blank">条款</a>
|
||||
</Row>
|
||||
<Row type="flex" justify="center" class="copyright">
|
||||
Copyright © {{year}} - Present
|
||||
<a href="https://pickmall.cn/" target="_blank" style="margin: 0 5px"
|
||||
>{{config.title}}</a
|
||||
>
|
||||
版权所有
|
||||
</Row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import * as RegExp from '@/utils/regular.js';
|
||||
import * as apiLogin from '@/api/index.js';
|
||||
import { sendSms } from '@/api/common.js';
|
||||
import verify from "@/views/my-components/verify";
|
||||
export default {
|
||||
name: 'ForgetPassword',
|
||||
components: { verify },
|
||||
data () {
|
||||
return {
|
||||
config:require('@/config'),
|
||||
loading: false, // 加载状态
|
||||
loading1: false, // 第二步加载状态
|
||||
formFirst: { // 手机验证码表单
|
||||
// 注册表单
|
||||
mobile: '',
|
||||
code: ''
|
||||
},
|
||||
form: { // 密码
|
||||
password: '',
|
||||
oncePasd: ''
|
||||
},
|
||||
year: new Date().getFullYear(), // 当前年份
|
||||
step: 0, // 步骤
|
||||
ruleInline: {
|
||||
// 验证规则
|
||||
mobile: [
|
||||
{ required: true, message: '请输入手机号码' },
|
||||
{
|
||||
pattern: RegExp.mobile,
|
||||
trigger: 'blur',
|
||||
message: '请输入正确的手机号'
|
||||
}
|
||||
],
|
||||
code: [{ required: true, message: '请输入手机验证码' }],
|
||||
password: [{required: true, message: '密码不能为空'}, {pattern: RegExp.password, message: '密码不能少于6位'}]
|
||||
},
|
||||
verifyStatus: false, // 图片验证状态
|
||||
verifyType: 'FIND_USER', // 图片验证类型
|
||||
codeMsg: '发送验证码', // 验证码文字
|
||||
interval: '', // 定时器
|
||||
time: 60 // 倒计时时间
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 提交短信验证码，修改密码
|
||||
next () {
|
||||
this.$refs.formFirst.validate((valid) => {
|
||||
if (valid) {
|
||||
this.loading = true;
|
||||
let data = JSON.parse(JSON.stringify(this.formFirst));
|
||||
apiLogin.validateCode(data).then((res) => {
|
||||
this.loading = false;
|
||||
if (res.success) {
|
||||
// this.$Message.success('');
|
||||
this.step = 1;
|
||||
} else {
|
||||
this.$Message.warning(res.message);
|
||||
}
|
||||
}).catch(() => { this.loading = false; });
|
||||
} else {}
|
||||
});
|
||||
},
|
||||
handleSubmit () { // 提交密码
|
||||
this.$refs.form.validate(valid => {
|
||||
if (valid) {
|
||||
let params = JSON.parse(JSON.stringify(this.form));
|
||||
if (params.password !== params.oncePasd) {
|
||||
this.$Message.warning('两次输入密码不一致');
|
||||
return;
|
||||
};
|
||||
params.mobile = this.formFirst.mobile;
|
||||
params.password = this.md5(params.password);
|
||||
delete params.oncePasd;
|
||||
this.loading1 = true;
|
||||
|
||||
apiLogin.forgetAndModify(params).then(res => {
|
||||
this.loading1 = false;
|
||||
console.log(res);
|
||||
if (res.success) {
|
||||
this.$Message.success('修改密码成功');
|
||||
this.$router.push('login');
|
||||
}
|
||||
}).catch(() => { this.loading = false; });
|
||||
};
|
||||
});
|
||||
},
|
||||
sendCode () { // 发送验证码
|
||||
if (this.time === 60) {
|
||||
if (this.formFirst.mobile === '') {
|
||||
this.$Message.warning('请先填写手机号');
|
||||
return;
|
||||
}
|
||||
if (!this.verifyStatus) {
|
||||
this.$Message.warning('请先完成安全验证');
|
||||
return;
|
||||
}
|
||||
let params = {
|
||||
mobile: this.formFirst.mobile,
|
||||
verificationEnums: 'FIND_USER'
|
||||
};
|
||||
sendSms(params).then(res => {
|
||||
if (res.success) {
|
||||
this.$Message.success('验证码发送成功');
|
||||
let that = this;
|
||||
this.interval = setInterval(() => {
|
||||
that.time--;
|
||||
if (that.time === 0) {
|
||||
that.time = 60;
|
||||
that.codeMsg = '重新发送';
|
||||
that.verifyStatus = false;
|
||||
clearInterval(that.interval);
|
||||
} else {
|
||||
that.codeMsg = that.time;
|
||||
}
|
||||
}, 1000);
|
||||
} else {
|
||||
this.$Message.warning(res.message);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
verifyChange (con) { // 验证通过
|
||||
if (!con.status) return;
|
||||
this.$refs.verify.show = false;
|
||||
this.verifyStatus = true;
|
||||
},
|
||||
verifyBtnClick () {
|
||||
if (!this.verifyStatus) {
|
||||
this.$refs.verify.init();
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
document.querySelector('.forget-password').style.height = window.innerHeight + 'px'
|
||||
this.$refs.formFirst.resetFields();
|
||||
},
|
||||
watch: {
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.forget-password{
|
||||
min-height: 700px;
|
||||
}
|
||||
.logo-box {
|
||||
width: 600px;
|
||||
height: 80px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
img {
|
||||
width: 150px;
|
||||
cursor: pointer;
|
||||
}
|
||||
div {
|
||||
font-size: 20px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.login-container {
|
||||
border-top: 2px solid $theme_color;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
width: 600px;
|
||||
background-color: #fff;
|
||||
padding: 20px 150px;
|
||||
.login-btn{
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: -45px;
|
||||
}
|
||||
}
|
||||
|
||||
.verify-con{
|
||||
position: absolute;
|
||||
left: 140px;
|
||||
top: -30px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.other-login {
|
||||
margin: 0 auto;
|
||||
.ivu-icon {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
.regist {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: -10px;
|
||||
span {
|
||||
margin-left: 10px;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: $theme_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.foot {
|
||||
position: fixed;
|
||||
bottom: 4vh;
|
||||
width: 368px;
|
||||
left: calc(50% - 184px);
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
font-size: 14px;
|
||||
.help {
|
||||
margin: 0 auto;
|
||||
margin-bottom: 1vh;
|
||||
width: 60%;
|
||||
.item {
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
:hover {
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -2,59 +2,58 @@
|
|||
<div class="login" @click="$refs.verify.show = false">
|
||||
<Row type="flex" @keydown.enter.native="submitLogin">
|
||||
<Col style="width: 368px">
|
||||
<Header />
|
||||
<Row style="flex-direction: column">
|
||||
<Form
|
||||
ref="usernameLoginForm"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
class="form"
|
||||
>
|
||||
<FormItem prop="username">
|
||||
<Input
|
||||
v-model="form.username"
|
||||
prefix="ios-contact"
|
||||
size="large"
|
||||
clearable
|
||||
placeholder="请输入用户名"
|
||||
autocomplete="off"
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem prop="password">
|
||||
<Input
|
||||
type="password"
|
||||
v-model="form.password"
|
||||
prefix="ios-lock"
|
||||
size="large"
|
||||
password
|
||||
placeholder="请输入密码"
|
||||
autocomplete="off"
|
||||
/>
|
||||
</FormItem>
|
||||
</Form>
|
||||
|
||||
<Row>
|
||||
<div
|
||||
class="login-btn"
|
||||
type="primary"
|
||||
size="large"
|
||||
:loading="loading"
|
||||
@click="submitLogin"
|
||||
long
|
||||
>
|
||||
<span v-if="!loading">登录</span>
|
||||
<span v-else>登录中</span>
|
||||
<Header />
|
||||
<Row style="flex-direction: column">
|
||||
<Tabs v-model="loginType">
|
||||
<Tab-pane label="账号密码登录" name="passwordLogin">
|
||||
<!--账号密码登录-->
|
||||
<Form ref="usernameLoginForm" :model="form" :rules="rules" class="form">
|
||||
<FormItem prop="username">
|
||||
<Input v-model="form.username" prefix="ios-contact" size="large" clearable placeholder="请输入用户名"
|
||||
autocomplete="off" />
|
||||
</FormItem>
|
||||
<FormItem prop="password">
|
||||
<Input type="password" v-model="form.password" prefix="ios-lock" size="large" password placeholder="请输入密码"
|
||||
autocomplete="off" />
|
||||
</FormItem>
|
||||
</Form>
|
||||
<div class="register">
|
||||
<a @click="$router.push('forgetPassword')">忘记密码</a>
|
||||
</div>
|
||||
</Row>
|
||||
</Tab-pane>
|
||||
<Tab-pane label="验证码登录" name="mobileLogin">
|
||||
<!-- 验证码登录 -->
|
||||
<Form ref="formSms" :model="formSms" :rules="ruleInline" @click.self='$refs.verify.show = false'>
|
||||
<FormItem prop="mobile">
|
||||
<i-input type="text" v-model="formSms.mobile" clearable placeholder="手机号">
|
||||
<Icon type="md-lock" slot="prepend"></Icon>
|
||||
</i-input>
|
||||
</FormItem>
|
||||
<FormItem prop="code">
|
||||
<i-input type="text" v-model="formSms.code" placeholder="手机验证码">
|
||||
<Icon type="ios-text-outline" style="font-weight: bold" slot="prepend" />
|
||||
<Button slot="append" @click="sendCode">{{ codeMsg }}</Button>
|
||||
</i-input>
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Button @click.stop="verifyBtnClick" long :type="verifyStatus ? 'success' : 'default'">{{ verifyStatus ?
|
||||
'验证通过' :
|
||||
'点击完成安全验证' }}
|
||||
</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</Tab-pane>
|
||||
</Tabs>
|
||||
<Row>
|
||||
<div class="login-btn" type="primary" size="large" :loading="loading" @click="submitLogin" long>
|
||||
<span v-if="!loading">登录</span>
|
||||
<span v-else>登录中</span>
|
||||
</div>
|
||||
</Row>
|
||||
<Footer />
|
||||
<!-- 拼图验证码 -->
|
||||
<verify
|
||||
ref="verify"
|
||||
class="verify-con"
|
||||
verifyType="LOGIN"
|
||||
@change="verifyChange"
|
||||
></verify>
|
||||
</Row>
|
||||
<Footer />
|
||||
<!-- 拼图验证码 -->
|
||||
<verify ref="verify" class="verify-con" verifyType="LOGIN" @change="verifyChange"></verify>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
|
|
@ -62,7 +61,8 @@
|
|||
|
||||
<script>
|
||||
import { getCurrentPermissionList } from "@/api/index";
|
||||
import { login, userMsg } from "@/api/index";
|
||||
import { login, userMsg, storeSmsLogin } from "@/api/index";
|
||||
import { sendSms } from "@/api/common.js";
|
||||
import Cookies from "js-cookie";
|
||||
import Header from "@/views/main-components/header";
|
||||
import Footer from "@/views/main-components/footer";
|
||||
|
|
@ -78,6 +78,9 @@ export default {
|
|||
return {
|
||||
saveLogin: true, // 保存登录状态
|
||||
loading: false, // 加载状态
|
||||
verifyStatus: false, // 是否图片验证通过
|
||||
time: 60, // 倒计时
|
||||
loginType: 'passwordLogin', //登陆类型
|
||||
form: {
|
||||
// 表单数据
|
||||
username: "",
|
||||
|
|
@ -85,6 +88,10 @@ export default {
|
|||
mobile: "",
|
||||
code: "",
|
||||
},
|
||||
formSms: {
|
||||
mobile: '',
|
||||
code: '',
|
||||
},
|
||||
rules: {
|
||||
// 验证规则
|
||||
username: [
|
||||
|
|
@ -102,6 +109,23 @@ export default {
|
|||
},
|
||||
],
|
||||
},
|
||||
ruleInline: {
|
||||
// 验证规则
|
||||
username: [{ required: true, message: "请输入用户名" }],
|
||||
password: [
|
||||
{ required: true, message: "请输入密码" },
|
||||
{ type: "string", min: 6, message: "密码不能少于6位" },
|
||||
],
|
||||
mobile: [
|
||||
{ required: true, message: "请输入手机号码" },
|
||||
{
|
||||
pattern: RegExp.mobile,
|
||||
message: "请输入正确的手机号",
|
||||
},
|
||||
],
|
||||
code: [{ required: true, message: "请输入手机验证码" }],
|
||||
},
|
||||
codeMsg: "发送验证码", // 验证码文字
|
||||
};
|
||||
},
|
||||
created() {
|
||||
|
|
@ -142,35 +166,92 @@ export default {
|
|||
}
|
||||
});
|
||||
},
|
||||
// 发送手机验证码
|
||||
sendCode() {
|
||||
if (this.time === 60) {
|
||||
if (this.formSms.mobile === "") {
|
||||
this.$Message.warning("请先填写手机号");
|
||||
return;
|
||||
}
|
||||
if (!this.verifyStatus) {
|
||||
this.$Message.warning("请先完成安全验证");
|
||||
return;
|
||||
}
|
||||
let params = {
|
||||
mobile: this.formSms.mobile,
|
||||
verificationEnums: "LOGIN",
|
||||
};
|
||||
sendSms(params).then((res) => {
|
||||
if (res.success) {
|
||||
this.$Message.success("验证码发送成功");
|
||||
let that = this;
|
||||
this.interval = setInterval(() => {
|
||||
that.time--;
|
||||
if (that.time === 0) {
|
||||
that.time = 60;
|
||||
that.codeMsg = "重新发送";
|
||||
that.verifyStatus = false;
|
||||
clearInterval(that.interval);
|
||||
} else {
|
||||
that.codeMsg = that.time;
|
||||
}
|
||||
}, 1000);
|
||||
} else {
|
||||
this.$Message.warning(res.message);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
submitLogin() {
|
||||
// 登录提交
|
||||
this.$refs.usernameLoginForm.validate((valid) => {
|
||||
if (valid) {
|
||||
this.$refs.verify.init();
|
||||
}
|
||||
});
|
||||
if (this.loginType == 'passwordLogin') {
|
||||
this.$refs.usernameLoginForm.validate((valid) => {
|
||||
if (valid) {
|
||||
this.$refs.verify.init();
|
||||
}
|
||||
});
|
||||
} else if (this.loginType == 'mobileLogin') {
|
||||
this.$refs['formSms'].validate((valid) => {
|
||||
if (valid) {
|
||||
storeSmsLogin(this.formSms).then(res => {
|
||||
if (res.success) {
|
||||
this.afterLogin(res)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
verifyChange(con) {
|
||||
// 拼图验证码回显
|
||||
if (!con.status) return;
|
||||
|
||||
this.loading = true;
|
||||
|
||||
let fd = new FormData();
|
||||
fd.append("username", this.form.username);
|
||||
fd.append("password", this.md5(this.form.password));
|
||||
login(fd)
|
||||
.then((res) => {
|
||||
this.loading = false;
|
||||
if (res && res.success) {
|
||||
this.afterLogin(res);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
if (this.loginType == 'passwordLogin') {
|
||||
this.loading = true;
|
||||
let fd = new FormData();
|
||||
fd.append("username", this.form.username);
|
||||
fd.append("password", this.md5(this.form.password));
|
||||
login(fd)
|
||||
.then((res) => {
|
||||
this.loading = false;
|
||||
if (res && res.success) {
|
||||
this.afterLogin(res);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
}
|
||||
this.verifyStatus = true;
|
||||
this.$refs.verify.show = false;
|
||||
},
|
||||
|
||||
// 开启滑块验证
|
||||
verifyBtnClick() {
|
||||
if (!this.verifyStatus) {
|
||||
this.$refs.verify.init();
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -184,12 +265,14 @@ export default {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.verify-con {
|
||||
position: absolute;
|
||||
top: 126px;
|
||||
z-index: 10;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
.form {
|
||||
padding-top: 1vh;
|
||||
}
|
||||
|
|
@ -208,9 +291,11 @@ export default {
|
|||
text-align: center;
|
||||
transition: 0.35s;
|
||||
}
|
||||
|
||||
.login-btn:hover {
|
||||
opacity: 0.9;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue