v3-lab-xcx/pages/login/login.vue

<!-- 登录 -->
<template>
	<view id="login">
		<img class="login-max-big" :src="loginBanner">
		<view class="login-box">
			<view class="tabTitle">
				<view class="tabTitle_li" @tap="tabClick(index)" :key="index" v-for="(item,index) in tabText">
					<view :class="{on:curTab==index}" class="tabTitle_text">{{item}}</view>
					<view :class="{on:curTab==index}" class="tabTitle_across"></view>
				</view>
			</view>
			<view class="input-max-box-one">
				<view class="input-box">
					<img src="@/images/basicsModules/img_log_in_account.png" />
					<input type="text" v-model="username" placeholder="请输入账号" maxlength="20">
				</view>
			</view>
			<view class="input-max-box-two">
				<view class="input-box">
					<img src="@/images/basicsModules/img_log_in_password.png" />
					<input type="password" v-model="password" placeholder="请输入密码" maxlength="20">
				</view>
			</view>
			<view class="check-box" @click="checkboxChange">
				<img v-if="checkedType" src="@/images/basicsModules/icon_13.png" />
				<img v-if="!checkedType" src="@/images/basicsModules/icon_12.png" />
				<view>记住我</view>
			</view>
			<view class="button-box" @click="login">登录</view>
			<view class="button-box" @click="getCode">huoqu </view>
		</view>
	</view>
</template>

<script>
	import md5 from '@/utils/md5.js'
	import {
		config
	} from '@/api/request/config.js'
	import {
		login,
		configInfo,
		getConfigByType,
		getGentleIdentifier,
		systemAppletRolePermission
	} from '@/api/basicsModules/index.js'
	import {
		Encrypt,
		Decrypt
	} from '@/utils/secret.js'
	export default {
		data() {
			return {
				identityStatus: 1,
				// username:"superadmin",
				// password:"zd123456",
				username: "sudiyu",
				password: "zd123456",
				checkedType: false,
				loginBanner: uni.getStorageSync('loginBanner'),
				infoList: [], //模板消息Id
				tabText: ['师生登录'],
				curTab: 0,
				pageType: 0,
				supplierType: false,
			}
		},

		onLoad(option) {
			//供应商注册成功后返回到供应商注册页面
			if (option.status) {
				this.identityStatus = 2
			}
			if (uni.getStorageSync('userName') && uni.getStorageSync('password')) {
				this.username = uni.getStorageSync('userName');
				this.password = uni.getStorageSync('password');
				this.checkedType = true;
			}


		},
		onShow() {
			// this.getConfigInfo();
			// #ifdef MP-WEIXIN

			uni.login({
				"provider": "weixin",
				"onlyAuthorize": true, // 微信登录仅请求授权认证
				success: function(event) {
					const {
						code
					} = event
					console.log(code)
				},
				fail: function(err) {
					// 登录授权失败
					// err.code是错误码
				}
			})
			// #endif
			// #ifdef H5

			// #endif


		},
		methods: {
			getCode(){
				
				const appid = 'YOUR_APP_ID';
				const redirectUri = encodeURIComponent('http://yourwebsite.com/callback.html');
				const authUrl =
					`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirectUri}&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect`;
				window.location.href = authUrl;
			},
			//顶部tab点击
			tabClick(index) {
				this.curTab = index;
			},
			//登录
			async login() {
				let self = this;
				let obj = {
					account: this.username,
					password: md5.hex_md5(this.password),
				}
				const {
					data
				} = await login(obj)
				if (data.code == 200) {
					uni.setStorageSync('token', data.data.token);
					uni.setStorageSync('userId', data.data.userId);
					// userType 0-系统 1-教职工 2-学生 3-大屏
					uni.setStorageSync('userType', data.data.userType == 0 || data.data.userType == 1 ? '1' :
						(data.data.userType == 2 ? '2' : (data.data.userType == 3 ? '3' : 'none')));
					if (this.checkedType) {
						uni.setStorageSync('userName', this.username)
						uni.setStorageSync('password', this.password)
					} else {
						uni.removeStorageSync('userName')
						uni.removeStorageSync('password')
					}
					//等待配置与字段获取到后跳转
					Promise.all([
						//获取开发配置
						this.getConfigByType(),
						//获取权限字段
						this.systemAppletRolePermission()
					]).then((result) => {
						if (uni.getStorageSync('codeData')) {
							uni.redirectTo({
								url: '/pages/saoCode/saoCode',
							});
						} else {
							uni.redirectTo({
								url: '/pages/mine/mine',
							});
						}
					}).catch((error) => {
						wx.showToast({
							title: '数据异常,请稍候再试!',
							icon: "none",
							duration: 3000
						});
					})



					//获取身份标识
					// this.getGentleIdentifier();
				}
			},
			//获取权限字段
			async systemAppletRolePermission() {
				let self = this;
				const {
					data
				} = await systemAppletRolePermission();
				if (data.code == 200) {
					uni.setStorageSync('permissions', data.data.data)
				}
			},
			switchClick() {
				if (this.identityStatus == 1) {
					this.identityStatus = 2;
				} else {
					this.identityStatus = 1;
				}
			},
			//查询公共配置
			async getConfigInfo() {
				const {
					data
				} = await configInfo({
					type: '1,2,4'
				});
				if (data.code == 200) {
					let list = JSON.parse(data.data)
					let newData = {};
					list.forEach((item) => {
						let obj = JSON.parse(item.configValue)
						newData = {
							...newData,
							...obj
						}
					})
					uni.setStorageSync('circularLogo', config.base_url + newData.circularLogo)
					uni.setStorageSync('videoCover', config.base_url + newData.videoCover)
					this.$set(this, 'loginBanner', config.base_url + newData.loginBanner);
					uni.setStorageSync('loginBanner', config.base_url + newData.loginBanner)
					this.$set(this, 'supplierType', newData.supplier);
					uni.setStorageSync('supplierType', newData.supplier)
					uni.setStorageSync('homepageBanner', config.base_url + newData.homepageBanner)
				}
			},
			//获取开发配置
			async getConfigByType() {
				const {
					data
				} = await getConfigByType({
					category: 2,
					configType: 5
				});
				if (data.code == 200) {
					let obj = JSON.parse(data.data.configValue)
					//文件预览地址
					uni.setStorageSync('filePreviewUrl', 'https://' + obj.fileExtranetUrl)
					//摄像头代理访问地址
					uni.setStorageSync('cameraExtranetAgent', 'https://' + obj.cameraExtranetAgent)
					//摄像头地址ip段
					uni.setStorageSync('cameraIntranetAgent', obj.cameraIntranetAgent)
					//摄像头访问地址
					uni.setStorageSync('cameraUrl', 'https://' + obj.cameraExtranetUrl)
					//MQTT地址
					uni.setStorageSync('mqttUrl', Decrypt(obj.mqttExtranetUrl))
					//MQTT账号
					uni.setStorageSync('mqttUser', Decrypt(obj.mqttExtranetUser))
					//MQTT密码
					uni.setStorageSync('mqttPassword', Decrypt(obj.mqttExtranetPassword))
				}
			},
			checkboxChange() {
				this.checkedType = !this.checkedType;
			},

		},

	}
</script>


<style lang="stylus" scoped>
	#login {
		height: 100%;
		width: 100%;

		background #f5f5f5;
		position relative;

		.login-max-big {
			width: 750rpx;
			height: 1177rpx;
			z-index: 0;
		}

		.login-box {
			z-index: 3;
			position: absolute;
			top: 446rpx;
			left: 46rpx;
			width: 658rpx;
			height: 700rpx;

			// background #fff
			/* 切换按钮 */
			.tabTitle {
				display flex;
				width: 100%;
				height: 100rpx;
				position: absolute;
				top: 50rpx;
				justify-content: center;

				.tabTitle_li {
					width: 168rpx;
					text-align center;

					.tabTitle_text {
						display: inline-block;
						font-size: 32rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #333333;
						line-height: 90rpx;

						&.on {
							color: #0183FA;
						}
					}

					.tabTitle_across {
						width: 100rpx;
						height: 4rpx;
						background: #0183FA;
						border-radius: 2rpx;
						margin-left 30rpx;
						display none;

						&.on {
							display block;
						}
					}

				}
			}

			border-radius:20rpx;

			.input-max-box-one {
				overflow: hidden;
				margin-top: 68rpx;

				.input-box {
					display flex;
					width: 600rpx;
					height: 80rpx;
					border: 1rpx solid #e0e0e0;
					border-radius: 40rpx;
					margin: 147rpx auto 0;

					img {
						width: 28rpx;
						height: 32rpx;
						margin: 24rpx 31rpx;
					}

					input {
						flex: 1;
						font-size: 24rpx;
						height: 80rpx;
						line-height: 80rpx;
						margin-right: 31rpx;
					}
				}

				.text-box {
					height: 59rpx;
					line-height: 59rpx;
					color: #DC1616;
					font-size: 24rpx;
					margin-left: 102rpx;
				}
			}

			.input-max-box-two {
				margin-top: 40rpx;

				.input-box {
					display flex;
					width: 600rpx;
					height: 80rpx;
					border: 1rpx solid #e0e0e0;
					border-radius: 40rpx;
					margin: 0 auto 0;

					img {
						width: 30rpx;
						height: 32rpx;
						margin: 24rpx 30rpx;
					}

					input {
						flex: 1;
						font-size: 24rpx;
						height: 80rpx;
						line-height: 80rpx;
						margin-right: 31rpx;
					}
				}

				.text-box {
					height: 59rpx;
					line-height: 59rpx;
					color: #DC1616;
					font-size: 24rpx;
					margin-left: 102rpx;
				}
			}

			.check-box {
				margin: 30rpx 0 30rpx 104rpx;
				width: 300rpx;
				height: 50rpx;
				display: flex;

				img {
					margin-top: 10rpx;
					width: 32rpx;
					height: 32rpx;
					margin-right: 10rpx;
				}

				view {
					font-size: 24rpx;
					line-height: 50rpx;
				}
			}

			.button-box {
				width: 600rpx;
				line-height: 80rpx;
				background: #0183FA;
				border-radius: 40rpx;
				font-size: 36rpx;
				color: #fff;
				text-align center;
				margin: 0 auto 0;
			}

			/* 供应商注册 */
			.supplier {
				display: flex;
				justify-content: space-between;
				margin: 30rpx 40rpx 0;

				.supplier_l {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 24rpx;
				}

				.supplier_r {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 24rpx;

					>text {
						color: #0183FA;
					}
				}
			}

			/* 供应商切换 */
			.switch_btn {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #0183FA;
				line-height: 24rpx;
				margin-top: 60rpx;

				>img {
					width: 24rpx;
					height: 24rpx;
					margin-left: 12rpx;
				}
			}
		}

		.top-back {
			z-index: 2;
			position: absolute;
			top: 261rpx;
			left: 375rpx;
			height: 296rpx;
			width: 366rpx;
		}
	}
</style>