微信小程序的微信一键登录与验证码登录

news2024/11/27 2:43:55

验证码登录

<template>
	<view class="wx-login">
		<view class="login-Box">
			<text class="title">
				欢迎登录
			</text>
			<text class="subTitle">
				再就业男团系统
			</text>
			<view class="login-Form">
				<text>手机号码</text>
				<input v-model="formData.phone" :auto-height="true" placeholder="请输入手机号码" class="login-Form-value"
					confirm-type="done" />
			</view>
			<view class="login-Form">
				<text>验证码</text>
				<input v-model="formData.code" :auto-height="true" placeholder="请输入验证码" class="login-Form-value"
					confirm-type="done" />
				<button @click="getSysCode" :disabled="isGet" class="getCode"
					:class="{'sendCode':(isGet === true)}">{{ isGet ? "重新发送"+(num) : "获取验证码" }}</button>
			</view>
			<view class="loginBtn" @click="submit">
				登录
			</view>
			<view class="forgetPassword" @click="empowerFn">微信一键登录</view>
		</view>
	</view>
</template>

<script>
	import {
		getWXLoginCode
	} from "../../utils/wxTool.js"
	import {
		getWXTestPhone,
		getWXCode,
		updateWXPassword,
		getWXPhoneLogin
	} from "../../api/login.js"
	import {
		showToast
	} from "../../utils/common.js"

	export default {
		name: "WxLogin",
		data() {
			return {
				formData: {
					phone: '',
					code: '',
				},
				isGet: false,
				timer: "",
				num: 60,
			}
		},
		watch: {
			num(newValue) {
				if (newValue == 0) {
					this.num = 60;
					clearInterval(this.timer);
					this.isGet = false;
				}
			},
		},
		mounted() {},
		methods: {
			// 取消登录
			cancelLogin() {
				uni.navigateBack({
			
				});
			},
			// onShow: function () {
			// 	wx.hideHomeButton();			
			// },
			//
			getSysCode() {
				if(!this.formData.phone){
					showToast('请输入手机号');
					return
				}

				getWXCode({
					phone: this.formData.phone,
					type:1,
				}).then(res => {
					if (res.code == 0) {
						showToast(res.msg);
						this.isGet = true;
						this.timer = setInterval(() => {
							this.num--;
						}, 1000);
					}
				})
			},
			
			// 登录
			submit() {
				if(!this.formData.phone){
					showToast('请输入手机号');
					return
				}
				if(!this.formData.code){
					showToast('请获取验证码');
					return
				}
			getWXPhoneLogin({
					phone: this.formData.phone,
					code: this.formData.code,
				}).then(res => {
					console.log(res,'resuuuu')
					if(res) {
						const {
							tokenInfo,
							name,
							userId,
							enterpriseName,
							phone,
							type,
							enterpriseType,
							enterpriseId
						} = res;
						// console.log(phone,'phone');
						this.$store.commit("login/setUserToken", tokenInfo.tokenValue);
						// this.$store.commit("login/setUserName", name);
						this.$store.commit("login/setPhone", phone);
						this.$store.commit("login/setenterpriseType", enterpriseType);
						this.$store.commit("login/setenterpriseId", enterpriseId);
						
						this.$store.commit("login/setUserDetail", {
							...res
						});
						this.$store.commit("login/setUserID", userId)
						
						if(type == 2 && !enterpriseId){
							showToast('当前账号正在审核中,审核通过后才可登陆')
						}else{
							uni.switchTab({
								url: "../home/home"
							})
						}

					}
					console.log(5555)
				}).catch(err => {
					console.log(err)
				})

			},
			empowerFn(){
				uni.reLaunch({
					url: '/pages/login/wxLogin'
				})
			}
		}

	}
</script>

<style lang="scss" scoped>
	@import "@/static/css/variable.scss";

	.wx-login {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		box-sizing: border-box;
		height: 100vh;
		background-image: url(../../static/img/mescroll/loginBG.png);
		background-size: 100% 100%;
	}

	.login-Box {
		width: 606rpx;
		margin-top: 249rpx;
		display: flex;
		flex-direction: column;

		.title {
			font-size: 48rpx;
			font-weight: 700;
			line-height: 56rpx;
			color: #282F38;
		}

		.subTitle {
			font-size: 28rpx;
			font-weight: 400;
			line-height: 41rpx;
			color: #282F38;
			margin-top: 8rpx;
		}

		.login-Form {
			font-size: 28rpx;
			font-weight: 400;
			letter-spacing: 0px;
			line-height: 40rpx;
			color: #282F38;
			margin-top: 40rpx;
			position: relative;

			&-value {
				margin-top: 36rpx;
				padding: 0 0 16rpx 6rpx;
				width: 100%;
				display: flex;
				border-bottom: 1px solid #E5E6EB;
			}

			.getCode {
				width: 102px;
				height: 32px;
				line-height: 32px;
				// border-radius: 20px;
				background: rgba(0, 122, 255, 1);
				font-size: 14px;
				color: rgba(255, 255, 255, 1);
				position: absolute;
				top: 55rpx;
				right: 0;
			}

			.sendCode {
				width: 106px !important;
				height: 32px;
				line-height: 32px;
				background: rgba(232, 243, 255, 1) !important;
				color: rgba(148, 191, 255, 1) !important;
				border: 1px solid transparent !important;
				box-sizing: border-box;
			}
		}

		.loginBtn {
			margin-top: 144rpx;
			border-radius: 328rpx;
			background-color: #166DF1;
			width: 100%;
			height: 88rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			font-size: 32rpx;
			font-weight: 400;
		}

		.forgetPassword {
			font-size: 12px;
			font-weight: 400;
			letter-spacing: 0px;
			line-height: 22px;
			color: rgba(134, 144, 156, 1);
			text-align: center;
			vertical-align: top;
			margin-top: 28px;
		}
	}
</style>




在这里插入图片描述

微信一键登录

<template>
	<view class="wx-login">
		<view class="login-Box">
			<view class="img">
				<image src="../../static/img/icons/logowx.png" style="width: 100px;height: 100px;		"></image>
			</view>
			<view class="subTitle">再就业男团系统</view>
			<view class="subTitle">登录前需要您的授权</view>
			<view class="title" style="margin-top:48rpx">再就业男团系统不会将您的</view>
			<view class="title">个人信息提供给第三方仅用于该小程序!</view>
			<button class="loginBtn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">手机号快捷登录</button>
			<view class="forgetPassword" @click="login">手机验证码登录</view>

		</view>
	</view>
</template>

<script>
	import {
		getWXLoginCode
	} from "../../utils/wxTool.js"
	import {
		getWXLoginToken
	} from "../../api/login.js"
	import {
		showToast
	} from "../../utils/common.js"
	import {
		getWXLogin
	} from "../../api/login.js"
	export default {
		name: "WxLogin",
		data() {
			return {
				formData: {
					loginName: '',
					password: ''
				}
			}
		},
		mounted() {},
		methods: {
			onShow: function () {
				wx.hideHomeButton();			
			},
			// 登录
			async getPhoneNumber(e) {
				
					// uni.showLoading({title:"登录中....",mask:true})
					let code= e.detail.code;
					getWXLogin({
						code:code
					}).then(res=>{
						console.log(res,'res')
						if(res.code == 0) {
							const {
								tokenInfo,
								name,
								userId,
								enterpriseName,
								phone,
								type,
								enterpriseType,
								enterpriseId
							} = res.data;
							// console.log(phone,'phone');
							this.$store.commit("login/setUserToken", tokenInfo.tokenValue);
							// this.$store.commit("login/setUserName", name);
							this.$store.commit("login/setPhone", phone);
							this.$store.commit("login/setenterpriseType", enterpriseType);
							this.$store.commit("login/setenterpriseId", enterpriseId);
							
							this.$store.commit("login/setUserDetail", {
								...res
							});
							this.$store.commit("login/setUserID", userId)
							if(type == 2 && !enterpriseId){
								showToast('当前账号正在审核中,审核通过后才可登陆')
							}else{
								uni.switchTab({
									url: "../home/home"
								})
							}
						
						}
					}).catch(err => {
					console.log(err)
				})
					console.log(e,'e')
					// let url = "/api/miniWxApi/getPhoneNum?code="+code;
					// this.$u.get(url).then(res => {
					// 	let phoneNum = res.phoneNum
					// 	let weChatUrl = "/api/weChatLogin";
					// 	this.$u.post(weChatUrl,{
					// 		username: phoneNum,
					// 		code: code
					// 	}).then(data => {
					// 		uni.hideLoading();
					// 		// 登录成功初始化token与用户信息
					// 		this.$u.vuex('vuex_token', data.token);
					// 		this.$u.vuex('vuex_user', data.loginUser);
					// 		uni.switchTab({
					// 			url: '/pages/index/index'
					// 		})
					// 	});
					// });
			},
			login(){
				uni.navigateTo({
					url: '/pages/login/phoneLogin'
				})
			}
		}

	}
</script>

<style lang="scss" scoped>
	@import "@/static/css/variable.scss";

	.wx-login {
		display: flex;
		// align-items: center;
		justify-content: center;
		width: 100%;
		box-sizing: border-box;
		height: 100vh;
		background-image: url(../../static/img/mescroll/loginBG.png);
		background-size: 100% 100%;
	}

	.login-Box {
		width: 606rpx;
		margin-top: 112rpx;

		.img {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 110rpx;
		}

		.subTitle {
			font-size: 16px;
			font-weight: 700;
			letter-spacing: 0px;
			line-height: 22px;
			color: rgba(26, 26, 26, 1);
			text-align: center;
		}

		.title{
			font-size: 14px;
			font-weight: 400;
			letter-spacing: 0px;
			line-height: 20.27px;
			color: rgba(102, 102, 102, 1);
			text-align: center;
		}

		.loginBtn {
			margin-top: 72rpx;
			border-radius: 328rpx;
			background-color: #166DF1;
			width: 100%;
			height: 88rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			font-size: 32rpx;
			font-weight: 400;
		}

		.forgetPassword {
			font-size: 12px;
			font-weight: 400;
			letter-spacing: 0px;
			line-height: 22px;
			color: rgba(134, 144, 156, 1);
			text-align: center;
			vertical-align: top;
			margin-top: 28px;
		}
	}
</style>

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

pytorch安装GPU版本 (Cuda12.1)教程: Windows、Mac和Linux系统快速安装指南

&#x1f337;&#x1f341; 博主 libin9iOak带您 Go to New World.✨&#x1f341; &#x1f984; 个人主页——libin9iOak的博客&#x1f390; &#x1f433; 《面试题大全》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33…

java List的stream().collect()方法实战

文章目录 订单类测试类测试结果 这几天在做银联的银行卡对账时&#xff0c;一开始只使用参考号来确定一笔交易&#xff0c;但是这样是不严谨的&#xff0c;项目经理要求使用商户号、终端号、流水号、批次号、参考号五个数据项来确定唯一性&#xff0c;所以本次list转map是在此背…

分布式调用与高并发处理 Nginx

一、初识Nginx 1.1 Nginx概述 Nginx是一款轻量级的Web服务器、反向代理服务器&#xff0c;由于它的内存占用少&#xff0c;启动极快&#xff0c;高并发能力强&#xff0c;在互联网项目中广泛应用。Nginx 专为性能优化而开发&#xff0c;使用异步非阻塞事件驱动模型。 常见服务…

小程序如何上传商品

​小程序作为一种便捷的电商平台&#xff0c;上传商品是非常重要的一步。本文将为你提供一个完整的小程序上传商品教程&#xff0c;帮助你轻松上架自己的商品。 一、进入商品管理页面 在个人中心点击管理入口&#xff0c;然后找到“商品管理”菜单并点击。 2. 点击“添加商品…

【C++初阶】容器适配器模拟实现栈和队列(附源码)

一.容器适配器 其实在使用模板时&#xff0c;我们不仅可以使用类模板&#xff0c;还可以使用容器模板&#xff0c;这就是一个容器适配器&#xff0c;我们可任意给模板实例化不同的容器&#xff0c;然后就可以使用容器里的接口。 template<class T,class Containers> 我们…

轮播图添加删除

轮播图页面和对话框搭建 页面简单布局 <template><div id"banner"><el-space direction"vertical" :size"20" style"width: 100%"><h1>轮播图管理</h1><div style"text-align: right"&g…

【论文阅读】DQnet: Cross-Model Detail Querying for Camouflaged Object Detection

DQnet: Cross-Model Detail Querying for Camouflaged Object Detection DQnet&#xff1a;伪装目标检测中的跨模型细节查询 论文地址&#xff1a;https://arxiv.org/abs/2212.08296 这篇文章提出了一个交叉模型框架&#xff08;CNN-Transformer并行&#xff09;来检测伪装目…

Cocoapods 集成与初始化 - swift

基于新的 swift 工程集成 cocoapods,操作过程与 object-c 类似, 如下操作基于已成功安装 cocoapods 的基础之上; 首先,终端访问到工程根目录下 cd xxx工程文件夹路径xxx 其次,创建 Podfile 文件 vim Podfile 再其次,创建成功后工程根目录下会得到一个 Podfile 文件,通过终…

MySQL事务机制、导入导出、数据表设计案例(六)

目录 一、数据库事务机制1.1 undo和redo日志1.2 开启事务、提交事务、回滚事务1.3 事务的ACID属性1.4 事务的并发性1.4.1 业务案例1&#xff1a;抢车票1.4.2 业务案例2&#xff1a;转账1.4.3 业务案例3 电商涨价1.4.4 事务的序列化 二、数据导出与导入2.1 SQL文件的导出与导入2…

【操作教程】在EasyCVR平台实现播放MP4视频的两种方法

目前EasyCVR平台可支持国标GB28181、RTSP/Onvif、RTMP、海康Ehome、SDK等方式接入&#xff0c;这些接入方式主要是针对设备或视频流的接入。在有些项目现场也会遇到播放MP4视频文件的需求&#xff0c;今天我们来介绍下&#xff0c;如何在EasyCVR平台实现MP4视频文件的播放&…

vue-element-template管理模板(一)

模板下载 选择分支&#xff1a;https://github.com/PanJiaChen/vue-admin-template/tree/permission-control 端口修改、关闭Eslint 修改vue.config.js文件&#xff08;用放大镜搜索“9528”定位文件&#xff09; const port 9528 lintOnSave: false国际化设置 import lo…

PHP8知识详解:PHP是什么?

PHP是什么&#xff1f; 杨泽业从下面几点为你讲清楚什么是PHP。 1、PHP最开始是Personal Home Page&#xff08;个人主页&#xff09;的缩写&#xff0c;已经正式更名为 “PHP: Hypertext Preprocessor”&#xff0c;超文本预处理器的字母缩写。 2、PHP是一种被广泛应用的、…

改进的减法优化器算法优化BP神经网络---回归+分类两种案例

今天采用前一阵改进最为成功的智能优化算法---融合黄金正弦的减法优化器算法(GSABO)优化BP神经网络。该算法不仅是2023年较新的算法&#xff0c;而且改进后的收敛速度和寻优精度都是极佳&#xff01;点击链接跳转GSABO算法&#xff1a;融合黄金正弦&#xff0c;十种混沌映射&am…

【在英伟达nvidia的jetson-orin-nx-工控机入门了解-自我学习-资料记录-熟悉了解】

【在英伟达nvidia的jetson-orin-nx-工控机入门了解-自我学习-资料记录-熟悉了解】 1、概述2、实验环境3-1初次接触工控机版本-真的好多-新手一脸懵逼3-2 啥是载板和核心板3-3 查看资源资料3-4 了解外设资源3-5 查看博客论坛3-6 底层配置pinmux3-7 Linux驱动开发3-8 AI相关3-8 j…

【基于CentOS 7 的NFS服务】

目录 一、概述 二、应用场景 三、安装 四、启动服务 五、目录结构 1.nfs的主配置文件 2.存储配置文件 六、命令解析 1.共享存储管理命令 2.共享目录查看 七、配置 八、客户端访问 1.查看nfs服务器的共享目录 2.挂载 九、实际案例 一、概述 network filesystemt…

7.12 redis未授权访问漏洞

在1.txt添加存在redis未授权访问漏洞的IP redis.py输入脚本 redis-cli exe -h IP -p 端口号

SQL 常见函数整理 _ CONCAT() 和 CONCAT_WS()

CONCAT() 1. 用法&#xff1a; 用于将多个字符串连接在一起。 2. 基本语法&#xff1a; CONCAT(str1, str2, ...)其中&#xff0c;str1, str2, … 是要连接的字符串。可以指定任意数量的参数。 3. 应用示例 Address表&#xff1a; 如果想将城市、区、街道合并到一个字段中 …

uniapp 小程序如何从主包页面跳转到分包页面

在uniapp开发小程序的时候&#xff0c;“分包”概念一定要提前了解下&#xff0c;具体我就不多说了&#xff0c;自己看下关网的相关配置。 那么&#xff0c;如果从主包页面&#xff0c;跳转至分包的页面呢&#xff1f;如图所示 我的页面->详情页 在我的页面创建好自己的链…

面试之JVM类的生命周期

按照Java虚拟机规范&#xff0c;从class文件到加载到内存中的类&#xff0c;到类卸载出内存为止&#xff0c;它的整个生命周期包括如下7个阶段&#xff1a; 加载: 类的加载指的是将类的.class文件中的二进制数据读取到内存中&#xff0c;存放在运行时数据区的方法去中。 在加…

java版本Spring Cloud + Spring Boot +二次开发+企业电子招标采购系统

一、立项管理 1、招标立项申请 功能点&#xff1a;招标类项目立项申请入口&#xff0c;用户可以保存为草稿&#xff0c;提交。 2、非招标立项申请 功能点&#xff1a;非招标立项申请入口、用户可以保存为草稿、提交。 3、采购立项列表 功能点&#xff1a;对草稿进行编辑&#x…