Merge pull request #24 from mgz0227/dev_2008

管理书籍界面和书架公用组件分离

entry/src/main/ets/componets/bookManage/BookInfoGridManage.ets

@@ -0,0 +1,77 @@
+import { BookList } from '../dataList/bookList'
+
+@Component
+/**
+ * 书签_宫格
+ */
+export default struct BookInfoGridManage{
+  @Prop bookId:string
+  //标题
+  @Prop title:string
+  //描述
+  @Prop describe:string
+  //章节
+  @Prop chapter:string
+  //图片
+  @Prop bookImage:Resource
+
+  @Prop isJoin:boolean
+
+  @Prop @Watch('isCheckChange')allCheck:boolean = false
+
+  @Link checkBookList:BookList[]
+
+  isCheckChange(){
+    if (this.allCheck) {
+      this.checkBookList.push(new BookList(this.bookId,this.title,this.describe,this.chapter,this.bookImage,this.isJoin))
+    } else {
+      this.checkBookList = this.checkBookList.filter(book => book.bookId !== this.bookId);
+    }
+  }
+
+
+  build() {
+    Column() {
+      Column(){
+        Flex({
+          alignItems: ItemAlign.End,
+          justifyContent:FlexAlign.End
+        }){
+          Checkbox({
+            name: this.title
+          })
+            .selectedColor($r('app.color.theme_color'))
+            .unselectedColor('rgba(255, 255, 255, 0.6)')
+            .select(this.allCheck)
+            .onClick(()=>{
+              this.allCheck = !this.allCheck
+            })
+        }
+        .borderRadius(10)
+        .backgroundColor('rgba(0, 0, 0, 0.3)')
+        .width(100).height(120)
+      }
+      .borderRadius(10)
+      .width(100).height(120)
+      .backgroundImage(this.bookImage)
+      .backgroundImageSize({width:100,height:120})
+      Text(this.title)
+        .fontSize(15)
+        .fontWeight(700)
+        .textOverflow({
+          overflow:TextOverflow.Ellipsis
+        })
+        .ellipsisMode(EllipsisMode.END)
+        .maxLines(2)
+
+      Text(this.chapter).fontSize(12).fontColor('rgb(174,174,174)')
+        .textOverflow({
+          overflow:TextOverflow.Ellipsis
+        })
+        .ellipsisMode(EllipsisMode.END)
+        .fontWeight(500)
+        .maxLines(1)
+    }
+    .padding({ left:8,right:8,bottom:5,top:5 })
+  }
+}

entry/src/main/ets/componets/bookManage/BookInfoManage.ets

@@ -0,0 +1,87 @@
+import { BookList } from '../dataList/bookList'
+import { JSON } from '@kit.ArkTS'
+
+@Component
+/**
+ * 书签
+ */
+export default struct BookInfoManage{
+  @Prop bookId:string
+  //标题
+  @Prop title:string
+  //描述
+  @Prop describe:string
+  //章节
+  @Prop chapter:string
+  //图片
+  @Prop bookImage:Resource
+
+  @Prop isJoin:boolean
+
+  @Prop @Watch('isCheckChange')allCheck:boolean = false
+
+  @Link checkBookList:BookList[]
+
+  isCheckChange(){
+    if (this.allCheck) {
+      this.checkBookList.push(new BookList(this.bookId,this.title,this.describe,this.chapter,this.bookImage,this.isJoin))
+    } else {
+      this.checkBookList = this.checkBookList.filter(book => book.bookId !== this.bookId);
+    }
+  }
+
+  build() {
+
+    Flex(
+      {
+        alignItems:ItemAlign.Center,
+        justifyContent:FlexAlign.SpaceBetween
+      }
+    ) {
+      Row({
+        space:20
+      }){
+        Image(this.bookImage).width(60).height(80)
+        Column({
+          space:24
+        })
+        {
+          Text(this.title)
+            .fontWeight(700)
+          Column(){
+            Text(this.describe).fontSize(12).fontColor('rgb(174,174,174)')
+              .textOverflow({
+                overflow:TextOverflow.Ellipsis
+              })
+              .ellipsisMode(EllipsisMode.END)
+              .fontWeight(500)
+              .maxLines(1)
+            Text(this.chapter).fontSize(12).fontColor('rgb(174,174,174)')
+              .textOverflow({
+                overflow:TextOverflow.Ellipsis
+              })
+              .ellipsisMode(EllipsisMode.END)
+              .fontWeight(500)
+              .maxLines(1)
+          }
+          .width('40%')
+          .alignItems(HorizontalAlign.Start)
+        }
+        .alignItems(HorizontalAlign.Start)
+      }
+      Row() {
+        Checkbox({
+          name: this.title
+        })
+          .selectedColor($r('app.color.theme_color'))
+          .select(this.allCheck)
+          .onClick(()=>{
+            this.allCheck = !this.allCheck
+          })
+      }
+      .padding({ left: 15, right: 15, bottom: 5, top: 5 })
+    }
+    .padding(10)
+    .borderRadius(10)
+  }
+}

entry/src/main/ets/componets/bookManage/bookListManage.ets

@@ -0,0 +1,134 @@
+import { BookList } from '../dataList/bookList'
+import { promptAction } from '@kit.ArkUI'
+import BookInfoManage from './BookInfoManage'
+import BookInfoGridManage from './BookInfoGridManage'
+import delDialogExample from '../common/delDialog'
+
+@Component
+export default struct bookListManage{
+  @Link @Watch('onIsClearChange') isClear:boolean
+  @Link allCheck:boolean
+  @Prop @Watch('onIsEXHIBITChange') EXHIBIT:string
+  @State @Watch('isChangeBookList')checkBookList:BookList[] = []
+  @Link showBookList:BookList[]
+  @Link checkNumber:number
+
+
+  //监听isClear变化
+  onIsClearChange() {
+    if (this.checkBookList === null || this.checkBookList.length === 0) {
+      promptAction.showToast({
+        message: '请选择要删除的内容',
+        duration: 1000,
+      })
+      this.isClear = false
+      return
+    }
+    if (this.isClear) {
+      this.bookInfoDel?.open()
+    }
+  }
+
+  deleteBook() {
+    for (let index = 0; index < this.checkBookList.length; index++) {
+     this.showBookList = this.showBookList.filter(book => book.bookId !== this.checkBookList[index].bookId);
+    }
+    console.log(JSON.stringify(this.showBookList))
+    this.isClear = false
+    this.allCheck = false
+    this.checkBookList = []
+    promptAction.showToast({
+      message: '删除成功',
+    })
+  }
+
+  isChangeBookList() {
+    this.checkNumber = this.checkBookList.length
+  }
+
+  //监听EXHIBIT变化
+  onIsEXHIBITChange() {
+    console.log(this.EXHIBIT)
+  }
+
+  //弹窗
+  bookInfoDel: CustomDialogController | null = new CustomDialogController({
+    builder: delDialogExample({
+      cancel: ()=> { this.onCancel() },
+      confirm: ()=> { this.onAccept() }
+    }),
+    cancel: this.exitApp,
+    autoCancel: true,
+    alignment: DialogAlignment.Center,
+    gridCount: 4,
+    customStyle: false,
+    cornerRadius: 25,
+  })
+
+  onCancel() {
+    this.isClear = false
+  }
+
+  onAccept() {
+    this.deleteBook()
+  }
+
+  exitApp() {
+    this.isClear = false
+  }
+
+  build() {
+    if (this.showBookList === null || this.showBookList.length === 0) {
+      Column() {
+        Image($r('app.media.no_record')).width(200).height(200)
+        Text('暂无浏览记录').fontSize(12).fontColor('rgba(96, 96, 96, 0.6)').fontWeight(500).padding(5)
+      }
+      .margin({ top: 120 })
+
+    } else {
+      Column(
+        {space:10}
+      ){
+        if (this.EXHIBIT === '宫格') {
+          Flex({ direction: FlexDirection.Row, wrap: FlexWrap.Wrap,alignContent:FlexAlign.Center}){
+            ForEach(this.showBookList, (item: BookList,index:number) => {
+              BookInfoGridManage({
+                bookId:item.bookId,
+                title: item.title + this.EXHIBIT,
+                describe: item.describe,
+                chapter: item.chapter,
+                bookImage: item.bookImage,
+                isJoin:item.isJoin,
+                allCheck:this.allCheck,
+                checkBookList:this.checkBookList
+              }).width('33%')
+            })
+          }
+        } else {
+          Column(
+            { space: 10 }
+          ) {
+            ForEach(this.showBookList, (item: BookList,index:number) => {
+              BookInfoManage({
+                bookId:item.bookId,
+                title: item.title,
+                describe: item.describe,
+                chapter: item.chapter,
+                bookImage: item.bookImage,
+                isJoin:item.isJoin,
+                allCheck:this.allCheck,
+                checkBookList:this.checkBookList
+              })
+            })
+          }
+          .backgroundColor('rgba(255,250,247,0.8)')
+        }
+        // Divider().vertical(false)
+        // Row() {
+        //   Text('END').fontColor('rgba(84, 84, 84, 0.30)').fontWeight(500)
+        // }
+      }
+
+    }
+  }
+}

entry/src/main/ets/componets/dataList/bookList.ets

@@ -1,4 +1,6 @@
 export class BookList {
+
+  bookId:string
   /**
    * 标题
    */
@@ -26,7 +28,8 @@ export class BookList {
 
 
 
-  constructor( title:string,describe:string , chapter:string,  bookImage:Resource,isJoin:boolean = false) {
+  constructor(bookId:string, title:string,describe:string , chapter:string,  bookImage:Resource,isJoin:boolean = false) {
+    this.bookId = bookId
     this.title = title
     this.isJoin = isJoin
     this.describe = describe