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">
			<!-- <view class="input-box">
				<image class="left"
					src="../../static/components-icons/user.png">
				</image>
				<input placeholder="请输入手机号" />
				<image class="right"
					src="../../static/components-icons/pull-down.png">
				</image>
			</view> -->
			<!-- <view class="input-box">
				<image class="left"
					src="../../static/components-icons/password.png">
				</image>
				<input placeholder="请输入密码" password="true" />
				<image class="right"
					src="../../static/components-icons/eyes.png">
				</image>
			</view> -->
			<view class="btn" @click="getUserInfo">微信一键登录</view>
			<view class="other">
				<text class="other-text-left">账号密码登录</text>
				<text class="other-text-right" @click="getUserInfo" style="color:#4169E1;">
					忘记密码
				</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex'

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

			};
		},
		computed: {

		},
		methods: {
			...mapMutations('m_parent', ['updateParentInfo', 'updateToken']),
			//取得用户授权获取用户信息
			getUserInfo() {
				uni.getUserProfile({
					desc: '获取您的昵称,头像,地区信息',
					success: infoRes => {
						if (infoRes.errMsg === 'getUserProfile:ok') {
							this.updateParentInfo(infoRes.userInfo)

							console.log('infoRes')
							console.log(infoRes)
							this.getToken(infoRes)
						} else {
							uni.$showMsg('授权失败')
						}
					},
					fail: err => {
						console.log('getUserInfo-error', JSON.stringify(err));
					}

				});
			},
			//调用登录接口换取token
			async getToken(info) {
				//调用login()拿到code用于换取token
				const [err, res] = await uni.login().catch(err => err)
				
				console.log('res');
				console.log(res);
				//判断调用是否成功
				if (err || res.errMsg !== 'login:ok') return uni.$showMsg('登录失败!')

				//准备换取token参数
				const query = {
					code: res.code,
					encryptedData: info.encryptedData,
					iv: info.iv,
					rawData: info.rawData,
					signature: info.signature
				}
				console.log(query)

				//传入数据后台换取token和其他重要数据loginResult{token,parentdetail}
				// const {
				// 	data: loginResult
				// } = await uni.$http.post('https://api-hmugo-web.itheima.net/api/public/v1/users/wxlogin', query)
				// if(loginResult.meta.status !== 200) return uni.$showMsg('登录失败!')
				// uni.$showMsg('登录成功')
				// if (loginResult.meta.status == 200) return uni.$showMsg('登录失败!')
				// uni.$showMsg('登录成功')
				//更新vuex中token
				// this.updateToken(loginResult.message.token)
				// this.updateToken('token')
				// this.updateparentdetail()
				uni.navigateTo({
					url: '/pages/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>