<template>
<view class="box">
<view class="loginBox">
<view class="popup">
<view class="loginMode">
<view class="account" @click="isAccount" :class="!isshowAccount ? 'isAccMax': 'isAccMin'">賬號登錄</view> // isshowAccount :通過判斷它的值來顯示對應的樣式
<view class="verification" @click="isVerification" :class="!isshowVerification ? 'isVerMin': 'isVerMax'">驗證碼登錄</view>
</view>
<!-- 賬號密碼登錄 -->
<view v-show="isshowAccount" class="isshowBox"> // v-show 來控制輸入框的顯示與隱藏
<view class="inputBox">
<u-field
v-model="mobile"
label="手機號"
placeholder="請輸入手機號"
>
</u-field>
<u-field
v-model="code"
label="密碼"
placeholder="請輸入密碼"
>
</u-field>
</view>
<u-button type="primary" @click="viewProtocol" class="denglu">登錄</u-button>
</view>
<!-- 驗證碼登錄 -->
<view v-show="isshowVerification" class="isshowBox" >
<view class="inputBox">
<u-field
v-model="mobile"
label="手機號"
placeholder="請輸入手機號"
>
</u-field>
<u-field
v-model="code"
label="驗證碼"
placeholder="請輸入驗證碼"
>
<u-button size="mini" slot="right" @click="getCode">{{codeText}}</u-button>
</u-field>
<u-verification-code ref="uCode" @change="codeChange"></u-verification-code>
</view>
<u-button type="primary" @click="viewProtocol" class="denglu">登錄</u-button>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
mobile: '', // 手機號
code: '', // 密碼
codeText:'' ,// 模擬獲取驗證碼
isshowAccount:true, // 默認顯示賬號密碼登錄
isshowVerification:false, // 隱藏驗證碼登錄
}
},
methods: {
// 點擊驗證碼
isVerification(){
this.isshowAccount = false // 隱藏賬號登錄
this.isshowVerification = true // 顯示驗證碼登錄
},
// 點擊賬號
isAccount() {
this.isshowVerification = false // 隱藏驗證碼登錄
this.isshowAccount = true // 顯示賬號登錄
},
// 模擬獲取驗證碼
codeChange(text) {
this.codeText = text;
},
getCode() {
if(this.$refs.uCode.canGetCode) {
// 模擬向后端請求驗證碼
uni.showLoading({
title: '正在獲取驗證碼'
})
setTimeout(() => {
uni.hideLoading();
// 通知驗證碼組件內部開始倒計時
this.$refs.uCode.start();
}, 1000);
}else {
this.$u.toast('倒計時結束后再發送');
}
},
// 點擊登錄后進行頁面的跳轉
viewProtocol() {
uni.navigateTo({
url: '/pages/index/list'
})
},
}
}
</script>
<style lang="scss">
.box {
width: 100%;
height: 100%;
position: relative;
>.loginBox {
width: 100%;
height: 100%;
background-color: #409EFF;
position: fixed;
top: 0px;
left: 0px;
>.popup {
width: 315px;
height: 324px;
background-color: #FFFFFF;
position: absolute;
top: 50%;
left: 50%;
padding-left: 26px;
padding-right: 26px;
transform: translate(-50%,-50%);
border-radius: 10px;
>.loginMode {
width: 263px;
height: 31px;
margin-top: 36px;
margin-bottom: 20px;
border-bottom: 1px solid #F8F8F8;
// 控制切換登錄時的樣式
>.isAccMax {
font-size: 15px;
margin-top: 6px;
color: #D3D3D3;
}
>.isAccMin {
font-size: 18px;
font-weight: 600;
margin-top: 3px;
border-right: 1px solid #F8F8F8;
}
>.isVerMin {
font-size: 15px;
margin-top: 6px;
color: #D3D3D3;
}
>.isVerMax {
font-size: 18px;
font-weight: 600;
margin-top: 3px;
border-left: 1px solid #F8F8F8;
}
>.account, .verification{
width: 131px;
height: 33px;
display: inline-block;
text-align: center;
}
}
.denglu {
margin-top: 36px;
}
}
}
}
</style>
- 最終實現效果：
注意哦：我使用的是uni-app + uView 寫的，記得引入一下uView，剛用不久uni-app + uView 寫代碼，寫的不好的請多多指教，這里只是給自己做了個筆記，寫的不好的地方請見諒，謝謝