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

这篇具有很好参考价值的文章主要介绍了微信小程序的微信一键登录与验证码登录。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

验证码登录

<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>




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

微信一键登录

<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) {
			// 允许授权跳转首页
				if (e.detail.errMsg == 'getPhoneNumber:ok') {
					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)
				}else if (e.detail.errMsg === 'getPhoneNumber:fail user deny' ||
					e.detail.errMsg === 'getPhoneNumber:fail:user deny') {
					// 拒绝授权的操作
						
				}
		
				})
			},
			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>

微信小程序的微信一键登录与验证码登录,微信小程序,微信,notepad++文章来源地址https://www.toymoban.com/news/detail-600020.html

到了这里,关于微信小程序的微信一键登录与验证码登录的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包