uniapp好看的登录页面
本登录方式有两种
1.账号和密码登录
2.账号和验证码登录
1.登录页面的代码
<template><view class="login"><view class="login-title">体育场馆预约</view><view class="login-content"><view class="login-username"><i class="el-icon-user"></i><input type="text" placeholder="请输入账号" v-model="phone"></view><view class="login-password"><i class="el-icon-key"></i><input type="safe-password" name="" id="" placeholder="请输入密码" 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">注册账号</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: '请输入手机号', rule: '/^1[23456789]\d{9}$/' }],password: [{ required: true, message: '请输入密码', trigger: 'blur' }]}};},methods: {// ...mapMutations(['user_Login']),//登录onsubmit() {if(this.phone==''||this.password==''){uni.showToast({title:"内容不能为空哦！",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) //页面跳转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开发uni-app，赶紧跟我一起来体验！",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.注册页面
<template><view class="registration"><view class="registration-content"><view class="login-username"><i class="el-icon-mobile"></i><input type="text" name="" id="" placeholder="请输入手机号" v-model="phone" /></view><view class="login-code"><i class="el-icon-cpu"></i><input type="text" placeholder="请输入验证码" 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: '获取验证码',code: '',rules: {phone: {rule: '/^1[23456789]\d{9}$/',meg: '手机的格式不对'}}};},methods: {sendCode() {if (this.phone == '') {uni.showToast({title: '手机号不能为空',icon: 'none'});} else if (this.phone != '') {var reg = /^1[3456789]\d{9}$/;if (!reg.test(this.phone)) {uni.showToast({title: '输入有效的手机号',icon: 'none'});} else {//禁用按钮this.disabled = true;//发送请求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;}}});//倒计时let timer = setInterval(() => {--this.codeNum;this.codeMsg = `重新发送 ${this.codeNum}`;}, 1000);//判断定时器停止setTimeout(() => {clearInterval(timer);(this.disabled = false), (this.codeMsg = '获取验证码'), (this.codeNum = 10);}, 10000);}}},//登录login() {if (this.code == '' || this.phone == '') {uni.showToast({title: '手机号不能为空',icon: 'none'});} else if (this.userCode == this.code) {//验证码正确uni.request({url: '/api/login/addUser',method: 'POST',data: {phone: this.phone},success: res => {//code 200 注册成功if (res.data.code == 200) {uni.showToast({title: res.data.data.msg,icon: 'none'});//给vuex添加数据this.$store.commit('userLogin', res.data.data.data);//路由跳转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>
