[新增] app.vue微信登录逻辑

[新增] 小程序版本更新检查
[新增] 获取用户信息和手机号逻辑
[新增] 手机号登录页面

App.vue

@@ -1,13 +1,99 @@
 <script>
 	export default {
+		globalData: {
+			
+		},
 		onLaunch: function() {
-			console.log('App Launch')
+			// this.login(); // 校验登录态 TODO 等待与后端对接
 		},
 		onShow: function() {
-			console.log('App Show')
+			// #ifdef MP-WEIXIN
+			this.getUpdateWexin(); // 小程序更新检查
+			// #endif
 		},
 		onHide: function() {
 			console.log('App Hide')
+		},
+		methods: {
+			// 接口code换取用户信息
+			userCode(code){
+				this.$http('', { code }).then(res => {
+					console.log("获得用户信息", res);
+				})
+			},
+			// 登录
+			login(){
+				this.checkSession().then(code => {
+					this.userCode(code);
+				}).catch(err => {
+					uni.login({
+						complete: result => {
+							if(result.errMsg == 'login:ok'){
+								let code = result.code;
+								uni.setStorageSync('login_token', code);
+								this.userCode(code);
+							}
+						}
+					})
+				});
+			},
+			// 校验登录态是否过期，如果没有过期还要判断本地有没有token
+			checkSession(){
+				return new Promise((resolve, reject) => {
+					uni.checkSession({
+						complete: result => {
+							if(result.errMsg == 'checkSession:ok'){ // 处于登录状态 session未过期
+								let login_token = uni.getStorageSync();
+								if(login_token){
+									resolve(login_token);
+								}else{
+									reject(); // 本地没有token，重新调取登录
+								}
+							}else{ // session已过期，需要重新登录
+								reject();
+							}
+						}
+					})
+				});
+			},
+			// 小程序版本更新检查
+			getUpdateWexin(){
+				const updateManager = uni.getUpdateManager(); // 获取版本更新管理器对象
+				updateManager.onCheckForUpdate(function(res) {
+					// 请求完新版本信息的回调
+					if (res.hasUpdate) {
+						updateManager.onUpdateReady(function(res2) {
+							uni.showModal({
+								title: '更新提示',
+								content: '发现新版本，是否重启应用?',
+								confirmColor: '#FE9903',
+								showCancel: false,
+								success(res2) {
+									if (res2.confirm) {
+										// 新的版本已经下载好，调用applyUpdate应用新版本并重启
+										updateManager.applyUpdate();
+									}
+								}
+							});
+						});
+					}
+				});
+	
+				updateManager.onUpdateFailed(function(res) {
+					// 新的版本下载失败
+					uni.showModal({
+						title: '提示',
+						content: '检查到有新版本，但下载失败，请检查网络设置',
+						confirmColor: '#FE9903',
+						success(res) {
+							if (res.confirm) {
+								// 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
+								updateManager.applyUpdate();
+							}
+						}
+					});
+				});
+			}
 		}
 	}
 </script>

pages.json

@@ -76,6 +76,12 @@
 			"style": {
 				"navigationBarTitleText": "登录"
 			}
+		},
+		{
+			"path": "pages/login/accountLogin",
+			"style": {
+				"navigationBarTitleText": "绑定"
+			}
 		}
 	],
 	"globalStyle": {

pages/center/index.vue

@@ -149,7 +149,8 @@
 			position: absolute;
 			width: 100%;
 			height: 100%;
-			z-index: -1;
+			z-index: 1;
+			background: transparent;
 		}
 		&:last-child{
 			border-bottom: none;

pages/login/accountLogin.vue

@@ -0,0 +1,165 @@
+<template>
+	<view>
+		<view class="lf-flex-column lf-row-center logo">
+			<image ></image>
+		</view>
+		<view class="lf-row-between inpu-box">
+			<u-icon name="phone" size="50"></u-icon>
+			<input maxlength="11" v-model="phoneNum" placeholder="请输入手机号" />
+		</view>
+		<view class="lf-row-between verif-code" v-if="isCodeLogin">
+			<view class="lf-row-between code-input">
+				<u-icon name="lock" size="50" color="#999999"></u-icon>
+				<input maxlength="5" v-model="codeNum" placeholder="验证码" />
+			</view>
+			<button class="code-btn" :style="{'background-color': isGetCode ? '#FE9903' : '#999999'}" @click="getCode">
+				{{ isGetCode ? '获取验证码' : codeTimeNum +'s后重新获取' }}
+			</button>
+		</view>
+		<view class="lf-row-between inpu-box lf-m-t-30" v-else>
+			<u-icon name="lock" size="50"></u-icon>
+			<input maxlength="11" v-model="password" :password="true" placeholder="请输入密码" />
+		</view>
+		<view @click="switchLoginType" class="login-type">{{ isCodeLogin ? '使用密码登录' : '使用验证码登录' }}</view>
+		<button class="login-btn" @click="login">登录</button>
+	</view>
+</template>
+
+<script>
+	export default {
+		data(){
+			return {
+				phoneNum: '',
+				codeNum: '',
+				password: '',
+				isGetCode: true,
+				isCodeLogin: true,
+				codeTimeNum: 10,
+				codeTime: null
+			}
+		},
+		onLoad(){
+			
+		},
+		onUnload(){
+			if(this.codeTime){
+				clearInterval(this.codeTime);
+				this.codeTime = null;
+			}
+		},
+		methods: {
+			// 切换账号和验证码登录
+			switchLoginType(){
+				this.codeNum = '';
+				this.password = '';
+				this.isCodeLogin = !this.isCodeLogin;
+			},
+			// 获取验证码
+			getCode(){
+				if(this.isGetCode){
+					console.log("此处请求")
+				}
+				if(this.codeTimeNum == 10){
+					this.isGetCode = false;
+					if(this.codeTime){
+						clearInterval(this.codeTime);
+						this.codeTime = null;
+						this.codeTimeNum = 10;
+					}
+					this.codeTime = setInterval(() => {
+						this.codeTimeNum = this.codeTimeNum - 1;
+						if(this.codeTimeNum < 0){
+							clearInterval(this.codeTime);
+							this.codeTime = null;
+							this.codeTimeNum = 10;
+							this.isGetCode = true;
+						}
+					}, 1000);
+				}
+			},
+			// 登录
+			login(){
+				let pages = getCurrentPages();
+				let prevPage = pages[pages.length - 2];
+				
+				// prevPage.$vm.isLogin = true; // 上一个页面登录成功
+				// this.$toBack(); // 登录成功
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped="scoped">
+	.logo{
+		width: 100%;
+		height: 220rpx;
+		image{
+			width: 160rpx;
+			height: 160rpx;
+			border-radius: 50%;
+			background-color: #EEEEEE;
+		}
+	}
+	.inpu-box{
+		width: 686rpx;
+		height: 88rpx;
+		border: 2rpx solid #FE9903;
+		border-radius: 10rpx;
+		color: #FE9903;
+		box-sizing: border-box;
+		padding: 0 20rpx;
+		margin: 0 auto;
+		margin-top: 50rpx;
+		input{
+			width: 570rpx;
+			height: 66rpx;
+			font-size: 32rpx;
+			display: flex;
+			align-items: center;
+			padding: 0 20rpx;
+		}
+	}
+	.verif-code{
+		width: 686rpx;
+		height: 88rpx;
+		margin: 0 auto;
+		margin-top: 30rpx;
+		.code-input{
+			width: 438rpx;
+			height: 88rpx;
+			border: 2rpx solid #999999;
+			border-radius: 10rpx;
+			box-sizing: border-box;
+			padding: 0 20rpx;
+			input{
+				width: 344rpx;
+				height: 66rpx;
+				padding: 0 20rpx;
+				font-size: 32rpx;
+			}
+		}
+		.code-btn{
+			margin: 0;
+			width: 228rpx;
+			height: 88rpx;
+			border-radius: 10rpx;
+			color: #FFFFFF;
+			font-size: 28rpx;
+			line-height: 88rpx;
+		}
+	}
+	.login-type{
+		color: #FE9903;
+		text-align: center;
+		margin-top: 40rpx;
+	}
+	.login-btn{
+		width: 686rpx;
+		height: 88rpx;
+		background-color: #FE9903;
+		color: #FFFFFF;
+		line-height: 88rpx;
+		border-radius: 42rpx;
+		margin-top: 100rpx;
+	}
+</style>

pages/login/index.vue

@@ -2,16 +2,28 @@
 	<view>
 		<view class="lf-row-center lf-flex-column box">
 			<image class="img"></image>
-			<view class="lf-m-t-10 lf-font-32">游客jdsfbuskdnko</view>
-			<button class="btn">
-				<u-icon name="weixin-fill" color="#ffffff" size="60" class="lf-text-vertical"></u-icon>
-				<text class="lf-m-l-20">绑定微信</text>
-			</button>
-			<view class="lf-m-t-40 lf-font-28">暂不绑定继续操作</view>
+			<view class="lf-m-t-10 lf-font-32" v-if="isLogin">游客jdsfbuskdnko</view>
+			<block v-if="isLogin">
+				<button class="btn" @click="getUserProfile">
+					<u-icon name="weixin-fill" color="#ffffff" size="60" class="lf-text-vertical"></u-icon>
+					<text class="lf-m-l-20">绑定微信</text>
+				</button>
+				<view class="lf-m-t-40 lf-font-28" @click="$toBack()">暂不绑定继续操作</view>
+			</block>
+			<block v-else>
+				<button class="btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
+					<u-icon name="weixin-fill" color="#ffffff" size="60" class="lf-text-vertical"></u-icon>
+					<text class="lf-m-l-20">微信快捷登录</text>
+				</button>
+				<view class="lf-m-t-40 lf-font-28" @click="$url('/pages/login/accountLogin')">使用手机号登录</view>
+				<view class="mask" v-if="!checked" @click="$msg('您未同意授权')"></view>
+			</block>
 		</view>
 		<!-- 服务条款 -->
-		<view class="fixed-bottom">
-			<checkbox class="lf-text-vertical" :checked="checked"></checkbox>
+		<view class="fixed-bottom" v-if="!isLogin">
+			<checkbox-group @change="checkboxChange" style="display: inline-block;">
+				<checkbox class="lf-text-vertical" :checked="checked"></checkbox>
+			</checkbox-group>
 			<text class="lf-m-l-10 lf-font-24 lf-color-gray">
 				<text>请认真阅读并同意</text>
 				<text class="highlight" @click="enterAgree">《时空网协议》</text>
@@ -27,14 +39,51 @@
 	export default {
 		data(){
 			return {
-				checked: true
+				checked: false, // 是否勾选协议
+				isLogin: false, // 是否已登录
+				userInfo: {}
 			}
 		},
 		onLoad(){
 			
 		},
 		methods: {
-			
+			// 进入查看协议
+			enterAgree(){
+				console.log("查看协议");
+			},
+			// 勾选协议发生变化
+			checkboxChange(event){
+				console.log(event)
+				this.checked = event.detail.value.length > 0;
+			},
+			// 微信快捷登录获取手机号
+			getPhoneNumber(event){
+				console.log(event);
+				if(event.detail.errMsg == 'getPhoneNumber:ok'){
+					let encryptedData = event.detail.encryptedData;
+					let iv = event.detail.iv;
+					this.isLogin = true; // TODO 接口请求回来再赋值
+				}
+			},
+			// 获取用户信息
+			getUserProfile(){
+				uni.getUserProfile({
+					desc: '您的信息将用于时空网显示',
+					lang: 'zh_CN',
+					complete: result => {
+						console.log(result)
+						if(result.errMsg == 'getUserProfile:ok'){
+							let encryptedData = result.encryptedData;
+							let iv = result.iv;
+							let signature = result.signature;
+							let userInfo = result.userInfo;
+							// 获取成功，请求接口完毕后返回页面
+							this.$toBack();
+						}
+					}
+				});
+			}
 		}
 	}
 </script>
@@ -50,6 +99,7 @@
 		width: 750rpx;
 		height: auto;
 		box-sizing: border-box;
+		position: relative;
 		.img{
 			width: 180rpx;
 			height: 180rpx;
@@ -76,4 +126,12 @@
 			color: #1e90ff;
 		}
 	}
+	
+	.mask{
+		position: absolute;
+		bottom: 46rpx;
+		left: 0;
+		width: 100%;
+		height: 190rpx;
+	}
 </style>