初始上传
This commit is contained in:
256
addon/pc/source/os/pages/auth/find.vue
Executable file
256
addon/pc/source/os/pages/auth/find.vue
Executable file
@@ -0,0 +1,256 @@
|
||||
<template>
|
||||
<div class="el-row-wrap find-pass">
|
||||
<ul>
|
||||
<li>
|
||||
<div>
|
||||
<p class="ns-bg-color">1</p>
|
||||
<p class="ns-text-color">输入手机号</p>
|
||||
</div>
|
||||
<span class="line-2 ns-border-color"></span>
|
||||
</li>
|
||||
<li id="current2">
|
||||
<span class="line-1" :class="step >= 2 ? 'ns-border-color' : 'ns-border-color-gray'"></span>
|
||||
<div>
|
||||
<p :class="step >= 2 ? 'ns-bg-color' : 'ns-bg-color-gray'">2</p>
|
||||
<p :class="step >= 2 ? 'ns-text-color' : 'ns-text-color-gray'">验证身份</p>
|
||||
</div>
|
||||
<span class="line-2" :class="step >= 2 ? 'ns-border-color' : 'ns-border-color-gray'"></span>
|
||||
</li>
|
||||
<li id="current3">
|
||||
<span class="line-1" :class="step >= 3 ? 'ns-border-color' : 'ns-border-color-gray'"></span>
|
||||
<div>
|
||||
<p :class="step >= 3 ? 'ns-bg-color' : 'ns-bg-color-gray'">3</p>
|
||||
<p :class="step >= 3 ? 'ns-text-color' : 'ns-text-color-gray'">重置密码</p>
|
||||
</div>
|
||||
<span class="line-2" :class="step >= 3 ? 'ns-border-color' : 'ns-border-color-gray'"></span>
|
||||
</li>
|
||||
<li id="current4">
|
||||
<span class="line-1" :class="step >= 4 ? 'ns-border-color' : 'ns-border-color-gray'"></span>
|
||||
<div>
|
||||
<p :class="step >= 4 ? 'ns-bg-color' : 'ns-bg-color-gray'">4</p>
|
||||
<p :class="step >= 4 ? 'ns-text-color' : 'ns-text-color-gray'">完成</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="12" :offset="6">
|
||||
<div class="grid-content bg-purple">
|
||||
<el-form :model="formData" :rules="rules" ref="ruleForm" class="ns-forget-pass-form">
|
||||
<div class="ns-forget-pass">
|
||||
<template v-if="step == 1">
|
||||
<el-form-item prop="mobile" key="1">
|
||||
<el-input v-model="formData.mobile" placeholder="请输入注册手机号">
|
||||
<template slot="prepend">
|
||||
<i class="el-icon-mobile-phone"></i>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="nextStep('ruleForm')">下一步</el-button>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<template v-else-if="step == 2">
|
||||
<el-form-item prop="vercode" key="2">
|
||||
<el-input v-model="formData.vercode" autocomplete="off" placeholder="请输入验证码" maxlength="4">
|
||||
<template slot="prepend">
|
||||
<i class="el-icon-picture-outline"></i>
|
||||
</template>
|
||||
<template slot="append">
|
||||
<img :src="captcha.img" mode class="captcha" @click="getCaptcha" />
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="dynacode" key="3">
|
||||
<el-input v-model="formData.dynacode" maxlength="4" autocomplete="off" placeholder="请输入短信动态码">
|
||||
<template slot="prepend">
|
||||
<i class="el-icon-mobile"></i>
|
||||
</template>
|
||||
<template slot="append">
|
||||
<div class="dynacode" :class="dynacodeData.seconds == 120 ? 'ns-text-color' : 'ns-text-color-gray'" @click="sendMobileCode('ruleForm')">
|
||||
{{ dynacodeData.codeText }}
|
||||
</div>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="nextStepToSetPass('ruleForm')">下一步</el-button>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<template v-else-if="step == 3">
|
||||
<el-form-item prop="pass" key="4">
|
||||
<el-input v-model.trim="formData.pass" type="password" autocomplete="off" placeholder="请输入新的登录密码">
|
||||
<template slot="prepend">
|
||||
<i class="el-icon-lock"></i>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="repass" key="5">
|
||||
<el-input v-model.trim="formData.repass" type="password" autocomplete="off" placeholder="请再次输入新密码">
|
||||
<template slot="prepend">
|
||||
<i class="el-icon-lock"></i>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="resetPass('ruleForm')">重置密码</el-button>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<template v-else-if="step == 4">
|
||||
<span class="ns-reset-success">重置密码成功</span>
|
||||
<el-form-item>
|
||||
<router-link to="/auth/login">
|
||||
<el-button type="primary">重新登录</el-button>
|
||||
</router-link>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import find from '~/assets/js/auth/find.js';
|
||||
|
||||
export default {
|
||||
name: 'find_pass',
|
||||
layout: 'login',
|
||||
mixins: [find]
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.el-row-wrap {
|
||||
width: $width;
|
||||
margin: 0 auto;
|
||||
border: 1px solid #e5e5e5;
|
||||
|
||||
ul {
|
||||
margin: 50px auto 0;
|
||||
width: 1032px;
|
||||
height: 51px;
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 258px;
|
||||
height: 51px;
|
||||
text-align: center;
|
||||
|
||||
div p:first-child {
|
||||
display: inline-block;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
color: #fff;
|
||||
border-radius: 28px;
|
||||
}
|
||||
|
||||
div p:nth-child(2) {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.line-1 {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 14px;
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
border-top: solid 2px;
|
||||
}
|
||||
|
||||
.line-2 {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 14px;
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
border-top: solid 2px;
|
||||
}
|
||||
|
||||
.ns-bg-color-gray {
|
||||
background-color: #b7b7b7;
|
||||
}
|
||||
|
||||
.ns-text-color-gray {
|
||||
color: #898989;
|
||||
}
|
||||
|
||||
.ns-border-color-gray {
|
||||
border-color: #e5e5e5 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-form {
|
||||
box-sizing: border-box;
|
||||
padding: 80px 0 50px;
|
||||
|
||||
.captcha {
|
||||
vertical-align: top;
|
||||
max-width: inherit;
|
||||
max-height: 38px;
|
||||
line-height: 38px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dynacode {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
[class*=' el-icon-'],
|
||||
[class^='el-icon-'] {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.ns-forget-pass {
|
||||
width: 60%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ns-reset-success {
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.find-pass {
|
||||
.ns-forget-pass-form {
|
||||
.el-form-item__error {
|
||||
/* 错误提示信息 */
|
||||
padding-left: 57px;
|
||||
}
|
||||
|
||||
.el-tabs__active-bar,
|
||||
.el-tabs__nav-wrap::after {
|
||||
/* 清除tab标签底部横线 */
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/* 立即注册 */
|
||||
.el-form-item__content {
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user