ParkApp/pages/login/login.vue

<template>
	<view class="">
		<view class="top">
			
		</view>
		<view class="content" style="height: 85vh;">
			<scroll-view style="border-radius: 20rpx;padding-left: 20rpx;" scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
				<view class="cu-item text-lg" :class="index==current?'text-checked text-bold cur':''" v-for="(item,index) in list" :key="index" @tap="tabSelect(index)" >
					{{item.name}}
				</view>
			</scroll-view>
			<view class="item">
				<swiper :circular="true" style="height: 100%;" :current="current"  @change="swiperChange"
					@animationfinish="animationfinish">
					<swiper-item style="height: 100%;">
						<view class="flex justify-center flex-direction align-center">
							<image style="width: 120rpx;height: 120rpx;" src="../../static/login/yuangong.png" ></image>
						</view>
						<view class="input">
							<image src="../../static/login/yuanqu.png" mode=""></image>
							<input disabled v-model="agencyName"  @click="agencyShow = true" placeholder="请选择您所在的园区"  type="text" value="" />
						</view>
						<view class="input">
							<image class="phone" src="../../static/login/phone.png" mode=""></image>
							<input v-model="phone" placeholder="请输入您的手机号码"  type="text" value="" />
						</view>
						<view class="input" style="position: relative;">
							<image src="../../static/login/code.png" mode=""></image>
							<input v-model="yzm" style="width: 60%;" placeholder="请输入验证码"  type="text" value="" />
							<view :style="showText?'':'background-color: #A7A7A7;'"  class="code" @click="getCode()">{{tips}}</view>
						</view>
					</swiper-item>
					<swiper-item >
						<view class="flex justify-center flex-direction align-center">
							<image style="width: 90rpx;height: 90rpx;" src="../../static/login/qiye.png" ></image>
						</view>
						<view class="input">
							<image src="../../static/login/yuanqu.png" mode=""></image>
							<input disabled v-model="agencyName"  @click="agencyShow = true" placeholder="请选择您所在的园区" type="text" value="" />
						</view>
						<view class="input">
							<image class="qiye" src="../../static/login/qiye.png" mode=""></image>
							<input disabled v-model="enterpriseName" @click="enterpriseShow = true" placeholder="请选择您所在的企业"  type="text" value="" />
						</view>
						<view class="input" >
							<image src="../../static/login/account.png" mode=""></image>
							<input v-model="enterpriseAccount" style="width: 60%;" placeholder="请输入您的登录账号"  type="text" value="" />
						</view>
						<view class="input" >
							<image src="../../static/login/password.png" mode=""></image>
							<input v-model="enterprisePassword" style="width: 60%;" placeholder="请输入您的登录密码"  type="password" value="" />
						</view>
					</swiper-item>
					<swiper-item >
						<view class="flex justify-center  " >
							<image style="width: 120rpx;height: 120rpx;" src="../../static/login/guanliyuan.png" ></image>
						</view>
						<view class="input">
							<image src="../../static/login/yuanqu.png" mode=""></image>
							<input disabled v-model="agencyName"  @click="agencyShow = true" placeholder="请选择您所在的园区" type="text" value="" />
						</view>
						<view class="input" >
							<image src="../../static/login/account.png" mode=""></image>
							<input v-model="agencyAccount" style="width: 60%;" placeholder="请输入您的登录账号"  type="text" value="" />
						</view>
						<view class="input" >
							<image src="../../static/login/password.png" mode=""></image>
							<input type="password" v-model="agencyPassword" style="width: 60%;" placeholder="请输入您的登录密码"   value="" />
						</view>
					</swiper-item>
					<swiper-item >
						<view class="flex justify-center flex-direction align-center">
							<image style="width: 100rpx;height: 100rpx;" src="../../static/login/fangke.png"></image>
						</view>
						<view class="input">
							<image class="qiye" src="../../static/login/time.png" mode=""></image>
							<input disabled v-model="interviewTime"  @click="interviewTimeShow = true" placeholder="请选择访问时间"  type="text" value="" />
						</view>
						<view class="input">
							<image src="../../static/login/yuanqu.png" mode=""></image>
							<input disabled v-model="agencyName"  @click="agencyShow = true" placeholder="请选择您要访问的园区" type="text" value="" />
						</view>
						<view class="input">
							<image class="qiye" src="../../static/login/qiye.png" mode=""></image>
							<input disabled v-model="enterpriseName" @click="enterpriseShow = true" placeholder="请选择您要访问的企业 (选填)"  type="text" value="" />
						</view>
						<view @click="jump('/pages/guest/records/records')" class="text-center base-color padding-top-50 text-lg">
							<text style="text-decoration: underline;">申请记录</text>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<button v-if="current!=3" class="button" @click="login()">登 录</button>
			<button v-else class="button" @click="applyOpenDoor">申请开门</button>
		</view>
		<!-- 园区 -->
		<u-popup  border-radius="60" height="60%"  mode="bottom" v-model="agencyShow">
			<view class="fixed cu-bar search bg-white">
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<u-input style="width: 90%;" v-model="agencyKeyWord" type="text" :adjust-position="false" placeholder="请输入关键字搜索" confirm-type="search"/>
				</view>
			</view>
			<scroll-view v-if="!$isEmpty(agencyList)"  style="padding-top: 110rpx;height: 100%;" :scroll-y="true" >
				<view @click="selectAgency(item)" hover-class="hoverClass" class="text-center padding-30 solid-bottom"  v-for="(item,index) in agencyList" :key="index">
					<text>{{item.agencyName}}</text>
				</view>
				<u-divider v-if="agencyList.length>=20" height="80">只显示20条数据</u-divider>
			</scroll-view>
			<u-empty v-else name="search"></u-empty>
		</u-popup>
		<!-- 企业列表 -->
		<u-popup  border-radius="60" height="60%"  mode="bottom" v-model="enterpriseShow">
			<view class="fixed cu-bar search bg-white">
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<u-input style="width: 90%;" v-model="enterpriseKeyword" type="text" :adjust-position="false" placeholder="请输入关键字搜索" confirm-type="search"/>
				</view>
			</view>
			<scroll-view v-if="!$isEmpty(enterpriseList)" style="padding-top: 110rpx;height: 100%;" :scroll-y="true" >
				<view @click="selectEnterprise(item)" hover-class="hoverClass" class="text-center padding-30 solid-bottom"  v-for="(item,index) in enterpriseList" :key="index">
					<text>{{item.enterpriseName}}</text>
				</view>
				<u-divider v-if="enterpriseList.length>=20" height="80">只显示20条数据</u-divider>
			</scroll-view>
			<u-empty v-else name="search"></u-empty>
		</u-popup>
		<!-- 访问时间 -->
		<u-picker @confirm="interviewTimeConfirm" :params="params" v-model="interviewTimeShow" mode="time"></u-picker>
		<!-- 验证码 -->
		<u-verification-code seconds="60" @end="end" @start="start" ref="uCode" @change="codeChange"></u-verification-code>
		
	</view>
</template>
<script>
var that;
export default {
	name: 'card',
	data() {
		return {
			backpath:'',
			
			contentHeight:'',
			
			list: [{
				name: '员工'
			}, {
				name: '企业'
			}, {
				name: '管理员',
			}, {
				name: '访客',
			}],
			current: 0,
			//发送验证码
			tips: '',
			showText:true,
			
			//园区下拉框
			agencyName:'',
			agencyList:[],
			agencyKeyWord:'',
			agencyShow:false,
			
			//园区登录
			agencyId:'',
			agencyAccount:'',
			agencyPassword:'',
			
			//企业下拉框
			enterpriseName:'',//回显
			enterpriseShow:false,
			enterpriseList:[],
			enterpriseKeyword:'',
			
			//企业登录
			creditCode:'',
			enterpriseId:'',
			enterpriseAccount:'',
			enterprisePassword:'',
			
			openId:'',
			//员工登录
			phone:'',
			yzm:'',
			
			//访客
			interviewTimeShow:false,
			interviewTime:'',
			params: {
				year: true,
				month: true,
				day: true,
				hour: false,
				minute: false,
				second: false
			},
		};
	},
	onLoad(options) {
		this.contentHeight=this.$u.sys().windowHeight+'px'
		that=this
		
		if(!this.$isEmpty(options.backpath)){
			this.backpath=options.backpath
		}
		
		if (this.$isAuth()) {
			uni.reLaunch({
				url:'/pages/index/index'
			})
			//免登录
			return
		}
		if(this.$isEmpty(this.$cache.get('openId'))){
			this.getOpenId()
		}else{
			this.openId=this.$cache.get('openId')
		}
		this.getAgencyList()
	},
	onShow() {
		this.handelNoToken()
		this.getAppletStatus()
	},
	watch:{
		agencyKeyWord(){
			let that=this
			//节流函数
			if (this.timer){
				clearTimeout(this.timer)
			}
			this.timer = setTimeout(() => {
				that.agencyList=[]
				that.getAgencyList()
			}, 500)
		},
		enterpriseKeyword(){
			let that=this
			//节流函数
			if (this.timer){
				clearTimeout(this.timer)
			}
			this.timer = setTimeout(() => {
				that.enterpriseList=[]
				that.getEnterpriseList()
			}, 500)
		},
	},
	methods:{
		//处理没token但是却选择了园区的情况
		//访客从申请列表返回登录页时，是没有token的，这样导致其他接口报错
		async handelNoToken(){
			let that=this
		 	if(!this.$cache.get('tokenObj')&&!this.$isEmpty(this.agencyId)){
				//如果没有token,且园区id不为空
				this.agencyList.forEach(item=>{
					if(item.id==that.agencyId){
						let params={
							tenantId:item.tenantId,
							username:item.account,
							password:item.password
						}
						//放进缓存中，并获取token
						that.$cache.put('tokenObj',params)
						//获取token
						that.$api.getToken(that.$u.queryParams(params)).then(res=>{
							let token=res.token_type+" "+res.access_token
							uni.setStorageSync('token', token)
							//获取企业列表
							that.getEnterpriseList()
						})
					}
				})
				
			}
		},
		//访问时间
		interviewTimeConfirm(e){
			this.interviewTime=e.year+'-'+e.month+'-'+e.day
		},
		/**
		 * 获取openid
		 */
		getOpenId(){
			uni.login({
				success: (res) => {
					let data={
						appId:this.$api.wxData.appId,
						jsCode:res.code,
						secret:this.$api.wxData.secret
					}
					this.$api.wxApi.getOpenId(data).then(res=>{
						let resData= JSON.parse(res.data)
						this.openId=resData.openid
						this.$cache.put('openId',this.openId)
					})
				}
			})
		},
		//获取园区列表
		getAgencyList(){
			let params={
				size:20,
				agencyName:this.agencyKeyWord
			}
			this.$api.agency.getAgencyTenantList(params).then(res=>{
				this.agencyList = res.data
			})
		},
		//选择园区
		selectAgency(item){
			console.log(item);
			let params={
				tenantId:item.tenantId,
				username:item.account,
				password:item.password
			}
			this.agencyId=item.id
			this.agencyName=item.agencyName
			this.agencyShow=false
			this.$cache.put('tokenObj',params)
			//获取token
			this.$api.getToken(this.$u.queryParams(params)).then(res=>{
				let token=res.token_type+" "+res.access_token
				uni.setStorageSync('token', token)
				//获取企业列表
				this.getEnterpriseList()
			})
		},
		/**
		 * 获取验证码
		 */
		async getCode() {
			let that=this
			
			if (this.$isEmpty(this.phone)) {
				this.$u.toast("请输入手机号")
				return
			}
			if (!this.$u.test.mobile(this.phone)) {
				this.$u.toast("请输入正确的手机号")
				return
			}
			if(this.$refs.uCode.canGetCode) {
				// 模拟向后端请求验证码
				uni.showLoading({
					title: '正在获取验证码'
				})
				setTimeout(async () => {
					uni.hideLoading();
					let params=`?phone=${this.phone}`
					this.$api.SMSApi.sendSms(params).then(res=>{
						if (res.data=='获取验证码成功') {
							that.$u.toast('验证码已发送');
							// 通知验证码组件内部开始倒计时
							that.$refs.uCode.start();
						}else{
							that.$refs.uTips.show({
								title: res.data,
								type: 'primary',
								duration: '3000'
							})
						}
						// 通知验证码组件内部开始倒计时
						that.$refs.uCode.start();
					}).catch(err=>{
						that.$u.toast('获取验证码失败');
					})
				}, 2300);
			} else {
				this.$u.toast('倒计时结束后再发送');
			}
		},
		codeChange(text) {
			this.tips = text;
		},
		end() {
			this.showText=true
		},
		start() {
			this.showText=false
		},
		//当前登录按钮操作
		async login() {
			if (this.current==0) {
				//员工登录
				this.staffLogin()
			}else if (this.current==1) {
				//企业登录
				this.enterpriseLogin()
			}else if (this.current==2) {
				//管理员登陆
				this.ganderLogin()
			}
		},
		//员工登录
		async staffLogin(){
			//15622205184
			if (this.phone=='15622205184') {
				this.userLogin()
				return
			}
			if (this.$isEmpty(this.agencyId)) {
				this.$u.toast('请选择您所在的园区')
				return
			}
			if (!this.phone) {
				uni.showToast({ title: '请输入手机号', icon: 'none' });
				return;
			}
			if (!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(this.phone)) {
				uni.showToast({ title: '请输入正确手机号', icon: 'none' });
				return;
			}
			if (!this.yzm) {
				uni.showToast({ title: '请输入验证码', icon: 'none' });
				return;
			}
			if (this.yzm.length!=6) {
				this.$u.toast('请输入6位数的验证码')
				return
			}
			let params={
				phone:this.phone,
				code:this.yzm
			}
			let smsRes=await this.$api.SMSApi.validCode(this.$u.queryParams(params))
			if (smsRes.data!='success') {
				this.$u.toast(smsRes.data)
				return
			}
			this.userLogin()
		},
		//用户登陆
		async userLogin(){
			//通过手机号查找该员工信息
			let staffRes=await this.$api.login({loginType:0,phone:this.phone})
			let records=staffRes.data
			if (this.$isEmpty(records)) {
				//如果没有员工信息。新用户。跳转到注册认证界面
				uni.navigateTo({
					url:'/pages/auth/auth?phone='+this.phone
				})
			}else{
				let userInfo=records[0]
				if (userInfo.examine==0) {
					//有员工信息，但审核未通过，提示等待审核
					this.$showModel('您的认证信息尚未审核，请联系企业负责人审核',false)
				}else if(userInfo.examine==1){
					//后台导入的员工信息没有openid,需要在小程序重新插入
					if (this.$isEmpty(userInfo.openId)&&!this.$isEmpty(this.openId)) {
						userInfo.openId=this.openId
						this.$api.enterprisestaff.submit(userInfo)
					}
					this.$cache.put('agencyId',userInfo.agencyId)
					this.$cache.put('agencyTenantId',userInfo.tenantId)
					getApp().globalData.userInfo=userInfo
					//存储手机号,便于拉取用户信息
					this.$cache.put('phone',userInfo.phone)
					this.$cache.put('userId',userInfo.id)
					this.$cache.put('enterpriseId',userInfo.enterpriseId)
					this.handelSuccessLogin('staff')
				}else if (userInfo.examine==2) {
					//审核不通过
					this.$showModel('您的认证信息审核不通过，是否重新认证!').then(res=>{
						uni.navigateTo({
							url:"/pages/auth/auth?operationType=1&phone="+that.phone
						})
					})
				}
			}
		},
		//获取企业列表
		getEnterpriseList(){
			let params={
				size:20,
				enterpriseName:this.enterpriseKeyword
			}
			this.$api.enterprise.page(params).then(res=>{
				this.enterpriseList =res.data.records
			})
		},
		//选择企业
		selectEnterprise(item){
			this.creditCode=item.creditCode
			this.enterpriseShow=false
			this.enterpriseName=item.enterpriseName
			this.enterpriseId=item.id
		},
		/**
		 * 企业登录
		 */
		async enterpriseLogin(){
			if(this.$isEmpty(this.agencyId)){
				this.$u.toast('请选择园区')
				return
			}
			if (this.$isEmpty(this.enterpriseId)) {
				this.$u.toast('请选择企业')
				return
			}
			if (this.$isEmpty(this.enterpriseAccount)) {
				this.$u.toast("请输入账号")
				return
			}
			if (this.$isEmpty(this.enterprisePassword)) {
				this.$u.toast("请输入密码")
				return
			}
			let params={
				"loginType":1,  
			    "enterpriseId": this.enterpriseId,
			    "enterpriseAccount": this.enterpriseAccount,
			    "enterprisePassword": this.enterprisePassword
			}
			this.$api.login(params).then(res=>{
				if (this.$isEmpty(res.data)) {
					this.$u.toast('账号或密码错误')
					return
				}else{
					//公司信息
					let userInfo=res.data[0]
					this.$cache.put('agencyId',userInfo.agencyId)
					getApp().globalData.userInfo=userInfo
					this.$cache.put('loginAccount',this.enterpriseAccount)
					this.$cache.put('agencyTenantId',userInfo.tenantId)
					this.$cache.put('creditCode',this.creditCode)
					this.$cache.put('enterpriseId',userInfo.enterpriseId)
					this.handelSuccessLogin('enterprise')
				}
			})
		},
		/**
		 * 管理员登陆
		 */
		async ganderLogin(){
			if (this.$isEmpty(this.agencyId)) {
				this.$u.toast('请选择您所在的园区')
				return
			}
			if (this.$isEmpty(this.agencyAccount)) {
				this.$u.toast('请输入账号')
				return
			}
			if (this.$isEmpty(this.agencyPassword)) {
				this.$u.toast('请输入密码')
				return
			}
			let params={
			    "loginType":2,  
			    "agencyId": this.agencyId,
			    "agencyAccount": this.agencyAccount,
			    "agencyPassword": this.agencyPassword
			}
			let res=await this.$api.login(params)
			let ganderInfo=res.data[0]
			if (this.$isEmpty(ganderInfo)) {
				this.$u.toast('账号或密码错误')
				return
			}
			//订阅消息通知
			await this.$mpi.subscribe(this.$adminTmplIds)
			//输入密码成功
			//园区信息
			this.$cache.put('loginAccount',this.agencyAccount)
			this.$cache.put('agencyId',ganderInfo.agencyId)
			this.$cache.put('agency',ganderInfo.agencyName)
			this.$cache.put('agencyTenantId',ganderInfo.tenantId)
			getApp().globalData.userInfo=ganderInfo
			this.handelSuccessLogin('agency')
		},
		/**
		 * 登录成功的处理方式
		 * 如果是从其他地方跳转回的登录页，则登录后跳转回原页面
		 * 否则跳转到首页
		 */
		handelSuccessLogin(loginType){
			that.$cache.put("loginType",loginType)
			if (!this.$isEmpty(this.backpath)) {
				uni.navigateTo({
					url:this.backpath
				})
				return
			}
			uni.switchTab({
				url:"/pages/index/index"
			})
		},
		async applyOpenDoor(){
			if (this.$isEmpty(this.interviewTime)) {
				this.$u.toast('请选择访问时间')
				return
			}
			if (this.$isEmpty(this.agencyId)) {
				this.$u.toast('请选择要访问的园区')
				return
			}
			let params={
				interviewTime:this.interviewTime,
				agencyId:this.agencyId,
				openId:this.openId
			}
			let res=await this.$api.guest.page(params)
			let data=res.data.records[0]
			if (this.$isEmpty(data)) {
				that.reApply(params)
				return
			}
			uni.showModal({
				content:"检测到您有该园区的申请记录，是否立即去开门？",
				cancelText:"重新申请",
				confirmText:'去开门',
				success: (res) => {
					if (res.confirm) {
						console.log("去开门")
					}else{
						that.reApply(params)
					}
				}
			})
		},
		reApply(params){
			params.enterpriseId=this.enterpriseId,
			params.agencyName=this.agencyName
			params.enterpriseName=this.enterpriseName
			uni.navigateTo({
				url:"/pages/guest/guest"+this.$u.queryParams(params)
			})
		},
		jump(url){
			if (!this.$isEmpty(url)) {
				uni.navigateTo({
					url
				})
			}
		},
		isToday(str){
		    var d = new Date(str.replace(/-/g,"/"));
		    var todaysDate = new Date();
		    if(d.setHours(0,0,0,0) == todaysDate.setHours(0,0,0,0)){
		        return true;
		    } else {
		        return false;
		    }
		},
		getAppletStatus(){
			this.$api.wxApi.getAppletStatus({id:1}).then(res=>{
				uni.setStorageSync("appletStatus",res.data.isOnline)
			})
		},
		tabSelect(index){
			this.current=index
		},
		swiperChange(e) {
		  this.current = e.detail.current
		},
		animationfinish({detail: { current }}) {
			this.current = current;
		},
	}
};
</script>

<style lang="scss">
	
	page{
		background-color: #FFFFFF;
		height: 100%;
	}
	.text-checked{
		font-size: 36rpx;
		// color: #333;
		color: $base-color;
	}
	
	.button{
		position: fixed;
		bottom: 5%;
		left: 0;
		right: 0;
		font-size: 28rpx;
		background: $base-color;
		color: #fff;
		height: 90rpx;
		margin:0rpx 30rpx;
		line-height: 90rpx;
		border-radius: 50rpx;
		box-shadow: 0 5px 7px 0 rgba(86, 119, 252, 0.2);
	}
	
	.guest{
		font-size: 28rpx;
		color: #fff;
		background: $base-color;
		height: 90rpx;
		margin:120rpx 30rpx;
		line-height: 90rpx;
		border-radius: 50rpx;
		box-shadow: 0 5px 7px 0 rgba(86, 119, 252, 0.2);
	}
	
	.top{	
		height: 220rpx;
		background-color: #5064eb;
	}
	
	.content{
		border-radius: 20rpx;
		background-color: #FFFFFF;
		margin: -120rpx 20rpx 0;
		.item{
			height: 100%;
			padding-top: 15%;
			.input{
				margin:40rpx 30rpx;
				border-radius: 50rpx;
				background-color: rgba(80, 100, 235,.1);
				display: flex;
				padding: 20rpx 30rpx;
				
				image{
					width: 30rpx;
					height: 36rpx;
					margin-top: 4rpx;
					margin-right: 20rpx;
				}
				
				.phone{
					width: 40rpx;
					height: 40rpx;
					margin-top: 4rpx;
					margin-right: 22rpx;
				}
				.qiye{
					width: 38rpx;
					height: 38rpx;
					margin-top: 4rpx;
					margin-right: 22rpx;
				}
				
				input{
					width: 100%;
					height: 100%;
				}
				
				.code{
					position: absolute;
					right: 22rpx;
					top: 18rpx;
					background: $base-color;
					color: #fff;
					font-size: 24rpx;
					border-radius: 50rpx;
					height: 50rpx;
					line-height: 50rpx;
					padding: 0 25rpx;
					z-index: 1000;
				}
			}
		}
	}
</style>