feat: 完成 购物车 部分UI

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

@@ -1,96 +1,74 @@
-import { Pet, RDBMapper, RelationalStoreUtils, Test } from 'basic';
+import { CustomTextStyle } from "../style/CustomTextStyle";
+import { ThirdViewModel } from "./viewModel/ThirdViewModel";
 
-@Component
+
+@ComponentV2
 export struct ThirdView {
-  @State list: Test[] = []
-  @State list2: Pet[] = []
-  id1: number = 0
-  id2: number = 0
-  petMapper: RDBMapper<Pet> = new RDBMapper(Pet)
-  petMapper2: RDBMapper<Test> = new RDBMapper(Test)
+  vm: ThirdViewModel = new ThirdViewModel();
 
   build() {
     Column() {
-      Row() {
-        Button('测试新增')
-          .onClick(() => {
-            RelationalStoreUtils.insert(Test, { name: 'test1', age: 18 }, (id) => {
-              console.log('insert success');
-              this.id1 = id
-              let list = RelationalStoreUtils.getListSync(Test)
-              this.list = list
-              console.log('list:', JSON.stringify(list))
-            })
-          })
-
-        Button('测试修改')
-          .onClick(() => {
-            RelationalStoreUtils.updateItemById(Test, { id: this.id1, name: '测试1修改', age: 20 }, () => {
-              console.log('insert success');
-              let list = RelationalStoreUtils.getListSync(Test)
-              this.list = list
-              console.log('list:', JSON.stringify(list))
-            })
-          })
-        Button('测试删除')
-          .onClick(() => {
-            RelationalStoreUtils.deleteItemById(Test, this.id1)
-            console.log('insert success');
-            let list = RelationalStoreUtils.getListSync(Test)
-            this.list = list
-            console.log('list:', JSON.stringify(list))
-          })
-      }
-      .width('100%')
-      .justifyContent(FlexAlign.SpaceAround)
-      .margin({ bottom: 30 })
+      Column({space: 20}){
+        Row(){
+          Text('书包')
+            .attributeModifier(new CustomTextStyle({size: 18, weight: 500, color: '#FF111111'}))
+        }.justifyContent(FlexAlign.Center)
 
-      Text(JSON.stringify(this.list))
-        .font({ size: 20 })
-        .margin({ bottom: 20 })
+        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'}))
 
-      Row() {
-        Button('测试新增2')
-          .onClick(() => {
-            this.petMapper.insert({ name: 'test1', tag: '标签' }, (id: number) => {
-              console.log('insert success');
-              this.id2 = id
-              let list = this.petMapper.getListSync()
-              this.list2 = list
-              console.log('list:', JSON.stringify(list))
-            })
-          })
+                    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)
 
-        Button('测试修改2')
-          .onClick(() => {
-            this.petMapper.updateItemById({ id: this.id2, name: '测试1修改', tag: '标签2' }, () => {
-              console.log('insert success');
-              let list = this.petMapper.getListSync()
-              this.list2 = list
-              console.log('list:', JSON.stringify(list))
-            })
-          })
-        Button('测试删除2')
-          .onClick(() => {
-            this.petMapper.deleteItemByIdSync(this.id2)
-            console.log('insert success');
-            let list = this.petMapper.getListSync()
-            this.list2 = list
-            console.log('list:', JSON.stringify(list))
-          })
+          Row(){
+            Text('编辑')
+              .attributeModifier(new CustomTextStyle({size: 14, weight: 600}))
+          }
+          .width(60)
+          .borderRadius(25)
+          .border({width: 2})
+          .backgroundColor('#FECF2F')
+          .padding({top: 8, bottom: 8})
+          .justifyContent(FlexAlign.Center)
+        }
+        .width("100%")
+        .alignItems(VerticalAlign.Center)
+        .padding({left: 16, right: 16})
       }
       .width('100%')
-      .justifyContent(FlexAlign.SpaceAround)
-      .margin({ bottom: 30 })
-
-      Text(JSON.stringify(this.list2))
-        .font({ size: 20 })
-        .margin({ bottom: 20 })
-
+      .backgroundColor(Color.White)
+      .padding({top: this.vm.safeTop, })
     }
-    .justifyContent(FlexAlign.Center)
-    .alignItems(HorizontalAlign.Center)
-    .height('100%')
     .width('100%')
+    .height('100%')
+    .backgroundColor('#F7F9FA')
   }
 }

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

@@ -0,0 +1,22 @@
+import { YTAvoid } from "basic";
+
+
+@ObservedV2
+export class ThirdViewModel{
+
+  @Trace safeBottom = AppStorage.get(YTAvoid.SAFE_BOTTOM_KEY) as number;
+  @Trace safeTop = AppStorage.get(YTAvoid.SAFE_TOP_KEY) as number;
+
+  // 当前分类索引
+  @Trace categoryIndex: number = 0
+  // 编辑模式
+  @Trace editMode: boolean = false
+
+  // 分类
+  categoryList = ['全部', '可借', '已借光', '已预订']
+
+
+  changeCategory(index: number) {
+    this.categoryIndex = index
+  }
+}