Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
d6c2547b by simon
Options

默认提交

1 parent 27ff180f
Expand all
Inline Side-by-side
Showing 18 changed files with 435 additions and 189 deletions
<template>
<div id="app">
<v-header class="header"></v-header>
<main ref="container" class="main-container">
<router-view />
</main>
<v-footer></v-footer>
<vhis-modal></vhis-modal>
</div>
<div id="app">
<v-header class="header"></v-header>
<main ref="container" class="main-container">
<router-view />
</main>
<v-footer></v-footer>
<vhis-modal></vhis-modal>
</div>
</template>
......@@ -436,6 +436,10 @@ textarea {
display: none;
}
.clarms .el-input__inner {
font-size: 22px;
}
@media (max-width: 1200px) {
.page-index {
.video-js {
......
<template>
<div>
<div class="comp">
<template v-if="!insuredList || insuredList.length == 0">
<div class="reservation-container-2">
<div class="empty">
......@@ -17,7 +17,7 @@
<template v-else>
<div class="reservation-container-2">
<div class="title default-mt">
<span>{{$t('clarms.step2.label1')}}</span>
<span class="t1">{{$t('clarms.step2.label1')}}</span>
<div class="clarms-border">
<el-select class="clarms-select" v-model="data.insuredIndex" :placeholder="$t('clarms.step2.placeHolder1')">
<template v-if="lan == 'en'">
......@@ -30,7 +30,7 @@
</template>
</el-select>
</div>
<span>{{$t('clarms.step2.label2')}}</span>
<span class="t1">{{$t('clarms.step2.label2')}}</span>
</div>
<hr>
<div class="gird-g form default-mt">
......@@ -165,4 +165,4 @@
<script src="./clarms-plugins-material.js"></script>
<style lang="scss" scoped>
@import "./clarms-plugins-material.scss";
</style>
\ No newline at end of file
</style>
......
......@@ -9,6 +9,7 @@
height: 100%;
@extend .fcc;
text-align: center;
font-size: 22px;
}
.overlay {
......@@ -23,7 +24,7 @@
.modal {
position: relative;
@extend .bb;
width: 63.333333rem;
width: 800px;
// height: 28.5rem;
border-radius: .8333rem;
background-color: #ffffff;
......@@ -32,93 +33,98 @@
.content {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 10rem 8.333333rem;
.info-icon {
width: 10rem;
min-width: 6rem;
img {
width:100%;
}
display: flex;
justify-content: flex-start;
align-items: center;
padding: 10rem 8.333333rem;
.info-icon {
width: 10rem;
min-width: 10rem;
img {
width: 100%;
}
}
.message {
margin-left: 1.666667rem;
font-size: 1.333333rem;
font-weight: 600;
color: $cOrange;
letter-spacing: .083333rem ;
text-align: left;
line-height: 1.5;
span {
cursor: pointer;
text-decoration: underline;
}
.message {
margin-left: 32px;
// font-size: 1.333333rem;
font-weight: 600;
color: $cOrange;
letter-spacing: .083333rem;
text-align: left;
line-height: 1.5;
span {
cursor: pointer;
text-decoration: underline;
}
}
}
.close {
cursor: pointer;
img {
width: 1.666667rem ;
width: 1.666667rem;
position: absolute;
right: -2.5rem;
top: -1.666667rem ;
top: -1.666667rem;
}
}
}
@media (max-width: 800px) {
.modal {
// height: 28.5rem;
padding: 3rem 1.5rem;
width: 80%;
height: auto;
.content {
padding: 5rem 4rem;
}
.close {
display: none;
}
.modal {
// height: 28.5rem;
padding: 3rem 1.5rem;
width: 80%;
height: auto;
.content {
padding: 5rem 4rem;
}
.close {
display: none;
}
}
}
@media (max-width: 700px) {
.modal {
// height: 28.5rem;
padding: 3rem 1.5rem;
width: 80%;
height: auto;
.content {
padding: 4rem 2rem;
}
.close {
display: none;
}
@media (max-width: 700px) {
.modal {
// height: 28.5rem;
padding: 3rem 1.5rem;
width: 80%;
height: auto;
.content {
padding: 4rem 2rem;
}
.close {
display: none;
}
}
}
@media (max-width: 450px) {
.modal {
// height: 28.5rem;
padding: 3rem 1.5rem;
width: 90%;
height: auto;
.close {
display: none;
}
.content {
padding: 2rem .5rem;
}
.modal {
// height: 28.5rem;
padding: 3rem 1.5rem;
width: 90%;
height: auto;
.close {
display: none;
}
.content {
padding: 2rem .5rem;
}
}
}
......
......@@ -9,6 +9,7 @@
height: 100%;
@extend .fcc;
text-align: center;
font-size: 22px;
}
.overlay {
......@@ -23,7 +24,7 @@
.modal {
position: relative;
@extend .bb;
width: 63.333333rem;
width: 800px;
// height: 28.5rem;
border-radius: .8333rem;
background-color: #ffffff;
......@@ -32,93 +33,98 @@
.content {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 10rem 8.333333rem;
.info-icon {
width: 10rem;
min-width: 6rem;
img {
width:100%;
}
display: flex;
justify-content: flex-start;
align-items: center;
padding: 10rem 8.333333rem;
.info-icon {
width: 10rem;
min-width: 10rem;
img {
width: 100%;
}
}
.message {
margin-left: 1.666667rem;
font-size: 1.333333rem;
font-weight: 600;
color: $cOrange;
letter-spacing: .083333rem ;
text-align: left;
line-height: 1.5;
span {
cursor: pointer;
text-decoration: underline;
}
.message {
margin-left: 32px;
// font-size: 1.333333rem;
font-weight: 600;
color: $cOrange;
letter-spacing: .083333rem;
text-align: left;
line-height: 1.5;
span {
cursor: pointer;
text-decoration: underline;
}
}
}
.close {
cursor: pointer;
img {
width: 1.666667rem ;
width: 1.666667rem;
position: absolute;
right: -2.5rem;
top: -1.666667rem ;
top: -1.666667rem;
}
}
}
@media (max-width: 800px) {
.modal {
// height: 28.5rem;
padding: 3rem 1.5rem;
width: 80%;
height: auto;
.content {
padding: 5rem 4rem;
}
.close {
display: none;
}
.modal {
// height: 28.5rem;
padding: 3rem 1.5rem;
width: 80%;
height: auto;
.content {
padding: 5rem 4rem;
}
.close {
display: none;
}
}
}
@media (max-width: 700px) {
.modal {
// height: 28.5rem;
padding: 3rem 1.5rem;
width: 80%;
height: auto;
.content {
padding: 4rem 2rem;
}
.close {
display: none;
}
@media (max-width: 700px) {
.modal {
// height: 28.5rem;
padding: 3rem 1.5rem;
width: 80%;
height: auto;
.content {
padding: 4rem 2rem;
}
.close {
display: none;
}
}
}
@media (max-width: 450px) {
.modal {
// height: 28.5rem;
padding: 3rem 1.5rem;
width: 90%;
height: auto;
.close {
display: none;
}
.content {
padding: 2rem .5rem;
}
.modal {
// height: 28.5rem;
padding: 3rem 1.5rem;
width: 90%;
height: auto;
.close {
display: none;
}
.content {
padding: 2rem .5rem;
}
}
}
......
......@@ -2,6 +2,10 @@
$borderSize: 8px;
.comp{
font-size: 22px;
}
.clarms-container {
box-sizing: border-box;
padding: .166667rem;
......@@ -25,6 +29,7 @@ $borderSize: 8px;
border-radius: 2px;
padding: 2px;
background-image: linear-gradient(to right, #ffb31d, #f15907);
max-width: 400px;
.cont {
@extend .bb;
......@@ -33,6 +38,7 @@ $borderSize: 8px;
height: 100%;
background-color: #ffffff;
border-radius: 2px;
font-size: 18px;
}
}
......@@ -63,7 +69,7 @@ $borderSize: 8px;
}
.clarms-t1 {
font-size: 1.5rem;
font-size: 22px;
color: #f15907;
letter-spacing: .166667rem;
}
......@@ -71,6 +77,7 @@ $borderSize: 8px;
.clarms-t2 {
color: #58595b;
letter-spacing: .166667rem;
font-size: 18px;
}
}
......@@ -89,7 +96,8 @@ $borderSize: 8px;
line-height: 3rem;
color: white;
letter-spacing: .166667rem;
font-size: 1.166667rem;
// font-size: 1.166667rem;
font-size: 18px;
cursor: pointer;
}
......
<template>
<div>
<div class="comp">
<div class="clarms-container">
<div class="clarms-box">
<div class="clarms-tips" v-if="tipsVisible">
......
<template>
<div class="reservation-container">
<div class="comp reservation-container">
<div class="title" v-if="!(userInfo && userInfo.name)"><u><span class="pointer" @click="toRegisterPage">{{$t('clarms.step1.register')}}</span>/<span class="pointer" @click="toLoginPage">{{$t('clarms.step1.login')}}</span></u>{{$t('clarms.step1.t1')}}</div>
<div class="form-name default-mt"> {{$t('clarms.step1.label0')}}</div>
<div class="gird-g form default-mt">
......@@ -69,4 +69,4 @@
<script src="./clarms-plugins-verifyform.js"></script>
<style lang="scss" scoped>
@import "./clarms-plugins-verifyform.scss";
</style>
\ No newline at end of file
</style>
......
<template>
<div>
<div class="navigate">
<div class="bg"></div>
<div class="cont">
<span class="tt">索償申請</span>
</div>
</div>
<div class="content clarms">
<template v-if="step == 3">
<div class="alert">
<img class="icon" src="@/assets/images/common/icon-alert-i.png" alt="">
<div class="txt">
{{$t('customService.unauth.baseInfoTip')}}&nbsp;
<span class="pointer btn" @click="gotoInformationPage">{{$t('customService.unauth.infoBtn')}}</span>
&nbsp;{{$t('customService.unauth.baseInfoTail')}}
</div>
<!-- <img class="pointer close" src="@/assets/images/common/icon-alert-close.png" alt=""> -->
</div>
</template>
<clarms-modal-one v-if="showModal1" @close="showModal1 = false"></clarms-modal-one>
<clarms-modal-two v-if="showModal2" @close="showModal2 = false"></clarms-modal-two>
<div class="mobile-margin">
<div>
<template v-if="step == 3">
<div class="alert">
<img class="icon" src="@/assets/images/common/icon-alert-i.png" alt="">
<div class="txt">
{{$t('customService.unauth.baseInfoTip')}}&nbsp;
<span class="pointer btn" @click="gotoInformationPage">{{$t('customService.unauth.infoBtn')}}</span>
&nbsp;{{$t('customService.unauth.baseInfoTail')}}
</div>
<!-- <img class="pointer close" src="@/assets/images/common/icon-alert-close.png" alt=""> -->
</div>
</template>
<clarms-modal-one v-if="showModal1" @close="showModal1 = false"></clarms-modal-one>
<clarms-modal-two v-if="showModal2" @close="showModal2 = false"></clarms-modal-two>
<div class="mobile-margin">
<template v-if="step == 1">
<clarms-verify-form @insuredInfoList="handleInsuredInfo"></clarms-verify-form>
</template>
<template v-if="step == 1">
<clarms-verify-form @insuredInfoList="handleInsuredInfo"></clarms-verify-form>
</template>
<template v-if="step == 2">
<clarms-material :insuredList="customerList" :cid="cid" @showModal="handleShowModal"></clarms-material>
</template>
</div>
</div>
</div>
<template v-if="step == 2">
<clarms-material :insuredList="customerList" :cid="cid" @showModal="handleShowModal"></clarms-material>
</template>
</div>
</div>
</template>
<script src="./clarms.js"></script>
......
import {
mapGetters,
mapActions,
mapState
} from "vuex";
import api from '@/api/api'
import {
httpGet,
httpPost
} from '@/api/fetch-api.js'
import ClarmsModalOne from '@/components/clarms/clarms-plugins-modal1.vue';
import ClarmsModalTwo from '@/components/clarms/clarms-plugins-modal2.vue';
import ClarmsVerifyForm from '@/components/clarms/clarms-plugins-verifyform.vue';
import ClarmsMaterial from '@/components/clarms/clarms-plugins-material.vue';
// 用户没有登录
// 校验成功
// 校验失败
// 用户已经登录
// 没有保单
// 校验成功
// 校验失败
// 有保单
export default {
data() {
return {
step: 0, // 1是表单；2是报案页面；3=信息不完整
showModal1: false,
showModal2: false,
agress: false,
reservationTypes: [],
cid: false,
// 可以理赔的客户信息
customerList: []
}
},
components: {
ClarmsVerifyForm,
ClarmsMaterial,
ClarmsModalOne,
ClarmsModalTwo
},
computed: {
...mapState({
userInfo: state => state.userInfo
}),
i18n() {
return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {};
},
},
methods: {
toClarms() {
this.$router.push({
path: "/clarms",
query: {}
});
},
initData() {
// this.step = 2;
// return;
if (this.userInfo && this.userInfo.name) {
this.loadCidIfLogin();
sessionStorage.removeItem("clarmsRequestCid")
} else {
let cid = sessionStorage.getItem("clarmsRequestCid");
if (cid) {
this.cid = cid;
this.checkCid();
} else {
this.step = 1;
}
}
},
loadCidIfLogin() {
let param = {
sid: this.userInfo.sid
};
httpPost({
url: api.getCidByLogin,
sid: true,
data: param
}).then(res => {
if (res) {
this.cid = res;
this.checkCid();
} else {
this.step = 3;
}
}).catch(e => {
this.step = 1;
});
},
checkCid() {
let param = {
cid: this.cid
}
httpPost({
url: api.clarmsCustomerList,
data: param
}).then(res => {
sessionStorage.removeItem("clarmsRequestCid");
if (res) {
this.customerList = res.insuredInfoList;
this.step = 2;
}
// if (res && res.insuredInfoList && res.insuredInfoList.length > 0) {
// this.customerList = res.insuredInfoList;
// this.step = 2;
// } else {
// sessionStorage.removeItem("clarmsRequestCid");
// this.step = 1;
// }
}).catch(e => {
sessionStorage.removeItem("clarmsRequestCid");
this.step = 1;
});
},
handleInsuredInfo(data) {
this.cid = data.cid;
this.customerList = data.list;
this.step = 2;
},
handleShowModal(modalIndex) {
console.log(modalIndex);
if (modalIndex == 1) {
this.showModal1 = true;
} else if (modalIndex == 2) {
this.showModal2 = true;
}
},
gotoInformationPage() {
let c = this.$route.fullPath;
this.$router.push({
path: "/infomation/improve",
query: {
c: c,
a: 1
}
});
},
logoutAction() {
this.sid = false;
this.hadQueryCustomerList = false;
this.customerList = [];
this.step = 1;
},
loginAction() {
this.sid = false;
this.hadQueryCustomerList = false;
this.customerList = [];
}
},
watch: {
userInfo(val) {
if (val && val.name) {
this.loginAction();
} else {
this.logoutAction();
}
}
},
mounted() {
this.initData();
},
created() {}
}
......@@ -29,11 +29,13 @@ input {
}
.reservation-container {
@extend .fcc;
@extend .bb;
border-radius: .666667rem;
border: solid .083333rem $cOrange;
background-color: #ffffff;
padding: 2.666667rem 10rem 2.833333rem 10rem;
min-height: 500px;
.title {
font-size: 1.333333rem;
......@@ -80,7 +82,7 @@ input {
border: solid .083333rem $cOrange;
background-color: #ffffff;
padding: 1.666667rem 10rem 2.833333rem 10rem;
.title {
font-size: 1.333333rem;
color: $cOrange;
......@@ -94,28 +96,28 @@ input {
color: #666666;
}
}
.default-mt {
margin-top: 2.666667rem;
}
.submit-btn{
margin: 2.5rem auto 1rem;
}
.flex-top {
display: flex;
justify-content: left;
align-items: flex-start;
}
.flex-start {
display: flex;
justify-content: left;
align-items: flex-start;
flex-wrap: wrap;
}
.check-item {
display: flex;
align-items: center;
......@@ -171,28 +173,28 @@ input {
background: url("~@/assets/images/clarms/icon1.png");
background-size: 100% 100%;
}
.upload-icon-2 {
width: 8.333333rem ;
height: 8.333333rem ;
background: url("~@/assets/images/clarms/icon2.png");
background-size: 100% 100%;
}
.upload-icon-3 {
width: 8.333333rem ;
height: 8.333333rem ;
background: url("~@/assets/images/clarms/icon3.png");
background-size: 100% 100%;
}
.upload-icon-4 {
width: 8.333333rem ;
height: 8.333333rem ;
background: url("~@/assets/images/clarms/icon4.png");
background-size: 100% 100%;
}
.upload-icon-5 {
width: 8.333333rem ;
height: 8.333333rem ;
......@@ -218,7 +220,7 @@ input {
border-top: 1px solid #eee;
margin-top: 2.5rem ;
}
.tips {
display: flex;
justify-content: flex-start;
......@@ -234,7 +236,7 @@ input {
color: $cOrange;
}
}
.contact {
text-align: center;
cursor: pointer;
......@@ -242,7 +244,7 @@ input {
font-weight: 600;
}
}
.form {
display: flex;
......@@ -466,7 +468,7 @@ input {
.label {
min-width: 30%;
}
.ipt-wrap {
width: 70%;
}
......@@ -478,7 +480,7 @@ input {
}
}
}
}
}
@media (max-width: 600px) {
.reservation-container {
......@@ -492,7 +494,7 @@ input {
.label {
min-width: 30%;
}
.ipt-wrap {
width: 70%;
}
......@@ -539,4 +541,4 @@ input {
.reservation-container-2 {
padding: 1.666667rem 1rem;
}
}
\ No newline at end of file
}
......
<template>
<div class="reservation-container">
<div class="submit-btn" @click="toClarms">下一步</div>
</div>
<!-- <div>
<template v-if="step == 3">
<div class="alert">
<img class="icon" src="@/assets/images/common/icon-alert-i.png" alt="">
<div class="txt">
{{$t('customService.unauth.baseInfoTip')}}&nbsp;
<span class="pointer btn" @click="gotoInformationPage">{{$t('customService.unauth.infoBtn')}}</span>
&nbsp;{{$t('customService.unauth.baseInfoTail')}}
</div>
</div>
</template>
<clarms-modal-one v-if="showModal1" @close="showModal1 = false"></clarms-modal-one>
<clarms-modal-two v-if="showModal2" @close="showModal2 = false"></clarms-modal-two>
<div class="mobile-margin">
<template v-if="step == 1">
<clarms-verify-form @insuredInfoList="handleInsuredInfo"></clarms-verify-form>
</template>
<template v-if="step == 2">
<clarms-material :insuredList="customerList" :cid="cid" @showModal="handleShowModal"></clarms-material>
</template>
</div>
</div> -->
</template>
<script src="./clarms-comp.js"></script>
<style lang="scss" scoped>
@import "./clarms-comp.scss";
</style>
......@@ -14,7 +14,7 @@ import CommonForm from './components/common-form.vue'
import PolicyChangeGuide from './components/policy-change-guide.vue'
import PolicyChangeContact from './components/policy-change-contact.vue'
import PolicyChangeInformation from './components/policy-change-information.vue'
import Clarms from './components/clarms.vue'
import Clarms from './components/clarms-comp.vue'
export default {
data() {
......
......@@ -189,7 +189,7 @@ export default {
this.$set(this, 'bannerList', bannerList);
console.log(this.bannerList);
this.refreshVideoPlayer(targetData.videoUrl, targetData.videoPlayer);
this.refreshVideoPlayer(targetData.videoUrl, targetData.videoPoster);
// 设置标题
document.title = targetData.productName;
......
......@@ -276,6 +276,14 @@ const routes = [
meta: {
title: '平安人寿香港'
}
},
{
path: '/clarms',
name: 'clarms',
component: () => import('./pages/clarms/clarms.vue'),
meta: {
title: '平安人寿香港'
}
}
// 404页面
// {
......@@ -306,12 +314,12 @@ router.beforeEach((to, from, next) => {
case "zh":
lang = zh;
break;
// 英文
// 英文
case "en":
defaultTitle = "Ping An Life Hong Kong"
lang = en;
break;
// 繁体
// 繁体
default:
defaultTitle = "平安人壽香港"
lang = tc;
......