用uniapp寫(xiě)一個(gè)好看的登錄頁(yè)面
更新時(shí)間：2024年03月26日 14:56:45 作者：code袁
隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展,移動(dòng)端app的使用越來(lái)越普及,而對(duì)于開(kāi)發(fā)者來(lái)說(shuō)如何設(shè)計(jì)一款簡(jiǎn)單易用的app是一項(xiàng)不容忽視的工作,其中登錄頁(yè)面是app使用過(guò)程中最基礎(chǔ)的組成部分之一,這篇文章主要給大家介紹了關(guān)于用uniapp寫(xiě)一個(gè)好看的登錄頁(yè)面的相關(guān)資料,需要的朋友可以參考下
uniapp好看的登錄頁(yè)面
本登錄方式有兩種
1.賬號(hào)和密碼登錄
2.賬號(hào)和驗(yàn)證碼登錄
1.登錄頁(yè)面的代碼
<template>
<view class="login">
<view class="login-title">體育場(chǎng)館預(yù)約</view>
<view class="login-content">
<view class="login-username">
<i class="el-icon-user"></i>
<input type="text" placeholder="請(qǐng)輸入賬號(hào)" v-model="phone">
</view>
<view class="login-password">
<i class="el-icon-key"></i>
<input type="safe-password" name="" id="" placeholder="請(qǐng)輸入密碼" v-model="password">
</view>
</view>
<view class="button"><button @click="onsubmit">登錄</button></view>
<view class="login-botton">
<view class="login-password" @click="findPassword">找回密碼</view>
<span>|</span>
<view class="login-zhuce" @click="Registration">注冊(cè)賬號(hào)</view>
</view>
<!-- 其他的登錄方式 -->
<view class="login-other">
<view class="login-top">
其他的登錄方式
</view>
<view class="login-icon">
<image src="../../static/index/QQ.png" mode="widthFix"></image>
<image src="../../static/index/weixin.png" mode="widthFix"></image>
</view>
</view>
</view>
</template>
<script>
import { mapMutations } from 'vuex';
export default {
data() {
return {
phone:'',
password:'',
rules: {
phone: [{ required: true, message: '請(qǐng)輸入手機(jī)號(hào)', rule: '/^1[23456789]\d{9}$/' }],
password: [{ required: true, message: '請(qǐng)輸入密碼', trigger: 'blur' }]
}
};
},
methods: {
// ...mapMutations(['user_Login']),
//登錄
onsubmit() {
if(this.phone==''||this.password==''){
uni.showToast({
title:"內(nèi)容不能為空哦！",
icon:"none"
})
}else{
let data={
phone:this.phone,
password:this.password
}
uni.request({
url: '/api/login/loginUser',
method: 'POST',
data: data,
success: res => {
console.log(res.data.data.data);
if (res.data.code == 200) {
this.$store.commit("userLogin",res.data.data.data );
localStorage.setItem('status',true)
//頁(yè)面跳轉(zhuǎn)
this.$router.push('/pages/index/index');
uni.showToast({
title: res.data.data.msg,
icon: 'none'
});
} else {
uni.showToast({
title: res.data.data.msg,
icon: 'none'
});
}
}
});
}
},
Registration() {
console.log('hah ');
uni.navigateTo({
url: '../../pages/login/registration'
});
},
findPassword() {
console.log('hah ');
this.$router.push('/pages/login/findPassword');
},
loginOther(){
uni.share({
provider: "weixin",
scene: "WXSceneSession",
type: 1,
summary: "我正在使用HBuilderX開(kāi)發(fā)uni-app，趕緊跟我一起來(lái)體驗(yàn)！",
success: function (res) {
console.log("success:" + JSON.stringify(res));
},
fail: function (err) {
console.log("fail:" + JSON.stringify(err));
}
});
}
}
};
</script>
<style lang="less">
.login {
// background-image: linear-gradient(120deg, #05ee28, #6a3dad);
background-color: #fff;
width: 100%;
background-position: center;
background-size: cover;
// background-color: #464646;
margin:0px;
background-size:100% 100%;
background-attachment:fixed;
height: 1535rpx;
opacity: 0.8;
.login-title {
padding-top: 150rpx;
display: flex;
justify-content: flex-start;
margin-left: 50rpx;
font-weight: 700;
font-size: 40rpx;
color: #11cd6e;
letter-spacing: 5rpx;
margin-bottom: 50rpx;
}
.login-content{
.login-username{
display: flex;
align-items: center;
margin: 0 50rpx;
border-bottom: 1rpx solid gainsboro;
input{
padding: 10rpx;
height: 60rpx;
width: 80%;
}
i {
color: #11c53e;
padding-right: 20rpx;
font-size: 50rpx;
}
}
.login-password{
display: flex;
align-items: center;
margin: 0 50rpx;
border-bottom: 1rpx solid gainsboro;
margin-top: 50rpx;
input{
padding: 10rpx;
height: 60rpx;
width: 80%;
}
i {
color: #11c53e;
padding-right: 20rpx;
font-size: 50rpx;
}
}
}
.button{
margin-top: 120rpx;
button{
background-color:#11c53e;
width: 90%;
height: 85rpx;
text-align: center;
line-height: 85rpx;
color: #fff;
}
}
.login-botton{
display: flex;
justify-content: center;
margin-top: 100rpx;
.login-password{
padding: 0 15rpx;
color: #11c53e;
}
.login-zhuce{
padding: 0 15rpx;
color: #11c53e;
}
}
.login-other{
position: absolute;
bottom: 100rpx;
left: 37%;
display: flex;
flex-direction: column;
justify-content: center;
.login-top{
text-align:center;
}
.login-icon{
display: flex;
justify-content: space-between;
margin-top: 50rpx;
image{
width: 80rpx;
}
}
}
}
</style>
2.注冊(cè)頁(yè)面
<template>
<view class="registration">
<view class="registration-content">
<view class="login-username">
<i class="el-icon-mobile"></i>
<input type="text" name="" id="" placeholder="請(qǐng)輸入手機(jī)號(hào)" v-model="phone" />
</view>
<view class="login-code">
<i class="el-icon-cpu"></i>
<input type="text" placeholder="請(qǐng)輸入驗(yàn)證碼" v-model="userCode" />
<button type="warning" :disabled="disabled" @click="sendCode">{{ codeMsg }}</button>
</view>
</view>
<view class="login-button"><button @click="login">下一步</button></view>
<view class="registration-botton"><view class="registration-password" @click="goBack">密碼登陸</view></view>
</view>
</template>
<script>
export default {
data() {
return {
phone: '',
userCode: '',
disabled: false,
codeNum: 10,
codeMsg: '獲取驗(yàn)證碼',
code: '',
rules: {
phone: {
rule: '/^1[23456789]\d{9}$/',
meg: '手機(jī)的格式不對(duì)'
}
}
};
},
methods: {
sendCode() {
if (this.phone == '') {
uni.showToast({
title: '手機(jī)號(hào)不能為空',
icon: 'none'
});
} else if (this.phone != '') {
var reg = /^1[3456789]\d{9}$/;
if (!reg.test(this.phone)) {
uni.showToast({
title: '輸入有效的手機(jī)號(hào)',
icon: 'none'
});
} else {
//禁用按鈕
this.disabled = true;
//發(fā)送請(qǐng)求
uni.request({
url: '/api/login/code',
method: 'POST',
data: {
phone: this.phone
},
success: res => {
console.log('11', res.data.data);
if (res.data.data.success) {
this.code = res.data.data.data;
}
}
});
//倒計(jì)時(shí)
let timer = setInterval(() => {
--this.codeNum;
this.codeMsg = `重新發(fā)送 ${this.codeNum}`;
}, 1000);
//判斷定時(shí)器停止
setTimeout(() => {
clearInterval(timer);
(this.disabled = false), (this.codeMsg = '獲取驗(yàn)證碼'), (this.codeNum = 10);
}, 10000);
}
}
},
//登錄
login() {
if (this.code == '' || this.phone == '') {
uni.showToast({
title: '手機(jī)號(hào)不能為空',
icon: 'none'
});
} else if (this.userCode == this.code) {
//驗(yàn)證碼正確
uni.request({
url: '/api/login/addUser',
method: 'POST',
data: {
phone: this.phone
},
success: res => {
//code 200 注冊(cè)成功
if (res.data.code == 200) {
uni.showToast({
title: res.data.data.msg,
icon: 'none'
});
//給vuex添加數(shù)據(jù)
this.$store.commit('userLogin', res.data.data.data);
//路由跳轉(zhuǎn)
this.$router.push('/pages/index/index');
} else {
uni.showToast({
title: res.data.data.msg,
icon: 'none'
});
}
}
});
}
},
//密碼登錄
goBack() {
this.$router.push('/pages/login/login');
},
validate(key) {
let bool = true;
if (!this.rules[key].rule.test(this[key])) {
uni.showToast({
title: this.rules[key].meg,
icon: 'none'
});
bool = false;
return false;
}
return bool;
}
}
};
</script>
<style lang="less">
.registration {
width: 100%;
background-position: center;
background-size: cover;
background-color: #fff;
margin: 0px;
background-size: 100% 100%;
background-attachment: fixed;
opacity: 0.8;
// margin-top: 100rpx;
.registration-content{
display: flex;
flex-direction: column;
margin: 0 50rpx;
input{
padding: 10rpx;
width:60%;
height: 70rpx;
}
i {
color: #11c53e;
padding-right: 20rpx;
font-size: 50rpx;
}
.login-username{
display: flex;
align-items: center;
border-bottom: 1rpx solid gainsboro;
margin-top: 30rpx;
}
.login-code{
display: flex;
align-items: center;
border-bottom: 1rpx solid gainsboro;
margin-top: 30rpx;
button{
width:250rpx;
height: 85rpx;
font-size: 30rpx;
line-height: 85rpx;
background-color: #11c53e;
color: #fff;
}
}
}
.login-button{
margin-top: 150rpx;
width: 90%;
margin-left: 5%;
button{
background-color: #11c53e;
color: #fff;
}
}
}
.registration-botton {
display: flex;
margin-top: 50rpx;
justify-content: space-between;
.registration-password {
padding-left: 40rpx;
color: #fff;
}
.registration-zhuce {
padding-right: 40rpx;
color: #fff;
}
}
</style>總結(jié)
到此這篇關(guān)于用uniapp寫(xiě)一個(gè)好看的登錄頁(yè)面的文章就介紹到這了,更多相關(guān)uniapp登錄頁(yè)面內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vite環(huán)境變量配置是Vite開(kāi)發(fā)環(huán)境下重要的一環(huán),它能夠根據(jù)不同的環(huán)境變量對(duì)項(xiàng)目進(jìn)行不同的配置,使得項(xiàng)目更加靈活和可維護(hù),本文就來(lái)介紹一下vite環(huán)境變量配置小結(jié),感興趣的可以了解一下2023-11-11
Vue3?源碼分析reactive?readonly實(shí)例
這篇文章主要為大家介紹了Vue3?源碼分析reactive?readonly實(shí)例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
前端實(shí)現(xiàn)pdf預(yù)覽功能的全過(guò)程(基于vue)
這篇文章主要給大家介紹了關(guān)于前端實(shí)現(xiàn)pdf預(yù)覽功能的相關(guān)資料,前端實(shí)現(xiàn)預(yù)覽最好的效果還是PDF,不會(huì)出現(xiàn)一些文字錯(cuò)亂和亂碼的問(wèn)題,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09
如何利用Vue元素指令自動(dòng)合并tailwind類名
文章介紹了如何在Vue項(xiàng)目中使用tailwind-merge庫(kù)通過(guò)自定義指令自動(dòng)合并Tailwind CSS類名,以解決樣式?jīng)_突和提高代碼的可維護(hù)性,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2026-03-03
vue中使用console.log打印的實(shí)現(xiàn)
這篇文章主要介紹了vue中使用console.log打印的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue項(xiàng)目webpack打包部署到Tomcat刷新報(bào)404錯(cuò)誤問(wèn)題的解決方案
今天很郁悶，遇到這樣一個(gè)奇葩問(wèn)題，使用webpack打包vue后，將打包好的文件，發(fā)布到Tomcat上，訪問(wèn)成功，但是刷新后頁(yè)面報(bào)404錯(cuò)誤，折騰半天才解決好，下面小編把Vue項(xiàng)目webpack打包部署到Tomcat刷新報(bào)404錯(cuò)誤問(wèn)題的解決方案分享給大家，需要的朋友一起看看吧2018-05-05
VUE實(shí)時(shí)監(jiān)聽(tīng)元素距離頂部高度的操作
這篇文章主要介紹了VUE實(shí)時(shí)監(jiān)聽(tīng)元素距離頂部高度的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
Vite?構(gòu)建環(huán)境分為開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境,不同環(huán)境會(huì)有不同的構(gòu)建策略,本文就來(lái)介紹下Vite 配置文件,具有一定的參考價(jià)值,感興趣的可以了解一下2024-08-08
前端批量請(qǐng)求失敗Toast重復(fù)彈窗該如何解決(面試題)
Toast彈出框是一種輕量級(jí)的消息提示框,通常用于顯示非緊急的信息或狀態(tài)更新,這篇文章主要介紹了前端批量請(qǐng)求失敗Toast重復(fù)彈窗該如何解決的相關(guān)資料,需要的朋友可以參考下2026-04-04
一鍵將Word文檔轉(zhuǎn)成Vue組件mammoth的應(yīng)用詳解
這篇文章主要為大家介紹了一鍵將Word文檔轉(zhuǎn)成Vue組件mammoth的應(yīng)用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02