FE-app-oam/pages/basicsModule/login.vue

<!-- 登录 -->
<template>
  <view id="login">
		<!-- 服务信息 -->
		<view class="login-title-box">
			<image v-if="serverData.logo" class="logo-img" :src="serverData.logo"></image>
			<image v-else class="logo-img" :src="logoImg"></image>
			<p class="logo-title">{{serverData.title?serverData.title:'运维管理端'}}</p>
		</view>
		<!-- 选中服务信息 -->
		<view class="ip-max-box">
			<view class="ip-box-null"></view>
			<view class="ip-big-box" @click="showListBox(1)">
				<view class="ip-min-box" v-if="serverData.agreement && serverData.ip">
					<view class="ip-box-text">{{serverData.agreement}}://</view>
					<view class="ip-box-text">{{serverData.ip}}</view>
				</view>
				<view class="ip-text-box" v-else>
					<view class="ip-box-text">请选择服务</view>
				</view>
				<view class="ip-box-icon" :class="serverData.type?'ip-box-icon-true':'ip-box-icon-false'"></view>
			</view>
			<view class="ip-box-null"></view>
		</view>
		<!-- 登录窗口 -->
		<view class="login-max-big-box">
			<view class="login-input-box">
				<view>账号</view>
				<input type="text" v-model="username" placeholder="请输入账号" :maxlength="20">
			</view>
			<view class="login-input-box">
				<view>密码</view>
				<input type="password" v-model="password" placeholder="请输入密码" :maxlength="20">
			</view>
			<view class="login-input-box">
				<input v-model="code" placeholder="请输入验证码" :maxlength="10">
				<image :src="codeImg" @click="authCaptcha"></image>
			</view>
			<view class="login-button">
				<view @click="login">登录</view>
			</view>
		</view>
		<!-- 选择弹窗 -->
		<view class="position-max-big-box" v-if="serverIpAddressType">
			<view class="position-big-box">
				<view class="positon-title-box">
					<view class="positon-title">服务列表</view>
					<view class="positon-off" @click="showListBox(2)">关闭</view>
				</view>
				<view class="positon-list-box">
					<view class="positon-list-null" v-if="!serverIpAddress[0]">暂无数据</view>
					<view class="positon-for-box" @click="checkItem(index)"
					v-for="(item,index) in serverIpAddress" :key="index">
						<view class="positon-for-title-box">
							<view>{{item.name}}</view>
							<view>{{item.agreement}}://{{item.ip}}</view>
						</view>
						<view class="psoiton-check-box">
							<image v-if="checkIndex == index" :src="checkImg"></image>
						</view>
					</view>
				</view>
				<view class="positon-button-box">
					<view class="positon-button-left" @click="showListBox(3)">编辑</view>
					<view class="positon-button-del" @click="showListBox(5)">删除</view>
					<view class="positon-button-right" @click="showListBox(4)">确定</view>
				</view>
			</view>
		</view>
		<!-- 新增弹窗 -->
		<view class="position-max-big-box" v-if="serverIpAddressAddType">
			<view class="position-big-box">
				<view class="positon-title-box">
					<view class="positon-title">{{addTitle}}</view>
					<view class="positon-off" @click="showAddBox(2)">关闭</view>
				</view>
				<view class="positon-list-box">
					<view class="add-input-box">
						<view class="add-input-icon">*</view>
						<view class="add-input-title">服务名称：</view>
						<input class="add-input" v-model="addForm.name"   type="text"  placeholder="请输入服务名称" placeholder-style="color:#999;">
					</view>
					<view class="add-input-box">
						<view class="add-input-icon">*</view>
						<view class="add-input-title">协议：</view>
						<picker class="add-input" @change="agreementChange" :value="agreementIndex" :range="agreementArray">
							<view
							:class="!addForm.agreement?'add-input-placeholder':''">
								{{addForm.agreement?addForm.agreement:'请选择协议'}}
							</view>
						</picker>
					</view>
					<view class="add-input-box">
						<view class="add-input-icon">*</view>
						<view class="add-input-title">地址：</view>
						<input class="add-input" v-model="addForm.ip" type="text" placeholder="请输入IP地址" placeholder-style="color:#999;">
					</view>
				</view>
				<view class="positon-button-box">
					<view class="positon-button-right" @click="showAddBox(3)">保存</view>
				</view>
			</view>
		</view>
  </view>
</template>

<script>
import md5 from '@/utils/md5.js'
import { Encrypt,Decrypt} from '@/utils/secret'
import { authConfigInfo,authCaptcha,login,systemMenuGetRouters,getConfigByType } from '@/api/index.js'
export default {
  data() {
    return {
			//选中服务器
			serverData:{},
			//服务器列表
			serverIpAddress:[],
			serverIpAddressType:false,
			checkIndex:null,
			logoImg:require('@/images/logo.png'),
			checkImg:require('@/images/check.png'),
			//新增相关
			serverIpAddressAddType:false,
			addForm:{},
			addType:null,
			agreementArray:['http','https'],
			agreementIndex:0,
			//账号密码
			username:'',
			password:'',
			code:'',
			codeImg:'',
			uuid:'',
			//新增窗口名称
			addTitle:'',
    }
  },
  onLoad(option) {
  },
  onShow(){
		this.getServerIpAddress();
  },
  methods: {
		//初始化
		getServerIpAddress(){
			//获取本地服务器数据
			let list = uni.getStorageSync('serverIpAddress');
			this.$set(this,'serverIpAddress',list[0]?list:[]);
		},
		//使用ip地址
		setIpConfig(data){
			let self = this;
			uni.setStorageSync('serverConfig',data)
			setTimeout(function(){
				self.authConfigInfo(data);
			},200);
		},
		//获取验证码
		async authCaptcha(){
			if(this.serverData.type){
				const {data} = await authCaptcha();
				if(data.code == 200){
					this.$set(this,'codeImg',"data:image/gif;base64," + data.data.image);
					this.$set(this,'uuid',data.data.uuid);
				}
			}
		},
		//获取首页配置
		async authConfigInfo(item){
			let self = this;
			const {data} = await authConfigInfo({type:'1'});
			if(!data){
				this.$set(this,'serverData',{
					title:null,
					logo:null,
					name:item.name,
					agreement:item.agreement,
					ip:item.ip,
					type:false,
				});
				this.$set(this,'uuid','');
				this.$set(this,'codeImg','');
			}else if(data.code==200){
				let obj = JSON.parse(JSON.parse(data.data)[0].configValue);
				this.$set(this,'serverData',{
					title:obj.schoolName,
					logo:item.agreement + '://' + item.ip + obj.circularLogo,
					// logo:'https://img1.baidu.com/it/u=2134768505,3615749700&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
					name:item.name,
					agreement:item.agreement,
					ip:item.ip,
					type:true,
				});
				self.authCaptcha();
			}else{
				this.$set(this,'serverData',{
					title:obj.schoolName,
					logo:item.agreement + '://' + item.ip + obj.circularLogo,
					// logo:'https://img1.baidu.com/it/u=2134768505,3615749700&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
					name:item.name,
					agreement:item.agreement,
					ip:item.ip,
					type:false,
				});
				this.$set(this,'uuid','');
				this.$set(this,'codeImg','');
			}
		},
		//展示服务器列表按钮
		showListBox(type){
			let self = this;
			if(type == 1){
				//开启
				this.$set(this,'checkIndex',null);
				uni.showActionSheet({
					itemList: ['新增', '切换'],
					success (res) {
						if(res.tapIndex == 0){
							self.showAddBox(1)
						}else if(res.tapIndex == 1){
							self.$set(self,'serverIpAddressType',true);
						}
					},
					fail (res) {
						
					}
				});
			}else if(type == 2){
				//关闭
				this.$set(this,'serverIpAddressType',false);
			}else if(type == 3){
				//选中编辑
				if(this.checkIndex != null){
					this.$set(this,'addTitle','编辑服务');
					this.$set(this,'addType',2);
					this.$set(this,'addForm',JSON.parse(JSON.stringify(this.serverIpAddress[this.checkIndex])));
					this.$set(this,'serverIpAddressType',false);
					this.$set(this,'serverIpAddressAddType',true);
				}else{
					uni.showToast({
					    mask:true,
					    icon:"none",
					    position:"center",
					    title: '请选择服务',
					    duration: 1000
					});
				}
			}else if(type == 4){
				//选中确定
				if(this.checkIndex != null){
					this.setIpConfig(JSON.parse(JSON.stringify(this.serverIpAddress[this.checkIndex])));
					this.$set(this,'serverIpAddressType',false);
				}else{
					uni.showToast({
					    mask:true,
					    icon:"none",
					    position:"center",
					    title: '请选择服务',
					    duration: 1000
					});
				}
			}else if(type == 5){
				//选中删除
				if(this.checkIndex != null){
          this.serverIpAddress.splice(this.checkIndex,1);
					this.$set(this,'checkIndex',null);
					uni.setStorageSync('serverIpAddress',this.serverIpAddress);
				}else{
					uni.showToast({
					    mask:true,
					    icon:"none",
					    position:"center",
					    title: '请选择服务',
					    duration: 1000
					});
				}
			}
		},
		//选中服务器
		checkItem(index){
			this.$set(this,'checkIndex',index)
		},
		//新增服务按钮
		showAddBox(type){
			let self = this;
			if(type == 1){
				//开启
				self.$set(self,'addTitle','新增服务');
				self.$set(self,'addForm',{
					name:'',
					agreement:'',
					ip:'',
				});
				self.$set(self,'addType',1);
				self.$set(self,'serverIpAddressAddType',true);
			}else if(type == 2){
				//关闭
				self.$set(self,'serverIpAddressAddType',false);
			}else if(type == 3){
				//提交
				if(!this.addForm.name){
					uni.showToast({
							mask:true,
							icon:"none",
							position:"center",
							title: '请输入服务名称',
							duration: 1000
					});
					return
				}
				if(!this.addForm.agreement){
					uni.showToast({
							mask:true,
							icon:"none",
							position:"center",
							title: '请选择协议',
							duration: 1000
					});
					return
				}
				if(!this.addForm.ip){
					uni.showToast({
							mask:true,
							icon:"none",
							position:"center",
							title: '请输入IP地址',
							duration: 1000
					});
					return
				}
				let obj = JSON.parse(JSON.stringify(this.addForm))
				if(this.addType == 1){
					//新增
					this.serverIpAddress.push(obj);
					uni.setStorageSync('serverIpAddress',this.serverIpAddress);
					this.setIpConfig(obj);
					this.$set(self,'serverIpAddressAddType',false);
				}else if(this.addType == 2){
					//编辑
					this.$set(self.serverIpAddress,this.checkIndex,obj);
					uni.setStorageSync('serverIpAddress',this.serverIpAddress);
					this.setIpConfig(obj);
					this.$set(self,'serverIpAddressAddType',false);
				}
			}
		},
		//选中协议
		agreementChange(event){
			this.$set(this,'agreementIndex',event.target.value);
			this.$set(this.addForm,'agreement',this.agreementArray[event.target.value]);
		},
		//登录
		async login(){
			let self = this;
			if(!this.serverData.type){
				uni.showToast({
						mask:true,
						icon:"none",
						position:"center",
						title: '当前服务不可用,请选择其他服务.',
						duration: 2000
				});
			}else{
				if(!this.username){
					uni.showToast({
							mask:true,
							icon:"none",
							position:"center",
							title: '请输入账号',
							duration: 1000
					});
					return
				}
				if(!this.password){
					uni.showToast({
							mask:true,
							icon:"none",
							position:"center",
							title: '请输入密码',
							duration: 1000
					});
					return
				}
				if(!this.code){
					uni.showToast({
							mask:true,
							icon:"none",
							position:"center",
							title: '请输入验证码',
							duration: 1000
					});
					return
				}
				let obj = {
				  account:this.username,
				  password:md5.hex_md5(this.password),
				  code:this.code,
				  uuid:this.uuid,
				}
				const {data} = await login(obj)
				if(data.code == 200){
					if(data.data.userType == 0){
						uni.setStorageSync('token',data.data.token);
						// 等待配置与字段获取到后跳转
						Promise.all([
							//获取路由判断权限
							this.systemMenuGetRouters(),
							this.getConfigByType(),
						]).then((result)=>{
							uni.reLaunch({
								url: '/pages/basicsModule/home',
							});
						}).catch((error) => {
							wx.showToast({
								title: '数据异常,请稍候再试!',
								icon: "none",
								duration: 3000
							});
						})
					}else{
						uni.showToast({
								mask:true,
								icon:"none",
								position:"center",
								title: '只限系统用户登录',
								duration: 1000
						});
					}
				}else{
					uni.showToast({
						mask: true,
						icon: "none",
						position: "center",
						title: data.message,
						duration: 2000
					});
					setTimeout(function(){
						self.authCaptcha();
					},1800);
				}
			}
		},
		//获取路由
		async systemMenuGetRouters(){
			let self = this;
			const {data} = await systemMenuGetRouters();
			if(data.code==200){
				let permissionsList = [];
				forListFunction(data.data);
				function forListFunction(newList){
					for(let i=0;i<newList.length;i++){
						if(newList[i].perms){
							permissionsList.push(newList[i].perms)
						}
						if(newList[i].child){
							forListFunction(newList[i].child)
						}
					}
				}
				uni.setStorageSync('permissions',permissionsList)
			}
		},
		//获取公共配置
		async getConfigByType(){
			let self = this;
			const {data} = await getConfigByType({ category: 2, configType: 5 });
			if(data.code==200){
        let obj = JSON.parse(data.data.configValue)
				uni.setStorageSync('fileBrowseEnvironment',Decrypt(obj.fileBrowseEnvironment))
			}
		},
		
	}
}
</script>


<style lang="stylus" scoped>
	#login{
		flex:1;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		.login-title-box{
			.logo-img{
				display: block;
				width:200rpx;
				height:200rpx;
				margin:40rpx auto 0;
			}
			.logo-title{
				text-align: center;
				font-size:36rpx;
				font-weight:700;
				line-height:40rpx;
				margin-top:40rpx;
			}
		}
		.ip-max-box{
			margin-top:40rpx;
			display: flex
			.ip-big-box{
				display: flex
				border:1rpx solid #dedede;
				border-radius:8rpx;
				padding:0 15px;
				box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.1);
				background-color: #fff;
				.ip-min-box{
					display: flex
					.ip-box-text{
						height:60rpx;
						line-height:60rpx;
						color: #666;
						font-size:26rpx;
					}
				}
				.ip-text-box{
					.ip-box-text{
						height:60rpx;
						line-height:60rpx;
						color: #666;
						font-size:26rpx;
					}
				}
				.ip-box-icon{
					width:20rpx;
					height:20rpx;
					border-radius:50%;
					margin:20rpx 0 0 20rpx;
				}
				.ip-box-icon-true{
					background-color: #32cd32;
				}
				.ip-box-icon-false{
					background-color: #ff4500;
				}
			}
			.ip-box-null{
				flex:1;
			}
		}
		.position-max-big-box{
			z-index:100;
			position: absolute;
			bottom:0;
			left:0;
			width:100%;
			height:100%;
			background-color: rgba(0,0,0,0.6);
			.position-big-box{
				width:80%;
				height:80%;
				margin-left:10%;
				margin-top:10%;
				border-radius:16rpx;
				display: flex;
				flex-direction:column;
				overflow: hidden;
				.positon-title-box{
					display: flex;
					position: relative;
					background-color: #fff;
					border-bottom:1px solid #dedede;
					.positon-title{
						flex:1;
						line-height:100rpx;
						text-align:center;
						font-size:30rpx;
					}
					.positon-off{
						flex:1;
						position: absolute;
						right:20rpx;
						top:20rpx;
						width:100rpx;
						line-height:60rpx;
						font-size:28rpx;
						background-color: #999;
						color: #fff;
						text-align: center;
						border-radius:6rpx;
					}
				}
				.positon-list-box{
					flex:1;
					background-color: #fff;
					padding:20rpx;
					overflow-y: scroll;
					overflow-x: hidden;
					.positon-list-null{
						font-size:28rpx;
						text-align:center;
						line-height:100rpx;
						color:#999;
					}
					.positon-for-box:nth-child(odd){
						background-color: #dddddd;
					}
					.positon-for-box:nth-child(even){
						background-color: #eeeeee;
					}
					.positon-for-box{
						display: flex;
						padding:15rpx 20rpx 10rpx;
						.positon-for-title-box{
							flex:1;
							display: flex;
							flex-direction: column;
							view{
								color:#333;
							}
							view:nth-child(1){
								line-height:50rpx;
								font-size:28rpx;
							}
							view:nth-child(2){
								line-height:40rpx;
								font-size:24rpx;
							}
						}
						.psoiton-check-box{
							width:60rpx;
							height:100rpx;
							image{
								display: block;
								height:30rpx;
								width:38rpx;
								margin-top:30rpx;
							}
						}
					}
					.add-input-box{
						display: flex;
						margin:40rpx 0 0 0;
						.add-input-icon{
							width:30rpx;
							text-align: right;
							color:#FF6666;
							margin-right:10rpx;
							font-size:28rpx;
							line-height:60rpx;
						}
						.add-input-title{
							color:#333;
							width:150rpx;
							font-size:28rpx;
							line-height:60rpx;
						}
						.add-input{
							display: block
							flex:1;
							margin-right:40rpx;
							border:1px solid #dedede;
							border-radius:8rpx;
							height:60rpx;
							line-height:60rpx;
							font-size:24rpx;
							padding:0 20rpx;
							input{
								height:60rpx;
								line-height:60rpx;
								font-size:24rpx;
							}
						}
						.add-input-placeholder{
							color: #999 !important;
						}
					}
				}
				.positon-button-box{
					height:80rpx;
					border-top:1px solid #dedede;
					display:flex;
					.positon-button-left{
						flex:1;
						line-height:80rpx;
						color:#fff;
						background-color:#3ea3e9;
						text-align: center;
						font-size:24rpx;
					}
					.positon-button-del{
						flex:1;
						line-height:80rpx;
						color:#fff;
						background-color:#FF6666;
						text-align: center;
						font-size:24rpx;
					}
					.positon-button-right{
						flex:1;
						line-height:80rpx;
						color:#fff;
						background-color:#0183FA;
						text-align: center;
						font-size:24rpx;
					}
				}
			}
		}
		.login-max-big-box{
			margin:100rpx auto;
			width:600rpx;
			height:460rpx;
			background-color: #fff;
			box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.1);
			border-radius:12rpx;
			overflow: hidden;
			.login-input-box{
				display: flex;
				width:500rpx;
				margin:40rpx auto 0;
				border:1px solid #dedede;
				border-radius:8rpx;
				view{
					text-align: center;
					width:100rpx;
					border-right:1px solid #dedede;
					line-height:60rpx;
					font-size:26rpx;
					color:#333;
				}
				input{
					padding:0 20rpx;
					flex:1;
					height:60rpx;
					font-size:26rpx;
					line-height:60rpx;
					color:#333;
				}
				image{
					border-left:1px solid #dedede;
					width:160rpx;
					height:60rpx;
				}
			}
			.login-button{
				border-radius:8rpx;
				text-align: center;
				width:260rpx;
				margin:40rpx auto 0;
				background-color:#0183FA;
				color:#fff;
				height:60rpx;
				font-size:26rpx;
				line-height:60rpx;
			}
		}
	}
</style>