华为鸿蒙北向应用开发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:
正在加载 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;}login.hml:
通鸿云课堂 向右滑动验证 验证成功 请先完成验证 忘记密码 快速注册 登 录 2022 @ EDU OnLine Harmony OS. Design By CYL login.js:
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(); }}login.css:
.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
手机号注册 中国 +86 美国 +001 日本 +81 我已阅读并同意 《通鸿用户服务协议》、《隐私政策》，等接受免除或者限制责任、诉讼管辖约定 等粗体标识条款。 注 册 第三方账号登录 服务协议及隐私保护 为了更好地保障您的合法权益，请您阅读并同意以下协议 《通鸿用户服务协议》、《隐私政策》 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;}