【移动应用设计与开发】湖南省职业院校技能大赛移动应用设计与开发赛项样题一

 智能充电家用版 App（鸿蒙）

【任务说明】

1.进入智能充电家用版 App 首页，页面分为四部分，顶部显示首页标签，标签下方显示用户车辆信息，车辆信息下方显示功能按钮，底部显示菜单并位置固定。

（1）用户车辆信息：包括车辆 3D 模型、车牌、品牌、型号和剩余里程。

（2）车辆 3D 模型：通过旋转和缩放汽车模型可从各个角度查看车辆的外观和设计细节。

（3）中部功能按钮：包括添加充电桩、添加车辆和一键充电。

（4）底部菜单：包括首页、订单和个人中心。点击菜单，进入 对应的页面。

2.当车辆处于 P 档，将充电模拟器上的“充电枪”插入中控大屏 充电接口后，基于 Can 通讯，在车辆信息和功能按钮之间显示车辆充 电状态（待充电）、充电桩名称、电池电量和开始充电按钮。

3.点击开始充电按钮，启动充电，车辆充电状态变为充电中，显 示电池充电动态进度（动画效果展示）、电池电量、充电功率、充电 电量、预计剩余时间和停止充电按钮。

4.充电数据同步到其他终端，包括车主手机 App、中控、后台管 理系统。同步数据包括车辆充电状态、充电桩名称、电池电量、充电 功率、充电电量和预计剩余时间等。

部分代码：

Button("立即登录").width('100%').backgroundColor('#0070FF').margin({ top: 30 })
        .enabled(isLoginButtonClickable(this.userName,this.password))
        .onClick(()=>{
          if(!this.isAgree){
            prompt.showToast({
              message: '请先阅读协议!'
            });
            return
          }
          utils.doRequest("POST","/login",{
            username: this.userName,
            password: this.password
          },(res)=>{
            if(res.code==200){
              AppStorage.SetOrCreate('token', res.token)
              prompt.showToast({
                message: '登录成功!'
              });
              router.pushUrl({
                url: 'pages/Index'
              });
            }
          });

        })

Button(this.status1[this.j]).borderRadius(100).width('70%').margin({top:30}).onClick(()=>{
                      this.i=1
                      this.isTrue2=!this.isTrue2
                      if (this.isTrue2){
                        this.j=1
                      }else {
                        this.j=0
                        clearInterval(this.time)
                        return
                      }
                      this.time=setInterval(()=>{
                        this.num=this.num+1
                        if (this.num>=100) {
                          this.num=0
                          clearInterval(this.time)
                          this.i=2
                          this.j=0
                          return
                        }
                      },1000)
                    })
                  }.width('96%').height(500).margin({top:20})

效果图：