长按分组底部弹窗

长按分组底部弹窗

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

@@ -40,9 +40,11 @@ export class folderList {
 
   topUpdateTime:Date
 
+  isUpdateReminder:boolean
 
 
-  constructor(id:number,title:string,countNumber:number,bookImage:Resource,bookType:string,newUpdateBook:string = '',isShow:boolean = false,isTop:boolean = false,describe:string = '', topUpdateTime:Date = new Date()) {
+
+  constructor(id:number,title:string,countNumber:number,bookImage:Resource,bookType:string,newUpdateBook:string = '',isShow:boolean = false,isTop:boolean = false,describe:string = '', topUpdateTime:Date = new Date(),isUpdateReminder:boolean = false) {
     this.id = id
     this.title = title
     this.bookType = bookType
@@ -53,5 +55,6 @@ export class folderList {
     this.newUpdateBook = newUpdateBook
     this.topUpdateTime = topUpdateTime
     this.isShow = isShow
+    this.isUpdateReminder = isUpdateReminder
   }
 }

entry/src/main/ets/componets/group/GroupType.ets

@@ -11,15 +11,17 @@ export default struct groupTypeComponent {
   build() {
     if (this.groupCoverShow){
       Stack(){
+        groupTypePanel({
+          groupCoverShow:this.groupCoverShow
+        }).zIndex(9999)
         Rect()
           // .fillOpacity(0)
           .height('85%')
           .width('100%')
           .fill('rgba(0, 0, 0, 0.45)')
-        groupTypePanel({
-          groupCoverShow:this.groupCoverShow
-        }).zIndex(9999)
-      }.alignContent(Alignment.Top)
+          .offset({y:20})
+
+      }.alignContent(Alignment.TopStart)
     } else {
       Flex(
         {
@@ -29,6 +31,9 @@ export default struct groupTypeComponent {
       ) {
         Scroll() {
           Row({ space: 10 }) {
+            BookType({ title: '分组', bookType: this.bookType }).onClick(() => {
+              this.bookType = '分组'
+            })
             BookType({ title: '全部', bookType: this.bookType }).onClick(() => {
               this.bookType = '全部'
             })

entry/src/main/ets/componets/group/groupTypePanel.ets

@@ -151,8 +151,9 @@ export default struct groupTypePanel{
       }
 
     }
+    .offset({y:-15})
     .borderRadius({bottomLeft:20,bottomRight:20})
-    .padding({left:20,right:20,top:12,bottom:20})
+    .padding({left:15,right:15,top:12,bottom:20})
     .width('100%').backgroundColor(Color.White)
   }
   @State tagLockContent:string = '长按底部tab栏书架图标可锁定分组标签栏，再次长按解锁，锁定后左右滑动将直接切换小说，漫画，有声书分组大类。'

entry/src/main/ets/pages/view/bookShelf/BookFolder.ets

@@ -1,8 +1,7 @@
 import BookOverlay from '../../../componets/bookDetail/BookOverlay'
 import { folderList } from '../../../componets/dataList/folderList'
 import {novelPageList} from '../../../viewData/bookData'
-import BookFolderGridManage from './Manage/bookManage/BookFolderGridManage'
-import BookFolderInfoManage from './Manage/bookManage/BookFolderInfoManage'
+import FolderInfoDialog from '../dialog/FolderInfoDialog'
 
 /**
  * 文件夹
@@ -11,11 +10,13 @@ import BookFolderInfoManage from './Manage/bookManage/BookFolderInfoManage'
 export default struct BookFolder {
   @Prop EXHIBIT:string
   @State folderCheckList:folderList[] = []
+  @State isShow:boolean = false
+  @State folder:folderList = new folderList(0,'',0,$r('app.media.folder_test'),'')
   build() {
     Flex({ direction: FlexDirection.Row, wrap: FlexWrap.Wrap,alignContent:FlexAlign.Center}){
       ForEach(novelPageList, (item: folderList,index:number) => {
         if (this.EXHIBIT === '宫格'){
-          this.bookInfoGrid(item.title,item.bookImage,item.countNumber)
+          this.bookInfoGrid(item)
         } else {
           this.bookFolderInfo(item)
         }
@@ -26,7 +27,7 @@ export default struct BookFolder {
   }
 
 
-  @Builder bookInfoGrid(title:string,bookImage:Resource,countNumer:number){
+  @Builder bookInfoGrid(item: folderList){
     Column({
       space:5
     }) {
@@ -36,8 +37,19 @@ export default struct BookFolder {
             Column(){
 
             }
+            .gesture(
+              LongPressGesture({ repeat: true,duration:500 })
+                .onAction((event: GestureEvent) => {
+                  if (event.repeat) {
+                    if (!this.isShow) {
+                      this.folder = item
+                      this.isShow = true
+                      this.folderInfoDialog?.open()
+                    }
+                  }
+                }))
             .width(88).height(120)
-            .backgroundImage(bookImage)
+            .backgroundImage(item.bookImage)
             .backgroundImageSize({width:88,height:120})
             .zIndex(2)
 
@@ -57,15 +69,15 @@ export default struct BookFolder {
 
         Row().width(100).height(20).backgroundColor('rgba(255, 255, 255, 0.6)').borderRadius(10)
       }
-      Text(title)
+      Text(item.title)
         .fontSize(15)
         .fontWeight(700)
         .textOverflow({
           overflow:TextOverflow.Ellipsis
         })
         .ellipsisMode(EllipsisMode.END)
         .maxLines(2)
-      Text(`共${countNumer}本`).fontSize(12).fontColor('rgb(174,174,174)')
+      Text(`共${item.countNumber}本`).fontSize(12).fontColor('rgb(174,174,174)')
         .textOverflow({
           overflow:TextOverflow.Ellipsis
         })
@@ -95,6 +107,18 @@ export default struct BookFolder {
           bookHeight:80,
           isTop:folderList.isTop
         })
+          .gesture(
+          LongPressGesture({ repeat: true,duration:500 })
+            .onAction((event: GestureEvent) => {
+              if (event.repeat) {
+
+                if (!this.isShow) {
+                  this.folder = folderList
+                  this.isShow = true
+                  this.folderInfoDialog?.open()
+                }
+              }
+            }))
         Column({
           space:24
         })
@@ -129,4 +153,25 @@ export default struct BookFolder {
     .padding(10)
     .borderRadius(10)
   }
+
+
+  folderInfoDialog: CustomDialogController | null = new CustomDialogController({
+    builder: FolderInfoDialog({
+      itemData:this.folder,
+      cancel: () => {
+        this.exitDialog()
+      }
+    }),
+    cancel: this.exitDialog,
+    autoCancel: true,
+    width:'100%',
+    alignment: DialogAlignment.Bottom,
+    customStyle:true
+
+  })
+  //退出弹框
+  exitDialog(){
+    this.isShow = false
+  }
+
 }

entry/src/main/ets/pages/view/dialog/FolderInfoDialog.ets

@@ -0,0 +1,101 @@
+import { folderList } from '../../../componets/dataList/folderList'
+
+class buttonList {
+  id:number
+  title:string
+  icon:Resource
+  constructor(id:number,title:string,icon:Resource){
+    this.id = id
+    this.title = title
+    this.icon = icon
+  }
+}
+
+
+@CustomDialog
+/**
+ * 文件夹长按弹窗
+ */
+export default struct FolderInfoDialog{
+  controller?: CustomDialogController
+  //推送提醒
+  @Link @Watch('itemDataFunction')itemData:folderList
+  @State pushReminder:boolean = false
+  @State buttonListInfo:buttonList[] = [
+    new buttonList(1,'重命名',$r('app.media.edit')),
+    new buttonList(2,'置顶',$r('app.media.top')),
+    new buttonList(3,'移动至',$r('app.media.folder')),
+    new buttonList(4,'加入书单',$r('app.media.shelf')),
+    new buttonList(5,'封面样式',$r('app.media.style_icon')),
+    new buttonList(6,'隐藏分组',$r('app.media.hide')),
+    new buttonList(7,'解散分组',$r('app.media.disband')),
+    new buttonList(8,'删除',$r('app.media.delete_svg'))
+  ]
+  itemDataFunction(){
+    console.log(JSON.stringify(this.itemData))
+  }
+  cancel: () => void = () => {
+  }
+
+  build() {
+    Column(){
+      Flex({
+        justifyContent:FlexAlign.SpaceBetween,
+        alignItems:ItemAlign.Center
+      }){
+        Column(){
+          Text(this.itemData.title).fontColor('rgba(0, 0, 0, 0.88)').fontSize(16).fontWeight(500).lineHeight(24)
+          Text(`共${(this.itemData.countNumber)}本`).fontColor('rgba(0, 0, 0, 0.45)').fontWeight(400).lineHeight(20).fontSize(12)
+        }
+        Row(){
+          Text('更新提醒')
+          Toggle({ type: ToggleType.Switch, isOn: this.itemData.isUpdateReminder})
+            .selectedColor("#F60").hoverEffect(HoverEffect.None)
+            .onChange(()=>{
+              this.itemData.isUpdateReminder = !this.itemData.isUpdateReminder
+            })
+        }
+      }.padding(20)
+      Divider().strokeWidth(0.5).padding({bottom:16})
+      Flex({
+        direction: FlexDirection.Row, wrap: FlexWrap.Wrap,
+        justifyContent:FlexAlign.Start
+      }){
+        ForEach(this.buttonListInfo,(item:buttonList)=>{
+          this.titleBuilder(item)
+        })
+      }
+      Divider().strokeWidth(0.5).padding({bottom:16})
+      Column(){
+        Text('取消').fontColor('rgba(0, 0, 0, 0.88)').fontSize(16).fontWeight(400).lineHeight(24).textAlign(TextAlign.Center)
+      }
+      .onClick(()=>{
+        this.cancel()
+        this.controller?.close()
+      })
+      .alignItems(HorizontalAlign.Center)
+      .padding({bottom:16})
+    }
+    .borderRadius({topLeft:20,topRight:20})
+    .backgroundColor(Color.White)
+    .width('100%')
+  }
+
+  @Builder titleBuilder(item:buttonList) {
+    Column({
+      space:8
+    }){
+      Column(){
+        Image(item.icon)
+          .width(24).height(24).margin(12)
+      }.borderRadius(50)
+      .border({width:0.5,color:'rgba(0, 0, 0, 0.15)'})
+      Text(item.title)
+    }
+    .onClick(()=>{
+      console.log(item.id + '')
+    })
+    .padding({bottom:28})
+    .width('25%')
+  }
+}