HarmonyOS实现简易的页面跳转投票
-
基本思路
用户进行注册，后跳转至注册成功的页面，接着进一步跳转至登录页面，登录完成后进入投票页面，投票页面中可以点击自己喜爱的图片进行点赞投票。
-
基本结构
-
注册页面 （index）
注册页面中需要进行填写的有用户名、密码、出生日期、性别，用户名中要求长度需要大于6但小于20，其他为长度不等于0即可。在点击注册时，程序会判断这些条件，不满足时会有弹窗提示，全部满足则会跳转至注册成功的页面。
在注册页面hml部分利用input组件设置属性text、password、radio分别实现用户名填写、密码填写、性别选择的功能，以及利用picker组件实现对日期的选择，此处起始日期为1995-01-01，终止日期为2022-11-17，最后再设置onchange对每一次填写的东西进行接收和改变。
{{ $t('Strings.componentName') }}
{{ $t('Strings.userName') }}
{{ $t('Strings.password') }}
{{ $t('Strings.date') }}
{{ $t('Strings.gender') }}
/*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的设置，让页面比较美观。
{{ $t('Strings.success') }}
/*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，其中一项不满足时即会跳出弹框提示说明账户或密码错误，若登录成功则直接跳转至投票页面。
用户登录
{{ $t('Strings.userName') }}
A
{{ $t('Strings.password') }}
/*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.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];
},
}实现效果：
