Harmony在线教育app平台开发开发日志——day10

注册页面项目

注册页面主要需要完成以下几个内容
1.页面的基本样式，背景图片载入
2.验证码按钮设计
3.验证码点击后会有文字提示
4.按钮按下后会有再次发送的倒计时，且按钮不可继续按下
5.阅读协议后勾选框体才可对注册按钮进行操作
6.选择同意会自动勾选已阅读
7勾选后注册会有加载图样
成果图片展示
1.注册页面展示

2.验证码展示

3验证码点击文字提示

4.验证码按钮点击后的状态显示

5.未勾选阅读协议框体的提示

6点击同意后的效果

7.勾选已阅读后点击注册的加载页面

代码展示
1.HML

<element src="../loadingDialog/loadingDialog.hml" name="loading"></element>
<div class="container">
    <div style="width: 100%;height: 40px;align-items: center;margin-top: 10px;">
        <image src="common/icon/le.png" style="width: 16px;height: 16px;object-fit: contain;margin-left: 10px;">
        </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="250">美国 +250</option>
                <option value="SB">日本 +SB</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="getCode" 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="text" 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 style="font-weight: bold;">我已阅读并同意《通鸿用户服务协议》，《隐私政策》等，接受免除或者限制责任，诉讼管辖约定等粗体标示条款</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>
    </form>
    <div style="width: 80%;flex-direction: column;justify-content: space-around;align-items: center;margin-top: 250px;">
        <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;object-fit: contain;">

            </image>
            <image src="common/icon/qq.png" style="width: 24px;object-fit: contain;">

            </image>
            <image src="common/icon/dingding.png" style="width: 24px;object-fit: contain;">

            </image>
        </div>
    </div>
    <dialog id="isReadDialog" style="width: 80%;height: 160px;margin-bottom: 50%;">
        <div style="width: 100%;height: 98%;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;">
               <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: tomato;border: 1px solid #949494;font-size: 12px;text-color: white;border-radius: 10px;"onclick="agree">
                    同意
                </button>
            </div>
        </div>
    </dialog>
  <loading  id="dialogComp">
  </loading>
</div>

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

import prompt from '@system.prompt';
export default {
    data: {
        isSend:false,
        isRead:false,
        time:90
    },
    getCode(){
         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("isReadDialog").close();
    },
    agree(){
        this.$element("isReadDialog").close();
        this.isRead=true;
    },
    register(result){
        if(!this.isRead)
        {
            this.$element("isReadDialog").show();
            return
        }
        else
        {
            let loadingDialog = this.$child("dialogComp").$element("loadingDialog");
            loadingDialog.show();
        }
    }
}