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">登录</view>
			<view class="other">
				<text>修改密码</text>
				<text @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)
							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)
				
				//判断调用是否成功
				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
				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('登录成功')
				//更新vuex中token
				this.updateToken(loginResult.message.token)
			}
				
			},
		}
</script>

<style lang="scss">
	//登录页面
	.content {
		width: 100vw;
		height: 100vh;
		background-color: #ffffff;
		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: #00baef;
			z-index: 1;
		}
	
		.form-box {
			padding-top: 180rpx;
			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, #ade8f9);
				text-shadow: 1px 1px 1px rgba(255,255,255, .1);
				box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
			}
	
			.other {
				display: flex;
				justify-content: space-between;
	
				text {
					line-height: 80rpx;
					font-size: 28rpx;
				}
			}
		}
	}
</style>