uniapp写的小程序登录页面

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

<template>
	<view class="content yys-flex-column" style="justify-content: center;">
		<!-- <my-bar>
			<block slot="content">登录</block>
		</my-bar> -->
		<view style="height: 100%;z-index: 0;position: absolute;width: 100%;">
			<view class="bg-gradual-blue" style="width: 100%;height: 45%;"></view>
			<view style="width: 100%;height: 55%;"></view>
		</view>
		<view style="height: 100%;z-index: 1;" class="yys-flex-column">
			<view class="yys-flex" style="justify-content: center;align-items: flex-end;height: 32%;">
				<view class="logo" style="padding: 50rpx 0;">云上宿舍</view>
			</view>
			<view class="yys-flex-fill">
				<view class="login-bg">
					<view class="login-card">
						<view class="login-function"><!-- <text>登录</text> --></view>
						<view class="login-input login-margin-b">
							<mInput type="text" v-model="userinfo.username" placeholder="请输入用户名" clearable="true"></mInput>
						</view>
						<view class="login-input">
							<mInput type="password" v-model="userinfo.password" placeholder="请输入密码" clearable="true"
								displayable="true"></mInput>
						</view>
						<view class="login-function">
							<!-- <navigator class="login-register" url="../reg/reg">快速注册></navigator> -->
							<!-- <navigator class="login-forget" url="../pwd/pwd">忘记密码</navigator> -->
						</view>
					</view>
				</view>
				<view class="login-btn"><button class="landing bg-gradual-blue" type="primary" @click="login()">登陆</button>
				</view>
			</view>
			

			<view class="oauth">
				<view class="oauth-row">
					<!-- 微信小程序登录 -->
					<!--#ifdef MP-WEIXIN-->
					<button v-if="canIUseGetUserProfile" @click="wxMpLogin">
						<image src="https://haolaoshiya.com/img/wx.png"></image>
					</button>
					<button v-else open-type="getUserInfo" @getuserinfo="wxMpLogin">
						<!-- <image :src="imgServer + '/img/wx.png'"></image> -->
						<image src="https://haolaoshiya.com/img/wx.png"></image>
					</button>
					<!--#endif-->
					<!-- APP端微信登录 -->
					<!--#ifdef APP-PLUS-->
					<button @click="wxAppLogin()">
						<image src="https://haolaoshiya.com/img/wx.png"></image>
					</button>
					<!--#endif-->
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import mInput from '../../components/m-input/m-input.vue';
	import api from '@/common/api.js';
	import baseMixin from '@/mixin/base.js';
	export default {
		components: {
			mInput
		},
		mixins: [baseMixin],
		data() {
			return {
				canIUseGetUserProfile: true,
				userinfo: {
					username: '',
					password: '',
					email: ''
				}
			};
		},
		onLoad(e) {},
		methods: {
			//验证规则检查
			check() {
				//验证规则
				let validRules = [{
						name: 'username',
						title: '用户名',
						required: true,
						minLength: 3
					},
					{
						name: 'password',
						type: 'password',
						title: '密码',
						required: true,
						minLength: 6
					}
				];
				return this.$validate.valid(this.userinfo, validRules);
			},
			/**
			 * 普通账密码登录
			 */
			login() {
				var r = this.check();
				if (!r.isOk) {
					this.$util.msg(r.msg);
				} else {
					api.login(this.userinfo);
				}
			},
			/**
			 * 微信小程序登录
			 * @param {Object} e
			 */
			wxMpLogin: function(e) {
				var that = this;
				uni.showLoading({
					title: '登录中'
				});

				function _login(userInfo) {
					//登录
					uni.login({
						success(res) {
							//{errMsg: "login:ok", code: "033vPJhy1W2RH906Y0gy1B5Chy1vPJhO"}
							console.log(res);
							if (res.code) {
								uni.hideLoading();
								// 发起网络请求
								api.wxMplogin({
									code: res.code,
									username: userInfo.nickName,
									avatar: userInfo.avatarUrl
								});
							} else {
								uni.hideLoading();
								that.$util.msg('登录失败！' + res.errMsg);
								//console.log('登录失败！' + res.errMsg);
							}
						}
					});
				}
				if (this.canIUseGetUserProfile) {
					// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
					// 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
					uni.getUserProfile({
						desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
						success: res => {
							console.log(res.userInfo);
							_login(res.userInfo)
						}
					});
				} else {
					console.log(e.detail.userInfo);
					if (e.detail.errMsg === 'getUserInfo:ok') {
						//用户同意授权
						//console.log("同意授权");
						//this.$util.msg(JSON.stringify(e.detail.userInfo));
						//登录
						_login(e.detail.userInfo)
					} else {
						uni.hideLoading();
						//用户拒绝授权
						this.$util.msg('请同意授权后登录');
					}
				}
			},
			/**
			 * APP端微信登录
			 */
			wxAppLogin: function() {
				var that = this;
				uni.getProvider({
					service: 'oauth',
					success: function(res) {
						//console.log(res);
						if (~res.provider.indexOf('weixin')) {
							//this.loadModal = true;
							uni.showLoading({
								title: '登录中'
							});
							uni.login({
								provider: 'weixin',
								success: function(loginRes) {
									//console.log(JSON.stringify(loginRes));
									// 服务端登录
									// 发起网络请求
									api.wxAppLogin({
										access_token: loginRes.authResult
										.access_token, //传给后台，后台拿code解析，返回用户数据
										openid: loginRes.authResult.openid
									}).then(r => {
										uni.hideLoading();
									});
									/* uni.getUserInfo({
										provider: 'weixin',
										success: function(infoRes) {
											console.log(JSON.stringify(infoRes));
											var info = infoRes;
											var opid = info.userInfo.openId;
											that.userInfo = {
												nickName: info.userInfo.nickName,
												avatarUrl: info.userInfo.avatarUrl
											};
											try { 
												uni.setStorageSync('openid', opid);
											} catch (e) {
												// error
											}
											this.loadModal = false;
										}
									}); */
								}
							});
						}
					}
				});
				// #ifdef APP-PLUS
				//app端登录获取code传递给服务器进行登录，客户端不保存APPsecrect安全系数高
				//参考https://www.jianshu.com/p/eb538af98fbd
				/* plus.oauth.getServices(
					function(services) {
						var auths = [];
						for (var i = 0; i < services.length; i++) {
							auths[services[i].id] = services[i];
						}
						var aweixin = auths['weixin'];
						//console.error(aweixin);
						if (!aweixin) {
							plus.nativeUI.alert('当前环境不支持微信登录');
							return;
						}
						// 获取code传给后台
						aweixin.authorize(
							function(e) {
								console.log('获取code：' +JSON.stringify(e));
								// 服务端登录
								// 发起网络请求
								api.wxAppLogin({ 
									code: e.code//传给后台，后台拿code解析，返回用户数据								
								});							
							},
							function(e) {
								plus.nativeUI.alert('授权失败：' + JSON.stringify(e));
								//console.log(JSON.stringify(e));
							},
							{
								scope: 'snsapi_userinfo'
							}
						);
					},
					function(e) {
						plus.nativeUI.alert('获取登录授权服务列表失败：' + JSON.stringify(e));
					}
				); */
				// #endif
			}
		}
	};
</script>

<style lang="scss">
	page {
		height: 100%;
	}

	.landing {
		height: 88rpx;
		line-height: 88rpx;
		border-radius: 25rpx;
		font-size: 36rpx;
		/* background: linear-gradient(left,#FF978D, #FFBB69); */
	}

	.login-btn {
		padding: 10rpx 20rpx;
		margin-top: 50rpx;
	}

	.login-function {
		overflow: auto;
		padding: 20rpx 20rpx 30rpx 20rpx;
	}

	.login-forget {
		float: left;
		font-size: 28rpx;
		color: #999;
	}

	.login-register {
		color: #666;
		float: right;
		font-size: 28rpx;
	}

	.login-input .m-input-view {
		background: #f2f5f6;
		padding: 12rpx 25rpx;
		height: 92rpx;
		line-height: 92rpx;
		border-radius: 10rpx;
	}

	.login-input /deep/ .m-input-input {
		font-size: 34rpx;
	}

	.bg-gradual-green .m-input-view {
		color: #666666;
	}

	.login-margin-b {
		margin-bottom: 25rpx;
	}

	.login-input {
		padding: 10rpx 20rpx;
	}

	.bg-gradual-green .login-head {
		font-size: 42rpx;
		text-align: center;
		font-weight: bold;
		color: #666666;
		padding: 25rpx 10rpx 55rpx 10rpx;
	}

	.login-card {
		background: #fff;
		border-radius: 12rpx;
		padding: 10rpx 25rpx;
		box-shadow: 0 6rpx 18rpx rgba(0, 0, 0, 0.12);
		position: relative;
		// margin-top: 400rpx;
	}

	.login-bg {
		// height: 600rpx;
		padding: 30rpx;
		/* background: linear-gradient(#FF978D, #FFBB69); */
	}

	.oauth {
		position: absolute;
		bottom: 40rpx;
		left: 0;
		width: 100%;
	}

	.oauth-row {
		display: flex;
		margin: 0 40rpx;
		text-indent: 25rpx;
	}

	.oauth-row button {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		border: none;
	}

	.oauth-row button:after {
		content: none;
	}

	.oauth-row button::after {
		border: none;
	}

	.oauth-row image {
		width: 60rpx;
		height: 60rpx;
	}
	.logo{-webkit-background-clip: text;
	    background-clip: text;
	    background-image:linear-gradient(-45deg,rgb(255, 255, 255),rgb(0,255,255));
	    font-size: 40px;
	    animation: shine 2s infinite;
	     background-blend-mode: hard-light; 
	     background-size: 200%; 
	     color: white;
	     -webkit-text-fill-color: transparent; 
		 font-weight: bold;
	}
	@keyframes shine {
	    from {
	        background-position: 100%;
	    }
	    to {
	        background-position: 0;
	    }
	}

</style>