HarmonyOS实现简易的页面跳转投票

• 基本思路

        用户进行注册，后跳转至注册成功的页面，接着进一步跳转至登录页面，登录完成后进入投票页面，投票页面中可以点击自己喜爱的图片进行点赞投票。

• 基本结构

        

• 注册页面 （index）

       注册页面中需要进行填写的有用户名、密码、出生日期、性别，用户名中要求长度需要大于6但小于20，其他为长度不等于0即可。在点击注册时，程序会判断这些条件，不满足时会有弹窗提示，全部满足则会跳转至注册成功的页面。

       在注册页面hml部分利用input组件设置属性text、password、radio分别实现用户名填写、密码填写、性别选择的功能，以及利用picker组件实现对日期的选择，此处起始日期为1995-01-01，终止日期为2022-11-17，最后再设置onchange对每一次填写的东西进行接收和改变。

<!--index.hml-->
<div class="container">

    <div class="page-title-wrap">
        <text class="page-title">{{ $t('Strings.componentName') }}
        </text>
    </div>


<!-- username -->
    <div class="item-container">
        <text class="item-title">{{ $t('Strings.userName') }}</text>
        <div class="item-content">
            <input class="input-text" placeholder="{{ $t('Strings.userNamePrompt') }}" onchange="getName"></input>
        </div>
    </div>


<!--password-->
    <div class="item-container">
        <text class="item-title">{{ $t('Strings.password') }}</text>
        <div class="item-content">
            <input type="password" class="input-text" placeholder="{{ $t('Strings.passwordPrompt') }}" onchange="getPassword"></input>
        </div>
    </div>


<!-- date -->
    <div class="item-container">
        <text class="item-title">{{ $t('Strings.date') }}</text>
        <div class="item-content">
            <picker class="pp"type="date" end="2022-11-17" selected="1995-01-01" value="{{ date }}" onchange="getDate"></picker>
        </div>
    </div>

<!-- gender -->
    <div class="item-container">
        <text class="item-title">{{ $t('Strings.gender') }}</text>
        <div class="item-content">
            <label target="radio1">{{ $t('Strings.male') }}:</label>
            <input id="radio1" type="radio" name="radio" value="{{ $t('Strings.male') }}" onchange="getMaleGender"
                   checked="true"></input>
            <label target="radio2">{{ $t('Strings.female') }}:</label>
            <input id="radio2" type="radio" name="radio" value="{{ $t('Strings.female') }}" onchange="getFemaleGender">
            </input>
        </div>
    </div>


    <div class="button-container">
        <input type="button" class="btn" onclick="onRegister" value="{{ $t('Strings.register') }}"/>
    </div>

</div>

/*index.css*/
.container{
    flex: 1;
    flex-direction: column;

}

.page-title-wrap {
    padding-top: 50px;
    padding-bottom: 25px;
    justify-content: center;
}

.page-title{
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
    border-color: darkgray;
    color: lightslategray;
    border-bottom-width: 2px;
}

.btn {
    width: 100%;
    height: 130px;
    padding: 10px;
    background-color: lightslategray;
    text-align: center;
    border-radius: 5px;
    margin-right: 60px;
    margin-left: 60px;
    margin-top: 30px;
    margin-bottom: 30px;
    color: #ffffff;
    font-size: 20px;
}
.item-container {
    margin-top: 25px;
    margin-bottom: 25px;
}

.item-title {
    width: 30%;
    padding-left: 15px;
    padding-right: 5px;
    font-size:20px;
    color: darkslategray;
    text-align: left;
}

.item-content {
    justify-content: center;
    text-align: left;
    font-size:20px;
    color:darkslategray;
}

.input-text {
    width: 350px;
    font-size:16px;
    color:darkgray;
}

.button-container {
    width: 100%;
    height: 100px;
}

//index.js
import prompt from '@system.prompt'
import router from '@system.router'

export default {
    data: {
        name: '',
        date: '1995-01-01',
        gender: 'Strings.male ',
        password:''
    },
    onInit() {
    },
//    js部分
    getName(e) {
        this.name = e.value;
        console.info("name=" + this.name)
    },
    getPassword(e) {
        this.password = e.value;
        console.info("password=" + this.password)
    },
//    js部分
    getDate(e) {
        this.date = e.year + '-' + (e.month + 1) + '-' + e.day;
        console.info("date=" + this.date)
    },
//    js部分
    getFemaleGender(e) {
        if (e.checked) {
            this.gender = 'Strings.female'
            console.info("gender =" + this.gender)
        }
    },
    getMaleGender(e) {
        if (e.checked) {
            this.gender = 'Strings.male'
            console.info("gender =" + this.gender)
        }
    },
//    js部分
    onRegister() {
        if (this.name.length == 0) {
            prompt.showToast({
                message: this.$t('Strings.name_null')
            })
            return;
        }
        if (this.name.length < 6) {
            prompt.showToast({
                message: this.$t('Strings.name_short')
            })
            return;
        }
        if (this.name.length > 20) {
            prompt.showToast({
                message: this.$t('Strings.name_long')
            })
            return;
        }
        if (this.date.length == 0) {
            prompt.showToast({
                message: this.$t('Strings.date_null')
            })
            return;
        }

        if (this.gender.length == 0) {
            prompt.showToast({
                message: this.$t('Strings.gender_null')
            })
            return;
        }
        if (this.password.length == 0) {
            prompt.showToast({
                message: this.$t('Strings.password_null')
            })
            return;
        }

        router.push({
            uri: 'pages/success/success'
        })
    }
}

 实现效果：

• 注册成功页面 （success）

        注册成功页面中有文字显示“注册成功”，以及两个按钮，一个为“Back”，一个为“Continue”, 点击Back按钮则会跳转回刚刚的注册页面进行重新注册，点击Continue按钮则会在0.6s后跳转至登录页面，此时还设置了dialog组件对用户进行提示，由于在注册成功页面中设置了背景图，所以按钮进行透明度opacity的设置，让页面比较美观。

<!--success.hml-->
<div class="container">
    <div class="image-p">
        <image class="page-image cover" src="/common/images/picture1.png"></image>
    </div>
    <div class="item-container">
        <text class="txt"> {{ $t('Strings.success') }}</text>
        <input type="button" class="btn" onclick="onBack" value="Back"/>
       <input type="button" class="btn" onclick="showDialog" value="Continue"></input>

    </div>
    <dialog class="s-dialog" id="toLoginDialog">
        <div class="d-container">
            <text class="d-txt" >即将跳转至登录页面</text>
        </div>
    </dialog>
</div>

/*success.css*/
.container{
    flex: 1;
    flex-direction: column;
    align-items:center;
}
.image-p{
    width:100%;
    height:100%;
    position:absolute;
}
.btn {
    width: 100%;
    height:50px;
    align-items:center;
    margin-top:35px;
    opacity:0.7;
    border-radius: 5px;
    margin-right: 60px;
    margin-left: 60px;
    color: white;
    font-size: 30px;
    background-color: lightslategrey;
}
.item-container {
    width: 100%;
    flex: 1;
    flex-direction: column;
    align-items:center;
    padding-left: 30px;
    padding-right: 30px;
}

.txt {
    margin-top: 100px;
    margin-bottom: 50px;
    font-size: 45px;
    text-align: center;
    color: darkslategray;
    align-items:center;

}
.s-dialog{
    width:300px;
    height:100px;
    margin-bottom: 100px;
    justify-content:center;
    align-items:center;
}
.d-txt{
    font-size:22px;
    color:grey;

}

//js
import router from '@system.router'

export default {
    data: {},

    onBack() {
        router.push({
            uri: 'pages/index/index'
        })
    },
    showDialog(e)
    {
        this.$element("toLoginDialog").show();
        setTimeout(()=>{
            this.$element("toLoginDialog").close()
            router.push({
                uri:'pages/login/login'
            })
        },600)
    },
}

 实现效果：

• 登录页面（login)

        登录页面中需要进行填写的有用户名、密码，同样利用了input组件进行设置，点击Login登录时会判断用户名是否为potter，密码是否为123，其中一项不满足时即会跳出弹框提示说明账户或密码错误，若登录成功则直接跳转至投票页面。

<!--login.hml-->
<div class="container">
    <div class="image-p">
        <image class="page-image cover" src="/common/images/picture1.png"></image>
    </div>
    <div class="page-title-wrap">
        <text class="page-title">用户登录
        </text>
    </div>

<!-- username -->
    <div class="item-container1">
        <text class="item-title">{{ $t('Strings.userName') }}</text>
        <div class="item-content">
            <input class="input-text" placeholder="{{ $t('Strings.userNamePrompt') }}" onchange="getName"></input>
        </div>
    </div>A
<!--password-->
    <div class="item-container2">
        <text class="item-title">{{ $t('Strings.password') }}</text>
        <div class="item-content">
            <input type="password" class="input-text" placeholder="{{ $t('Strings.passwordPrompt') }}" onchange="getPassword"></input>
        </div>
    </div>


    <div class="button-container">
        <input type="button" class="btn" onclick="toVote" value="{{ $t('Strings.login') }}"/>
    </div>

</div>

/*login.css*/
.container{
    flex: 1;
    flex-direction: column;

}

.page-title-wrap {
    padding-top: 50px;
    justify-content: center;
}
.image-p{
    width:100%;
    position:absolute;
    height:100%;
}
.page-title{
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
    border-color: darkgray;
    color: lightslategray;
    border-bottom-width: 2px;
}

.btn {
    width: 100%;
    height: 130px;
    padding: 10px;
    background-color: lightslategray;
    text-align: center;
    border-radius: 5px;
    margin-right: 60px;
    margin-left: 60px;
    margin-top: 30px;
    margin-bottom: 30px;
    color: #ffffff;
    font-size: 20px;
}
.item-container1 {
    margin-top: 1px;
    margin-bottom: 25px;
    align-items: center;
    justify-content: center;
    padding-top:70px;
}
.item-container2 {
    margin-top: 25px;
    margin-bottom: 25px;
    align-items: center;
    justify-content: center;
}

.item-title {
    width: 30%;
    padding-left: 15px;
    padding-right: 5px;
    font-size:20px;
    color: darkslategray;
    text-align: left;
}

.item-content {
    justify-content: center;
    text-align: left;
    font-size:20px;
    color:darkslategray;
}

.input-text {
    width: 350px;
    font-size:16px;
    color:darkgray;
}

.button-container {
    width: 100%;
    height: 100px;
}

//login.js
import prompt from '@system.prompt'
import router from '@system.router'

export default {
    data: {
        name: '',
        password:''
    },
    onInit() {
    },
//    js部分
    getName(e) {
        this.name = e.value;
        console.info("name=" + this.name)
    },
//    js部分
    getPassword(e) {
        this.password = e.value;
        console.info("password=" + this.password)
    },
//    js部分
    toVote() {
        if (this.password != "123" || this.name!="potter") {
            prompt.showToast({
                message: this.$t('账号或密码错误')
            })
            return;
        }

        router.push({
            uri: 'pages/vote/vote'
        })
    }
}

 实现效果：

• 投票页面 （vote)

•         在投票页面中放置了六个图片，每一张图片都设置了一个小边框，当用户点击其中一张照片时，此时会有dialog弹窗，将图片和文字进行放大呈现，并在下方设置了点赞功能，每一张照片的点赞量初始值是不一样的，当用户进行点赞投票时，点赞量会加1，点赞的图案也会改变，当取消点赞时，点赞的图案变为初始的样子，点赞量也会减一，在点赞的下方还有一个Back按钮，此按钮用来返回刚刚的投票界面。对这些功能的实现需要在每张图片中设置一个id值，当点击图片时可以将此处图片的id值传送给点击的函数，函数里根据id对各个需要的变量进行赋值，在点赞功能中，利用点击次数对点赞和取消点赞进行模拟，次数为1为点赞，次数为2即取消点赞，并将点赞次数重新赋值为零。

<!--vote.hml-->
<div class="container">
    <div class="item-container">
        <div class="image-container">
            <div class="image-frame">
                <label class="image-txt" target="1">黄昏</label>
                <image class="v-image" src="/common/images/picture1.png" id="1" onclick="toEnlarge(1)" ></image>
           </div>
        </div>
        <div class="image-container">
            <div class="image-frame">
                <label class="image-txt" target="2">路口</label>
                <image class="v-image" src="/common/images/picture2.png" id="2" onclick="toEnlarge(2)"></image>
            </div>
        </div>
        <div class="image-container">
            <div class="image-frame">
                <label class="image-txt" target="3">教学楼</label>
                <image class="v-image" src="/common/images/picture3.png" id="3" onclick="toEnlarge(3)" ></image>
             </div>
        </div>
        <div class="image-container">
            <div class="image-frame">
                <label class="image-txt" target="4">白云</label>
                <image class="v-image" src="/common/images/picture4.png" id="4" onclick="toEnlarge(4)" ></image>
            </div>
        </div>
        <div class="image-container">
            <div class="image-frame">
                <label class="image-txt" target="5">红云</label>
                <image class="v-image" src="/common/images/picture5.png" id="5" onclick="toEnlarge(5)" ></image>
            </div>
        </div>
        <div class="image-container">
            <div class="image-frame">
                <label class="image-txt" target="6">阳光</label>
                <image class="v-image" src="/common/images/picture6.png" id="6" onclick="toEnlarge(6)" ></image>
             </div>
        </div>
        <dialog class="p-dialog" id="pDialog">
            <div class="p-container">
                <div class="enlarge-container">
                    <text class="enlarge-txt">{{headTxt}}</text>
                    <image class="big-image" src="{{imageSrc}}"></image>
                </div>
<!--            点赞-->
                <div>
                    <div class="like" onclick="likeClick({{Id}})">
                       <image class="like-img" src="{{likeAbsolute}}" focusable="true"></image>
                        <text class="like-num" focusable="true">{{sum}}</text>
                  </div>
                </div>
                <div>
                    <button value="Back" class="btn" onclick="closeDialog"></button>
                </div>
            </div>

        </dialog>
    </div>
</div>

/*vote.css*/
.container{
    flex: 1;
    flex-direction: column;
}
.item-container
{
    flex-wrap:wrap;
    padding-left:18px;
    width: 100%;
    flex: 1;
    flex-direction: column;
}
.image-frame{
    flex-direction: column;
    justify-content: center;
    padding:10px;
    align-items: center;
    border:2px solid powderblue;
    background-color:whitesmoke;
    width:125px;
    height:250px;
}
.image-container{
    padding-top:25px;
    padding-left:30px;
    flex-direction:   column;
    justify-content: center;
    align-items: center;
    width:135px;
    height:210px;
}
.image-txt{
    color:lightslategray;
    font-size:18px;

}
.v-image{
    padding-top: 10px;
}
.p-dialog{
    width:300px;
    height:650px;
    margin-top: 20px;
    margin-bottom:20px;
    justify-content:center;
    align-items:center;
}
.p-container{
    width:300px;
    height:550px;
    flex-direction: column;;
    margin-bottom: 50px;
    justify-content:center;
    align-items:center;
}
.big-image{
    width:200px;
    height:300px;
}
.enlarge-txt{
    font-size:30px;
    color:lightslategrey;
}
.enlarge-container{
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width:100%;
    height:100%;

}
.image-p{
    width:100%;
    position:absolute;
    height:100%;
}
/* xxx.css */
.like {
    width: 104px;
    height: 54px;
    border: 2px solid #bcbcbc;
    justify-content: space-between;
    align-items: center;
    margin-left: 12px;
    border-radius: 8px;


}
.like-img {
    width: 33px;
    height: 33px;
    margin-left: 10px;

}
.like-num {
    color: #bcbcbc;
    font-size: 20px;
    margin-right: 17px;
}
.btn {
    width: 70px;
    height: 40px;
    text-align: center;
    border-radius: 5px;
    margin-right: 60px;
    margin-left: 60px;
    margin-top: 30px;
    color: white;
    font-size: 20px;
    background-color:lightcoral;
}


.button-container {
    width: 100%;
    height: 150px;
}

//vote.js
import router from '@system.router'

export default {
    data: {
        head:["黄昏","路口","教学楼","白云","红云","阳光"],
        total:[184,120,387,384,290,450],
        image:[
            "/common/images/picture1.png",
            "/common/images/picture2.png",
            "/common/images/picture3.png",
            "/common/images/picture4.png",
            "/common/images/picture5.png",
            "/common/images/picture6.png",
        ],
        Id:1,
        headTxt:"",
        imageSrc:"",
        imageId:"",
        likeAbsolute:"",
        likeImage:[
            '/common/images/unLike.png',
            '/common/images/unLike.png',
            '/common/images/unLike.png',
            '/common/images/unLike.png',
            '/common/images/unLike.png',
            '/common/images/unLike.png',
        ],
        count:[0,0,0,0,0,0],
        isPressed:false,    //初始值为false
        sum:0
    },

    closeDialog(){
        this.$element("pDialog").close();
    },
    toEnlarge(id){
        this.likeAbsolute=this.likeImage[id-1];
        this.Id=id;
        this.sum=this.total[id-1];
        this.headTxt=this.head[id-1];
        this.imageSrc=this.image[id-1];
        this.$element("pDialog").show();
    },
    likeClick(id) {
        this.count[id-1]++;
        if(this.count[id-1]==1) {   //点赞
            this.total[id-1]++;
            this.likeImage[id-1] = '/common/images/Like.png';
        } else {            //取消点赞
            this.total[id-1]--;
            this.likeImage[id-1]="/common/images/unLike.png";
            this.count[id-1]=0;
        }
        this.likeAbsolute=this.likeImage[id-1];
        this.sum=this.total[id-1];
    },
}

实现效果：