登录和注册(二)注册成功提示页——邮箱注册和手机注册 & 定时setInterval和clearInterval & router.push & 原生请求写法http.post & public引图片
效果
1-手机注册成功
2-邮箱注册成功
代码
手机注册成功
src\views\myCenter\accountManagement\loginRegister\phoneSuccess.vue
<template>
<div>
<div class="phoneSuccess-div">
<div class="phoneSuccess-image">
<img src="img/logo.png"/>
</div>
</div>
<div id="phoneSuccess-content">
<div class="phoneSuccess-contents">
<div><img src="img/windowPic.png" style="margin-top: 10px;"></div>
<p>注册成功,{{dao}}s秒后跳转</p>
</div>
<div class="phoneSuccess-bottom">
<p @click="homes()">直接登录</p>
<!--<p @click="wanshangs()">2.继续完善基本信息!</p>-->
</div>
</div>
<div class="phoneSuccess-background-image">
</div>
</div>
</template>
<script>
export default{
components: {
},
data(){
return{
dao:'',
num:''
}
},
methods:{
homes(){
this.num=-1;
this.settime(0);
this.$router.push({path:'/login'})
},
// wanshangs(){
// this.num=-1;
// this.settime(0);
// this.$router.push('/myRequirement/improvingbasicinformation')
// },
settime(countdown) {
var that = this;
var stop = setInterval(function() {
if (countdown == 0) {
if(that.num !=-1){
that.$router.push("/login");
}
clearInterval(stop);
} else {
that.dao = countdown;
countdown--;
}
},1000)
},
},
created(){
this.settime(5)
}
}
</script>
<style>
.phoneSuccess-bottom p{
margin: 0 auto;
margin-top: 93px;
border-radius: 5px 5px 5px 5px ;
}
.phoneSuccess-bottom p:nth-of-type(1){
width: 200px;
height: 50px;
line-height: 50px;
background: #009688;
text-align: center;
color: #fff;
font-weight: 900;
cursor: pointer;
}
.phoneSuccess-bottom p:nth-of-type(2){
width: 200px;
height: 50px;
line-height: 50px;
background: #009688;
text-align: center;
margin-top: 30px;
color: #fff;
font-weight: 900;
cursor: pointer;
}
#phoneSuccess-content .phoneSuccess-contents{
border-bottom: 1px solid #009688;
padding-bottom: 60px;
text-align: center;
height: 60px;
line-height: 60px;
}
#phoneSuccess-content .phoneSuccess-contents p{
font-size: 20px;
font-weight: 900;
margin-top: -30px;
}
#phoneSuccess-content{
width: 411px;
height: 390px;
background: #fff;
position: absolute;
left: 490px;
top: 200px;
border-radius: 5px 5px 5px 5px;
}
.phoneSuccess-background-image {
width: 100%;
height: 600px;
background: url("../../../../../public/img/login.png") no-repeat;
background-size: 100% 100%;
}
.phoneSuccess-div {
width: 1200px;
height: 92px;
margin: 0 auto;
}
.phoneSuccess-image {
float: left;
width: 344px;
height: 65px;
margin-top: 1%;
}
.phoneSuccess-image img{
height: 100%;
}
</style>
邮箱注册成功
<template>
<div>
<div class="EmailSuccess-div">
<div class="EmailSuccess-image">
<img src="img/logo.png"/>
</div>
</div>
<div id="EmailSuccess-content">
<div class="EmailSuccess-contents">
<div><img src="img/windowPic.png" style="margin-top: 10px"></div>
<p style="margin-top: -5px;">恭喜您,注册成功!</p>
</div>
<div class="EmailSuccess-bottom">
<p>我们已向您的邮箱</p>
<p>{{email}}</p>
<p>发送了一封激活邮件,请点击邮箱中的链接完成注册!</p>
<!--<p @click="jin()" :class="collect ? 'Collect':'activeCollect'">立即进入邮箱</p>-->
<!--<input type="button" id="inpBtn" @click="jin()" :disabled="isDisabled" :class="isDisabled ? 'activeCollect':'Collect'" value="请去邮箱验证"/>-->
<p class="EmailSuccess-bottom-p" @click="login" >已激活,直接登录</p>
</div>
<div class="EmailSuccess-footer">
<p>没有收到确认邮件怎么办?</p>
<p>1.请确认是否填写正确的邮箱地址</p>
<p>2.看看是否在邮件的回收站中、垃圾邮件中</p>
<p>3.重新发送 <span style="cursor: pointer;">点击重新发送</span></p>
</div>
</div>
<div class="EmailSuccess-background-image">
</div>
</div>
</template>
<script>
export default{
components: {
},
data(){
return{
isDisabled:false,
email:this.$route.params.email,
}
},
methods:{
jin(){
var that = this
this.$http.post(process.env.VUE_APP_API_HOST+ '/user/obtainEmailDomain',{
'email':this.email
}).then(function (res) {
console.log(res)
if(res.data.result ==0){
// window.open(res.data.data.email,'_blank');
that.isDisabled = true;
}
})
},
login() {
this.$router.push("/login")
}
}
}
</script>
<style>
.EmailSuccess-bottom-p {
margin-left: 250px;
margin-top: 50px;
color: #009688;
cursor: pointer;
/*position: absolute;*/
/*right: 15px;*/
font-size: 15px;
/*top: 82px;*/
text-align: center;
width: 92%;
}
.Collect{
width: 380px;
height: 50px;
line-height: 50px;
background: #009688;
text-align: center;
margin-top: 35px;
color: #fff;
font-weight: 900;
cursor: pointer;
}
.activeCollect{
width: 380px;
height: 50px;
line-height: 50px;
background: #ccc !important;
text-align: center;
margin-top: 35px;
color: #fff !important;
font-weight: 900;
cursor: pointer;
}
.EmailSuccess-footer p{
font-size: 10px;
margin-left: 10px;
height: 19px;
}
.EmailSuccess-footer p:nth-of-type(4) span{
color: #009688;
}
.EmailSuccess-bottom{
padding-bottom: 35px;
position: relative;
}
.EmailSuccess-bottom p{
margin: 0 auto;
border-radius: 5px 5px 5px 5px ;
margin-top:15px;
height:20px;
}
.EmailSuccess-bottom p:nth-of-type(1){
font-weight: 500;
text-align: center;
margin-top: 15px;
}
.EmailSuccess-bottom p:nth-of-type(2){
font-weight: 500;
text-align: center;
color: #009688;
margin-top: 15px;
}
.EmailSuccess-bottom p:nth-of-type(3){
font-weight: 500;
text-align: center;
margin-top: 15px;
}
.EmailSuccess-bottom p:nth-of-type(4){
text-align: center;
margin-top: 25px;
}
.EmailSuccess-bottom input{
margin-top: 35px;
margin-left: 15px;
border-radius: 5px;
width: 380px;
height: 50px;
line-height: 50px;
background: #009688;
text-align: center;
color: #fff;
font-weight: 900;
cursor: pointer;
}
.EmailSuccess-footer{
color: #999999;
padding: 20px 10px 0px 10px;
}
#EmailSuccess-content .EmailSuccess-contents{
border-bottom: 1px solid #009688;
padding-bottom: 60px;
text-align: center;
height: 63px;
line-height: 40px;
}
#EmailSuccess-content .EmailSuccess-contents p{
font-size: 20px;
font-weight: 500;
}
#EmailSuccess-content{
width: 411px;
height: 437px;
background: #fff;
position: absolute;
left: 490px;
top: 200px;
border-radius: 5px 5px 5px 5px;
}
.EmailSuccess-background-image {
width: 100%;
height: 600px;
background: url("../../../../../public/img/login.png") no-repeat;
background-size: 100% 100%;
}
.EmailSuccess-div {
width: 1200px;
height: 92px;
margin: 0 auto;
}
.EmailSuccess-image {
float: left;
width: 344px;
height: 65px;
margin-top: 1%;
}
.EmailSuccess-image img{
height: 65px;
}
</style>
路由
src\router\index.ts
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
type NewRouteRecordRaw = RouteRecordRaw & {
redirect?: string
}
const routes: Array<RouteRecordRaw> = [
// 404页面
{
path: '/errorPage',
name: 'ErrorPage',
component: () => import('@/components/errorPage/404page.vue'),
},
// 401页面
{
path: '/401',
name: '401',
component: () => import('@/components/errorPage/401page.vue'),
},
/*****************************************首页********************************************/
//如需点击返回首页的路由跳转homePage
{
path: '/',
name: 'home',
redirect: '/homePage',
},
// 首页
{
path: '/homePage',
name: 'homePage',
component: () => import('@/views/homePage.vue')
},
// 未登录状况下修改密码
{
path: '/changPasswordP',
name: 'changPasswordP',
component: () => import('@/views/changPasswordP.vue')
},
// 提交反馈页面
{
path: '/faceback',
name: 'Faceback',
component: () => import('@/views/faceback/faceback.vue'),
},
// 登录
{
path: '/login',
name: 'Login',
component: () => import('@/views/myCenter/accountManagement/loginRegister/login.vue')
},
// // 内网轻量级登录
// {
// path: '/loginOutSide',
// name: 'loginOutSide',
// component: () => import('@/views/myCenter/accountManagement/loginRegister/loginOutSide')
// },
// 注册
{
path: '/register',
name: 'register',
component: () => import('@/views/myCenter/accountManagement/loginRegister/register.vue')
},
// // 邮箱找回
// {
// path: '/RememberPassword',
// name: 'RememberPassword',
// component: () => import('@/views/myCenter/accountManagement/loginRegister/RememberPassword')
// },
// // 手机号找回
// {
// path: '/PhonenumberPassword',
// name: 'PhonenumberPassword',
// component: () => import('@/views/myCenter/accountManagement/loginRegister/PhonenumberPassword')
// },
//手机注册成功
{
path: '/phoneSuccess',
name: 'phoneSuccess',
component: () => import('@/views/myCenter/accountManagement/loginRegister/phoneSuccess.vue')
},
// //邮箱注册成功
// {
// path: '/EmailSuccess',
// name: 'EmailSuccess',
// component: () => import('@/views/myCenter/accountManagement/loginRegister/EmailSuccess.vue')
// },
]
const router = createRouter({
history: createWebHashHistory(),
routes,
scrollBehavior(to, from, savedPosition) {
return { left: 0, top: 0 }
}
})
export default router