手机登录-前端代码

• 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 },

推荐阅读

• 

  有哪些专业的笔记本电脑检测软件？
• 

  韩妙面膜有荧光剂吗
• 

  新人如何选择第一份工作
• 

  无线投屏怎么连接电视 无线投屏如何连接电视
• 

  网络视频用户分析,2022年中国网络视频用户规模
• 

  荔枝吃多了会流鼻血吗
• 

  三国志哪个版本最有可玩性？
• 

  鸡蛋会引起胀气吗
• 

  天凉后老年人注意背部保暖
• 

  孩子性早熟有哪些表现 五岁孩子性早熟有哪些表现
• 

  肾虚吃什么？？
• 

  我的世界怎么换材质包手机版老版本 我的世界国际版如何更改材质
• 

  苹果11跟苹果Xr区别是什么苹果11跟苹果Xr区别是啥
• 

  jquery插件（三）（Colorbox–内容播放插件）
• 

  圆通快递费怎么算 圆通快递运费是多少
• 

  葡萄和虾能一起吃吗
• 

  15秒风景视频无水印 最美的图片和风景 大自然
• 

  关于民族团结的句子
• 

  索尼爱立信st25i手机，索尼爱立信st21i
• 

  冰箱变温区是什么？如何正确使用和维护？