|
|
@@ -1,6 +1,12 @@
|
|
|
import dayjs from 'dayjs'
|
|
|
import { noteDB } from '../database/NoteDB'
|
|
|
+import { DeleteDialog } from '../dialog/DeleteDialog'
|
|
|
import { NoteDBInfo } from '../models/Note'
|
|
|
+import { systemShare } from '@kit.ShareKit'
|
|
|
+import { uniformTypeDescriptor } from '@kit.ArkData'
|
|
|
+import { promptAction } from '@kit.ArkUI'
|
|
|
+import common from '@ohos.app.ability.common'
|
|
|
+
|
|
|
|
|
|
@Component
|
|
|
export struct Note {
|
|
|
@@ -18,6 +24,59 @@ export struct Note {
|
|
|
// onPageShow(): void {
|
|
|
// this.getList()
|
|
|
// }
|
|
|
+ deleteId:number=0
|
|
|
+
|
|
|
+ dialogController: CustomDialogController = new CustomDialogController({
|
|
|
+ builder: DeleteDialog({
|
|
|
+ delete:(isDelete:boolean)=>{
|
|
|
+ if(isDelete){
|
|
|
+ let ids=[] as number[]
|
|
|
+ ids.push(this.deleteId)
|
|
|
+ this.deleteData(ids)
|
|
|
+ this.deleteId=0
|
|
|
+
|
|
|
+ }else{
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }),
|
|
|
+ alignment: DialogAlignment.Center,
|
|
|
+ customStyle: true
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+ private colors:string[]=[
|
|
|
+ 'rgba(254, 222, 155, 1)',
|
|
|
+ 'rgba(255, 191, 220,1)',
|
|
|
+ 'rgba(211, 227, 253,1)'
|
|
|
+ ]
|
|
|
+
|
|
|
+ private heights:number[]=[
|
|
|
+ 100,
|
|
|
+ 150,
|
|
|
+ 130
|
|
|
+ ]
|
|
|
+
|
|
|
+ // 分享
|
|
|
+ shareData() {
|
|
|
+ try {
|
|
|
+ // 构造ShareData,需配置一条有效数据信息
|
|
|
+ const data = new systemShare.SharedData({
|
|
|
+ utd: uniformTypeDescriptor.UniformDataType.PLAIN_TEXT,
|
|
|
+ title: this.title,
|
|
|
+ content: this.content
|
|
|
+ })
|
|
|
+ const controller = new systemShare.ShareController(data)
|
|
|
+ const context = getContext() as common.UIAbilityContext;
|
|
|
+ // 进行分享面板显示
|
|
|
+ controller.show(context, {
|
|
|
+ previewMode: systemShare.SharePreviewMode.DETAIL,
|
|
|
+ selectionMode: systemShare.SelectionMode.SINGLE
|
|
|
+ })
|
|
|
+ } catch (error) {
|
|
|
+ promptAction.showToast({ message: '当前设备不支持分享' })
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
// 获取列表
|
|
|
async getList() {
|
|
|
@@ -81,6 +140,8 @@ export struct Note {
|
|
|
.height('100%')
|
|
|
.justifyContent(FlexAlign.SpaceEvenly)
|
|
|
}
|
|
|
+
|
|
|
+
|
|
|
aboutToAppear(): void {
|
|
|
this.getList()
|
|
|
}
|
|
|
@@ -91,43 +152,56 @@ export struct Note {
|
|
|
Column({ space: 10 }) {
|
|
|
Row() {
|
|
|
Text('标题')
|
|
|
- .fontSize(14)
|
|
|
- .fontColor(Color.Black)
|
|
|
+ .fontSize(16)
|
|
|
+ .fontColor('rgba(117, 104, 96, 1)')
|
|
|
|
|
|
Text('保存')
|
|
|
- .fontSize(14)
|
|
|
- .fontColor(Color.Black)
|
|
|
- .onClick(()=>{
|
|
|
+ .width(77)
|
|
|
+ .height(30)
|
|
|
+ .borderRadius(6)
|
|
|
+ .textAlign(TextAlign.Center)
|
|
|
+ .fontColor('rgba(255, 255, 255, 1)')
|
|
|
+ .border({ width: 1, color: 'rgba(117, 104, 96, 1)' })
|
|
|
+ .fontSize(12)
|
|
|
+ .backgroundColor('rgba(117, 104, 96, 1)')
|
|
|
+ .onClick(() => {
|
|
|
//修改笔记内容,新增笔记内容
|
|
|
//todo:
|
|
|
- if(this.noteId!=null){
|
|
|
+ if (this.noteId != null) {
|
|
|
this.update()
|
|
|
- }else{
|
|
|
+ } else {
|
|
|
this.insert()
|
|
|
}
|
|
|
- this.isShow=false
|
|
|
- this.noteId=null
|
|
|
- this.title=""
|
|
|
- this.content=""
|
|
|
+ this.isShow = false
|
|
|
+ this.noteId = null
|
|
|
+ this.title = ""
|
|
|
+ this.content = ""
|
|
|
|
|
|
})
|
|
|
|
|
|
}.width('100%')
|
|
|
.justifyContent(FlexAlign.SpaceBetween)
|
|
|
+
|
|
|
TextInput({ placeholder: '请输入笔记标题', text: this.title })
|
|
|
- .backgroundColor(Color.White)
|
|
|
+ .backgroundColor('rgba(254, 222, 155, 1)')
|
|
|
.border({ width: 1, color: Color.Black, radius: 6 })
|
|
|
.padding({ left: 10 })
|
|
|
.onChange((text) => {
|
|
|
+ if(text.length>6){
|
|
|
+ promptAction.showToast({
|
|
|
+ message:"标题不能超过6个字"
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
this.title = text
|
|
|
})
|
|
|
- //
|
|
|
+ //
|
|
|
Text('内容')
|
|
|
.fontSize(14)
|
|
|
- .fontColor(Color.White)
|
|
|
+ .fontColor('rgba(117, 104, 96, 1)')
|
|
|
.width('100%')
|
|
|
TextArea({ placeholder: '请输入笔记内容', text: this.content })
|
|
|
- .backgroundColor(Color.White)
|
|
|
+ .backgroundColor('rgba(254, 222, 155, 1)')
|
|
|
.border({ width: 1, color: Color.Black, radius: 6 })
|
|
|
.layoutWeight(1)
|
|
|
.padding(10)
|
|
|
@@ -137,21 +211,22 @@ export struct Note {
|
|
|
}
|
|
|
.padding({ bottom: 160 })
|
|
|
|
|
|
- // if (this.routerParams.id) {
|
|
|
- // 底部按钮
|
|
|
- Row({ space: 10 }) {
|
|
|
- Button('分享')
|
|
|
- .type(ButtonType.Normal)
|
|
|
- .backgroundColor(Color.Pink)
|
|
|
- .borderRadius(10)
|
|
|
- .layoutWeight(1)
|
|
|
- .onClick(() => {
|
|
|
- // this.shareNote()
|
|
|
- })
|
|
|
+ if (this.noteId) {
|
|
|
+ // 底部按钮
|
|
|
+ Row({ space: 10 }) {
|
|
|
+ Button('分享')
|
|
|
+ .type(ButtonType.Normal)
|
|
|
+ .backgroundColor('rgba(254, 222, 155, 1)')
|
|
|
+ .borderRadius(10)
|
|
|
+ .layoutWeight(1)
|
|
|
+ .onClick(() => {
|
|
|
+ this.shareData()
|
|
|
+ })
|
|
|
// }
|
|
|
|
|
|
}.width('100%')
|
|
|
- .padding({ bottom: 80 })
|
|
|
+ .padding({ bottom: 80 })
|
|
|
+ }
|
|
|
}
|
|
|
.padding({ left: 15, right: 15, top: 20 })
|
|
|
}
|
|
|
@@ -160,33 +235,72 @@ export struct Note {
|
|
|
Stack({ alignContent: Alignment.BottomEnd }) {
|
|
|
if (this.list.length!=0) {
|
|
|
Column() {
|
|
|
- List() {
|
|
|
- ForEach(this.list, (item: NoteDBInfo) => {
|
|
|
- ListItem() {
|
|
|
- Row() {
|
|
|
+ WaterFlow() {
|
|
|
+ ForEach(this.list, (item: NoteDBInfo,index:number) => {
|
|
|
+ FlowItem() {
|
|
|
+ Column({space:30}) {
|
|
|
Column() {
|
|
|
- Text(item.title)
|
|
|
- .fontSize(16)
|
|
|
- .fontColor(Color.Black)
|
|
|
+ Row() {
|
|
|
+ Text(item.title)
|
|
|
+ .fontSize(16)
|
|
|
+ .fontColor(Color.Black)
|
|
|
+
|
|
|
+ Image($r('app.media.delete'))
|
|
|
+ .width(20)
|
|
|
+ .aspectRatio(1)
|
|
|
+ .onClick(()=>{
|
|
|
+ this.dialogController.open()
|
|
|
+ this.deleteId=item.id as number
|
|
|
+
|
|
|
+ // let ids=[] as number[]
|
|
|
+ // ids.push(item.id as number)
|
|
|
+ // this.deleteData(ids)
|
|
|
+
|
|
|
+ })
|
|
|
+
|
|
|
+ }.width('100%')
|
|
|
+ .justifyContent(FlexAlign.SpaceBetween)
|
|
|
+
|
|
|
+ Text(item.content)
|
|
|
+ .fontSize(12)
|
|
|
+ .fontColor(Color.Gray)
|
|
|
+ .textIndent(10)
|
|
|
+ .maxLines(2)
|
|
|
+ // 超长文本使用省略号代替
|
|
|
+ .textOverflow({overflow: TextOverflow.Ellipsis})
|
|
|
+
|
|
|
Text(dayjs(item.date_added)
|
|
|
.format('YYYY年MM月DD日'))
|
|
|
.fontSize(12)
|
|
|
- .fontColor(Color.Black)
|
|
|
+ .fontColor(Color.Gray)
|
|
|
.lineHeight(25)
|
|
|
}
|
|
|
+ .height('100%')
|
|
|
+ .justifyContent(FlexAlign.SpaceAround)
|
|
|
.alignItems(HorizontalAlign.Start)
|
|
|
|
|
|
- Column() {
|
|
|
- Image($r('app.media.icon'))
|
|
|
- .width(22)
|
|
|
- .aspectRatio(1)
|
|
|
- }
|
|
|
- .justifyContent(FlexAlign.Center)
|
|
|
- .height('100%')
|
|
|
}
|
|
|
- .width('100%')
|
|
|
+ // .width('100%')
|
|
|
+ .borderRadius(20)
|
|
|
+ .width('50%')
|
|
|
+ .height(this.heights[index%3])
|
|
|
+ .backgroundColor(this.colors[index%3])
|
|
|
.justifyContent(FlexAlign.SpaceBetween)
|
|
|
- .padding({ left: 15, right: 15 })
|
|
|
+ .padding({ left: 15, right: 15,top:10 })
|
|
|
+ .shadow({
|
|
|
+ // 模糊半径
|
|
|
+ radius: 10,
|
|
|
+ // 阴影类型
|
|
|
+ type: ShadowType.COLOR,
|
|
|
+ // 阴影颜色
|
|
|
+ color: 'rgba(181, 228, 255,0.5)',
|
|
|
+ // X 轴偏移
|
|
|
+ offsetX: -3,
|
|
|
+ // Y 轴偏移
|
|
|
+ offsetY: 10,
|
|
|
+ // 是否内部填充,值为布尔型,默认为flase
|
|
|
+ fill: false
|
|
|
+ })
|
|
|
.onClick(() => {
|
|
|
this.isShow=true
|
|
|
this.noteId=item.id as number
|
|
|
@@ -194,28 +308,30 @@ export struct Note {
|
|
|
this.content=item.content
|
|
|
})
|
|
|
}
|
|
|
- .height(72)
|
|
|
.transition({ type: TransitionType.Delete, opacity: 0 })
|
|
|
- .swipeAction({
|
|
|
- end: {
|
|
|
- builder:this.swipeActionEnd(item.id),
|
|
|
- },
|
|
|
- edgeEffect: SwipeEdgeEffect.None
|
|
|
- })
|
|
|
+ // .swipeAction({
|
|
|
+ // end: {
|
|
|
+ // builder:this.swipeActionEnd(item.id),
|
|
|
+ // },
|
|
|
+ // edgeEffect: SwipeEdgeEffect.None
|
|
|
+ // })
|
|
|
})
|
|
|
// 底部占位
|
|
|
- ListItem()
|
|
|
+ FlowItem()
|
|
|
.height(126)
|
|
|
}
|
|
|
// 每行之间的分界线
|
|
|
- .divider({
|
|
|
- strokeWidth: 1,
|
|
|
- color: Color.Pink,
|
|
|
- startMargin: 15,
|
|
|
- endMargin: 15
|
|
|
- })
|
|
|
+ // .divider({
|
|
|
+ // strokeWidth: 1,
|
|
|
+ // color: Color.Pink,
|
|
|
+ // startMargin: 15,
|
|
|
+ // endMargin: 15
|
|
|
+ // })
|
|
|
.width('100%')
|
|
|
.height('100%')
|
|
|
+ .columnsTemplate('1fr 1fr')
|
|
|
+ .columnsGap(8)
|
|
|
+ .rowsGap(10)
|
|
|
}
|
|
|
.height('100%')
|
|
|
} else {
|
|
|
@@ -227,6 +343,13 @@ export struct Note {
|
|
|
.padding({left:16,right:16,top:10,bottom:10})
|
|
|
.backgroundColor('#d1fd45')
|
|
|
.borderRadius(15)
|
|
|
+ .onClick(()=>{
|
|
|
+ this.isShow=true
|
|
|
+ this.noteId=null
|
|
|
+ this.title=""
|
|
|
+ this.content=""
|
|
|
+
|
|
|
+ })
|
|
|
|
|
|
}.width('100%')
|
|
|
.height('100%')
|
|
|
@@ -250,6 +373,7 @@ export struct Note {
|
|
|
.justifyContent(FlexAlign.Center)
|
|
|
.padding({ left: 15, right: 15 })
|
|
|
}
|
|
|
+ .padding(20)
|
|
|
.bindSheet($$this.isShow,this.AddOrEditBuilder(),{
|
|
|
height:400,
|
|
|
showClose:false
|