鸿蒙 NEXT 开发案例：保质期计算

@Entry@Componentstruct ExpiryDateCalculator {  // 定义文本颜色的状态变量，初始值为深灰色  @State private textColor: string = "#2e2e2e";  // 定义阴影边框颜色的状态变量，初始值为浅灰色  @State private shadowColor: string = "#d5d5d5";  // 定义基础内边距的状态变量，初始值为30  @State private basePadding: number = 30;  // 定义是否已过期的状态变量，初始值为false  @State private isExpired: boolean = false;  // 定义生产日期的状态变量，初始值为空字符串  @State private productionDate: string = "";  // 定义到期日期的状态变量，初始值为空字符串  @State private expiryDate: string = "";  // 定义剩余有效天数的状态变量，初始值为0  @State private remainingDays: number = 0;  // 定义主题颜色，初始值为橙色  @State private themeColor: string | Color = Color.Orange;  // 输入框是否获得了焦点的状态变量，初始值为false  @State isInputFocused: boolean = false;  // 定义监听输入文本变化的状态变量，初始值为"9"  @State @Watch('inputChanged') private inputText: string = "9";  // 定义选择的日期状态变量，初始值为当前日期  @State @Watch('inputChanged') private selectedDate: Date = new Date()
  // 组件即将出现时的操作  aboutToAppear(): void {    // 调用输入变化处理方法    this.inputChanged()  }
  // 获取年月日的方法  getYearMonthDay(date: Date) {    // 获取年份并格式化为4位数    const year: string = date.getFullYear().toString().padStart(4, '0');    // 获取月份并格式化为2位数    const month: string = (date.getMonth() + 1).toString().padStart(2, '0');    // 获取日期并格式化为2位数    const day: string = date.getDate().toString().padStart(2, '0');    // 返回格式化后的日期字符串    return `${year}年${month}月${day}日`;  }
  // 输入变化时的处理方法  inputChanged() {    // 打印当前选择的日期    console.info(`selectedDate:${this.selectedDate}`);    // 更新生产日期为选择的日期    this.productionDate = this.getYearMonthDay(this.selectedDate);    // 创建到期日期对象    let expiryDate: Date = new Date(this.selectedDate);    // 根据输入的天数更新到期日期    expiryDate.setDate(expiryDate.getDate() + Number(this.inputText));    // 更新到期日期为格式化后的字符串    this.expiryDate = this.getYearMonthDay(expiryDate);    // 判断是否已过期    this.isExpired = expiryDate.getTime() < new Date().getTime();    // 计算时间差    const timeDifference = expiryDate.getTime() - new Date().getTime();    // 计算剩余天数    this.remainingDays = Math.ceil(timeDifference / (1000 * 60 * 60 * 24));  }   // 构建UI界面的方法  build() {    // 创建一个列布局容器    Column() {       // 添加标题      Text('保质期计算')        .fontColor(this.textColor)// 设置字体颜色        .fontSize(18)// 设置字体大小        .width('100%')// 设置宽度为100%        .height(50)// 设置高度为50        .textAlign(TextAlign.Center)// 设置文本对齐方式为居中        .backgroundColor(Color.White)// 设置背景颜色为白色        .shadow({          // 设置阴影效果          radius: 2, // 阴影半径          color: this.shadowColor, // 阴影颜色          offsetX: 0, // X轴偏移量          offsetY: 5 // Y轴偏移量        });      // 创建可滚动的容器      Scroll() {        // 在可滚动容器内部创建列布局        Column() {          // 添加统计结果展示          Column() {            // 是否过期            Row() {              Text() {                Span(`保质状态：`) // 显示文本“保质状态：”                Span(`${this.isExpired ? '已过期' : '未过期'}`)// 根据状态显示“已过期”或“未过期”                  .fontColor(this.isExpired ? "#e74c3c" : "#3ace7d") // 根据状态设置字体颜色              }              .fontColor(this.textColor) // 设置字体颜色              .fontSize(16) // 设置字体大小              .layoutWeight(1); // 设置布局权重            }            .constraintSize({ minHeight: 45 }) // 设置最小高度            .justifyContent(FlexAlign.SpaceBetween) // 设置内容对齐方式            .width('100%'); // 设置宽度为100%
            Divider(); // 添加分隔线            // 剩余天数            Row() {              Text() {                Span(`剩余天数：`) // 显示文本“剩余天数：”                Span(`${this.remainingDays < 0 ? 0 : this.remainingDays} `).fontColor(Color.Orange) // 显示剩余天数，负数显示为0                Span('天') // 显示单位“天”              }              .fontColor(this.textColor) // 设置字体颜色              .fontSize(16) // 设置字体大小              .layoutWeight(1); // 设置布局权重            }            .constraintSize({ minHeight: 45 }) // 设置最小高度            .justifyContent(FlexAlign.SpaceBetween) // 设置内容对齐方式            .width('100%'); // 设置宽度为100%
            Divider(); // 添加分隔线            // 生产日期            Row() {              Text() {                Span(`生产日期：`) // 显示文本“生产日期：”                Span(`${this.productionDate} `) // 显示生产日期              }              .fontColor(this.textColor) // 设置字体颜色              .fontSize(16) // 设置字体大小              .layoutWeight(1); // 设置布局权重            }            .constraintSize({ minHeight: 45 }) // 设置最小高度            .justifyContent(FlexAlign.SpaceBetween) // 设置内容对齐方式            .width('100%'); // 设置宽度为100%
            Divider(); // 添加分隔线            // 到期日期            Row() {              Text() {                Span(`到期日期：`) // 显示文本“到期日期：”                Span(`${this.expiryDate} `) // 显示到期日期              }              .fontColor(this.textColor) // 设置字体颜色              .fontSize(16) // 设置字体大小              .layoutWeight(1); // 设置布局权重            }            .constraintSize({ minHeight: 45 }) // 设置最小高度            .justifyContent(FlexAlign.SpaceBetween) // 设置内容对齐方式            .width('100%'); // 设置宽度为100%          }          .alignItems(HorizontalAlign.Start) // 设置子项对齐方式          .width('650lpx') // 设置宽度为650像素          .padding(`${this.basePadding}lpx`) // 设置内边距          .margin({ top: `${this.basePadding}lpx` }) // 设置上边距          .borderRadius(10) // 设置圆角          .backgroundColor(Color.White) // 设置背景颜色为白色          .shadow({            // 设置阴影效果            radius: 10, // 阴影半径            color: this.shadowColor, // 阴影颜色            offsetX: 0, // X轴偏移量            offsetY: 0 // Y轴偏移量          });
          // 添加示例和清空按钮          Column() {            Row() {              // 添加文本输入区域              Row() {                TextInput({ text: $$this.inputText, placeholder: `请输入保质期天数` })// 创建文本输入框                  .type(InputType.Number)// 设置输入类型为数字                  .layoutWeight(1)// 设置布局权重                  .fontSize(16)// 设置字体大小                  .textAlign(TextAlign.JUSTIFY)// 设置文本对齐方式                  .backgroundColor(Color.Transparent)// 设置背景色为透明                  .padding(0)// 设置内边距为0                  .height('100%')// 设置高度为100%                  .placeholderColor(this.isInputFocused ? this.themeColor : Color.Gray)// 设置占位符颜色                  .fontColor(this.isInputFocused ? this.themeColor : this.textColor)// 设置字体颜色                  .caretColor(this.themeColor)// 设置光标颜色                  .borderRadius(0)// 设置圆角为0                  .onBlur(() => this.isInputFocused = false)// 失去焦点时更新状态                  .onFocus(() => this.isInputFocused = true)// 获得焦点时更新状态                  .width('100%'); // 设置宽度为100%              }              .padding(`${this.basePadding / 2}lpx`) // 设置内边距              .backgroundColor("#f2f1fd") // 设置背景色              .layoutWeight(1) // 设置布局权重              .borderWidth(1) // 设置边框宽度              .borderRadius(10) // 设置圆角为10              .borderColor(this.isInputFocused ? this.themeColor : Color.Gray) // 根据焦点状态设置边框颜色              .margin({ right: `${this.basePadding / 2}lpx` }); // 设置右边距
              Blank(); // 添加空白占位符
              // 清空按钮              Text('清空')// 显示文本“清空”                .fontColor("#e48742")// 设置字体颜色                .fontSize(16)// 设置字体大小                .padding(`${this.basePadding / 2}lpx`)// 设置内边距                .clickEffect({ level: ClickEffectLevel.LIGHT, scale: 0.8 })// 点击效果                .backgroundColor("#ffefe6")// 设置背景色                .borderRadius(5)// 设置圆角为5                .onClick(() => { // 点击事件处理                  this.inputText = ""; // 清空输入文本                });            }            .height(45) // 设置高度为45            .alignItems(VerticalAlign.Center) // 设置内容垂直居中            .justifyContent(FlexAlign.SpaceBetween) // 设置内容对齐方式            .width('100%'); // 设置宽度为100%
            Divider(); // 添加分隔线
            // 选择生产日期            Row() {              Text('请选择生产日期')// 显示文本“请选择生产日期”                .fontColor("#5871ce")// 设置字体颜色                .fontSize(16)// 设置字体大小                .padding(`${this.basePadding / 2}lpx`)// 设置内边距                .backgroundColor("#f2f1fd")// 设置背景色                .borderRadius(5)// 设置圆角为5                .clickEffect({ level: ClickEffectLevel.LIGHT, scale: 0.8 }) // 点击效果              Blank(); // 添加空白占位符              CalendarPicker({ hintRadius: 10, selected: this.selectedDate })// 创建日历选择器                .edgeAlign(CalendarAlign.END)// 设置对齐方式                .textStyle({ color: "#ff182431", font: { size: 20, weight: FontWeight.Normal } })// 设置文本样式                .margin(10)// 设置外边距                .onChange((date: Date) => { // 日期变化事件处理                  this.selectedDate = date // 更新选择的日期                })            }            .height(45) // 设置高度为45            .justifyContent(FlexAlign.SpaceBetween) // 设置内容对齐方式            .width('100%'); // 设置宽度为100%          }          .alignItems(HorizontalAlign.Start) // 设置内容水平对齐方式          .width('650lpx') // 设置宽度为650像素          .padding(`${this.basePadding}lpx`) // 设置内边距          .margin({ top: `${this.basePadding}lpx` }) // 设置上边距          .borderRadius(10) // 设置圆角为10          .backgroundColor(Color.White) // 设置背景颜色为白色          .shadow({            // 设置阴影效果            radius: 10, // 阴影半径            color: this.shadowColor, // 阴影颜色            offsetX: 0, // X轴偏移量            offsetY: 0 // Y轴偏移量          });
          // 添加工具介绍          Column() {            Text('工具介绍')// 显示文本“工具介绍”              .fontSize(18)// 设置字体大小为18              .fontWeight(600)// 设置字体粗细              .fontColor(this.textColor); // 设置字体颜色为状态变量中定义的文本颜色
            Text('输入需要计算保质期商品的生产日期和保质期天数，工具将为您自动计算商品的保质期状态、剩余天数、到期日。')// 显示工具介绍文本              .textAlign(TextAlign.JUSTIFY)// 设置文本对齐方式为两端对齐              .fontSize(16)// 设置字体大小为16              .fontColor(this.textColor)// 设置字体颜色为状态变量中定义的文本颜色              .margin({ top: `${this.basePadding / 2}lpx` }); // 设置上边距为基础内边距的一半          }          .alignItems(HorizontalAlign.Start) // 设置内容水平对齐方式          .width('650lpx') // 设置宽度为650像素          .padding(`${this.basePadding}lpx`) // 设置内边距          .margin({ top: `${this.basePadding}lpx` }) // 设置上边距          .borderRadius(10) // 设置圆角为10          .backgroundColor(Color.White) // 设置背景颜色为白色          .shadow({            // 设置阴影效果            radius: 10, // 阴影半径            color: this.shadowColor, // 阴影颜色            offsetX: 0, // X轴偏移量            offsetY: 0 // Y轴偏移量          });
        }      }      .scrollBar(BarState.Off) // 关闭滚动条      .clip(false); // 不裁剪内容    }    .height('100%') // 设置高度为100%    .width('100%') // 设置宽度为100%    .backgroundColor("#f4f8fb"); // 设置背景颜色为指定颜色  }}