Skip to content

C
comment_app
Commit 0321957c by 莫晓莉
Options

mxl登录

parent 77807522
Showing with 514 additions and 421 deletions
pages.json
......@@ -5,12 +5,14 @@
"style": {
"navigationBarTitleText": "登录模板"
}
}, {
},
{
"path": "pages/login/login",
"style": {
"navigationBarTitleText": "登录"
}
}, {
},
{
"path": "pages/reg/reg",
"style": {
"navigationBarTitleText": "注册"
......
pages/login/login.vue
......@@ -34,16 +34,16 @@
<view class="login-area">
<view class="login-item bt">
<image class="login-icon" src="../../static/login/mine.png"></image>
<input class="login-item-input" placeholder="请输入手机号" />
<input type="number" class="login-item-input" placeholder="请输入手机号" v-model="loginForm.phone" />
</view>
<view class="login-item bt">
<image class="login-icon" src="../../static/login/password.png"></image>
<input class="login-item-input" placeholder="请输入验证码" />
<view class="code-btn" style="">获取验证码</view>
<input v-model="loginForm.code" class="login-item-input" placeholder="请输入验证码" />
<view class="code-btn" @click="codeInfo.clickType ? getCode() : ''">{{codeInfo.msg}}</view>
</view>
<view class="login-item bt">
<image class="login-icon" src="../../static/login/code.png"></image>
<input class="login-item-input" placeholder="请输入密码" />
<input class="login-item-input" placeholder="请输入密码" v-model="loginForm.password"/>
</view>
</view>
<!-- 登录新样式end -->
......@@ -51,12 +51,12 @@
<view class="btn-row">
<button type="primary" class="primary btn-login" @tap="bindLogin">登录</button>
<button type="primary" class="primary btn-login" @click="login">登录</button>
</view>
<view class="action-row">
<view class="action-row" style="text-align: center;color:red;">
<navigator url="../reg/reg">注册账号</navigator>
</view>
......@@ -77,7 +77,12 @@
mapState,
mapMutations
} from 'vuex'
import mInput from '../../components/m-input.vue'
import mInput from '../../components/m-input.vue';
import {
login,
register,
sendCode,
} from "@/api/login"
export default {
components: {
......@@ -85,287 +90,356 @@
},
data() {
return {
loginType: 0,
loginTypeList: ['密码登录', '免密登录'],
mobile: '',
code: '',
providerList: [],
hasProvider: false,
username: '',
password: '',
positionTop: 0,
isDevtools: false,
codeDuration: 0
loginForm:{},
codeInfo: {
clickType: true,
time: 59,
msg: '获取验证码'
}
// loginType: 0,
// loginTypeList: ['密码登录', '免密登录'],
// mobile: '',
// code: '',
// providerList: [],
// hasProvider: false,
// username: '',
// password: '',
// positionTop: 0,
// isDevtools: false,
// codeDuration: 0
}
},
computed: mapState(['forcedLogin']),
// computed: mapState(['forcedLogin']),
methods: {
...mapMutations(['login']),
initProvider() {
const filters = ['weixin', 'qq', 'sinaweibo'];
uni.getProvider({
service: 'oauth',
success: (res) => {
if (res.provider && res.provider.length) {
for (let i = 0; i < res.provider.length; i++) {
if (~filters.indexOf(res.provider[i])) {
this.providerList.push({
value: res.provider[i],
image: '../../static/img/' + res.provider[i] + '.png'
});
}
}
this.hasProvider = true;
}
},
fail: (err) => {
console.error('获取服务供应商失败：' + JSON.stringify(err));
//获取验证码
getCode() {
sendCode({
phone: this.loginForm.phone
}).then(res => {
if (res.code == 200) {
uni.showToast({
icon: 'success',
title: '获取成功',
success: () => {
this.codeTimeOut()
}
});
},
initPosition() {
/**
* 使用 absolute 定位，并且设置 bottom 值进行定位。软键盘弹出时，底部会因为窗口变化而被顶上来。
* 反向使用 top 进行定位，可以避免此问题。
*/
this.positionTop = uni.getSystemInfoSync().windowHeight - 100;
},
sendSmsCode() {
if(this.codeDuration) {
uni.showModal({
content: `请在${this.codeDuration}秒后重试`,
showCancel: false
})
}
if (!/^1\d{10}$/.test(this.mobile)) {
uni.showModal({
content: '手机号码填写错误',
showCancel: false
})
return
}
uniCloud.callFunction({
name: 'user-center',
data: {
action: 'sendSmsCode',
params: {
mobile: this.mobile
}
},
success: (e) => {
if (e.result.code == 0) {
uni.showModal({
content: '验证码发送成功，请注意查收',
showCancel: false
})
this.codeDuration = 60
this.codeInterVal = setInterval(() => {
this.codeDuration--
if (this.codeDuration === 0) {
if (this.codeInterVal) {
clearInterval(this.codeInterVal)
this.codeInterVal = null
//验证码倒计时
codeTimeOut() {
this.codeInfo.clickType = false
let codeTime = setInterval(() => {
this.codeInfo.time--;
this.codeInfo.msg = `${this.codeInfo.time}s后再次获取`
if (this.codeInfo.time == 0) {
clearInterval(codeTime)
this.codeInfo = {
msg: '再次获取验证码',
time: 59,
clickType: true
}
}
}, 1000)
} else {
uni.showModal({
content: '验证码发送失败：' + e.result.msg,
showCancel: false
})
}
},
fail(e) {
uni.showModal({
content: '验证码发送失败',
showCancel: false
})
}
})
},
loginByPwd() {
/**
* 客户端对账号信息进行一些必要的校验。
* 实际开发中，根据业务需要进行处理，这里仅做示例。
*/
if (this.username.length < 3) {
uni.showToast({
icon: 'none',
title: '账号最短为 3 个字符'
});
return;
}
if (this.password.length < 6) {
//登录
login() {
login(this.loginForm).then(res => {
if (res.code == 200) {
var user={},token='';
user.name=res.data.name;
user.phone=res.data.phone;
user.phone=res.data.userId;
token=res.data.token;
uni.showToast({
icon: 'none',
title: '密码最短为 6 个字符'
icon: 'success',
title: '登录成功',
success: () => {
uni.navigateTo({
url: '../user/user?token='+token+"&user="+user,
});
return;
}
const data = {
username: this.username,
password: this.password
};
let _self = this;
uniCloud.callFunction({
name: 'user-center',
data: {
action: 'login',
params: data
},
success: (e) => {
console.log('login success', e);
if (e.result.code == 0) {
uni.setStorageSync('uniIdToken', e.result.token)
uni.setStorageSync('username', e.result.username)
uni.setStorageSync('login_type', 'online')
_self.toMain(_self.username);
} else {
uni.showModal({
content: e.result.msg,
showCancel: false
})
console.log('登录失败', e);
}
},
fail(e) {
uni.showModal({
content: JSON.stringify(e),
showCancel: false
})
}
})
},
loginBySms() {
if (!/^1\d{10}$/.test(this.mobile)) {
uni.showModal({
content: '手机号码填写错误',
showCancel: false
})
return
}
if (!/^\d{6}$/.test(this.code)) {
uni.showModal({
title: '验证码为6位纯数字',
showCancel: false
});
return;
}
let _self = this;
uniCloud.callFunction({
name: 'user-center',
data: {
action: 'loginBySms',
params: {
mobile: this.mobile,
code: this.code
}
},
success: (e) => {
console.log('login success', e);
if (e.result.code == 0) {
const username = e.result.username || '新用户'
uni.setStorageSync('uniIdToken', e.result.token)
uni.setStorageSync('username', username)
uni.setStorageSync('login_type', 'online')
_self.toMain(username);
} else {
uni.showModal({
content: e.result.msg,
showCancel: false
})
console.log('登录失败', e);
}
}else{
uni.showToast({
icon: 'success',
title: '您还未注册用户',
},
fail(e) {
uni.showModal({
content: JSON.stringify(e),
showCancel: false
})
}
})
},
bindLogin() {
switch (this.loginType) {
case 0:
this.loginByPwd()
break;
case 1:
this.loginBySms()
break;
default:
break;
}
},
oauth(value) {
console.log('三方登录只演示登录api能力，暂未关联云端数据');
uni.login({
provider: value,
success: (res) => {
uni.getUserInfo({
provider: value,
success: (infoRes) => {
/**
* 实际开发中，获取用户信息后，需要将信息上报至服务端。
* 服务端可以用 userInfo.openId 作为用户的唯一标识新增或绑定用户信息。
*/
this.loginLocal(infoRes.userInfo.nickName);
},
fail() {
uni.showToast({
icon: 'none',
title: '登陆失败'
});
}
});
},
fail: (err) => {
console.error('授权登录失败：' + JSON.stringify(err));
}
});
},
getUserInfo({
detail
}) {
console.log('三方登录只演示登录api能力，暂未关联云端数据');
if (detail.userInfo) {
this.loginLocal(detail.userInfo.nickName);
} else {
uni.showToast({
icon: 'none',
title: '登陆失败'
});
}
},
loginLocal(nickName) {
uni.setStorageSync('login_type', 'local')
uni.setStorageSync('username', nickName)
this.toMain(nickName);
},
toMain(userName) {
this.login(userName);
/**
* 强制登录时使用reLaunch方式跳转过来
* 返回首页也使用reLaunch方式
*/
if (this.forcedLogin) {
uni.reLaunch({
url: '../main/main',
});
} else {
uni.navigateBack();
}
}
// ...mapMutations(['login']),
// initProvider() {
// const filters = ['weixin', 'qq', 'sinaweibo'];
// uni.getProvider({
// service: 'oauth',
// success: (res) => {
// if (res.provider && res.provider.length) {
// for (let i = 0; i < res.provider.length; i++) {
// if (~filters.indexOf(res.provider[i])) {
// this.providerList.push({
// value: res.provider[i],
// image: '../../static/img/' + res.provider[i] + '.png'
// });
// }
// }
// this.hasProvider = true;
// }
// },
// fail: (err) => {
// console.error('获取服务供应商失败：' + JSON.stringify(err));
// }
// });
// },
// initPosition() {
// /**
// * 使用 absolute 定位，并且设置 bottom 值进行定位。软键盘弹出时，底部会因为窗口变化而被顶上来。
// * 反向使用 top 进行定位，可以避免此问题。
// */
// this.positionTop = uni.getSystemInfoSync().windowHeight - 100;
// },
// sendSmsCode() {
// if(this.codeDuration) {
// uni.showModal({
// content: `请在${this.codeDuration}秒后重试`,
// showCancel: false
// })
// }
// if (!/^1\d{10}$/.test(this.mobile)) {
// uni.showModal({
// content: '手机号码填写错误',
// showCancel: false
// })
// return
// }
// uniCloud.callFunction({
// name: 'user-center',
// data: {
// action: 'sendSmsCode',
// params: {
// mobile: this.mobile
// }
// },
// success: (e) => {
// if (e.result.code == 0) {
// uni.showModal({
// content: '验证码发送成功，请注意查收',
// showCancel: false
// })
// this.codeDuration = 60
// this.codeInterVal = setInterval(() => {
// this.codeDuration--
// if (this.codeDuration === 0) {
// if (this.codeInterVal) {
// clearInterval(this.codeInterVal)
// this.codeInterVal = null
// }
// }
// }, 1000)
// } else {
// uni.showModal({
// content: '验证码发送失败：' + e.result.msg,
// showCancel: false
// })
// }
// },
// fail(e) {
// uni.showModal({
// content: '验证码发送失败',
// showCancel: false
// })
// }
// })
// },
// loginByPwd() {
// /**
// * 客户端对账号信息进行一些必要的校验。
// * 实际开发中，根据业务需要进行处理，这里仅做示例。
// */
// if (this.username.length < 3) {
// uni.showToast({
// icon: 'none',
// title: '账号最短为 3 个字符'
// });
// return;
// }
// if (this.password.length < 6) {
// uni.showToast({
// icon: 'none',
// title: '密码最短为 6 个字符'
// });
// return;
// }
// const data = {
// username: this.username,
// password: this.password
// };
// let _self = this;
// uniCloud.callFunction({
// name: 'user-center',
// data: {
// action: 'login',
// params: data
// },
// success: (e) => {
// console.log('login success', e);
// if (e.result.code == 0) {
// uni.setStorageSync('uniIdToken', e.result.token)
// uni.setStorageSync('username', e.result.username)
// uni.setStorageSync('login_type', 'online')
// _self.toMain(_self.username);
// } else {
// uni.showModal({
// content: e.result.msg,
// showCancel: false
// })
// console.log('登录失败', e);
// }
// },
// fail(e) {
// uni.showModal({
// content: JSON.stringify(e),
// showCancel: false
// })
// }
// })
// },
// loginBySms() {
// if (!/^1\d{10}$/.test(this.mobile)) {
// uni.showModal({
// content: '手机号码填写错误',
// showCancel: false
// })
// return
// }
// if (!/^\d{6}$/.test(this.code)) {
// uni.showModal({
// title: '验证码为6位纯数字',
// showCancel: false
// });
// return;
// }
// let _self = this;
// uniCloud.callFunction({
// name: 'user-center',
// data: {
// action: 'loginBySms',
// params: {
// mobile: this.mobile,
// code: this.code
// }
// },
// success: (e) => {
// console.log('login success', e);
// if (e.result.code == 0) {
// const username = e.result.username || '新用户'
// uni.setStorageSync('uniIdToken', e.result.token)
// uni.setStorageSync('username', username)
// uni.setStorageSync('login_type', 'online')
// _self.toMain(username);
// } else {
// uni.showModal({
// content: e.result.msg,
// showCancel: false
// })
// console.log('登录失败', e);
// }
// },
// fail(e) {
// uni.showModal({
// content: JSON.stringify(e),
// showCancel: false
// })
// }
// })
// },
// bindLogin() {
// switch (this.loginType) {
// case 0:
// this.loginByPwd()
// break;
// case 1:
// this.loginBySms()
// break;
// default:
// break;
// }
// },
// oauth(value) {
// console.log('三方登录只演示登录api能力，暂未关联云端数据');
// uni.login({
// provider: value,
// success: (res) => {
// uni.getUserInfo({
// provider: value,
// success: (infoRes) => {
// /**
// * 实际开发中，获取用户信息后，需要将信息上报至服务端。
// * 服务端可以用 userInfo.openId 作为用户的唯一标识新增或绑定用户信息。
// */
// this.loginLocal(infoRes.userInfo.nickName);
// },
// fail() {
// uni.showToast({
// icon: 'none',
// title: '登陆失败'
// });
// }
// });
// },
// fail: (err) => {
// console.error('授权登录失败：' + JSON.stringify(err));
// }
// });
// },
// getUserInfo({
// detail
// }) {
// console.log('三方登录只演示登录api能力，暂未关联云端数据');
// if (detail.userInfo) {
// this.loginLocal(detail.userInfo.nickName);
// } else {
// uni.showToast({
// icon: 'none',
// title: '登陆失败'
// });
// }
// },
// loginLocal(nickName) {
// uni.setStorageSync('login_type', 'local')
// uni.setStorageSync('username', nickName)
// this.toMain(nickName);
// },
// toMain(userName) {
// this.login(userName);
// /**
// * 强制登录时使用reLaunch方式跳转过来
// * 返回首页也使用reLaunch方式
// */
// if (this.forcedLogin) {
// uni.reLaunch({
// url: '../main/main',
// });
// } else {
// uni.navigateBack();
// }
// }
},
onReady() {
this.initPosition();
......@@ -379,7 +453,7 @@
<style>
@import url("login.css");
.login-type {
/* .login-type {
display: flex;
justify-content: center;
}
......@@ -445,5 +519,5 @@
width: 100%;
height: 100%;
opacity: 0;
}
} */
</style>
pages/main/main.vue
......@@ -27,85 +27,119 @@
mapMutations
} from 'vuex'
export default {
computed: mapState(['forcedLogin', 'hasLogin', 'userName']),
onLoad() {
const loginType = uni.getStorageSync('login_type')
if (loginType === 'local') {
this.login(uni.getStorageSync('username'))
return
}
let uniIdToken = uni.getStorageSync('uniIdToken')
if (uniIdToken) {
this.login(uni.getStorageSync('username'))
uniCloud.callFunction({
name: 'user-center',
data: {
action: 'checkToken',
},
success: (e) => {
console.log('checkToken success', e);
import {
getUserByToken
} from "@/api/login"
export default {
onLoad: function() {
if (e.result.code > 0) {
//token过期或token不合法，重新登录
if (this.forcedLogin) {
uni.reLaunch({
url: '../login/login'
});
} else {
uni.navigateTo({
url: '../login/login'
});
}
}
},
fail(e) {
uni.showModal({
content: JSON.stringify(e),
showCancel: false
})
}
const token=uni.getStorageSync('token')
console.log(token);
if(token){
uni.switchTab({
url:'/pages/login/login'
})
} else {
this.guideToLogin()
}
},
methods: {
...mapMutations(['login']),
guideToLogin() {
uni.showModal({
title: '未登录',
content: '您未登录，需要登录后才能继续',
/**
* 如果需要强制登录，不显示取消按钮
*/
showCancel: !this.forcedLogin,
success: (res) => {
if (res.confirm) {
/**
* 如果需要强制登录，使用reLaunch方式
*/
if (this.forcedLogin) {
uni.reLaunch({
url: '../login/login'
});
} else {
uni.navigateTo({
url: '../login/login'
});
}
}
}
});
}
// getUserByToken().then(res=>{
// if (res.code == 200) {
// uni.setStorageSync('token', res.data.data);
// uni.switchTab({
// url:'/pages/login/login'
// })
// }else{
// uni.switchTab({
// url:'/pages/reg/reg'
// })
// }
// })
// const token=uni.getStorageSync('token')
// if(token){
// uni.switchTab({
// url:'/pages/index/index'
// })
// }
}
// computed: mapState(['forcedLogin', 'hasLogin', 'userName']),
// onLoad() {
// const loginType = uni.getStorageSync('login_type')
// if (loginType === 'local') {
// this.login(uni.getStorageSync('username'))
// return
// }
// let uniIdToken = uni.getStorageSync('uniIdToken')
// if (uniIdToken) {
// this.login(uni.getStorageSync('username'))
// uniCloud.callFunction({
// name: 'user-center',
// data: {
// action: 'checkToken',
// },
// success: (e) => {
// console.log('checkToken success', e);
// if (e.result.code > 0) {
// //token过期或token不合法，重新登录
// if (this.forcedLogin) {
// uni.reLaunch({
// url: '../login/login'
// });
// } else {
// uni.navigateTo({
// url: '../login/login'
// });
// }
// }
// },
// fail(e) {
// uni.showModal({
// content: JSON.stringify(e),
// showCancel: false
// })
// }
// })
// } else {
// this.guideToLogin()
// }
// },
// methods: {
// ...mapMutations(['login']),
// guideToLogin() {
// uni.showModal({
// title: '未登录',
// content: '您未登录，需要登录后才能继续',
// /**
// * 如果需要强制登录，不显示取消按钮
// */
// showCancel: !this.forcedLogin,
// success: (res) => {
// if (res.confirm) {
// /**
// * 如果需要强制登录，使用reLaunch方式
// */
// if (this.forcedLogin) {
// uni.reLaunch({
// url: '../login/login'
// });
// } else {
// uni.navigateTo({
// url: '../login/login'
// });
// }
// }
// }
// });
// }
// }
}
</script>
<style>
.hello {
/* .hello {
display: flex;
flex: 1;
flex-direction: column;
......@@ -124,5 +158,5 @@
.ul>view {
line-height: 25px;
}
} */
</style>
pages/reg/reg.vue
<template>
<view class="content">
<!-- <view class="input-group">
<view class="input-row border">
<text class="title">账号：</text>
<m-input type="text" focus clearable v-model="username" placeholder="请输入账号"></m-input>
</view>
<view class="input-row border">
<text class="title">密码：</text>
<m-input type="password" displayable v-model="password" placeholder="请输入密码"></m-input>
</view>
<view class="input-row">
<text class="title">确认密码：</text>
<m-input type="password" displayable v-model="confirmPassword" placeholder="请确认密码"></m-input>
</view>
</view> -->
<!-- 登录新样式start -->
<view style="text-align: center;color:#CA0000;font-size:45upx;padding:50upx;">
<!-- <image class="head-icon" style="" src="../../static/login/personal.png"></image> -->
欢迎注册！
</view>
<view class="login-area">
<view class="login-item">
<image class="login-icon" src="../../static/login/mine.png"></image>
<input class="login-item-input" placeholder="请输入姓名" v-model="addForm.name" />
......@@ -49,7 +32,7 @@
<view class="login-item mt25">
<image class="login-icon" src="../../static/login/code.png"></image>
<input class="login-item-input" placeholder="请输入手机号码" v-model="addForm.phone" />
<input name="phone" type="number" class="login-item-input" placeholder="请输入手机号码" v-model="addForm.phone" />
<view class="code-btn" style="" @click="codeInfo.clickType ? getCode() : ''">{{codeInfo.msg}}</view>
</view>
<view class="login-item mt25">
......@@ -177,70 +160,70 @@
})
},
register() {
/**
* 客户端对账号信息进行一些必要的校验。
* 实际开发中，根据业务需要进行处理，这里仅做示例。
*/
if (this.username.length < 3) {
uni.showToast({
icon: 'none',
title: '账号最短为 3 个字符'
});
return;
}
if (this.password.length < 6) {
uni.showToast({
icon: 'none',
title: '密码最短为 6 个字符'
});
return;
}
if (this.password !== this.confirmPassword) {
uni.showToast({
icon: 'none',
title: '两次密码输入不一致'
});
return;
}
const data = {
username: this.username,
password: this.password
}
uniCloud.callFunction({
name: 'user-center',
data: {
action: 'register',
params: data
},
success(e) {
console.log("注册成功", e);
if (e.result.code === 0) {
uni.showToast({
title: '注册成功'
});
uni.setStorageSync('uniIdToken', e.result.token)
uni.setStorageSync('username', e.result.username)
uni.reLaunch({
url: '../main/main',
});
} else {
uni.showModal({
content: JSON.stringify(e.result),
showCancel: false
})
}
},
fail(e) {
uni.showModal({
content: JSON.stringify(e),
showCancel: false
})
}
})
}
// register() {
// /**
// * 客户端对账号信息进行一些必要的校验。
// * 实际开发中，根据业务需要进行处理，这里仅做示例。
// */
// if (this.username.length < 3) {
// uni.showToast({
// icon: 'none',
// title: '账号最短为 3 个字符'
// });
// return;
// }
// if (this.password.length < 6) {
// uni.showToast({
// icon: 'none',
// title: '密码最短为 6 个字符'
// });
// return;
// }
// if (this.password !== this.confirmPassword) {
// uni.showToast({
// icon: 'none',
// title: '两次密码输入不一致'
// });
// return;
// }
// const data = {
// username: this.username,
// password: this.password
// }
// uniCloud.callFunction({
// name: 'user-center',
// data: {
// action: 'register',
// params: data
// },
// success(e) {
// console.log("注册成功", e);
// if (e.result.code === 0) {
// uni.showToast({
// title: '注册成功'
// });
// uni.setStorageSync('uniIdToken', e.result.token)
// uni.setStorageSync('username', e.result.username)
// uni.reLaunch({
// url: '../main/main',
// });
// } else {
// uni.showModal({
// content: JSON.stringify(e.result),
// showCancel: false
// })
// }
// },
// fail(e) {
// uni.showModal({
// content: JSON.stringify(e),
// showCancel: false
// })
// }
// })
// }
}
}
</script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment