样式效果
创建index.vue文件
<template>
<view class="content">
<view class="mainTop">
<view class="mianTaber" v-for="(item,index) in taberList" :key="item.idso" @click="getTar(index)"
:class="{'borderBottom':contin==index}">{{item.text}}</view>
</view>
<view class="mainCenter" v-if="contin==0">
<view class="mainCenBox">
<input type="number" maxlength="11" placeholder="请输入手机号码" v-model="phoneNumber">
<view class="mainInp" v-if="codeif==false">
<input :type="passworif" placeholder="请输入密码" maxlength="28" ref="password">
<view class="poerter" style="padding-right: 20rpx;" @click="getshouBox"><text
v-if="shouBox==false">显示</text><text v-else>隐藏</text></view>
</view>
<view class="mainInp" v-else>
<input type="number" placeholder="请输入验证码" maxlength="15" v-model="codeNumber">
<view class="poerterii" style="padding-right: 20rpx;">
<text v-if="shoins==61">获取验证码</text>
<text v-else>{{shoins}}重新发送</text>
</view>
</view>
</view>
<view class="mainBtnBox">
<view class="mainBtn" v-for="(item,index) in btnList" :key="index" @click="getBtnTar(item,index)">
{{item}}
</view>
</view>
</view>
<view class="mainCenter" v-if="contin==1">
<view class="mainCenBox">
<input type="number" maxlength="11" placeholder="请输入手机号码" v-model="phoneNumber">
<view class="mainInp">
<input type="number" placeholder="请输入验证码" maxlength="15" v-model="codeNumber">
<view class="poerterii" style="padding-right: 20rpx;">
<text v-if="shoins==61">获取验证码</text>
<text v-else>{{shoins}}重新发送</text>
</view>
</view>
<view class="mainInp">
<input :type="passworif" placeholder="请输入密码" maxlength="28" ref="password">
<view class="poerter" style="padding-right: 20rpx;" @click="getshouBox"><text
v-if="shouBox==false">显示</text><text v-else>隐藏</text></view>
</view>
</view>
<view class="mainBtnBox zuche">
<view class="mainBtn" @click="getresist">立即注册</view>
</view>
</view>
<view class="iconifbt" v-if="contin==0">
<view class="log_luit">
<checkbox-group @change="checkboxChange">
<checkbox color="#999" :checked="checkedif"/>
勾选即表示同意<text @click="tourl('/pages/xieyi/xieyi?type=2')">《用户协议》</text>及<text
@click="tourl('/pages/xieyi/xieyi?type=1')">《隐私政策》</text>
</checkbox-group>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
taberList: [{
text: '登录',
idso: 1
},
{
text: '注册',
idso: 2
}
],
contin: 0,
btnList: ['密码登录', '验证码登录'],
btnListyi: ['密码登录', '验证码登录'],
btnListya: ['验证码登录', '密码登录'],
checkedif: false,
shouBox: false,
shoins: 60,
passworif: 'password',
codeif: false,
phoneNumber: '',
password: '',
codeNumber: ''
}
},
onLoad(per) {
console.log(per, 222222222);
},
methods: {
checkboxChange(e) {
this.checkedif=!this.checkedif
},
getTar(e) {
this.contin = e
},
getresist() {
let data = {
mobilPhone: this.phoneNumber,
password: this.$refs.password.valueSync,
codeNumber: this.codeNumber
}
this.$emit('getresist', data)
},
getBtnTar(e, i) {
// console.log(this.$refs.password.valueSync,33333333333);
if (e == '密码登录') {
this.btnList = this.btnListyi
this.codeif = false
} else if (e == '验证码登录') {
this.codeif = true
this.btnList = this.btnListya
}
if (e == '密码登录' & i == 0) {
let data = {
mobilPhone: this.phoneNumber,
password: this.$refs.password.valueSync,
checked: this.checkedif
}
this.$emit('passwordLogin', data)
} else if (e == '验证码登录' & i == 0) {
let data = {
mobilPhone: this.phoneNumber,
codeNumber: this.codeNumber,
checked: this.checkedif
}
this.$emit('capChaLogin', data)
console.log('验证码登录');
}
},
tourl(e) {
uni.navigateTo({
url: e
})
},
getshouBox() {
this.shouBox = !this.shouBox
if (this.shouBox == false) {
this.passworif = "password"
} else {
this.passworif = "text"
}
}
}
}
</script>
<style lang="scss" scoped>
@keyframes yes {
0% {
opacity: 0;
bottom: -200rpx;
}
50% {
opacity: .5;
}
100% {
opacity: 1;
bottom: 0;
}
}
.content {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
// height: 55%;
border-top-right-radius: 50rpx;
border-top-left-radius: 50rpx;
box-sizing: border-box;
padding: 30rpx;
background-color: #00ffff;
animation: yes .5s linear;
.mainTop {
display: flex;
align-items: center;
justify-content: space-around;
.mianTaber {
padding: 20rpx;
width: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #444;
font-weight: bold;
font-size: 34rpx;
padding-bottom: 10rpx;
}
.borderBottom {
color: #ff6600;
transition: all 1s linear;
&:before {
content: '';
width: 20rpx;
height: 20rpx;
margin-right: 15rpx;
border-bottom: 6rpx solid #ff6600;
border-right: 6rpx solid #ff6600;
transform: rotate(-45deg);
}
&:after {
content: '';
width: 20rpx;
height: 20rpx;
margin-left: 15rpx;
border-bottom: 6rpx solid #ff6600;
border-left: 6rpx solid #ff6600;
transform: rotate(45deg);
}
}
}
.mainCenter {
padding-top: 20rpx;
.mainCenBox {
input {
width: 75%;
margin: auto;
border: solid 1rpx #999;
margin-top: 40rpx;
padding: 20rpx 30rpx;
border-radius: 20rpx;
}
.mainInp {
position: relative;
.poerterii {
position: absolute;
top: 50%;
right: -20rpx;
transform: translate(-50%, -50%);
color: #ff6600;
}
.poerter {
position: absolute;
top: 50%;
right: 30rpx;
transform: translate(-50%, -50%);
text {
color: #999;
}
.mr {
padding-right: 30rpx !important;
}
}
}
}
.zuche {
.mainBtn {
color: #fff !important;
background-color: #ff6600 !important;
margin-bottom: 100rpx !important;
}
}
.mainBtnBox {
padding-top: 60rpx;
.mainBtn {
margin: auto;
width: 75%;
text-align: center;
padding: 30rpx;
border-radius: 30rpx;
margin-bottom: 20rpx;
border: #ff6600 solid 3rpx;
background-color: #ff6600;
font-size: 34rpx;
color: #fff;
&:nth-last-child(1) {
color: #333;
background-color: transparent;
}
}
}
}
.iconifbt {
padding: 55rpx 0 30rpx;
.log_luit {
font-size: 30rpx;
text {
color: #ff6600;
}
}
}
}
</style>
使用方法
<template>
<view>
<login-box @passwordLogin="passwordLogin" @capChaLogin="capChaLogin" @getresist="getresist"></login-box>
</view>
</template>
<script>
import loginBox from '@/components/loginBox/index.vue'
export default {
components:{
loginBox
},
methods: {
getresist(e){
console.log(e,'注册数据');
},
capChaLogin(e){
console.log(e,'验证码登录');
},
passwordLogin(e){
console.log(e,'密码登录');
}
}
</script>