手机登录-前端代码


手机登录-前端代码

  • 1、创建api文件夹,创建/api/userInfo.js
  • 2、创建/api/msn.js
  • 3、安装cookie
  • 4、 添加登录组件
  • 5、头部显示登录状态
    • 5.1、获取登录信息
    • 5.2、登录页面控制
  • 6、登录全局事件
    • 6.1、修改myheader.vue组件
    • 6.1、预约挂号页面调整

1、创建api文件夹,创建/api/userInfo.js 手机登录-前端代码
文章图片

import request from '@/utils/request'const api_name = `/api/user`export default { login(userInfo) { return request({ url: `${api_name}/login`, method: `post`, data: userInfo }) } }

2、创建/api/msn.js 【手机登录-前端代码】手机登录-前端代码
文章图片

import request from '@/utils/request'const api_name = `/api/msn`export default { sendCode(mobile) { return request({ url: `${api_name}/send/${mobile}`, method: `get` }) } }

3、安装cookie 登录成功,我们要把用户信息记录在cookie里面
命令行执行:
npm install js-cookie
4、 添加登录组件 登录层是一个公共层,因此我们把它放在头部组件里面
修改layouts/myheader.vue文件
手机登录-前端代码
文章图片

class="title">{{ dialogAtrr.labelTips }} ="suffix" class="sendText v-link" v-if="dialogAtrr.second > 0">{{ dialogAtrr.second }}s ="suffix" class="sendText v-link highlight clickable selected" v-if="dialogAtrr.second == 0" @click="getCodeFun()">重新发送
{{ dialogAtrr.loginBtn }}
class="iconfont icon">
class="third-text"> 第三方账号登录
class="iconfont icon">
class="third-text"> 手机短信验证码登录
手机登录-前端代码
文章图片
class="iconfont icon">微信扫一扫关注
“快速预约挂号”
手机登录-前端代码
文章图片
扫一扫下载
“预约挂号”APP
xxxxxx官方指定平台
快速挂号 安全放心

说明:登录成功用户信息记录cookie
> import cookie from 'js-cookie' import Vue from 'vue'import userInfoApi from '@/api/userInfo' import smsApi from '@/api/msn' import hospitalApi from '@/api/hosp'const defaultDialogAtrr = { showLoginType: 'phone', // 控制手机登录与微信登录切换labelTips: '手机号码', // 输入框提示inputValue: '', // 输入框绑定对象 placeholder: '请输入您的手机号', // 输入框placeholder maxlength: 11, // 输入框长度控制loginBtn: '获取验证码', // 登录按钮或获取验证码按钮文本sending: true,// 是否可以发送验证码 second: -1,// 倒计时间second>0 : 显示倒计时 second=0 :重新发送 second=-1 :什么都不显示 clearSmsTime: null// 倒计时定时任务引用 关闭登录层清除定时任务 } export default { data() { return { userInfo: { phone: '', code: '', openid: '' },dialogUserFormVisible: false, // 弹出层相关属性 dialogAtrr:defaultDialogAtrr,name: '' // 用户登录显示的名称 } },created() { this.showInfo() }, methods: { // 绑定登录或获取验证码按钮 btnClick() { // 判断是获取验证码还是登录 if(this.dialogAtrr.loginBtn == '获取验证码') { this.userInfo.phone = this.dialogAtrr.inputValue// 获取验证码 this.getCodeFun() } else { // 登录 this.login() } },// 绑定登录,点击显示登录层 showLogin() { this.dialogUserFormVisible = true// 初始化登录层相关参数 this.dialogAtrr = { ...defaultDialogAtrr } },// 登录 login() { this.userInfo.code = this.dialogAtrr.inputValueif(this.dialogAtrr.loginBtn == '正在提交...') { this.$message.error('重复提交') return; } if (this.userInfo.code == '') { this.$message.error('验证码必须输入') return; } if (this.userInfo.code.length != 6) { this.$message.error('验证码格式不正确') return; } this.dialogAtrr.loginBtn = '正在提交...' userInfoApi.login(this.userInfo).then(response => { console.log(response.data) // 登录成功 设置cookie this.setCookies(response.data.name, response.data.token) }).catch(e => { this.dialogAtrr.loginBtn = '马上登录' }) },setCookies(name, token) { cookie.set('token', token, { domain: 'localhost' }) cookie.set('name', name, { domain: 'localhost' }) window.location.reload() },// 获取验证码 getCodeFun() { if (!(/^1[34578]\d{9}$/.test(this.userInfo.phone))) { this.$message.error('手机号码不正确') return; }// 初始化验证码相关属性 this.dialogAtrr.inputValuehttps://www.it610.com/article/= '' this.dialogAtrr.placeholder = '请输入验证码' this.dialogAtrr.maxlength = 6 this.dialogAtrr.loginBtn = '马上登录'// 控制重复发送 if (!this.dialogAtrr.sending) return; // 发送短信验证码 this.timeDown(); this.dialogAtrr.sending = false; smsApi.sendCode(this.userInfo.phone).then(response => { this.timeDown(); }).catch(e => { this.$message.error('发送失败,重新发送') // 发送失败,回到重新获取验证码界面 this.showLogin() }) },// 倒计时 timeDown() { if(this.clearSmsTime) { clearInterval(this.clearSmsTime); } this.dialogAtrr.second = 60; this.dialogAtrr.labelTips = '验证码已发送至' + this.userInfo.phone this.clearSmsTime = setInterval(() => { --this.dialogAtrr.second; if (this.dialogAtrr.second < 1) { clearInterval(this.clearSmsTime); this.dialogAtrr.sending = true; this.dialogAtrr.second = 0; } }, 1000); },// 关闭登录层 closeDialog() { if(this.clearSmsTime) { clearInterval(this.clearSmsTime); } },showInfo() { let token = cookie.get('token') if (token) { this.name = cookie.get('name') console.log(this.name) } },loginMenu(command) { if('/logout' == command) { cookie.set('name', '', {domain: 'localhost'}) cookie.set('token', '', {domain: 'localhost'})//跳转页面 window.location.href = 'https://www.it610.com/' } else { window.location.href = https://www.it610.com/article/command } },handleSelect(item) { window.location.href ='/hospital/' + item.hoscode },weixinLogin() { this.dialogAtrr.showLoginType = 'weixin' },phoneLogin() { this.dialogAtrr.showLoginType = 'phone' this.showLogin() } } }

5、头部显示登录状态 手机登录-前端代码
文章图片

5.1、获取登录信息
created() { this.showInfo() }, showInfo() { let token = cookie.get('token') if (token) { this.name = cookie.get('name') } },

5.2、登录页面控制
class="v-link clickable">帮助中心 -if="name == ''" class="v-link clickable" @click="showLogin()" id="loginDialog">登录/注册 class="el-dropdown-link"> {{ name }} 实名认证 挂号订单 就诊人管理 退出登录

说明:实名认证“command”的值为下拉列表的访问路径,即:实名认证的访问路径,后续会有对应的页面,目前我们将它处理好,方便后续使用
添加下拉列表事件处理:
loginMenu(command) { if('/logout' == command) { cookie.set('name', '', {domain: 'localhost'}) cookie.set('token', '', {domain: 'localhost'})//跳转页面 window.location.href = 'https://www.it610.com/' } else { window.location.href = https://www.it610.com/article/command } },

6、登录全局事件 目前登录层在myheader组件里面,登录按钮也在同一个组件里面,我们点击登录,调用showLogin()方法即可
目前的问题是,我们在预约挂号页面,选择科室去挂号时我们需要判断当前是否登录,如果登录可以进入下一个页面;如果没有登录需要显示登录层,那么这个问题怎么解决呢,我们不能直接调用头部登录方法,我们目前的组件是包含在nuxt里面的
问题总是能够解决的,其实很简单,我们可以注册一个全局登录事件,当需要登录层是,我们发送一个登录事件,头部监听登录事件,然后我们触发登录按钮的点击事件即可打开登录层,下面我们来试试。
6.1、修改myheader.vue组件 1、引入Vue
手机登录-前端代码
文章图片

import Vue from 'vue'

2、注册与监听事件
手机登录-前端代码
文章图片

mounted() { // 注册全局登录事件对象 window.loginEvent = new Vue(); // 监听登录事件 loginEvent.$on('loginDialogEvent', function () { document.getElementById("loginDialog").click(); }) // 触发事件,显示登录层:loginEvent.$emit('loginDialogEvent') }

6.1、预约挂号页面调整 修改/pages/hospital/_hoscode.vue组件
手机登录-前端代码
文章图片

1、引入cookie
手机登录-前端代码
文章图片

import cookie from 'js-cookie'

2、修改方法
手机登录-前端代码
文章图片

schedule(depcode) { // 登录判断 let token = cookie.get('token') if (!token) { loginEvent.$emit('loginDialogEvent') return } window.location.href = 'https://www.it610.com/hospital/schedule?hoscode=' + this.hospital.hoscode + "&depcode="+ depcode },

    推荐阅读