import { UserInfoBase } from '../../data/UserInfoBase'
|
import { promptAction, router } from '@kit.ArkUI'
|
import PreferencesUtils from '../../utils/PreferencesUtils'
|
import http from '@ohos.net.http';
|
import { HttpResponseResult } from '../../data/HttpResponse';
|
import { JSON } from '@kit.ArkTS';
|
import { DOMAIN } from '../../utils/config';
|
|
/**
|
* @Description : 登录页
|
*/
|
@Entry
|
@Component
|
struct LoginPage {
|
@State account: string = ''
|
@State password: string = ''
|
@State rememberPassword: boolean = false
|
@State agreement: boolean = false
|
@State accountErrorFlag: boolean = false
|
@State passwordErrorFlag: boolean = false
|
//用来获取存储的密码和用户账号
|
@State userInfoData: UserInfoBase = new UserInfoBase()
|
|
aboutToAppear(): void {
|
PreferencesUtils.getPreferences('UserInfo','user','').then((value: string) => {
|
if (!value) return
|
this.userInfoData = JSON.parse(value) as UserInfoBase
|
this.account = this.userInfoData.account
|
this.password = this.userInfoData.password
|
if (this.account && this.password) {
|
this.rememberPassword = true
|
}
|
})
|
}
|
|
submitLogin() {
|
if (!this.account) {
|
this.accountErrorFlag = true
|
return
|
}
|
if (!this.password || this.password.length !== 8) {
|
this.passwordErrorFlag = true
|
return
|
}
|
if (!this.agreement) {
|
promptAction.showToast({
|
message: '请勾选协议和隐私政策',
|
backgroundColor: '#242933',
|
backgroundBlurStyle: BlurStyle.NONE,
|
textColor: Color.White
|
})
|
return
|
}
|
this.userInfoData = {
|
account: this.account,
|
password: this.password
|
}
|
let httpRequest = http.createHttp();
|
|
// 准备要提交的数据体
|
interface PostData {
|
mobilePhone: string,
|
password: string
|
}
|
let postData: PostData = {
|
mobilePhone: this.account,
|
password: this.password
|
}
|
|
httpRequest.request(
|
`${DOMAIN}/quiz-community/public/v1.0/users/login`,
|
{
|
method: http.RequestMethod.PUT,
|
header: { 'Content-Type': 'application/json' },
|
extraData: postData
|
},
|
(err, data) => {
|
console.log('response', '/users/register')
|
console.log(JSON.stringify(data.result))
|
if (data.responseCode == 200) {
|
interface Data {
|
token: string
|
}
|
const resData = (typeof data.result == 'string' ? JSON.parse(data.result) : data.result) as HttpResponseResult<Data>
|
if (resData.code == 200) {
|
|
PreferencesUtils.putPreferences('UserInfo','user',JSON.stringify(this.userInfoData))
|
AppStorage.SetOrCreate('x-jwt-token', resData.data?.token)
|
promptAction.showToast({ message: '登录成功' })
|
router.push({
|
url: 'pages/MainPage'
|
})
|
} else {
|
promptAction.showToast({ message: resData.msg })
|
}
|
} else {
|
promptAction.showToast({ message: err.message })
|
}
|
}
|
)
|
}
|
|
build() {
|
Column({space: 10}){
|
Text('您好，')
|
.width('100%')
|
.fontSize(22)
|
.fontWeight(800)
|
.fontColor(Color.White)
|
Text('欢迎使用学聘同行')
|
.width('100%')
|
.fontSize(22)
|
.fontWeight(800)
|
.fontColor(Color.White)
|
Column({ space: 20 }) {
|
Text('账号登录')
|
.width('100%')
|
.textAlign(TextAlign.Center)
|
.fontSize(20)
|
.fontWeight(800)
|
|
Row() {
|
Image($r('app.media.icon_username'))
|
.width(16)
|
.height(16)
|
TextInput({ placeholder: '请输入账号', text: $$this.account })
|
.type(InputType.USER_NAME)
|
.backgroundColor('#f3f7fe')
|
.onChange(() => {
|
this.accountErrorFlag = false
|
})
|
}
|
.width('100%')
|
.backgroundColor('#f3f7fe')
|
.border(this.accountErrorFlag ? { width: 1, color: Color.Red } : { width: 'none' })
|
.borderRadius(10)
|
.padding({ left: 10, right: 10 })
|
|
if(this.accountErrorFlag) {
|
Text('账号不能空或账号有误')
|
.width('100%')
|
.fontSize(12)
|
.fontColor(Color.Red)
|
.margin({ top: -16, bottom: -16, left: 20 })
|
}
|
|
Row() {
|
Image($r('app.media.icon_password'))
|
.width(16)
|
.height(16)
|
TextInput({ placeholder: '请输入密码', text: $$this.password })
|
.type(InputType.Password)
|
.backgroundColor('#f3f7fe')
|
.onChange(() =>{
|
this.passwordErrorFlag = false
|
})
|
}
|
.width('100%')
|
.backgroundColor('#f3f7fe')
|
.border(this.passwordErrorFlag ? { width: 1, color: Color.Red } : { width: 'none' })
|
.borderRadius(10)
|
.padding({ left: 10, right: 10 })
|
|
if(this.passwordErrorFlag) {
|
Text('密码不能空或密码有误')
|
.width('100%')
|
.fontSize(12)
|
.fontColor(Color.Red)
|
.margin({ top: -16, bottom: -16, left: 20 })
|
}
|
|
Row(){
|
Row() {
|
Checkbox()
|
.select($$this.rememberPassword)
|
.selectedColor(0x39a2db)
|
.shape(CheckBoxShape.ROUNDED_SQUARE)
|
.width(14)
|
Text('记住密码')
|
.fontSize(14)
|
}
|
.onClick(() => this.rememberPassword = !this.rememberPassword)
|
Text('忘记密码?')
|
.fontSize(14)
|
.fontColor('#1756f4')
|
.decoration({ type: TextDecorationType.Underline, color: '#1756f4' })
|
}
|
.width('100%')
|
.justifyContent(FlexAlign.SpaceBetween)
|
|
Button('登 录')
|
.type(ButtonType.Normal)
|
.width('100%')
|
.borderRadius(10)
|
.onClick(() => {
|
this.submitLogin()
|
})
|
|
Row() {
|
Checkbox()
|
.select($$this.agreement)
|
.selectedColor(0x39a2db)
|
.shape(CheckBoxShape.ROUNDED_SQUARE)
|
.width(14)
|
Text(){
|
Span('我已阅读并同意')
|
.fontColor(Color.Black)
|
Span('《用户协议》')
|
.fontColor('#1756f4')
|
Span('和')
|
.fontColor(Color.Black)
|
Span('《隐私协议》')
|
.fontColor('#1756f4')
|
}
|
.fontSize(12)
|
}
|
.width('100%')
|
.justifyContent(FlexAlign.Center)
|
.onClick(() => { this.agreement = !this.agreement })
|
|
}
|
.width('100%')
|
.margin({ top: 20 })
|
.padding({ top: 30, bottom: 30, left: 20, right: 20 })
|
.borderRadius(6)
|
.backgroundColor(Color.White)
|
|
Row() {
|
Text() {
|
Span('没有账号？')
|
Span('立即注册>')
|
.fontColor('#1756f4')
|
.decoration({ type: TextDecorationType.Underline, color: '#1756f4' })
|
.onClick(() => {
|
this.getUIContext().getRouter().pushUrl({
|
url: 'pages/login/SignInPage'
|
})
|
})
|
}
|
.fontSize(14)
|
.fontWeight(500)
|
.margin({ top: 10 })
|
}
|
|
// Row(){
|
// Text('注册')
|
// .fontColor(Color.White)
|
// .onClick(() => {
|
// this.getUIContext().getRouter().pushUrl({
|
// url: 'pages/login/SingInPage'
|
// })
|
// })
|
// }.width('90%')
|
// .offset({y: -15,x: -20})
|
// .justifyContent(FlexAlign.End)
|
// Blank()
|
// Button('登 录')
|
// .width('90%')
|
// .height(70)
|
// .fontSize(25)
|
// .backgroundColor("#ff09b8aa")
|
// .onClick(() => {
|
// //点击获取输入框内容
|
// console.log(`用户名：${this.userInfoData.userName},密码： ${this.userInfoData.userPwd}`);
|
// if (this.userName === '' || this.userName === undefined || this.userName.trim().length <= 0 || this.userName != this.userInfoData.userName) {
|
// this.isShowName = false
|
// this.getUIContext().getPromptAction().showToast({message: '用户不能空或用户名有误'})
|
// return //结束当前逻辑，不在向下执行
|
// }
|
// if (this.userPwd === '' || this.userPwd === undefined || this.userPwd.trim().length <= 0 || this.userPwd != this.userInfoData.userPwd) {
|
// this.getUIContext().getPromptAction().showToast({message: '密码不能空或密码有误'})
|
// this.isShowPwd = false
|
// return //结束当前逻辑，不在向下执行
|
// }
|
// this.getUIContext().getPromptAction().showToast({message: '登录成功'})
|
// this.getUIContext().getRouter().replaceUrl({
|
// url:'pages/MainPage'
|
// })
|
// })
|
}
|
.width('100%')
|
.height('100%')
|
.padding({ top: 100, left: 20, right: 20 })
|
.backgroundImage($r('app.media.login_page_bg'))
|
.backgroundImageSize({width: '100%',height:'100%'})
|
|
}
|
}
|
