uniapp--登录和注册页面-- login

目录

1.效果展示

2.源代码展示

测试登录 login.js

 测试请求 request.js

测试首页index.js

1.效果展示

          

2.源代码展示

<template><view><f-navbar title="登录" navbarType="4"></f-navbar><view class="tips"><view class="title">欢迎{{ isLogin ? '登录' : '注册'}}{{ title }}</view><view class="sub-title" style="">便捷高效管理学生信息</view></view><u-form :model="userInfo"><view class="container-input"><u-form-item><input placeholder="请输入账号" v-model="userInfo.username" placeholderStyle="color: #c0c4cc" style="height: 25px;"></input></u-form-item></view><view class="container-input" style="margin-top: 40rpx;"><view class="eye-input" style="padding: 10px 0;"><input :password="pwdOpen" placeholder="请输入密码" v-model="userInfo.password" placeholderStyle="color: #c0c4cc" style="height: 25px;padding-right: 64rpx;width: 100%;"></input><view class="eye-image"><image v-if="!eyeOpen && userInfo.password" src="../../static/login/eye_close.png" mode="aspectFill" @click="tabEyeClose"></image><image v-if="eyeOpen && userInfo.password" src="../../static/login/eye_open.png" mode="aspectFill" @click="tabEyeOpen"></image></view></view></view></u-form><view class="agree-list"><view :class="[radioShow ? 'agree-radio-active' : 'agree-radio']" @click="agree"></view><view class="agree-title">我已阅读并同意<text style="font-size: 26rpx;color: #428AF6;" @click="agreement">《用户协议》</text>以及<text style="font-size: 26rpx;color: #428AF6;" @click="privacy">《隐私政策》</text></view></view><view v-if="isLogin" class="container-bth" @click="login">登录</view><view v-if="!isLogin" class="container-bth" @click="register">注册</view><view class="flex-between" :style="{justifyContent: isLogin ? '' : 'flex-end'}" style="margin: 32rpx 40rpx 0 40rpx;"><view class="forget-pwd" @click="checkBtn">{{ !isLogin ? '立即登录?' : '立即注册?'}}</view><view v-if="isLogin" class="forget-pwd" @click="forget">忘记密码?</view></view></view>
</template><script>
import { accountLoginStudent } from "@/api/login/login.js"export default {data() {return {isLogin: true,radioShow: true, //默认勾上title: 'XXXX',eyeOpen: false,pwdOpen: true,userInfo: {username: '',password: ''}}},methods: {// 注册register() {if(!this.radioShow) {this.$tools.toast('用户协议和隐私政策未勾选')}else if(!this.userInfo.username) {this.$tools.toast('请填写账号')}else if(!this.userInfo.password) {this.$tools.toast('请输入密码')}else {this.isLogin = truethis.userInfo.password = ''this.userInfo.username = ''setTimeout(() => {this.$tools.toast('注册成功')},500)// accountLoginStudent(this.userInfo).then((res) => {// 	console.log('res: ',res);//     if (res.code === 200) {//         let token = res.data.token//         uni.setStorageSync('token', token)// 		uni.switchTab({// 		    url: '/pages/index/index'// 		})// 		setTimeout(() => {// 			this.$tools.toast('登录成功')// 		},500)//     }// })}},// 登录login() {if(!this.radioShow) {this.$tools.toast('用户协议和隐私政策未勾选')}else if(!this.userInfo.username) {this.$tools.toast('请填写账号')}else if(!this.userInfo.password) {this.$tools.toast('请输入密码')}else {let token = 'token123'uni.setStorageSync('token', token)uni.switchTab({url: '/pages/index/index'})setTimeout(() => {this.$tools.toast('登录成功')},500)// accountLoginStudent(this.userInfo).then((res) => {// 	console.log('res: ',res);//     if (res.code === 200) {//         let token = res.data.token//         uni.setStorageSync('token', token)// 		uni.switchTab({// 		    url: '/pages/index/index'// 		})// 		setTimeout(() => {// 			this.$tools.toast('登录成功')// 		},500)//     }// })}},checkBtn() {this.isLogin = !this.isLoginthis.userInfo.username = ''this.userInfo.password = ''this.eyeOpen = falsethis.pwdOpen = true},tabEyeClose(){this.eyeOpen = truethis.pwdOpen = false},tabEyeOpen(){this.eyeOpen = falsethis.pwdOpen = true},agree() {this.radioShow = !this.radioShow},//忘记密码forget() {uni.navigateTo({url: `/pagesHome/editPassword/editPassword`})},// 用户协议agreement() {this.$tools.toast('用户协议')},// 隐私政策privacy() {this.$tools.toast('隐私政策')}}
}
</script><style>page {background: linear-gradient(270deg, #E1ECFE 0%, #DDFCFF 100%);}
</style><style lang="scss" scoped>.tips {margin: 110rpx 0 100rpx 0;width: 100%;text-align: center;.title {font-size: 40rpx;font-family: PingFang SC, PingFang SC;font-weight: bold;letter-spacing: 2rpx;color: #26344D;}.sub-title {font-size: 28rpx;font-family: PingFang SC, PingFang SC;letter-spacing: 2rpx;color: #26344D;margin-top: 10rpx;}}.container-input {margin: 0 40rpx;background-color: #fff;border-radius: 16rpx;padding-left: 32rpx;padding-right: 32rpx;.eye-input {width: 100%;position: relative;display: flex;justify-content: space-between;align-items: center;.eye-image {position: absolute;right: 0;width: 30rpx;height: 30rpx;margin-left: 20rpx;flex-shrink: 0;image{width: 100%;height: 100%;}}}}.agree-list {margin: 16px 0 0 20px;display: flex;.agree-radio {width: 26rpx;height: 26rpx;border-radius: 50%;border: 1px solid #999;}.agree-radio-active {position: relative;width: 26rpx;height: 26rpx;border-radius: 50%;border: 1px solid transparent;background-color: #428AF6;}.agree-radio-active::after {position: absolute;content: '';left: 8rpx;width: 6rpx;height: 14rpx;top: 50%;transform: translateY(-60%) rotate(38deg);border: 4rpx solid #fff;border-width: 0 4rpx 4rpx 0;}.agree-title {margin-left: 10rpx;font-size: 26rpx;color: #333;}}.container-bth {margin: 0 40rpx;border-radius: 16rpx;height: 88rpx;background-color: #5990F5;margin-top: 60rpx;text-align: center;color: #fff;font-size: 32rpx;line-height: 88rpx;letter-spacing: 2rpx;}.forget-pwd {display: flex;align-items: center;justify-content: flex-end;font-size: 28rpx;font-family: MiSans-Regular, MiSans;color: #5990F5;}
</style>
测试登录 login.js
import api from '@/common/request.js'// 登录
export const accountLoginStudent = (data) => {return api({url: '/app/login/accountLoginStudent',method: 'POST',data})
}
 测试请求 request.js
import config from '@/config/index.js'const request = (options) => {uni.showLoading({title: '加载中',mask: true,icon: 'loading'});return new Promise((resolve, reject) => {uni.request({url: config.baseUrl + options.url,method: options.method || "GET",data: options.data || {},header: {'content-type': 'application/json','like-admin': uni.getStorageSync('token'),terminal: 1},success: (res) => {uni.hideLoading()if (res.data.code == 333) {uni.navigateTo({url: '/pages/login/login'})uni.showToast({title: "您还未登陆 ，请登录",icon: 'none',duration: 2000})} else if (res.data.code == 200) {} else if (res.data.code == 332) {uni.removeStorageSync('token')uni.removeStorageSync('userinfo')uni.removeStorageSync('userId')// uni.clearStorageSync()uni.navigateTo({url: '/pages/login/login'})uni.showToast({title: "登录过期，请重新登陆",icon: 'none',duration: 2000})} else {setTimeout(() => {uni.showToast({title: res.data.msg,icon: 'none',duration: 2000})}, 0)}resolve(res.data)},fail: (error) => {uni.hideLoading()reject(error)// console.log(error);setTimeout(() => {uni.showToast({title: '请求异常',icon: 'none',duration: 1500})}, 500)},complete() {uni.hideLoading()}})})
}export default request
测试首页index.js

import api from '@/common/request.js'

直接使用即可，可以根据自己的需求修改样式！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/625432.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

初识--Linux的虚拟地址空间

初识--Linux的虚拟地址空间

重新了解地址空间 在学习c/c语言的时候,大家一定见过以下这张图 说的是程序会加载在如图的结构上,实际上,我们真的对他很了解吗,而在Linux进程控制这,就会有一个奇怪的现象 前提提要:简要介绍一下fork函数 进程内核数据结构(PCB)自己的代码以及数据 在Linux中,fork可以从当…
阅读更多...
Sy-linux下常用的网络命令linux network commands

Sy-linux下常用的网络命令linux network commands

linux下的网络命令非常强大&#xff0c;这里根据教材需要&#xff0c;列出来常用的网络命令和场景实例&#xff0c;供参考。 一、命令列表&#xff1a; Command Description ip Manipulating routing to assigning and configuring network parameters traceroute Identi…
阅读更多...
RabbitMQ Stream插件使用详解

RabbitMQ Stream插件使用详解

2.4版为RabbitMQ流插件引入了对RabbitMQStream插件Java客户端的初始支持。 RabbitStreamTemplateStreamListener容器 将spring rabbit流依赖项添加到项目中&#xff1a; <dependency><groupId>org.springframework.amqp</groupId><artifactId>sprin…
阅读更多...
Java工程师常见面试题：Java基础（一）

Java工程师常见面试题：Java基础（一）

1、JDK 和 JRE 有什么区别&#xff1f; JDK是Java开发工具包&#xff0c;它包含了JRE和开发工具&#xff08;如javac编译器和java程序运行工具等&#xff09;&#xff0c;主要用于Java程序的开发。而JRE是Java运行环境&#xff0c;它只包含了运行Java程序所必须的环境&#xf…
阅读更多...
Java springboot使用EasyExcel读Excel文件，映射不到属性值，对象属性值都是null

Java springboot使用EasyExcel读Excel文件，映射不到属性值，对象属性值都是null

如果你的类上有这个注解&#xff0c;去掉火或注释掉就可以了 Accessors(chain true)解决方法
阅读更多...
vue 常用的日历排班，带农历显示组件（2024-04-16）

vue 常用的日历排班，带农历显示组件（2024-04-16）

显示当前月日历组件&#xff0c;里面带农历或节日显示 后面可以丰富一些国家法定节假期的业务需求 代码 js-calendar.js 文件 var lunarInfo [0x04bd8, 0x04ae0, 0x0a570, 0x054d5, 0x0d260, 0x0d950, 0x16554, 0x056a0, 0x09ad0, 0x055d2, //1900-19090x04ae0, 0x0a5b6, 0…
阅读更多...
【大数据】分布式文件系统HDFS

【大数据】分布式文件系统HDFS

目录 1.什么是分布式文件系统 2.HDFS的特点 3.HDFS的核心概念 4.HDFS的体系结构 5.HDFS的配置建议 6.HDFS的局限性 7.HDFS的存储机制 7.1.数据冗余机制 7.2.错误与恢复 8.HDFS数据读写过程 1.什么是分布式文件系统 分布式文件系统是整个大数据技术的基础&#xff0c…
阅读更多...
常用序号、标点符号 相关正则表达式

常用序号、标点符号 相关正则表达式

(?:[\(|&#xff08;|\[])?\d[\]|\)&#xff09;|\、]|[\u2460-\u2473]|[\u4e00-\u5341][.|、]匹配序号 \d\.(?!\d)|\d、常规序号匹配&#xff1a; rule1: 标准格式1. 2、 rule2:排除小数 [^\u4E00-\u9FA5\uFF00-\uFFEFa-zA-Z0-9\s]所有符号 [\u3000-\u303F\uFF00-\uFFE…
阅读更多...
STM32 软件I2C方式读取MT6701磁编码器获取角度例程

STM32 软件I2C方式读取MT6701磁编码器获取角度例程

STM32 软件I2C方式读取MT6701磁编码器获取角度例程 &#x1f4cd;相关篇《STM32 软件I2C方式读取AS5600磁编码器获取角度例程》&#x1f33f;《Arduino通过I2C驱动MT6701磁编码器并读取角度数据》&#x1f530;MT6701芯片和AS5600从软件读取对比&#xff0c;只是读取的寄存器和…
阅读更多...
LeetCode 409—— 最长回文串

LeetCode 409—— 最长回文串

阅读目录 1. 题目2. 解题思路3. 代码实现 1. 题目 2. 解题思路 要想组成回文串&#xff0c;那么只有最中间的字符可以是奇数个&#xff0c;其余字符都必须是偶数个。 所以&#xff0c;我们先遍历一遍字符串&#xff0c;统计出每个字符出现的次数。 然后如果某个字符出现了偶…
阅读更多...
xcode c++项目设置运行时参数

xcode c++项目设置运行时参数

在 Xcode 项目中&#xff0c;你可以通过配置 scheme 来指定在运行时传递的参数。以下是在 Xcode 中设置运行时参数的步骤&#xff1a; 打开 Xcode&#xff0c;并打开你的项目。在 Xcode 菜单栏中&#xff0c;选择 "Product" -> "Scheme" -> "E…
阅读更多...
滤波器笔记（杂乱）

滤波器笔记（杂乱）

线性相位是时间平移&#xff0c;相位不失真 零、基础知识 1、用相量表示正弦量 https://zhuanlan.zhihu.com/p/345546880 https://www.zhihu.com/question/347763932/answer/1103938667 A s i n ( ω t θ ) ⇔ A e j θ ⇔ A ∠ θ Asin(\omega t\theta) {\Leftrightarrow…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023