uniapp-qxk/pages/login/login.vue

<template>
	<view>
		<view class="lf-row-center lf-flex-column box">
			<!-- <image class="img" :src="userInfo.avatar" v-if="userInfo.avatar"></image> -->
			<!-- <image class="img" src="../../static/logo.png" v-else></image> -->
			<image class="img" src="@/static/mrtx.png" ></image>
			<view class="lf-m-t-30 lf-font-32" v-if="type == 'phone'">{{ userInfo.nickname || '游客用户' }}</view>
			<block v-if="type == 'userinfo'">
				<button class="btn" @click="getUserProfile">
					<text class="le lf-icon-weixin lf-font-60 lf-text-vertical"></text>
					<text class="lf-m-l-20">微信快捷登录</text>
				</button>
				<!-- <view class="lf-m-t-40 lf-font-28" @click="$toBack()">暂不绑定继续操作</view> -->
				<view class="mask" v-if="!checked" @click="$msg('您未同意协议条款')"></view>
			</block>
			<block v-else-if="type == 'phone'">
				<button class="btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
					<text class="le lf-icon-weixin lf-font-60 lf-text-vertical"></text>
					<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>
		<!-- 服务条款 todo -->
		<view class="fixed-bottom lf-flex">
			<checkbox-group @change="checkboxChange" style="display: inline-block;">
				<checkbox class="lf-text-vertical" :checked="checked" value="agreement"></checkbox>
			</checkbox-group>
			<view class="lf-m-l-10 lf-font-24 lf-color-gray" style="display: inline-block; width: 612rpx; white-space: pre-wrap;">
				<text>请仔细阅读</text>
				<text @click="$url('/packages/article/article?type=privacy_agreement')" class="text-orange">《用户隐私协议》</text>
				<text>开始使用代表您已阅读并同意。</text>
			</view>
		</view>
	</view>
</template>

<script>
	import { wxLogin } from '@/service/login.js'
	
	export default {
		data(){
			return {
				checked: false, // 是否勾选协议
				isLogin: false, // 是否已登录
				userInfo: {},
				type: 'userinfo', // 页面授权类型 phone获取手机号 | userinfo获取用户信息
				agreement: {}, // 协议
				code: ''
			}
		},
		onLoad(options){
			uni.login({
				complete: result => {
					if(result.errMsg == 'login:ok'){
						let code = result.code;
						this.code = code;
					}
				}
			})
		},
		methods: {
			// 勾选协议发生变化
			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;
					// let userInfo = uni.getStorageSync('userInfo') || {};
					this.$http(this.API.API_WECHAT_SETPHONE, {
						encryptedData,
						iv,
						// token: userInfo.token // 已在公共参数传
					}).then(res => {
						console.log("更新手机号", res);
						this.$msg('更新成功', {icon: 'success'});
						uni.setStorageSync('userInfo', res.data);
						setTimeout(() => {
							this.$toBack();
						}, 1000);
					})
				}
			},
			// 获取用户信息
			getUserProfile(){
				uni.getUserProfile({
					desc: '您的信息将用于球星卡显示',
					lang: 'zh_CN',
					complete: async result => {
						console.log(result)
						if(result.errMsg == 'getUserProfile:ok'){
							let encryptedData = result.encryptedData;
							let iv = result.iv;
							let signature = result.signature;
							
							let res = await wxLogin({
								code: this.code,
								iv: iv,
								encryptedData: encryptedData
							});
							
							let user = {...res.data.datas.user, token: res.data.datas.token};
							uni.setStorageSync('userInfo', user);
							
							this.$msg('登录成功, 即将跳转...').then(() => {
								let loginRedirectPage = getApp().globalData.loginRedirectPage;
								if(loginRedirectPage){
									this.$url(loginRedirectPage, {type: 'redirect'});
								}else{
									this.$url('/pages/index/index', {type: 'launch'});
								}
							})
						}
					}
				});
			}
		}
	}
</script>

<style>
	page{
		overflow: hidden;
	}
</style>
<style lang="scss" scoped="scoped">
	.box{
		padding: 60rpx 32rpx;
		width: 750rpx;
		height: auto;
		box-sizing: border-box;
		position: relative;
		.img{
			width: 180rpx;
			height: 180rpx;
			border-radius: 50%;
		}
		.btn{
			background-color: #09BB07;
			color: #FFFFFF;
			width: 100%;
			height: 88rpx;
			border-radius: 42rpx;
			font-size: 32rpx;
			line-height: 88rpx;
			margin-top: 80rpx;
		}
	}
	.fixed-bottom{
		position: fixed;
		bottom: 60rpx;
		left: 0;
		padding: 0 32rpx;
		.highlight{
			color: #1e90ff;
		}
	}
	
	.mask{
		position: absolute;
		bottom: 46rpx;
		left: 0;
		width: 100%;
		height: 190rpx;
	}
	.display-inline-block{
		display: inline-block;
	}
	
	.text-orange{
		color: rgb(209, 161, 28);
		font-size: 28rpx;
	}
</style>