华为鸿蒙北向应用开发DAY9——来自软通教育项目实训

昨天做完了个人中心和主页面，今天来做登录的页面，通过个人页面点击登录跳转到登录页面

通过goLogin（）方法转到登录的页面：

对于登录页面有几个，图标，文字，拖动条等的样式与之前类似，没有什么为题。主要实现两个功能：

第一个是点击登录后出现一个加载的dialog，第二个是如果代表着验证的拖动条没有被拖动到最后，那么会给出提示信息，要求用户先验证再登录。

深蓝色为主进度条，浅蓝色是次级进度条，进度条为环形。

然后是登录的验证：

实时获得拖动进度条时的横坐标并且赋值给进度条长度实现伸长效果，如果没有拖动到最后就松开则归零，拖动到最后就设置为验证成功。

如果没有完成验证就点击登录，就会出现提示：

设置一个checked用来表示是否验证成功，再设置一个isdrop为是否显示提示信息,两者最初都是false,如果验证成功，checked变为true,如果checked为false则将isdrop变为true，再通过

显示提示信息。这里注意，虽然isdrop为true是需要显示提示，但是不能一开始就将它设置为false，否则页面一开始即使什么都没做就会有提示信息，很不美观。

但是老师的做法又出现了一个问题，如果我将进度条拖动到了最后，拖动条还是可以被拖动，就可以将它拖回去，这时应该算是未完成验证，可以由于上一次拖动完成了验证，代码里的checked已经变成了true，所以第二次的拖动就没有了意义不管拖不拖动都是已完成了验证，不会有提示。

于是稍加修改：

拖动后判断最后一次横坐标位置，这时如果进度条在最后就验证成功，否则不成功。这样解决了反复拖动checked不会变动的问题。这里else的不能写this.isdrop=true，不然即使不点登录也会有提示验证，让isdrop完全在login方法里变化。

loadingDialog.hml:

<dialog id="loadingDialog" style="margin-bottom: 50%; width: 120px; height: 120px; border-radius: 10px;"><div style="width: 100%; height: 100%; flex-direction: column; justify-content: center; align-items: center; background-color: gray;"><progress style="width: 50px; height: 50px;" type="ring" percent="10" secondarypercent="50" ></progress><text style="color: white; font-size: 14px; ">正在加载</text></div>
</dialog>

loadingDialog.js：

export default {data: {title: 'World'}
}

loadingDialog.css：

.container {display: flex;justify-content: center;align-items: center;left: 0px;top: 0px;width: 454px;height: 454px;
}.title {font-size: 30px;text-align: center;width: 200px;height: 100px;
}

<element src="../loadingDialog/loadingDialog.hml" name="loadingDialog"></element>
<div class="container"><div style="width: 100%; height: 70px;"><image src="common/images/isoftstone.png"style="width: 160px; height: 30px; object-fit: contain; margin: 20px 0 0 20px;"></image></div><div style="width: 100%; flex-direction: column; align-items: center; justify-content: center;"><text style="width: 100%; height: 70px; text-align: center; color: #CD6090; font-size: 28px; font-weight: bold; padding-bottom: 30px; letter-spacing: 3px;">通鸿云课堂</text><form onsubmit="login" ><div style="width: 100%; height: 60px; justify-content: center;"><input type="text" style="width: 80%; border-radius: 5px;" name="username" placeholder="请输入手机号/邮箱/个人账号"></input></div><div style="width: 100%; height: 60px; justify-content: center;"><input type="password" style="width: 80%; border-radius: 5px;" name="password" placeholder="请输入登录密码"></input></div><div style="width: 100%; height: 60px; justify-content: center;"><stack style="width: 100%; height: 100%; flex-direction: column; justify-content: center; align-items: center;"><div style="width: 80%; height: 40px; border-radius: 2px; background-color: #F5F5F5; justify-content: center; align-items: center;"><text style="font-size: 14px; color: #999999;">向右滑动验证</text></div><div style="width: 80%; height: 40px; border-radius: 2px; justify-content: flex-start; align-items: center;"><div style="width: {{width}}; height: 100%; background-color: #76EEC6; justify-content: center; align-items: center;"><block if="{{checked}}"><text style="font-size: 16px; color: white;">验证成功</text></block></div><div on:dragstart="dragstart" on:drag="drag" on:dragend="dragend" style="width: 40px; height: 40px; background-color: #999999;border-radius: 2px;justify-content: center; align-items: center;" ><image src="common/icon/ge.png" style="width: 10px; height: 10px; object-fit: contain;"></image></div></div></stack></div><block if="{{isdrop}}"><div style="width: 100%; height: 22px; align-items: center; justify-content: center;"><text style="width: 80%; font-size: 14px; color: #CD2626; text-align: left;">请先完成验证</text></div></block><div style="width: 100%; height: 30px; justify-content: center;"><div style="width: 80%; height: 30px; justify-content: space-between; align-items: center;"><text style="font-size: 14px; color: #63B8FF;">忘记密码</text><text style="font-size: 14px; color: #63B8FF;" onclick="goRegister">快速注册</text></div></div><div style="width: 100%; height: 60px; justify-content: center; align-items: center;"><input type="submit" class="bt_login">登     录</input></div></form></div><loadingdialog id="dialogComp"></loadingdialog><div style="width: 100%; justify-content: center; align-items: center; flex-direction: column; bottom: 15px;"><text style="font-size: 12px; color: #C1C1C1;">2022 @ EDU OnLine Harmony OS.</text><text style="font-size: 12px; color: #C1C1C1;">Design By CYL</text></div>
</div>

import router from '@system.router';
export default {data: {width:0,checked:false,isdrop:false},dragstart(e){},drag(e){this.width=e.globalX;},dragend(e){if(this.width<295){this.width=0}else{this.width=300;}if(this.width==300){this.checked=true;this.isdrop= false;}else{this.checked=false;}},goRegister(){router.push({uri: "pages/registerPage/registerPage"})
},login(result){if(!this.checked){this.isdrop=true;return ;}console.log(result.value.username);console.log(result.value.password);let loadingDialog=this.$child("dialogComp").$element("loadingDialog");loadingDialog.show();}}

.container {flex-direction: column;align-items: center;justify-content: space-between;width: 100%;height: 100%;position: relative;background-image: url('common/images/login-bg.svg');
}
.bt_login{width: 80%;height: 40px;text-align: center;font-size: 16px;border-radius: 5px;background-color: #CD6889;
}

注册页面：

也有两个主要功能：一个是获取验证码，然后一分钟后可以重新获得验证码，第二个是注册之前需要勾选同意同意注意事项，否则会跳出提示对话框。

获取验证码：

使用setInterval计时，没过一秒显示的时间就减一，并在此时设置disablew为true表示一分钟之内不可再次点击获取验证码

勾选：

定义isRead为false，如果点击了勾选图标则变为true，点击注册按钮后判断isRead的真假，如果为真可以正常注册，如果为假则弹出对话框。

对话框有两个按钮，分别为拒绝和同意，如果点击拒绝则只做关闭对话框，如果点击同意则isRead变为true,勾选框就会被勾选。

可以正常注册的情况下，点击注册后会到一个加载页面，这个加载页面和登录的加载页面一样，可以直接作为element引用

另外老师示例中的设置密码一栏也是用的text,我觉得即使是设置密码也最好是不会直接被看到，所以使用的password

<element src="../loadingDialog/loadingDialog.hml" name="loading"></element>
<div class="container"><div style="width: 100%; height: 40px; align-items: center; margin-top: 10px;"><image style="width: 16px; height: 16px; object-fit: contain; margin-left: 10px; " src="common/icon/le.png"></image></div><text style="width: 100%; height: 50px; font-size: 22px; padding-left: 10px;">手机号注册</text><form onsubmit="register"><div style="width: 100%; flex-direction: column; align-items: center; margin-top: 50px;"><div style="width: 94%; border-bottom: 1px solid #AAAAAA; justify-content: center; align-items: center; margin-top: 20px;"><input type="text" style="width: 65%; background-color: white; border-radius: 2px;" placeholder="请输入手机号"></input><select style="width: 35%; font-size: 12px; color: #949494;"><option value="86" selected="true">中国 +86</option><option value="001">美国 +001</option><option value="81">日本 +81</option></select></div><div style="width: 94%; border-bottom: 1px solid #AAAAAA; justify-content: center; align-items: center; margin-top: 20px"><input type="text" style="width: 65%; background-color: white; border-radius: 2px;" placeholder="请输入验证码"></input><button type="text" style="width: 35%; font-size: 12px; color: #949494;" onclick="getMes" disabled="{{isSend}}">{{!isSend  ?'获取验证码' :'重新发送('+time+')'}}</button></div><div style="width: 94%; border-bottom: 1px solid #AAAAAA; justify-content: center; align-items: center; margin-top: 20px"><input type="password" style="width: 100%; background-color: white; border-radius: 2px;" placeholder="设置密码"></input></div><div style="width: 94%; height: 50px; align-items: flex-start; margin-top: 40px;"><image src="{{isRead ?'common/icon/read-active.png':'common/icon/read.png'}}" onclick="read" style="width: 12px; height: 12px; object-fit: contain; margin-left: 2px; margin-top: 1px;"></image><text style="font-size: 12px; color: #949494; margin-left: 5px;"><span>我已阅读并同意</span><span style="font-weight: bold;">《通鸿用户服务协议》、《隐私政策》，等接受免除或者限制责任、诉讼管辖约定</span><span>等粗体标识条款。</span></text></div><div style="width: 94%; justify-content: center;align-items: center; margin-top: 50px;"><input type="submit" class="reg_btn">注          册</input></div></div><div style="width: 80%; height: 80px; flex-direction: column; justify-content: space-around; align-items: center; margin-top:50px; margin-left: 35px;" ><div><divider style="width: 35%; color: #949494; stroke-width: 1px; line-cap: round;" vertical="false"></divider><text style="width: 30%; text-align: center; font-size: 12px; color: #949494;">第三方账号登录</text><divider style="width: 35%; color: #949494; stroke-width: 1px; line-cap: round;" vertical="false"></divider></div><div style="width: 40%; align-items: center; justify-content: space-around;"><image src="common/icon/wechat.png" style="width: 24px; height: 24px; object-fit: contain;"/><image src="common/icon/qq.png" style="width: 24px; height: 24px; object-fit: contain;"/><image src="common/icon/dingding.png" style="width: 24px; height: 24px; object-fit: contain;"/></div></div></form><dialog id="ReadDialog" style="width: 80%; height: 160px; margin-bottom: 50%;"><div style="width: 100%; height: 90%; flex-direction: column; align-items: center; justify-content: space-around;"><div style="width: 80%; height: 30%; align-items: center; flex-direction: column; justify-content: space-around;"><text style="font-size: 16px;font-weight: bold; ">服务协议及隐私保护</text></div><div style="width: 80%; height: 50%; align-items: center; flex-direction: column; justify-content: space-around;"><text style="width: 100%; height: 100%; font-size: 12px; color: #949494; text-align: center;"><span>为了更好地保障您的合法权益，请您阅读并同意以下协议</span><span style="font-weight: bold;">《通鸿用户服务协议》、《隐私政策》</span></text></div><div style="width: 80%; height: 20%; align-items: center;  justify-content: space-around;"><button style="width: 100px;height: 24px; background-color: white; border:1px solid #949494;font-size: 12px; border-radius: 10px; text-color: black;" onclick="refuse">拒绝</button><button style="width: 100px;height: 24px; background-color: #CD6090; border:1px solid #949494;font-size: 12px; text-color: white;  border-radius: 10px;" onclick="agree">同意</button></div></div></dialog><loading id="dialogComp"></loading>
</div>

js:

import prompt from '@system.prompt';
export default {data: {isSend:false,isRead:false,time:60},getMes(){this.isSend=true;prompt.showToast({message: "验证码已发送",duration: 3000,bottom: '50%'});var intervalId=setInterval(()=>{if(this.time>1){this.time--;}else{clearInterval(intervalId);this.isSend=false;}},1000)},read(){this.isRead=!this.isRead;},refuse(){this.$element("ReadDialog").close();},agree(){this.$element("ReadDialog").close();this.isRead=true;},register(result){if(!this.isRead){this.$element("ReadDialog").show();return;}else{let loadingDialog=this.$child("dialogComp").$element("loadingDialog");loadingDialog.show();}}
}

css:

.container {flex-direction: column;align-items: center;width: 100%;height: 100%;background-image: url('common/images/register_bg.png');background-size: 100% 100%;
}
.reg_btn{width: 80%;height: 40px;text-align: center;font-size: 16px;border-radius: 5px;background-color: #CD6889;
}

华为鸿蒙北向应用开发DAY9——来自软通教育项目实训相关推荐

华为鸿蒙北向应用开发DAY11——来自软通教育项目实训
今日任务是完成课程详情和课程视频播放其中,简介一栏在未点击时只能显示一部分内容,当点击图标后会调用showPanel方法,之后会弹出一个panel显示完整的简介课程目录的设置中还应该判断该目录是否 ...
华为鸿蒙北向应用开发DAY4——来自软通教育项目实训
第四天,先学习媒体组件和画布组件,媒体组件包括相机和视频,相机组件需要在实体机上运行暂时不考虑,video组件用来播放视频,可以再虚拟机上演示,以老师在视频的错误示范为例,创建新的pages时名字不要 ...
华为鸿蒙北向应用开发DAY15——来自软通教育项目实训
今天开始做后端相关内容: 准备工作:将对应版本的.sql文件导入到自己的Mysql中: 切换到文件所在目录: 打开Mysql 创建并选中数据库: 导入导入部分完成. 运行:在iss-edu-plat ...
华为鸿蒙北向应用开发DAY8——来自软通教育项目实训
正式开始做项目,本周目标是做出基本页面,等下周老师发布接口后完成整个实习看了所有的视频全程就是老师边讲边做,hml和js页面会在老师讲完自己试着做,但是css页面的样式是基本照着老师写的,在一些细 ...
鸿蒙系统手机处理器,华为鸿蒙系统临近，或将适配高通处理器，小规模测试体验如何？...
华为鸿蒙系统临近,或将适配高通处理器,小规模测试体验如何? 2021-05-07 19:12:39 1点赞 0收藏 0评论自从前段时间华为给部分机型推送了鸿蒙2.0开发者beta版后,鸿蒙系统公测的 ...
python实训项目-Python开发基础-项目实训-在线投票系统.pptx
项目实训-在线投票系统本章任务/30完成"在线投票系统"添加投票候选人删除候选人为候选人投票按序号投票删除投票输出统计信息--本章目标/30理解程序的基本概念会使用顺序.选择.循环 ...
java编码规范文档下载_软件项目实训及课程设计指导——制定待开发项目中各种文档的规范...
软件项目实训及课程设计指导--制定待开发项目中各种形式文档的规范 1.制定对课程设计项目开发过程中的规范性要求 (1)从"形式"到"内容"两个方面控制和要求开发 ...
python在线投票系统讲解_Python开发基础-项目实训-在线投票系统ppt课件
<Python开发基础-项目实训-在线投票系统ppt课件>由会员分享,可在线阅读,更多相关<Python开发基础-项目实训-在线投票系统ppt课件(27页珍藏版)>请在人人文库 ...
项目实训--unity多人游戏开发--开篇一（综述）
文章目录项目开篇背景分工个人任务总结项目开篇背景对于游戏,在近些年来发展迅猛,例如现在的王者荣耀.原神等手游在中国非常流行,电脑游戏的发展也在不断前进,例如一些端游,英雄联盟等游戏也占 ...

华为鸿蒙北向应用开发DAY9——来自软通教育项目实训

华为鸿蒙北向应用开发DAY9——来自软通教育项目实训相关推荐

最新文章

热门文章