Skip to content

L
login
提交 990f03ab authored 作者: 王鹏飞's avatar 王鹏飞
浏览文件
操作

新增wmp登录模块

上级 b0a6be81
隐藏空白字符变更
内嵌 并排
正在显示 包含 165 行增加 和 41 行删除
src/components/loginCode.vue
浏览文件 @ 990f03ab
......@@ -34,6 +34,9 @@ import countdown from './countdown.vue'
export default {
name: 'LoginCode',
props: {
sendcode: { type: Object, default: () => ({}) }
},
components: { countdown },
data() {
return {
......@@ -79,8 +82,9 @@ export default {
},
// 验证码
sendCodeRequest() {
const params = Object.assign({}, this.sendcode, { account: this.ruleForm.account })
api
.sendCode({ account: this.ruleForm.account })
.sendCode(params)
.then(response => {
console.log(response)
if (response.code === 0) {
......
src/components/password.vue
浏览文件 @ 990f03ab
......@@ -39,6 +39,9 @@ import countdown from './countdown.vue'
export default {
name: 'Password',
props: {
sendcode: { type: Object, default: () => ({}) }
},
components: { countdown },
data() {
const validatePass = (rule, value, callback) => {
......@@ -98,8 +101,9 @@ export default {
},
// 验证码
sendCodeRequest() {
const params = Object.assign({}, this.sendcode, { account: this.ruleForm.account })
api
.sendCode({ account: this.ruleForm.account })
.sendCode(params)
.then(response => {
console.log(response)
if (response.code === 0) {
......
src/components/register.vue
浏览文件 @ 990f03ab
......@@ -32,6 +32,9 @@ import countdown from './countdown.vue'
export default {
name: 'Register',
props: {
sendcode: { type: Object, default: () => ({}) }
},
components: { countdown },
data() {
return {
......@@ -41,7 +44,7 @@ export default {
account: [{ required: true, message: '请输入邮箱/手机号', trigger: 'blur' }],
code: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
password: [
{ required: true, message: '请输入新密码', trigger: 'blur' },
{ required: true, message: '请输入登录密码', trigger: 'blur' },
{ min: 6, max: 20, message: '长度为6-20个字符', trigger: 'blur' }
]
},
......@@ -79,8 +82,9 @@ export default {
},
// 验证码
sendCodeRequest() {
const params = Object.assign({}, this.sendcode, { account: this.ruleForm.account })
api
.sendCode({ account: this.ruleForm.account })
.sendCode(params)
.then(response => {
console.log(response)
if (response.code === 0) {
......
src/pages/wmp/components/layout.vue
浏览文件 @ 990f03ab
<template>
<div class="login-page" :style="setHeight">
<div class="login-page">
<div class="login-box">
<div class="login-mian">
<div class="left">
......@@ -13,7 +13,7 @@
</div>
</div>
</div>
<div class="mobile-login" :style="setHeight">
<div class="mobile-login">
<div class="title-box">
<img src="../assets/mlogin-tit1.png" alt="" class="tit1" />
<img src="../assets/mlogin-tit2.png" alt="" class="tit2" />
......@@ -30,7 +30,6 @@
<div class="mlogin-modules">
<router-view></router-view>
</div>
<div class="new-user" @click="$router.push('register')">我是新用户?</div>
</div>
</div>
</template>
......@@ -40,8 +39,7 @@ export default {
name: 'WmpLayout',
data() {
return {
imgUrl: 'pc',
setHeight: 0
imgUrl: 'pc'
}
},
created() {
......@@ -50,7 +48,6 @@ export default {
} else {
this.imgUrl = 'pc'
}
this.setHeight = `height: ${document.documentElement.clientHeight}px`
}
}
</script>
......@@ -60,15 +57,11 @@ export default {
background: #006dbf;
border: none;
}
.login-page {
width: 100%;
height: 100%;
}
.mobile-login {
width: 100%;
height: 100%;
min-height: 100vh;
background: url('../assets/mlogin-bg.png');
background-size: 100% 100%;
overflow: hidden;
.title-box {
padding-top: 13px;
.tit1 {
......@@ -113,8 +106,7 @@ export default {
}
}
.login-box {
width: 100%;
height: 100%;
height: 100vh;
background: url('../assets/login-bg.png');
background-size: 100% 100%;
.login-mian {
......@@ -156,26 +148,7 @@ export default {
}
}
}
.new-user {
font-size: 16px;
font-weight: bold;
color: rgba(255, 158, 100, 1);
text-align: center;
padding-top: 30px;
text-decoration: underline;
}
/* normal 登录 */
.code-login a {
float: left;
cursor: pointer;
color: #186aa9;
text-decoration: none;
}
.forget-pwd a {
float: right;
cursor: pointer;
color: #186aa9;
}
@media screen and (max-width: 480px) {
.login-box {
display: none;
......
src/pages/wmp/login.vue
浏览文件 @ 990f03ab
<template>
<router-view @success="handleSuccess"></router-view>
<div>
<router-view @success="handleSuccess"></router-view>
<div class="new-user" @click="$router.push('../register')">我是新用户?</div>
</div>
</template>
<script>
......@@ -12,3 +15,14 @@ export default {
}
}
</script>
<style lang="scss" scoped>
.new-user {
font-size: 16px;
font-weight: bold;
color: rgba(255, 158, 100, 1);
text-align: center;
padding-top: 30px;
text-decoration: underline;
}
</style>
src/pages/wmp/register.vue 0 → 100644
浏览文件 @ 990f03ab
<template>
<div class="register">
<el-page-header @back="$router.push('login')" title="返回登录" content="注册"></el-page-header>
<div class="register-form">
<el-form :model="ruleForm" :rules="rules" ref="form" @submit.native.prevent>
<el-form-item prop="name">
<el-input v-model="ruleForm.name" placeholder="姓名"></el-input>
</el-form-item>
<el-form-item prop="organization">
<el-input v-model="ruleForm.organization" placeholder="机构"></el-input>
</el-form-item>
<el-form-item prop="job">
<el-input v-model="ruleForm.job" placeholder="职务"></el-input>
</el-form-item>
<el-form-item prop="mobile">
<el-input v-model="ruleForm.mobile" placeholder="手机"></el-input>
</el-form-item>
<el-form-item prop="code">
<el-input v-model="ruleForm.code" placeholder="验证码">
<countdown
slot="suffix"
size="mini"
:disabled="disabledSend"
@start="sendCodeRequest"
ref="countdown"
></countdown>
</el-input>
</el-form-item>
<el-form-item prop="email">
<el-input v-model="ruleForm.email" placeholder="邮箱"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input type="password" v-model="ruleForm.password" placeholder="密码"></el-input>
</el-form-item>
<el-button type="primary" class="submit-button" :loading="loading" @click="handleSubmit">注册</el-button>
</el-form>
</div>
</div>
</template>
<script>
import * as api from '@/api/account'
import countdown from '@/components/countdown.vue'
export default {
name: 'Register',
components: { countdown },
data() {
return {
ruleForm: { name: '', organization: '', job: '', mobile: '', code: '', email: '', password: '' },
rules: {
name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
organization: [{ required: true, message: '请输入机构名称', trigger: 'blur' }],
job: [{ required: true, message: '请输入职务', trigger: 'blur' }],
mobile: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
code: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
password: [
{ required: true, message: '请输入登录密码', trigger: 'blur' },
{ min: 6, max: 20, message: '长度为6-20个字符', trigger: 'blur' }
]
},
loading: false
}
},
computed: {
disabledSend() {
const value = this.ruleForm.mobile
return !(/^1[3-9]\d{9}$/.test(value) || /@/.test(value))
}
},
methods: {
// 提交
handleSubmit() {
this.$refs.form.validate().then(this.handleRequest)
},
// 接口请求
handleRequest() {
this.loading = true
api.register(this.ruleForm).then(response => {
response.code === 0 ? this.handleSuccess(response) : this.$message.error(response.msg)
this.loading = false
})
},
// 成功
handleSuccess(response) {
this.$alert('注册成功', '提示', {
type: 'success',
confirmButtonText: '去登录',
callback: action => {
this.$router.push('login')
}
})
},
// 验证码
sendCodeRequest() {
api
.sendCode({ account: this.ruleForm.mobile, signName: 'wmp', template: 'SMS_200186414' })
.then(response => {
console.log(response)
if (response.code === 0) {
this.$message({ type: 'success', message: '验证码已发送' })
} else {
// 停止计时
this.$refs.countdown.stop()
this.$message({ type: 'error', message: response.msg })
}
})
.catch(this.$refs.countdown.stop)
}
}
}
</script>
<style lang="scss" scoped>
.register-form {
margin-top: 20px;
}
</style>
src/router/routes.js
浏览文件 @ 990f03ab
......@@ -84,13 +84,19 @@ export default [
children: [
{ path: '', redirect: 'index' },
{ path: 'index', component: loginAccount },
{ path: 'code', component: loginCode }
{ path: 'code', component: loginCode, props: { sendcode: { signName: 'wmp', template: 'SMS_200181319' } } }
]
},
{
path: 'password',
component: () => import(/* webpackChunkName: "wmp" */ '../pages/wmp/password.vue'),
children: [{ path: '', component: password }]
children: [
{ path: '', component: password, props: { sendcode: { signName: 'wmp', template: 'SMS_200191908' } } }
]
},
{
path: 'register',
component: () => import(/* webpackChunkName: "wmp" */ '../pages/wmp/register.vue')
}
]
},
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论