|
@@ -1,55 +1,167 @@
|
|
|
-import { BackgroundPageModifier, DateOption, YTAddressSelectorDialog, YTDateUtil } from 'basic'
|
|
|
|
|
-import { UnitType } from 'basic/src/main/ets/datepicker/DatePickerEnums'
|
|
|
|
|
-import { promptAction } from '@kit.ArkUI'
|
|
|
|
|
|
|
+import { EmptyComp } from "../components/EmptyComp"
|
|
|
|
|
+import { _YtHeader } from "../components/YtComp/_YtHeader"
|
|
|
|
|
+import { MainViewModel } from "../viewModel/MainViewModel"
|
|
|
|
|
|
|
|
-@Component
|
|
|
|
|
|
|
+@ComponentV2
|
|
|
export struct MainView {
|
|
export struct MainView {
|
|
|
|
|
+ @Local vm: MainViewModel = new MainViewModel()
|
|
|
|
|
+
|
|
|
build() {
|
|
build() {
|
|
|
- Column() {
|
|
|
|
|
- Text('打开日历')
|
|
|
|
|
- .onClick(() => {
|
|
|
|
|
- //以下内容都可以不传 有默认值
|
|
|
|
|
- const date: Date = new Date()
|
|
|
|
|
- const yTDateDialog = new YTAddressSelectorDialog(this.getUIContext())
|
|
|
|
|
- let dateOption = new DateOption() //选项配置类
|
|
|
|
|
- dateOption.date = date //当前日期 默认今天
|
|
|
|
|
- dateOption.minDate = new Date(2000, 0, 1) //最小选择的日期 默认10年前的今天
|
|
|
|
|
- dateOption.maxDate = new Date(2048, 12, 30) //最大选择的日期 默认10年后的今天
|
|
|
|
|
- dateOption.unitType = UnitType.YEAR_MONTH_DAY //日期单位 默认年月日 可选年月、月日等组合
|
|
|
|
|
- dateOption.confirm = (date: Date) => { //确认选择回调函数
|
|
|
|
|
- console.log('确认', YTDateUtil.formatDate(date))
|
|
|
|
|
- promptAction.openToast({ message: YTDateUtil.formatDate(date) })
|
|
|
|
|
- }
|
|
|
|
|
- dateOption.headerLeftBuilder = wrapBuilder(headerLeftBuilder) //头部左侧按钮 默认返回按钮
|
|
|
|
|
- dateOption.headerRightBuilder = wrapBuilder(headerRightBuilder) //头部右侧按钮 默认确认按钮
|
|
|
|
|
- dateOption.highlightBackgroundColor = Color.Pink //选中高亮背景色
|
|
|
|
|
- dateOption.highlightBorderColor = Color.Red //选中高亮边框色
|
|
|
|
|
- dateOption.textStyle = {
|
|
|
|
|
- //日期文字样式
|
|
|
|
|
- font: { size: 20, weight: 400 },
|
|
|
|
|
- color: Color.Gray
|
|
|
|
|
- }
|
|
|
|
|
- dateOption.selectedTextStyle = {
|
|
|
|
|
- //选中日期文字样式
|
|
|
|
|
- font: { size: 25, weight: 400 },
|
|
|
|
|
- color: Color.Yellow
|
|
|
|
|
|
|
+ Column(){
|
|
|
|
|
+ _YtHeader({
|
|
|
|
|
+ rightComp: () => { this.rightComp() },
|
|
|
|
|
+ leftComp: () => { this.leftComp() },
|
|
|
|
|
+ isShowBackComp: false,
|
|
|
|
|
+ title: ''
|
|
|
|
|
+ })
|
|
|
|
|
+
|
|
|
|
|
+ // boy and gir
|
|
|
|
|
+ Row(){
|
|
|
|
|
+ Row({space: 42}){
|
|
|
|
|
+ this.circleContainer('#7186F9', '男孩', 10)
|
|
|
|
|
+ this.circleContainer('#FB9BC1', '女孩', 10)
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ Text('添加')
|
|
|
|
|
+ .fontSize(18)
|
|
|
|
|
+ .fontWeight(500)
|
|
|
|
|
+ .borderRadius(8)
|
|
|
|
|
+ .fontColor(Color.White)
|
|
|
|
|
+ .backgroundColor(Color.Black)
|
|
|
|
|
+ .padding({left: 15, top: 7, right: 15, bottom: 7})
|
|
|
|
|
+ .onClick(() => { this.vm._onAddStudent() })
|
|
|
|
|
+ }
|
|
|
|
|
+ .width("100%")
|
|
|
|
|
+ .alignItems(VerticalAlign.Center)
|
|
|
|
|
+ .justifyContent(FlexAlign.SpaceBetween)
|
|
|
|
|
+ .padding({right: 18, left: 42, top: 20, bottom: 20 })
|
|
|
|
|
+
|
|
|
|
|
+ // 学生列表
|
|
|
|
|
+ Column(){
|
|
|
|
|
+ EmptyComp({
|
|
|
|
|
+ isEmpty: this.vm.dataSource.length == 0
|
|
|
|
|
+ }){
|
|
|
|
|
+ List({space: 16}){
|
|
|
|
|
+ ForEach(this.vm.dataSource, (item: number, index) => {
|
|
|
|
|
+ ListItem(){
|
|
|
|
|
+ Row({space: 22}){
|
|
|
|
|
+ Image(item == 1 ? $r('app.media.img_BoyHead') : $r('app.media.img_GirHead'))
|
|
|
|
|
+ .width(52)
|
|
|
|
|
+ .aspectRatio(1)
|
|
|
|
|
+
|
|
|
|
|
+ Text('李明 - ' + (item == 1 ? '男' : '女'))
|
|
|
|
|
+ .fontSize(14)
|
|
|
|
|
+ .fontWeight(400)
|
|
|
|
|
+ }
|
|
|
|
|
+ .width("97%")
|
|
|
|
|
+ .borderRadius(15)
|
|
|
|
|
+ .margin({left: 3})
|
|
|
|
|
+ .backgroundColor(Color.White)
|
|
|
|
|
+ .justifyContent(FlexAlign.Start)
|
|
|
|
|
+ .alignItems(VerticalAlign.Center)
|
|
|
|
|
+ .shadow({ radius: 6, color: '#1a000000' })
|
|
|
|
|
+ .padding({left: 12, top: 9, right: 12, bottom: 9})
|
|
|
|
|
+ }
|
|
|
|
|
+ .align(Alignment.Center)
|
|
|
|
|
+ .swipeAction({
|
|
|
|
|
+ end: () => { this.swiperAction(index) }
|
|
|
|
|
+ })
|
|
|
|
|
+ })
|
|
|
}
|
|
}
|
|
|
- yTDateDialog.show(dateOption) //设置好配置之后打开日历的函数
|
|
|
|
|
- })
|
|
|
|
|
|
|
+ .width("100%")
|
|
|
|
|
+ .height('100%')
|
|
|
|
|
+ .scrollBar(BarState.Off)
|
|
|
|
|
+ .padding({ bottom: 16 })
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ .width('100%')
|
|
|
|
|
+ .layoutWeight(1)
|
|
|
|
|
+ .backgroundColor('#FAFAFA')
|
|
|
|
|
+ .justifyContent(FlexAlign.Center)
|
|
|
|
|
+ .alignItems(HorizontalAlign.Center)
|
|
|
|
|
+ .padding({left: 16, right: 16, top: 16})
|
|
|
|
|
+ .borderRadius({topLeft: 20, topRight: 20})
|
|
|
|
|
+ }
|
|
|
|
|
+ .height('100%')
|
|
|
|
|
+ .width('100%')
|
|
|
|
|
+ .linearGradient(this.vm.linear)
|
|
|
|
|
+ .padding({top: this.vm.safeTop })
|
|
|
|
|
+ .justifyContent(FlexAlign.Center)
|
|
|
|
|
+ .alignItems(HorizontalAlign.Center)
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 圆型容器
|
|
|
|
|
+ @Builder
|
|
|
|
|
+ circleContainer(mainColor: ResourceColor, text: string, count: number){
|
|
|
|
|
+ Column({space: 12}){
|
|
|
|
|
+ Row(){
|
|
|
|
|
+ Row(){
|
|
|
|
|
+ Text(text)
|
|
|
|
|
+ .fontSize(18)
|
|
|
|
|
+ .fontWeight(500)
|
|
|
|
|
+ .fontColor(Color.White)
|
|
|
|
|
+ }
|
|
|
|
|
+ .width("100%")
|
|
|
|
|
+ .aspectRatio(1)
|
|
|
|
|
+ .borderRadius(30)
|
|
|
|
|
+ .backgroundColor(mainColor)
|
|
|
|
|
+ .justifyContent(FlexAlign.Center)
|
|
|
|
|
+ }
|
|
|
|
|
+ .width(60)
|
|
|
|
|
+ .padding(2)
|
|
|
|
|
+ .aspectRatio(1)
|
|
|
|
|
+ .borderRadius(30)
|
|
|
|
|
+ .backgroundColor(Color.White)
|
|
|
|
|
+ .border({ width: 2, color: mainColor })
|
|
|
|
|
+
|
|
|
|
|
+ Text(`${count} 人`)
|
|
|
|
|
+ .fontSize(16)
|
|
|
|
|
+ .fontWeight(500)
|
|
|
|
|
+ .fontColor('#333333')
|
|
|
}
|
|
}
|
|
|
- .attributeModifier(new BackgroundPageModifier(true))
|
|
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ @Builder
|
|
|
|
|
+ swiperAction(index: number){
|
|
|
|
|
+ Row(){
|
|
|
|
|
+ Row(){
|
|
|
|
|
+ Image($r('app.media.icon_edit'))
|
|
|
|
|
+ .width(25)
|
|
|
|
|
+ .aspectRatio(1)
|
|
|
|
|
+ }
|
|
|
|
|
+ .backgroundColor('#BFBFBF')
|
|
|
|
|
+ .alignItems(VerticalAlign.Center)
|
|
|
|
|
+ .justifyContent(FlexAlign.Center)
|
|
|
|
|
+ .padding({ left: 18, top: 23, right: 18, bottom: 23 })
|
|
|
|
|
+ .onClick(() => { this.vm._onEditStudent() })
|
|
|
|
|
+
|
|
|
|
|
+ Row(){
|
|
|
|
|
+ Image($r('app.media.icon_del'))
|
|
|
|
|
+ .width(25)
|
|
|
|
|
+ .aspectRatio(1)
|
|
|
|
|
+ }
|
|
|
|
|
+ .backgroundColor('#FF3B30')
|
|
|
|
|
+ .alignItems(VerticalAlign.Center)
|
|
|
|
|
+ .justifyContent(FlexAlign.Center)
|
|
|
|
|
+ .borderRadius({topRight: 15, bottomRight: 15})
|
|
|
|
|
+ .padding({ left: 18, top: 23, right: 18, bottom: 23 })
|
|
|
|
|
+ .onClick(() => { this.vm._onDeleteStudent() })
|
|
|
|
|
+ }
|
|
|
|
|
+ .borderRadius({topRight: 15, bottomRight: 15})
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ @Builder
|
|
|
|
|
+ rightComp(){
|
|
|
|
|
+ Image($r('app.media.icon_setting'))
|
|
|
|
|
+ .width(25)
|
|
|
|
|
+ .aspectRatio(1)
|
|
|
|
|
+ .onClick(() => { this.vm._onMyPage() })
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
|
|
+ @Builder
|
|
|
|
|
+ leftComp(){
|
|
|
|
|
+ Text('学生信息')
|
|
|
|
|
+ .fontSize(24)
|
|
|
|
|
+ .fontWeight(600)
|
|
|
}
|
|
}
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-@Builder
|
|
|
|
|
-function headerLeftBuilder() {
|
|
|
|
|
- Image($r('app.media.app_icon'))
|
|
|
|
|
- .width(24)
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-@Builder
|
|
|
|
|
-function headerRightBuilder() {
|
|
|
|
|
- Image($r("app.media.app_icon"))
|
|
|
|
|
- .width(24)
|
|
|
|
|
}
|
|
}
|