ChuangHengWx/pages/login.vue

<template>
	<view class="page" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
		<cus-header title='PERILL团队动态评估系统' bgColor="transparent" backUrl="/pages/home"></cus-header>
		<image class="topbg" :src="imgBase+'login_top_bg.png'"></image>
		<view class="content">
			<view class="c_top">
				<image :src="imgBase+'logo.png'" mode="widthFix"></image>
				<view class="title">Hi,我是创衡正念企业教练AI智能体</view>
				<view class="tip">我能为你提供PERILL团队发展动态评估、报告分析和团队教练督导对话，期待和你的共创~</view>
				<view class="item adf" style="margin-top: 80rpx;">
					<view class="qa">
						<p>PERILL团队发展动态评估</p>
						<p>基于你对相关陈述的评分，从六个关键维度客观呈现团队现状。</p>
					</view>
				</view>
				<view class="item adf">
					<view class="qa">
						<p>AI教练督导对话</p>
						<p>保持正念教练督导心态，对你的PERILL团队发展动态评估或团队教练计划进行启发式沟通。</p>
					</view>
				</view>
			</view>
			<view class="c_bottom">
				<button class="zt_btn" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">手机号一键登录</button>
				<view class="qx_btn" style="margin-top: 40rpx;" @tap="codeLogin" v-if="!channelType">授权码登录</view>
				<view class="agree adfacjc" @click.prevent="changeAgree">
					<image :src="imgBase+'not_select.png'" v-if="!agree"></image>
					<image :src="imgBase+'selected.png'" v-else></image>
					<view class="text">已阅读并同意我们的<span @click.stop="turnPage('/pagesMy/serviceAgreement')">“服务协议”</span>与<span @click.stop="turnPage('/pagesMy/privacyPolicy')">“隐私政策”</span></view>
				</view>
			</view>
		</view>
		<u-popup :show="show" @close="cancel" mode="bottom" :round="20">
			<view class="code">
				<image :src="imgBase+'code_top_bg.png'"></image>
				<view class="code-box">
					<p>授权码登录</p>
					<view class="code-box-inp adfacjb" style="margin-top: 64rpx;">
						<view class="code-box-inp-left">手机号码</view>
						<view class="code-box-inp-right">
							<u-input v-model="phone" inputAlign="right" fontSize="30rpx" color="#667E90" border="none" placeholder-style="color:#B3BFC8;font-size:28rpx;" placeholder="请输入手机号"></u-input>
						</view>
					</view>
					<view class="code-box-inp adfacjb">
						<view class="code-box-inp-left">授权码</view>
						<view class="code-box-inp-right">
							<u-input v-model="code" inputAlign="right" fontSize="30rpx" color="#667E90" border="none" placeholder-style="color:#B3BFC8;font-size:28rpx;" placeholder="请输入授权码"></u-input>
						</view>
					</view>
					<view class="zt_btn" @tap="toCodeLogin">立即登录</view>
					<view class="qx_btn" @tap="cancel">取消</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				show:false,
				phone:'',
				code:'',
				agree:false,
				channelType:'',
				teamQuestionnaireId:'',
				referrerId:''
			}
		},
		created() {
			if(uni.getStorageSync('channelType')) this.channelType = uni.getStorageSync('channelType')
			if(uni.getStorageSync('shareTQId')) this.teamQuestionnaireId = uni.getStorageSync('shareTQId')
			if(uni.getStorageSync('shareUserId')) this.referrerId = uni.getStorageSync('shareUserId')
		},
		methods:{
			decryptPhoneNumber(e){
				if(!this.agree) return this.$showToast('请勾选协议与政策')
				if(uni.getStorageSync('token')){
					uni.reLaunch({
						url:'/pages/home'
					})
					return
				}
				if(e.detail.code) this.wxLogin(e.detail.code);
			},
			codeLogin(){
				if(!this.agree) return this.$showToast('请勾选协议与政策')
				this.show = true;
			},
			toCodeLogin(){
				if(!this.$reg.mobile(this.phone)) return this.$showToast('请输入正确的手机号！')
				if(!this.code) return this.$showToast('请输入授权码！')
				this.$api.get('/wx/login-code',{
					checkCode:this.code,
					phone:this.phone
				}).then(res=>{
					if(res.data.code!==0) return this.$showToast(res.data.msg)
					this.loginSuccessFn(res);
				})
			},
			cancel(){
				this.code = '';
				this.show = false;
			},
			wxLogin(code){
				uni.showLoading({ title:'登录中' });
				let that = this;
				wx.login({
					success(res){
						that.$api.get('/wx/login',{
							code:res.code,
							phoneCode:code,
							channelType:that.channelType,
							teamQuestionnaireId:that.teamQuestionnaireId,
							referrerId:that.referrerId,
						},false).then(res=>{
							if(res.data.code===0){
								if(res.data.data.isRegister==1){
									if(uni.getStorageSync('newUser')) uni.removeStorageSync('newUser')
									that.loginSuccessFn(res);
								} else{
									uni.setStorageSync('newUser',true)
									uni.navigateTo({
										url:'/pages/registerInfo?params='+encodeURIComponent(JSON.stringify({
											info:{
												channelType:that.channelType||'',
												mobile:res.data.data.mobile||'',
												isRegister:res.data.data.isRegister,
												referrerId:res.data.data.referrerId||that.referrerId||'',
												teamQuestionnaireId:res.data.data.teamQuestionnaireId||that.teamQuestionnaireId||'',
												userId:res.data.data.id||'',
												openId:res.data.data.openId||'',
											},
											user:{
												token:res.data.data.token,
												openId:res.data.data.openId,
												id:res.data.data.id,
												gender:res.data.data.gender,
												realName:res.data.data.realName,
												mobile:res.data.data.mobile,
												headUrl:res.data.data.headUrl,
												teamId:res.data.data.teamId,
												enterpriseId:res.data.data.enterpriseId,
												enterpriseName:res.data.data.enterpriseName,
												teamName:res.data.data.teamName,
												channelType:that.channelType||'',
												referrerId:res.data.data.referrerId||that.referrerId||'',
												teamQuestionnaireId:res.data.data.teamQuestionnaireId||that.teamQuestionnaireId||'',
												isRegister:res.data.data.isRegister
											}
										}))
									})
								}
							}else that.$showToast(res.data.msg)
						})
					}
				})
			},
			loginSuccessFn(res){
				uni.setStorageSync('token',res.data.data.token);
				uni.setStorageSync('userInfo',JSON.stringify({
					id:res.data.data.id,
					openId:res.data.data.openId,
					gender:res.data.data.gender,
					realName:res.data.data.realName,
					mobile:res.data.data.mobile,
					headUrl:res.data.data.headUrl,
					teamId:res.data.data.teamId,
					enterpriseId:res.data.data.enterpriseId,
					enterpriseName:res.data.data.enterpriseName,
					teamName:res.data.data.teamName,
					channelType:this.channelType||'',
					referrerId:res.data.data.referrerId||this.referrerId||'',
					teamQuestionnaireId:res.data.data.teamQuestionnaireId||this.teamQuestionnaireId||'',
					isRegister:res.data.data.isRegister
				}));
				
				uni.hideLoading();
				this.$showToast('登录成功');
				setTimeout(()=>{
					uni.reLaunch({ url:'/pages/home' })
				},1500)
			},
			changeAgree(){
				this.agree = !this.agree
			},
			turnPage(url){
				uni.navigateTo({
					url
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.page{
		background: #FFFFFF;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		
		.topbg{
			width: 100%;
			height: 584rpx;
			position: fixed;
			top: 0;
			left: 0;
		}
		
		.content{
			padding: 0 45rpx;
			flex: 1;
			overflow-y: auto;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			position: relative;
			
			.c_top{
				padding: 0 20rpx;
				&>image{
					width: 500rpx;
					height: 72rpx;
					margin-top: 87rpx;
				}
				.title{
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 30rpx;
					color: #002846;
					line-height: 40rpx;
					margin-top: 51rpx;
				}
				.tip{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #667E90;
					line-height: 40rpx;
					margin-top: 9rpx;
				}
				.item{
					margin-top: 40rpx;
					.qa{
						box-sizing: border-box;
						p{
							font-family: PingFang-SC, PingFang-SC;
							font-weight: bold;
							font-size: 30rpx;
							color: #002846;
							line-height: 42rpx;
							&:last-child{
								font-weight: 400;
								font-size: 24rpx;
								color: #667E90;
								line-height: 40rpx;
								margin-top: 12rpx;
							}
						}
					}
				}
			}
			
			.c_bottom{
				.qx_btn{
					margin-top: 36rpx;
					background: #FFFFFF;
					border: 1rpx solid #E0E4E7;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #002846;
				}
				.agree{
					margin-top: 64rpx;
					image{
						width: 30rpx;
						height: 30rpx;
					}
					.text{
						margin-left: 8rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #95A5B1;
						line-height: 44rpx;
						span{
							color: #002846;
						}
					}
				}
			}
		}
	}
	
	.code{
		width: 100%;
		padding: 48rpx 30rpx 88rpx;
		box-sizing: border-box;
		border-radius: 32rpx 32rpx 0 0;
		position: relative;
		&>image{
			width: 100%;
			height: 514rpx;
			border-radius: 32rpx 32rpx 0 0;
			position: absolute;
			left: 0;
			top: 0;
		}
		.code-box{
			position: relative;
			p{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 36rpx;
				color: #002846;
				line-height: 36rpx;
				text-align: center;
			}
			&-inp{
				width: 100%;
				height: 120rpx;
				background: #FFFFFF;
				border-radius: 24rpx;
				padding: 0 24rpx;
				box-sizing: border-box;
				margin-top: 20rpx;
				&-left{
					width: 130rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 30rpx;
					color: #002846;
					line-height: 42rpx;
				}
				&-right{
					width: calc(100% - 130rpx);
					
				}
			}
			
			.zt_btn{
				margin-top: 149rpx;
				font-size: 32rpx;
				letter-spacing: 2rpx
			}
			.qx_btn{
				margin-top: 40rpx;
				background: #FFFFFF;
				border: 1rpx solid #E0E4E7;
				color: #002846;
				font-size: 32rpx;
				letter-spacing: 2rpx;
			}
		}
	}
</style>