当前位置: 首页 > news >正文

uniapp页面里面的登录注册模板

<!-- 账号密码登录页 -->
<template><view class="page"><view class="uni-content"><view class="login-logo"><image :src="logo"></image></view><text class="title title-box">账号密码登录</text><uni-forms><uni-forms-item name="username"><uni-easyinput :focus="focusUsername" @blur="focusUsername = false" class="input-box":inputBorder="false" v-model="username" placeholder="请输入手机号/用户名/邮箱" /></uni-forms-item><uni-forms-item name="password"><uni-easyinput :focus="focusPassword" @blur="focusPassword = false" class="input-box" clearabletype="password" :inputBorder="false" v-model="password" placeholder="请输入密码" /></uni-forms-item></uni-forms><uni-captcha v-if="needCaptcha" focus ref="captcha" scene="login-by-pwd" v-model="captcha" /><uni-id-pages-agreements scope="login" ref="agreements"></uni-id-pages-agreements><button class="uni-btn" type="primary" @click="pwdLogin">登录</button><view class="link-box"><view v-if="!config.isAdmin"><text class="forget">忘记了?</text><text class="link" @click="toRetrievePwd">找回密码</text></view><text class="link" @click="toRegister">{{config.isAdmin ? '注册管理员账号': '注册账号'}}</text><text class="link" @click="toRegister" v-if="config.isAdmin">注册账号</text></view></view><uni-id-pages-fab-login ref="uniFabLogin"></uni-id-pages-fab-login></view>
</template><script>import mixin from '@/uni_modules/uni-id-pages/common/login-page.mixin.js';const uniIdCo = uniCloud.importObject("uni-id-co", {errorOptions: {type: 'toast'}})export default {mixins: [mixin],data() {return {"password": "","username": "","captcha": "","needCaptcha": false,"focusUsername": false,"focusPassword": false,"logo": "/static/logo.png"}},onShow() {// #ifdef H5document.onkeydown = event => {var e = event || window.event;if (e && e.keyCode == 13) { //回车键的键值为13this.pwdLogin()}};// #endif},methods: {// 页面跳转,找回密码toRetrievePwd() {let url = '/uni_modules/uni-id-pages/pages/retrieve/retrieve'//如果刚好用户名输入框的值为手机号码,就把它传到retrieve页面,根据该手机号找回密码if (/^1\d{10}$/.test(this.username)) {url += `?phoneNumber=${this.username}`}uni.navigateTo({url})},/*** 密码登录*/pwdLogin() {if (!this.password.length) {this.focusPassword = truereturn uni.showToast({title: '请输入密码',icon: 'none',duration: 3000});}if (!this.username.length) {this.focusUsername = truereturn uni.showToast({title: '请输入手机号/用户名/邮箱',icon: 'none',duration: 3000});}if (this.needCaptcha && this.captcha.length != 4) {this.$refs.captcha.getImageCaptcha()return uni.showToast({title: '请输入验证码',icon: 'none',duration: 3000});}if (this.needAgreements && !this.agree) {return this.$refs.agreements.popup(this.pwdLogin)}let data = {"password": this.password,"captcha": this.captcha}if (/^1\d{10}$/.test(this.username)) {data.mobile = this.username} else if (/@/.test(this.username)) {data.email = this.username} else {data.username = this.username}uniIdCo.login(data).then(e => {this.loginSuccess(e)}).catch(e => {if (e.errCode == 'uni-id-captcha-required') {this.needCaptcha = true} else if (this.needCaptcha) {//登录失败,自动重新获取验证码this.$refs.captcha.getImageCaptcha()}})},/* 前往注册 */toRegister() {uni.navigateTo({// url: this.config.isAdmin ? '/uni_modules/uni-id-pages/pages/register/register-admin' :// 	'/uni_modules/uni-id-pages/pages/register/register',url: '/uni_modules/uni-id-pages/pages/register/register',fail(e) {console.error(e);}})}}}
</script><style lang="scss" scoped>@import "@/uni_modules/uni-id-pages/common/login-page.scss";@media screen and (min-width: 690px) {.uni-content {height: auto;}}.forget {font-size: 12px;color: #8a8f8b;}.link-box {/* #ifndef APP-NVUE */display: flex;/* #endif */flex-direction: row;justify-content: space-between;margin-top: 20px;}.link {font-size: 12px;}
</style>

相关文章:

uniapp页面里面的登录注册模板

<!-- 账号密码登录页 --> <template><view class"page"><view class"uni-content"><view class"login-logo"><image :src"logo"></image></view><text class"title title-bo…...

C++新手入门学习教程(完整版)

以下教程覆盖了 C 学习的各个方面&#xff0c;适合初学者循序渐进地学习。学习过程中&#xff0c;建议初学者多做练习和项目&#xff0c;以加深对理论知识的理解。希望这个教程能为你提供一个清晰的学习路径。 目录 第一章&#xff1a;C 简介 1.1 C 的历史与演变 1.2 C 的特…...

Python 爬虫入门(六):urllib库的使用方法

Python 爬虫入门&#xff08;六&#xff09;&#xff1a;urllib库的使用方法 前言1. urllib 概述2. urllib.request 模块2.1 发送GET请求2.2 发送POST请求2.3 添加headers2.4 处理异常 3. urllib.error 模块4. urllib.parse 模块4.1 URL解析4.2 URL编码和解码4.3 拼接URL 5. ur…...

个人开发神器,一应俱全,有你想要的!

哈喽&#xff0c;各位小伙伴们好&#xff0c;我是给大家带来各类黑科技与前沿资讯的小武。 经常有很多小伙伴问小武&#xff0c;是从哪里获取到这么多资源&#xff0c;其实除了熟知的吾爱、酷安等知名论坛集聚地&#xff0c;还有一些强大的资源聚合类软件也非常重要。 如之前安…...

电子电气架构 --- SOVD在域控制器的应用

我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 屏蔽力是信息过载时代一个人的特殊竞争力,任何消耗你的人和事,多看一眼都是你的不对。非必要不费力证明自己,无利益不试图说服别人,是精神上的节…...

React(四):DOCX文件在线预览

效果 注意 ⚠️注意&#xff1a;部分文件预览存在问题 依赖 $ yarn add docx-preview $ yarn add jszip源码 import ./index.scss; import {useRef} from react; import type {UploadRequestOption} from rc-upload/lib/interface; import {Upload, Button, message} from an…...

Java IO.字符集,流,缓冲流 转换流 对象操作流

一.字符集 如果使用字节流 , 把文本文件中的内容读取到内存时, 可能会出现乱码 如果使用字节流 , 把中文写入文本文件中 , 也有可能会出现乱码 读取n.txt"你好" 两个汉字 字节流读中文&#xff0c;每次只能读一部分所以出现了乱码 字符集&#xff08;Character se…...

线性稳压器的内部电路与构成分析

线性稳压器的一般的引脚构成 线性稳压器基本上由VIN &#xff08;输入&#xff09;、VO &#xff08;输出&#xff09;、GND &#xff08;接地&#xff09;三个引脚构成。在输出可变的线性稳压器上添加了用于反馈输出电压的FB&#xff08;反馈引脚&#xff09;。 简单来说&am…...

Go语言实现多协程文件下载器

文章目录 前言流程图主函数下载文件初始化分片下载worker分发下载任务获取下载文件的大小下载文件分片错误重试项目演示最后 前言 你好&#xff0c;我是醉墨居士&#xff0c;最近在开发文件传输相关的项目&#xff0c;然后顺手写了一个多协程文件下载器&#xff0c;代码非常精…...

本地方法详解

本地方法&#xff08;Native Methods&#xff09;是指那些由Java程序调用&#xff0c;但其实现是用非Java语言&#xff08;如C、C等&#xff09;编写的方法。它们通常用于访问操作系统底层的功能或进行高效的计算&#xff0c;这些是Java本身不能直接实现的。下面详细解释本地方…...

每日新闻掌握【2024年8月3日 星期六】

2024年8月3日 星期六 农历六月廿九 大公司/大事件 微信地震预警全国上线 36氪获悉&#xff0c;国家地震烈度速报与预警工程已于7月25日正式通过国家验收。8月2日&#xff0c;在中国地震局指导下&#xff0c;中国地震台网中心、中央广播电视总台国家应急广播与腾讯联合推出“中…...

python入门基础篇(一)

基础篇 Python基础安装与配置Python环境理解Python解释器第一个Python程序&#xff1a;"Hello, World!" 基础语法注释与文档字符串变量与数据类型数字类型&#xff1a;整数、浮点数、复数字符串布尔值None值 运算符算术运算符比较运算符逻辑运算符赋值运算符位运算符…...

windows下在线预览服务kkFileView4.4.0问题记录

前几天找到一个开源项目&#xff1a;kkFileView&#xff0c;感觉可能以后可能会用到&#xff0c;所以尝试了下。 通过git下载下来&#xff0c;版本是4.4.0&#xff0c;通过idea打开项目&#xff0c;发现老是无法找到组件aspose-cad&#xff0c;版本是23.9. 找了好多文章&#x…...

Java:通过反射获取class类的属性

有如下一个普通类&#xff0c;我想获取他的所有属性值 package com.demo.bean;import lombok.Data;import java.util.List;Data public class UserBean {private String name;private Integer age;private List<String> tags; }可以通过反射的方式获取属性值 package c…...

07.FreeRTOS列表与列表项

文章目录 07. FreeRTOS列表与列表项1. 列表和列表项的简介2. 列表相关API函数3. 代码验证 07. FreeRTOS列表与列表项 1. 列表和列表项的简介 列表的定义&#xff1a; typedef struct xLIST {listFIRST_LIST_INTEGRITY_CHECK_VALUE /* 校验值 */volatile UBaseType_t uxN…...

餐饮业油烟净化器安装势在必行,切勿侥幸

我最近分析了餐饮市场的油烟净化器等产品报告&#xff0c;解决了餐饮业厨房油腻的难题&#xff0c;更加方便了在餐饮业和商业场所有需求的小伙伴们。 随着环保法规的日益严格和公众环保意识的提升&#xff0c;餐饮业油烟排放问题成为社会关注的焦点。油烟不仅影响环境质量&am…...

SpringBoot集成阿里百炼大模型 原子的学习日记Day01

文章目录 概要下一章SpringBoot集成阿里百炼大模型&#xff08;多轮对话&#xff09; 原子的学习日记Day02 整体架构流程技术名词解释集成步骤1&#xff0c;选择大模型以及获取自己的api-key&#xff08;前面还有一步开通服务就没有展示啦&#xff01;&#xff09;2&#xff0c…...

【网络编程】网络原理(一)

系列文章目录 1、 初识网络 2、网络编程的基础使用&#xff08;一&#xff09; 文章目录 系列文章目录前言一、端口号的使用二、UDP报文学习1.报文格式2.MD5算法 总结 前言 在前文中&#xff0c;主要对UDP和TCP协议有了简单的了解&#xff0c;而这两种协议是负责传输层的内容…...

鲁班上门维修安装系统源码开发之功能模式

鲁班上门维修安装系统在当今的趋势呈现出显著的增长与创新。随着物联网、智能家居的普及&#xff0c;以及消费者对便捷、高效生活方式的追求&#xff0c;鲁班上门维修安装系统凭借其多渠道预约、智能派单、在线支付与费用明细透明等优势&#xff0c;赢得了市场的广泛认可。 …...

图数据处理的新时代:阿里FraphCompute与蚂蚁金服TuGraph对比综述

目录 前言 阿里FraphCompute与蚂蚁金服TuGraph的主要特性和功能的比较&#xff1a; 阿里FraphCompute与蚂蚁金服TuGraph在不同应用场景分析对比&#xff1a; 阿里FraphCompute与蚂蚁金服TuGraph未来趋势的对比&#xff1a; FraphCompute与TuGraph详解 缺点劣势深入比较 前言…...

Mybatis逆向工程,动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件

今天呢&#xff0c;博主的学习进度也是步入了Java Mybatis 框架&#xff0c;目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学&#xff0c;希望能对大家有所帮助&#xff0c;也特别欢迎大家指点不足之处&#xff0c;小生很乐意接受正确的建议&…...

1.3 VSCode安装与环境配置

进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件&#xff0c;然后打开终端&#xff0c;进入下载文件夹&#xff0c;键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...

华为OD机试-食堂供餐-二分法

import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...

苍穹外卖--缓存菜品

1.问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得&#xff0c;如果用户端访问量比较大&#xff0c;数据库访问压力随之增大 2.实现思路 通过Redis来缓存菜品数据&#xff0c;减少数据库查询操作。 缓存逻辑分析&#xff1a; ①每个分类下的菜品保持一份缓存数据…...

【JavaSE】绘图与事件入门学习笔记

-Java绘图坐标体系 坐标体系-介绍 坐标原点位于左上角&#xff0c;以像素为单位。 在Java坐标系中,第一个是x坐标,表示当前位置为水平方向&#xff0c;距离坐标原点x个像素;第二个是y坐标&#xff0c;表示当前位置为垂直方向&#xff0c;距离坐标原点y个像素。 坐标体系-像素 …...

全面解析各类VPN技术:GRE、IPsec、L2TP、SSL与MPLS VPN对比

目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec&#xff1f; IPsec VPN 5.1 IPsec传输模式&#xff08;Transport Mode&#xff09; 5.2 IPsec隧道模式&#xff08;Tunne…...

Android 之 kotlin 语言学习笔记三(Kotlin-Java 互操作)

参考官方文档&#xff1a;https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java&#xff08;供 Kotlin 使用&#xff09; 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...

使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台

🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型(LLM)的广泛应用,开发者常面临多个挑战: 各大模型(OpenAI、Claude、Gemini、Ollama)接口风格不统一;缺乏一个统一平台进行模型调用与测试;本地模型 Ollama 的集成与前…...

GruntJS-前端自动化任务运行器从入门到实战

Grunt 完全指南&#xff1a;从入门到实战 一、Grunt 是什么&#xff1f; Grunt是一个基于 Node.js 的前端自动化任务运行器&#xff0c;主要用于自动化执行项目开发中重复性高的任务&#xff0c;例如文件压缩、代码编译、语法检查、单元测试、文件合并等。通过配置简洁的任务…...

20个超级好用的 CSS 动画库

分享 20 个最佳 CSS 动画库。 它们中的大多数将生成纯 CSS 代码&#xff0c;而不需要任何外部库。 1.Animate.css 一个开箱即用型的跨浏览器动画库&#xff0c;可供你在项目中使用。 2.Magic Animations CSS3 一组简单的动画&#xff0c;可以包含在你的网页或应用项目中。 3.An…...