clunt
/
dingdong-master
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

注册登录支持登录不同账户

This commit is contained in:
donqi 2022-08-10 23:01:52 +08:00
parent a038784d1d
commit 7ce564b1e8
5 changed files with 341 additions and 271 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
common/js/request.js
View File

@ -136,6 +136,28 @@ export default {
uni.setStorageSync('userProfile', userInfo); uni.setStorageSync('userProfile', userInfo);
return true; return true;
}, },
async getWxUserInfo() {
// 获取微信登录凭证
const wxLoginRes = await wx.login();
// 获取openid
const wxAuthRes = await uni.request({
url: '/wx/auth',
header: {
code: wxLoginRes.code
}
})
const openId = wxAuthRes[1].data.data.openid;
// 从服务端获取用户信息
let wxGetUserRes = await this.qryUserInfo(openId);
let userInfo = null;
if (wxGetUserRes.data) {
userInfo = {
...wxGetUserRes.data,
wxLoginCode: wxLoginRes.code
}
}
return userInfo;
},
async storageExistUser() { async storageExistUser() {
// 获取微信登录凭证 // 获取微信登录凭证
const wxLoginRes = await wx.login(); const wxLoginRes = await wx.login();
@ -191,12 +213,13 @@ export default {
}) })
return res[1].data; return res[1].data;
}, },
async qryUserInfo(openId) { async qryUserInfo(openId, phone) {
let res = await uni.request({ let res = await uni.request({
url: '/wx/getWorkerInfo', url: '/wx/getWorkerInfo',
method: 'POST', method: 'POST',
data: { data: {
openId: openId openId: openId,
phone: phone
} }
}) })
return res[1].data; return res[1].data;

2
pages/area-proxy/my-team.vue
View File

@ -121,7 +121,7 @@
}, },
async login() { async login() {
// 更新缓存中的userInfo // 更新缓存中的userInfo
await this.$request.storageExistUser(); // await this.$request.storageExistUser();
// 返回缓存中的userInfo // 返回缓存中的userInfo
return this.$request.getCurUserInfo(); return this.$request.getCurUserInfo();
}, },

19
pages/index/index-home.vue
View File

@ -169,20 +169,27 @@
methods: { methods: {
async authLogin() { async authLogin() {
// 更新缓存中的userInfo // 更新缓存中的userInfo
let res = await this.$request.storageExistUser(); // let res = await this.$request.storageExistUser();
// 获取缓存中的userInfo // 获取缓存中的userInfo
let curUserInfo = this.$request.getCurUserInfo(); let curUserInfo = this.$request.getCurUserInfo();
console.log(curUserInfo)
// 校验提示登录 // 校验提示登录
if (!curUserInfo || !curUserInfo.openId) { // if (!curUserInfo || !curUserInfo.openId) {
this.$refs.vertifyLogin.showModal(); // this.$refs.vertifyLogin.showModal();
// return false;
// } else {
// this.$refs.vertifyLogin.hideModal();
// }
if (!curUserInfo) {
uni.reLaunch({
url: '/pages/login/login'
})
return false; return false;
} else {
this.$refs.vertifyLogin.hideModal();
} }
// 校验是否注册过 // 校验是否注册过
if (!curUserInfo.phone) { if (!curUserInfo.phone) {
uni.reLaunch({ uni.reLaunch({
url: '/pages/login/login?operType=1' url: '/pages/login/login'
}) })
return false; return false;
} }

19
pages/index/index.vue
View File

@ -79,20 +79,27 @@
}, },
async authLogin() { async authLogin() {
// 更新缓存中的userInfo // 更新缓存中的userInfo
let res = await this.$request.storageExistUser(); // let res = await this.$request.storageExistUser();
// 获取缓存中的userInfo // 获取缓存中的userInfo
let curUserInfo = this.$request.getCurUserInfo(); let curUserInfo = this.$request.getCurUserInfo();
console.log(curUserInfo)
// 校验提示登录 // 校验提示登录
if (!curUserInfo || !curUserInfo.openId) { // if (!curUserInfo || !curUserInfo.openId) {
this.$refs.vertifyLogin.showModal(); // this.$refs.vertifyLogin.showModal();
// return false;
// } else {
// this.$refs.vertifyLogin.hideModal();
// }
if (!curUserInfo) {
uni.reLaunch({
url: '/pages/login/login'
})
return false; return false;
} else {
this.$refs.vertifyLogin.hideModal();
} }
// 校验是否注册过 // 校验是否注册过
if (!curUserInfo.phone) { if (!curUserInfo.phone) {
uni.reLaunch({ uni.reLaunch({
url: '/pages/login/login?operType=1' url: '/pages/login/login'
}) })
return false; return false;
} }

545
pages/login/login.vue
View File

@ -1,75 +1,84 @@
<template> <template>
<view class="bg-blue light" style="height: 100vh; width: 100%;"> <view>
<view class="bg-blue light login-top-bg text-center"> <image class="bg-img-container" src="http://gqz.opsoul.com/sys/login-bg-business.jpg" mode="aspectFill"></image>
<view class="cu-avatar round login-avatar" <view class="bg-white login-container padding-lr-lg padding-tb-xl">
:style="'background-image:url(' + curUserInfo.workerLogoUrl + ');'"> <view v-if="operType === 0">
<!-- 登录内容 -->
<view class="margin-tb-xl">
<view class="cu-form-group">
<view class="text-xxl margin-right"><text class="cuIcon-people"></text></view>
<input class="radius-input" type="number" name="phone" v-model="formData.phone"
placeholder="请输入帐号(手机号)"></input>
</view>
<view class="cu-form-group margin-top-lg">
<view class="text-xxl margin-right"><text class="cuIcon-unlock"></text></view>
<input class="radius-input" password name="password" v-model="formData.password"
placeholder="请输入密码"></input>
</view>
</view>
<view class="margin-bottom-xl">
<view class="cu-btn bg-blue radius long-btn shadow-blur main-btn text-lg" @click="loginByPwd">登录
</view>
<view class="cu-btn bg-blue light radius long-btn shadow-blur main-btn margin-top text-lg"
@click="changeOperType">前往注册</view>
</view>
<!-- <view class="margin-top-xl text-center text-lg">
<text class="text-grey">手机验证码登录</text>
<text class="text-grey margin-lr-sm">|</text>
<text class="text-grey">忘记密码？</text>
</view> -->
</view>
<view v-else-if="operType === 1">
<!-- 注册内容 -->
<view class="margin-tb-xl">
<view class="cu-form-group">
<view class="title">商家昵称</view>
<input class="radius-input" name="name" v-model="formData.name" placeholder="请输入用户昵称"></input>
</view>
<view class="cu-form-group margin-top">
<view class="title">手机号码</view>
<input class="radius-input" type="number" name="phone" v-model="formData.phone"
placeholder="请输入号码(作为登录帐号)"></input>
</view>
<view class="cu-form-group margin-top">
<view class="title">设置密码</view>
<input class="radius-input" password name="password" v-model="formData.password"
placeholder="请设置至少6位数的登录密码"></input>
</view>
<view class="cu-form-group margin-top">
<view class="title">确认密码</view>
<input class="radius-input" password name="passwordAgain" v-model="formData.passwordAgain"
placeholder="请再次输入密码"></input>
</view>
<view class="cu-form-group margin-top">
<view class="title">验证码</view>
<input class="radius-input" type="number" name="registerCode" v-model="formData.registerCode"
placeholder="请输入验证码"></input>
<view v-if="countDownNum === 0" class="cu-btn bg-blue round-btn margin-left-xs shadow-blur" @click="sendVertifyCode">发送验证码
</view>
<view v-else class="cu-btn bg-gray round-btn margin-left-sm shadow-blur">已发送({{countDownNum}})
</view>
</view>
</view>
<view class="margin-bottom-sm text-lg flex justify-center align-center">
<checkbox style="transform:scale(0.8)" class="main-color" :checked="agreeContract"
@click="changeAgreeContract">
</checkbox>
<text class="margin-left-xs">
我同意
<text class="text-main-color underline-text">用户注册协议</text>
</text>
</view>
<view class="margin-bottom-xl">
<view class="cu-btn bg-blue radius long-btn shadow-blur main-btn text-lg" @click="registerByPhone">
立即注册</view>
<view class="cu-btn bg-blue light radius long-btn shadow-blur main-btn margin-top text-lg"
@click="changeOperType">已有账户，前往登录</view>
</view>
</view> </view>
</view> </view>
<view class="bg-white login-container padding-lr-lg padding-tb-xl">
<view v-if="operType === 0"> <!-- 登录校验弹窗 -->
<!-- 登录内容 -->
<view class="margin-tb-xl">
<view class="cu-form-group">
<view class="text-xxl margin-right"><text class="cuIcon-people"></text></view>
<input class="radius-input" type="number" name="phone" v-model="formData.phone" placeholder="请输入帐号(手机号)"></input>
</view>
<view class="cu-form-group margin-top-lg">
<view class="text-xxl margin-right"><text class="cuIcon-unlock"></text></view>
<input class="radius-input" password name="password" v-model="formData.password" placeholder="请输入密码"></input>
</view>
</view>
<view>
<view class="cu-btn bg-blue radius long-btn shadow-blur main-btn text-lg" @click="loginByPwd">登录</view>
<view class="cu-btn bg-blue light radius long-btn shadow-blur main-btn margin-top text-lg" @click="changeOperType">前往注册</view>
</view>
<!-- <view class="margin-top-xl text-center text-lg">
<text class="text-grey">手机验证码登录</text>
<text class="text-grey margin-lr-sm">|</text>
<text class="text-grey">忘记密码？</text>
</view> -->
</view>
<view v-else-if="operType === 1">
<!-- 注册内容 -->
<view class="margin-tb-xl">
<view class="cu-form-group">
<view class="title">商家昵称</view>
<input class="radius-input" name="name" v-model="formData.name" placeholder="请输入用户昵称"></input>
</view>
<view class="cu-form-group margin-top">
<view class="title">手机号码</view>
<input class="radius-input" type="number" name="phone" v-model="formData.phone" placeholder="请输入号码(作为登录帐号)"></input>
</view>
<view class="cu-form-group margin-top">
<view class="title">设置密码</view>
<input class="radius-input" password name="password" v-model="formData.password" placeholder="请设置至少6位数的登录密码"></input>
</view>
<view class="cu-form-group margin-top">
<view class="title">确认密码</view>
<input class="radius-input" password name="passwordAgain" v-model="formData.passwordAgain" placeholder="请再次输入密码"></input>
</view>
<view class="cu-form-group margin-top">
<view class="title">验证码</view>
<input class="radius-input" type="number" name="registerCode" v-model="formData.registerCode" placeholder="请输入验证码"></input>
<view class="cu-btn bg-blue round-btn margin-left-sm shadow-blur" @click="sendVertifyCode">发送验证码</view>
</view>
</view>
<view class="margin-bottom-sm text-lg flex justify-center align-center">
<checkbox style="transform:scale(0.8)" class="main-color" :checked="agreeContract"
@click="changeAgreeContract">
</checkbox>
<text class="margin-left-xs">
我同意
<text class="text-main-color underline-text">用户注册协议</text>
</text>
</view>
<view>
<view class="cu-btn bg-blue radius long-btn shadow-blur main-btn text-lg" @click="registerByPhone">立即注册</view>
<view class="cu-btn bg-blue light radius long-btn shadow-blur main-btn margin-top text-lg" @click="changeOperType">已有账户，前往登录</view>
</view>
</view>
</view>
<!-- 登录校验弹窗 -->
<vertify-login ref="vertifyLogin" @reload="authLogin"></vertify-login> <vertify-login ref="vertifyLogin" @reload="authLogin"></vertify-login>
</view> </view>
</template> </template>
@ -78,193 +87,201 @@
export default { export default {
data() { data() {
return { return {
pageContentTop: this.CustomBar, pageContentTop: this.CustomBar,
operType: 0, // 0为登录，1为注册 operType: 0, // 0为登录，1为注册
agreeContract: false, countDownNum: 0,
agreeContract: false,
formData: {} formData: {}
} }
}, },
onLoad(options) { onLoad(options) {
if (options && options.operType) { if (options && options.operType) {
this.operType = Number(options.operType) this.operType = Number(options.operType)
} }
}, },
methods: { methods: {
changeAgreeContract() { changeAgreeContract() {
this.agreeContract = !this.agreeContract; this.agreeContract = !this.agreeContract;
}, },
changeOperType() { changeOperType() {
this.reset(); this.reset();
this.operType = this.operType === 0 ? 1 : 0; this.operType = this.operType === 0 ? 1 : 0;
if (this.operType === 1) { if (this.operType === 1) {
this.authLogin(); this.authLogin();
} }
}, },
reset() { reset() {
this.formData = {}; this.formData = {};
this.agreeContract = false; this.agreeContract = false;
}, },
async authLogin() { async authLogin() {
// 更新缓存中的userInfo // 获取微信用户信息
let res = await this.$request.storageExistUser(); let curUserInfo = await this.$request.getWxUserInfo();
// 获取缓存中的userInfo // 校验提示登录
let curUserInfo = this.$request.getCurUserInfo(); if (!curUserInfo || !curUserInfo.openId) {
// 校验提示登录 this.$refs.vertifyLogin.showModal();
if (!curUserInfo || !curUserInfo.openId) { return false;
this.$refs.vertifyLogin.showModal(); } else {
return false; this.$refs.vertifyLogin.hideModal();
} else { }
this.$refs.vertifyLogin.hideModal(); return true;
} },
return true; validLoginData(type) {
}, let errMsg = null;
validLoginData(type) { if (type === 'pwd') {
let errMsg = null; if (!this.formData.phone) {
if (type === 'pwd') { errMsg = '请输入帐号';
if (!this.formData.phone) { } else if (!this.formData.password) {
errMsg = '请输入帐号'; errMsg = '请输入密码';
} else if (!this.formData.password) { }
errMsg = '请输入密码'; }
} if (errMsg) {
} uni.showToast({
if (errMsg) { icon: 'none',
uni.showToast({ title: errMsg
icon: 'none', })
title: errMsg return false;
}) }
return false; return true;
} },
return true; async loginByPwd() {
}, if (!this.validLoginData('pwd')) {
async loginByPwd() { return;
if (!this.validLoginData('pwd')) { }
return;
} let res = await this.$request.appLogin(this.formData);
let res = await this.$request.appLogin(this.formData);
if (res && res.code === 0) { if (res && res.code === 0) {
uni.showToast({ let cacheRes = await this.$request.qryUserInfo(null, this.formData.phone);
icon: 'none', uni.setStorageSync('userProfile', cacheRes.data);
title: '登录成功' uni.showToast({
}) icon: 'none',
uni.reLaunch({ title: '登录成功'
url: '/pages/index/index' })
}) uni.reLaunch({
} else if (res && res.msg) { url: '/pages/index/index'
uni.showToast({ })
icon: 'none', } else if (res && res.msg) {
title: res.msg uni.showToast({
}) icon: 'none',
} else { title: res.msg
uni.showToast({ })
icon: 'none', } else {
title: '登录失败' uni.showToast({
}) icon: 'none',
} title: '登录失败'
})
}
}, },
async sendVertifyCode() { startCountDownNum() {
if (this.$validate.validContactNum(this.formData.phone)) { this.countDownNum = 180;
let res = await this.$request.sendVertifyCode({ let t = setInterval(() => {
to: this.formData.phone this.countDownNum -= 1;
}); if (this.countDownNum === 0) {
if (res && res.code === 0) { clearInterval(t);
uni.showToast({
icon: 'none',
title: '验证码已发送'
})
} else if (res && res.msg) {
uni.showToast({
icon: 'none',
title: res.msg
})
} else {
uni.showToast({
icon: 'none',
title: '验证码发送失败'
})
} }
} else { }, 1000);
uni.showToast({ },
icon: 'none', async sendVertifyCode() {
title: '请正确输入手机号码' if (this.$validate.validContactNum(this.formData.phone)) {
}) let res = await this.$request.sendVertifyCode({
} to: this.formData.phone
}, });
validRegisterData() { if (res && res.code === 0) {
let errMsg = null; uni.showToast({
if (!this.formData.name) { icon: 'none',
errMsg = '请输入用户昵称'; title: '验证码已发送'
} else if (!this.$validate.validContactNum(this.formData.phone)) { })
errMsg = '请正确输入手机号码'; this.startCountDownNum();
} else if (!this.formData.password || this.formData.password.length < 6) { } else if (res && res.msg) {
errMsg = '密码至少为6位数'; uni.showToast({
} else if (!this.formData.passwordAgain || this.formData.password !== this.formData.passwordAgain) { icon: 'none',
errMsg = '两次输入密码不一致'; title: res.msg
} else if (!this.formData.registerCode) { })
errMsg = '请输入验证码' } else {
} else if (!this.agreeContract) { uni.showToast({
errMsg = '请先阅读并同意用户注册协议' icon: 'none',
} title: '验证码发送失败'
if (errMsg) { })
uni.showToast({ }
icon: 'none', } else {
title: errMsg uni.showToast({
}) icon: 'none',
return false; title: '请正确输入手机号码'
} })
return true; }
}, },
async registerByPhone() { validRegisterData() {
let curUserInfo = this.$request.getCurUserInfo(); let errMsg = null;
if (!curUserInfo || !curUserInfo.workerId) { if (!this.formData.name) {
uni.showToast({ errMsg = '请输入用户昵称';
icon: 'none', } else if (!this.$validate.validContactNum(this.formData.phone)) {
title: '注册失败' errMsg = '请正确输入手机号码';
}) } else if (!this.formData.password || this.formData.password.length < 6) {
return; errMsg = '密码至少为6位数';
} } else if (!this.formData.passwordAgain || this.formData.password !== this.formData.passwordAgain) {
errMsg = '两次输入密码不一致';
if (!this.validRegisterData()) { } else if (!this.formData.registerCode) {
return; errMsg = '请输入验证码'
} } else if (!this.agreeContract) {
errMsg = '请先阅读并同意用户注册协议'
let res = await this.$request.realRegisterUser({ }
...this.formData, if (errMsg) {
workerId: curUserInfo.workerId uni.showToast({
}); icon: 'none',
if (res && res.code === 0) { title: errMsg
uni.showToast({ })
icon: 'none', return false;
title: '注册成功' }
}) return true;
this.changeOperType(); },
} else if (res && res.msg) { async registerByPhone() {
uni.showToast({ let curUserInfo = this.$request.getCurUserInfo();
icon: 'none', if (!curUserInfo || !curUserInfo.workerId) {
title: res.msg uni.showToast({
}) icon: 'none',
} else { title: '注册失败'
uni.showToast({ })
icon: 'none', return;
title: '注册失败' }
})
} if (!this.validRegisterData()) {
} return;
}
let res = await this.$request.realRegisterUser({
...this.formData,
workerId: curUserInfo.workerId
});
if (res && res.code === 0) {
uni.showToast({
icon: 'none',
title: '注册成功'
})
this.changeOperType();
} else if (res && res.msg) {
uni.showToast({
icon: 'none',
title: res.msg
})
} else {
uni.showToast({
icon: 'none',
title: '注册失败'
})
}
}
}, },
} }
</script> </script>
<style scoped> <style scoped>
.login-container { .login-container {
border-radius: 80rpx 80rpx 0 0; border-radius: 80rpx;
min-height: 70vh; /* min-height: 44vh; */
width: 100vw; width: 92vw;
margin: 0 auto; margin: 0 auto;
filter: drop-shadow(1px 2px 8px hsl(220deg 60% 50%)); filter: drop-shadow(1px 2px 8px hsl(220deg 38% 50%));
} margin-top: 20vh;
.login-top-bg {
height: 30vh;
} }
.login-avatar { .login-avatar {
@ -282,18 +299,34 @@
.cu-form-group+.cu-form-group { .cu-form-group+.cu-form-group {
border-top: unset; border-top: unset;
} }
.main-btn { .main-btn {
padding: 40rpx; padding: 40rpx;
border-radius: 40rpx; border-radius: 40rpx;
} }
.round-btn { .round-btn {
border-radius: 40rpx; border-radius: 40rpx;
} }
.underline-text { .underline-text {
text-decoration: underline; text-decoration: underline;
}
.bg-img-container {
position: absolute;
top: 0;
width: 100vw;
height: 100%;
}
.cu-form-group .title {
text-align: justify;
padding-right: 15rpx;
font-size: 30rpx;
position: relative;
height: 60rpx;
line-height: 60rpx;
} }
</style> </style>