fix: 重构登陆页面

2025-06-26 10:28:50 +08:00 · 2025-06-26 10:28:50 +08:00 · 0c0fc179c9
commit 0c0fc179c9
parent cb302cf9c8
6 changed files with 276 additions and 199 deletions
--- a/entry/src/main/ets/config/LogEnum.ets
+++ b/entry/src/main/ets/config/LogEnum.ets
@ -52,4 +52,10 @@ export const JudgeTag = '[Judge]';
 export const InitTableTag = '[InitTable]';

 //数据库操作
-export const DbOperationTag = '[DbOperation]';
+export const DbOperationTag = '[DbOperation]';
+
+//路线
+export const RoadsTag = '[Roads]';
+
+//ExaminerLogin
+export const ExaminerLoginTag = '[ExaminerLogin]';
--- a/entry/src/main/ets/entryability/EntryAbility.ets
+++ b/entry/src/main/ets/entryability/EntryAbility.ets
@ -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;
--- a/entry/src/main/ets/pages/ExaminerLogin.ets
+++ b/entry/src/main/ets/pages/ExaminerLogin.ets
@ -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 })
+    Flex({
+      direction: FlexDirection.Column,
+    }) {
+      HeaderComponent({
+        shortLogo: true,
+        shouBackArea: true
+      })
+      Row() {
+        Text("请考官输入用户名和密码")
+          .fontSize(40)
+          .fontColor("#EF9335")
+          .width("100%")
+          .height(50)
+          .textAlign(TextAlign.Center)
+      }
+
      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;
-                })
+          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
-                    }
-                    if (this.limit) {
-                      return
-                    }
-                    const carInfo: CarInfoType = AppStorage.get<CarInfoType>('carInfo')!
-                    let password: string = CryptoJS.MD5(this.inputTextArr[1]).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])
-                      password
-                    }
-                    this.type = '2'
-                    this.errorDialog.open()
-                    this.limit = true
-                    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
-                        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
-                        }
-                        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');
-                          return;
-                        }
-                        examinerLoginInfo.username = this.inputTextArr[0]
-                        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()
+            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);
+                      }
+                    } else if (item === "清空") {
+                      this.userName = "";
+                      this.password = "";
+                    } else if (item === "X") {
+                      this.selectIndex = "0";
                    } 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)
+                      if (this.selectIndex === "0") {
+                        this.userName += item;
+                      } else {
+                        this.password += item;
                      }
                    }
-                    dConsole.log(this.inputTextArr[this.currentInputIndex])
                  })
-              }
-            })
+                }
+              })
+              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.password).toString();
+                  const param: UserLoginType = {
+                    carId: carInfo.carId as string,
+                    examinationRoomId: carInfo.examinationRoomId as string,
+                    username: this.userName,
+                    password
+                  }
+                  this.loadingDialog.open();
+                  try {
+                    const res: ApiResponseType = await examinerLogin(param)
+                    if (res?.examinerLoginRsp?.head?.resultCode == '1') {
+                      return
+                    }
+                    this.loadingDialog.close()
+                    router.pushUrl({
+                      url: 'pages/UserInfo',
+                      params: {
+                        type: 1
+                      }
+                    }, router.RouterMode.Single);
+                    const examinerLoginInfo: ExaminerLoginInfo | undefined = res.examinerLoginRsp?.body;
+                    if (!examinerLoginInfo) {
+                      dConsole.error(ExaminerLoginTag, 'examinerLoginRsp.body is undefined');
+                      return;
+                    }
+                    examinerLoginInfo.username = this.userName
+                    AppStorage.setOrCreate<ExaminerLoginInfo>('examinerInfo', examinerLoginInfo)
+                  } catch (e) {
+                    this.loadingDialog.close();
+                    dConsole.error(ExaminerLoginTag, 'examinerLogin error: ' + e);
+                    Prompt.showToast({
+                      message: "登录失败，请稍后重试",
+                      duration: 2000
+                    });
+                  }
+                })
+              }.columnStart(4).columnEnd(5)
+            }
+            .columnsTemplate("1fr 1fr 1fr 1fr 1fr")
+            .rowsTemplate("1fr 1fr 1fr")
+            .height("100%")
          }
-          .height('100%')
        }
-        .margin({ top: 20 * this.ratio })
-        .width('90%')
-        .height('62.7%')
-        .backgroundColor('#E5E3DF')
-        .borderRadius(20 * this.ratio)
+        .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")
      }
-      .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%' })
+    .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)
  }
+}

-  aboutToAppear() {
-    this.url = ''
-  }
+@Component
+struct inputComponent {
+  @State placeholder: string = "请输入用户名";
+  @Prop value: string = "";
+  @Prop active: boolean = false;
+  onSelect: () => void = () => {
+  };

-  onPageShow() {
-  }
-
-  outClick() {
+  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)
  }
 }
--- a/entry/src/main/ets/pages/Index/BottomMessage.ets
+++ b/entry/src/main/ets/pages/Index/BottomMessage.ets
@ -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(() => {
-              this.versionClick && this.versionClick()
-            })
-        )
-      ).alignItems(HorizontalAlign.Start)
+      }.alignItems(HorizontalAlign.Start)
+      .onClick(() => {
+        //   点击五次
+        this.count++
+        if (this.count >= 5) {
+          this.versionClick && this.versionClick()
+          this.count = 0
+        }
+      })
+
+      // .gesture(
+      //   GestureGroup(GestureMode.Exclusive,
+      //     TapGesture({ count: 3 })
+      //       .onAction(() => {
+      //         this.versionClick && this.versionClick()
+      //       })
+      //   )
+      // )

      Text("考车号: " + this.examCarNumber).textCommonStyle()
    }.width("100%")
--- a/entry/src/main/ets/pages/Roads.ets
+++ b/entry/src/main/ets/pages/Roads.ets
@ -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);
  }
 }
--- a/entry/src/main/ets/pages/compontents/Loading.ets
+++ b/entry/src/main/ets/pages/compontents/Loading.ets
@ -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)
+  }
+}