Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
17e9ce89 by simon
Options

默认提交

1 parent 247a13d3
Inline Side-by-side
Showing 22 changed files with 918 additions and 322 deletions
......@@ -14,6 +14,11 @@ module.exports = {
form: {
datePicker: {
datePlaceholder: "please select date"
},
modalUploadCard:{
tit:"請上傳證件資料",
front:"證件正面",
back:"證件反面",
}
},
nav: {
......
......@@ -14,6 +14,11 @@ module.exports = {
form: {
datePicker: {
datePlaceholder: "请选择日期"
},
modalUploadCard:{
tit:"請上傳證件資料",
front:"證件正面",
back:"證件反面",
}
},
nav: {
......
......@@ -14,6 +14,11 @@ module.exports = {
form: {
datePicker: {
datePlaceholder: "请选择日期"
},
modalUploadCard: {
tit: "请上传证件资料",
front: "证件正面",
back: "证件反面",
}
},
nav: {
......@@ -49,19 +54,19 @@ module.exports = {
name: "产品介绍",
path: "",
list: [{
name: "自愿医保基本计划",
path: "/empty"
},
{
name: "分红终身寿险",
path: "/product"
}]
name: "自愿医保基本计划",
path: "/empty"
},
{
name: "分红终身寿险",
path: "/product"
}
]
},
{
name: "客户服务",
path: "",
list: [
{
list: [{
name: "客户服务导航",
path: "/custom/product"
},
......@@ -103,24 +108,25 @@ module.exports = {
name: "关于我们",
path: "",
list: [{
name: "平安人寿香港",
path: "/profile"
},
{
name: "公司活动",
path: "/empty"
},{
name: "新闻中心",
path: "/news/list"
},
{
name: "企业社会责任",
path: "/empty"
},
{
name: "奖项殊荣",
path: "/empty"
}]
name: "平安人寿香港",
path: "/profile"
},
{
name: "公司活动",
path: "/empty"
}, {
name: "新闻中心",
path: "/news/list"
},
{
name: "企业社会责任",
path: "/empty"
},
{
name: "奖项殊荣",
path: "/empty"
}
]
},
{
name: "加入我们",
......@@ -612,7 +618,7 @@ module.exports = {
}
},
policyChangeInformation: {
title : "客户资料变更",
title: "客户资料变更",
hkClient: "是否平安香港客戶",
yes: "是",
no: "否",
......
@import '@/styles/_support';
.comp {
position: absolute;
position: fixed;
top: 0;
left: 0;
z-index: 999;
width: 100%;
height: 100%;
......@@ -21,8 +23,6 @@
@extend .bb;
width: 46.25rem;
height: 28.5rem;
// width: 36rem;
// min-height: 22.5rem;
border-radius: 1.25rem;
background-color: #ffffff;
padding: 4.5rem 2rem 2.5rem;
......@@ -58,6 +58,37 @@
}
}
.hide{
.hide {
display: none;
}
@media (max-width: 1200px) {
.comp {
position: fixed;
}
.modal {
// width: 90%;
position: absolute;
}
}
@media (max-width: 768px) {
.modal {
// height: 28.5rem;
width: 90%;
height: auto;
&-title {
margin-bottom: 1rem;
}
&-icon-wrap {
height: 10rem;
img{
height: 100%;
}
}
}
}
......
import api from '@/api/api'
import {
httpGet,
httpPost
} from '@/api/fetch-api.js'
export default {
props: {
// 是否显示组件
visible: {
type: Boolean,
default: true,
},
// 标题名称 需要再 assets/images/common/ 目录下添加图标
icon: {
type: String,
default: "succ",
},
// 标题，不建议使用
title: {
type: String,
default: "",
},
// 文案
content: {
type: String,
default: "",
},
// 确认文案
confirmText: {
type: String,
default: "確認",
},
// 取消文案
cancelText: {
type: String,
default: "取消",
},
// 是否显示确认按钮
showConfirm: {
type: Boolean,
default: true,
},
// 是否显示取消按钮
showCancel: {
type: Boolean,
default: false,
},
// 是否显示遮罩层
overlayShow: {
type: Boolean,
default: true,
},
// 确定按钮回调方法
confirm: {
type: Function,
default: null
},
// 取消按钮回调方法
cancel: {
type: Function,
default: null
},
// 点击关闭回调方法
close: {
type: Function,
default: null
},
// 点击蒙层回调方法
overlay: {
type: Function,
default: null
}
},
data() {
return {
key: 'value'
}
},
components: {},
methods: {
// 点击确认
onConfirmHandler() {
if (this.confirm) {
this.confirm();
}
},
// 点击取消
onCancelHandler() {
if (this.cancel) {
this.cancel();
}
},
// 点击关闭
onCloseHandler() {
if (this.close) {
this.close();
}
},
// 点击蒙层
onOverLayHandler() {
if (this.overlay) {
this.overlay();
}
},
initData() {}
},
mounted() {},
created() {}
}
@import '@/styles/_support';
.comp {
position: fixed;
top: 0;
left: 0;
z-index: 999;
width: 100%;
height: 100%;
@extend .fcc;
text-align: center;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
background: rgba($color: #000000, $alpha: 0.7);
}
.modal {
position: relative;
width: 45.5rem;
min-height: 18.25rem;
border-radius: $borderRadius;
background-color: #ffffff;
&-title {
position: relative;
@extend .bb;
@include border-top-radius($borderRadius);
@include ellipsis(1);
font-size: $fontSizeTitle;
font-weight: bold;
height: 5rem;
line-height: 5rem;
// font-weight: bold;
background-color: #f2f2f2;
text-align: left;
padding: 0 3rem;
.close-btn {
position: absolute;
top: 2rem;
right: 2rem;
}
}
&-icon-wrap {
@extend .fcc;
height: 12rem;
}
&-content {
@extend .fcc;
@extend .bb;
font-size: $fontSize;
font-weight: bold;
min-height: 13.25rem;
padding: $marginMedium-M 3rem;
}
&-btn-wrap {
display: flex;
justify-content: center;
.btn {
@include btc2(12rem, 3.6rem, 16px);
margin: 3rem 1rem 0;
@extend .pointer;
}
}
}
.hide {
display: none;
}
@media (max-width: 1200px) {
.comp {
position: fixed;
}
.modal {
position: absolute;
}
}
@media (max-width: 768px) {
.modal {
width: 90%;
height: auto;
&-title {}
&-icon-wrap {
height: 10rem;
img {
height: 100%;
}
}
}
}
<template>
<div class="comp" :class="{'hide' : !visible }">
<div @click="onOverLayHandler()" class="overlay" v-if="overlayShow"></div>
<div class="modal">
<div class="modal-title">
{{title}}
<img @click="onCloseHandler()" class="close-btn pointer" :src="require('@assets/images/common/icon-modal-simple-close.png')">
</div>
<div class="modal-content">{{content}}</div>
</div>
</div>
</template>
<script src="./modal-simple-comp.js"></script>
<style lang="scss" scoped>
@import "./modal-simple-comp.scss";
</style>
import api from '@/api/api'
import {
httpGet,
httpPost
} from '@/api/fetch-api.js'
export default {
props: {
// 是否显示组件
visible: {
type: Boolean,
default: true,
},
// 标题名称 需要再 assets/images/common/ 目录下添加图标
icon: {
type: String,
default: "succ",
},
// 标题，不建议使用
title: {
type: String,
default: "",
},
// 文案
content: {
type: String,
default: "",
},
// 确认文案
confirmText: {
type: String,
default: "確認",
},
// 取消文案
cancelText: {
type: String,
default: "取消",
},
// 是否显示确认按钮
showConfirm: {
type: Boolean,
default: true,
},
// 是否显示取消按钮
showCancel: {
type: Boolean,
default: false,
},
// 是否显示遮罩层
overlayShow: {
type: Boolean,
default: true,
},
// 确定按钮回调方法
confirm: {
type: Function,
default: null
},
// 取消按钮回调方法
cancel: {
type: Function,
default: null
},
// 点击关闭回调方法
close: {
type: Function,
default: null
},
// 点击蒙层回调方法
overlay: {
type: Function,
default: null
}
},
data() {
return {
key: 'value'
}
},
components: {},
methods: {
// 点击确认
onConfirmHandler() {
if (this.confirm) {
this.confirm();
}
},
// 点击取消
onCancelHandler() {
if (this.cancel) {
this.cancel();
}
},
// 点击关闭
onCloseHandler() {
if (this.close) {
this.close();
}
},
// 点击蒙层
onOverLayHandler() {
if (this.overlay) {
this.overlay();
}
},
initData() {}
},
mounted() {},
created() {}
}
@import '@/styles/_support';
.comp {
position: fixed;
top: 0;
left: 0;
z-index: 999;
width: 100%;
height: 100%;
@extend .fcc;
text-align: center;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
background: rgba($color: #000000, $alpha: 0.7);
}
.modal {
@extend .bb;
position: relative;
width: 45.5rem;
min-height: 23.25rem;
border-radius: $borderRadius;
background-color: #ffffff;
padding-bottom: $marginMedium-M;
&-title {
position: relative;
@extend .bb;
@include border-top-radius($borderRadius);
@include ellipsis(1);
font-size: $fontSizeTitle;
font-weight: bold;
height: 5rem;
line-height: 5rem;
// font-weight: bold;
background-color: #f2f2f2;
text-align: left;
padding: 0 3rem;
.close-btn {
position: absolute;
top: 2rem;
right: 2rem;
}
}
&-icon-wrap {
@extend .fcc;
height: 12rem;
}
&-content {
@extend .fcc;
@extend .bb;
font-size: $fontSize;
font-weight: bold;
min-height: 13.25rem;
padding: $marginMedium-M 3rem;
.upload {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
&-item {
padding: 0 $marginSmallHalf;
}
}
}
&-btn-wrap {
display: flex;
justify-content: center;
.btn {
@include btc2(12rem, 3.6rem, 16px);
margin: 0 1rem 0;
@extend .pointer;
}
}
}
.hide {
display: none;
}
@media (max-width: 1200px) {
.comp {
position: fixed;
}
.modal {
position: absolute;
}
}
@media (max-width: 768px) {
.modal {
width: 90%;
height: auto;
&-title {}
&-icon-wrap {
height: 10rem;
img {
height: 100%;
}
}
&-content {
.upload {
&-item {
width: auto;
}
}
}
}
}
<template>
<div class="comp" :class="{'hide' : !visible }">
<div @click="onOverLayHandler()" class="overlay" v-if="overlayShow"></div>
<div class="modal">
<div class="modal-title">
{{$t('form.modalUploadCard.tit')}}
<img @click="onCloseHandler()" class="close-btn pointer" :src="require('@assets/images/common/icon-modal-simple-close.png')">
</div>
<div class="modal-content">
<div class="gird-g upload">
<div class="pure-u-1 pure-u-md-1-2 upload-item">
<div class="tit"> {{$t('form.modalUploadCard.front')}}</div>
<img class="poster pointer" :src="require('@assets/images/common/card-front.png')" alt="">
</div>
<div class="pure-u-1 pure-u-md-1-2 upload-item">
<div class="tit"> {{$t('form.modalUploadCard.back')}}</div>
<img class="poster pointer" :src="require('@assets/images/common/card-back.png')" alt="">
</div>
</div>
</div>
<div class="modal-btn-wrap">
<div @click="onCancelHandler()" v-if="showCancel" class="btn">{{cancelText}}</div>
<div @click="onConfirmHandler()" v-if="showConfirm" class="btn">{{confirmText}}</div>
</div>
</div>
</div>
</template>
<script src="./modal-upload-card-comp.js"></script>
<style lang="scss" scoped>
@import "./modal-upload-card-comp.scss";
</style>
......@@ -25,20 +25,9 @@ export default {
e2: "",
e3: ""
},
dataForm: {
},
insuranceForm: {
f1: true,
f2: true,
f3: true,
f4: true,
f5: true,
}
}
},
components: {
},
components: {},
computed: {
locale() {
return this.$i18n.locale || 'tc';
......@@ -155,5 +144,5 @@ export default {
mounted() {
this.initData();
},
created() { }
created() {}
}
......
......@@ -4,15 +4,20 @@ import {
httpPost
} from '@/api/fetch-api.js'
import modalUploadCardComp from '@/components/modal-upload-card-comp/modal-upload-card-comp.vue';
export default {
data() {
return {
key: 'value',
isHkCus : true,
checked : false
isHkCus: true,
checked: false,
modalUploadCardVisiable: false,
}
},
components: {},
components: {
modalUploadCardComp
},
computed: {
locale() {
return this.$i18n.locale || 'tc';
......
<template>
<div class="container border">
<div class="table">
<div class="table-header orange">
<div class="table-header-item">{{$t('policyChangeInformation.title')}}</div>
</div>
<div class="gird-g form">
<!-- 變更對象 checkbox -->
<div class="pure-u-1 form-item form-item2">
<div class="label">
{{$t('policyChangeInformation.hkClient')}}
</div>
<div class="cont">
<div class="boo-btn pointer" :class="{active:isHkCus}" @click="isHkCus=true">{{$t('policyChangeInformation.yes')}}</div>
<div class="boo-btn pointer" :class="{active:!isHkCus}" @click="isHkCus=false">{{$t('policyChangeInformation.no')}}</div>
</div>
<div>
<modal-upload-card-comp :visible="modalUploadCardVisiable" :show-confirm="true" ></modal-upload-card-comp>
<div class="container border">
<div class="table">
<div class="table-header orange">
<div class="table-header-item">{{$t('policyChangeInformation.title')}}</div>
</div>
<div class="gird-g form">
<!-- start -->
<!-- 1 -->
<div class="pure-u-1 pure-u-md-1-2 form-item">
<div class="label">
<div class="icon"><img src="@/assets/images/policy-change-information/icon-pci-info.png"></div> {{$t('policyChangeInformation.obj')}}
</div>
<div class="ipt-wrap">
<input class="ipt" type="text">
<!-- 變更對象 checkbox -->
<div class="pure-u-1 form-item form-item2">
<div class="label">
{{$t('policyChangeInformation.hkClient')}}
</div>
<div class="cont">
<div class="boo-btn pointer" :class="{active:isHkCus}" @click="isHkCus=true">{{$t('policyChangeInformation.yes')}}</div>
<div class="boo-btn pointer" :class="{active:!isHkCus}" @click="isHkCus=false">{{$t('policyChangeInformation.no')}}</div>
</div>
</div>
</div>
<!-- 2 -->
<div class="pure-u-1 pure-u-md-1-2 form-item">
<div class="label label2">
<div class="fla">
<div class="icon"><img src="@/assets/images/policy-change-information/icon-pci-info.png"></div>{{$t('policyChangeInformation.sex')}}
<!-- start -->
<!-- 1 -->
<div class="pure-u-1 pure-u-md-1-2 form-item">
<div class="label">
<div class="icon"><img src="@/assets/images/policy-change-information/icon-pci-info.png"></div> {{$t('policyChangeInformation.obj')}}
</div>
<div class="fla">
<div class="icon icon2"><img src="@/assets/images/policy-change-information/icon-pci-notice.png"></div>
<span class="t1">{{$t('policyChangeInformation.modifyTips1')}}</span>
<span class="t2">{{$t('policyChangeInformation.modifyTips2')}}</span>
<div class="ipt-wrap">
<input class="ipt" type="text">
</div>
</div>
<div class="ipt-wrap">
<div class="down-arrow"></div>
<select disabled class="ipt disable">
<option v-if="locale !='zh'">男</option>
<option v-else>男</option>
</select>
</div>
</div>
<!-- 3 -->
<div class="pure-u-1 pure-u-md-1-2 form-item">
<div class="label label2">
<div class="fla">
<div class="icon"><img src="@/assets/images/policy-change-information/icon-pci-date.png"></div>{{$t('policyChangeInformation.birth')}}
<!-- 2 -->
<div class="pure-u-1 pure-u-md-1-2 form-item">
<div class="label label2">
<div class="fla">
<div class="icon"><img src="@/assets/images/policy-change-information/icon-pci-info.png"></div>{{$t('policyChangeInformation.sex')}}
</div>
<div class="fla">
<div class="icon icon2"><img src="@/assets/images/policy-change-information/icon-pci-notice.png"></div>
<span class="t1">{{$t('policyChangeInformation.modifyTips1')}}</span>
<span class="t2">{{$t('policyChangeInformation.modifyTips2')}}</span>
</div>
</div>
<div class="fla">
<div class="icon icon2"><img src="@/assets/images/policy-change-information/icon-pci-notice.png"></div>
<span class="t1">{{$t('policyChangeInformation.modifyTips1')}}</span>
<span class="t2">{{$t('policyChangeInformation.modifyTips2')}}</span>
<div class="ipt-wrap">
<div class="down-arrow"></div>
<select disabled class="ipt disable">
<option v-if="locale !='zh'">男</option>
<option v-else>男</option>
</select>
</div>
</div>
<div class="ipt-wrap">
<input disabled placeholder="1999-1-1" class="ipt disable" type="text">
</div>
</div>
<!-- 4 -->
<div class="pure-u-1 pure-u-md-1-2 form-item">
<div class="label">
<div class="icon"><img src="@/assets/images/policy-change-information/icon-pci-card.png"></div>{{$t('policyChangeInformation.type')}}
</div>
<div class="ipt-wrap">
<div class="down-arrow"></div>
<select class="ipt">
<template v-if="locale =='zh'">
<option>身份证</option>
</template>
<template v-else>
<option>身份證</option>
</template>
</select>
<!-- 3 -->
<div class="pure-u-1 pure-u-md-1-2 form-item">
<div class="label label2">
<div class="fla">
<div class="icon"><img src="@/assets/images/policy-change-information/icon-pci-date.png"></div>{{$t('policyChangeInformation.birth')}}
</div>
<div class="fla">
<div class="icon icon2"><img src="@/assets/images/policy-change-information/icon-pci-notice.png"></div>
<span class="t1">{{$t('policyChangeInformation.modifyTips1')}}</span>
<span class="t2">{{$t('policyChangeInformation.modifyTips2')}}</span>
</div>
</div>
<div class="ipt-wrap">
<input disabled placeholder="1999-1-1" class="ipt disable" type="text">
</div>
</div>
</div>
<!-- 5 -->
<div class="pure-u-1 pure-u-md-1-2 form-item">
<div class="label">
<div class="icon"><img src="@/assets/images/policy-change-information/icon-pci-card.png"></div> {{$t('policyChangeInformation.NO')}}
</div>
<div class="ipt-wrap">
<div class="eye"></div>
<!-- -->
<!-- <div class="eye eye-act"></div> -->
<input class="ipt" type="text">
<!-- 4 -->
<div class="pure-u-1 pure-u-md-1-2 form-item">
<div class="label">
<div class="icon"><img src="@/assets/images/policy-change-information/icon-pci-card.png"></div>{{$t('policyChangeInformation.type')}}
</div>
<div class="ipt-wrap">
<div class="down-arrow"></div>
<select class="ipt">
<template v-if="locale =='zh'">
<option>身份证</option>
</template>
<template v-else>
<option>身份證</option>
</template>
</select>
</div>
</div>
</div>
<!-- 6 -->
<div class="pure-u-1 pure-u-md-1-2 form-item">
<div class="label">
<div class="icon"><img src="@/assets/images/policy-change-information/icon-pci-card.png"></div> {{$t('policyChangeInformation.validityPeriod')}}
</div>
<div class="ipt-wrap">
<input class="ipt" type="text">
<!-- 5 -->
<div class="pure-u-1 pure-u-md-1-2 form-item">
<div class="label">
<div class="icon"><img src="@/assets/images/policy-change-information/icon-pci-card.png"></div> {{$t('policyChangeInformation.NO')}}
</div>
<div class="ipt-wrap">
<div class="eye"></div>
<!-- -->
<!-- <div class="eye eye-act"></div> -->
<input class="ipt" type="text">
</div>
</div>
</div>
<!-- 7 -->
<div class="pure-u-1 pure-u-md-1-2 form-item">
<div class="label">
<div class="icon"><img src="@/assets/images/policy-change-information/icon-pci-earth.png"></div> {{$t('policyChangeInformation.nationality')}}
</div>
<div class="ipt-wrap">
<input class="ipt" type="text">
<!-- 6 -->
<div class="pure-u-1 pure-u-md-1-2 form-item">
<div class="label">
<div class="icon"><img src="@/assets/images/policy-change-information/icon-pci-card.png"></div> {{$t('policyChangeInformation.validityPeriod')}}
</div>
<div class="ipt-wrap">
<input class="ipt" type="text">
</div>
</div>
</div>
<!-- 8 -->
<div class="pure-u-1 pure-u-md-1-2 form-item">
<div class="label">
<div class="icon"><img src="@/assets/images/policy-change-information/icon-pci-build.png"></div> {{$t('policyChangeInformation.employer')}}
</div>
<div class="ipt-wrap">
<input class="ipt" type="text">
<!-- 7 -->
<div class="pure-u-1 pure-u-md-1-2 form-item">
<div class="label">
<div class="icon"><img src="@/assets/images/policy-change-information/icon-pci-earth.png"></div> {{$t('policyChangeInformation.nationality')}}
</div>
<div class="ipt-wrap">
<input class="ipt" type="text">
</div>
</div>
</div>
<!-- 9 -->
<div class="pure-u-1 pure-u-md-1-2 form-item">
<div class="label">
<div class="icon"><img src="@/assets/images/policy-change-information/icon-pci-love.png"></div> {{$t('policyChangeInformation.maritalStatus')}}
<!-- 8 -->
<div class="pure-u-1 pure-u-md-1-2 form-item">
<div class="label">
<div class="icon"><img src="@/assets/images/policy-change-information/icon-pci-build.png"></div> {{$t('policyChangeInformation.employer')}}
</div>
<div class="ipt-wrap">
<input class="ipt" type="text">
</div>
</div>
<div class="ipt-wrap">
<input class="ipt" type="text">
<!-- 9 -->
<div class="pure-u-1 pure-u-md-1-2 form-item">
<div class="label">
<div class="icon"><img src="@/assets/images/policy-change-information/icon-pci-love.png"></div> {{$t('policyChangeInformation.maritalStatus')}}
</div>
<div class="ipt-wrap">
<input class="ipt" type="text">
</div>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-2 form-item"></div>
<div class="pure-u-1 pure-u-md-1-2 form-item"></div>
</div>
</div>
<div class="submit-btn">
{{$t("policyChangeInformation.submit")}}
<div class="submit-btn">
{{$t("policyChangeInformation.submit")}}
</div>
</div>
</div>
</div>
</template>
<script src="./policy-change-information.js"></script>
......
import { mapGetters, mapActions, mapState } from "vuex";
import {
mapGetters,
mapActions,
mapState
} from "vuex";
import api from '@/api/api'
import {
......@@ -9,7 +12,11 @@ import {
import modalComp from '@/components/modal-comp/modal-comp.vue';
import { passwordEncrypt } from '@/utils/encrypt.js';
import modalSimpleComp from '@/components/modal-simple-comp/modal-simple-comp.vue';
import modalUploadCardComp from '@/components/modal-upload-card-comp/modal-upload-card-comp.vue';
import {
passwordEncrypt
} from '@/utils/encrypt.js';
export default {
......@@ -49,10 +56,10 @@ export default {
},
errorTips: {
// 账密登录页
e1: "",// 账号
e2: "",// 密码
e3: "",// 图像验证码
e4: "",// 勾选同意
e1: "", // 账号
e2: "", // 密码
e3: "", // 图像验证码
e4: "", // 勾选同意
// 短信验证码
oe1: "", // 账号
oe2: "", // 短信验证码
......@@ -62,13 +69,17 @@ export default {
p5: ""
},
modalVisiable: false,
modalSimpleVisiable: false,
modalUploadCardVisiable: false,
targetPath: "",
modalIcon: "succ",
modalContent: ""
}
},
components: {
modalComp
modalComp,
modalSimpleComp,
modalUploadCardComp
},
computed: {
...mapState({
......@@ -112,7 +123,7 @@ export default {
onLoginTypeHandler(val) {
this.type = val;
},
initData() { },
initData() {},
handlerIsShowImageVcode() {
return new Promise((resolve, reject) => {
httpPost({
......@@ -381,7 +392,10 @@ export default {
data["vcodeuuid"] = this.values.vcodeuuid;
data["imageValue"] = this.loginForm.imageValue;
}
httpPost({ url: api.stdSendOTP, data: data });
httpPost({
url: api.stdSendOTP,
data: data
});
},
_startTimeClick() {
this.times.remain = 120;
......@@ -429,11 +443,18 @@ export default {
},
modalCallback() {
this.modalVisiable = false;
this.modalSimpleVisiable = false;
this.modalUploadCardVisiable = false;
if (this.targetPath) {
this.$router.push({
"path": this.targetPath
});
}
},
closeCallback() {
this.modalVisiable = false;
this.modalSimpleVisiable = false;
this.modalUploadCardVisiable = false;
}
},
watch: {
......@@ -471,5 +492,5 @@ export default {
// console.log("PK === ", this.PK)
// console.log("E === ", this.E)
},
created() { }
created() {}
}
......
......@@ -244,7 +244,7 @@
}
.login {
padding: 1rem 1rem 3.5rem;
padding: 2rem 1rem 3.5rem;
border-bottom: none;
&-nav {
......
<template>
<div class="content">
<div>
<modal-comp :visible="modalVisiable" :show-confirm="false" :icon="modalIcon" :content="modalContent" :confirm="modalCallback" :overlay="modalCallback"></modal-comp>
<div class="ebg">
<img src="@/assets/images/common/login-bg.png">
</div>
<div class="top-space"></div>
<div class="box">
<!-- 帐密登陆 -->
<div v-if="type == 1" class="login">
<div class="login-tit">
<img v-if="locale == 'zh'" src="@/assets/images/login/login-tit-zh.png">
<img v-if="locale == 'tc'" src="@/assets/images/login/login-tit-tc.png">
<img v-if="locale == 'en'" class="img-en" src="@/assets/images/login/login-tit-en.png">
</div>
<div class="login-nav">
<div @click="onLoginTypeHandler(1)" class="login-nav-tit text-r pointer active">{{$t('login.loginType1')}}</div>
<div class="login-nav-v-line"></div>
<div @click="onLoginTypeHandler(2)" class="login-nav-tit pointer">{{$t('login.loginType2')}}</div>
</div>
<div class="gird-g form">
<div class="pure-u-1 form-item">
<div class="label">
<img src="@/assets/images/login/icon-login-user.png"> {{$t('login.account')}}
</div>
<div class="ipt-wrap">
<input v-model="loginForm.userId" :placeholder="$t('login.accountPlaceholder')" class="ipt" :class="{ err : errorTips.e1.length > 0 }" type="text">
</div>
<div class="validator" v-if="errorTips.e1.length > 0 ">
<img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e1}}
</div>
<modal-simple-comp :visible="modalSimpleVisiable" :show-confirm="false" :icon="modalIcon" :content="modalContent" :confirm="modalCallback" :overlay="modalCallback" :close="closeCallback"></modal-simple-comp>
<modal-upload-card-comp :visible="modalUploadCardVisiable" :show-confirm="true" :content="modalContent" :confirm="modalCallback" :overlay="modalCallback" :close="closeCallback"></modal-upload-card-comp>
<div class="content">
<div class="ebg">
<img src="@/assets/images/common/login-bg.png">
</div>
<div class="top-space"></div>
<div class="box">
<!-- 帐密登陆 -->
<div v-if="type == 1" class="login">
<div class="login-tit">
<img v-if="locale == 'zh'" src="@/assets/images/login/login-tit-zh.png">
<img v-if="locale == 'tc'" src="@/assets/images/login/login-tit-tc.png">
<img v-if="locale == 'en'" class="img-en" src="@/assets/images/login/login-tit-en.png">
</div>
<div class="pure-u-1 form-item">
<div class="label">
<img src="@/assets/images/login/icon-login-password.png"> {{$t('login.password')}}
</div>
<div class="ipt-wrap">
<input v-model="loginForm.password" :placeholder="$t('login.passwordPlaceholder')" class="ipt" :class="{ err : errorTips.e2.length > 0 }" type="password">
</div>
<div class="validator" v-if="errorTips.e2.length > 0 ">
<img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e2}}
</div>
<div class="login-nav">
<div @click="onLoginTypeHandler(1)" class="login-nav-tit text-r pointer active">{{$t('login.loginType1')}}</div>
<div class="login-nav-v-line"></div>
<div @click="onLoginTypeHandler(2)" class="login-nav-tit pointer">{{$t('login.loginType2')}}</div>
</div>
<div class="pure-u-1 form-item" v-if="type == 1 && loginCheck.showImageCode">
<div class="ipt-wrap">
<input :placeholder="$t('login.verifyPlaceholder')" class="ipt ipt-verify" :class="{ err : errorTips.e3.length > 0 }" type="text" v-model="loginForm.imageValue">
<div class="ipt verify-btn pointer vcode" @click="handlerRefreshImageValue">
<img :src="values.imageBase64">
<div class="gird-g form">
<div class="pure-u-1 form-item">
<div class="label">
<img src="@/assets/images/login/icon-login-user.png"> {{$t('login.account')}}
</div>
<div class="ipt-wrap">
<input v-model="loginForm.userId" :placeholder="$t('login.accountPlaceholder')" class="ipt" :class="{ err : errorTips.e1.length > 0 }" type="text">
</div>
<div class="validator" v-if="errorTips.e1.length > 0 ">
<img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e1}}
</div>
</div>
<div class="validator" v-if="errorTips.e3.length > 0 ">
<img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e3}}
<div class="pure-u-1 form-item">
<div class="label">
<img src="@/assets/images/login/icon-login-password.png"> {{$t('login.password')}}
</div>
<div class="ipt-wrap">
<input v-model="loginForm.password" :placeholder="$t('login.passwordPlaceholder')" class="ipt" :class="{ err : errorTips.e2.length > 0 }" type="password">
</div>
<div class="validator" v-if="errorTips.e2.length > 0 ">
<img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e2}}
</div>
</div>
<div class="pure-u-1 form-item" v-if="type == 1 && loginCheck.showImageCode">
<div class="ipt-wrap">
<input :placeholder="$t('login.verifyPlaceholder')" class="ipt ipt-verify" :class="{ err : errorTips.e3.length > 0 }" type="text" v-model="loginForm.imageValue">
<div class="ipt verify-btn pointer vcode" @click="handlerRefreshImageValue">
<img :src="values.imageBase64">
</div>
</div>
<div class="validator" v-if="errorTips.e3.length > 0 ">
<img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e3}}
</div>
</div>
</div>
<div class="login-protocol pointer" @click="loginCheck.agreeProtocol = !loginCheck.agreeProtocol">
<img v-if="!loginCheck.agreeProtocol" class="check" src="@/assets/images/login/un-check.png">
<img v-if="loginCheck.agreeProtocol" class="check" src="@/assets/images/login/check.png"> {{$t('login.agree')}}
<span @click="onProtocolHandler()" class="protocol pointer">{{$t('login.protocol')}}</span>
</div>
<div @click="handlerLogin()" class="login-submit pointer">{{$t('login.login')}}</div>
<div class="login-func">
<div @click="onRegisterHandler()" class="login-func-btn pointer">{{$t('login.register')}}</div>
<div @click="onForgetHandler()" class="login-func-btn pointer">{{$t('login.forget')}}</div>
</div>
</div>
<div class="login-protocol pointer" @click="loginCheck.agreeProtocol = !loginCheck.agreeProtocol">
<img v-if="!loginCheck.agreeProtocol" class="check" src="@/assets/images/login/un-check.png">
<img v-if="loginCheck.agreeProtocol" class="check" src="@/assets/images/login/check.png"> {{$t('login.agree')}}
<span @click="onProtocolHandler()" class="protocol pointer">{{$t('login.protocol')}}</span>
</div>
<div @click="handlerLogin()" class="login-submit pointer">{{$t('login.login')}}</div>
<div class="login-func">
<div @click="onRegisterHandler()" class="login-func-btn pointer">{{$t('login.register')}}</div>
<div @click="onForgetHandler()" class="login-func-btn pointer">{{$t('login.forget')}}</div>
</div>
</div>
<!-- OTP登陆 -->
<div v-if="type == 2" class="login">
<div class="login-tit">
<img v-if="locale == 'zh'" src="@/assets/images/login/login-tit-zh.png">
<img v-if="locale == 'tc'" src="@/assets/images/login/login-tit-tc.png">
<img v-if="locale == 'en'" class="img-en" src="@/assets/images/login/login-tit-en.png">
</div>
<div class="login-nav">
<div @click="onLoginTypeHandler(1)" class="login-nav-tit text-r pointer"> {{$t('login.loginType1')}}</div>
<div class="login-nav-v-line"></div>
<div @click="onLoginTypeHandler(2)" class="login-nav-tit pointer active"> {{$t('login.loginType2')}}</div>
</div>
<div class="gird-g form">
<div class="pure-u-1 form-item">
<div class="label">
<img src="@/assets/images/login/icon-login-phone.png"> {{$t('login.mobile')}}
</div>
<div class="ipt-wrap">
<input :placeholder="$t('login.mobilePlaceholder')" class="ipt" type="text" :class="{ err : errorTips.oe1.length > 0 }" v-model="loginForm.mobileNo">
</div>
<div class="validator" v-if="errorTips.oe1.length > 0 ">
<img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.oe1}}
</div>
<!-- OTP登陆 -->
<div v-if="type == 2" class="login">
<div class="login-tit">
<img v-if="locale == 'zh'" src="@/assets/images/login/login-tit-zh.png">
<img v-if="locale == 'tc'" src="@/assets/images/login/login-tit-tc.png">
<img v-if="locale == 'en'" class="img-en" src="@/assets/images/login/login-tit-en.png">
</div>
<div class="pure-u-1 form-item" v-if="type == 2 && loginCheck.showImageCode">
<div class="ipt-wrap">
<input :placeholder="$t('login.verifyPlaceholder')" class="ipt ipt-verify" :class="{ err : errorTips.oe3.length > 0 }" type="text" v-model="loginForm.imageValue">
<div class="ipt verify-btn pointer vcode" @click="handlerRefreshImageValue">
<img :src="values.imageBase64">
</div>
</div>
<div class="validator" v-if="errorTips.oe3.length > 0 ">
<img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.oe3}}
</div>
<div class="login-nav">
<div @click="onLoginTypeHandler(1)" class="login-nav-tit text-r pointer"> {{$t('login.loginType1')}}</div>
<div class="login-nav-v-line"></div>
<div @click="onLoginTypeHandler(2)" class="login-nav-tit pointer active"> {{$t('login.loginType2')}}</div>
</div>
<div class="pure-u-1 form-item">
<div class="label">
<img src="@/assets/images/login/icon-login-message.png"> {{$t('login.verifyCode')}}
<div class="gird-g form">
<div class="pure-u-1 form-item">
<div class="label">
<img src="@/assets/images/login/icon-login-phone.png"> {{$t('login.mobile')}}
</div>
<div class="ipt-wrap">
<input :placeholder="$t('login.mobilePlaceholder')" class="ipt" type="text" :class="{ err : errorTips.oe1.length > 0 }" v-model="loginForm.mobileNo">
</div>
<div class="validator" v-if="errorTips.oe1.length > 0 ">
<img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.oe1}}
</div>
</div>
<div class="ipt-wrap">
<div class="ipt ipt2" :class="{ err : errorTips.oe2.length > 0 }">
<input :placeholder="$t('login.verifyCodePlaceholder')" class="ipt-code" type="text" v-model="loginForm.otp">
<div v-if="times.remain == 0" class="veri-btn pointer" @click="handlerStdSendOTP">{{$t('register.verifyCodeGet')}}</div>
<div v-else class="veri-btn-default">{{times.tip}}</div>
<div class="pure-u-1 form-item" v-if="type == 2 && loginCheck.showImageCode">
<div class="ipt-wrap">
<input :placeholder="$t('login.verifyPlaceholder')" class="ipt ipt-verify" :class="{ err : errorTips.oe3.length > 0 }" type="text" v-model="loginForm.imageValue">
<div class="ipt verify-btn pointer vcode" @click="handlerRefreshImageValue">
<img :src="values.imageBase64">
</div>
</div>
<div class="validator" v-if="errorTips.oe3.length > 0 ">
<img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.oe3}}
</div>
</div>
<div class="validator" v-if="errorTips.oe2.length > 0 ">
<img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.oe2}}
<div class="pure-u-1 form-item">
<div class="label">
<img src="@/assets/images/login/icon-login-message.png"> {{$t('login.verifyCode')}}
</div>
<div class="ipt-wrap">
<div class="ipt ipt2" :class="{ err : errorTips.oe2.length > 0 }">
<input :placeholder="$t('login.verifyCodePlaceholder')" class="ipt-code" type="text" v-model="loginForm.otp">
<div v-if="times.remain == 0" class="veri-btn pointer" @click="handlerStdSendOTP">{{$t('register.verifyCodeGet')}}</div>
<div v-else class="veri-btn-default">{{times.tip}}</div>
</div>
</div>
<div class="validator" v-if="errorTips.oe2.length > 0 ">
<img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.oe2}}
</div>
</div>
</div>
<div class="login-protocol pointer" @click="loginCheck.agreeProtocol = !loginCheck.agreeProtocol">
<img v-if="!loginCheck.agreeProtocol" class="check" src="@/assets/images/login/un-check.png">
<img v-if="loginCheck.agreeProtocol" class="check" src="@/assets/images/login/check.png"> {{$t('login.agree')}}
<span @click="onProtocolHandler()" class="protocol pointer">{{$t('login.protocol')}}</span>
</div>
<div @click="handlerLogin()" class="login-submit pointer">{{$t('login.login')}}</div>
<div class="login-func">
<div @click="toRegisterPage()" class="login-func-btn pointer">{{$t('login.register')}}</div>
<div @click="onForgetHandler()" class="login-func-btn pointer">{{$t('login.forget')}}</div>
</div>
</div>
<div class="login-protocol pointer" @click="loginCheck.agreeProtocol = !loginCheck.agreeProtocol">
<img v-if="!loginCheck.agreeProtocol" class="check" src="@/assets/images/login/un-check.png">
<img v-if="loginCheck.agreeProtocol" class="check" src="@/assets/images/login/check.png"> {{$t('login.agree')}}
<span @click="onProtocolHandler()" class="protocol pointer">{{$t('login.protocol')}}</span>
</div>
<div @click="handlerLogin()" class="login-submit pointer">{{$t('login.login')}}</div>
<div class="login-func">
<div @click="toRegisterPage()" class="login-func-btn pointer">{{$t('login.register')}}</div>
<div @click="onForgetHandler()" class="login-func-btn pointer">{{$t('login.forget')}}</div>
</div>
</div>
<!---->
<div v-if="type == 3" class="login">
<div class="login-tit">
<img v-if="locale == 'zh'" src="@/assets/images/login/login-tit-zh.png">
<img v-if="locale == 'tc'" src="@/assets/images/login/login-tit-tc.png">
<img v-if="locale == 'en'" class="img-en" src="@/assets/images/login/login-tit-en.png">
</div>
<div class="gird-g form">
<div class="pure-u-1 form-item">
<div class="label">
<img src="@/assets/images/register/icon-register-lock.png"> {{$t('register.newPassword')}}
</div>
<div class="ipt-wrap">
<input :placeholder="$t('register.newPasswordPlaceholder')" class="ipt" type="password" v-model="values.password">
</div>
<div class="validator" v-if="errorTips.p4.length > 0 ">
<img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.p4}}
</div>
<!---->
<div v-if="type == 3" class="login">
<div class="login-tit">
<img v-if="locale == 'zh'" src="@/assets/images/login/login-tit-zh.png">
<img v-if="locale == 'tc'" src="@/assets/images/login/login-tit-tc.png">
<img v-if="locale == 'en'" class="img-en" src="@/assets/images/login/login-tit-en.png">
</div>
<div class="pure-u-1 form-item">
<div class="label">
<img src="@/assets/images/register/icon-register-lock.png"> {{$t('register.newPasswordSure')}}
</div>
<div class="ipt-wrap">
<input :placeholder="$t('register.newPasswordSurePlaceholder')" class="ipt" type="password" v-model="values.passwordRepeat">
<div class="gird-g form">
<div class="pure-u-1 form-item">
<div class="label">
<img src="@/assets/images/register/icon-register-lock.png"> {{$t('register.newPassword')}}
</div>
<div class="ipt-wrap">
<input :placeholder="$t('register.newPasswordPlaceholder')" class="ipt" type="password" v-model="values.password">
</div>
<div class="validator" v-if="errorTips.p4.length > 0 ">
<img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.p4}}
</div>
</div>
<div class="validator" v-if="errorTips.p5.length > 0 ">
<img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.p5}}
<div class="pure-u-1 form-item">
<div class="label">
<img src="@/assets/images/register/icon-register-lock.png"> {{$t('register.newPasswordSure')}}
</div>
<div class="ipt-wrap">
<input :placeholder="$t('register.newPasswordSurePlaceholder')" class="ipt" type="password" v-model="values.passwordRepeat">
</div>
<div class="validator" v-if="errorTips.p5.length > 0 ">
<img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.p5}}
</div>
</div>
</div>
<div @click="onRegisterHandler()" class="login-submit pointer">{{$t('register.sure')}}</div>
</div>
<div @click="onRegisterHandler()" class="login-submit pointer">{{$t('register.sure')}}</div>
</div>
</div>
</div>
......
......@@ -24,7 +24,7 @@
img {
width: 1920px;
margin-left: 360px;
margin-left: -360px;
}
}
......
......@@ -24,14 +24,14 @@
<div class="pure-u-1 form-item">
<div class="ipt-wrap">
<img class="down-arrow" src="@/assets/images/reservation/re-down-arrow.png" alt="">
<select class="ipt" v-model="mobileNoType" >
<select class="ipt" v-model="mobileNoType">
<option v-for="(item,index) in mobileOptions" :key="index" :value="item.type">{{item.name}}</option>
</select>
</div>
</div>
<div class="pure-u-1 form-item">
<div class="ipt-wrap">
<div class="ipt ipt2" :class="{err : errorTips.p1.length > 0}" >
<div class="ipt ipt2" :class="{err : errorTips.p1.length > 0}">
<div class="region-tel">{{mobileTip.areaCode}}</div>
<input :placeholder="mobileTip.placeHolder" class="ipt-tel" type="text" v-model="registerForm.mobileNo">
</div>
......@@ -43,7 +43,7 @@
<div class="pure-u-1 form-item" v-if="registerCheck.showImageCode">
<div class="ipt-wrap">
<input :placeholder="$t('login.verifyPlaceholder')" class="ipt ipt-verify" :class="{err : errorTips.p3.length > 0}" type="text" v-model="registerForm.imageValue">
<input :placeholder="$t('login.verifyPlaceholder')" class="ipt ipt-verify" :class="{err : errorTips.p3.length > 0}" type="text" v-model="registerForm.imageValue">
<div class="ipt verify-btn pointer vcode" @click="handlerRefreshImageVcode">
<img :src="values.imageBase64">
</div>
......@@ -54,7 +54,7 @@
</div>
<div class="pure-u-1 form-item">
<div class="ipt-wrap">
<div class="ipt ipt2" :class="{err : errorTips.p2.length > 0}" >
<div class="ipt ipt2" :class="{err : errorTips.p2.length > 0}">
<input :placeholder="$t('register.verifyCodePlaceholder')" class="ipt-code" type="text" v-model="registerForm.opt">
<div v-if="times.remain == 0" class="veri-btn pointer" @click="handlerStdSendOTP">{{$t('register.verifyCodeGet')}}</div>
<div v-else class="veri-btn-default">{{times.tip}}</div>
......@@ -87,7 +87,7 @@
<img src="@/assets/images/register/icon-register-lock.png"> {{$t('register.newPassword')}}
</div>
<div class="ipt-wrap">
<input :placeholder="$t('register.newPasswordPlaceholder')" class="ipt" :class="{err : errorTips.p4.length > 0}" type="password" v-model="values.password">
<input :placeholder="$t('register.newPasswordPlaceholder')" class="ipt" :class="{err : errorTips.p4.length > 0}" type="password" v-model="values.password">
</div>
<div class="validator" v-if="errorTips.p4.length > 0 ">
<img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.p4}}
......@@ -98,7 +98,7 @@
<img src="@/assets/images/register/icon-register-lock.png"> {{$t('register.newPasswordSure')}}
</div>
<div class="ipt-wrap">
<input :placeholder="$t('register.newPasswordSurePlaceholder')" class="ipt" :class="{err : errorTips.p5.length > 0}" type="password" v-model="values.passwordRepeat">
<input :placeholder="$t('register.newPasswordSurePlaceholder')" class="ipt" :class="{err : errorTips.p5.length > 0}" type="password" v-model="values.passwordRepeat">
</div>
<div class="validator" v-if="errorTips.p5.length > 0 ">
<img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.p5}}
......
......@@ -8,6 +8,24 @@
*
*/
// 居中按钮样式
@mixin btn-center($width, $height) {
width: $width;
height: $height;
line-height: $height;
text-align: center;
}
// 超过多少行自动省略 默认一行
@mixin ellipsis($line:1) {
display: -webkit-box;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: $line;
overflow: hidden;
text-overflow: ellipsis;
}
// 文字截取
@mixin text-overflow() {
overflow: hidden;
......