fix: 重构登陆页面
This commit is contained in:
wangzhongjie
parent
cb302cf9c8
commit
0c0fc179c9
@ -53,3 +53,9 @@ export const InitTableTag = '[InitTable]';
|
||||
|
||||
//数据库操作
|
||||
export const DbOperationTag = '[DbOperation]';
|
||||
|
||||
//路线
|
||||
export const RoadsTag = '[Roads]';
|
||||
|
||||
//ExaminerLogin
|
||||
export const ExaminerLoginTag = '[ExaminerLogin]';
|
||||
@ -24,6 +24,7 @@ export default class EntryAbility extends UIAbility {
|
||||
if (data !== '' && data !== undefined) {
|
||||
const result: EnvironmentConfigurationType = JSON.parse(data)
|
||||
AppStorage.setOrCreate<EnvironmentConfigurationType>("EnvironmentConfiguration", result)
|
||||
console.log("日志", result.isOpenLog)
|
||||
if (result.isOpenLog) {
|
||||
dConsole.init(result.isOpenLog)
|
||||
}
|
||||
@ -73,7 +74,7 @@ export default class EntryAbility extends UIAbility {
|
||||
AppStorage.setOrCreate('windowClass', windowClass)
|
||||
await windowClass.setWindowLayoutFullScreen(true)
|
||||
// await windowClass.setWindowSystemBarEnable([]) //全屏
|
||||
windowStage.loadContent('pages/Index', (err, data) => {
|
||||
windowStage.loadContent('pages/ExaminerLogin', (err, data) => {
|
||||
if (err.code) {
|
||||
hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
|
||||
return;
|
||||
|
||||
@ -1,204 +1,221 @@
|
||||
import router from '@ohos.router';
|
||||
import TopLogo from './compontents/TopLogo';
|
||||
import promptAction from '@ohos.promptAction';
|
||||
import errorMsgDialog from './compontents/errorMsgDialog';
|
||||
import imageBtn from './compontents/imageBtn';
|
||||
import HeaderComponent from './compontents/Header';
|
||||
import LoadingComponent from './compontents/Loading';
|
||||
import Prompt from '@system.prompt';
|
||||
import { ApiResponseType, CarInfoType, ExaminerLoginInfo } from '../model';
|
||||
import CryptoJS from '@ohos/crypto-js';
|
||||
import { UserLoginType } from '../model/ExaminerLogin';
|
||||
import { BusinessError } from '@ohos.base';
|
||||
import { examinerLogin } from '../api/login';
|
||||
import { ApiResponseType, CarInfoType, ExaminerLoginInfo } from '../model/index';
|
||||
import { CryptoJS } from '@ohos/crypto-js';
|
||||
import router from '@ohos.router';
|
||||
import { dConsole } from '../utils/LogWorker';
|
||||
import { ExaminerLoginTag } from '../config';
|
||||
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct ExaminerLoginPage {
|
||||
@State ratio: number = 1700 / 960
|
||||
@State url: string = ''
|
||||
@State inputPlaceholderArr: string[] = ['用户账户', '密码'];
|
||||
@State inputTextArr: string[] = ['', ''];
|
||||
@State imgArr1: Resource[] =
|
||||
[$r('app.media.1_nor'), $r('app.media.2_nor'), $r('app.media.3_nor'), $r('app.media.4_nor'), $r('app.media.5_nor'),
|
||||
$r('app.media.6_nor'), $r('app.media.7_nor'), $r('app.media.8_nor'), $r('app.media.9_nor'), $r('app.media.0_nor'),
|
||||
$r('app.media.x_nor'), $r('app.media.clear_nor'), $r('app.media.delete_nor'), $r('app.media.confirm_nor')]
|
||||
@State currentInputIndex: number = 0
|
||||
@State limit: boolean = false
|
||||
@State @Watch('outClick') outFlag: boolean = false;
|
||||
// private vocObj = null;
|
||||
private title = ''
|
||||
private type = '2'
|
||||
errorDialog: CustomDialogController = new CustomDialogController({
|
||||
builder: errorMsgDialog({
|
||||
title: this.title,
|
||||
type: this.type,
|
||||
cancel: () => {
|
||||
},
|
||||
confirm: () => {
|
||||
}
|
||||
@State dataList: string[] = ["1", "2", "3", "4", "退格", "5", "6", "7", "8", "清空", "9", "0", "X"];
|
||||
@State userName: string = "";
|
||||
@State password: string = "";
|
||||
@State selectIndex: string = "0"
|
||||
loadingDialog: CustomDialogController = new CustomDialogController({
|
||||
builder: LoadingComponent({
|
||||
text: "正在登录，请稍候..."
|
||||
}),
|
||||
customStyle: true,
|
||||
alignment: DialogAlignment.Center,
|
||||
},
|
||||
)
|
||||
autoCancel: false
|
||||
})
|
||||
|
||||
build() {
|
||||
Column() {
|
||||
TopLogo({ outFlag: $outFlag })
|
||||
Column() {
|
||||
Text('请考官输入用户名密码').fontColor('#FFAD33').fontSize(36 * this.ratio)
|
||||
Row() {
|
||||
ForEach(this.inputPlaceholderArr, (item: string, index: number) => {
|
||||
Row() {
|
||||
TextInput({ placeholder: `${item}`, text: this.inputTextArr[index] })
|
||||
.fontSize(42 * this.ratio)
|
||||
.fontColor('white')
|
||||
.placeholderFont({ size: 42 * this.ratio })
|
||||
.placeholderColor('gray')
|
||||
.caretColor('white')
|
||||
.backgroundColor('transparent')
|
||||
.width('90%')
|
||||
.margin({ left: '4%' })
|
||||
.type(index === 0 ? InputType.Normal : InputType.Password)
|
||||
.focusable(false)
|
||||
.onClick(() => {
|
||||
this.currentInputIndex = index;
|
||||
Flex({
|
||||
direction: FlexDirection.Column,
|
||||
}) {
|
||||
HeaderComponent({
|
||||
shortLogo: true,
|
||||
shouBackArea: true
|
||||
})
|
||||
Row() {
|
||||
Text("请考官输入用户名和密码")
|
||||
.fontSize(40)
|
||||
.fontColor("#EF9335")
|
||||
.width("100%")
|
||||
.height(50)
|
||||
.textAlign(TextAlign.Center)
|
||||
}
|
||||
|
||||
Column() {
|
||||
Row() {
|
||||
inputComponent({
|
||||
active: this.selectIndex === "0",
|
||||
value: this.userName,
|
||||
onSelect: () => {
|
||||
this.selectIndex = "0"
|
||||
}
|
||||
.backgroundImage(this.currentInputIndex == index ? $r('app.media.kuang_pre') : $r('app.media.kuang_nor'))
|
||||
.backgroundImageSize({ width: '100%', height: '100%' })
|
||||
.width('48%')
|
||||
.height('14.9%')
|
||||
})
|
||||
}
|
||||
.width('90%')
|
||||
.margin({ top: 25 * this.ratio }) //20
|
||||
.justifyContent(FlexAlign.SpaceBetween)
|
||||
inputComponent({
|
||||
active: this.selectIndex === "1",
|
||||
value: this.password,
|
||||
placeholder: "请输入密码",
|
||||
onSelect: () => {
|
||||
this.selectIndex = "1"
|
||||
},
|
||||
})
|
||||
}.width("100%").justifyContent(FlexAlign.SpaceBetween)
|
||||
|
||||
Column() {
|
||||
Flex({
|
||||
wrap: FlexWrap.Wrap,
|
||||
justifyContent: FlexAlign.SpaceAround,
|
||||
alignContent: FlexAlign.SpaceAround
|
||||
direction: FlexDirection.Column
|
||||
}) {
|
||||
ForEach(this.imgArr1, (item: Resource, index: number) => {
|
||||
if (index === this.imgArr1.length - 1) {
|
||||
imageBtn({ btnWidth: '38%', btnHeight: '24%', imgSrc: item })
|
||||
.onClick(() => {
|
||||
if (this.inputTextArr[0].trim() == '' || this.inputTextArr[1].trim() == '') {
|
||||
promptAction.showToast({
|
||||
message: '请输入用户名和密码',
|
||||
duration: 3000
|
||||
});
|
||||
return
|
||||
Grid() {
|
||||
ForEach(this.dataList, (item: string) => {
|
||||
GridItem() {
|
||||
btnComponent({
|
||||
text: item
|
||||
}).onClick(() => {
|
||||
if (item === "退格") {
|
||||
if (this.selectIndex === "0") {
|
||||
this.userName = this.userName.slice(0, -1);
|
||||
} else {
|
||||
this.password = this.password.slice(0, -1);
|
||||
}
|
||||
if (this.limit) {
|
||||
return
|
||||
} else if (item === "清空") {
|
||||
this.userName = "";
|
||||
this.password = "";
|
||||
} else if (item === "X") {
|
||||
this.selectIndex = "0";
|
||||
} else {
|
||||
if (this.selectIndex === "0") {
|
||||
this.userName += item;
|
||||
} else {
|
||||
this.password += item;
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
GridItem() {
|
||||
btnComponent({
|
||||
text: "确定"
|
||||
}).onClick(async () => {
|
||||
if (this.userName === "" || this.password === "") {
|
||||
Prompt.showToast({
|
||||
message: "用户名或密码不能为空",
|
||||
duration: 2000
|
||||
});
|
||||
return;
|
||||
}
|
||||
const carInfo: CarInfoType = AppStorage.get<CarInfoType>('carInfo')!
|
||||
let password: string = CryptoJS.MD5(this.inputTextArr[1]).toString();
|
||||
let password: string = CryptoJS.MD5(this.password).toString();
|
||||
const param: UserLoginType = {
|
||||
carId: carInfo.carId as string,
|
||||
examinationRoomId: carInfo.examinationRoomId as string,
|
||||
username: this.inputTextArr[0],
|
||||
// password: Md5.Instance.get_md5(this.inputTextArr[1])
|
||||
username: this.userName,
|
||||
password
|
||||
}
|
||||
this.type = '2'
|
||||
this.errorDialog.open()
|
||||
this.limit = true
|
||||
this.loadingDialog.open();
|
||||
try {
|
||||
// TODO
|
||||
examinerLogin(param).then((res: ApiResponseType) => {
|
||||
// AppStorage.setOrCreate('examinerInfo', res?.examinerLoginRsp?.body)
|
||||
dConsole.log('res?.examinerLoginRsp?.head?.resultCode', res?.examinerLoginRsp?.head?.resultCode,
|
||||
JSON.stringify(res))
|
||||
this.errorDialog.close()
|
||||
|
||||
this.limit = false
|
||||
const res: ApiResponseType = await examinerLogin(param)
|
||||
if (res?.examinerLoginRsp?.head?.resultCode == '1') {
|
||||
// this.type='1'
|
||||
// this.title=decodeURIComponent(res.examinerLoginRsp.head.resultMessage)
|
||||
// dConsole.log('this.titlt',this.title)
|
||||
// this.errorDialog.open()
|
||||
return
|
||||
}
|
||||
this.loadingDialog.close()
|
||||
router.pushUrl({
|
||||
url: 'pages/UserInfo',
|
||||
params: {
|
||||
type: 1
|
||||
}
|
||||
}, router.RouterMode.Single);
|
||||
|
||||
dConsole.log('res11', JSON.stringify(res))
|
||||
const examinerLoginInfo: ExaminerLoginInfo | undefined = res.examinerLoginRsp?.body;
|
||||
if (!examinerLoginInfo) {
|
||||
dConsole.error('examinerLoginRsp.body is undefined');
|
||||
dConsole.error(ExaminerLoginTag, 'examinerLoginRsp.body is undefined');
|
||||
return;
|
||||
}
|
||||
examinerLoginInfo.username = this.inputTextArr[0]
|
||||
examinerLoginInfo.username = this.userName
|
||||
AppStorage.setOrCreate<ExaminerLoginInfo>('examinerInfo', examinerLoginInfo)
|
||||
}).catch((err: BusinessError) => {
|
||||
this.errorDialog.close()
|
||||
this.limit = false
|
||||
})
|
||||
} catch (error) {
|
||||
this.errorDialog.close()
|
||||
this.limit = false
|
||||
}
|
||||
|
||||
})
|
||||
} else {
|
||||
imageBtn({ btnWidth: '18%', btnHeight: '24%', imgSrc: item })
|
||||
.onClick(() => {
|
||||
this.url = ''
|
||||
if (index < 9) {
|
||||
this.inputTextArr[this.currentInputIndex] += (index + 1).toString()
|
||||
} else {
|
||||
if (index === 9) {
|
||||
this.inputTextArr[this.currentInputIndex] += (0).toString()
|
||||
}
|
||||
if (index === 10) {
|
||||
this.inputTextArr[this.currentInputIndex] += 'X';
|
||||
} else if (index === 11) {
|
||||
this.inputTextArr[this.currentInputIndex] = '';
|
||||
}
|
||||
if (index === 12) {
|
||||
this.inputTextArr[this.currentInputIndex] =
|
||||
this.inputTextArr[this.currentInputIndex].slice(0, -1)
|
||||
}
|
||||
}
|
||||
dConsole.log(this.inputTextArr[this.currentInputIndex])
|
||||
})
|
||||
} catch (e) {
|
||||
this.loadingDialog.close();
|
||||
dConsole.error(ExaminerLoginTag, 'examinerLogin error: ' + e);
|
||||
Prompt.showToast({
|
||||
message: "登录失败，请稍后重试",
|
||||
duration: 2000
|
||||
});
|
||||
}
|
||||
})
|
||||
}.columnStart(4).columnEnd(5)
|
||||
}
|
||||
.height('100%')
|
||||
.columnsTemplate("1fr 1fr 1fr 1fr 1fr")
|
||||
.rowsTemplate("1fr 1fr 1fr")
|
||||
.height("100%")
|
||||
}
|
||||
.margin({ top: 20 * this.ratio })
|
||||
.width('90%')
|
||||
.height('62.7%')
|
||||
.backgroundColor('#E5E3DF')
|
||||
.borderRadius(20 * this.ratio)
|
||||
}
|
||||
.margin({ top: -10 * this.ratio })
|
||||
.justifyContent(FlexAlign.SpaceAround)
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
.justifyContent(FlexAlign.SpaceBetween)
|
||||
.backgroundImagePosition({ x: 0, y: 0 })
|
||||
.backgroundImage($r('app.media.index_bg'))
|
||||
.backgroundImageSize({ width: '100%', height: '100%' })
|
||||
}
|
||||
|
||||
aboutToAppear() {
|
||||
this.url = ''
|
||||
}
|
||||
|
||||
onPageShow() {
|
||||
}
|
||||
|
||||
outClick() {
|
||||
.width("100%")
|
||||
.flexGrow(1)
|
||||
.flexShrink(1)
|
||||
.backgroundColor("#E5E3DF")
|
||||
.borderRadius(20)
|
||||
.padding(20)
|
||||
.margin({
|
||||
top: 20
|
||||
})
|
||||
}.width("100%").height("100%").padding(20)
|
||||
}.backgroundColor("#232424").height("100%").width("100%").padding({
|
||||
bottom: 10
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@Component
|
||||
struct btnComponent {
|
||||
@State text: string = "1";
|
||||
@State opacityNum: number = 1;
|
||||
|
||||
build() {
|
||||
Row() {
|
||||
if (this.text != "确定" && this.text !== "退格" && this.text !== "清空") {
|
||||
Text(this.text).fontSize(40).fontColor("#F0DEC5")
|
||||
}
|
||||
}
|
||||
.backgroundImage(this.text === "确定" ? $r("app.media.queding_nor") : this.text === "退格" ? $r("app.media.delete_nor") : this.text === "清空" ? $r("app.media.clear_nor") : $r("app.media.nor_btn"))
|
||||
.width("100%")
|
||||
.height(160)
|
||||
.backgroundImageSize({
|
||||
width: "100%",
|
||||
height: "100%"
|
||||
})
|
||||
.justifyContent(FlexAlign.Center)
|
||||
.alignItems(VerticalAlign.Center)
|
||||
}
|
||||
}
|
||||
|
||||
@Component
|
||||
struct inputComponent {
|
||||
@State placeholder: string = "请输入用户名";
|
||||
@Prop value: string = "";
|
||||
@Prop active: boolean = false;
|
||||
onSelect: () => void = () => {
|
||||
};
|
||||
|
||||
build() {
|
||||
Row() {
|
||||
TextInput({
|
||||
text: this.value,
|
||||
placeholder: this.placeholder
|
||||
})
|
||||
.placeholderColor("#fff")
|
||||
.onFocus(() => {
|
||||
this.onSelect()
|
||||
})
|
||||
.fontColor("#fff")
|
||||
.fontSize(40)
|
||||
.placeholderFont({
|
||||
size: 40
|
||||
})
|
||||
.margin({
|
||||
left: 20
|
||||
})
|
||||
}.backgroundImage(
|
||||
this.active ? $r("app.media.kuang_pre") : $r("app.media.kuang_nor")
|
||||
).backgroundImageSize({
|
||||
width: "100%",
|
||||
height: "100%"
|
||||
}).width(750).height(100)
|
||||
}
|
||||
}
|
||||
@ -5,6 +5,7 @@ export default struct BottomMessageComponent {
|
||||
@Prop hasAuth: boolean
|
||||
@Prop examCarNumber: string
|
||||
versionClick?: () => void
|
||||
@State count: number = 0
|
||||
|
||||
build() {
|
||||
Flex(
|
||||
@ -17,14 +18,24 @@ export default struct BottomMessageComponent {
|
||||
Text('V外壳：' + this.version).textCommonStyle()
|
||||
Text('V评判：' + this.judgeVersion).textCommonStyle()
|
||||
Text('授权信息：' + (this.hasAuth ? "已授权" : "未授权")).textCommonStyle()
|
||||
}.gesture(
|
||||
GestureGroup(GestureMode.Exclusive,
|
||||
TapGesture({ count: 3 })
|
||||
.onAction(() => {
|
||||
}.alignItems(HorizontalAlign.Start)
|
||||
.onClick(() => {
|
||||
// 点击五次
|
||||
this.count++
|
||||
if (this.count >= 5) {
|
||||
this.versionClick && this.versionClick()
|
||||
this.count = 0
|
||||
}
|
||||
})
|
||||
)
|
||||
).alignItems(HorizontalAlign.Start)
|
||||
|
||||
// .gesture(
|
||||
// GestureGroup(GestureMode.Exclusive,
|
||||
// TapGesture({ count: 3 })
|
||||
// .onAction(() => {
|
||||
// this.versionClick && this.versionClick()
|
||||
// })
|
||||
// )
|
||||
// )
|
||||
|
||||
Text("考车号: " + this.examCarNumber).textCommonStyle()
|
||||
}.width("100%")
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
import TopLogo from './compontents/TopLogo';
|
||||
import router from '@ohos.router';
|
||||
import { MASYSTEMPARMType, RouteParamsType } from '../model';
|
||||
import { GetSyncData } from '../utils/table/Operation';
|
||||
import { dConsole } from '../utils/LogWorker';
|
||||
import { RoadsTag } from '../config';
|
||||
import HeaderComponent from './compontents/Header';
|
||||
|
||||
const cBg = $rawfile('judge/km3/road/luxian_pre.png');
|
||||
const lBg = $rawfile('judge/km3/road/luxian_nor.png');
|
||||
@ -10,22 +12,37 @@ const lBg = $rawfile('judge/km3/road/luxian_nor.png');
|
||||
@Entry
|
||||
@Component
|
||||
struct RoadsPage {
|
||||
@State outFlag: boolean = false;
|
||||
@State roadObj: number[] = [];
|
||||
|
||||
async aboutToAppear() {
|
||||
//读取systemparam表的no1等于4的
|
||||
const systemParms: Array<MASYSTEMPARMType> = await GetSyncData('MA_SYSTEMPARM') as MASYSTEMPARMType[];
|
||||
dConsole.log(RoadsTag, systemParms)
|
||||
systemParms.forEach((systemParm: MASYSTEMPARMType) => {
|
||||
if (systemParm.no1 == 4) {
|
||||
if (systemParm.no1.toString() === "4") {
|
||||
this.roadObj.push(systemParm.no2)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
goJudge(wayno: number) {
|
||||
let currentParams: RouteParamsType = router.getParams() as RouteParamsType;
|
||||
router.replaceUrl({
|
||||
url: 'pages/Judge',
|
||||
params: {
|
||||
sczb: currentParams.sczb,
|
||||
kfdm: currentParams.kfdm,
|
||||
wayno,
|
||||
}
|
||||
}, router.RouterMode.Single);
|
||||
}
|
||||
|
||||
build() {
|
||||
Column() {
|
||||
TopLogo({ outFlag: $outFlag })
|
||||
HeaderComponent({
|
||||
shortLogo: true,
|
||||
shouBackArea: true
|
||||
})
|
||||
Flex({ wrap: FlexWrap.Wrap, direction: FlexDirection.Row, justifyContent: FlexAlign.Start }) {
|
||||
List({}) {
|
||||
ListItem() {
|
||||
@ -79,18 +96,5 @@ struct RoadsPage {
|
||||
}.width('100%')
|
||||
.height('100%')
|
||||
.backgroundColor('#1A1A1A')
|
||||
|
||||
}
|
||||
|
||||
goJudge(wayno: number) {
|
||||
let currentParams: RouteParamsType = router.getParams() as RouteParamsType;
|
||||
router.replaceUrl({
|
||||
url: 'pages/Judge',
|
||||
params: {
|
||||
sczb: currentParams.sczb,
|
||||
kfdm: currentParams.kfdm,
|
||||
wayno,
|
||||
}
|
||||
}, router.RouterMode.Single);
|
||||
}
|
||||
}
|
||||
38
entry/src/main/ets/pages/compontents/Loading.ets
Normal file
38
entry/src/main/ets/pages/compontents/Loading.ets
Normal file
@ -0,0 +1,38 @@
|
||||
@CustomDialog
|
||||
export default struct LoadingComponent {
|
||||
@Prop text: string = ""
|
||||
@State angle: number = 0
|
||||
private controller?: CustomDialogController;
|
||||
|
||||
aboutToAppear(): void {
|
||||
// loading旋转动画
|
||||
animateTo({
|
||||
duration: 1500,
|
||||
curve: Curve.Linear,
|
||||
iterations: -1,
|
||||
playMode: PlayMode.Normal,
|
||||
}, () => {
|
||||
this.angle += 360
|
||||
})
|
||||
}
|
||||
|
||||
build() {
|
||||
Column() {
|
||||
Image($r('app.media.open_loading'))
|
||||
.width(300)
|
||||
.height(300)
|
||||
.rotate({
|
||||
angle: this.angle,
|
||||
})
|
||||
Text(this.text).fontSize(30).fontColor("#F4B44C").margin({
|
||||
top: 20
|
||||
})
|
||||
}
|
||||
.width(500)
|
||||
.height(500)
|
||||
.justifyContent(FlexAlign.Center)
|
||||
.alignItems(HorizontalAlign.Center)
|
||||
.backgroundColor("#fff")
|
||||
.borderRadius(20)
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user