|
|
@@ -1,18 +1,30 @@
|
|
|
import { ytBuildComp } from "../components/ytBuildComp"
|
|
|
-import { routerUtils } from "../utils/RouterUtils"
|
|
|
import { MainViewModel } from "../viewModel/MainViewModel"
|
|
|
+import { emitter } from "@kit.BasicServicesKit"
|
|
|
+import { BasicType, EmitterKeyCollection } from "basic"
|
|
|
+import { BabyInfo, Cuisine, DayPlan } from "../model/Index"
|
|
|
|
|
|
@ComponentV2
|
|
|
export struct MainView {
|
|
|
@Local vm: MainViewModel = new MainViewModel()
|
|
|
|
|
|
+ aboutToAppear(): void {
|
|
|
+ emitter.on(EmitterKeyCollection.LOGIN, () => {
|
|
|
+ this.vm.LoginStatusChange()
|
|
|
+ })
|
|
|
+ emitter.on(EmitterKeyCollection.LOGOUT, () => {
|
|
|
+ this.vm.LoginStatusChange()
|
|
|
+ })
|
|
|
+ this.vm.LoginStatusChange()
|
|
|
+ }
|
|
|
+
|
|
|
build() {
|
|
|
ytBuildComp(){
|
|
|
Column(){
|
|
|
- // title - 标题
|
|
|
+ // 选择宝宝信息
|
|
|
RelativeContainer(){
|
|
|
Row({ space: 5 }){
|
|
|
- Text( '无')
|
|
|
+ Text(this.vm.babyInfo?.name ?? '无')
|
|
|
.fontSize(20)
|
|
|
.fontWeight(500)
|
|
|
Image($r('app.media.icon_BottomOpen'))
|
|
|
@@ -24,94 +36,376 @@ export struct MainView {
|
|
|
top: { anchor: "__container__", align: VerticalAlign.Top},
|
|
|
middle: { anchor: "__container__", align: HorizontalAlign.Center}
|
|
|
})
|
|
|
-
|
|
|
- }
|
|
|
+ }
|
|
|
.height(40)
|
|
|
.width("100%")
|
|
|
|
|
|
- // avatar-Card - 头像卡片
|
|
|
- RelativeContainer(){
|
|
|
- // 文字描述
|
|
|
- Text() {
|
|
|
- Span("宝宝")
|
|
|
+ // 宝宝头像
|
|
|
+ Row(){
|
|
|
+ RelativeContainer(){
|
|
|
+ // 文字描述
|
|
|
+ Text() {
|
|
|
+ Span("宝宝")
|
|
|
|
|
|
- Span('0')
|
|
|
- .fontWeight(700)
|
|
|
- .fontColor(Color.Red)
|
|
|
+ Span(this.vm.babyInfo.days ?? '0天')
|
|
|
+ .fontWeight(700)
|
|
|
+ .fontColor('#95C50A')
|
|
|
|
|
|
- Span("了")
|
|
|
- }
|
|
|
- .fontSize(20)
|
|
|
- .fontWeight(400)
|
|
|
- .fontColor(Color.Black)
|
|
|
- .alignRules({
|
|
|
- middle: { anchor: "__container__", align: HorizontalAlign.Center},
|
|
|
- center: { anchor: "__container__", align: VerticalAlign.Center}
|
|
|
- })
|
|
|
+ Span("了")
|
|
|
+ }
|
|
|
+ .fontSize(20)
|
|
|
+ .fontWeight(400)
|
|
|
+ .fontColor(Color.Black)
|
|
|
+ .alignRules({
|
|
|
+ middle: { anchor: "__container__", align: HorizontalAlign.Center},
|
|
|
+ center: { anchor: "__container__", align: VerticalAlign.Center}
|
|
|
+ })
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 编辑宝宝信息按钮
|
|
|
+ * 如果是亲友团宝宝,则不可进行编辑
|
|
|
+ */
|
|
|
+ Image($r('app.media.icon_edit'))
|
|
|
+ .width(20)
|
|
|
+ .aspectRatio(1)
|
|
|
+ .onClick(() => { })
|
|
|
+ .alignRules({
|
|
|
+ center: { anchor: "__container__", align: VerticalAlign.Center},
|
|
|
+ right: { anchor: "__container__", align: HorizontalAlign.End}
|
|
|
+ })
|
|
|
|
|
|
- /**
|
|
|
- * 编辑宝宝信息按钮
|
|
|
- * 如果是亲友团宝宝,则不可进行编辑
|
|
|
- */
|
|
|
- Image($r('app.media.icon_edit'))
|
|
|
- .width(20)
|
|
|
+ // 头像
|
|
|
+ Row(){
|
|
|
+ Image($r('[basic].media.default_avatar'))
|
|
|
+ .width("100%")
|
|
|
+ .borderRadius(14)
|
|
|
+ .aspectRatio(1)
|
|
|
+ }
|
|
|
+ .width(70)
|
|
|
+ .padding(3)
|
|
|
.aspectRatio(1)
|
|
|
- .onClick(() => { })
|
|
|
+ .borderRadius(14)
|
|
|
+ .backgroundColor('rgba(149,197, 10, 0.3)')
|
|
|
+ .alignItems(VerticalAlign.Center)
|
|
|
+ .justifyContent(FlexAlign.Center)
|
|
|
.alignRules({
|
|
|
- center: { anchor: "__container__", align: VerticalAlign.Center},
|
|
|
- right: { anchor: "__container__", align: HorizontalAlign.End}
|
|
|
+ left: { anchor: "__container__", align: HorizontalAlign.Start},
|
|
|
+ center: { anchor: "__container__", align: VerticalAlign.Center}
|
|
|
})
|
|
|
+ }
|
|
|
+ .height(120)
|
|
|
+ .width("100%")
|
|
|
+ .padding({ left: 17, right: 17 })
|
|
|
+ ._border()
|
|
|
+ }
|
|
|
+ .padding({ left: 28, right: 28 })
|
|
|
|
|
|
+ // 每周食谱计划
|
|
|
+ Column(){
|
|
|
+ Row({space: 6}){
|
|
|
+ Image($r('app.media.icon_edit'))
|
|
|
+ .width(24)
|
|
|
+ .aspectRatio(1)
|
|
|
+ Text("每周食谱计划")
|
|
|
+ .fontSize(14)
|
|
|
+ .fontWeight(500)
|
|
|
+ }
|
|
|
+ .width('100%')
|
|
|
+ .padding({ top: 8, bottom: 8, left: 28, right: 28 })
|
|
|
+ .alignItems(VerticalAlign.Center)
|
|
|
+ .justifyContent(FlexAlign.Start)
|
|
|
|
|
|
-
|
|
|
- // 头像
|
|
|
Row(){
|
|
|
- Image($r('[basic].media.default_avatar'))
|
|
|
- .width(54)
|
|
|
- .borderRadius(36)
|
|
|
- .aspectRatio(1)
|
|
|
+ Swiper(){
|
|
|
+ ForEach(this.vm.week, (item: string, index: number) => {
|
|
|
+ Row(){
|
|
|
+ RecipeWidget({ week: item, vm: this.vm })
|
|
|
+ }
|
|
|
+ .padding(5)
|
|
|
+ .width(320)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ .width('100%')
|
|
|
+ .loop(false)
|
|
|
+ // .index($$this.currentIndex) // 状态变量
|
|
|
+ .indicator(false)
|
|
|
+ .loop(true)
|
|
|
+ .duration(1000)
|
|
|
+ .itemSpace(12)
|
|
|
+ .nextMargin(15)
|
|
|
+ .prevMargin(15)
|
|
|
+ // .onChange(() => {
|
|
|
+ // this.loopSwitch = true;
|
|
|
+ // })
|
|
|
}
|
|
|
- .width(70)
|
|
|
- .aspectRatio(1)
|
|
|
- .borderRadius(36)
|
|
|
- .backgroundColor('#AAE5E2')
|
|
|
+ .width('100%')
|
|
|
+ .padding({top: 8, bottom: 16 })
|
|
|
.alignItems(VerticalAlign.Center)
|
|
|
.justifyContent(FlexAlign.Center)
|
|
|
- .alignRules({
|
|
|
- left: { anchor: "__container__", align: HorizontalAlign.Start},
|
|
|
- bottom: { anchor: "__container__", align: VerticalAlign.Center}
|
|
|
- })
|
|
|
}
|
|
|
- .height(120)
|
|
|
- .width("100%")
|
|
|
- .borderRadius(12)
|
|
|
- .padding({ left: 17, right: 17 })
|
|
|
- .border({ width: 1, color: '#30E3CE8C' })
|
|
|
- .linearGradient({
|
|
|
- colors: [ ['#ABF5EC', 0.01], ['#FFFFFF', 0.8]],
|
|
|
- angle: 270
|
|
|
- })
|
|
|
- .onClick(() => { routerUtils.router2IncreaseBabyInfo() })
|
|
|
+ .margin({top: 16})
|
|
|
+
|
|
|
+ // 采购清单
|
|
|
+ Column(){
|
|
|
+ Row({space: 6}){
|
|
|
+ Image($r('app.media.icon_edit'))
|
|
|
+ .width(24)
|
|
|
+ .aspectRatio(1)
|
|
|
+ Text(){
|
|
|
+ Span("采购清单 ")
|
|
|
+
|
|
|
+ Span(' 根据您的周计划生成的食物采购清单')
|
|
|
+ .fontSize(12)
|
|
|
+ .fontColor('#A9A9A9')
|
|
|
+ }
|
|
|
+ .fontSize(14)
|
|
|
+ .fontWeight(500)
|
|
|
+ }
|
|
|
+ .width('100%')
|
|
|
+ .padding({ top: 8, bottom: 8, left: 28, right: 28 })
|
|
|
+ .alignItems(VerticalAlign.Center)
|
|
|
+ .justifyContent(FlexAlign.Start)
|
|
|
+
|
|
|
+ Column(){
|
|
|
+ Column(){
|
|
|
+ if(true){ // 菜品列表
|
|
|
+ ForEach(new Array(3).fill(0), (item: number, index: number) =>{
|
|
|
+ Row(){
|
|
|
+ Text('南瓜-100g')
|
|
|
+
|
|
|
+ Image($r('app.media.icon_select'))
|
|
|
+ .width(20)
|
|
|
+ .aspectRatio(1)
|
|
|
+ }
|
|
|
+ .width("100%")
|
|
|
+ .justifyContent(FlexAlign.SpaceBetween)
|
|
|
+ .padding({ left: 16, right: 16, top: 15, bottom: 10 })
|
|
|
+ })
|
|
|
+
|
|
|
+ // 省略号
|
|
|
+ Row(){
|
|
|
+ Text('.......')
|
|
|
+ }
|
|
|
+ .width("100%")
|
|
|
+ .alignItems(VerticalAlign.Center)
|
|
|
+ .justifyContent(FlexAlign.Start)
|
|
|
+ .padding({ left: 16, right: 16, top: 5 })
|
|
|
|
|
|
+ // 查看全部
|
|
|
+ Row(){
|
|
|
+ Text('查看全部')
|
|
|
+ .fontSize(12)
|
|
|
+ .fontColor('#95C50A')
|
|
|
+ }
|
|
|
+ .width("100%")
|
|
|
+ .alignItems(VerticalAlign.Center)
|
|
|
+ .justifyContent(FlexAlign.End)
|
|
|
+ .padding({ left: 16, right: 16, top: 5, bottom: 16 })
|
|
|
+ } else {
|
|
|
+ Row(){
|
|
|
+ Text('暂无数据')
|
|
|
+ .fontSize(16)
|
|
|
+ .fontColor('#A6A6AB')
|
|
|
+ }
|
|
|
+ .width("100%")
|
|
|
+ .padding({left: 16, top: 15, bottom: 15})
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .width('100%')
|
|
|
+ .alignItems(HorizontalAlign.Center)
|
|
|
+ .justifyContent(FlexAlign.Center)
|
|
|
+ ._border()
|
|
|
+ }
|
|
|
+ .padding({ left: 30, right: 30 })
|
|
|
+ }
|
|
|
}
|
|
|
.width("100%")
|
|
|
- .height("100%")
|
|
|
- .padding({ top: this.vm.safeTop + 12, left: 16, right: 16 })
|
|
|
+ .height('100%')
|
|
|
+ .backgroundColor('#F7F9FA')
|
|
|
+ .padding({ top: this.vm.safeTop + 12})
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 菜单结构
|
|
|
@Builder _Menu(){
|
|
|
Menu() {
|
|
|
- // ForEach(this.vm.babyList, (item: BabyInfoList, index: number) => {
|
|
|
- // MenuItem({ content: item.developmentBabyInfo?.name ?? '无' })
|
|
|
- // .onClick(() => { this.vm.updateBabyInfo(index) })
|
|
|
- // }, (item: BabyInfoList) => item.developmentBabyInfo?.id)
|
|
|
+ ForEach(this.vm.babyList, (item: BabyInfo, index: number) => {
|
|
|
+ MenuItem({ content: item.name ?? '无' })
|
|
|
+ .onClick(() => { this.vm.updateBabyInfo(index) })
|
|
|
+ }, (item: BabyInfo) => item?.id + '')
|
|
|
|
|
|
MenuItem({ content: '添加宝宝' })
|
|
|
.onClick(() => {
|
|
|
+ this.vm.checkLogin(() => {
|
|
|
+ this.vm.increaseBabyInfo()
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @Styles
|
|
|
+ _border(){
|
|
|
+ .borderRadius(12)
|
|
|
+ .backgroundColor(Color.White)
|
|
|
+ .shadow({
|
|
|
+ radius: 15, type: ShadowType.COLOR, color: 'rgba(0, 0, 0, 0.04)', offsetY: 4
|
|
|
+ })
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * @description 每周食谱计划组件
|
|
|
+ */
|
|
|
+@ComponentV2
|
|
|
+struct RecipeWidget{
|
|
|
+ @Require @Param week: string = "周一"
|
|
|
+ @Require @Param vm: MainViewModel = new MainViewModel()
|
|
|
+
|
|
|
+ @Local isShowEnum: string = ''
|
|
|
+ @Local toDayPlan?: DayPlan
|
|
|
+
|
|
|
+ threeMeals: Array<BasicType<Cuisine>> = []
|
|
|
+
|
|
|
+ getToDayPlan(){
|
|
|
+ switch (this.week) {
|
|
|
+ case '周一':
|
|
|
+ this.toDayPlan = this.vm.planList?.monday
|
|
|
+ break;
|
|
|
+ case '周二':
|
|
|
+ this.toDayPlan = this.vm.planList?.tuesday
|
|
|
+ break;
|
|
|
+ case '周三':
|
|
|
+ this.toDayPlan = this.vm.planList?.wednesday
|
|
|
+ break;
|
|
|
+ case '周四':
|
|
|
+ this.toDayPlan = this.vm.planList?.thursday
|
|
|
+ break;
|
|
|
+ case '周五':
|
|
|
+ this.toDayPlan = this.vm.planList?.friday
|
|
|
+ break;
|
|
|
+ case '周六':
|
|
|
+ this.toDayPlan = this.vm.planList?.saturday
|
|
|
+ break;
|
|
|
+ case '周日':
|
|
|
+ this.toDayPlan = this.vm.planList?.sunday
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ if(this.toDayPlan && this.toDayPlan.breakfast) {
|
|
|
+ this.toDayPlan!.breakfast!.name = "我改一改看看"
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ aboutToAppear(): void {
|
|
|
+ this.getToDayPlan()
|
|
|
+ this.threeMeals = [
|
|
|
+ {
|
|
|
+ text: '早餐',
|
|
|
+ id: 'breakfast'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '午餐',
|
|
|
+ id: 'lunch'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '晚餐',
|
|
|
+ id: 'dinner'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+
|
|
|
+ build() {
|
|
|
+ Column({space: 8}){
|
|
|
+ // 周几
|
|
|
+ Row(){
|
|
|
+ Text(this.week)
|
|
|
+ .fontSize(16)
|
|
|
+ .fontWeight(600)
|
|
|
+ }
|
|
|
+
|
|
|
+ Column(){
|
|
|
+ ForEach(this.threeMeals, (item: BasicType, index: number) => {
|
|
|
+ Row({space: 12}){
|
|
|
+ Text(item.text)
|
|
|
+ .fontSize(14)
|
|
|
+ .fontColor('#4F4F4F')
|
|
|
+
|
|
|
+ Row(){
|
|
|
+ this._Divider(25)
|
|
|
+ }
|
|
|
+ .clip(true)
|
|
|
+ .layoutWeight(1)
|
|
|
+
|
|
|
+ Row({space: 8}){
|
|
|
+ Text(){
|
|
|
+ // if(true) {
|
|
|
+ // Span('南瓜-100g')
|
|
|
+ // } else {
|
|
|
+ // Span('无')
|
|
|
+ // .fontSize(14)
|
|
|
+ // .fontColor('#A6A6AB')
|
|
|
+ // }
|
|
|
+
|
|
|
+ if(item.text === '早餐') {
|
|
|
+ Span(this.toDayPlan?.breakfast?.name)
|
|
|
+ } else if(item.text === '午餐') {
|
|
|
+ Span(this.toDayPlan?.lunch?.name)
|
|
|
+ } else if(item.text === '晚餐') {
|
|
|
+ Span(this.toDayPlan?.dinner?.name)
|
|
|
+ } else {
|
|
|
+ Span('无')
|
|
|
+ .fontSize(14)
|
|
|
+ .fontColor('#A6A6AB')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .fontSize(14)
|
|
|
+
|
|
|
+ Image($r('[basic].media.ic_back'))
|
|
|
+ .rotate({ angle:270 })
|
|
|
+ .width(20)
|
|
|
+ }
|
|
|
+ .width(90)
|
|
|
+ .bindMenu(this._MenuWidget, { hapticFeedbackMode: HapticFeedbackMode.ENABLED })
|
|
|
+ .onClick(() => { this.isShowEnum = '七七八八'+item.text })
|
|
|
+ }
|
|
|
+ .width('100%')
|
|
|
+ .padding({top: 14, bottom: 14})
|
|
|
+ .alignItems(VerticalAlign.Center)
|
|
|
})
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .height(200)
|
|
|
+ .width("100%")
|
|
|
+ .borderRadius(10)
|
|
|
+ .backgroundColor(Color.White)
|
|
|
+ .alignItems(HorizontalAlign.Start)
|
|
|
+ .shadow({ radius: 15, type: ShadowType.COLOR, color: 'rgba(0, 0, 0, 0.04)', offsetY: 4 })
|
|
|
+ .padding({left: 16, right: 16, top: 12, bottom: 12})
|
|
|
+ }
|
|
|
+
|
|
|
+ // 菜单结构
|
|
|
+ @Builder _MenuWidget(){
|
|
|
+ Column(){
|
|
|
+ ForEach(new Array(5).fill(0), (item:number, index: number) => {
|
|
|
+ Text(this.isShowEnum ?? "南瓜米糊米糊")
|
|
|
+ .fontSize(16)
|
|
|
+ .fontWeight(500)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ .width(160)
|
|
|
+ .padding({left: 12, right: 12, top: 5, bottom: 5})
|
|
|
+ }
|
|
|
+
|
|
|
+ // 分隔线
|
|
|
+ @Builder _Divider(count: number = 25, color: ResourceColor = 'rgb(166,166,171)'){
|
|
|
+ Row({space: 4}){
|
|
|
+ ForEach(new Array(count).fill(0), (item: number, index) => {
|
|
|
+ Row()
|
|
|
+ .height(1)
|
|
|
+ .width(3)
|
|
|
+ .backgroundColor(color)
|
|
|
+ })
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+
|