登录和注册（二）注册成功提示页——邮箱注册和手机注册 & 定时setInterval和clearInterval & router.push & 原生请求写法http.post & public引图片

登录和注册（二）注册成功提示页——邮箱注册和手机注册 & 定时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: #; 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 

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/rfx/10683.html