|
|
@@ -1,10 +1,12 @@
|
|
|
-import { AppStorageKeyCollect, IBestToast, YTAvoid, yTRouter } from 'basic'
|
|
|
+import { AppStorageKeyCollect, IBestToast, userInfo, UserInfo, YTAvoid, yTRouter } from 'basic'
|
|
|
import { DateInfo } from '../models/DateInfo'
|
|
|
import { RecodeViewModel } from '../viewModels/RecodeViewModel'
|
|
|
import { DiaryDatePicker } from '../components/DiaryDatePicker'
|
|
|
import { DiaryTimePicker } from '../components/DiaryTimePicker'
|
|
|
import { DateUtils } from '../utils/DateUtils'
|
|
|
import { DiaryData, PageStatus } from '../models'
|
|
|
+import { CollaborationCameraStateDialog } from '@hms.collaboration.camera'
|
|
|
+import { LoginComponent } from '../components/LoginComponent'
|
|
|
|
|
|
/**
|
|
|
* 记录页面
|
|
|
@@ -15,6 +17,9 @@ export struct RecodView {
|
|
|
@StorageProp(YTAvoid.SAFE_TOP_KEY) safeTop: number = 0
|
|
|
@State Vm: RecodeViewModel = new RecodeViewModel()
|
|
|
@State heightList: number[] = []
|
|
|
+ // 去登录界面
|
|
|
+ @State ShowLoginDialog: boolean = false
|
|
|
+ @StorageProp(UserInfo.KEY) @Watch('loginStateChanged') userInfo: UserInfo = userInfo
|
|
|
|
|
|
private linearInfo: LinearGradientOptions = {
|
|
|
colors: [ ['#B9FD2A', 0.01], ['#F5FD6D', 1] ],
|
|
|
@@ -27,11 +32,35 @@ export struct RecodView {
|
|
|
console.log('改变了选择的日期')
|
|
|
}
|
|
|
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 登录状态发生变化
|
|
|
+ */
|
|
|
+ loginStateChanged(){
|
|
|
+ console.log('登录状态发生变化 登录状态为 ' + this.userInfo.checkLogin())
|
|
|
+ const loginState = this.userInfo.checkLogin()
|
|
|
+ if(loginState){
|
|
|
+ this.ShowLoginDialog = false
|
|
|
+ this.loadDataList(DateUtils.formatDateToCustomString(new Date(), false))
|
|
|
+ } else {
|
|
|
+ this.Vm.recodeList = []
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
// 加载小记录数据列表
|
|
|
async loadDataList(targetDate: string) {
|
|
|
- this.Vm.queryNoteList(targetDate)
|
|
|
+ if(this.userInfo.checkLogin()) {
|
|
|
+ this.Vm.queryNoteList(targetDate)
|
|
|
+ } else {
|
|
|
+ this.ShowLoginDialog = true
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
+ /**
|
|
|
+ * 更新小记录时间
|
|
|
+ * @param index
|
|
|
+ * @param time
|
|
|
+ */
|
|
|
async updateNoteTime(index: number, time: string) {
|
|
|
let currentNote: DiaryData = this.Vm.recodeList[index]
|
|
|
currentNote.noteTime = currentNote.noteTime?.split(' ')[0] + ' ' + time + ':00'
|
|
|
@@ -44,7 +73,10 @@ export struct RecodView {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- // 跳转至添加小记录页面
|
|
|
+ /**
|
|
|
+ * 跳转至添加小记录页面
|
|
|
+ * @param id
|
|
|
+ */
|
|
|
routerAddNote(id?: number) {
|
|
|
yTRouter.pushPathByName("IncreaseDiaryPage", {
|
|
|
'id': id,
|
|
|
@@ -58,116 +90,118 @@ export struct RecodView {
|
|
|
}
|
|
|
|
|
|
build() {
|
|
|
- Column(){
|
|
|
- Row(){
|
|
|
- Text("你的生活小计")
|
|
|
- .fontSize(20)
|
|
|
-
|
|
|
- Image($r("app.media.calendar"))
|
|
|
- .width(30)
|
|
|
- .aspectRatio(1)
|
|
|
- .onClick(() => {
|
|
|
- animateToImmediately({
|
|
|
- duration: 200
|
|
|
- }, () => {
|
|
|
- if(this.Vm.showDatePicker) {
|
|
|
- this.Vm.showDatePicker = false
|
|
|
- } else {
|
|
|
- this.Vm.showDatePicker = true
|
|
|
- this.Vm.showTimePicker = -1
|
|
|
- }
|
|
|
- })
|
|
|
- })
|
|
|
- }
|
|
|
- .width("100%")
|
|
|
- .height(76)
|
|
|
- .justifyContent(FlexAlign.SpaceBetween)
|
|
|
- .alignItems(VerticalAlign.Center)
|
|
|
- .padding({ left: 17, right: 17, bottom: 17, top: 17})
|
|
|
- .onClick(() => {
|
|
|
- this.Vm.showTimePicker = -1
|
|
|
- this.Vm.showDatePicker = false
|
|
|
- })
|
|
|
+ Stack(){
|
|
|
+ Column(){
|
|
|
+ Row(){
|
|
|
+ Image($r("app.media.RecodeTitle"))
|
|
|
+ .width(140)
|
|
|
+ .height(44)
|
|
|
|
|
|
- // 时间选择器 - 使用区域变换实现
|
|
|
- if(this.Vm.showTimePicker != -1) {
|
|
|
- DiaryTimePicker({
|
|
|
- timeStr: this.Vm.getTime(this.Vm.showTimePicker),
|
|
|
- onConfirm: (time: string) => {
|
|
|
- this.updateNoteTime(this.Vm.showTimePicker, time)
|
|
|
- this.Vm.showTimePicker = -1
|
|
|
- },
|
|
|
- onCancel: () => {
|
|
|
- this.Vm.showTimePicker = -1
|
|
|
- }
|
|
|
- })
|
|
|
- .position({
|
|
|
- // x: 5,
|
|
|
- // y: 35
|
|
|
- x: this.Vm.getPostion('x'),
|
|
|
- y: this.Vm.getPostion('y')
|
|
|
- })
|
|
|
- .zIndex(100)
|
|
|
- }
|
|
|
-
|
|
|
- // 主体内容
|
|
|
- Stack({alignContent: Alignment.TopEnd}){
|
|
|
- Column(){
|
|
|
- // 日期选择
|
|
|
- Swiper(this.Vm.swiperController){
|
|
|
- LazyForEach(this.Vm.weekLoop, (item: DateInfo, index: number) => {
|
|
|
- Column({space: 2}) {
|
|
|
- Column({space: 15}){
|
|
|
- Text(item.week)
|
|
|
- // ${item.month}-
|
|
|
- Text(`${item.day}`)
|
|
|
- }
|
|
|
- .width("100%")
|
|
|
- .padding({ top: 5, bottom: 5 })
|
|
|
- .borderRadius(10)
|
|
|
- .linearGradient(this.Vm.selectedDate === index ? this.linearInfo : null)
|
|
|
-
|
|
|
- // TODO 表示某天有数据 - 暂无接口,待定
|
|
|
- if(false) {
|
|
|
- Row()
|
|
|
- .width(6)
|
|
|
- .height(6)
|
|
|
- .borderRadius(3)
|
|
|
- .backgroundColor('#BAFE2B')
|
|
|
+ Image($r("app.media.calendar"))
|
|
|
+ .width(30)
|
|
|
+ .aspectRatio(1)
|
|
|
+ .onClick(() => {
|
|
|
+ animateToImmediately({
|
|
|
+ duration: 200
|
|
|
+ }, () => {
|
|
|
+ if(this.Vm.showDatePicker) {
|
|
|
+ this.Vm.showDatePicker = false
|
|
|
+ } else {
|
|
|
+ this.Vm.showDatePicker = true
|
|
|
+ this.Vm.showTimePicker = -1
|
|
|
}
|
|
|
- }
|
|
|
- .width(50)
|
|
|
- .height(80)
|
|
|
- .padding({
|
|
|
- left: 7,
|
|
|
- right: 7,
|
|
|
- top: 9,
|
|
|
- })
|
|
|
- .onClick(() => {
|
|
|
- this.selectDateChange(index)
|
|
|
})
|
|
|
- }, (item: DateInfo, index: number) => { return item.id.toString() })
|
|
|
- }
|
|
|
- .loop(false)
|
|
|
- .displayCount(7)
|
|
|
- .indicator(false)
|
|
|
- .direction(Direction.Rtl)
|
|
|
- .onChange((index: number) => {
|
|
|
- this.Vm.swiperOnChange(index)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ .width("100%")
|
|
|
+ .height(76)
|
|
|
+ .justifyContent(FlexAlign.SpaceBetween)
|
|
|
+ .alignItems(VerticalAlign.Center)
|
|
|
+ .padding({ left: 17, right: 17, bottom: 17, top: 17})
|
|
|
+ .onClick(() => {
|
|
|
+ this.Vm.showTimePicker = -1
|
|
|
+ this.Vm.showDatePicker = false
|
|
|
+ })
|
|
|
+
|
|
|
+ // 时间选择器 - 使用区域变换实现
|
|
|
+ if(this.Vm.showTimePicker != -1) {
|
|
|
+ DiaryTimePicker({
|
|
|
+ timeStr: this.Vm.getTime(this.Vm.showTimePicker),
|
|
|
+ onConfirm: (time: string) => {
|
|
|
+ this.updateNoteTime(this.Vm.showTimePicker, time)
|
|
|
+ this.Vm.showTimePicker = -1
|
|
|
+ },
|
|
|
+ onCancel: () => {
|
|
|
+ this.Vm.showTimePicker = -1
|
|
|
+ }
|
|
|
})
|
|
|
+ .position({
|
|
|
+ // x: 5,
|
|
|
+ // y: 35
|
|
|
+ x: this.Vm.getPostion('x'),
|
|
|
+ y: this.Vm.getPostion('y')
|
|
|
+ })
|
|
|
+ .zIndex(100)
|
|
|
+ }
|
|
|
|
|
|
- // 记录内容主体
|
|
|
- Stack({alignContent: Alignment.BottomEnd}){
|
|
|
- List({space: 10}) {
|
|
|
- ListItem()
|
|
|
- .height(20)
|
|
|
+ // 主体内容
|
|
|
+ Stack({alignContent: Alignment.TopEnd}){
|
|
|
+ Column(){
|
|
|
+ // 日期选择
|
|
|
+ Swiper(this.Vm.swiperController){
|
|
|
+ LazyForEach(this.Vm.weekLoop, (item: DateInfo, index: number) => {
|
|
|
+ Column({space: 2}) {
|
|
|
+ Column({space: 15}){
|
|
|
+ Text(item.week)
|
|
|
+ // ${item.month}-
|
|
|
+ Text(`${item.day}`)
|
|
|
+ }
|
|
|
+ .width("100%")
|
|
|
+ .padding({ top: 5, bottom: 5 })
|
|
|
+ .borderRadius(10)
|
|
|
+ .linearGradient(this.Vm.selectedDate === index ? this.linearInfo : null)
|
|
|
+
|
|
|
+ // TODO 表示某天有数据 - 暂无接口,待定
|
|
|
+ if(false) {
|
|
|
+ Row()
|
|
|
+ .width(6)
|
|
|
+ .height(6)
|
|
|
+ .borderRadius(3)
|
|
|
+ .backgroundColor('#BAFE2B')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .width(50)
|
|
|
+ .height(80)
|
|
|
+ .padding({
|
|
|
+ left: 7,
|
|
|
+ right: 7,
|
|
|
+ top: 9,
|
|
|
+ })
|
|
|
.onClick(() => {
|
|
|
- this.Vm.showTimePicker = -1
|
|
|
- this.Vm.showDatePicker = false
|
|
|
+ this.selectDateChange(index)
|
|
|
})
|
|
|
+ }, (item: DateInfo, index: number) => { return item.id.toString() })
|
|
|
+ }
|
|
|
+ .loop(false)
|
|
|
+ .displayCount(7)
|
|
|
+ .indicator(false)
|
|
|
+ .direction(Direction.Rtl)
|
|
|
+ .onChange((index: number) => {
|
|
|
+ this.Vm.swiperOnChange(index)
|
|
|
+ })
|
|
|
+
|
|
|
+ // 记录内容主体
|
|
|
+ Stack({alignContent: Alignment.BottomEnd}){
|
|
|
+ List({space: 10}) {
|
|
|
+ ListItem()
|
|
|
+ .height(20)
|
|
|
+ .onClick(() => {
|
|
|
+ this.Vm.showTimePicker = -1
|
|
|
+ this.Vm.showDatePicker = false
|
|
|
+ })
|
|
|
|
|
|
- ForEach(this.Vm.recodeList, (item: DiaryData, index: number) => {
|
|
|
- ListItem(){
|
|
|
+ ForEach(this.Vm.recodeList, (item: DiaryData, index: number) => {
|
|
|
+ ListItem(){
|
|
|
Row({space: 20}){
|
|
|
// 时间 和 分隔线
|
|
|
Column({space: 5}){
|
|
|
@@ -311,133 +345,144 @@ export struct RecodView {
|
|
|
postion[index] = _n.globalPosition
|
|
|
this.Vm.postionList = postion
|
|
|
})
|
|
|
- }
|
|
|
- })
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ // 空数据页面
|
|
|
+ if(this.Vm.recodeList.length === 0) {
|
|
|
+ ListItem(){
|
|
|
+ Column({space: 12}){
|
|
|
+ Row({space: 8}){
|
|
|
+ Text("+")
|
|
|
+ Text("去添加")
|
|
|
+ }
|
|
|
+ .borderRadius(8)
|
|
|
+ .linearGradient(this.linearInfo)
|
|
|
+ .alignItems(VerticalAlign.Center)
|
|
|
+ .justifyContent(FlexAlign.Center)
|
|
|
+ .border({width: 1, color: Color.Black})
|
|
|
+ .padding({ left: 16, top: 12, right: 16, bottom: 12})
|
|
|
+ .onClick(() => {
|
|
|
+ this.routerAddNote()
|
|
|
+ })
|
|
|
|
|
|
- // 空数据页面
|
|
|
- if(this.Vm.recodeList.length === 0) {
|
|
|
- ListItem(){
|
|
|
- Column({space: 12}){
|
|
|
- Row({space: 8}){
|
|
|
- Text("+")
|
|
|
- Text("去添加")
|
|
|
+ Text("暂无记录~")
|
|
|
+ .fontSize(14)
|
|
|
+ .fontWeight(400)
|
|
|
}
|
|
|
- .borderRadius(8)
|
|
|
- .linearGradient(this.linearInfo)
|
|
|
- .alignItems(VerticalAlign.Center)
|
|
|
- .justifyContent(FlexAlign.Center)
|
|
|
- .border({width: 1, color: Color.Black})
|
|
|
- .padding({ left: 16, top: 12, right: 16, bottom: 12})
|
|
|
-
|
|
|
- Text("暂无记录~")
|
|
|
- .fontSize(14)
|
|
|
- .fontWeight(400)
|
|
|
+ .width("100%")
|
|
|
+ .height("100%")
|
|
|
+ .alignItems(HorizontalAlign.Center)
|
|
|
+ .padding({ top: '30%'})
|
|
|
+ // .justifyContent(FlexAlign.Center)
|
|
|
}
|
|
|
+ .layoutWeight(1)
|
|
|
.width("100%")
|
|
|
- .height("100%")
|
|
|
- .alignItems(HorizontalAlign.Center)
|
|
|
- .padding({ top: '30%'})
|
|
|
- // .justifyContent(FlexAlign.Center)
|
|
|
}
|
|
|
- .layoutWeight(1)
|
|
|
- .width("100%")
|
|
|
}
|
|
|
- }
|
|
|
- .width("100%")
|
|
|
- .height("100%")
|
|
|
- .scrollBar(BarState.Off)
|
|
|
- .padding({top: 10})
|
|
|
- .onScrollIndex(() => {
|
|
|
- this.Vm.showTimePicker = -1
|
|
|
- })
|
|
|
+ .width("100%")
|
|
|
+ .height("100%")
|
|
|
+ .scrollBar(BarState.Off)
|
|
|
+ .padding({top: 10})
|
|
|
+ .onScrollIndex(() => {
|
|
|
+ this.Vm.showTimePicker = -1
|
|
|
+ })
|
|
|
|
|
|
- // 增加日记按钮
|
|
|
- Row() {
|
|
|
- Image($r("app.media.add_Img"))
|
|
|
- .width("100%")
|
|
|
- .aspectRatio(1)
|
|
|
+ // 增加日记按钮
|
|
|
+ Row() {
|
|
|
+ Image($r("app.media.add_Img"))
|
|
|
+ .width("100%")
|
|
|
+ .aspectRatio(1)
|
|
|
+ }
|
|
|
+ .onClick(() => {
|
|
|
+ this.routerAddNote()
|
|
|
+ })
|
|
|
+ .width(40)
|
|
|
+ .aspectRatio(1)
|
|
|
+ .borderRadius(20)
|
|
|
+ .margin({ bottom: 16 })
|
|
|
+ .alignItems(VerticalAlign.Center)
|
|
|
+ .justifyContent(FlexAlign.Center)
|
|
|
+ .linearGradient(this.linearInfo)
|
|
|
}
|
|
|
- .onClick(() => {
|
|
|
- this.routerAddNote()
|
|
|
+ .width("100%")
|
|
|
+ .layoutWeight(1)
|
|
|
+ .padding({
|
|
|
+ bottom: 20, left: 24, right: 24
|
|
|
})
|
|
|
- .width(40)
|
|
|
- .aspectRatio(1)
|
|
|
- .borderRadius(20)
|
|
|
- .margin({ bottom: 16 })
|
|
|
- .alignItems(VerticalAlign.Center)
|
|
|
- .justifyContent(FlexAlign.Center)
|
|
|
- .linearGradient(this.linearInfo)
|
|
|
- }
|
|
|
- .width("100%")
|
|
|
- .layoutWeight(1)
|
|
|
- .padding({
|
|
|
- bottom: 20, left: 24, right: 24
|
|
|
- })
|
|
|
|
|
|
- // 记录内容主体
|
|
|
- // Stack({ alignContent: Alignment.BottomEnd }){
|
|
|
- //
|
|
|
- // // 增加日记按钮
|
|
|
- // Row() {
|
|
|
- // Image($r("app.media.add"))
|
|
|
- // .width(20)
|
|
|
- // .aspectRatio(1)
|
|
|
- // }
|
|
|
- // .onClick(() => {
|
|
|
- // this.routerAddNote()
|
|
|
- // })
|
|
|
- // .width(40)
|
|
|
- // .aspectRatio(1)
|
|
|
- // .borderRadius(20)
|
|
|
- // .padding(8)
|
|
|
- // // .border({ width: 1 })
|
|
|
- // .margin({ bottom: 16 })
|
|
|
- // // .backgroundColor(Color.White)
|
|
|
- // .alignItems(VerticalAlign.Center)
|
|
|
- // .justifyContent(FlexAlign.Center)
|
|
|
- // .linearGradient(this.linearInfo)
|
|
|
- // }
|
|
|
- // .width("100%")
|
|
|
- // .layoutWeight(1)
|
|
|
+ // 记录内容主体
|
|
|
+ // Stack({ alignContent: Alignment.BottomEnd }){
|
|
|
+ //
|
|
|
+ // // 增加日记按钮
|
|
|
+ // Row() {
|
|
|
+ // Image($r("app.media.add"))
|
|
|
+ // .width(20)
|
|
|
+ // .aspectRatio(1)
|
|
|
+ // }
|
|
|
+ // .onClick(() => {
|
|
|
+ // this.routerAddNote()
|
|
|
+ // })
|
|
|
+ // .width(40)
|
|
|
+ // .aspectRatio(1)
|
|
|
+ // .borderRadius(20)
|
|
|
+ // .padding(8)
|
|
|
+ // // .border({ width: 1 })
|
|
|
+ // .margin({ bottom: 16 })
|
|
|
+ // // .backgroundColor(Color.White)
|
|
|
+ // .alignItems(VerticalAlign.Center)
|
|
|
+ // .justifyContent(FlexAlign.Center)
|
|
|
+ // .linearGradient(this.linearInfo)
|
|
|
+ // }
|
|
|
+ // .width("100%")
|
|
|
+ // .layoutWeight(1)
|
|
|
|
|
|
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
- // 日期选择器
|
|
|
- if(this.Vm.showDatePicker) {
|
|
|
- DiaryDatePicker({
|
|
|
- selectedDate: this.Vm.weekLoop.getData(this.Vm.swiperCurrentIndex).id,
|
|
|
- selectDateBack: (date: Date) => {
|
|
|
- this.Vm.showDatePicker = false
|
|
|
- this.Vm.jumpToDate(date)
|
|
|
- }
|
|
|
- })
|
|
|
- .width(267)
|
|
|
+ // 日期选择器
|
|
|
+ if(this.Vm.showDatePicker) {
|
|
|
+ DiaryDatePicker({
|
|
|
+ selectedDate: this.Vm.weekLoop.getData(this.Vm.swiperCurrentIndex).id,
|
|
|
+ selectDateBack: (date: Date) => {
|
|
|
+ this.Vm.showDatePicker = false
|
|
|
+ this.Vm.jumpToDate(date)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .width(267)
|
|
|
+ }
|
|
|
}
|
|
|
+ .width("100%")
|
|
|
+ .layoutWeight(1)
|
|
|
+ .backgroundColor(Color.White)
|
|
|
+ .borderRadius({
|
|
|
+ topLeft: 20,
|
|
|
+ topRight: 20
|
|
|
+ })
|
|
|
}
|
|
|
.width("100%")
|
|
|
- .layoutWeight(1)
|
|
|
- .backgroundColor(Color.White)
|
|
|
- .borderRadius({
|
|
|
- topLeft: 20,
|
|
|
- topRight: 20
|
|
|
+ .height("100%")
|
|
|
+ .padding({ top: this.safeTop})
|
|
|
+ .linearGradient({
|
|
|
+ colors: [ ['#B9FD2A', 0.01], ['#F5FD6D', 1] ],
|
|
|
+ angle: 150
|
|
|
+ })
|
|
|
+ .onVisibleAreaChange([0, 1], (isExpanding: boolean, currentRatio: number) => {
|
|
|
+ if(isExpanding) {
|
|
|
+ console.log("组件出来了")
|
|
|
+ this.loadDataList(DateUtils.formatDateToCustomString(new Date(), false))
|
|
|
+ } else {
|
|
|
+ console.log("组件退了")
|
|
|
+ }
|
|
|
})
|
|
|
+
|
|
|
+ if(this.ShowLoginDialog){
|
|
|
+ LoginComponent()
|
|
|
+ }
|
|
|
}
|
|
|
.width("100%")
|
|
|
.height("100%")
|
|
|
- .padding({ top: this.safeTop + 22})
|
|
|
- .linearGradient({
|
|
|
- colors: [ ['#B9FD2A', 0.01], ['#F5FD6D', 1] ],
|
|
|
- angle: 150
|
|
|
- })
|
|
|
- .onVisibleAreaChange([0, 1], (isExpanding: boolean, currentRatio: number) => {
|
|
|
- if(isExpanding) {
|
|
|
- console.log("组件出来了")
|
|
|
- this.Vm.changeDataByIndex()
|
|
|
- } else {
|
|
|
- console.log("组件退了")
|
|
|
- }
|
|
|
- })
|
|
|
+
|
|
|
|
|
|
}
|
|
|
}
|