xsx
2 years ago
7 changed files with 189 additions and 22 deletions
@ -0,0 +1,142 @@ |
|||
<template> |
|||
<view class="register"> |
|||
<view class="title">用户注册</view> |
|||
<uni-forms class="form" :modelValue="dataForm" :rules="rules" validate-trigger="bind" label-width="80px"> |
|||
<uni-forms-item name="userName" label="用户名"> |
|||
<uni-easyinput type="text" v-model="dataForm.userName" placeholder="用户名" /> |
|||
</uni-forms-item> |
|||
<uni-forms-item name="nickName" label="昵称"> |
|||
<uni-easyinput type="text" v-model="dataForm.nickName" placeholder="昵称" /> |
|||
</uni-forms-item> |
|||
<uni-forms-item name="password" label="密码"> |
|||
<uni-easyinput type="password" v-model="dataForm.password" placeholder="密码" /> |
|||
</uni-forms-item> |
|||
<uni-forms-item name="corfirmPassword" label="确认密码"> |
|||
<uni-easyinput type="password" v-model="dataForm.corfirmPassword" placeholder="确认密码" /> |
|||
</uni-forms-item> |
|||
<button class="btn-submit" @click="submit" type="warn">注册并登陆</button> |
|||
</uni-forms> |
|||
<navigator class="nav-login" url="/pages/login/login" render-link="true" hover-class="other-navigator-hover"> |
|||
返回登陆页面 |
|||
</navigator> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
dataForm: { |
|||
userName: '', |
|||
nickName: '', |
|||
password: '', |
|||
corfirmPassword: '' |
|||
}, |
|||
rules: { |
|||
userName: { |
|||
rules: [{ |
|||
required: true, |
|||
errorMessage: '请输入用户名', |
|||
}] |
|||
}, |
|||
nickName: { |
|||
rules: [{ |
|||
required: true, |
|||
errorMessage: '请输入昵称', |
|||
}] |
|||
}, |
|||
password: { |
|||
rules: [{ |
|||
required: true, |
|||
errorMessage: '请输入密码', |
|||
}] |
|||
}, |
|||
corfirmPassword: { |
|||
rules: [{ |
|||
required: true, |
|||
errorMessage: '请输入确认密码', |
|||
}, { |
|||
validateFunction: (rule, value, data, callback) => { |
|||
console.log("validateFunction") |
|||
if (data.password != value) { |
|||
callback('两次密码输入不一致') |
|||
} |
|||
return true; |
|||
} |
|||
}] |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
submit() { |
|||
this.$http({ |
|||
url: '/register', |
|||
data: this.dataForm, |
|||
method: 'POST' |
|||
}).then(() => { |
|||
uni.showToast({ |
|||
title: "注册成功", |
|||
icon: 'none' |
|||
}) |
|||
this.login(); |
|||
}) |
|||
}, |
|||
login() { |
|||
const loginForm = { |
|||
terminal: this.$enums.TERMINAL_TYPE.APP, |
|||
userName: this.dataForm.userName, |
|||
password: this.dataForm.password |
|||
} |
|||
this.$http({ |
|||
url: '/login', |
|||
data: loginForm, |
|||
method: 'POST' |
|||
}).then((loginInfo) => { |
|||
console.log("登录成功,自动跳转到聊天页面...") |
|||
uni.setStorageSync("userName", loginForm.userName); |
|||
uni.setStorageSync("password", loginForm.password); |
|||
loginInfo.expireTime = new Date().getTime() + loginInfo.refreshTokenExpiresIn * 1000; |
|||
uni.setStorageSync("loginInfo", loginInfo); |
|||
// 调用App.vue的初始化方法 |
|||
getApp().init() |
|||
// 跳转到聊天页面 |
|||
uni.switchTab({ |
|||
url: "/pages/chat/chat" |
|||
}) |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.register { |
|||
.title { |
|||
padding-top: 150rpx; |
|||
padding-bottom: 100rpx; |
|||
color: royalblue; |
|||
text-align: center; |
|||
font-size: 60rpx; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.form { |
|||
padding: 50rpx; |
|||
|
|||
.btn-submit { |
|||
margin-top: 80rpx; |
|||
border-radius: 50rpx; |
|||
} |
|||
} |
|||
|
|||
.nav-login { |
|||
position: fixed; |
|||
width: 100%; |
|||
bottom: 100rpx; |
|||
color: royalblue; |
|||
text-align: center; |
|||
font-size: 32rpx; |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue