Fedex / iClear-Connect-Pre-Clearance

Go to a project
Toggle navigation Toggle navigation pinning
jinhui.wang
fa61e853 1 parent 481b22de

文本修改，样式修改

Inline Side-by-side
Showing 7 changed files with 628 additions and 186 deletions
<!DOCTYPE html>
<html>
<head>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<meta http-equiv="Content-Security-Policy" content="
worker-src blob:;
child-src blob: gap:;
......@@ -16,7 +14,9 @@
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title><%= webpackConfig.name %></title>
<title>
<%= webpackConfig.name %>
</title>
<!--[if lt IE 11
]><script>
window.location.href = "/html/ie.html";
......@@ -30,6 +30,7 @@
margin: 0px;
padding: 0px;
}
.chromeframe {
margin: 0.2em 0;
background: #ccc;
......@@ -105,6 +106,7 @@
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
......@@ -118,6 +120,7 @@
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
......@@ -205,15 +208,17 @@
opacity: 0.5;
}
</style>
</head>
<body>
</head>
<body>
<div id="app">
<div id="loader-wrapper">
<div id="loader"></div>
<div class="loader-section section-left"></div>
<div class="loader-section section-right"></div>
<div class="load_title">正在加載系統資源，請耐心等待</div>
<div class="load_title">Loading system resources, please be patient</div>
</div>
</div>
</body>
</body>
</html>
\ No newline at end of file
......
......@@ -1107,3 +1107,58 @@ input:disabled {
.questionIcon {
color: $fedexColor;
}
.uploadHistoryDialog {
.el-dialog__header {
.el-dialog__title {
font-size: 18px;
}
}
.el-dialog__body {
padding: 10px 50px !important;
}
}
.uploadHistoryTable {
.el-table__header-wrapper {
.el-table__header {
thead {
tr {
th {
background-color: #fff !important;
}
}
}
}
}
.el-table__body-wrapper {
tbody {
tr {
td {
background-color: $formItemBackgroundColor;
}
.el-table__expand-column {
.cell {
.el-table__expand-icon {
display: none !important;
}
}
}
.el-table__expanded-cell {
padding: 0px;
background-color: #fff !important;
}
}
tr:hover {
.el-table__expanded-cell {
background-color: #fff !important;
}
}
}
}
}
\ No newline at end of file
......
<template>
<div style="pointer-events: auto" @click="formItemClick">
<el-form-item
class="fedexFormItem"
:label="itemLabel"
......@@ -8,11 +9,22 @@
:id="'inputOuter-' + type + '-' + prop"
>
<slot name="title" slot="label"></slot>
<el-tooltip
v-if="toolyipShow"
class="item"
effect="dark"
:content="content"
:disabled="tooltipDisabled"
placement="top"
>
<slot></slot>
</el-tooltip>
<slot v-else></slot>
<template v-slot:error="scoped">
<div class="formError">{{ scoped.error }}</div>
</template>
</el-form-item>
</div>
</template>
<script>
......@@ -42,11 +54,25 @@ export default {
type: String,
default: "",
},
disabled: {
type: Boolean,
default: true,
},
toolyipShow: {
type: Boolean,
default: false,
},
eventType: {
type: Boolean,
default: false,
},
},
data() {
return {
itemLabel: this.label,
inputFocusType: false,
content: "",
tooltipDisabled: true,
};
},
watch: {
......@@ -62,8 +88,13 @@ export default {
let outInput = document.querySelector(
"#inputOuter-" + this.type + "-" + this.prop
); //获取formitem
let dateEditor = document.querySelector(".el-date-editor");
if (inputInner) {
if (inputInner.disabled && this.eventType) {
inputInner.style = "pointer-events:none";
}
//通过input得id是否存在判断效果是否激活
this.activeType ? inputInner.classList.add("inputFocus") : "";
inputInner.addEventListener("focus", (e) => {
this.inputFocusType = true;
inputInner.classList.add("inputFocus");
......@@ -73,12 +104,8 @@ export default {
inputInner.addEventListener("blur", (e) => {
if (!e.target.value && !e.target.placeholder) {
// input失焦时如果无内容则移除active class
if (this.labelInput) {
this.itemLabel = this.label;
// labelInputInner_parentNode.style.display = 'inline-block'
} else {
!this.activeType ? inputInner.classList.remove("inputFocus") : "";
}
} else {
inputInner.classList.add("inputFocus");
}
......@@ -89,12 +116,8 @@ export default {
inputInner.addEventListener("change", (e) => {
if (!e.target.value && !e.target.placeholder) {
// input失焦时如果无内容则移除active class
if (this.labelInput) {
this.itemLabel = this.label;
// labelInputInner_parentNode.style.display = 'inline-block'
} else {
!this.activeType ? inputInner.classList.remove("inputFocus") : "";
}
} else {
inputInner.classList.add("inputFocus");
}
......@@ -113,7 +136,62 @@ export default {
if (inputInner.value) {
inputInner.classList.add("inputFocus");
}
this.content = inputInner.value;
});
} else {
if (dateEditor) {
this.activeType
? document
.querySelector(".inputInner-" + this.type + "-" + this.prop)
.classList.add("inputFocus")
: "";
if (
document.querySelector(".inputInner-" + this.type + "-" + this.prop)
) {
let dataInner = document
.querySelector(".inputInner-" + this.type + "-" + this.prop)
.getElementsByClassName("el-range-input");
dataInner[0].addEventListener("focus", (e) => {
this.inputFocusType = true;
dataInner[0].classList.add("inputFocus");
outInput.classList.add("activeBorder");
});
dataInner[1].addEventListener("focus", (e) => {
this.inputFocusType = true;
dataInner[1].classList.add("inputFocus");
outInput.classList.add("activeBorder");
});
dataInner[0].addEventListener("blur", (e) => {
if (!e.target.value && !e.target.placeholder) {
// input失焦时如果无内容则移除active class
this.itemLabel = this.label;
!this.activeType
? dataInner[0].classList.remove("inputFocus")
: "";
} else {
dataInner[0].classList.add("inputFocus");
}
this.inputFocusType = false;
outInput.classList.remove("activeBorder");
});
dataInner[1].addEventListener("blur", (e) => {
if (!e.target.value && !e.target.placeholder) {
// input失焦时如果无内容则移除active class
this.itemLabel = this.label;
!this.activeType
? dataInner[1].classList.remove("inputFocus")
: "";
} else {
dataInner[1].classList.add("inputFocus");
}
this.inputFocusType = false;
outInput.classList.remove("activeBorder");
});
}
}
}
},
updated() {
......@@ -123,27 +201,73 @@ export default {
let outInput = document.querySelector(
"#inputOuter-" + this.type + "-" + this.prop
); //获取formitem
let dateEditor = document.querySelector(".el-date-editor");
this.$nextTick(() => {
if (inputInner && inputInner.value) {
if (inputInner) {
if (
inputInner.value != undefined &&
inputInner.value != "" &&
inputInner.value != null
) {
inputInner.classList.add("inputFocus");
} else {
!this.inputFocusType ? inputInner?.classList.remove("inputFocus") : "";
!this.inputFocusType ? inputInner.classList.remove("inputFocus") : "";
this.activeType ? inputInner.classList.add("inputFocus") : "";
}
} else {
if (dateEditor) {
if (this.activeType) {
document.querySelector(".inputInner-" + this.type + "-" + this.prop)
.classList
? document
.querySelector(".inputInner-" + this.type + "-" + this.prop)
.classList.add("inputFocus")
: "";
}
}
}
if (
inputInner &&
inputInner.offsetWidth &&
inputInner.offsetWidth < inputInner.scrollWidth
) {
this.content = inputInner.value;
!this.disabled
? (this.tooltipDisabled = false)
: (this.tooltipDisabled = true);
}
});
},
methods: {
formItemClick() {
this.$emit("event", this.prop);
},
getDateEditorNode() {
let dateInput = document.getElementsByClassName("el-date-editor");
dateInput.forEach((item) => {
item
item.querySelector(".el-input__suffix")
? item
.querySelector(".el-input__suffix")
.children[0].children[0].classList.add("el-icon-date");
.children[0].children[0].classList.add("el-icon-date")
: "";
});
let selectInput = document.getElementsByClassName("el-select");
selectInput.forEach((item) => {
// item.querySelector('.el-input__suffix').children[0].children[0].style.display = 'none'
});
},
onMouseOver(str) {
if (this.$refs[str]) {
const parentWidth = this.$refs[str].parentNode.offsetWidth;
const contentWidth = this.$refs[str].offsetWidth;
// 判断是否开启tooltip功能
if (contentWidth > parentWidth) {
this.isShowTooltip = false;
} else {
this.isShowTooltip = true;
}
}
},
},
};
</script>
......
......@@ -6,10 +6,10 @@ export default {
},
// 公用
common: {
sureBtn: "確定",
sureBtn: "OK",
goBack: "返回",
submitBtn: "提交",
cancleBtn: "取消",
cancleBtn: "Cancel",
useBtn: "使用",
saveBtn: "保存",
closeBtn: "關閉",
......@@ -86,8 +86,8 @@ export default {
onlineDeclare: "線上申報平臺帳號登錄",
registerNumber: "註冊線上申報平臺帳號",
userInfo: "用戶信息維護",
logOut: "退出登錄",
logOutDia: "確定註銷並退出系統嗎？",
logOut: "log out",
logOutDia: "Are you sure to log out and exit the system?",
},
// 申报输入
fillIn: {
......
......@@ -100,7 +100,6 @@ import TopNav from "@/components/TopNav";
import Hamburger from "@/components/Hamburger";
import { removeToken } from "@/utils/auth";
export default {
components: {
Breadcrumb,
......@@ -109,9 +108,13 @@ export default {
},
data() {
return {
lang: localStorage.getItem("lang") || "zh-TW",
lang: localStorage.getItem("lang") || "en",
langOptions: [
{
label: "English",
value: "en",
},
{
label: "中文繁體",
value: "zh-TW",
},
......@@ -147,7 +150,7 @@ export default {
this.$store.dispatch("app/toggleSideBar");
},
async logout() {
this.$confirm(this.$t("layout.logOutDia"), "提示", {
this.$confirm(this.$t("layout.logOutDia"), "Tip", {
confirmButtonText: this.$t("common.sureBtn"),
cancelButtonText: this.$t("common.cancleBtn"),
type: "warning",
......@@ -165,7 +168,7 @@ export default {
this.$emit("login", "login");
} else if (val == "create") {
this.$emit("login", "create");
}else if(val == "fedexRegister"){
} else if (val == "fedexRegister") {
this.$emit("login", "fedexRegister");
}
},
......
<template>
<div class="loginForm">
<FedexAlert v-if="errorTip.length > 0" class="mb20" :tipList="errorTip" @close="errorTipClose" />
<FedexAlert
v-if="errorTip.length > 0"
class="mb20"
:tipList="errorTip"
@close="errorTipClose"
/>
<div v-if="loginType == 'login'">
<div class="form-title">{{ $t("login.userTitle") }}</div>
<!-- <div class="form-tip buttonType" @click="loginType = 'create'">
{{ $t("login.create") }}
</div> -->
<el-form class="fedexFormStyle" style="margin-top: 100px;" ref="loginFormRef" :model="loginForm" :rules="loginRules" label-position="top">
<el-form
class="fedexFormStyle"
style="margin-top: 100px"
ref="loginFormRef"
:model="loginForm"
:rules="loginRules"
label-position="top"
>
<Formitem :label="$t('login.userNum')" prop="accNo">
<el-input type="text" :id="'inputInner--accNo'" v-model="loginForm.accNo" auto-complete="off"></el-input>
<el-input
type="text"
:id="'inputInner--accNo'"
v-model="loginForm.accNo"
auto-complete="off"
></el-input>
</Formitem>
<Formitem :label="$t('login.passWord')" prop="password">
<el-input type="password" :id="'inputInner--password'" v-model="loginForm.password" show-password
auto-complete="off"></el-input>
<el-input
type="password"
:id="'inputInner--password'"
v-model="loginForm.password"
show-password
auto-complete="off"
></el-input>
</Formitem>
<el-checkbox class="mt10" v-model="loginForm.rememberMe">{{
$t("login.checkPassWord")
}}</el-checkbox>
</el-form>
<div class="form-option">
<el-button class="entrySaveButton entrySaveButton-background" :loading="loading" size="medium" type="primary"
@click.native.prevent="handleLogin">
<el-button
class="entrySaveButton entrySaveButton-background"
:loading="loading"
size="medium"
type="primary"
@click.native.prevent="handleLogin"
>
<span v-if="!loading">{{ $t("login.loginBtn") }}</span>
<span v-else>{{ $t("login.loggingBtn") }}</span>
</el-button>
<!-- <div class="rePassword buttonType" @click="loginType = 'reset'">
{{ $t("login.forgetPassWord") }}
</div> -->
</div>
</div>
<div v-else-if="loginType == 'rePassword'">
<div class="form-title">{{ $t("login.resetPassWord") }}</div>
<div class="form-tip">{{ $t("login.resetTip") }}</div>
<el-form class="fedexFormStyle" ref="rePassword" :model="rePasswordForm" :rules="rePasswordFormRules"
label-position="top">
<el-form
class="fedexFormStyle"
ref="rePassword"
:model="rePasswordForm"
:rules="rePasswordFormRules"
label-position="top"
>
<Formitem :label="$t('login.userNum')" type="rePassword" prop="accNo">
<el-input type="text" :id="'inputInner-rePassword-accNo'" v-model="rePasswordForm.accNo"></el-input>
<el-input
type="text"
:id="'inputInner-rePassword-accNo'"
v-model="rePasswordForm.accNo"
></el-input>
</Formitem>
</el-form>
<div class="form-option">
<el-button class="entrySaveButton entrySaveButton-background" size="medium" type="primary" @click="rePassword">{{
$t("login.resetPassWordBtn") }}</el-button>
<el-button class="entrySaveButton" size="medium" type="primary" @click="loginType = 'login'">{{
$t("common.goBack") }}</el-button>
<el-button
class="entrySaveButton entrySaveButton-background"
size="medium"
type="primary"
@click="rePassword"
>{{ $t("login.resetPassWordBtn") }}</el-button
>
<el-button
class="entrySaveButton"
size="medium"
type="primary"
@click="loginType = 'login'"
>{{ $t("common.goBack") }}</el-button
>
</div>
</div>
<div v-else-if="loginType == 'create'">
<div class="form-title">{{ $t("login.createUserNum") }}</div>
<div class="form-tip"></div>
<!-- <div class="form-tip">{{ $t("login.createUserNumTip") }}</div> -->
<el-form class="fedexFormStyle" ref="createUserRef" :model="createUserForm" :rules="createUserRules"
label-position="top">
<el-form
class="fedexFormStyle"
ref="createUserRef"
:model="createUserForm"
:rules="createUserRules"
label-position="top"
>
<el-row :gutter="10">
<el-col :span="12">
<Formitem :label="$t('login.userNum')" type="create" prop="accNo">
<el-input type="text" :id="'inputInner-create-accNo'" v-model="createUserForm.accNo"
oninput="value = value.replace(/\s+/g,'')" auto-complete="off"></el-input>
<el-input
type="text"
:id="'inputInner-create-accNo'"
v-model="createUserForm.accNo"
oninput="value = value.replace(/\s+/g,'')"
auto-complete="off"
></el-input>
</Formitem>
</el-col>
<el-col :span="12">
<Formitem :label="$t('login.userName')" type="create" prop="userName">
<el-input type="text" :id="'inputInner-create-userName'" v-model="createUserForm.userName"
autocomplete="new-password"></el-input>
<Formitem
:label="$t('login.userName')"
type="create"
prop="userName"
>
<el-input
type="text"
:id="'inputInner-create-userName'"
v-model="createUserForm.userName"
autocomplete="new-password"
></el-input>
</Formitem>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="12">
<Formitem :label="$t('login.passWord')" type="create" prop="password">
<el-input type="text" :id="'inputInner-create-password'" v-model="createUserForm.password" show-password
autocomplete="new-password"></el-input>
<Formitem
:label="$t('login.passWord')"
type="create"
prop="password"
>
<el-input
type="text"
:id="'inputInner-create-password'"
v-model="createUserForm.password"
show-password
autocomplete="new-password"
></el-input>
</Formitem>
</el-col>
<el-col :span="12">
<Formitem :label="$t('login.confirmPassWord')" type="create" prop="password2">
<el-input type="text" :id="'inputInner-create-password2'" v-model="createUserForm.password2" show-password
auto-complete="off"></el-input>
<Formitem
:label="$t('login.confirmPassWord')"
type="create"
prop="password2"
>
<el-input
type="text"
:id="'inputInner-create-password2'"
v-model="createUserForm.password2"
show-password
auto-complete="off"
></el-input>
</Formitem>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="12">
<Formitem :label="$t('login.fedexNum')" type="create" prop="fedexAccNo">
<el-input type="text" :id="'inputInner-create-fedexAccNo'" v-model="createUserForm.fedexAccNo"
auto-complete="off"></el-input>
<Formitem
:label="$t('login.fedexNum')"
type="create"
prop="fedexAccNo"
>
<el-input
type="text"
:id="'inputInner-create-fedexAccNo'"
v-model="createUserForm.fedexAccNo"
auto-complete="off"
></el-input>
</Formitem>
</el-col>
<el-col :span="12">
<Formitem :label="$t('login.confirmFedexNum')" type="create" prop="fedexAccNo2">
<el-input type="text" :id="'inputInner-create-fedexAccNo2'" v-model="createUserForm.fedexAccNo2"
auto-complete="off"></el-input>
<Formitem
:label="$t('login.confirmFedexNum')"
type="create"
prop="fedexAccNo2"
>
<el-input
type="text"
:id="'inputInner-create-fedexAccNo2'"
v-model="createUserForm.fedexAccNo2"
auto-complete="off"
></el-input>
</Formitem>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="12">
<Formitem :label="$t('login.emailNum')" type="create" prop="email">
<el-input type="text" :id="'inputInner-create-email'" v-model="createUserForm.email"
auto-complete="off"></el-input>
<el-input
type="text"
:id="'inputInner-create-email'"
v-model="createUserForm.email"
auto-complete="off"
></el-input>
</Formitem>
</el-col>
<el-col :span="12">
<Formitem :label="$t('login.phone')" type="create" prop="phone">
<el-input type="text" :id="'inputInner-create-phone'" maxlength="40" v-model="createUserForm.phone"
auto-complete="off"></el-input>
<el-input
type="text"
:id="'inputInner-create-phone'"
maxlength="40"
v-model="createUserForm.phone"
auto-complete="off"
></el-input>
</Formitem>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="12">
<Formitem :label="$t('login.company')" type="create" prop="companyName">
<el-input type="text" :id="'inputInner-create-companyName'" v-model="createUserForm.companyName"
auto-complete="off"></el-input>
<Formitem
:label="$t('login.company')"
type="create"
prop="companyName"
>
<el-input
type="text"
:id="'inputInner-create-companyName'"
v-model="createUserForm.companyName"
auto-complete="off"
></el-input>
</Formitem>
</el-col>
<el-col :span="12">
<Formitem :label="$t('login.unifyNum')" type="create" prop="unifiedBusinessNum">
<el-input type="text" :id="'inputInner-create-unifiedBusinessNum'" maxlength="10"
oninput="value = value.replace(/\s+/g, '')" v-model="createUserForm.unifiedBusinessNum"
auto-complete="off"></el-input>
<Formitem
:label="$t('login.unifyNum')"
type="create"
prop="unifiedBusinessNum"
>
<el-input
type="text"
:id="'inputInner-create-unifiedBusinessNum'"
maxlength="10"
oninput="value = value.replace(/\s+/g, '')"
v-model="createUserForm.unifiedBusinessNum"
auto-complete="off"
></el-input>
</Formitem>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="12">
<Formitem :label="$t('login.customsNum')" type="create" prop="customsSerialNum">
<el-input type="text" :id="'inputInner-create-customsSerialNum'" v-model="createUserForm.customsSerialNum"
auto-complete="off"></el-input>
<Formitem
:label="$t('login.customsNum')"
type="create"
prop="customsSerialNum"
>
<el-input
type="text"
:id="'inputInner-create-customsSerialNum'"
v-model="createUserForm.customsSerialNum"
auto-complete="off"
></el-input>
</Formitem>
</el-col>
</el-row>
<el-checkbox class="mt10" v-model="createUserForm.policyFlag" style="margin-right: 0px">{{ $t("login.checkAgree1")
}}</el-checkbox><a @click="openPrivacy">{{ $t("login.policy1") }}</a>
<el-checkbox
class="mt10"
v-model="createUserForm.policyFlag"
style="margin-right: 0px"
>{{ $t("login.checkAgree1") }}</el-checkbox
><a @click="openPrivacy">{{ $t("login.policy1") }}</a>
<el-checkbox v-model="createUserForm.clauseFlag">{{
$t("login.checkAgree2_1")
}}</el-checkbox>
<span>{{ $t("login.policy2") }}</span>
<!-- <a href="">{{ $t("login.policy2") }}</a> -->
<span>{{ $t("login.checkAgree2_2") }}</span><a @click="openTermPdf">{{ $t("login.policy3") }}</a><span>{{
$t("login.checkAgree2_3") }}</span>
<span>{{ $t("login.checkAgree2_2") }}</span
><a @click="openTermPdf">{{ $t("login.policy3") }}</a
><span>{{ $t("login.checkAgree2_3") }}</span>
</el-form>
<div class="form-option">
<el-button class="entrySaveButton entrySaveButton-background" size="medium" type="primary" @click="createUser">{{
$t("common.submitBtn") }}</el-button>
<el-button class="entrySaveButton" size="medium" type="primary" @click="loginType = 'login'">{{
$t("common.goBack") }}</el-button>
<el-button
class="entrySaveButton entrySaveButton-background"
size="medium"
type="primary"
@click="createUser"
>{{ $t("common.submitBtn") }}</el-button
>
<el-button
class="entrySaveButton"
size="medium"
type="primary"
@click="loginType = 'login'"
>{{ $t("common.goBack") }}</el-button
>
</div>
</div>
<div v-else-if="loginType == 'reset'">
<div class="form-title">忘記了您的用户密碼？</div>
<div class="form-tip">提供您的用戶帳號</div>
<div class="form-option">
<el-button class="entrySaveButton entrySaveButton-background" size="medium" type="primary"
@click="loginType = 'rePassword'">重置密码</el-button>
<el-button class="entrySaveButton" size="medium" type="primary" @click="loginType = 'login'">{{
$t("common.goBack") }}</el-button>
<el-button
class="entrySaveButton entrySaveButton-background"
size="medium"
type="primary"
@click="loginType = 'rePassword'"
>重置密码</el-button
>
<el-button
class="entrySaveButton"
size="medium"
type="primary"
@click="loginType = 'login'"
>{{ $t("common.goBack") }}</el-button
>
</div>
</div>
<!-- 修改密码 -->
<div v-else-if="loginType == 'resetPwd'">
<div class="form-title">
{{ $t('login.loginPassword.resetPassword.title') }}
{{ $t("login.loginPassword.resetPassword.title") }}
</div>
<div class="form-tip">{{ $t('login.loginPassword.resetPassword.tip') }}</div>
<el-form class="fedexFormStyle" ref="resetPassword" :model="resetPasswordForm" :rules="resetPasswordRules"
label-position="top">
<Formitem :label="$t('login.loginPassword.resetPassword.loginNameLabel')" type="reset" prop="loginName">
<el-input type="text" :id="'inputInner-reset-loginName'" v-model="resetPasswordForm.loginName" disabled
autocomplete="new-password"></el-input>
<div class="form-tip">
{{ $t("login.loginPassword.resetPassword.tip") }}
</div>
<el-form
class="fedexFormStyle"
ref="resetPassword"
:model="resetPasswordForm"
:rules="resetPasswordRules"
label-position="top"
>
<Formitem
:label="$t('login.loginPassword.resetPassword.loginNameLabel')"
type="reset"
prop="loginName"
>
<el-input
type="text"
:id="'inputInner-reset-loginName'"
v-model="resetPasswordForm.loginName"
disabled
autocomplete="new-password"
></el-input>
</Formitem>
<div class="formTitle" style="font-size: 16px;margin-top:30px">{{
$t('login.loginPassword.resetPassword.password') }}<span class="tip">{{$t('login.loginPassword.resetPassword.passwordTip') }}</span></div>
<Formitem :label="$t('login.loginPassword.resetPassword.newPassword')" type="reset" prop="password">
<el-input type="password" :id="'inputInner-reset-password'" v-model="resetPasswordForm.password" show-password
autocomplete="new-password"></el-input>
<div class="formTitle" style="font-size: 16px; margin-top: 30px">
{{ $t("login.loginPassword.resetPassword.password")
}}<span class="tip">{{
$t("login.loginPassword.resetPassword.passwordTip")
}}</span>
</div>
<Formitem
:label="$t('login.loginPassword.resetPassword.newPassword')"
type="reset"
prop="password"
>
<el-input
type="password"
:id="'inputInner-reset-password'"
v-model="resetPasswordForm.password"
show-password
autocomplete="new-password"
></el-input>
</Formitem>
<Formitem :label="$t('login.loginPassword.resetPassword.confirmPassword')" type="reset" prop="confirmPassword">
<el-input type="password" :id="'inputInner-reset-confirmPassword'" show-password
v-model="resetPasswordForm.confirmPassword" autocomplete="new-password"></el-input>
<Formitem
:label="$t('login.loginPassword.resetPassword.confirmPassword')"
type="reset"
prop="confirmPassword"
>
<el-input
type="password"
:id="'inputInner-reset-confirmPassword'"
show-password
v-model="resetPasswordForm.confirmPassword"
autocomplete="new-password"
></el-input>
</Formitem>
</el-form>
<div class="form-option">
<el-button class="entrySaveButton entrySaveButton-background" size="medium" type="primary" :loading="loading"
@click="resetPasswordSubmit">{{ $t('common.submitBtn') }}</el-button>
<el-button class="entrySaveButton" size="medium" type="primary" @click="loginType = 'login'">{{
$t('common.goBack') }}</el-button>
<el-button
class="entrySaveButton entrySaveButton-background"
size="medium"
type="primary"
:loading="loading"
@click="resetPasswordSubmit"
>{{ $t("common.submitBtn") }}</el-button
>
<el-button
class="entrySaveButton"
size="medium"
type="primary"
@click="loginType = 'login'"
>{{ $t("common.goBack") }}</el-button
>
</div>
</div>
</div>
</template>
<script>
import { encrypt, decrypt } from "@/utils/jsencrypt";
import { addUser, getUserByAccNo, updPwd ,resetPwd,verifyResetPwd} from "@/api/login.js";
import {
addUser,
getUserByAccNo,
updPwd,
resetPwd,
verifyResetPwd,
} from "@/api/login.js";
export default {
props: {
loginType: {
type: String,
default: "login",
},loginName: {
},
loginName: {
type: String,
default: ''
}
default: "",
},
},
data() {
return {
......@@ -232,33 +436,51 @@ export default {
},
rePasswordForm: {
username: "",
},//重置密码数据
}, //重置密码数据
resetPasswordForm: {
loginName: '',
loginName: "",
password: null,
confirmPassword: null,
},
rePasswordData:null,
rePasswordData: null,
loginRules: {
accNo: [
{ required: true, trigger: "blur", message: "User account cannot be empty." },
{
required: true,
trigger: "blur",
message: "User account cannot be empty.",
},
],
password: [
{ required: true, trigger: "blur", message: "Password cannot be empty." },
{
required: true,
trigger: "blur",
message: "Password cannot be empty.",
},
],
},
rePasswordFormRules: {
accNo: [
{ required: true, trigger: "blur", message: "User account cannot be empty." },
{
required: true,
trigger: "blur",
message: "User account cannot be empty.",
},
],
},
createUserRules: {
accNo: [
{ required: true, trigger: "blur", message: "User account cannot be empty." },
{
required: true,
trigger: "blur",
message: "User account cannot be empty.",
},
{
validator: (rule, value, callback) => {
if (this.regExp.pattern.test(value)) {
callback("The username does not allow special characters or spaces!");
callback(
"The username does not allow special characters or spaces!"
);
} else {
getUserByAccNo(value)
.then((res) => {
......@@ -400,32 +622,57 @@ export default {
],
},
resetPasswordRules: {
loginName: [{ required: true, trigger: "blur", message: this.$t('login.loginPassword.formCheck.resetloginName') }],
password: [{ required: true, trigger: "blur", message: this.$t('login.loginPassword.formCheck.resetPasswordPassword') },
loginName: [
{
required: true,
trigger: "blur",
message: this.$t("login.loginPassword.formCheck.resetloginName"),
},
],
password: [
{
required: true,
trigger: "blur",
message: this.$t(
"login.loginPassword.formCheck.resetPasswordPassword"
),
},
{
validator: (rule, value, callback) => {
if (!this.regExp.passwordExp.test(value)) {
callback(this.$t('login.loginPassword.resetPassword.passwordTip'))
callback(
this.$t("login.loginPassword.resetPassword.passwordTip")
);
} else {
callback()
callback();
}
},
trigger: "blur",
}],
},
],
confirmPassword: [
{ required: true, trigger: "blur", message: this.$t('login.loginPassword.formCheck.resetPasswordConfirmPassword1') },
{
required: true,
trigger: "blur",
message: this.$t(
"login.loginPassword.formCheck.resetPasswordConfirmPassword1"
),
},
{
validator: (rule, value, callback) => {
if (value != this.resetPasswordForm.password) {
callback(this.$t('login.loginPassword.formCheck.resetPasswordConfirmPassword2'))
callback(
this.$t(
"login.loginPassword.formCheck.resetPasswordConfirmPassword2"
)
);
} else {
callback()
callback();
}
},
trigger: "blur",
}
]
},
],
},
loading: false,
redirect: undefined,
......@@ -448,21 +695,23 @@ export default {
if (route.query.changePasswordType) {
// route.query.changePasswordType == 'resetPwd' ?
// this.resetPasswordForm.loginName = route.query.loginname : this.resetPasswordForm.loginName = '';
if(route.query.changePasswordType == 'resetPwd' && route.query.loginname){
verifyResetPwd(route.query.loginname).then(res => {
if(res.code==200){
this.rePasswordData=res;
this.resetPasswordForm.loginName=res.data;
}else{
if (
route.query.changePasswordType == "resetPwd" &&
route.query.loginname
) {
verifyResetPwd(route.query.loginname).then((res) => {
if (res.code == 200) {
this.rePasswordData = res;
this.resetPasswordForm.loginName = res.data;
} else {
this.$alert(res.msg, "提示", {
dangerouslyUseHTMLString: true,
type: "error",
})
this.resetPasswordForm.loginName = ''
});
this.resetPasswordForm.loginName = "";
}
})
});
}
}
},
immediate: true,
......@@ -536,27 +785,31 @@ export default {
this.$refs.rePassword.validate((valid) => {
if (valid) {
//根据用户账号发送修改密码邮件
updPwd(this.rePasswordForm.accNo).then((res) => {
if (res.code == 200 ) {
this.$alert(this.$t('login.loginPassword.resetPassword.sendEmail'), "提示", {
updPwd(this.rePasswordForm.accNo)
.then((res) => {
if (res.code == 200) {
this.$alert(
this.$t("login.loginPassword.resetPassword.sendEmail"),
"提示",
{
dangerouslyUseHTMLString: true,
type: "success",
}).then(()=>{
this.loginType="login";
})
}else{
}
).then(() => {
this.loginType = "login";
});
} else {
this.$alert(res.msg, "提示", {
dangerouslyUseHTMLString: true,
type: "warning",
})
});
}
}).catch((err) => {
})
.catch((err) => {
console.log(err);
});
}
});
},
errorTipClose() {
this.errorTip = [];
......@@ -570,39 +823,42 @@ export default {
//重置密码
resetPasswordSubmit() {
this.$refs.resetPassword.validate((valid) => {
if(valid){
if (valid) {
// verifyResetPwd(this.resetPasswordForm.loginName).then(res => {
if(this.rePasswordData.code==200){
resetPwd({accNo:this.rePasswordData.data,newPwd:this.resetPasswordForm.password,newPwd2:this.resetPasswordForm.confirmPassword}).then(res1 =>{
if(res1.code==200){
if (this.rePasswordData.code == 200) {
resetPwd({
accNo: this.rePasswordData.data,
newPwd: this.resetPasswordForm.password,
newPwd2: this.resetPasswordForm.confirmPassword,
}).then((res1) => {
if (res1.code == 200) {
this.$alert(res1.msg, "提示", {
dangerouslyUseHTMLString: true,
type: "success",
}).then(()=>{
location.href = '/IcTw/#/login'
this.loginType = 'login'
})
}else{
}).then(() => {
location.href = "/IcTw/#/login";
this.loginType = "login";
});
} else {
this.$alert(res1.msg, "提示", {
dangerouslyUseHTMLString: true,
type: "warning",
})
});
}
})
}else{
});
} else {
this.$alert(this.rePasswordData.msg, "提示", {
dangerouslyUseHTMLString: true,
type: "warning",
})
});
}
// })
}
})
});
},
errorTipClose() {
this.errorTip = []
}
this.errorTip = [];
},
},
};
</script>
......@@ -657,7 +913,7 @@ export default {
margin-top: 100px;
.el-button {
width: 120px;
min-width: 120px;
height: 60px;
font-size: 16px;
}
......
......@@ -36,7 +36,7 @@
<div class="buttonItem-icon">
<svg-icon class="el-icon-user-solid" icon-class="fedex-login" />
</div>
<div class="buttonItem-title">在線申報平臺帳號登錄</div>
<div class="buttonItem-title">user log in</div>
<div class="textCenter">
<svg-icon
class="el-icon-user-solid"
......@@ -205,14 +205,13 @@ export default {
},
attrs: { class: "font-style" },
},
"註冊完成後請回到FedEx線上申報平臺重新登錄。"
"After registration is completed, please return to the FedEx online declaration platform and log in again."
),
]),
confirmButtonClass: "confirm-button",
showCancelButton: true,
confirmButtonText: "確定",
cancelButtonText: "取消",
confirmButtonText: this.$t("common.sureBtn"),
cancelButtonText: this.$t("common.cancleBtn"),
iconClass: "el-icon-warning",
center: true,
// showClose: false,
......@@ -409,10 +408,10 @@ export default {
}
}
.guide-box {
height: 170px;
font-size: 16px;
padding-left: 249px;
padding-top: 48px;
padding-top: 24px;
padding-bottom: 24px;
background: #f8f8f8;
.guide {
color: #4d148c;
......