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

登录注册页面初版

This commit is contained in:
donqi 2022-08-09 20:11:13 +08:00
parent bfe0490330
commit a038784d1d
6 changed files with 358 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
common/js/request.js
View File

@ -167,6 +167,30 @@ export default {
})
return res[1].data;
},
async sendVertifyCode(params = {}) {
let res = await uni.request({
url: '/tool/sms/send',
method: 'POST',
data: params
})
return res[1].data;
},
async realRegisterUser(params = {}) {
let res = await uni.request({
url: '/worker/register',
method: 'POST',
data: params
})
return res[1].data;
},
async appLogin(params = {}) {
let res = await uni.request({
url: '/worker/login',
method: 'POST',
data: params
})
return res[1].data;
},
async qryUserInfo(openId) {
let res = await uni.request({
url: '/wx/getWorkerInfo',

5
common/js/validate.js
View File

@ -10,7 +10,10 @@ export default {
},
validContactNum: function(contactNum) {
return contactNumRegex.test(contactNum);
if (!contactNum || contactNum.length !== 11) {
return false;
}
return true;
},
validIdCard: function(idCardNum) {

5
pages.json
View File

@ -5,6 +5,11 @@
"path": "pages/index/msg-dialog"
}],
"subPackages": [{
"root": "pages/login",
"pages": [{
"path": "login"
}]
}, {
"root": "pages/area-proxy/",
"pages": [{
"path": "my-team"

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

@ -103,7 +103,7 @@
<vertify-worker-type ref="vertifyWorkerType"></vertify-worker-type>
<!-- 登录校验弹窗 -->
<vertify-login ref="vertifyLogin" @reload="authLogin"></vertify-login>
<vertify-phone ref="vertifyPhone" @reload="authLogin"></vertify-phone>
<!-- <vertify-phone ref="vertifyPhone" @reload="authLogin"></vertify-phone> -->
</view>
</template>
@ -179,16 +179,24 @@
} else {
this.$refs.vertifyLogin.hideModal();
}
// 校验提示获取手机号码
// 校验是否注册过
if (!curUserInfo.phone) {
this.$refs.vertifyPhone.showModal();
uni.reLaunch({
url: '/pages/login/login?operType=1'
})
return false;
} else {
this.$refs.vertifyPhone.hideModal();
}
// 校验提示获取手机号码
// if (!curUserInfo.phone) {
// this.$refs.vertifyPhone.showModal();
// return false;
// } else {
// this.$refs.vertifyPhone.hideModal();
// }
// 提示选择师傅类型
if (curUserInfo.type == null) {
this.$refs.vertifyWorkerType.showModal();
return false;
}
this.loadData();
return true;

18
pages/index/index.vue
View File

@ -10,7 +10,7 @@
<vertify-worker-type ref="vertifyWorkerType"></vertify-worker-type>
<!-- 登录校验弹窗 -->
<vertify-login ref="vertifyLogin" @reload="reloadForwardPage"></vertify-login>
<vertify-phone ref="vertifyPhone" @reload="reloadForwardPage"></vertify-phone>
<!-- <vertify-phone ref="vertifyPhone" @reload="reloadForwardPage"></vertify-phone> -->
</view>
</template>
@ -89,16 +89,24 @@
} else {
this.$refs.vertifyLogin.hideModal();
}
// 校验提示获取手机号码
// 校验是否注册过
if (!curUserInfo.phone) {
this.$refs.vertifyPhone.showModal();
uni.reLaunch({
url: '/pages/login/login?operType=1'
})
return false;
} else {
this.$refs.vertifyPhone.hideModal();
}
// 校验提示获取手机号码
// if (!curUserInfo.phone) {
// this.$refs.vertifyPhone.showModal();
// return false;
// } else {
// this.$refs.vertifyPhone.hideModal();
// }
// 提示选择师傅类型
if (curUserInfo.type == null) {
this.$refs.vertifyWorkerType.showModal();
return false;
}
return true;
},

299
pages/login/login.vue Normal file
View File

@ -0,0 +1,299 @@
<template>
<view class="bg-blue light" style="height: 100vh; width: 100%;">
<view class="bg-blue light login-top-bg text-center">
<view class="cu-avatar round login-avatar"
:style="'background-image:url(' + curUserInfo.workerLogoUrl + ');'">
</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>
</view>
</template>
<script>
export default {
data() {
return {
pageContentTop: this.CustomBar,
operType: 0, // 0为登录，1为注册
agreeContract: false,
formData: {}
}
},
onLoad(options) {
if (options && options.operType) {
this.operType = Number(options.operType)
}
},
methods: {
changeAgreeContract() {
this.agreeContract = !this.agreeContract;
},
changeOperType() {
this.reset();
this.operType = this.operType === 0 ? 1 : 0;
if (this.operType === 1) {
this.authLogin();
}
},
reset() {
this.formData = {};
this.agreeContract = false;
},
async authLogin() {
// 更新缓存中的userInfo
let res = await this.$request.storageExistUser();
// 获取缓存中的userInfo
let curUserInfo = this.$request.getCurUserInfo();
// 校验提示登录
if (!curUserInfo || !curUserInfo.openId) {
this.$refs.vertifyLogin.showModal();
return false;
} else {
this.$refs.vertifyLogin.hideModal();
}
return true;
},
validLoginData(type) {
let errMsg = null;
if (type === 'pwd') {
if (!this.formData.phone) {
errMsg = '请输入帐号';
} else if (!this.formData.password) {
errMsg = '请输入密码';
}
}
if (errMsg) {
uni.showToast({
icon: 'none',
title: errMsg
})
return false;
}
return true;
},
async loginByPwd() {
if (!this.validLoginData('pwd')) {
return;
}
let res = await this.$request.appLogin(this.formData);
if (res && res.code === 0) {
uni.showToast({
icon: 'none',
title: '登录成功'
})
uni.reLaunch({
url: '/pages/index/index'
})
} else if (res && res.msg) {
uni.showToast({
icon: 'none',
title: res.msg
})
} else {
uni.showToast({
icon: 'none',
title: '登录失败'
})
}
},
async sendVertifyCode() {
if (this.$validate.validContactNum(this.formData.phone)) {
let res = await this.$request.sendVertifyCode({
to: this.formData.phone
});
if (res && res.code === 0) {
uni.showToast({
icon: 'none',
title: '验证码已发送'
})
} else if (res && res.msg) {
uni.showToast({
icon: 'none',
title: res.msg
})
} else {
uni.showToast({
icon: 'none',
title: '验证码发送失败'
})
}
} else {
uni.showToast({
icon: 'none',
title: '请正确输入手机号码'
})
}
},
validRegisterData() {
let errMsg = null;
if (!this.formData.name) {
errMsg = '请输入用户昵称';
} else if (!this.$validate.validContactNum(this.formData.phone)) {
errMsg = '请正确输入手机号码';
} else if (!this.formData.password || this.formData.password.length < 6) {
errMsg = '密码至少为6位数';
} else if (!this.formData.passwordAgain || this.formData.password !== this.formData.passwordAgain) {
errMsg = '两次输入密码不一致';
} else if (!this.formData.registerCode) {
errMsg = '请输入验证码'
} else if (!this.agreeContract) {
errMsg = '请先阅读并同意用户注册协议'
}
if (errMsg) {
uni.showToast({
icon: 'none',
title: errMsg
})
return false;
}
return true;
},
async registerByPhone() {
let curUserInfo = this.$request.getCurUserInfo();
if (!curUserInfo || !curUserInfo.workerId) {
uni.showToast({
icon: 'none',
title: '注册失败'
})
return;
}
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>
<style scoped>
.login-container {
border-radius: 80rpx 80rpx 0 0;
min-height: 70vh;
width: 100vw;
margin: 0 auto;
filter: drop-shadow(1px 2px 8px hsl(220deg 60% 50%));
}
.login-top-bg {
height: 30vh;
}
.login-avatar {
width: 18vh;
height: 18vh;
top: 6vh;
}
.radius-input {
border: 1rpx solid rgba(0, 0, 0, 0.1);
border-radius: 40rpx;
padding: 20rpx;
box-sizing: content-box;
}
.cu-form-group+.cu-form-group {
border-top: unset;
}
.main-btn {
padding: 40rpx;
border-radius: 40rpx;
}
.round-btn {
border-radius: 40rpx;
}
.underline-text {
text-decoration: underline;
}
</style>