import { promptAction } from '@kit.ArkUI'
|
import http from '@ohos.net.http';
|
import { HttpResponseResult } from '../../data/HttpResponse';
|
import { ComponentContent } from '@kit.ArkUI';
|
import { PromptActionClass } from '../../utils/PromptActionClass';
|
|
class DialogParams {
|
text: string = "";
|
|
constructor(text: string) {
|
this.text = text;
|
}
|
}
|
@Builder
|
function buildText(params: DialogParams) {
|
Column({ space: 10 }) {
|
Image($r('app.media.signIn_page_check'))
|
.width(80)
|
.height(80)
|
Text(params.text)
|
.fontSize(20)
|
.fontWeight(FontWeight.Bold)
|
Text()
|
.fontSize(16)
|
.fontColor('#666666')
|
Button('返回登录页')
|
.type(ButtonType.Normal)
|
.borderRadius(8)
|
.width('100%')
|
.onClick(() => {
|
PromptActionClass.closeDialog();
|
PromptActionClass.ctx.getRouter().replaceUrl({
|
url: 'pages/login/LoginPage'
|
})
|
})
|
}
|
.width(300)
|
.padding({ top: 40, bottom: 40, left: 20, right: 20 })
|
.borderRadius(14)
|
.backgroundColor(Color.White)
|
}
|
|
/**
|
* @Description : 注册页
|
*/
|
@Entry
|
@Component
|
struct SignInPage {
|
@State account: string = ''
|
@State password: string = ''
|
@State confirmPassword: string = ''
|
@State accountErrorFlag: boolean = false
|
@State passwordErrorFlag: boolean = false
|
@State confirmPasswordErrorFlag: boolean = false
|
@State dialogMessage: string = '注册成功';
|
private ctx: UIContext = this.getUIContext();
|
private contentNode: ComponentContent<Object> =
|
new ComponentContent(this.ctx, wrapBuilder(buildText), new DialogParams((this.dialogMessage)));
|
params: DialogParams = new DialogParams('注册成功')
|
|
aboutToAppear(): void {
|
PromptActionClass.setContext(this.ctx);
|
PromptActionClass.setContentNode(this.contentNode);
|
PromptActionClass.setOptions({ alignment: DialogAlignment.Center, offset: { dx: 0, dy: 0 } });
|
}
|
|
submitRegister() {
|
if (!this.account) {
|
this.accountErrorFlag = true
|
return
|
}
|
if (!this.password || this.password.length !== 8) {
|
this.passwordErrorFlag = true
|
return
|
}
|
if (this.confirmPassword !== this.password) {
|
this.confirmPasswordErrorFlag = true
|
return
|
}
|
let httpRequest = http.createHttp();
|
|
// 准备要提交的数据体
|
interface PostData {
|
mobilePhone: string,
|
password: string
|
}
|
let postData: PostData = {
|
mobilePhone: this.account,
|
password: this.password
|
}
|
|
httpRequest.request(
|
"http://192.168.20.70:8080/quiz-community/public/v1.0/users/register",
|
{
|
method: http.RequestMethod.POST,
|
header: { 'Content-Type': 'application/json' },
|
extraData: postData
|
},
|
(err, data) => {
|
console.log('response', '/users/register')
|
console.log(JSON.stringify(data.result))
|
if (data.responseCode == 200) {
|
const resData = (typeof data.result == 'string' ? JSON.parse(data.result) : data.result) as HttpResponseResult<null>
|
if (resData.code == 200) {
|
PromptActionClass.openDialog()
|
} 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)
|
.onClick(() => {
|
PromptActionClass.openDialog()
|
})
|
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: '请输入8位密码', 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('请输入8位数的密码')
|
.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.confirmPassword })
|
.type(InputType.Password)
|
.backgroundColor('#f3f7fe')
|
.onChange(() =>{
|
this.confirmPasswordErrorFlag = false
|
})
|
}
|
.width('100%')
|
.backgroundColor('#f3f7fe')
|
.border(this.confirmPasswordErrorFlag ? { width: 1, color: Color.Red } : { width: 'none' })
|
.borderRadius(10)
|
.padding({ left: 10, right: 10 })
|
|
if(this.confirmPasswordErrorFlag) {
|
Text('两次密码输入不一致')
|
.width('100%')
|
.fontSize(12)
|
.fontColor(Color.Red)
|
.margin({ top: -16, bottom: -16, left: 20 })
|
}
|
|
Button('注 册')
|
.type(ButtonType.Normal)
|
.width('100%')
|
.borderRadius(10)
|
.onClick(() => {
|
this.submitRegister()
|
})
|
|
}
|
.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/LoginPage'
|
})
|
})
|
}
|
.fontSize(14)
|
.fontWeight(500)
|
.margin({ top: 10 })
|
}
|
}
|
.width('100%')
|
.height('100%')
|
.padding({ top: 100, left: 20, right: 20 })
|
.backgroundImage($r('app.media.login_page_bg'))
|
.backgroundImageSize({width: '100%',height:'100%'})
|
|
}
|
}
|
