Forráskód Böngészése

feat: 完成 书籍分类 封面模式的显示

YuJing 1 hónapja
szülő
commit
607924a673

BIN
commons/basic/src/main/resources/base/media/png_book_CompCover.png


+ 32 - 1
features/feature/src/main/ets/components/BuilderIndex.ets

@@ -58,15 +58,46 @@ export function bookListItemComp(item: RepeatItem<BookListItem>){
 }
 
 
+// 书籍Item - 封面模式
+@Builder
+export function bookItemCompCover(item: RepeatItem<BookItem>, onClick: () => void){
+ Row(){
+   RelativeContainer(){
+     Image(item.item.coverUrl)
+       .width(200)
+       .aspectRatio(1)
+       .alt($r('[basic].media.png_TopRecommend'))
+       .alignRules({
+         middle: { anchor: '__container__', align: HorizontalAlign.Center },
+         top: { anchor: '__container__', align: VerticalAlign.Top }
+       })
+
+     Image(true ? $r('[basic].media.icon_deerIncrease') : $r('[basic].media.icon_reduce'))
+       .width(24)
+       .aspectRatio(1)
+       .alignRules({
+         right: { anchor: '__container__', align: HorizontalAlign.End },
+         bottom: { anchor: '__container__', align: VerticalAlign.Bottom }
+       })
+   }.width('100%').height('100%')
+ }
+ .width('100%').height(214)
+ .padding({right: 19, bottom: 15, top: 2})
+ .backgroundImageSize({width: '100%', height: '100%'})
+ .backgroundImage($r('[basic].media.png_book_CompCover'))
+}
+
+
 
 // 书籍Item
 @Builder
 export function bookItemComp(item: RepeatItem<BookItem>, onClick: () => void){
   Row({space: 11}){
-    Image($r('[basic].media.png_TopRecommend'))
+    Image(item.item.coverUrl)
       .width(86)
       .aspectRatio(1)
       .borderRadius(12)
+      .alt($r('[basic].media.png_TopRecommend'))
 
     Column({space: 3}){
       Text(item.item?.bookTitle)

+ 7 - 2
features/feature/src/main/ets/view/SecondView.ets

@@ -1,7 +1,7 @@
 import { DeerSearch } from '../components/DeerSearch'
 import { SecondViewModel } from './viewModel/SecondViewModel'
 import { CustomTextStyle } from '../style/CustomTextStyle'
-import { bookItemComp } from '../components/BuilderIndex'
+import { bookItemComp, bookItemCompCover } from '../components/BuilderIndex'
 import { BookItem, BookListTypeList } from '../model/BookModelIndex'
 import { cert } from '@kit.DeviceCertificateKit'
 
@@ -130,7 +130,12 @@ export struct SecondView {
 
                 Repeat(this.vm.bookList)
                   .each((item: RepeatItem<BookItem>) => {
-                    bookItemComp(item, () => {})
+                    // todo 切换封面模式
+                    if(this.vm.showMode) {
+                      bookItemComp(item, () => {})
+                    } else {
+                      bookItemCompCover(item, () => {})
+                    }
                   })
               }
               .width("100%")

+ 3 - 1
features/feature/src/main/ets/view/viewModel/SecondViewModel.ets

@@ -17,7 +17,7 @@ export class SecondViewModel{
   // 是否已读
   @Trace isRead: boolean = false
   // 显示模式 0 - 列表 1 - 封面
-  @Trace showMode: number = 0
+  @Trace showMode: number = 1
 
   // 打开年龄选择弹窗
   @Trace openAgeDialog: boolean = false
@@ -97,6 +97,8 @@ export class SecondViewModel{
       this.query.minAge = 10
       this.query.maxAge = undefined
     }
+
+    this.getBookList()
   }
 
   // 开启选择分类弹窗