华为鸿蒙北向应用开发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;
}

login.hml:

<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