鸿蒙开发-期末项目-饮品点餐系统（4）

已于 2024-06-27 18:10:24 修改
阅读量763 收藏 13
点赞数 8
分类专栏： 鸿蒙 文章标签： harmonyos 华为
于 2024-06-25 17:21:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74116042/article/details/139963988
版权

目录

前言

一、关键技术

二、实验步骤

1.创建规格选择页 SelectSpecifications.ets

2.创建密码修改页 UpdatePassword.ets

三、遇到的问题

总结

前言

前面提到了主页面的构建，包括：主页面-点餐页 HomePage_Order.ets、主页面-购物车页 HomePage_BuyCar.ets、主页面-订单页 HomePage_Bill、主页面-我的页 HomePage_Me等，接下来将继续介绍创建规格选择页 SelectSpecifications.ets、创建密码修改页 UpdatePassword.ets等。

一、关键技术

  1. 数据库操作（包括增、删、改、查）。
  2. @State、@Link、@Prop、@Provide、@Consume、@Observed、@ObjectLink等装饰器的使用。
  3. Tabs 组件的使用。
  4. List 组件的使用。
  5. Panel组件的使用。
  6. 通过systemDateTime库获取系统当前时间。
  7. @Extend修饰器全局通用样式的使用。
  8. @Styles修饰器的使用。

二、实验步骤

1.创建规格选择页 SelectSpecifications.ets

这里需要注意的有按钮功能的实现细节，例如同一种按钮点击一个后其他按钮要取消选择，类似单选框的逻辑（那我为什么不用单选框？问就是忘了）

其次要注意数量选择器减到1时不能再触发减法。

效果如下：

代码如下： 

import router from '@ohos.router'
import systemDateTime from '@ohos.systemDateTime'
import promptAction from '@ohos.promptAction'
import dataCtrl from '../dataModel/DataCtrl'
import { Tea } from '../viewModel/Tea'
import { User } from '../viewModel/User'
import { HomePage_BuyCar } from './HomePage_BuyCar'
import { Header } from '../view/Header'
@Entry
@Component
struct SelectSpecifications {
  tea: Tea = router.getParams()['tea']
  @State sum: number = 1

  // 规格
  @State norms: object = {
    cup: 0,
    temp: 0,
    sweetness: 0
  }

  build() {
    Column(){

      Header()
      Column(){
        Image(this.tea.image as Resource)
          .sharedTransition(`image${this.tea.no}`, { duration: 800, curve: Curve.Linear, delay: 100 })
          .width('100%')
        Column(){
          Text(this.tea.name)
            .width('100%')
            .fontSize(20)
            .fontWeight(FontWeight.Bold)
            .fontColor(Color.Gray)
            .border({
              width: {
                bottom: 1
              },
              color: Color.Gray
            })
            .margin({bottom: 10})

          // 规格选择模块
          SelectModel({buttonClick: this.buttonClick.bind(this),norms: $norms})

          Row(){
            // 计数器
            Counter(){
              Text(this.sum.toString())
            }
            .onInc(() => {
              this.sum++
            })
            .onDec(() => {
              // 只有大于1时才可以减
              if(this.sum > 1){
                this.sum--
              }
            })

            Button('加入购物车')
              .onClick(() => {
                if(this.norms['cup'] == 0 || this.norms['temp'] == 0 || this.norms['sweetness'] == 0){
                  promptAction.showToast({
                    message: '请先选择茶品标准!',
                    duration: 1500
                  })
                }
                else{
                  // 获取当前时间
                  systemDateTime.getDate(async (err,data) => {
                    if(err){
                      console.log('08808','获取当前时间错误！')
                      return
                    }
                    const nowYear = data.getFullYear().toString();
                    const nowMonth = (data.getMonth() + 1).toString().padStart(2, '0'); // 填充前导零
                    const nowDay = data.getDate().toString().padStart(2, '0')
                    const nowHour = data.getHours().toString().padStart(2, '0')
                    const nowMi = data.getMinutes().toString().padStart(2, '0')
                    const nowSec = data.getSeconds().toString().padStart(2, '0')

                    // 组装时间
                    let Ctime: string = `${nowYear}年${nowMonth}月${nowDay}日 ${nowHour}:${nowMi}:${nowSec}`
                    // 插入购物车数据库
                    await dataCtrl.insertBuy_car(Ctime,User.Uno,this.tea.name,this.sum,this.norms['cup'],this.norms['temp'],this.norms['sweetness'],this.tea.no)

                    promptAction.showToast({
                      message: '添加成功！',
                      duration: 1500
                    })
                    router.back()
                  })
                }
              })
              .type(ButtonType.Normal)
              .width('30%')
              .borderRadius(15)
              .backgroundColor('#d1bf8f')

            Button('退出')
              .onClick(() => {
                router.back()
              })
              .type(ButtonType.Normal)
              .borderRadius(15)
              .width('25%')
              .backgroundColor('#d1bf8f')

          }
          .width('100%')
          .justifyContent(FlexAlign.SpaceBetween)
          .padding({top: 20,bottom: 20})
          .border({
            width: {top: 1},
            color: Color.Gray
          })
        }
        .padding(10)
      }
      .width('100%')
      .height('100%')
      .backgroundColor('#fafafa')
      // .padding()
    }
    .width('100%')
    .height('100%')
  }

  // 按钮点击触发函数
  buttonClick(type: string,index: number){
    this.norms[type] = index
  }
}

// 规格选择模块
@Component
struct SelectModel {
  // 从父组件传进来的按钮点击事件
  buttonClick: (type: string,index: number) => void

  @Link norms: object
  build() {
    Column(){

      Text('规格')
        .width('100%')
        .fontColor(Color.Gray)
      Row(){
        Button('小杯')
          .buttonStyles()
          .backgroundColor(this.norms['cup'] == 1 ? '#dfc8a3' : '#eaeaea')
          .fontColor(this.norms['cup'] == 1 ? Color.White : 'black')
          .onClick(() => {
            this.buttonClick('cup',1)
          })
        Button('中杯')
          .buttonStyles()
          .backgroundColor(this.norms['cup'] == 2 ? '#dfc8a3' : '#eaeaea')
          .fontColor(this.norms['cup'] == 2 ? Color.White : 'black')
          .onClick(() => {
            this.buttonClick('cup',2)
          })
        Button('大杯')
          .buttonStyles()
          .backgroundColor(this.norms['cup'] == 3 ? '#dfc8a3' : '#eaeaea')
          .fontColor(this.norms['cup'] == 3 ? Color.White : 'black')
          .onClick(() => {
            this.buttonClick('cup',3)
          })
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceBetween)
      .margin({top: 5,bottom: 5})

      Text('温度')
        .width('100%')
        .fontColor(Color.Gray)
      Row(){
        Button('全冰')
          .buttonStyles()
          .backgroundColor(this.norms['temp'] == 1 ? '#dfc8a3' : '#eaeaea')
          .fontColor(this.norms['temp'] == 1 ? Color.White : 'black')
          .onClick(() => {
            this.buttonClick('temp',1)
          })
        Button('少冰')
          .buttonStyles()
          .backgroundColor(this.norms['temp'] == 2 ? '#dfc8a3' : '#eaeaea')
          .fontColor(this.norms['temp'] == 2 ? Color.White : 'black')
          .onClick(() => {
            this.buttonClick('temp',2)
          })
        Button('去冰')
          .buttonStyles()
          .backgroundColor(this.norms['temp'] == 3 ? '#dfc8a3' : '#eaeaea')
          .fontColor(this.norms['temp'] == 3 ? Color.White : 'black')
          .onClick(() => {
            this.buttonClick('temp',3)
          })
        Button('常温')
          .buttonStyles()
          .backgroundColor(this.norms['temp'] == 4 ? '#dfc8a3' : '#eaeaea')
          .fontColor(this.norms['temp'] == 4 ? Color.White : 'black')
          .onClick(() => {
            this.buttonClick('temp',4)
          })
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceBetween)
      .margin({top: 5,bottom: 5})

      Text('甜度')
        .width('100%')
        .fontColor(Color.Gray)
      Row(){
        Button('全糖')
          .buttonStyles()
          .backgroundColor(this.norms['sweetness'] == 1 ? '#dfc8a3' : '#eaeaea')
          .fontColor(this.norms['sweetness'] == 1 ? Color.White : 'black')
          .onClick(() => {
            this.buttonClick('sweetness',1)
          })
        Button('少糖')
          .buttonStyles()
          .backgroundColor(this.norms['sweetness'] == 2 ? '#dfc8a3' : '#eaeaea')
          .fontColor(this.norms['sweetness'] == 2 ? Color.White : 'black')
          .onClick(() => {
            this.buttonClick('sweetness',2)
          })
        Button('半糖')
          .buttonStyles()
          .backgroundColor(this.norms['sweetness'] == 3 ? '#dfc8a3' : '#eaeaea')
          .fontColor(this.norms['sweetness'] == 3 ? Color.White : 'black')
          .onClick(() => {
            this.buttonClick('sweetness',3)
          })
        Button('微糖')
          .buttonStyles()
          .backgroundColor(this.norms['sweetness'] == 4 ? '#dfc8a3' : '#eaeaea')
          .fontColor(this.norms['sweetness'] == 4 ? Color.White : 'black')
          .onClick(() => {
            this.buttonClick('sweetness',4)
          })
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceBetween)
      .margin({top: 5,bottom: 3})
      .padding({bottom: 5})
    }
  }
}

// 按钮样式
@Extend(Button) function buttonStyles(){
  .type(ButtonType.Normal)
  .fontColor('black')
  .width('20%')
  .borderRadius(12)
  .backgroundColor('#eaeaea')
}

2.创建密码修改页 UpdatePassword.ets

效果如下：

代码如下： 

import router from '@ohos.router'
import promptAction from '@ohos.promptAction'
import dataCtrl from '../dataModel/DataCtrl'
import { Header } from '../view/Header'
import { User } from '../viewModel/User'
@Entry
@Component
export  struct UpdatePassword {

  oldPassword: string
  newPassword: string

  build() {
    Column(){
      Header()

      Column(){
        Text('设置新密码')
          .margin({bottom: 50})
          .width('100%')
          .fontSize(35)
          .textAlign(TextAlign.Start)

        Row(){
          Text('旧密码')
          TextInput({placeholder: '请输入旧密码'})
            .onChange(message => {
              this.oldPassword = message
            })
            .backgroundColor('#0000')
            .width('70%')
        }
        .width('100%')
        .border({
          width: {bottom: 1},
          color: Color.Gray
        })
        .margin({bottom: 5})

        Row(){
          Text('新密码')
          TextInput({placeholder: '请设置新密码'})
            .onChange(message => {
              this.newPassword = message
            })
            .backgroundColor('#0000')
            .width('70%')
        }
        .width('100%')
        .border({
          width: {bottom: 1},
          color: Color.Gray
        })

        Blank()
        Button('确定')
          .onClick(async () => {
            if(this.oldPassword == User.Upassword){
              if(this.newPassword != '' && this.newPassword != undefined){
                await dataCtrl.updataPassword(User.Uno,this.newPassword)

                router.clear()
                router.replaceUrl(
                  {
                    url: 'pages/LogIn'
                  },
                  router.RouterMode.Single,
                  err => {
                    if(err){
                      console.log('08808','密码修改再跳转失败')
                    }
                  }
                )
                promptAction.showToast({
                  message: '密码修改成功,请重新登录',
                  duration: 1500
                })
              }
              else {
                promptAction.showToast({
                  message: '密码不能为空',
                  duration: 1500
                })
              }
            }
            else{
              promptAction.showToast({
                message: '旧密码错误',
                duration: 1500
              })
            }
          })
          .width('270')
          .borderRadius(5)
          .type(ButtonType.Normal)
          .backgroundColor('#d6b98d')

        Button('取消')
          .onClick(() => {
            router.back()
          })
          .width('270')
          .borderRadius(5)
          .type(ButtonType.Normal)
          .backgroundColor('#d6b98d')
          .margin({bottom: 180,top: 15})
      }
      .width('100%')
      .layoutWeight(1)
      .padding(10)
    }
    .backgroundColor('#fafafa')
    .width('100%')
    .height('100%')
  }
}

三、遇到的问题

问题1：用systemDateTime.getDate(async (err,data) => {}）方法获取时间后，在方法内插入订单数据库，然后在方法外删除购物车中已插入的数据，却发现订单显示价格为0 。

解决方法：systemDateTime.getDate(async (err,data) => {}）方法为异步方法但系统显示非异步方法（加await无用）？故将所有操作都放在方法内即可避免问题。

问题2：判断输入框是否为空，有时没有回应。

解决方法：输入框内容为 '' 和 undefined 二者并不相同。

总结

以上就是本章的主要内容，包括了创建规格选择页 SelectSpecifications.ets、创建密码修改页 UpdatePassword.ets等。

Oraaaaaa
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值