Quellcode durchsuchen

feat: 完成登录、注册、重置密码页面的UI

YuJing vor 1 Monat
Ursprung
Commit
dfc41bb4cc

+ 13 - 1
commons/basic/src/main/ets/components/toastBuilders/AgreePrivacy.ets

@@ -9,7 +9,14 @@ export function agreePrivacy(item: BasicType<undefined>) {
       .fontSize(14)
       .fontColor('Color.Black')
       .margin({ top: 14, bottom: 8 })
-    Text('已阅读并同意《用户协议》和《隐私政策》')
+    Text(){
+      Span('已阅读并同意')
+      Span('《用户协议》')
+        .fontColor('#FF663815')
+      Span('和')
+      Span('《隐私政策》')
+        .fontColor('#FF663815')
+    }
       .fontSize(13)
       .fontColor($r('sys.color.mask_secondary'))
       .margin({ bottom: 19 })
@@ -19,6 +26,11 @@ export function agreePrivacy(item: BasicType<undefined>) {
       YTButton({
         btContent: '同意并登入',
         btHeight: 37,
+        bgc: '#FFFECF2F',
+        btFontColor: Color.Black,
+        btBorder: {width: 2},
+        btFontSize: 18,
+        btFontWeight: 500,
         click: () => {
           yTToast.hide()
 

+ 1 - 1
commons/basic/src/main/resources/base/element/color.json

@@ -6,7 +6,7 @@
     },
     {
       "name": "main_ac_color_dark",
-      "value": "#FECF2F"
+      "value": "#FFFECF2F"
     },
     {
       "name": "main_na_color",

+ 11 - 1
features/feature/src/main/ets/components/DeerSearch.ets

@@ -5,6 +5,9 @@ import { CustomTextStyle } from "../style/CustomTextStyle"
 export struct DeerSearch {
   @Param enable: boolean = true
 
+  @Event onSearch: (text: string) => void
+  @Event Touch: () => void
+
   @Local text: string = ''
 
   build() {
@@ -23,7 +26,8 @@ export struct DeerSearch {
           .layoutWeight(1)
           .borderRadius(0)
           .border({ width: 0 })
-          .placeholderColor('#B5B8BC')
+          .enabled(this.enable)
+          .placeholderColor(this.enable ? '#B5B8BC' : Color.Black)
           .backgroundColor(Color.Transparent)
           .placeholderFont({size: 12, weight: 400})
       }
@@ -39,7 +43,13 @@ export struct DeerSearch {
         .border({ width: 2, color: '#000000' })
         .padding({left: 18, right: 18, top: 9, bottom: 9})
         .attributeModifier(new CustomTextStyle({size: 12, weight: 600}))
+        .onClick(() => { if(!this.enable) this.onSearch(this.text) })
     }
     .width("100%")
+    .onClick(() => {
+      if(this.enable) {
+        this.Touch()
+      }
+    })
   }
 }

+ 18 - 0
features/feature/src/main/ets/pages/BookSearchPage.ets

@@ -0,0 +1,18 @@
+import { RouterPage, YTHeader } from 'basic'
+
+@ComponentV2
+@RouterPage
+struct BookSearchPage {
+  // @Local vm: BookSearchViewModel = new SearchPageViewModel();
+
+  build() {
+    NavDestination() {
+      Column() {
+        YTHeader()
+      }
+    }
+    .hideTitleBar(true)
+  }
+
+
+}

+ 6 - 3
features/feature/src/main/ets/view/MainView.ets

@@ -24,11 +24,10 @@ export struct MainView {
 
             // 搜索框
             ListItem(){
-              DeerSearch()
+              this.customSearch()
             }
 
 
-
             ListItem(){
               Column(){
                 // 轮播
@@ -190,7 +189,7 @@ export struct MainView {
         .width(55)
         .height(30)
 
-      DeerSearch()
+      this.customSearch()
     }
     .width('100%')
     .backgroundColor(Color.White)
@@ -199,5 +198,9 @@ export struct MainView {
     .padding({top: this.vm.safeTop, bottom: 10, left: 16, right: 16})
   }
 
+  @Builder
+  customSearch(){
+    DeerSearch({ enable: false })
+  }
 
 }

+ 1 - 1
features/user/src/main/ets/components/LoginInput.ets

@@ -48,7 +48,7 @@ export struct LoginInput {
           .fontSize(12)
           .fontColor(Color.White)
           .borderRadius(16)
-          .backgroundColor($r('[basic].color.main_ac_color_dark'))
+          .backgroundColor('#FF663815')
           .onClick(() => {
             this.loginCollect.requestSmsCode((res) => {
               if (res.smsCode) {

+ 2 - 2
features/user/src/main/ets/components/Terms.ets

@@ -4,7 +4,7 @@ import { yTRouter } from 'basic'
 @Extend(Span)
 function spanEx(click: () => void) {
   // .decoration({ type: TextDecorationType.Underline, color: $r('[basic].color.main_ac_color_dark') })
-  .fontColor($r('[basic].color.main_ac_color_dark'))
+  .fontColor('#FF663815')
   .onClick(click)
 }
 
@@ -24,7 +24,7 @@ export struct Terms {
           .onChange(() => {
             this.onAgreeChange()
           })
-          .selectedColor($r('[basic].color.main_ac_color_dark'))
+          .selectedColor('#FF663815')
         Text() {
           Span('我已阅读并同意')
           // Span('《中国认证服务条款》')

+ 29 - 32
features/user/src/main/ets/pages/LoginPage.ets

@@ -6,14 +6,6 @@ import { LoginView } from '../views/LoginView'
 // import { OtherLoginMethods } from '../views/OtherLoginMethods'
 
 
-@Builder
-function LoginBuilder() {
-  NavDestination() {
-    LoginPage()
-  }
-  .hideTitleBar(true)
-}
-
 @Component
 struct LoginPage {
   @StorageProp(YTAvoid.SAFE_TOP_KEY) private safeTop: number = 0
@@ -34,7 +26,7 @@ struct LoginPage {
             .fontWeight(400)
             .alignSelf(ItemAlign.End)
             .textAlign(TextAlign.Center)
-            .fontColor($r('[basic].color.main_ac_color_light'))
+            .fontColor('#FF926340')
             .onClick(() => {
               yTRouter.routerBack()
             })
@@ -47,7 +39,7 @@ struct LoginPage {
             .lineHeight(40)
             .fontSize(28)
             .fontWeight(600)
-            .fontColor($r('[basic].color.main_ac_color_dark'))
+            .fontColor('#FF663815')
         }
         .padding({ left: 16, })
         .height(193)
@@ -56,27 +48,32 @@ struct LoginPage {
 
         Row() {
           Text('注册')
+            .height(48)
             .fontSize(16)
             .fontWeight(600)
             .layoutWeight(1)
-            .fontColor(this.tabBarIndex == 0 || this.tabBarIndex == 2 ? '#FF141111' : '#80141111')
-            .backgroundColor(this.tabBarIndex == 0 || this.tabBarIndex == 2 ? Color.White : Color.Transparent)
             .textAlign(TextAlign.Center)
-            .height(48)
+            .border({ width: this.tabBarIndex == 0 || this.tabBarIndex == 2 ?
+              { top: 1, right: 1, bottom: 0 } :
+              { top: 0, right: 0, bottom: 1 },
+              color: Color.White })
+            .fontColor(this.tabBarIndex == 0 || this.tabBarIndex == 2 ? '#FF141111' : '#80141111')
             .borderRadius({ topLeft: 12, topRight: 12, bottomRight: this.tabBarIndex == 1 ? 12 : 0 })
+            .backgroundColor(this.tabBarIndex == 0 || this.tabBarIndex == 2 ? 'rgba(255, 255, 255, 0.3)' : Color.Transparent)
             .onClick(() => {
               this.tabBarIndex = 0
               this.tabController.changeIndex(0)
             })
+
           Text('登录')
             .fontSize(16)
             .fontWeight(600)
-            .borderRadius({
-              topLeft: 12,
-              topRight: 12,
-              bottomLeft: this.tabBarIndex == 0 || this.tabBarIndex == 2 ? 12 : 0
-            })
-            .backgroundColor(this.tabBarIndex == 1 ? Color.White : Color.Transparent)
+            .border({ width: this.tabBarIndex == 1 ?
+              { top: 1, left: 1, bottom: 0 } :
+              { top: 0, left: 0, bottom: 1 },
+              color: Color.White })
+            .borderRadius({ topLeft: 12, topRight: 12, bottomLeft: this.tabBarIndex == 0 || this.tabBarIndex == 2 ? 12 : 0 })
+            .backgroundColor(this.tabBarIndex == 1 ? 'rgba(255, 255, 255, 0.3)' : Color.Transparent)
             .layoutWeight(1)
             .height(48)
             .textAlign(TextAlign.Center)
@@ -87,20 +84,16 @@ struct LoginPage {
             })
 
         }
+        .width('100%')
         .alignItems(VerticalAlign.Center)
         .justifyContent(FlexAlign.SpaceBetween)
-        .width('100%')
-
       }
       .padding({ top: this.safeTop })
-      .linearGradient({ angle: 135, colors: [['#CAE2F9', -0.1571], ['#D4D1F4', 0.4709], ['#EDF5FD', 1.1235]] })
-      .margin({ bottom: 20 })
 
 
       Tabs({ controller: this.tabController }) {
         TabContent() {
           RegisterOrResetPassComp({ loginCollect: new LoginCollect("register") })
-
         }
         .padding({ left: 20, right: 20 })
 
@@ -119,17 +112,21 @@ struct LoginPage {
         }
         .padding({ left: 20, right: 20 })
       }
-      .scrollable(false)
-      .layoutWeight(1)
       .barHeight(0)
-
+      .layoutWeight(1)
+      .scrollable(false)
+      .backgroundColor('rgba(255, 255, 255, 0.3)')
     }
-
-    .padding({
-
-      bottom: this.safeBottom
-    })
     .height('100%')
+    .padding({ bottom: this.safeBottom })
+    .linearGradient({ colors: [['#99F1D132', 0], ['#00F1D132', 0.5]] })
   }
 }
 
+@Builder
+function LoginBuilder() {
+  NavDestination() {
+    LoginPage()
+  }
+  .hideTitleBar(true)
+}

+ 9 - 4
features/user/src/main/ets/views/LoginView.ets

@@ -85,7 +85,7 @@ export struct LoginView {
       Row() {
         if (!this.loginCollect.isPassword) {
           Text('密码登录')
-            .fontColor($r('[basic].color.main_ac_color_dark'))
+            .fontColor('#FF663815')
             .fontSize(12)
             .fontWeight(700)
             .onClick(() => {
@@ -94,7 +94,7 @@ export struct LoginView {
           Blank()
         } else {
           Text('验证码登录')
-            .fontColor($r('[basic].color.main_ac_color_dark'))
+            .fontColor('#FF663815')
             .fontWeight(700)
             .fontSize(12)
             .onClick(() => {
@@ -103,7 +103,7 @@ export struct LoginView {
             })
           Blank()
           Text('忘记密码?')
-            .fontColor($r('[basic].color.main_ac_color_dark'))
+            .fontColor('#FF663815')
             .fontSize(12)
             .fontWeight(700)
             .onClick(() => {
@@ -117,6 +117,11 @@ export struct LoginView {
 
       YTButton({
         btContent: '登录',
+        bgc: '#FFFECF2F',
+        btFontColor: Color.Black,
+        btBorder: {width: 2},
+        btFontSize: 18,
+        btFontWeight: 500,
         click: () => {
           this.loginCollect.executeLogin("common")
         }
@@ -124,7 +129,7 @@ export struct LoginView {
 
 
       Text('未注册的手机号码登陆后将自动注册')
-        .fontColor($r('[basic].color.main_ac_color_dark'))
+        .fontColor('#FF663815')
         .fontSize(12)
         .margin({ top: 16, bottom: 56 })
         .alignSelf(ItemAlign.Start)

+ 7 - 2
features/user/src/main/ets/views/RegisterOrResetPassView.ets

@@ -67,13 +67,18 @@ export struct RegisterOrResetPassComp {
         .fontSize(10)
         .fontColor('#e1e1e1')
         .margin({ top: 4, bottom: 48 })
-        .fontColor('#FFEA4A18')
+        .fontColor('#FF663815')
 
 
 
       YTButton({
         //: '立即重置'
         btContent: this.calcButtonContent(),
+        bgc: '#FFFECF2F',
+        btFontColor: Color.Black,
+        btBorder: {width: 2},
+        btFontSize: 18,
+        btFontWeight: 500,
         click: () => {
           this.loginCollect.executeLogin("common")
         },
@@ -82,7 +87,7 @@ export struct RegisterOrResetPassComp {
 
       Text('注册成功后将自动登录')
         .fontSize(10)
-        .fontColor($r('[basic].color.main_ac_color_dark'))
+        .fontColor('#FF663815')
         .margin({ top: 16 })
     }
     .width('100%')