jiangximiniprogramSchool/pages/login/login.vue

<template>
	<view class="main">
		<view class="u-back-top">
			<view class="backBox">
				<u-icon name="arrow-left" color="#333" size="28"></u-icon>
			</view>
		</view>
		<view class="title">
			<image :src="imgUrl" mode=""></image>
		</view>
		<view class="form">
			<view class="form-item" @click.native="tenantClick">
				<mySelect :value="FormData.tenantName"  placeholder="请选择服务地区"/>
			</view>
			<view class="form-item">
				<view class="inputBox my">
					<u--input placeholder="请输入登录账号" border="none" clearable   v-model="FormData.username"></u--input>
				</view>
			</view>
			<view class="form-item">
				<view class="inputBox my">
					<u--input placeholder="请输入密码" border="none" clearable  style="height: 100%;" :clearable="false" v-model="FormData.password"></u--input>
				</view>
			</view>
			<view class="forgetTps"> <text  @click="$u.toast('请联系管理员重置密码！')">忘记密码</text></view>
			<view class="loginBtn" :class="{active: btnHighlight}" @click="submitFn">登  录</view>
			<!-- <view class="radioWrap">
				<u-checkbox-group >
					<u-checkbox v-model="isCheck" shape="circle" label="已阅读并同意" :labelSize="12" ></u-checkbox>
				</u-checkbox-group>
				<view class="privacyText">
					<text>《用户协议》</text>和 <text>《隐私协议》</text>
				</view>
			</view> -->
		</view>
		<u-picker :show="show" :columns="columnsArea" keyName="name" @confirm="confirmArea" @cancel="show=false" @close="show=false"></u-picker>
		<u-action-sheet :actions="list" :title="title" :show="showRole" @select="selectClick" ></u-action-sheet>
	</view>
</template>

<script>
	import { loginPwd, tenantPage } from '@/config/api.js'
	import { imgUrl } from '@/config/site.config.js'
	export default {
		data() {
			return {
				isCheck: false,
				codeText: '获取验证码',
				FormData: {
					username: '',
					password: '',
					tenantName: ''
				},
				imgUrl: imgUrl+'loginTitle.png',
				codeOn: false,
				show: false,
				columnsArea: [],
				list: [],
				title: '请选择您要登录的角色',
				showRole: false,
				roleObj: {}
			}
		},
		onLoad() {
			this.tenantPageFn()
			this.roleObj = this.$store.state.user.vuex_role
		},
		onPullDownRefresh() {
			this.tenantPageFn()
		},
		computed: {
			
			btnHighlight() {
				let { FormData } = this
				return FormData.username.length>3&&FormData.password.length>3&&FormData.tenantName
			}
		},
		methods: {
			tenantClick() {
				if(!this.columnsArea.length) return this.$u.toast('没有获得服务地区，请下拉刷新重新加载')
				this.show = true
			},
			selectClick(item) {
				this.showRole = false
				this.chooseIdentity(item.name)
				// alert(item.name)
			},
			chooseIdentity(name) {
				let url = '/pages/tabbar/statistics/index'
				this.$store.commit('upDateIdentity', name)
				if(name=='实操教练') {
					url = '/pages/tabbar/student/index'
				}else if(name=='模拟器老师') {
					url = '/pages/tabbar/examSimulation/index'
				}
				uni.reLaunch({
					url
				})
			},
			confirmArea(val) {
				let item = val.value[0]
				this.FormData.tenantName =item.name
				this.$store.commit('upDateTenantId', item.id)
				this.show = false
			},
			async tenantPageFn() {
				let obj = {
					pageNo: 1,
					pageSize: 100,
					status: 0
				}
				const {data: res} = await tenantPage(obj)
				this.columnsArea = [res.list]
				console.log(res)
			},
			// 是否选择协议
			groupChangeEnvnt(e) {
				this.isCheck = e.value
				console.log('是否选择协议', this.isCheck)
			},
			// 发送短信验证码
			async goSms() {
				const {
					FormData
				} = this
				if (!FormData.phone) return this.$u.toast('请输入手机号');
				if (!this.isPhone) return this.$u.toast('手机号格式有误');
				if (this.codeOn) return
				const data = await getLoginCode({
					codeType: 1,
					phone: FormData.phone,
				})
				console.log(data)
				// 获取验证码
				var time = 60;
				var timer = setInterval(() => {
					time--;
					this.codeText = time + "秒后重新发送"
					this.codeOn = true;
					if (time == 0) {
						clearInterval(timer);
						this.codeText = "获取验证码";
						this.codeOn = false;
					}
				}, 1000);
			},
			
			async submitFn() {
				// this.chooseIdentity('考场模拟教练') 
				// return
				if(!this.btnHighlight) return 
				const {data: res} = await loginPwd(this.FormData)
				this.$store.commit('update_vuex_loginInfo', res)
				await this.$store.dispatch('getUserInfo')
				
				console.log(this.role)
				this.list = []
				this.role.forEach((item)=>{
					let obj = {
						name: this.roleObj[item]
					}
					this.list.push(obj)
				})
				if(this.list.length>1) {
					this.showRole = true
				}else {
					this.chooseIdentity(this.list[0].name)
				}
				console.log(this.list)
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.main {
		width: 100%;
		min-height: 100vh;
		// background: url('http://192.168.1.20:81/zhili/image/20230922/f5e2cfaf05f441c1b9f897e7dc284f1d.png') no-repeat;
		// background-size: 100% 360rpx;
	  .u-back-top {
		  padding: 32rpx 0 0 0;
	    .backBox {
			padding: 24rpx;
	    }
	  }
	
	  .title {
			width: 658rpx;
			height: 94rpx;
			margin: 100rpx auto 100rpx auto;
	  }
	
	  .form {
		  padding: 0 46rpx;
	    .form-item {
			height: 112rpx;
			background: #F4F7FF;
			border-radius: 16rpx;
			width: 100%;
			line-height: 112rpx;
			display: flex;
			margin-bottom: 40rpx;
			padding: 0 40rpx;
	      .prefix {
			  display: flex;
			  align-items: center;
			  font-size: 32rpx;
			  color: #333;
			  font-weight: 600;
	      }
	
	      .inputBox {
			  flex: 1;
	      }
		  .code {
		  	color: #BBBBBB;
			margin-left: 30rpx;
		  	&.active {
		  		color: $themC
		  	}
		  }
	    }
		.forgetTps {
			font-size: 28rpx;
			color: $themC;
			margin-top: -20rpx;
			text-align: right;
		}
	    .loginBtn {
			width: 100%;
			height: 112rpx;
			background: rgba(25,137,250,0.3);
			border-radius: 16rpx;
			text-align: center;
			line-height: 112rpx;
			font-size: 32rpx;
			font-weight: 600;
			color: #fff;
			margin-top: 100rpx;
			&.active {
				background: rgba(25,137,250,1);
			}
	    }
	
	    .radioWrap {
			display: flex;
			align-items: center;
			margin-top: 40rpx;
	      .privacyText {
			  font-size: 24rpx;
			  color: #888E94;
	        text {
				color: $themC;
	        }
	      }
	    }
	  }
	}
</style>