feat: 新增 书包view

features/feature/src/main/ets/view/ThirdView.ets

@@ -1,4 +1,6 @@
+import { tagItemComp } from "../components/BuilderIndex";
 import { CustomTextStyle } from "../style/CustomTextStyle";
+import { RouterUtils } from "../utils/RouterUtrils";
 import { ThirdViewModel } from "./viewModel/ThirdViewModel";
 
 
@@ -14,61 +16,252 @@ export struct ThirdView {
             .attributeModifier(new CustomTextStyle({size: 18, weight: 500, color: '#FF111111'}))
         }.justifyContent(FlexAlign.Center)
 
+        this.classify()
+      }
+      .width('100%')
+      .backgroundColor(Color.White)
+      .padding({top: this.vm.safeTop, bottom: 15})
+      .borderRadius({bottomLeft: 16, bottomRight: 16})
+
+      Column(){
+        if(true) {
+          this.bookList()
+        } else {
+          this.emptyView()
+        }
+      }.width('100%').layoutWeight(1)
+      .padding({left: 12, right: 12})
+
+
+      // 底部按钮
+      Row(){
         Row(){
-          Row(){
-            List({space: 22}){
-              ForEach(this.vm.categoryList, (item: string, index) => {
-                ListItem(){
-                  Column(){
-                    Text(item)
-                      .zIndex(99)
-                      .width(50)
-                      .textAlign(TextAlign.Center)
-                      .onClick(() => { this.vm.changeCategory(index) })
-                      .attributeModifier(new CustomTextStyle({size: 16, weight: 600, color: this.vm.categoryIndex == index ? '#FF111111' : '#FF777777'}))
-
-                    if(this.vm.categoryIndex == index){
-                      Image($r('[basic].media.icon_SelectBg'))
-                        .width(45)
-                        .height(16)
-                        .margin({top:-10})
-                        .transition(TransitionEffect.asymmetric(TransitionEffect.move(TransitionEdge.TOP), TransitionEffect.move(TransitionEdge.TOP)).animation({ duration: 100, curve: Curve.Smooth }))
-                    }
-                  }
-                  .alignItems(HorizontalAlign.Center)
-                }
-              })
-            }
-            .height(40)
-            .width("100%")
-            .padding({top: 10})
-            .scrollBar(BarState.Off)
-            .listDirection(Axis.Horizontal)
+          if(true) {
+            Row().width(15).aspectRatio(1).borderRadius(15).border({width: 1})
+          } else {
+            Image($r('[basic].media.icon_select')).width(15).aspectRatio(1)
           }
-          .layoutWeight(1)
-          .alignItems(VerticalAlign.Center)
 
-          Row(){
-            Text('编辑')
-              .attributeModifier(new CustomTextStyle({size: 14, weight: 600}))
+          Text('全选')
+            .margin({left: 6, right: 19})
+            .attributeModifier(new CustomTextStyle({size: 14, weight: 400, color: '#80000000'}))
+
+          Text(){
+            Span('已选：')
+            Span(`1`).fontWeight(700).fontColor('#FFFFC500')
+            Span('本书').fontColor('#FF333333')
           }
-          .width(60)
-          .borderRadius(25)
-          .border({width: 2})
-          .backgroundColor('#FECF2F')
-          .padding({top: 8, bottom: 8})
-          .justifyContent(FlexAlign.Center)
+          .attributeModifier(new CustomTextStyle({size: 14, weight: 400, color: '#80000000'}))
         }
-        .width("100%")
-        .alignItems(VerticalAlign.Center)
-        .padding({left: 16, right: 16})
+
+
+        Row(){
+          Text(this.vm.editMode ? '移除书包' : '立即借阅')
+            .attributeModifier(new CustomTextStyle({
+              size: 18,
+              weight: 600,
+              color: this.vm.editMode ? '#FFFECF2F' : '#FF000000'
+            }))
+        }
+        .width(143)
+        .borderRadius(25)
+        .border({width: 2, color: this.vm.editMode ? '#FFFECF2F' : '#FF000000'})
+        .backgroundColor(this.vm.editMode ? Color.White : '#FECF2F')
+        .padding({top: 10, bottom: 10})
+        .justifyContent(FlexAlign.Center)
       }
-      .width('100%')
+      .height(60)
+      .width("100%")
       .backgroundColor(Color.White)
-      .padding({top: this.vm.safeTop, })
+      .justifyContent(FlexAlign.SpaceBetween)
+      .padding({left: 17, top: 8, right: 17, bottom: 8})
     }
     .width('100%')
     .height('100%')
     .backgroundColor('#F7F9FA')
+
+  }
+
+  @Builder
+  classify(){
+    Row(){
+      Row(){
+        List({space: 22}){
+          ForEach(this.vm.categoryList, (item: string, index) => {
+            ListItem(){
+              Column(){
+                Text(item)
+                  .zIndex(99)
+                  .width(50)
+                  .textAlign(TextAlign.Center)
+                  .onClick(() => { this.vm.changeCategory(index) })
+                  .attributeModifier(new CustomTextStyle({size: 16, weight: 600, color: this.vm.categoryIndex == index ? '#FF111111' : '#FF777777'}))
+
+                if(this.vm.categoryIndex == index){
+                  Image($r('[basic].media.icon_SelectBg'))
+                    .width(45)
+                    .height(16)
+                    .margin({top:-10})
+                    .transition(TransitionEffect.asymmetric(TransitionEffect.move(TransitionEdge.TOP), TransitionEffect.move(TransitionEdge.TOP)).animation({ duration: 100, curve: Curve.Smooth }))
+                }
+              }
+              .alignItems(HorizontalAlign.Center)
+            }
+          })
+        }
+        .height(40)
+        .width("100%")
+        .padding({top: 10})
+        .scrollBar(BarState.Off)
+        .listDirection(Axis.Horizontal)
+      }
+      .layoutWeight(1)
+      .alignItems(VerticalAlign.Center)
+
+      Row(){
+        Text(this.vm.editMode ? '完成' : '编辑')
+          .attributeModifier(new CustomTextStyle({size: 14, weight: 600}))
+      }
+      .width(60)
+      .borderRadius(25)
+      .border({width: 2})
+      .backgroundColor('#FECF2F')
+      .padding({top: 8, bottom: 8})
+      .justifyContent(FlexAlign.Center)
+      .onClick(() => { this.vm.changeEditMode() })
+    }
+    .width("100%")
+    .alignItems(VerticalAlign.Center)
+    .padding({left: 16, right: 16})
+  }
+
+  @Builder
+  emptyView(){
+    Column(){
+      Column(){
+        this.tip()
+
+        Column(){
+          Image($r('[basic].media.png_schoolBag'))
+            .width(115)
+            .height(152)
+
+          Text('书包空荡荡，赶快去选书！')
+            .attributeModifier(new CustomTextStyle({size: 14, weight: 400, color: '#80000000'}))
+            .margin({top: 18, bottom: 8})
+
+          Text('去选书')
+            .borderRadius(25)
+            .backgroundColor('#FFFECF2F')
+            .border({width: 2, color: '#FF000000'})
+            .padding({left: 45, top: 10, right: 45, bottom: 10})
+            .attributeModifier(new CustomTextStyle({size: 18, weight: 400, color: '#FF000000'}))
+        }
+        .width("100%")
+        .layoutWeight(1)
+        .alignItems(HorizontalAlign.Center)
+        .justifyContent(FlexAlign.Center)
+      }
+      .width("100%")
+      .height('100%')
+    }
+  }
+
+  @Builder
+  bookList(){
+    List({space: 12}){
+      ListItem(){
+        this.tip()
+      }
+
+      ForEach(new Array(10).fill(1), (item: number, index) => {
+        ListItem(){
+          Row({space: 7}){
+            Row(){
+              if(index%2 == 1) {
+                Row().width(15).aspectRatio(1).borderRadius(15).border({width: 1})
+              } else {
+                Image($r('[basic].media.icon_select')).width(15).aspectRatio(1)
+              }
+            }.height('100%')
+            .onClick(() => { this.vm.changeSelect() })
+
+            Row({space: 11}){
+              Image($r('[basic].media.png_defaultBook'))
+                .borderRadius(16)
+                .width(86).aspectRatio(1)
+                .backgroundColor('#FECF2F')
+
+              Column(){
+                Text('我不愿嫉妒')
+                  .attributeModifier(new CustomTextStyle({size: 14, weight: 400, color: '#FF111111'}))
+
+                Row(){
+                  Text('哈哈哈哈哈哈哈哈哈哈')
+                    .attributeModifier(new CustomTextStyle({size: 12, weight: 400, color: '#FF555555'}))
+                }
+                .width('100%').layoutWeight(1)
+                .justifyContent(FlexAlign.Start)
+
+                Row({space: 8}){
+                  tagItemComp('情绪价值', '#FF4EB1EF', '#FFEDF7FD')
+                  tagItemComp('3-8岁', '#FFFC9911', '#FFFFF5E7')
+                }
+              }
+              .width("100%")
+              .alignItems(HorizontalAlign.Start)
+            }
+            .onClick(() => { RouterUtils.router2BookItemDetailPage() })
+          }
+          .width("100%")
+          .height(102)
+          .borderRadius(12)
+          .border({width: 2})
+          .backgroundColor(Color.White)
+          .alignItems(VerticalAlign.Center)
+          .padding({left: 9, top: 8, right: 9, bottom: 8})
+        }
+        .swipeAction({ end: () => { this.swipeAction() } })
+      })
+    }
+    .width("100%").height("100%")
+    .scrollBar(BarState.Off)
+  }
+
+  @Builder
+  tip(){
+    Row(){
+      Row(){
+        Image($r('[basic].media.icon_plaint')).width(13).aspectRatio(1)
+        Text('单次可借阅10本书')
+          .attributeModifier(new CustomTextStyle({size: 12, weight: 400, color: '#80000000'}))
+      }
+
+      Text(){
+        Span('新人首单')
+        Span('¥19.9').fontColor('#FFFF0000')
+        Span('可借')
+        Span('5本').fontColor('#FFFF0000')
+      }
+      .attributeModifier(new CustomTextStyle({size: 12, weight: 400, color: '#80000000'}))
+    }
+    .width("100%")
+    .padding({top: 10})
+    .justifyContent(FlexAlign.SpaceBetween)
+  }
+
+  @Builder
+  swipeAction(){
+    Row(){
+      Text('移除')
+        .attributeModifier(new CustomTextStyle({size: 16, weight: 400, color: '#FFFFFFFF'}))
+    }
+    .height('100%')
+    .borderRadius(12)
+    .margin({left: 10})
+    .backgroundColor(Color.Red)
+    .alignItems(VerticalAlign.Center)
+    .justifyContent(FlexAlign.Center)
+    .padding({left: 5, right: 5})
   }
 }

features/feature/src/main/ets/view/viewModel/ThirdViewModel.ets

@@ -12,11 +12,21 @@ export class ThirdViewModel{
   // 编辑模式
   @Trace editMode: boolean = false
 
+
   // 分类
   categoryList = ['全部', '可借', '已借光', '已预订']
 
 
+  // 更改 分类
   changeCategory(index: number) {
     this.categoryIndex = index
   }
+
+  // 切换编辑模式
+  changeEditMode() {
+    this.editMode = !this.editMode
+  }
+
+  // 更改选中状态
+  changeSelect() {}
 }

products/entry/src/main/ets/entryability/EntryAbility.ets

@@ -16,7 +16,7 @@ const DOMAIN = 0x0000;
 
 export default class EntryAbility extends UIAbility {
   async onCreate(_: Want, __: AbilityConstant.LaunchParam) {
-    this.context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET);
+    this.context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT);
   }
 
   onDestroy(): void {