|
@@ -1,12 +1,23 @@
|
|
|
import { YTAvoid, yTRouter } from 'basic'
|
|
import { YTAvoid, yTRouter } from 'basic'
|
|
|
import { photoAccessHelper } from '@kit.MediaLibraryKit';
|
|
import { photoAccessHelper } from '@kit.MediaLibraryKit';
|
|
|
-
|
|
|
|
|
|
|
+import { DiaryDatePicker } from '../components/DiaryDatePicker';
|
|
|
|
|
+import { DiaryData } from '../models';
|
|
|
|
|
+import { DiaryViewModel } from '../viewModels/DiaryViewModel';
|
|
|
|
|
+import { DateUtils } from '../utils/DateUtils';
|
|
|
|
|
+
|
|
|
|
|
+/**
|
|
|
|
|
+ * 新增/编辑 日记
|
|
|
|
|
+ */
|
|
|
@Component
|
|
@Component
|
|
|
struct IncreaseDiaryPage {
|
|
struct IncreaseDiaryPage {
|
|
|
@StorageProp(YTAvoid.SAFE_TOP_KEY) safeTop: number = 0
|
|
@StorageProp(YTAvoid.SAFE_TOP_KEY) safeTop: number = 0
|
|
|
-
|
|
|
|
|
- @State titleInfo: string = ""
|
|
|
|
|
@State imageList: string[] = []
|
|
@State imageList: string[] = []
|
|
|
|
|
+ // 页面编辑中的状态 - 默认为可编辑
|
|
|
|
|
+ @State pageReadOnly: boolean = false
|
|
|
|
|
+ // 时间选择器 开启控制
|
|
|
|
|
+ @State showTimePicker: boolean = false
|
|
|
|
|
+ // 日记详细数据
|
|
|
|
|
+ @State diaryData: DiaryData = new DiaryData();
|
|
|
|
|
|
|
|
/**
|
|
/**
|
|
|
* 选择图片
|
|
* 选择图片
|
|
@@ -25,6 +36,62 @@ struct IncreaseDiaryPage {
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+ /**
|
|
|
|
|
+ * 点击 完成 按钮
|
|
|
|
|
+ */
|
|
|
|
|
+ async onComplete() {
|
|
|
|
|
+ if(this.pageReadOnly) {
|
|
|
|
|
+ this.pageReadOnly = false;
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 判断是否是新增日记 - 有 id 时为 修改日记
|
|
|
|
|
+ if(!this.diaryData.id) {
|
|
|
|
|
+ console.log("保存")
|
|
|
|
|
+ const ans = await DiaryViewModel.saveDiaryLog(this.diaryData)
|
|
|
|
|
+ console.log("保存结果" + JSON.stringify(ans))
|
|
|
|
|
+ } else {
|
|
|
|
|
+ console.log("修改")
|
|
|
|
|
+ const ans = await DiaryViewModel.updateDiaryLog(this.diaryData)
|
|
|
|
|
+ console.log("修改结果" + JSON.stringify(ans))
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /**
|
|
|
|
|
+ * 重写返回逻辑 - 拦截返回手势
|
|
|
|
|
+ * @returns
|
|
|
|
|
+ */
|
|
|
|
|
+ onRouterBack(): boolean {
|
|
|
|
|
+ // this.openToast(wrapBuilder(agreePrivacy), item)
|
|
|
|
|
+ yTRouter.routerBack()
|
|
|
|
|
+ return true;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ async aboutToAppear(): Promise<void> {
|
|
|
|
|
+ const params = yTRouter.getParamByName("IncreaseDiaryPage").pop() as Record<string, boolean | number>;
|
|
|
|
|
+ this.pageReadOnly = (params?.pageReadOnly ?? false) as boolean;
|
|
|
|
|
+ console.log("pageEditing: " + !this.pageReadOnly)
|
|
|
|
|
+
|
|
|
|
|
+ let id = (params?.id ?? -1) as number;
|
|
|
|
|
+ if (id != -1) {
|
|
|
|
|
+ this.diaryData = await DiaryViewModel.queryDiaryLogById(id)
|
|
|
|
|
+ } else {
|
|
|
|
|
+ this.diaryData.diaryDate = DateUtils.formatDateToCustomString(new Date())
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // TODO 在没有数据的时候 时间选择器的回显为 undefined
|
|
|
|
|
+
|
|
|
|
|
+ // 测试用
|
|
|
|
|
+ // this.diaryData.imageUrls = [
|
|
|
|
|
+ // 'https://hm-static.ytpm.net/upload/20250820/fa210da5-b364-4469-a6c8-d8a9038af687-1755657677967.jpeg',
|
|
|
|
|
+ // 'https://hm-static.ytpm.net/upload/20250820/fa210da5-b364-4469-a6c8-d8a9038af687-1755657677967.jpeg',
|
|
|
|
|
+ // 'https://hm-static.ytpm.net/upload/20250820/fa210da5-b364-4469-a6c8-d8a9038af687-1755657677967.jpeg',
|
|
|
|
|
+ // 'https://hm-static.ytpm.net/upload/20250820/fa210da5-b364-4469-a6c8-d8a9038af687-1755657677967.jpeg',
|
|
|
|
|
+ // 'https://hm-static.ytpm.net/upload/20250820/fa210da5-b364-4469-a6c8-d8a9038af687-1755657677967.jpeg',
|
|
|
|
|
+ // 'https://hm-static.ytpm.net/upload/20250820/fa210da5-b364-4469-a6c8-d8a9038af687-1755657677967.jpeg'
|
|
|
|
|
+ // ]
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
build() {
|
|
build() {
|
|
|
NavDestination() {
|
|
NavDestination() {
|
|
|
Column({ space: 5 }) {
|
|
Column({ space: 5 }) {
|
|
@@ -32,94 +99,137 @@ struct IncreaseDiaryPage {
|
|
|
Image($r("app.media.close"))
|
|
Image($r("app.media.close"))
|
|
|
.width(20)
|
|
.width(20)
|
|
|
.aspectRatio(1)
|
|
.aspectRatio(1)
|
|
|
- .onClick(()=>{
|
|
|
|
|
- yTRouter.pop()
|
|
|
|
|
- })
|
|
|
|
|
|
|
+ .onClick(this.onRouterBack)
|
|
|
|
|
|
|
|
- Text("创造")
|
|
|
|
|
|
|
+ Text("创作")
|
|
|
.fontSize(20)
|
|
.fontSize(20)
|
|
|
.fontWeight(700)
|
|
.fontWeight(700)
|
|
|
|
|
|
|
|
- Text("完成")
|
|
|
|
|
|
|
+ Text(this.pageReadOnly ? "编辑" : "完成")
|
|
|
|
|
+ .onClick(() => {
|
|
|
|
|
+ this.onComplete()
|
|
|
|
|
+ })
|
|
|
}
|
|
}
|
|
|
.width("100%")
|
|
.width("100%")
|
|
|
.justifyContent(FlexAlign.SpaceBetween)
|
|
.justifyContent(FlexAlign.SpaceBetween)
|
|
|
|
|
|
|
|
Column({space: 5}) {
|
|
Column({space: 5}) {
|
|
|
- // 标题栏
|
|
|
|
|
- Row() {
|
|
|
|
|
- TextInput({ text: $$this.titleInfo, placeholder: "输入标题会更受欢迎(✪ω✪)" })
|
|
|
|
|
- .backgroundColor(Color.Transparent)
|
|
|
|
|
- .height('100%')
|
|
|
|
|
- .layoutWeight(1)
|
|
|
|
|
- .fontSize(20)
|
|
|
|
|
- .borderRadius(0)
|
|
|
|
|
- .placeholderFont({ size: 20, weight: FontWeight.Bold })
|
|
|
|
|
- .placeholderColor("#BFBFBF")
|
|
|
|
|
- .padding(0)
|
|
|
|
|
- .maxLength(20)
|
|
|
|
|
- .caretColor('app.color.main_ac_color_dark')
|
|
|
|
|
- // .onChange((text: string) => {
|
|
|
|
|
- // this.titleInfo = text
|
|
|
|
|
- // })
|
|
|
|
|
-
|
|
|
|
|
- Text(`${20 - this.titleInfo.length}`)
|
|
|
|
|
- .fontColor("#BFBFBF")
|
|
|
|
|
|
|
+ Stack(){
|
|
|
|
|
+ Column(){
|
|
|
|
|
+ // 标题栏
|
|
|
|
|
+ Row() {
|
|
|
|
|
+ TextInput({ text: $$this.diaryData.title, placeholder: "输入标题会更受欢迎(✪ω✪)" })
|
|
|
|
|
+ .padding(0)
|
|
|
|
|
+ .fontSize(20)
|
|
|
|
|
+ .maxLength(20)
|
|
|
|
|
+ .height('100%')
|
|
|
|
|
+ .layoutWeight(1)
|
|
|
|
|
+ .borderRadius(0)
|
|
|
|
|
+ .placeholderColor("#BFBFBF")
|
|
|
|
|
+ .backgroundColor(Color.Transparent)
|
|
|
|
|
+ .caretColor('app.color.main_ac_color_dark')
|
|
|
|
|
+ .placeholderFont({ size: 20, weight: FontWeight.Bold })
|
|
|
|
|
+
|
|
|
|
|
+ Text(`${20 - (this.diaryData.title ? this.diaryData.title.length : 0) }`)
|
|
|
|
|
+ .fontColor("#BFBFBF")
|
|
|
|
|
+ }
|
|
|
|
|
+ .height(50)
|
|
|
|
|
+ .border({
|
|
|
|
|
+ width: {
|
|
|
|
|
+ bottom: 0.1
|
|
|
|
|
+ },
|
|
|
|
|
+ color: 20 - (this.diaryData.title ? this.diaryData.title.length : 0) === 0 ? Color.Red : "#BFBFBF"
|
|
|
|
|
+ })
|
|
|
|
|
+
|
|
|
|
|
+ // 内容栏
|
|
|
|
|
+ TextArea({ text: $$this.diaryData.content, placeholder: "记录此刻" })
|
|
|
|
|
+ .backgroundColor(Color.Transparent)
|
|
|
|
|
+ .padding(0)
|
|
|
|
|
+ .height(450)
|
|
|
|
|
+ .fontSize(16)
|
|
|
|
|
+ .width("100%")
|
|
|
|
|
+ .borderRadius(0)
|
|
|
|
|
+ .placeholderFont({ size: 16 })
|
|
|
|
|
+ .placeholderColor("#BFBFBF")
|
|
|
|
|
+ .caretColor('app.color.main_ac_color_dark')
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 当页面不可编辑时添加覆盖层
|
|
|
|
|
+ if(this.pageReadOnly) {
|
|
|
|
|
+ Row()
|
|
|
|
|
+ .width('100%')
|
|
|
|
|
+ .height('100%')
|
|
|
|
|
+ .backgroundColor(Color.Transparent) // 透明覆盖层
|
|
|
|
|
+ .onTouch((event: TouchEvent) => {
|
|
|
|
|
+ event.stopPropagation() // 阻止触摸事件
|
|
|
|
|
+ })
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
- .height(50)
|
|
|
|
|
- .border({
|
|
|
|
|
- width: {
|
|
|
|
|
- bottom: 0.1
|
|
|
|
|
- },
|
|
|
|
|
- color: 20 - this.titleInfo.length === 0 ? Color.Red : "#BFBFBF"
|
|
|
|
|
|
|
+ .height(500)
|
|
|
|
|
+ .onClick(() => {
|
|
|
|
|
+ this.showTimePicker = false
|
|
|
})
|
|
})
|
|
|
-
|
|
|
|
|
- // 内容栏
|
|
|
|
|
- TextArea({ placeholder: "记录此刻" })
|
|
|
|
|
- .backgroundColor(Color.Transparent)
|
|
|
|
|
- .height(450)
|
|
|
|
|
|
|
+ Stack(){
|
|
|
|
|
+ Column(){
|
|
|
|
|
+ // 时间选择器
|
|
|
|
|
+ Row(){
|
|
|
|
|
+ Text("这是一个时间选择器" + this.diaryData.diaryDate?.split(' ')[0])
|
|
|
|
|
+ }
|
|
|
|
|
+ .onClick(() => {
|
|
|
|
|
+ this.showTimePicker = !this.showTimePicker
|
|
|
|
|
+ })
|
|
|
|
|
+
|
|
|
|
|
+ // 图片显示器
|
|
|
|
|
+ Scroll(){
|
|
|
|
|
+ Row({space: 5}){
|
|
|
|
|
+ ForEach(this.diaryData.imageUrls, (item: string, index: number) => {
|
|
|
|
|
+ Image(item)
|
|
|
|
|
+ .width(100)
|
|
|
|
|
+ .height(150)
|
|
|
|
|
+ })
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ .scrollable(ScrollDirection.Horizontal)
|
|
|
|
|
+
|
|
|
|
|
+ // 图片选择器
|
|
|
|
|
+ Row(){
|
|
|
|
|
+ Row({space: 5}){
|
|
|
|
|
+ Image($r('app.media.photoAlbum'))
|
|
|
|
|
+ .width(20)
|
|
|
|
|
+ .aspectRatio(1)
|
|
|
|
|
+
|
|
|
|
|
+ Text("相册")
|
|
|
|
|
+ .fontSize(16)
|
|
|
|
|
+ .fontWeight(700)
|
|
|
|
|
+ }
|
|
|
|
|
+ .onClick(()=>{
|
|
|
|
|
+ this.photoSelect()
|
|
|
|
|
+ })
|
|
|
|
|
+ }
|
|
|
|
|
+ .width("100%")
|
|
|
|
|
+ .alignItems(VerticalAlign.Center)
|
|
|
|
|
+ .justifyContent(FlexAlign.End)
|
|
|
|
|
+ }
|
|
|
.width("100%")
|
|
.width("100%")
|
|
|
- .fontSize(16)
|
|
|
|
|
- .borderRadius(0)
|
|
|
|
|
- .placeholderFont({ size: 16 })
|
|
|
|
|
- .placeholderColor("#BFBFBF")
|
|
|
|
|
- .padding(0)
|
|
|
|
|
- .caretColor('app.color.main_ac_color_dark')
|
|
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
- // 时间选择器
|
|
|
|
|
- Row(){
|
|
|
|
|
- Text("这是一个时间选择器")
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- // 图片显示器
|
|
|
|
|
- Row({space: 5}){
|
|
|
|
|
- ForEach(this.imageList, (item: string, index: number) => {
|
|
|
|
|
- Image(item)
|
|
|
|
|
- .width(100)
|
|
|
|
|
- .height(150)
|
|
|
|
|
|
|
+ .height("100%")
|
|
|
|
|
+ .onClick(() => {
|
|
|
|
|
+ this.showTimePicker = false
|
|
|
})
|
|
})
|
|
|
- }
|
|
|
|
|
|
|
|
|
|
- // 图片选择器
|
|
|
|
|
- Row(){
|
|
|
|
|
- Row({space: 5}){
|
|
|
|
|
- Image($r('app.media.photoAlbum'))
|
|
|
|
|
- .width(20)
|
|
|
|
|
- .aspectRatio(1)
|
|
|
|
|
-
|
|
|
|
|
- Text("相册")
|
|
|
|
|
- .fontSize(16)
|
|
|
|
|
- .fontWeight(700)
|
|
|
|
|
|
|
+ if(this.showTimePicker) {
|
|
|
|
|
+ DiaryDatePicker({
|
|
|
|
|
+ selectedDate: new Date(this.diaryData.diaryDate ?? new Date().toISOString()),
|
|
|
|
|
+ selectDateBack: (date: Date) => {
|
|
|
|
|
+ this.showTimePicker = false
|
|
|
|
|
+ let result = DateUtils.formatDateToCustomString(date)
|
|
|
|
|
+ this.diaryData.diaryDate = result
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+ .width("80%")
|
|
|
}
|
|
}
|
|
|
- .onClick(()=>{
|
|
|
|
|
- this.photoSelect()
|
|
|
|
|
- })
|
|
|
|
|
}
|
|
}
|
|
|
.width("100%")
|
|
.width("100%")
|
|
|
- .alignItems(VerticalAlign.Center)
|
|
|
|
|
- .justifyContent(FlexAlign.End)
|
|
|
|
|
-
|
|
|
|
|
|
|
+ .layoutWeight(1)
|
|
|
}
|
|
}
|
|
|
.alignItems(HorizontalAlign.Start)
|
|
.alignItems(HorizontalAlign.Start)
|
|
|
.justifyContent(FlexAlign.Start)
|
|
.justifyContent(FlexAlign.Start)
|
|
@@ -130,13 +240,12 @@ struct IncreaseDiaryPage {
|
|
|
.height("100%")
|
|
.height("100%")
|
|
|
.padding({ top: this.safeTop, left: 16, right: 16 })
|
|
.padding({ top: this.safeTop, left: 16, right: 16 })
|
|
|
}
|
|
}
|
|
|
|
|
+ .hideTitleBar(true)
|
|
|
|
|
+ .onBackPressed(this.onRouterBack)
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
@Builder
|
|
@Builder
|
|
|
function IncreaseDiaryBuilder() {
|
|
function IncreaseDiaryBuilder() {
|
|
|
- NavDestination() {
|
|
|
|
|
- IncreaseDiaryPage()
|
|
|
|
|
- }
|
|
|
|
|
- .hideTitleBar(true)
|
|
|
|
|
-}
|
|
|
|
|
|
|
+ IncreaseDiaryPage()
|
|
|
|
|
+}
|