MiniPrograms/components/mini-login/mini-login.vue

<template>
	<view class="content">
		<view class="bg"></view>
		<view class="bg2"></view>
		<view class="tips">
			<text class="title">登录</text>
			<text class="subtitle">欢迎来到醍摩豆家长</text>
		</view>

		<view class="form-box">
			<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="btn">微信一键登录</button>
			<view class="other">
				<text class="other-text-left">账号密码登录</text>
				<text class="other-text-right" style="color:#4169E1;">
					忘记密码
				</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex';
	import WXBizDataCrypt from "@/utils/WXBizDataCrypt.js";

	export default {
		name: "mini-login",
		data() {
			return {

			};
		},
		computed: {
			...mapState('m_parent', ['token'])
		},
		onLoad() {
			
		},
		methods: {
			...mapMutations('m_parent', ['updateParentInfo', 'updateToken', 'updateParentDetail']),

			//调用登录接口换取token
			async getToken() {
				//调用login()拿到code用于换取token
				let [err, res] = await uni.login().catch(err => err)
				//判断调用是否成功
				if (err || res.errMsg !== 'login:ok') return uni.$showMsg('登录失败!')
				//准备换取token参数
				let query = {
					js_code: res.code
				}
				//传入后台换取token
				const loginResult = await uni.$http.post('https://test.teammodel.cn/aclassone/get-miniapp-userinfo', query)
				if (loginResult.statusCode !== 200) return uni.$showMsg('登录失败!')
				uni.$showMsg('登录成功')
				//更新vuex中token
				console.log(loginResult.data.miniappData);
				this.updateToken(loginResult.data.miniappData)
			},

			//获取用户手机号
			async getPhoneNumber(e) {
				await this.getToken()
				if (e.detail.errMsg !== "getPhoneNumber:ok") {
					//用户决绝授权  
					return uni.$showMsg('拒绝手机授权，获取不到您的信息!')
				} else {
					if (this.token) {
						let proof = await new WXBizDataCrypt('wx5705da8747c77cfe', this.token.session_key)
						let numData = await proof.decryptData(e.detail.encryptedData, e.detail.iv)
						console.log(numData.phoneNumber)
						// const parentDetailData = await uni.$http.post('',numData.phoneNumber)
						// this.updateParentDetail(parentDetailData)
						await uni.navigateTo({
							url: '/subpkg/guide/guide'
						})
					}
				}
			},


		},
	}
</script>

<style lang="scss">
	//登录页面
	.content {
		width: 100vw;
		height: 100vh;
		background-color: #fafafa;
		z-index: 999;

		.tips {
			padding-top: 200rpx;
			padding-left: 80rpx;
			display: flex;
			flex-direction: column;

			.title {
				line-height: 70rpx;
				font-weight: bold;
				font-size: 50rpx;
			}

			.subtitle {
				line-height: 70rpx;
				font-size: 35rpx;
				font-weight: bold;
				color: #b0b0b1;
			}

		}

		.bg {
			position: fixed;
			top: -250rpx;
			right: -250rpx;
			width: 600rpx;
			height: 600rpx;
			border-radius: 100%;
			background-color: #4169E1;
			z-index: 2
		}

		.bg2 {
			position: fixed;
			top: -150rpx;
			right: -300rpx;
			width: 600rpx;
			height: 600rpx;
			border-radius: 100%;
			background-color: #6495ed;
			z-index: 1;
		}

		.form-box {
			padding-top: 250rpx;
			padding-left: 70rpx;
			width: 610rpx;

			.input-box {
				margin: 40rpx 0;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				height: 100rpx;
				background-color: #f5f5f5;
				border-radius: 100rpx;
				width: 100%;

				input {
					flex: 1;
					height: 100%;
					font-size: 30rpx;
				}

				.left {
					padding: 0 30rpx;
					width: 35rpx;
					height: 35rpx;
				}

				.right {
					padding: 0 30rpx;
					width: 40rpx;
					height: 40rpx;
				}
			}

			.btn {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: 100rpx;
				border-radius: 100rpx;
				color: #FFFFFF;
				background: linear-gradient(to right, #506AE7, #87CEFA);
				text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.1);
				box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
				margin-top: 30px;
			}

			.other {
				display: flex;
				justify-content: space-between;

				text {
					line-height: 80rpx;
					font-size: 28rpx;
				}

				.other-text-left {
					margin-left: 2px;
					margin-top: 10px;
				}

				.other-text-right {
					margin-right: 2px;
					margin-top: 10px;
				}
			}
		}
	}
</style>