注册和登录页面修改

This commit is contained in:
kerwincui
2022-05-12 14:25:18 +08:00
parent 303d6dc6b0
commit cd63e1eba4
2 changed files with 583 additions and 613 deletions

View File

@@ -22,14 +22,12 @@
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item prop="password"> <el-form-item prop="password">
<el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码" <el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码" @keyup.enter.native="handleLogin">
@keyup.enter.native="handleLogin">
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" /> <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item prop="code" v-if="captchaOnOff"> <el-form-item prop="code" v-if="captchaOnOff">
<el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 63%" <el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 63%" @keyup.enter.native="handleLogin">
@keyup.enter.native="handleLogin">
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" /> <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
</el-input> </el-input>
<div class="login-code"> <div class="login-code">
@@ -38,19 +36,17 @@
</el-form-item> </el-form-item>
<el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;color:#000;">记住密码</el-checkbox> <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;color:#000;">记住密码</el-checkbox>
<el-form-item style="width:100%;"> <el-form-item style="width:100%;">
<el-button v-if="!bindAccount" :loading="loading" size="medium" type="primary" style="width:100%;" <el-button v-if="!bindAccount" :loading="loading" size="medium" type="primary" style="width:100%;" @click.native.prevent="handleLogin">
@click.native.prevent="handleLogin">
<span v-if="!loading"> </span> <span v-if="!loading"> </span>
<span v-else> 中...</span> <span v-else> 中...</span>
</el-button> </el-button>
<el-button v-else :loading="loading" size="medium" type="primary" style="width:100%;" <el-button v-else :loading="loading" size="medium" type="primary" style="width:100%;" @click.native.prevent="handleLogin">
@click.native.prevent="handleLogin">
<span v-if="!loading">绑定</span> <span v-if="!loading">绑定</span>
<span v-else> 中...</span> <span v-else> 中...</span>
</el-button> </el-button>
<div style="margin-top:20px;" v-if="!bindAccount"> <div style="margin-top:30px;" v-if="!bindAccount">
<div v-if="!bindAccount" style=";text-align: center "> <div v-if="!bindAccount" style="float:left;">
<span style="color:#fff;margin-right:10px;">第三方登录</span>
<el-button type="success" circle title="微信登录" size="small" @click="authLogin"> <el-button type="success" circle title="微信登录" size="small" @click="authLogin">
<svg-icon icon-class="wechat" /> <svg-icon icon-class="wechat" />
</el-button> </el-button>
@@ -61,17 +57,13 @@
<el-button type="primary" circle title="支付宝登录" size="small" @click="authLogin"> <el-button type="primary" circle title="支付宝登录" size="small" @click="authLogin">
<svg-icon icon-class="zhifubao" /> <svg-icon icon-class="zhifubao" />
</el-button> </el-button>
</div> </div>
</div> <div style="float:right;" v-if="register">
<a style="margin-right:20px;color:#222" target="_blank" href="http://wumei.live">返回官网</a> <router-link style="color:#333;font-size:16px;" :to='{path:"/register",query: this.$route.query }'>立即注册>>
<div style="float: right;margin-top:10px;" v-if="register">
<router-link style="color:#fff;font-size:16px;" :to='{path:"/register",query: this.$route.query }'>立即注册
>>
</router-link> </router-link>
</div> </div>
</div>
</el-form-item> </el-form-item>
</el-form> </el-form>
</el-col> </el-col>
@@ -79,8 +71,7 @@
</div> </div>
<!-- 底部 --> <!-- 底部 -->
<div class="el-login-footer"> <div class="el-login-footer">
<span>Copyright © 2018-2021 <a target="_blank" <span>Copyright © 2018-2021 <a target="_blank" href="http://wumei.live">wumei smart</a> All Rights Reserved.</span>
href="http://wumei.live">wumei smart</a> All Rights Reserved.</span>
</div> </div>
</div> </div>
</template> </template>
@@ -155,7 +146,6 @@ export default {
this.redirectLogin(loginId); this.redirectLogin(loginId);
} }
}, },
methods: { methods: {
redirectLogin(loginId) { redirectLogin(loginId) {
@@ -163,8 +153,7 @@ export default {
this.$store.dispatch("RedirectLogin", loginId).then(() => { this.$store.dispatch("RedirectLogin", loginId).then(() => {
this.$router.push({ this.$router.push({
path: this.redirect || "/" path: this.redirect || "/"
}).catch(() => { }).catch(() => {});
});
}).catch(() => { }).catch(() => {
this.loading = false; this.loading = false;
if (this.captchaOnOff) { if (this.captchaOnOff) {
@@ -198,8 +187,7 @@ export default {
checkErrorMsg() { checkErrorMsg() {
let errorId = this.$route.query.errorId; let errorId = this.$route.query.errorId;
if (errorId !== undefined && errorId !== null) { if (errorId !== undefined && errorId !== null) {
getErrorMsg(errorId).then(res => { getErrorMsg(errorId).then(res => {}).catch(err => {
}).catch(err => {
this.$router.push({ this.$router.push({
query: {} query: {}
}) })
@@ -262,8 +250,7 @@ export default {
this.$store.dispatch("Login", this.loginForm).then(() => { this.$store.dispatch("Login", this.loginForm).then(() => {
this.$router.push({ this.$router.push({
path: this.redirect || "/" path: this.redirect || "/"
}).catch(() => { }).catch(() => {});
});
}).catch(() => { }).catch(() => {
this.loading = false; this.loading = false;
if (this.captchaOnOff) { if (this.captchaOnOff) {

View File

@@ -10,8 +10,7 @@
</div> </div>
</el-col> </el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24"> <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
<el-form ref="registerForm" :model="registerForm" :rules="registerRules" class="register-form" <el-form ref="registerForm" :model="registerForm" :rules="registerRules" class="register-form" style="z-index:1000">
style="z-index:1000">
<h3 class="title" v-if="!bindAccount">注册账号</h3> <h3 class="title" v-if="!bindAccount">注册账号</h3>
<h3 class="title" v-else>注册绑定物美智能账户</h3> <h3 class="title" v-else>注册绑定物美智能账户</h3>
<el-form-item prop="username"> <el-form-item prop="username">
@@ -25,20 +24,17 @@
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item prop="password"> <el-form-item prop="password">
<el-input v-model="registerForm.password" type="password" auto-complete="off" placeholder="密码" <el-input v-model="registerForm.password" type="password" auto-complete="off" placeholder="密码" @keyup.enter.native="handleRegister">
@keyup.enter.native="handleRegister">
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" /> <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item prop="confirmPassword"> <el-form-item prop="confirmPassword">
<el-input v-model="registerForm.confirmPassword" type="password" auto-complete="off" placeholder="确认密码" <el-input v-model="registerForm.confirmPassword" type="password" auto-complete="off" placeholder="确认密码" @keyup.enter.native="handleRegister">
@keyup.enter.native="handleRegister">
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" /> <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item prop="code" v-if="captchaOnOff"> <el-form-item prop="code" v-if="captchaOnOff">
<el-input v-model="registerForm.code" auto-complete="off" placeholder="验证码" style="width: 63%" <el-input v-model="registerForm.code" auto-complete="off" placeholder="验证码" style="width: 63%" @keyup.enter.native="handleRegister">
@keyup.enter.native="handleRegister">
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" /> <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
</el-input> </el-input>
<div class="register-code"> <div class="register-code">
@@ -46,42 +42,29 @@
</div> </div>
</el-form-item> </el-form-item>
<el-form-item style="width:100%;"> <el-form-item style="width:100%;">
<el-button v-if="!bindAccount" :loading="loading" size="medium" type="primary" style="width:100%;" <el-button v-if="!bindAccount" :loading="loading" size="medium" type="primary" style="width:100%;" @click.native.prevent="handleRegister">
@click.native.prevent="handleRegister">
<span v-if="!loading"> </span> <span v-if="!loading"> </span>
<span v-else> 中...</span> <span v-else> 中...</span>
</el-button> </el-button>
<el-button v-else :loading="loading" size="medium" type="primary" style="width:100%;" <el-button v-else :loading="loading" size="medium" type="primary" style="width:100%;" @click.native.prevent="handleRegister">
@click.native.prevent="handleRegister">
<span v-if="!loading"> </span> <span v-if="!loading"> </span>
<span v-else> 中...</span> <span v-else> 中...</span>
</el-button> </el-button>
<div style="margin-top:20px;"> <div style="margin-top:30px;">
<div v-if="!bindAccount" style=" margin-bottom: 10px;text-align: center ;float:left;">
<div v-if="!bindAccount" style=" margin-bottom: 10px;text-align: center "> <span style="color:#fff;margin-right:10px;">第三方登录</span>
<!-- <span style="color:#fff;margin-right:10px; float: left">快速登录</span>-->
<el-button type="success" circle title="微信登录" size="small" @click="authLogin"> <el-button type="success" circle title="微信登录" size="small" @click="authLogin">
<svg-icon icon-class="wechat" /> <svg-icon icon-class="wechat" />
</el-button> </el-button>
<el-button type="danger" circle title="QQ登录" size="small" @click="qqLogin"> <el-button type="danger" circle title="QQ登录" size="small" @click="qqLogin">
<svg-icon icon-class="qq" /> <svg-icon icon-class="qq" />
</el-button> </el-button>
<el-button type="primary" circle title="支付宝登录" size="small" @click="authLogin"> <el-button type="primary" circle title="支付宝登录" size="small" @click="authLogin">
<svg-icon icon-class="zhifubao" /> <svg-icon icon-class="zhifubao" />
</el-button> </el-button>
</div> </div>
<router-link style="float:left;color:#fff;font-size:16px;" <router-link style="float:right;color:#333;font-size:16px;" :to='{path:"/login",query: this.$route.query }'>已有账户登录 >>
:to='{path:"/login",query: this.$route.query }'>使用已有账户登录 >>
</router-link> </router-link>
<div style="float: right">
<a style="margin-right:20px;" target="_blank" href="http://wumei.live">返回官网</a>
</div>
</div> </div>
</el-form-item> </el-form-item>
</el-form> </el-form>
@@ -91,15 +74,16 @@
</div> </div>
<!-- 底部 --> <!-- 底部 -->
<div class="el-register-footer"> <div class="el-register-footer">
<span>Copyright © 2018-2021 <a target="_blank" <span>Copyright © 2018-2021 <a target="_blank" href="http://wumei.live">wumei smart</a> All Rights Reserved.</span>
href="http://wumei.live">wumei smart</a> All Rights Reserved.</span>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { import {
getCodeImg, checkBindId, bindRegister getCodeImg,
checkBindId,
bindRegister
} from "@/api/login"; } from "@/api/login";
import { import {
register register
@@ -269,8 +253,7 @@ export default {
type: 'success' type: 'success'
}).then(() => { }).then(() => {
this.$router.push("/login"); this.$router.push("/login");
}).catch(() => { }).catch(() => {});
});
} }
} }
}; };