2023-4-24 前端達人
本章用到......uni-app頁面跳轉uni.navigateTo方法、uni.navigateBack方法。uni-app簡單實現郵箱驗證碼發送點擊后讀秒樣式。登錄賬號、密碼正則表達式驗證等
適合剛入門的小伙伴，大佬就沒必要看了
靜態頁面！靜態頁面！沒有綁定后端數據接口
目錄
https://dcloud.io/hbuilderx.html
官網直接下載解壓即可
文件-新建-項目
我這里直接選擇默認模板，Vue版本、uniCloud自行選擇即可
創建完成后自動生成文件夾
文件名這里自動生成原本是index，文件名自行定義即可
頁面文件自己新建Vue文件即可
注意?。∵@個文件后續如果需要新添加新頁面時這個文件里一定要配置參數不然頁面出不來，代碼格式看下面代碼↓↓↓↓↓↓↓↓↓
類似navigationBarTitleText（導航欄text）、navigationBarBackgroundColor（導航欄背景色）等等屬性可以查看相關資料自行配置即可
pages里設置單頁面參數，每個頁面配置對應path路徑參數
globalStyle里設置全局頁面參數
js、josn、scss文件等等其他配置文件這里就不多說了自行研究吧?。?！因為我也還沒搞清楚到底怎么用哈哈哈
進入正題↓↓↓↓↓↓↓↓↓↓↓↓↓代碼看著有些亂........湊合看慢慢理解吧
代碼里的src圖片鏈接自行修改?。。。。ㄟ€有css里的URL）
先看一下效果圖
-
<!-- 登錄頁面 -->
-
<template>
-
<view class="flex-col flex-auto group">
-
<text class="self-center text_2" v-if="type==1000">手機號登錄</text>
-
<text class="self-center text_2" v-if="type==2000">賬號登錄</text>
-
<!-- 手機號登錄 -->
-
<view class="" v-if="type==1000">
-
<view class="flex-col justify-start items-start text-wrapper">
-
<input type="text" class="font_1" @input="onInput" placeholder="請輸入手機號" v-model="phoneNumber">
-
</view>
-
<!-- svg畫線 -->
-
<view style="height: 1px;">
-
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
-
<line x1="0" y1="0" x2="400" y2="0" style="stroke:rgb(0,0,0);stroke-width:0.2" />
-
</svg>
-
</view>
-
-
<view class="flex-col justify-start items-start text-wrapper_2">
-
<input type="text" password="true" class="font_1" @input="onInput" placeholder="請輸入密碼" v-model="phonePassword">
-
</view>
-
-
<!-- svg畫線 -->
-
<view style="height: 1px;">
-
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
-
<line x1="0" y1="0" x2="400" y2="0" style="stroke:rgb(0,0,0);stroke-width:0.2" />
-
</svg>
-
</view>
-
</view>
-
<!-- 賬號登錄 -->
-
<view class="" v-if="type==2000">
-
<view class="flex-col justify-start items-start text-wrapper">
-
<input type="text" class="font_1" @input="onInput" placeholder="請輸入用戶名" v-model="idNumber">
-
</view>
-
<!-- svg畫線 -->
-
<view style="height: 1px;">
-
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
-
<line x1="0" y1="0" x2="400" y2="0" style="stroke:rgb(0,0,0);stroke-width:0.2" />
-
</svg>
-
</view>
-
<view class="flex-col justify-start items-start text-wrapper_2">
-
<input type="text" password="true" class="font_1" @input="onInput" placeholder="請輸入用戶密碼" v-model="idPassword">
-
</view>
-
<!-- svg畫線 -->
-
<view style="height: 1px;">
-
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
-
<line x1="0" y1="0" x2="400" y2="0" style="stroke:rgb(0,0,0);stroke-width:0.2" />
-
</svg>
-
</view>
-
</view>
-
-
<view class="self-start font_1 text_3" @click="type=2000" v-if="type==1000">用賬號登錄</view>
-
<view class="self-start font_1 text_3" @click="type=1000" v-if="type==2000">用手機號登錄</view>
-
<!-- 登錄按鈕1 -->
-
<view class="flex-col justify-start items-center button" v-if="btnShow">
-
<button class="font_1 text_4" @click="onSubmit">登 錄</button>
-
</view>
-
<!-- 登錄按鈕2 -->
-
<view class="flex-col justify-start items-center button2" v-else>
-
<button class="font_1 text_66">登 錄</button>
-
</view>
-
-
-
<view class="flex-row justify-between group_2" v-if="type==1000">
-
<text class="font_2" @click="onPageJump('/pages/login/phoneVerify')">短信驗證碼登錄</text>
-
<text class="font_2" @click="onPageJump('/pages/login/findBack')">找回密碼</text>
-
</view>
-
<view class="flex-row justify-between group_3" v-else>
-
<text class="font_2" @click="onPageJump('/pages/login/findBack')">找回密碼</text>
-
</view>
-
</view>
-
-
</template>
-
-
<script>
-
export default {
-
components:{
-
-
},
-
data() {
-
return {
-
type: 1000, //判斷登錄類型手機登錄或賬號登錄
-
phoneNumber:'', //手機賬號
-
phonePassword:'', //手機密碼
-
idNumber:'', //賬號
-
idPassword:'', //賬號密碼
-
btnShow:false, //判斷登錄按鈕顯示隱藏
-
timeOut:null, //添加定時器
-
}
-
},
-
onLoad() {
-
-
},
-
created() {
-
-
},
-
// 方法
-
methods: {
-
// 找回密碼跳轉頁面
-
onPageJump(url) {
-
uni.navigateTo({
-
url: url
-
});
-
},
-
// 判斷顯示登錄按鈕
-
onInput() {
-
this.timeOut && clearTimeout(this.timeOut)
-
this.timeOut = setTimeout(() => {
-
if (this.type == 1000) {
-
if (this.phoneNumber && this.phonePassword) {
-
this.btnShow = true;
-
} else {
-
this.btnShow = false;
-
}
-
} else {
-
if (this.idNumber && this.idPassword) {
-
this.btnShow = true;
-
} else {
-
this.btnShow = false;
-
}
-
}
-
}, 100);
-
},
-
// 點擊登錄
-
onSubmit(){
-
// 判斷登錄方式為手機號登錄
-
if(this.type==1000){
-
// 判斷驗證手機號
-
if(!this.phoneNumber){
-
uni.showToast({
-
title: '請輸入手機號',
-
icon: 'none',
-
});
-
return;
-
}
-
const phoneNumber= /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
-
if(!phoneNumber.test(this.phoneNumber)){
-
uni.showToast({
-
title: '手機號輸入不正確',
-
icon: 'none',
-
});
-
return;
-
}
-
// 判斷驗證手機密碼
-
if(!this.phonePassword){
-
uni.showToast({
-
title: '請輸入密碼',
-
icon: 'none',
-
});
-
return;
-
}
-
uni.showToast({
-
title: '正在登錄',
-
icon: 'loading',
-
});
-
}else{
-
// 判斷驗證賬號
-
if(!this.idNumber){
-
uni.showToast({
-
title: '請輸入賬號',
-
icon: 'none',
-
});
-
return;
-
}
-
// 判斷驗證賬號密碼
-
if(!this.idPassword){
-
uni.showToast({
-
title: '請輸入賬號密碼',
-
icon: 'none',
-
});
-
return;
-
}
-
uni.showToast({
-
title: '正在登錄',
-
icon: 'loading',
-
});
-
}
-
},
-
-
-
-
-
}
-
}
-
</script>
-
-
<style>
-
@import"../../style/css/login.css";
-
</style>
一個小tips：
先說一下這個頁面↑↑↑↑↑↑↑↑↑↑↑↑↑↑
svg因為我這里賬號、密碼input輸入框的border邊框要設置成小數1px以下0.1px、0.2px、0.3px等等，所以這里用了svg的畫圖，如果有小伙伴碰到同樣問題可以參考一下，不需要的直接style里直接設置border參數即可
uni.showToast是uni-app彈出框的方法直接用就行，參數么。。自己研究研究就行 （例:icon圖標參數有四種類型none、loading、success、error）
style外部引用css樣式直接用@import相對路徑即可
style樣式最好還是用自己寫的就別直接復制了，我這里用的是平臺自動生成的所以比較亂隨便看看就行了看多了頭疼（僅供參考全局樣式可以直接略過）
-
/************************************************************
-
** 全局樣式 ** **
-
************************************************************/
-
html {
-
font-size: 16px;
-
}
-
-
body {
-
margin: 0;
-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
-
'Droid Sans', 'Helvetica Neue', 'Microsoft Yahei', sans-serif;
-
-webkit-font-smoothing: antialiased;
-
-moz-osx-font-smoothing: grayscale;
-
}
-
-
view,
-
image,
-
text {
-
box-sizing: border-box;
-
flex-shrink: 0;
-
}
-
-
#app {
-
width: 100vw;
-
height: 100vh;
-
}
-
-
.flex-row {
-
display: flex;
-
flex-direction: row;
-
}
-
-
.flex-col {
-
display: flex;
-
flex-direction: column;
-
}
-
-
.justify-start {
-
justify-content: flex-start;
-
}
-
-
.justify-end {
-
justify-content: flex-end;
-
}
-
-
.justify-center {
-
justify-content: center;
-
}
-
-
.justify-between {
-
justify-content: space-between;
-
}
-
-
.justify-around {
-
justify-content: space-around;
-
}
-
-
.justify-evenly {
-
justify-content: space-evenly;
-
}
-
-
.items-start {
-
align-items: flex-start;
-
}
-
-
.items-end {
-
align-items: flex-end;
-
}
-
-
.items-center {
-
align-items: center;
-
}
-
-
.items-baseline {
-
align-items: baseline;
-
}
-
-
.items-stretch {
-
align-items: stretch;
-
}
-
-
.self-start {
-
align-self: flex-start;
-
}
-
-
.self-end {
-
align-self: flex-end;
-
}
-
-
.self-center {
-
align-self: center;
-
}
-
-
.self-baseline {
-
align-self: baseline;
-
}
-
-
.self-stretch {
-
align-self: stretch;
-
}
-
-
.flex-1 {
-
flex: 1 1 0%;
-
}
-
-
.flex-auto {
-
flex: 1 1 auto;
-
}
-
-
.grow {
-
flex-grow: 1;
-
}
-
-
.grow-0 {
-
flex-grow: 0;
-
}
-
-
.shrink {
-
flex-shrink: 1;
-
}
-
-
.shrink-0 {
-
flex-shrink: 0;
-
}
-
-
.relative {
-
position: relative;
-
}
-
-
/* ---------------------------------------------------------------------- */
-
-
.group {
-
padding: 20px 40px 10px;
-
overflow-y: auto;
-
}
-
.text_2 {
-
color: #020202;
-
font-size: 20px;
-
font-family: 'PingFang SC';
-
line-height: 28px;
-
text-align: center;
-
}
-
.text-wrapper {
-
margin-top: 42px;
-
padding-bottom: 12px;
-
/* border-bottom: solid 1px #888888; */
-
}
-
.font_1 {
-
width: 100%;
-
font-size: 15px;
-
font-family: 'PingFang SC';
-
line-height: 21px;
-
color: #00000;
-
}
-
.text-wrapper_2 {
-
padding: 20px 0 12px;
-
/* border-bottom: solid 1px #888888; */
-
}
-
.text_3 {
-
margin-top: 22px;
-
color: #166bf8;
-
}
-
/* 登錄按鈕1 */
-
.button button {
-
margin-top: 324px;
-
padding: 8px 0 11px;
-
/* background-color: #166bf880; */
-
background-image: url('。。。。。。。。。。。。。。。。。。。。');
-
background-size: 100% 100%;
-
background-repeat: no-repeat;
-
border-radius: 5px;
-
width: 100%;
-
}
-
.text_4 {
-
color: #ffffff;
-
}
-
.group_2 {
-
padding: 50px 62px;
-
}
-
.group_3 {
-
padding: 50px 42%;
-
}
-
.font_2 {
-
font-size: 12px;
-
font-family: 'PingFang SC';
-
line-height: 17px;
-
color: #555555;
-
}
-
/* 登錄按鈕2*/
-
.button2 button{
-
width: 100%;
-
margin-top: 324px;
-
padding: 8px 0 11px;
-
background-color: #166bf880;
-
border-radius: 5px;
-
line-height: 21px;
-
font-size: 15px;
-
}
-
.text_66 {
-
color: #ffffff;
-
}
點擊登錄頁面上的短信驗證碼登錄后跳轉到此頁，跳轉方法會用到uni.navigateTo方法在登錄頁面看代碼自行理解吧↑↑↑↑↑↑↑↑↑↑↑
跳轉、返回的方法參考文檔：
注意?。√砑有马撁娴臅r候上面的↑↑↑↑↑↑↑↑↑↑↑pages.json配置文件也需要添加對應的頁面配置才行不然頁面出不來
效果圖：
https://www.bookstack.cn/read/uniapp-api/spilt.5.ead34267bd06d88a.md
-
<!-- 手機驗證找回密碼 -->
-
<template>
-
<view class="flex-col flex-auto group">
-
<text class="self-center text_2">手機號+短信驗證碼登錄</text>
-
<view class="flex-col group_2 space-y-10">
-
<input type="number" class="self-start font_1" @input="onInput" placeholder="請輸入手機號碼" v-model="phoneNumber">
-
<!-- svg畫線 -->
-
<view style="height: 1px;">
-
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
-
<line x1="0" y1="0" x2="400" y2="0" style="stroke:rgb(0,0,0);stroke-width:0.2" />
-
</svg>
-
</view>
-
-
<view class="flex-row justify-between group_3">
-
<input type="number" class="self-start font_1 text_4" maxlength="6" @input="onInput" placeholder="請輸入驗證碼" v-model="code">
-
<view class="flex-col justify-start items-center self-center text-wrapper">
-
<!-- <text class="font_1 text_3" @click="onSetCode()">獲取驗證碼</text> -->
-
<text v-bind:class="{acquire:isGrey,again:!isGrey}"
-
v-bind:disabled="dis" type="primary"
-
@click="onSetCode">
-
<span v-if="show">獲取驗證碼</span>
-
<span v-else>重新發送({{count}}s)</span>
-
</text>
-
</view>
-
</view>
-
-
<!-- svg畫線 -->
-
<view style="height: 1px;">
-
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
-
<line x1="0" y1="0" x2="400" y2="0" style="stroke:rgb(0,0,0);stroke-width:0.2" />
-
</svg>
-
</view>
-
</view>
-
<view class="self-start font_1 text_5" @click="onPageJump('/pages/login/login')">用密碼登錄</view>
-
<view class="flex-col justify-start items-center button" v-if="btnShow">
-
<button class="font_1 text_6" @click="onSubmit()">登 錄</button>
-
</view>
-
<!-- 登錄按鈕2 -->
-
<view class="flex-col justify-start items-center button2" v-else>
-
<button class="font_1 text_66">登 錄</button>
-
</view>
-
<text class="self-center text_7" @click="onPageJump('/pages/login/findBack')">找回密碼</text>
-
</view>
-
-
</template>
-
-
<script>
-
export default {
-
components: {
-
-
},
-
data() {
-
return {
-
phoneNumber:'', //手機號驗證
-
code:'', //驗證碼
-
dis: false, //判斷是否禁用狀態
-
show: true, //判斷顯示為發送還是重新發送
-
isGrey: false, //class判斷按鈕樣式
-
timer: null, //設置計時器,
-
count: "", //定義常量
-
num:'', //判斷是否為第一次點擊
-
btnShow:false, //判斷登錄按鈕顯示隱藏
-
timeOut:null, //添加定時器
-
};
-
},
-
// 方法
-
methods: {
-
// 找回密碼跳轉頁面
-
onPageJump(url) {
-
uni.navigateTo({
-
url: url
-
});
-
},
-
-
// 發送驗證碼
-
onSetCode() {
-
let TIME_COUNT = 60;
-
if (!this.timer) {
-
uni.showToast({
-
title: '已發送驗證碼',
-
icon: 'success',
-
});
-
this.count = TIME_COUNT;
-
this.isGrey = true;
-
this.show = false;
-
this.dis = true;
-
this.timer = setInterval(() => {
-
if (this.count > 0 && this.count <= TIME_COUNT) {
-
this.count--;
-
} else {
-
this.dis = false;
-
this.isGrey = false;
-
this.show = true;
-
clearInterval(this.timer);
-
this.timer = null;
-
}
-
}, 1000);
-
}
-
},
-
// 判斷顯示登錄按鈕
-
onInput() {
-
this.timeOut && clearTimeout(this.timeOut)
-
this.timeOut = setTimeout(() => {
-
if (this.phoneNumber && this.code) {
-
this.btnShow = true;
-
} else {
-
this.btnShow = false;
-
}
-
}, 100);
-
},
-
//點擊登錄
-
onSubmit(){
-
// 判斷驗證手機號
-
if(!this.phoneNumber){
-
uni.showToast({
-
title: '請輸入手機號',
-
icon: 'none',
-
});
-
return;
-
}
-
const phoneNumber= /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
-
if(!phoneNumber.test(this.phoneNumber)){
-
uni.showToast({
-
title: '手機號輸入不正確',
-
icon: 'none',
-
});
-
return;
-
}
-
// 判斷驗證碼
-
if(!this.code){
-
uni.showToast({
-
title: '請輸入驗證碼',
-
icon: 'none',
-
});
-
return;
-
}
-
uni.showToast({
-
title: '請稍后...',
-
icon: 'loading',
-
});
-
},
-
-
},
-
};
-
</script>
-
-
<style>
-
@import"../../style/css/phoneVerify.css";
-
/* 驗證碼按鈕樣式 */
-
.acquire{
-
padding: 3px 0px;
-
background-color: #eeeeee;
-
border-radius: 5px;
-
width: 92px;
-
height: 29px;
-
color: #666;
-
font-size: 14px;
-
line-height: 20px;
-
text-align: center;
-
}
-
.again{
-
padding: 3px 0px;
-
background-color: #eeeeee;
-
border-radius: 5px;
-
width: 92px;
-
height: 29px;
-
color: #000000;
-
font-size: 14px;
-
line-height: 20px;
-
text-align: center;
-
}
-
-
</style>
這個頁面因為是靜態的沒有后端接口只是做的樣式，所以驗證碼讀秒這塊內容刷新頁面時會重置重新開始讀秒這里注意一下就行，如果接后端接口實現的話原理也差不多自己慢慢理解就行
大概就長這樣：
至于左上角這個返回鍵的小鈕鈕是uni-app創建項目時自帶的 pages.json配置文件可以配置關閉 用（"navigationStyle":"custom"）這個參數就能關閉，單頁面關閉在pages里配置，全部關閉在globalStyle里配置。
大概長這樣：
也可以在Vue頁面的方法里用uni.navigateBack方法自己寫一個返回的方法。uni.navigateBack返回頁面的方法具體怎么用↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓后面的頁面會有用到
-
/************************************************************
-
** 全局樣式 **
-
************************************************************/
-
html {
-
font-size: 16px;
-
}
-
-
body {
-
margin: 0;
-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
-
'Droid Sans', 'Helvetica Neue', 'Microsoft Yahei', sans-serif;
-
-webkit-font-smoothing: antialiased;
-
-moz-osx-font-smoothing: grayscale;
-
}
-
-
view,
-
image,
-
text {
-
box-sizing: border-box;
-
flex-shrink: 0;
-
}
-
-
#app {
-
width: 100vw;
-
height: 100vh;
-
}
-
-
.flex-row {
-
display: flex;
-
flex-direction: row;
-
}
-
-
.flex-col {
-
display: flex;
-
flex-direction: column;
-
}
-
-
.justify-start {
-
justify-content: flex-start;
-
}
-
-
.justify-end {
-
justify-content: flex-end;
-
}
-
-
.justify-center {
-
justify-content: center;
-
}
-
-
.justify-between {
-
justify-content: space-between;
-
}
-
-
.justify-around {
-
justify-content: space-around;
-
}
-
-
.justify-evenly {
-
justify-content: space-evenly;
-
}
-
-
.items-start {
-
align-items: flex-start;
-
}
-
-
.items-end {
-
align-items: flex-end;
-
}
-
-
.items-center {
-
align-items: center;
-
}
-
-
.items-baseline {
-
align-items: baseline;
-
}
-
-
.items-stretch {
-
align-items: stretch;
-
}
-
-
.self-start {
-
align-self: flex-start;
-
}
-
-
.self-end {
-
align-self: flex-end;
-
}
-
-
.self-center {
-
align-self: center;
-
}
-
-
.self-baseline {
-
align-self: baseline;
-
}
-
-
.self-stretch {
-
align-self: stretch;
-
}
-
-
.flex-1 {
-
flex: 1 1 0%;
-
}
-
-
.flex-auto {
-
flex: 1 1 auto;
-
}
-
-
.grow {
-
flex-grow: 1;
-
}
-
-
.grow-0 {
-
flex-grow: 0;
-
}
-
-
.shrink {
-
flex-shrink: 1;
-
}
-
-
.shrink-0 {
-
flex-shrink: 0;
-
}
-
-
.relative {
-
position: relative;
-
}
-
-
/* ------------------------------------------------ */
-
.group {
-
padding: 30px 40px 60px;
-
overflow-y: auto;
-
}
-
.text_2 {
-
color: #020202;
-
font-size: 20px;
-
font-family: 'PingFang SC';
-
line-height: 28px;
-
}
-
.group_2 {
-
margin-top: 42px;
-
/* border-bottom: solid 1px #888888; */
-
}
-
.space-y-10 > view:not(:first-child),
-
.space-y-10 > text:not(:first-child),
-
.space-y-10 > image:not(:first-child) {
-
margin-top: 10px;
-
}
-
.font_1 {
-
font-size: 15px;
-
font-family: 'PingFang SC';
-
line-height: 21px;
-
color: #000000;
-
}
-
.group_3 {
-
padding: 5px 0;
-
/* border-top: solid 1px #888888; */
-
}
-
.text_4 {
-
margin-top: 8px;
-
}
-
.text-wrapper {
-
padding: 4px 0;
-
background-color: #eeeeee;
-
border-radius: 5px;
-
width: 92px;
-
height: 29px;
-
}
-
.text_3 {
-
color: #000000;
-
font-size: 14px;
-
line-height: 20px;
-
}
-
.text_5 {
-
margin-top: 22px;
-
color: #166bf8;
-
}
-
.button button{
-
margin-top: 324px;
-
padding: 8px 0 11px;
-
/* background-color: #166bf880; */
-
background-image: url('。。。。。。。。。。。。。。。。。。。。。。');
-
background-size: 100% 100%;
-
background-repeat: no-repeat;
-
border-radius: 5px;
-
width: 100%;
-
}
-
.text_6 {
-
color: #ffffff;
-
}
-
.text_7 {
-
margin-top: 50px;
-
color: #555555;
-
font-size: 12px;
-
font-family: 'PingFang SC';
-
line-height: 17px;
-
}
-
/* 登錄按鈕2*/
-
.button2 button{
-
width: 100%;
-
margin-top: 324px;
-
padding: 8px 0 11px;
-
background-color: #166bf880;
-
border-radius: 5px;
-
line-height: 21px;
-
font-size: 15px;
-
}
-
.text_66 {
-
color: #ffffff;
-
}
在登錄頁面點擊找回密碼后跳轉到此頁面
同樣在pages.json文件里配置對應頁面參數↑↑↑↑↑↑↑↑↑
效果圖：
點擊通過手機號跳轉到手機短信驗證頁面 也就是第四步的頁面點擊通過郵箱驗證跳轉到郵箱驗證頁面 也就是第六步的頁面
-
<!-- 找回密碼 -->
-
<template>
-
<view class="flex-col justify-start flex-auto group_3">
-
<view class="flex-col section">
-
<view class="flex-row justify-between items-center group_4" @click="onPageJump('/pages/login/phoneVerify')">
-
<text class="font_1">通過已綁定手機號，用短信驗證登錄</text>
-
<image
-
class="image_5"
-
src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/637d8bf95a7e3f031010c80e/63e351ec66570000128a304a/16758423632990405565.png"
-
/>
-
</view>
-
<view class="flex-row justify-between items-center group_4" @click="onPageJump('/pages/login/mailFindBack')">
-
<text class="font_1">通過已綁定郵箱重設密碼</text>
-
<image
-
class="image_5"
-
src="。。。。。。。。。。。。。。。"
-
/>
-
</view>
-
</view>
-
</view>
-
</template>
-
-
<script>
-
export default {
-
components: {},
-
data() {
-
return {
-
-
};
-
-
},
-
-
methods: {
-
onPageJump(url) {
-
uni.navigateTo({
-
url:url
-
})
-
},
-
},
-
};
-
</script>
-
-
<style>
-
@import"../../style/css/findBack.css";
-
</style>
-
/************************************************************
-
** 全局樣式 **
-
************************************************************/
-
html {
-
font-size: 16px;
-
}
-
-
body {
-
margin: 0;
-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
-
'Droid Sans', 'Helvetica Neue', 'Microsoft Yahei', sans-serif;
-
-webkit-font-smoothing: antialiased;
-
-moz-osx-font-smoothing: grayscale;
-
}
-
-
view,
-
image,
-
text {
-
box-sizing: border-box;
-
flex-shrink: 0;
-
}
-
-
#app {
-
width: 100vw;
-
height: 100vh;
-
}
-
-
.flex-row {
-
display: flex;
-
flex-direction: row;
-
}
-
-
.flex-col {
-
display: flex;
-
flex-direction: column;
-
}
-
-
.justify-start {
-
justify-content: flex-start;
-
}
-
-
.justify-end {
-
justify-content: flex-end;
-
}
-
-
.justify-center {
-
justify-content: center;
-
}
-
-
.justify-between {
-
justify-content: space-between;
-
}
-
-
.justify-around {
-
justify-content: space-around;
-
}
-
-
.justify-evenly {
-
justify-content: space-evenly;
-
}
-
-
.items-start {
-
align-items: flex-start;
-
}
-
-
.items-end {
-
align-items: flex-end;
-
}
-
-
.items-center {
-
align-items: center;
-
}
-
-
.items-baseline {
-
align-items: baseline;
-
}
-
-
.items-stretch {
-
align-items: stretch;
-
}
-
-
.self-start {
-
align-self: flex-start;
-
}
-
-
.self-end {
-
align-self: flex-end;
-
}
-
-
.self-center {
-
align-self: center;
-
}
-
-
.self-baseline {
-
align-self: baseline;
-
}
-
-
.self-stretch {
-
align-self: stretch;
-
}
-
-
.flex-1 {
-
flex: 1 1 0%;
-
}
-
-
.flex-auto {
-
flex: 1 1 auto;
-
}
-
-
.grow {
-
flex-grow: 1;
-
}
-
-
.grow-0 {
-
flex-grow: 0;
-
}
-
-
.shrink {
-
flex-shrink: 1;
-
}
-
-
.shrink-0 {
-
flex-shrink: 0;
-
}
-
-
.relative {
-
position: relative;
-
}
-
-
.font_1 {
-
font-size: 16px;
-
font-family: 'PingFang SC';
-
line-height: 22px;
-
color: #020202;
-
}
-
.group_3 {
-
padding: 10px 0 586px;
-
overflow-y: auto;
-
}
-
.section {
-
padding: 0px 16px;
-
background-color: #ffffff;
-
}
-
.group_4 {
-
padding: 18px 0;
-
border-bottom: solid 1px #979797;
-
}
-
.image_5 {
-
margin-right: 14px;
-
width: 12px;
-
height: 12px;
-
}
效果圖：
-
<!-- 郵件找回密碼 -->
-
<template>
-
<view class="flex-col flex-auto group">
-
<text class="self-center text_2">通過郵箱找回密碼</text>
-
<input type="text" class="self-start font_1 text_3" @input="onInput" placeholder="請輸入您綁定的郵箱地址" v-model="email">
-
<!-- svg畫線 -->
-
<view style="height: 1px;">
-
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
-
<line x1="0" y1="0" x2="400" y2="0" style="stroke:rgb(0,0,0);stroke-width:0.2" />
-
</svg>
-
</view>
-
-
<view class="flex-col justify-start items-center button" v-if="btnShow">
-
<text class="font_1 text_4" @click="onSubmit()">下一步</text>
-
</view>
-
<!-- 下一步按鈕2 -->
-
<view class="flex-col justify-start items-center button2" v-else>
-
<button class="font_1 text_66">下一步</button>
-
</view>
-
</view>
-
</template>
-
-
<script>
-
export default {
-
components: {
-
-
},
-
data() {
-
return {
-
email:'', //郵箱
-
btnShow:false, //判斷登錄按鈕顯示隱藏
-
timeOut:null, //添加定時器
-
};
-
},
-
-
methods: {
-
// 判斷顯示下一步按鈕
-
onInput() {
-
this.timeOut && clearTimeout(this.timeOut)
-
this.timeOut = setTimeout(() => {
-
if (this.email) {
-
this.btnShow = true;
-
} else {
-
this.btnShow = false;
-
}
-
}, 100);
-
},
-
// 點擊下一步
-
onSubmit(){
-
if(!this.email){
-
uni.showToast({
-
title: '請輸入郵箱',
-
icon: 'none',
-
});
-
return;
-
}
-
const email= /^\w{3,}@\w{2,}\.(com|cn|net|com\.cn)$/;
-
if(!email.test(this.email)){
-
uni.showToast({
-
title: '郵箱輸入不正確',
-
icon: 'none',
-
});
-
return;
-
}
-
uni.showToast({
-
title: '請稍后...',
-
icon: 'loading',
-
-
});
-
// 添加定時器延時跳轉頁面
-
setTimeout(function(){
-
uni.navigateTo({
-
url: '/pages/login/emailFinish'
-
});
-
},2000)
-
-
}
-
},
-
};
-
</script>
-
-
<style>
-
@import"../../style/css/mailFindBack.css";
-
</style>
-
/************************************************************
-
** 全局樣式 **
-
************************************************************/
-
-
html {
-
font-size: 16px;
-
}
-
-
body {
-
margin: 0;
-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
-
'Droid Sans', 'Helvetica Neue', 'Microsoft Yahei', sans-serif;
-
-webkit-font-smoothing: antialiased;
-
-moz-osx-font-smoothing: grayscale;
-
}
-
-
view,
-
image,
-
text {
-
box-sizing: border-box;
-
flex-shrink: 0;
-
}
-
-
#app {
-
width: 100vw;
-
height: 100vh;
-
}
-
-
.flex-row {
-
display: flex;
-
flex-direction: row;
-
}
-
-
.flex-col {
-
display: flex;
-
flex-direction: column;
-
}
-
-
.justify-start {
-
justify-content: flex-start;
-
}
-
-
.justify-end {
-
justify-content: flex-end;
-
}
-
-
.justify-center {
-
justify-content: center;
-
}
-
-
.justify-between {
-
justify-content: space-between;
-
}
-
-
.justify-around {
-
justify-content: space-around;
-
}
-
-
.justify-evenly {
-
justify-content: space-evenly;
-
}
-
-
.items-start {
-
align-items: flex-start;
-
}
-
-
.items-end {
-
align-items: flex-end;
-
}
-
-
.items-center {
-
align-items: center;
-
}
-
-
.items-baseline {
-
align-items: baseline;
-
}
-
-
.items-stretch {
-
align-items: stretch;
-
}
-
-
.self-start {
-
align-self: flex-start;
-
}
-
-
.self-end {
-
align-self: flex-end;
-
}
-
-
.self-center {
-
align-self: center;
-
}
-
-
.self-baseline {
-
align-self: baseline;
-
}
-
-
.self-stretch {
-
align-self: stretch;
-
}
-
-
.flex-1 {
-
flex: 1 1 0%;
-
}
-
-
.flex-auto {
-
flex: 1 1 auto;
-
}
-
-
.grow {
-
flex-grow: 1;
-
}
-
-
.grow-0 {
-
flex-grow: 0;
-
}
-
-
.shrink {
-
flex-shrink: 1;
-
}
-
-
.shrink-0 {
-
flex-shrink: 0;
-
}
-
-
.relative {
-
position: relative;
-
}
-
/* ------------------------------------------------------------------------------ */
-
-
.group {
-
padding: 25px 40px 127px;
-
overflow-y: auto;
-
}
-
.text_2 {
-
color: #020202;
-
font-size: 20px;
-
font-family: 'PingFang SC';
-
line-height: 28px;
-
}
-
.font_1 {
-
font-size: 15px;
-
font-family: 'PingFang SC';
-
line-height: 21px;
-
}
-
.text_3 {
-
margin-top: 42px;
-
margin-bottom: 12px;
-
color: #999999;
-
}
-
/* .section {
-
margin-top: 12px;
-
background-color: #888888;
-
height: 1px;
-
} */
-
.button {
-
margin-top: 324px;
-
padding: 8px 0 11px;
-
/* background-color: #166bf880; */
-
background-image: url('。。。。。。。。。。。。');
-
background-size: 100% 100%;
-
background-repeat: no-repeat;
-
border-radius: 5px;
-
}
-
.text_4 {
-
color: #ffffff;
-
}
-
/* 下一步按鈕2*/
-
.button2 button{
-
width: 100%;
-
margin-top: 324px;
-
padding: 8px 0 11px;
-
background-color: #166bf880;
-
border-radius: 5px;
-
line-height: 21px;
-
font-size: 15px;
-
}
-
.text_66 {
-
color: #ffffff;
-
}
效果圖：
-
<template>
-
<view class="flex-col flex-auto group">
-
<view class="flex-col group_2">
-
<image
-
class="self-center image_5"
-
src="。。。。。。。。。。。。。。"
-
/>
-
<text class="self-center text_2">請訪問郵件中給出的網頁鏈接地址，根據頁面提示完成密碼重設。</text>
-
<view class="flex-col justify-start items-center button">
-
<button class="text_3" @click="Back">確定</button>
-
</view>
-
</view>
-
</view>
-
</template>
-
-
<script>
-
export default {
-
components: {
-
-
},
-
data() {
-
return {
-
-
};
-
},
-
-
methods: {
-
// 點擊確定返回上一頁
-
Back(){
-
// 返回到上一個頁面
-
uni.navigateBack({
-
delta:1,//返回層數，2則上上頁，默認delta:1
-
})
-
},
-
},
-
};
-
-
</script>
-
-
<style>
-
@import"../../style/css/emailFinish.css";
-
</style>
點擊返回上一頁面可以用uni.navigateBack方法
點擊跳轉到指定頁面可以用uni.navigateTo方法（因為都屬于跳轉頁面也可以用這個方法返回上一頁自行理解吧）
大概長這樣：
-
/************************************************************
-
** 全局樣式 **
-
************************************************************/
-
-
html {
-
font-size: 16px;
-
}
-
-
body {
-
margin: 0;
-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
-
'Droid Sans', 'Helvetica Neue', 'Microsoft Yahei', sans-serif;
-
-webkit-font-smoothing: antialiased;
-
-moz-osx-font-smoothing: grayscale;
-
}
-
-
view,
-
image,
-
text {
-
box-sizing: border-box;
-
flex-shrink: 0;
-
}
-
-
#app {
-
width: 100vw;
-
height: 100vh;
-
}
-
-
.flex-row {
-
display: flex;
-
flex-direction: row;
-
}
-
-
.flex-col {
-
display: flex;
-
flex-direction: column;
-
}
-
-
.justify-start {
-
justify-content: flex-start;
-
}
-
-
.justify-end {
-
justify-content: flex-end;
-
}
-
-
.justify-center {
-
justify-content: center;
-
}
-
-
.justify-between {
-
justify-content: space-between;
-
}
-
-
.justify-around {
-
justify-content: space-around;
-
}
-
-
.justify-evenly {
-
justify-content: space-evenly;
-
}
-
-
.items-start {
-
align-items: flex-start;
-
}
-
-
.items-end {
-
align-items: flex-end;
-
}
-
-
.items-center {
-
align-items: center;
-
}
-
-
.items-baseline {
-
align-items: baseline;
-
}
-
-
.items-stretch {
-
align-items: stretch;
-
}
-
-
.self-start {
-
align-self: flex-start;
-
}
-
-
.self-end {
-
align-self: flex-end;
-
}
-
-
.self-center {
-
align-self: center;
-
}
-
-
.self-baseline {
-
align-self: baseline;
-
}
-
-
.self-stretch {
-
align-self: stretch;
-
}
-
-
.flex-1 {
-
flex: 1 1 0%;
-
}
-
-
.flex-auto {
-
flex: 1 1 auto;
-
}
-
-
.grow {
-
flex-grow: 1;
-
}
-
-
.grow-0 {
-
flex-grow: 0;
-
}
-
-
.shrink {
-
flex-shrink: 1;
-
}
-
-
.shrink-0 {
-
flex-shrink: 0;
-
}
-
-
.relative {
-
position: relative;
-
}
-
/* ------------------------------------------------------------------------------ */
-
-
.group {
-
padding: 25px 40px 127px;
-
overflow-y: auto;
-
}
-
.text_2 {
-
color: #020202;
-
font-size: 20px;
-
font-family: 'PingFang SC';
-
line-height: 28px;
-
}
-
.font_1 {
-
font-size: 15px;
-
font-family: 'PingFang SC';
-
line-height: 21px;
-
}
-
.text_3 {
-
margin-top: 42px;
-
margin-bottom: 12px;
-
color: #999999;
-
}
-
/* .section {
-
margin-top: 12px;
-
background-color: #888888;
-
height: 1px;
-
} */
-
.button {
-
margin-top: 324px;
-
padding: 8px 0 11px;
-
/* background-color: #166bf880; */
-
background-image: url('。。。。。。。。。。。。。。。');
-
background-size: 100% 100%;
-
background-repeat: no-repeat;
-
border-radius: 5px;
-
}
-
.text_4 {
-
color: #ffffff;
-
}
-
/* 下一步按鈕2*/
-
.button2 button{
-
width: 100%;
-
margin-top: 324px;
-
padding: 8px 0 11px;
-
background-color: #166bf880;
-
border-radius: 5px;
-
line-height: 21px;
-
font-size: 15px;
-
}
-
.text_66 {
-
color: #ffffff;
-
}
本章也是自己參考相關資料和各位大佬的文章自行整理僅供參考，希望可以幫助到和我一樣菜雞的小伙伴
參考資料：
https://blog.csdn.net/weixin_40614372/article/details/101537653
uni-app官網：
https://uniapp.dcloud.net.cn/component/
登錄頁面完成后我用的是Strophe.js對接Openfire的接口，然后把Strophe.js的用法加到↑本文的登錄頁里使用
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
藍藍設計的小編 http://m.skdbbs.com