卡介质登录

snowy-admin-web/src/views/auth/login/single-window-login.vue

@@ -16,64 +16,121 @@
 				<div class="swl-content-login-right">
 					<div class="swlclr-login">
 						<div class="swlclr-login-div">
-							<div class="swlclr-login-div-title">{{ $t('login.signInTitle') }}</div>
-							<a-form class="login-form" ref="loginForm" :model="ruleForm" :rules="rules">
-								<a-form-item name="account">
-									<a-input
-										v-model:value="ruleForm.account"
-										:placeholder="$t('login.accountPlaceholder')"
-										size="large"
-										@keyup.enter="login"
-									>
-										<template #prefix>
-											<UserOutlined class="login-icon-gray" />
-										</template>
-									</a-input>
-								</a-form-item>
-								<a-form-item name="password">
-									<a-input-password
-										v-model:value="ruleForm.password"
-										:placeholder="$t('login.PWPlaceholder')"
-										size="large"
-										autocomplete="off"
-										@keyup.enter="login"
-									>
-										<template #prefix>
-											<LockOutlined class="login-icon-gray" />
-										</template>
-									</a-input-password>
-								</a-form-item>
-								<a-form-item name="validCode" v-if="captchaOpen === 'true'">
-									<a-row :gutter="8">
-										<a-col :span="17">
-											<a-input
-												v-model:value="ruleForm.validCode"
-												:placeholder="$t('login.validLaceholder')"
-												size="large"
-												@keyup.enter="login"
-											>
-												<template #prefix>
-													<verified-outlined class="login-icon-gray" />
+							<div class="swlclr-login-div-title">
+								<div class="swlclr-login-div-title-1 __hover" :class="{active: loginMode === 'account'}" @click="loginMode = 'account'">{{ $t('login.signInTitle') }}</div>
+								<template v-if="config.lang === 'zh-cn'">
+									<div class="swlclr-login-div-title-line"/>
+									<div class="swlclr-login-div-title-2 __hover" :class="{active: loginMode === 'card'}" @click="loginMode = 'card'">卡介质登录</div>
+								</template>
+							</div>
+							<template v-if="loginMode === 'account'">
+								<a-form class="login-form" ref="loginForm" :model="ruleForm" :rules="rules">
+									<a-form-item name="account">
+										<a-input
+											v-model:value="ruleForm.account"
+											:placeholder="$t('login.accountPlaceholder')"
+											size="large"
+											@keyup.enter="login"
+										>
+											<template #prefix>
+												<UserOutlined class="login-icon-gray" />
+											</template>
+											<template #addonAfter v-if="config.lang === 'zh-cn'">
+												<a class="__hover" href="https://app.singlewindow.cn/userserver/user/findusername/choseFindUserNameType" target="_blank">忘记用户名</a>
+											</template>
+										</a-input>
+									</a-form-item>
+									<a-form-item name="password">
+										<a-input-password
+											v-model:value="ruleForm.password"
+											:placeholder="$t('login.PWPlaceholder')"
+											size="large"
+											autocomplete="off"
+											@keyup.enter="login"
+										>
+											<template #prefix>
+												<LockOutlined class="login-icon-gray" />
+											</template>
+											<template #addonAfter>
+												<template v-if="config.lang === 'zh-cn'">
+													<a class="__hover" href="https://app.singlewindow.cn/nuserwebserver/static/#/resetPwd?projectFlag=0" target="_blank">忘记密码</a>
+												</template>
+												<template v-else>
+													<a class="__hover" href="https://app.singlewindow.cn/userserver/rest/userNra/find/findPWIndex" target="_blank">Forgot Password</a>
 												</template>
-											</a-input>
-										</a-col>
-										<a-col :span="7">
-											<img :src="validCodeBase64" class="login-validCode-img" @click="loginCaptcha" />
-										</a-col>
-									</a-row>
-								</a-form-item>
-								<div class="agree" v-if="config.lang === 'zh-cn'">
-									<a-checkbox v-model:checked="loginAgree"/>
-									<span style="color:#222222">已阅读并同意</span>
-									<span style="color: #096ac6;text-decoration:underline dotted; cursor:pointer;" @click="agreeTipsYhfwxy = true">《用户服务协议》</span>
-									<span>和</span>
-									<span style="color: #096ac6;text-decoration:underline dotted; cursor:pointer;"  @click="agreeTipsYhyszc = true">《用户隐私政策》</span>
-								</div>
-								<a-button type="primary" class="w-full mt-4" :loading="loading" round size="large" @click="login">
-									{{ $t('login.signIn') }}
-								</a-button>
-								<div class="zhuce">{{ $t('login.noAccount') }}<span>{{ $t('login.registerAccount') }}</span></div>
-							</a-form>
+											</template>
+										</a-input-password>
+									</a-form-item>
+									<a-form-item name="validCode" v-if="captchaOpen === 'true'">
+										<a-row :gutter="8">
+											<a-col :span="17">
+												<a-input
+													v-model:value="ruleForm.validCode"
+													:placeholder="$t('login.validLaceholder')"
+													size="large"
+													@keyup.enter="login"
+												>
+													<template #prefix>
+														<verified-outlined class="login-icon-gray" />
+													</template>
+												</a-input>
+											</a-col>
+											<a-col :span="7">
+												<img :src="validCodeBase64" class="login-validCode-img" @click="loginCaptcha" />
+											</a-col>
+										</a-row>
+									</a-form-item>
+								</a-form>
+							</template>
+							<template v-else-if="loginMode === 'card'">
+								<a-form class="login-form" ref="cardForm" :model="cardRuleForm">
+									<a-form-item name="password">
+										<a-input-password
+											v-model:value="cardRuleForm.password"
+											placeholder="卡介质密码"
+											size="large"
+											autocomplete="off"
+											@keyup.enter="cardLogin"
+										>
+											<template #prefix>
+												<LockOutlined class="login-icon-gray" />
+											</template>
+											<template #addonAfter>
+												<a class="__hover" href="https://www.singlewindow.cn/#/detail?breadNum=bc9&articleId=0000000000002256" target="_blank">忘记卡密码?</a>
+											</template>
+										</a-input-password>
+									</a-form-item>
+								</a-form>
+							</template>
+							<div class="agree" v-if="config.lang === 'zh-cn'">
+								<a-checkbox v-model:checked="loginAgree"/>
+								<span style="color:#222222">已阅读并同意</span>
+								<span style="color: #096ac6;text-decoration:underline dotted; cursor:pointer;" @click="agreeTipsYhfwxy = true">《用户服务协议》</span>
+								<span>和</span>
+								<span style="color: #096ac6;text-decoration:underline dotted; cursor:pointer;"  @click="agreeTipsYhyszc = true">《用户隐私政策》</span>
+							</div>
+							<a-button type="primary" class="w-full mt-4" style="background-color: #00599c;border-radius: 4px;" :loading="loading" round size="large" @click="loginMode === 'account' ? login() : cardLogin()">
+								{{ $t('login.signIn') }}
+							</a-button>
+							<div class="card-tips" v-if="loginMode === 'card'">
+								<div>请按照以下步骤进行：</div>
+								<div><div class="index">1</div>请确认已下载并启动了&nbsp;<a class="__hover" href="https://update.singlewindow.cn/downloads/EportClientSetup_V1.5.50.exe" target="_blank">客户端控件</a></div>
+								<div><div class="index">2</div>插入中国电子口岸卡介质</div>
+								<div><div class="index">3</div>输入卡介质密码</div>
+							</div>
+							<div class="tips">
+								<template v-if="config.lang === 'zh-cn'">
+									<template v-if="loginMode === 'account'">
+										<div class="zhuce">卡介质丢失/损坏？<a class="__hover" href="https://app.singlewindow.cn/nuserwebserver/static/#/corp/accountActive?projectFlag=0" target="_blank">账号激活</a></div>
+									</template>
+									<template v-else-if="loginMode === 'card'">
+										<div class="zhuce">卡介质有问题？<a class="__hover" href="https://www.singlewindow.cn/#/detail?breadNum=bc9&articleId=0000000000002287" target="_blank">制卡电话</a></div>
+									</template>
+								</template>
+								<div class="zhuce">
+									{{ $t('login.noAccount') }}
+									<a class="__hover" :href="config.lang === 'zh-cn' ? 'https://app.singlewindow.cn/nuserwebserver/static/#/corp/accountActive?projectFlag=0' : 'https://app.singlewindow.cn/userserver/user/abroad/index'" target="_blank">{{ $t('login.registerAccount') }}</a></div>
+							</div>
 						</div>
 					</div>
 				</div>
@@ -181,6 +238,7 @@
 	const loginAgree = ref(false)
 	const agreeTipsYhfwxy = ref(false)
 	const agreeTipsYhyszc = ref(false)
+	const loginMode = ref('account')
 
 	const ruleForm = reactive({
 		account: '', // superAdmin
@@ -189,6 +247,9 @@
 		validCodeReqNo: '',
 		autologin: false
 	})
+	const cardRuleForm = reactive({
+		password: '',
+	})
 
 	const rules = reactive({
 		account: [required(proxy.$t('login.accountError'), 'blur')],
@@ -279,6 +340,7 @@
 	}
 	//登陆
 	const loginForm = ref()
+	const cardForm = ref()
 	const login = async () => {
 		if (loginAgree.value || config.value.lang === 'en') {
 			loginForm.value
@@ -292,15 +354,6 @@
 					validCode: ruleForm.validCode,
 					validCodeReqNo: ruleForm.validCodeReqNo
 				}
-
-				// 获取token
-				// loginApi.login(loginData).then((loginToken) => {
-				// 	afterLogin(loginToken)
-				// }).catch(() => {
-				// 	loading.value = false
-				// 	loginCaptcha()
-				// })
-
 				// 获取token
 				try {
 					const loginToken = await loginApi.login(loginData)
@@ -324,8 +377,44 @@
 			})
 		}
 	}
+	const cardLogin = async () => {
+		if (loginAgree.value) {
+			if (!cardRuleForm.password) {
+				alert('IC卡/Key密码不允许为空')
+			} else {
+				loading.value = true
+				const loginData = {
+					account: 'yqyc',
+					// 密码进行SM2加密，传输过程中看到的只有密文，后端存储使用hash
+					password: smCrypto.doSm2Encrypt(cardRuleForm.password),
+					validCode: 'szzf',
+					validCodeReqNo: 'szzf'
+				}
+				// 获取token
+				try {
+					const loginToken = await loginApi.login(loginData)
+					const loginAfter = afterLogin(loginToken)
+				} catch (err) {
+					loading.value = false
+					// loginCaptcha()
+				}
+			}
+		} else {
+			Modal.confirm({
+				title: '提示',
+				content: '请阅读并勾选《用户服务协议》和《用户隐私政策》！',
+				centered: true,
+				width: 420,
+				icon: createVNode(ExclamationCircleOutlined),
+				maskClosable: false,
+				onOk() {},
+				onCancel() {}
+			})
+		}
+	}
 	const configLang = (key) => {
 		config.value.lang = key
+		loginMode.value = 'account'
 	}
 </script>
 <style lang="less" scoped>
@@ -406,12 +495,25 @@
 						box-sizing: border-box;
 						position: relative;
 						.swlclr-login-div-title {
-							font-weight: 700;
-							color: #00599c;
+							font-weight: 400;
+							color: #999999;
 							font-size: 18px;
 							margin-top: 18px;
 							margin-bottom: 28px;
 							text-align: center;
+							display: flex;
+							align-items: center;
+							justify-content: center;
+							gap: 20px;
+							.swlclr-login-div-title-line {
+								width: 1px;
+								height: 16px;
+								background-color: #c4c4c4;
+							}
+							.active {
+								color: #00599c;
+								font-weight: 700;
+							}
 						}
 						:deep(.login-form) {
 							.ant-form-item-control-input-content {
@@ -420,20 +522,66 @@
 									border: none;
 									box-shadow: none;
 								}
+								.ant-input-group-addon {
+									background-color: transparent;
+									border: none;
+									color: #096AC6;
+									font-size: 13px;
+									font-weight: 400;
+								}
 							}
 						}
 						.agree {
 							font-size: 12px;
 						}
-						.zhuce {
+						.card-tips {
+							margin-top: 12px;
+							width: 330px;
+							height: 120px;
+							background: rgba(222, 235, 247, 0.60);
+							border-radius: 3px;
+							padding-left: 20px;
+							padding-top: 12px;
+							cursor: default;
+							font-size: 13px;
+							color: #333333;
+							line-height: 25px;
+							>div {
+								display: flex;
+								align-items: center;
+								.index {
+									display: flex;
+									justify-content: center;
+									align-items: center;
+									width: 15px;
+									height: 15px;
+									border-radius: 50%;
+									color: #ffffff;
+									line-height: 15px;
+									margin-right: 8px;
+									background-color: #00599C;
+									font-size: 12px;
+								}
+								>a {
+									color: #096AC6;
+									font-weight: 700;
+								}
+							}
+						}
+						.tips {
 							margin-top: 40px;
 							width: 100%;
-							text-align: right;
-							font-size: 13px;
-							color: #999999;
-							>span {
-								color: #096AC6;
-								font-weight: 700;
+							display: flex;
+							.zhuce {
+								font-size: 13px;
+								color: #999999;
+								>a {
+									color: #096AC6;
+									font-weight: 700;
+								}
+								&:last-child {
+									margin-left: auto;
+								}
 							}
 						}
 					}