手机登录-前端代码
- 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()">重新发送
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
},
