需求：
制作一个简易登录界面
思路：
（1）排版（不细讲）
（2）登录密码的input框，
我们通过v-if来判断输入框的类型、小眼睛的切换、密码是否隐藏
-----输入框的类型?
设置inputType这个变量的初始值为true
<input class="input-phone" type="password"
v-model="password" placeholder="登录密码" v-if="inputType" />
<input class="input-phone" type="text"
v-model="password" placeholder="登录密码" v-if="!inputType" />data() {
return {
inputType: true, //初始化时，密码是隐藏，type:password
password: ''
}然后通过点击输入框右侧小眼睛来切换输入框的类型
------小眼睛的切换
?
?在小眼睛上，绑定图片的路径，使用三元表达式，进行切换，
并绑定点击事件@click="changePw"
当inputType：ture时，就会显示图片2，显示密码（就是小黑点），
当inputType：false时，显示明文（数字或者文字）
<image class="input-type"
:src="inputType ? require('static/mine/apply/2.jpg') :require('static/mine/apply/1.jpg')"
mode="widthFix" @click="changePw"></image>//隐藏显示密码
changePw() {
let pw = this.password //进行赋值
this.inputType = !this.inputType
this.$nextTick(() => {
this.password = pw
})（3）校验
在按钮上绑定点击事件
<button class="login-btn" type="default" @click="doLogin">登录</button>//账号密码登录
async doLogin() {
var that = this; 声明赋值
if (that.phone.length == 0 || that.password.length == 0) {
//校验非空 当手机号码或者密码没有填时，会有弹框
wx.showToast({ //弹框提示
icon: 'none',
title: '登录账号或密码不能为空！',
duration: 2000,
})
} else if (!this.checked) {
//勾选协议 //当服务协议没有打勾时，会有警告弹框
wx.showToast({ //弹框提示
icon: 'none',
title: '请勾选用户服务协议',
duration: 2000,
})
} else {
let params = {
account: that.phone,
password: that.password,
};
let data = await Api.apiCall('post', Api.my.login, params);
console.log(data);
if (data.result.code == "0") {
wx.setStorageSync('account', that.phone);
wx.setStorageSync('password', that.password);
wx.setStorageSync('startTime', data.data.startTime);
wx.setStorage({
key: "user",
data: data.data.user,
success: function() {
wx.switchTab({
url: '/pages/home/index'
});
}
});
} else {
wx.showToast({
icon: 'none',
title: data.result.msg,
duration: 2000,
})
}
}源码展示：
<template>
<view>
<!-- 登录注册板块 -->
<view class="login">
<view class="title">请登录</view>
<view class="input-content">
<view class="input-box">
<image class="input-bg"
:src="require('static/mine/like/like.png')"
mode="scaleToFill"></image>
<input class="input-phone" type="text" v-model="phone" placeholder="登录账号" />
</view>
<view class="input-box">
<image class="input-bg"
:src="require('static/mine/like/forward.png')" mode="scaleToFill"></image>
<input class="input-phone"
type="text" v-model="password" placeholder="登录密码" v-if="!inputType" />
<input class="input-phone"
type="password" v-model="password" placeholder="登录密码" v-if="inputType" />
<image class="input-type":src="inputType ?
require('static/mine/apply/2.jpg') : require('static/mine/apply/1.jpg')"
mode="widthFix" @click="changePw"></image>
</view>
</view>
<button class="login-btn" type="default" @click="doLogin">登录</button>
<!-- 服务协议板块 -->
<view class="checkbox">
<u-checkbox-group>
<u-checkbox v-model="checked" shape="circle" size="36" active-color="#CC0000">
已阅读并同意<text class="user">《用户服务协议》</text>
</u-checkbox>
</u-checkbox-group>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
inputType: true, //显示密码
password: ''
}
},
methods: {
//隐藏显示密码
changePw() {
let pw = this.password
this.inputType = !this.inputType
this.$nextTick(() => {
this.password = pw
})
},
//账号密码登录
async doLogin() {
var that = this;
if (that.phone.length == 0 || that.password.length == 0) { //校验非空
wx.showToast({ //弹框提示
icon: 'none',
title: '登录账号或密码不能为空！',
duration: 2000,
})
} else if (!this.checked) { //勾选协议
wx.showToast({ //弹框提示
icon: 'none',
title: '请勾选用户服务协议',
duration: 2000,
})
} else {
let params = {
account: that.phone,
password: that.password,
};
let data = await Api.apiCall('post', Api.my.login, params);
console.log(data);
if (data.result.code == "0") {
wx.setStorageSync('account', that.phone);
wx.setStorageSync('password', that.password);
wx.setStorageSync('startTime', data.data.startTime);
wx.setStorage({
key: "user",
data: data.data.user,
success: function() {
wx.switchTab({
url: '/pages/home/index'
});
}
});
} else {
wx.showToast({
icon: 'none',
title: data.result.msg,
duration: 2000,
})
}
}
},
onReady() {
}
}
}
</script>
<style scoped lang="scss">
.login {
.bg-content {
width: 100%;
height: 450upx;
position: relative;
overflow: hidden;
.bg {
// width: 100%;
width: 30upx;
height: auto;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
}
.title {
padding: 47upx;
text-indent: 55upx;
font-size: 48upx;
font-weight: 400;
color: #333333;
}
.input-content {
padding: 0 23upx;
.input-box {
position: relative;
margin: 0 auto;
padding: 0 50upx;
height: 120upx;
.input-bg {
position: absolute;
left: 0;
right: 0;
top: 40upx;
bottom: 0;
width: 30upx;
height: 30upx;
}
.input-phone {
width: 100%;
height: 100upx;
}
.input-type {
z-index: 2;
position: absolute;
right: 50upx;
top: 30upx;
width: 40upx;
height: auto;
}
}
}
.login-btn {
margin-top: 86upx;
width: 92%;
height: 104upx;
background: #CC0000;
border-radius: 52px;
color: #FFFFFF;
box-shadow: 0upx 0upx 20upx rgba(204, 0, 0, 0.2);
}
.checkbox {
width: 92%;
margin: 20upx auto;
font-size: 28upx;
.user {
color: #0096FF;
}
}
}
</style>
效果展示：
?
?
?
?
?