OfficeApp/pages/oaLogin/oaLogin.vue

<template>
	<view class="login">
		<image class="bg-iamge" src="../../static/img/login/login_back_img.png"></image>
		<!-- #ifdef APP-PLUS||H5 -->
		<view style="height: var(--status-bar-height);"></view>
		<!-- #endif -->
		<view class="body">
			<view class="title">欢迎进入里海供销平台！</view>
			<view class="login-card">
				<view class="top">
					<view class="text item">
						<u-tabs :list="tabList" @click="changeTabs" lineColor="#3274F9"
							itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;font-size: 32rpx;"></u-tabs>
					</view>
					<input v-if="current==0" class="mobile item" v-model="formData.account" placeholder="输入账号" />
					<input v-if="current==0" class="mobile item" v-model="formData.password" maxlength="26"
						placeholder="输入密码" password type="safe-password" />
					<input v-if="current==1" class="mobile item" v-model="formData.account" placeholder="输入手机号" />
					<view v-if="current==1" class="code item">
						<input placeholder="输入验证码" v-model="formData.code" maxlength="6" />
						<u-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"></u-code>
						<view class="get-code" @click="getCode">{{tips}}</view>
					</view>
					<view class="btn">
						<!-- <view>新用户注册</view> -->
						<!-- <view @click="forgetPWD">忘记密码?</view> -->
					</view>
				</view>
				<button class="submit_btn" @click="login">登录</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		loginAccount,
		userInfo,
		test
	} from "@/api/oaUser.js"
	import {
		Toast
	} from "../../libs/uniApi";
	export default {
		data() {
			return {
				tabList: [{
						name: '账号登录'
					},
					// {name:'手机登录'},
				],
				current: 0,
				formData: {
					account: '',
					password: '',
					code: '',
					terminal: 6, //6是APP端
					scene: 1
				},
				tips: '获取验证码',
				// refCode: null,
				seconds: 60,
			};
		},
		methods: {
			changeTabs(e) {
				this.current = e.index;
				this.formData.scene = e.index + 1;
			},
			async login() {
				if (!this.formData.account) return Toast('账号不能为空');
				if (this.formData.scene == 1 && !this.formData.password) return Toast('密码不能为空');
				if (this.formData.scene == 2 && !this.formData.code) return Toast('验证码不能为空');
				let that = this;
				// let res = await test();
				// console.log(res);
				uni.showLoading({
					title: '正在登录中'
				})
				let res = await loginAccount(that.formData);
				this.$store.commit('SET_USERINFO', {
					user: data,
					token: res.data.token
				})
				let {
					data
				} = await userInfo();
				this.$store.commit('setUserInfo', data);
				uni.hideLoading()
				uni.switchTab({
					url: '/pages/oaHome/oaHome'
				})
			},
			initTerminal() {
				// #ifndef APP-PLUS
				this.formData.terminal = 6;
				// #endif
				uni.getSystemInfo({
					success: (res) => {
						const platform = res.platform.toLowerCase();
						if (platform === 'ios') {
							this.formData.terminal = 5;
						} else if (platform === 'windows') {
							this.formData.terminal = 4;
						} else if (platform === 'mac') {
							this.formData.terminal = 4;
						}
					}
				})
				// #ifdef H5
				this.formData.terminal = 3;
				// #endif
				// #ifdef MP-WEIXIN
				this.formData.terminal = 1;
				// #endif
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			end() {
				// uni.$u.toast('倒计时结束');
			},
			start() {
				// uni.$u.toast('倒计时开始');
			},
			//忘记密码
			forgetPWD() {
				Toast('暂未开放')
			}
		},
		mounted() {
			this.initTerminal();
		}
	}
</script>

<style lang="scss">
	.login {
		width: 100vw;
		height: 100vh;
		position: relative;
		/* #ifdef H5 */
		background-image: url('../../static/img/login/login_back_img.png');

		/* #endif */
		.bg-iamge {
			width: 100vw;
			height: 100vh;
			position: absolute;
			z-index: -99;
		}

		.body {
			display: flex;
			flex-direction: column;
			align-items: center;

			.title {
				width: 694rpx;
				height: 74rpx;
				margin-top: 200rpx;
				margin-bottom: 51rpx;
				font-size: 53rpx;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 68rpx;
				-webkit-background-clip: text;
			}

			.login-card {
				width: 694rpx;
				height: 643rpx;
				background: #FFFFFF;
				border-radius: 21rpx 21rpx 21rpx 21rpx;
				opacity: 1;
				box-sizing: border-box;
				padding: 38.5rpx 0;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;

				.top {
					display: flex;
					justify-content: space-evenly;
					flex-direction: column;

					.item {
						margin-bottom: 35rpx;
					}

					.text {
						font-size: 32rpx;
						font-weight: 500;
						color: rgba(0, 0, 0, 0.8);
						line-height: 35rpx;
					}

					.mobile,
					.code {
						width: 613rpx;
						height: 112rpx;
						background: #F5F5F5;
						border-radius: 56rpx 56rpx 56rpx 56rpx;
						opacity: 1;
						padding: 0 45.56rpx;
						box-sizing: border-box;
						font-size: 28rpx;
						font-weight: 400;
						color: #333;
						line-height: 35rpx;
					}

					.code {
						display: flex;
						justify-content: space-between;
						align-items: center;

						input {
							font-size: 28rpx;
						}

						.get-code {
							color: $theme-oa-color;
						}
					}

					.btn {
						display: flex;
						justify-content: space-between;
					}
				}

				.submit_btn {
					width: 613rpx;
					height: 112rpx;
					background: $theme-oa-color;
					border-radius: 56rpx 56rpx 56rpx 56rpx;
					opacity: 1;
					text-align: center;
					line-height: 112rpx;
					color: #FFFFFF;
					font-size: 35rpx;
					font-weight: 500;
				}
			}
		}

	}
</style>