xg_total_process_master_cloud_h5/pages/login/login.vue

<template>
	<view class="content">
		<view id="box" v-if="whichPage === '1'">

			<view id="top" class="">
				<view class="top_le"></view>
				<view class="top_ri"></view>
			</view>
			<view class="title">
				<view>{{ loginTitle }}</view>
			</view>
			<view class="login-form">
				<u--form :model="inputForm" labelWidth="100px" labelPosition="left" :rules="rules" ref="uForm">
					<u-form-item label="用户名" borderBottom prop="username">
						<u-input border="none" v-model="inputForm.username" :adjust-position="false" />
					</u-form-item>
					<u-form-item label="密码" borderBottom prop="password">
						<u-input border="none" password v-model="inputForm.password" :adjust-position="false" />
					</u-form-item>
					<u-form-item label="验证码" borderBottom prop="code" v-if="passwordErrorCount >= 5">
						<u-input border="none" v-model="inputForm.code" :adjust-position="false" />
						<u--image :showLoading="true" :src="captchaImg" width="140px" height="40px"
							@click="getCaptcha"></u--image>
					</u-form-item>
				</u--form>
			</view>
			<view class="but">
				<u-button type="primary" shape="circle" color="linear-gradient(90deg, #1989FA, #19C2FA)"
					@click="bindLogin" text="欢迎登录"></u-button>
			</view>
			<view class="fot">
				<text @tap="openForgetPassword" style="color: #1989FA;">忘记密码</text>
			</view>
		</view>
		<view id="box" v-else-if="whichPage === '2'">

			<view id="top" class="">
				<view class="top_le"></view>
				<view class="top_ri"></view>
			</view>
			<view class="title">
				<view>修改密码</view>
				<view>使用账号绑定的手机号找回密码</view>
			</view>
			<view class="login-form">
				<u--form :model="inputForm" labelWidth="100px" labelPosition="left" :rules="rules" ref="uForm">
					<u-form-item label="绑定手机号" borderBottom prop="phoneNumber">
						<u-input border="none" v-model="inputForm.phoneNumber" placeholder='请输入绑定手机号' />
					</u-form-item>
					<u-form-item label="验证码" borderBottom prop="phoneCode">
						<u-input border="none" v-model="inputForm.phoneCode" placeholder="请输入验证码"></u-input>
						<u-button type="primary" @click="pushPhoneCode" :loading="!showPhoneCode"
							style="background-color: #3595f9; width: 100px;">
							<span v-if="showPhoneCode" style="color: white;">获取验证码</span>
							<span v-else class="count" style="color: white;">请等待 {{ count }} s</span>
						</u-button>
					</u-form-item>
					<u-form-item label="新密码" borderBottom prop="newPassword">
						<u-input border="none" v-model="inputForm.newPassword" placeholder='请输入新密码' />
					</u-form-item>
					<u-form-item label="确认密码" borderBottom prop="newPasswordAgain">
						<u-input border="none" v-model="inputForm.newPasswordAgain" placeholder='请输入确认密码' />
					</u-form-item>
				</u--form>
			</view>
			<view class="but">
				<u-button type="primary" shape="circle" color="linear-gradient(90deg, #1989FA, #19C2FA)"
					@click="saveNewPass" text="保存"></u-button>
			</view>
			<view class="fot">
				<!--				<text @tap="reg_ok">免费注册</text>-->
				<!--				<text style="display: inline-block;width: 10vw;"></text>-->
				<text @tap="backLogin" style="color: #1989FA;">前往登录页面</text>
			</view>
		</view>
	</view>
</template>

<script>
import * as $auth from "@/common/auth.js"
import loginService from "@/api/auth/loginService"
import { mapActions } from 'vuex'
var graceChecker = require("@/common/graceChecker.js");
export default {
	data() {
		return {
			loginTitle: '兴光业务管理系统平台',
			showPhoneCode: true,
			captchaImg: '',
			inputForm: {
				'username': '',
				'password': '',
				'code': '',
				'uuid': '',
				'phoneNumber': '',
				'phoneCode': '',
				'newPassword': '',
				'newPasswordAgain': '',
			},
			passwordErrorCount: 0,
			whichPage: '1', // 1为登录页面，2为忘记密码页面
			rules: {
				username: [
					{
						required: true,
						message: '请输入用户名',
						trigger: ['blur', 'change']
					}
				],
				password: [
					{
						required: true,
						message: '请输入密码',
						trigger: ['blur', 'change']
					}
				],
				code: [
					{
						required: true,
						message: '请输入验证码',
						trigger: ['blur', 'change']
					}
				],
				phoneNumber: [
					{
						required: true,
						message: '请输入绑定手机号',
						trigger: ['blur', 'change']
					}
				],
				phoneCode: [
					{
						required: true,
						message: '请输入验证码',
						trigger: ['blur', 'change']
					}
				],
				newPassword: [
					{
						required: true,
						message: '请输入新密码',
						trigger: ['blur', 'change']
					}
				],
				newPasswordAgain: [
					{
						required: true,
						message: '请输入确认密码',
						trigger: ['blur', 'change']
					}
				],
			}
		}
	},
	created() {
		this.getCaptcha()
		// 根据域名获取对应标题
		this.getLoginTitle()
	},
	methods: {
		...mapActions(['refreshUserInfo']),
		safeGetStorage(key, defaultValue = '') {
			if (typeof key !== 'string' || !key || key === 'undefined') {
				return defaultValue;
			}
			try {
				const value = uni.getStorageSync(key);
				return value === undefined || value === null ? defaultValue : value;
			} catch (e) {
				console.error('getStorageSync failed:', key, e);
				return defaultValue;
			}
		},
		// 区分租户显示对应的登录标题
		getLoginTitle() {
			const host = window.location.hostname;
			if (host === "cpaoa.xgccpm.com") {
			   this.loginTitle = "综合管理系统"
			} else if (host === "cpapmis.xgccpm.com") {
			 this.loginTitle = "会计业务管理系统"
			} else if (host === "amc.xgccpm.com") {
			  this.loginTitle = "评估管理系统"
			} else if (host === "zs.xgccpm.com") {
			   this.loginTitle = "中审管理系统"
			} else if (host === "wz.xgccpm.com") {
			this.loginTitle = "物资管理系统"
			} else if (host === "sz.xgccpm.com") {
			this.loginTitle = "苏州分公司"
			} else if (host === "jct.xgccpm.com") {
			  this.loginTitle = "景聚庭"
			}
		},
		// 登录
		bindLogin() {
			console.log(this.passwordErrorCount)
			console.log(this.passwordErrorCount)
			console.log(this.passwordErrorCount)
			console.log(this.passwordErrorCount)

			/**
			 * 客户端对账号信息进行一些必要的校验。
			 * 实际开发中，根据业务需要进行处理，这里仅做示例。
			 */
			this.$refs.uForm.validate().then(res => {
				const dingTalkBindKey = this.safeGetStorage('dingTalkBindKey');
				if (dingTalkBindKey) {
					this.inputForm.dingTalkBindKey = dingTalkBindKey;
					this.inputForm.tenantId = this.safeGetStorage('dingTalkTenantId', '10009') || '10009';
					loginService.dingTalkBindLogin(this.inputForm).then((data) => {
						uni.removeStorageSync('dingTalkBindKey');
						this.$store.commit('SET_TOKEN', data.token);
						this.refreshUserInfo();
						this.$router.push('/pages/index/index');
					}).catch(e => {
						this.passwordErrorCount++;
						console.error(e)
					})
					return;
				}
				this.inputForm.openId = this.safeGetStorage('openId');
				loginService.login(this.inputForm).then((data) => {
					this.$store.commit('SET_TOKEN', data.token);
					this.refreshUserInfo();
					// uni.reLaunch({
					// 	url: '/pages/index/index',
					// });
					this.$router.push('/pages/index/index');
				}).catch(e => {
					// 密码错误次数增加
					this.passwordErrorCount++;
					// 如果密码错误次数超过5次，显示验证码
					if (this.passwordErrorCount >= 5) {
						this.inputForm.code = ''; // 清空验证码输入框
						this.getCaptcha(); // 获取验证码
					}
					this.getCaptcha()
					if (e.data.includes("请输入验证码")) {
						this.passwordErrorCount = 5
					}
					console.error(e)
				})
			})
		},
		// 获取验证码
		getCaptcha() {
			loginService.getCode().then((data) => {
				this.captchaImg = 'data:image/gif;base64,' + data.codeImg
				this.inputForm.uuid = data.uuid
			})
		},
		openForgetPassword() {
			console.log('进来了')
			this.inputForm.username = ''
			this.inputForm.password = ''
			this.inputForm.code = ''
			this.$nextTick(() => {
				this.whichPage = '2' // 打开忘记密码页面
			})
		},
		backLogin() {
			this.inputForm.phoneNumber = ''
			this.inputForm.phoneCode = ''
			this.inputForm.newPassword = ''
			this.inputForm.newPasswordAgain = ''
			this.whichPage = '1' // 打开登录页面
		},
		pushPhoneCode() {
			// 验证手机号码格式是否正确
			console.log('this.inputForm.phoneNumber', this.inputForm.phoneNumber)
			console.log('this.checkMobile(this.inputForm.phoneNumber)', this.checkMobile(this.inputForm.phoneNumber))
			if (this.isNotEmpty(this.inputForm.phoneNumber) && this.checkMobile(this.inputForm.phoneNumber)) {
				// 向手机号发送验证码
				loginService.getPhoneCode(this.inputForm.phoneNumber).then((data) => {
					if (data.success) {
						uni.showToast({ title: data.message, icon: "success" });
						// ‘发送验证码’按钮倒计时
						const TIME_COUNT = 60 // 更改倒计时时间
						if (!this.timer) {
							this.count = TIME_COUNT
							this.showPhoneCode = false
							this.timer = setInterval(() => {
								if (this.count > 0 && this.count <= TIME_COUNT) {
									this.count--
								} else {
									this.showPhoneCode = true
									clearInterval(this.timer) // 清除定时器
									this.timer = null
								}
							}, 1000)
						}
					} else {
						this.$message.error(data.message)
					}
				})
			} else {
				uni.showToast({
					title: '请填写正确的手机号',
					icon: "none",
					duration: 2000
				})
			}
		},
		checkMobile(str) {
			const phone = /(^(\d{3,4}-)?\d{6,8}$)|(^(\d{3,4}-)?\d{6,8}(-\d{1,5})?$)|(^(((13[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(18[0-9]{1})|(17[0-9]{1})|(19[0-9]{1}))+\d{8})$)/
			if (str && !phone.test(str)) {
				uni.showToast({
					title: '绑定手机号填写不正确，请重新填写',
					icon: "none",
					duration: 2000
				})
				this.inputForm.phoneNumber = ''
				return false;
			} else {
				return true;
			}
		},
		isEmpty(value) {
			let result = false;
			if (value == null || value == undefined) {
				result = true;
			}
			if (typeof value == 'string' && (value.replace(/\s+/g, "") == "" || value == "")) {
				result = true;
			}
			if (typeof value == "object" && value instanceof Array && value.length === 0) {
				result = true;
			}
			return result;
		},
		isNotEmpty(value) {
			return !this.isEmpty(value)
		},
		saveNewPass() {

			return new Promise((resolve, reject) => {

				let errors = [];

				if (this.inputForm.newPassword !== this.inputForm.newPasswordAgain) {
					errors.push('两次输入的密码不相同，请重新输入!');
				}

				if (errors.length > 0) {
					// 存在错误，显示提示信息
					errors.forEach(error => {
						uni.showToast({
							title: error,
							icon: 'none',
							duration: 1500
						});
					});
					reject('Form validation failed');
				} else {
					loginService.savePwd(this.inputForm).then((data) => {
						if (data.success) {
							this.$message.success(data.message)
							this.inputForm.username = this.inputForm.phoneNumber
							this.inputForm.newPassword = this.inputForm.newPassword
							this.backLogin() // 修改密码成功后返回登录页面
							this.loading = false
						} else {
							this.$message.error(data.message)
							this.loading = false
						}
					}).catch(() => {
						this.loading = false
					})
				}
			});
		},
	}
}
</script>

<style lang="scss" scoped>
.content {
	height: 100vh;
	overflow: hidden;
}

#box {
	position: relative;
	min-height: 100vh;
	overflow: hidden;
	// color: $u-content-color;
}

.title {
	position: absolute;
	top: 160rpx;
	width: 100vw;
	text-align: center;
	font-size: 28rpx;
	color: #198bfa;

}

.title view:nth-child(1) {
	height: 54px;
	font-size: 56rpx;
	font-family: PingFang SC;
	font-weight: bold;
	text-shadow: 0px 2px 24px rgba(58, 199, 118, 0.4);

}

.title view:nth-child(2) {
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #198BFA;
	margin-top: 5vw;
}



#top {
	width: 100vw;
	height: 420rpx;
	position: relative;
}

.top_ri {
	width: 100vw;
	height: 100vw;
	background: linear-gradient(141deg, #19C0FA 0%, #198BFA 100%);
	opacity: 0.1;
	border-radius: 50%;
	position: absolute;
	right: -47vw;
	top: -37vw;
}

.top_le {
	width: 100vw;
	height: 100vw;
	background: linear-gradient(141deg, #19C0FA 0%, #198BFA 100%);
	opacity: 0.1;
	border-radius: 50%;
	position: absolute;
	left: -34vw;
	top: -54vw;
}

.inp {
	padding-left: 5vw;
	position: relative;
	top: -4vh;

}

.inp text {
	font-size: 36rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #333333;
	margin-left: 5px;
}


.but {
	padding-left: 50rpx;
	padding-right: 50rpx;
	margin-top: 60rpx;
}

.fot {
	width: 100vw;
	height: 26px;
	text-align: center;
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #8E8E8E;
	margin-top: 20px;
}

.login-form {
	padding-left: 100rpx;
	padding-right: 30rpx;
}
</style>