当前位置: 首页 > 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详解 缺点劣势深入比较 前言…...

测试微信模版消息推送

进入“开发接口管理”--“公众平台测试账号”&#xff0c;无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息&#xff1a; 关注测试号&#xff1a;扫二维码关注测试号。 发送模版消息&#xff1a; import requests da…...

Zustand 状态管理库:极简而强大的解决方案

Zustand 是一个轻量级、快速和可扩展的状态管理库&#xff0c;特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...

day52 ResNet18 CBAM

在深度学习的旅程中&#xff0c;我们不断探索如何提升模型的性能。今天&#xff0c;我将分享我在 ResNet18 模型中插入 CBAM&#xff08;Convolutional Block Attention Module&#xff09;模块&#xff0c;并采用分阶段微调策略的实践过程。通过这个过程&#xff0c;我不仅提升…...

SCAU期末笔记 - 数据分析与数据挖掘题库解析

这门怎么题库答案不全啊日 来简单学一下子来 一、选择题&#xff08;可多选&#xff09; 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘&#xff1a;专注于发现数据中…...

聊聊 Pulsar:Producer 源码解析

一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台&#xff0c;以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中&#xff0c;Producer&#xff08;生产者&#xff09; 是连接客户端应用与消息队列的第一步。生产者…...

ESP32 I2S音频总线学习笔记(四): INMP441采集音频并实时播放

简介 前面两期文章我们介绍了I2S的读取和写入&#xff0c;一个是通过INMP441麦克风模块采集音频&#xff0c;一个是通过PCM5102A模块播放音频&#xff0c;那如果我们将两者结合起来&#xff0c;将麦克风采集到的音频通过PCM5102A播放&#xff0c;是不是就可以做一个扩音器了呢…...

Spring Boot面试题精选汇总

&#x1f91f;致敬读者 &#x1f7e9;感谢阅读&#x1f7e6;笑口常开&#x1f7ea;生日快乐⬛早点睡觉 &#x1f4d8;博主相关 &#x1f7e7;博主信息&#x1f7e8;博客首页&#x1f7eb;专栏推荐&#x1f7e5;活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...

VTK如何让部分单位不可见

最近遇到一个需求&#xff0c;需要让一个vtkDataSet中的部分单元不可见&#xff0c;查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行&#xff0c;是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示&#xff0c;主要是最后一个参数&#xff0c;透明度…...

Java入门学习详细版(一)

大家好&#xff0c;Java 学习是一个系统学习的过程&#xff0c;核心原则就是“理论 实践 坚持”&#xff0c;并且需循序渐进&#xff0c;不可过于着急&#xff0c;本篇文章推出的这份详细入门学习资料将带大家从零基础开始&#xff0c;逐步掌握 Java 的核心概念和编程技能。 …...

MySQL中【正则表达式】用法

MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现&#xff08;两者等价&#xff09;&#xff0c;用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例&#xff1a; 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...