building-sign/pages/login/login.vue

<template>
	<view>
		<view class='login-header'>
			<image class="infoImg" mode="aspectFill" :src="imgSrc"></image>
			<view class="logo-name font34 color-00">{{appletName}}</view>
		</view>
		<view class="login-footer">
			<view class="login-btn color-white font34 bg-blue" type='primary' @tap="empowerShow=true" v-if="!isActive">微信授权</view>
			<view class="login-btn color-white font34 bg-blue" type='primary' @tap="getUserProfileEv('other')" v-else>微信授权</view>
			<view class="agreement-box color-33 font28">点击授权登录，表示您已阅读<text @tap="toSafeNotice" class="agreement color-blue">《安全告知》</text></view>
		</view>
		<!-- 获取头像&昵称 -->
		<view class="pop-up-bg" v-if="empowerShow">
			<view class="user-info-box bg-white">
				<view class="info">
					<view class="cover">
						<image :src="imgSrc" mode="aspectFit"></image>
					</view>
					<view class="name color-99 font24">{{appletName}}</view>
					<view class="tips">
						<view class="font26">邀请您补全个人信息</view>
						<view class="font24 color-blue">(昵称、头像)</view>
					</view>
				</view>
				<view class="msg">
					<view class="item font26">
						<text>头像</text>
						<button class="avatar" open-type="chooseAvatar" @chooseavatar="chooseAvatar">
						    <image :src="userInfo.avatarUrl || logoAvatar" mode="aspectFit"></image>
						</button>
					</view>
					<view class="item font26">
						<text>昵称</text>
						<input class="nick-name" type="nickname" @blur="nickNameInput" v-model="userInfo.nickName" placeholder="请输入昵称" placeholder-style="color:#999"/>
					</view>
				</view>
				<view class="empower-btns font30">
					<view class="btn color-99" @tap="refuseEv">拒绝</view>
					<view class="btn color-blue" @tap="getUserProfileEv('other')">允许</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				userInfo: {
					nickName:'',
					avatarUrl:''
				}, //用户信息
				canIGetUserProfile: false,
				imgSrc: '/static/logo.jpg', //默认logo头像
				logoAvatar:'/static/logo-avatar.png', //默认用户头像
				appletName:'工地打卡', //小程序名称
				isBindPhone: false, //是否绑定手机号
				empowerShow:false, //是否显示授权弹窗
				isActive:false, //是否已授权
			};
		},
		onLoad() {
			
		},
		onShow() {
			// 进入登录
			this.getUserProfileEv('enter');
		},
		methods: {
			// 设置logo图
			setLogo(){
				this.$requst.get('/api/v1/index/base-config').then(res=>{
					this.imgSrc = this.$http + res.data.logo;
					this.appletName = res.data.appletName;
				})
			},
			
			// 暂不绑定事件
			refuse(){
				this.isBindPhone=false;
				this.$toolAll.tools.showToast('登录成功','success')
				uni.reLaunch({url:'/pages/pagehome/pagehome'})
			},
			
			// 授权绑定手机号
			getphonenumber(e){
				let ya = this;
				wx.login({
					success:(res)=>{
						this.$requst.post('/api/v1/user/login',{code:res.code}).then(result => {
							if(e.detail.errMsg=="getPhoneNumber:ok"){
								this.$requst.post('/api/v1/user/bind-phone',{openid: result.data.openid,session_key:result.data.session_key, iv:e.detail.iv,encryptedData:e.detail.encryptedData}).then(res=>{
									console.log('手机号信息：',res);
									if(res.code==0){
										this.$toolAll.tools.showToast('手机号绑定成功');
										this.isBindPhone = true;
									} else this.$toolAll.tools.showToast(res.msg);
								},error=>{})
							} else {
								// console.log('取消授权手机号')
							}
						}).catch(err=>{
							console.log(err);
						})
					}
				})
			},
			
			// 跳转免责
			toSafeNotice(){
				uni.navigateTo({
					url:'/pagesA/singlePage/singlePage?type=security'
				})
			},
			
			// 头像上传
			uploadImg(url){
				uni.showLoading({
					title: '上传中'
				});
				this.$requst.upload('/api/v1/file/upload/image',{path:url}).then(res=>{
					if(res.code==0) {
						this.userInfo.avatarUrl = this.$hostHttp+res.data.src;
					}
					uni.hideLoading();
				})
			},
			
			// 获取头像
			chooseAvatar(e){
				// 上传头像
				this.uploadImg(e.detail.avatarUrl)
			},
			
			// 获取昵称
			nickNameInput(e){
				this.userInfo.nickName = e.detail.value
			},
			
			// 拒绝登录
			refuseEv(){
				this.$toolAll.tools.showToast('您已拒绝授权');
				this.empowerShow = false;
			},
			
			// 验证登录信息
			checkForm(){
				if(!this.isActive){
					if(this.userInfo.avatarUrl==''){
						this.$toolAll.tools.showToast('请选择头像！')
						return false;
					}else if(this.userInfo.nickName==''){
						this.$toolAll.tools.showToast('请输入昵称！')
						return false;
					}else{
						return true;
					}
				}else{
					return true;
				}
			},
			
			// 允许登录
			getUserProfileEv(status) {
				//新版登录方式
				uni.login({
					provider: 'weixin',
					success: (res)=> {
						if (res.code) {
							this.updateUserInfo(res.code,status);
						} else {
							uni.showToast({
								title: '登录失败！',
								duration: 2000
							});
						}
					},
				});
			},
			
			//调用登录接口
			updateUserInfo(code,status) {
				if(status=='enter'){
					this.$requst.post('/api/v1/user/login',{code:code}).then(res => {
						if(res.code == 0){
							console.log(res,'进入登录信息');
							if(res.data.is_active==1){
								this.isActive = true;
							}
						}
					},error => {
						
					})
				}
				if(status=='other'){
					if(this.checkForm()){
						uni.showToast({
							title: '登录中...',
							icon:'loading',
							duration:10000
						})
						var params = {
							code:code,
							nickname: this.userInfo.nickName,//用户昵称
							headimgurl: this.userInfo.avatarUrl,//用户头像
							is_active:1
						}
						this.$requst.post('/api/v1/user/login',params).then(res => {
							if(res.code == 0){
								uni.setStorageSync('userId',res.data.account_id)
								uni.setStorageSync('token',res.data.token)//缓存token
								uni.setStorageSync('openid',res.data.openid)//缓存openid
								uni.setStorageSync('expire',res.data.expire)//缓存失效时间（时间戳格式）
								uni.setStorageSync('phone_active',res.data.phone_active)//是否授权手机号
								uni.setStorageSync('is_active',res.data.is_active)//是否授权头像和昵称
								if(uni.getStorageSync('page-path-options')) {
									uni.reLaunch({ // 重新进入当前页面
										url:uni.getStorageSync('page-path-options')
									})
								} else {
									uni.reLaunch({
										url:'/pages/pagehome/pagehome'
									})
								}
							}
						},error => {})
					}
				}
			}
		}
	}
</script>
<style scoped>
	
</style>