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 639 additions and 43 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: {
......@@ -55,13 +60,13 @@ module.exports = {
{
name: "分红终身寿险",
path: "/product"
}]
}
]
},
{
name: "客户服务",
path: "",
list: [
{
list: [{
name: "客户服务导航",
path: "/custom/product"
},
......@@ -109,7 +114,7 @@ module.exports = {
{
name: "公司活动",
path: "/empty"
},{
}, {
name: "新闻中心",
path: "/news/list"
},
......@@ -120,7 +125,8 @@ module.exports = {
{
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>
<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">
......@@ -147,6 +149,8 @@
</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>
<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>
......@@ -164,6 +167,7 @@
</div>
</div>
</div>
</div>
</template>
<script src="./login.js"></script>
......
......@@ -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>
......@@ -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>
......
......@@ -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;
......