Skip to content

dev / pingan-life-index-pro

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

默认提交

1 parent 45c18ee9
Inline Side-by-side
Showing 11 changed files with 622 additions and 31 deletions
......@@ -6,12 +6,12 @@ import {
} from '@/api/fetch-api.js'
import Auth from '@components/auth/auth.vue';
import PolicyHeadList from "./policy-head-list.vue";
import ECorrespondenceHeadList from "./e-correspondence-head-list.vue";
import { formatMoney, getInsuredPeriod, getBenefitType, getPayPeriod, getPayType, getMoneyName, getPayMode, getPolicyName } from "@/utils/biz.js";
export default {
name: "InsuranceQuery",
name: "ECorrespondenceEnquiry",
data() {
return {
showForm: false,
......@@ -162,6 +162,6 @@ export default {
},
components: {
Auth,
PolicyHeadList,
ECorrespondenceHeadList,
},
}
......
<template>
<div class="container">
<!-- 登陆/注册提示 -->
<auth @onLogin="userLogin" @onLogout="userLogout" :checkProfile="true" :tipModel="'m1'" ref="auth"></auth>
<div v-if="showForm">
<!-- 保单列表 -->
<policy-head-list :multiSelectable="false" @onSelect="handlePolicySelect"></policy-head-list>
<e-correspondence-head-list :multiSelectable="false" @onSelect="handlePolicySelect"></e-correspondence-head-list>
<!-- 保单详情 -->
<template v-if="dataForm">
......@@ -271,7 +270,7 @@
</template>
<script src="./insurance-query.js"></script>
<script src="./e-correspondence-enquiry.js"></script>
<style lang="scss" scoped>
@import "./insurance-query.scss";
@import "./e-correspondence-enquiry.scss";
</style>
......
/**
* 组件描述：保单查询列表
*/
import api from '@/api/api';
import {
httpPost,
requestDomain
} from '@/api/fetch-api.js';
import {
mapState
} from 'vuex';
import {
formatMoney,
getInsuredPeriod,
getInsuredState,
getPolicyName
} from "@/utils/biz.js";
import Modal2Comp from '@/components/modal2-comp/modal2-comp.vue';
export default {
props: {
multiSelectable: {
type: Boolean,
default: false
},
model: {
type: String,
default: "download"
},
},
name: "PolicyHeadList",
data() {
return {
myPolicyList: [],
maxShow: 2,
selectPolicyCode: "",
selectPolicyCodes: {},
hide: false,
showDownloadError: false
}
},
computed: {
...mapState({
policyList: state => state.policyList
}),
lan() {
return this.$i18n.locale;
},
i18n() {
return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {};
},
},
methods: {
onShowTipsOverHandler(event, item, index) {
let child = event.currentTarget.childNodes[0];
child.style.display = "block";
},
onShowTipsOutHandler(event, item, index) {
let child = event.currentTarget.childNodes[0];
child.style.display = "none";
},
toContactUs() {
this.$router.push({
path: "/custom/service",
query: {
q: "m1"
}
});
},
queryList() {
if (this.policyList && this.policyList.length > 0) {
this.myPolicyList = this.policyList;
this.myPolicyList.forEach(element => {
element.activity = false;
})
this.initSelected();
} else {
this.checkCustomer().then(() => {
httpPost({
url: api.policyList,
sid: true
}).then(res => {
if (!res || res.length == 0) {
this.myPolicyList = null;
} else {
res.forEach(element => {
element.activity = false;
// let len = element.policyCode.length;
// element.policyCodeStr = element.policyCode && len > 5 ?
// element.policyCode.substring(0, 2) + "**********"
// + element.policyCode.substring(len - 4, len) : element.policyCode;
});
this.$store.commit("CACHE_POLICY_LIST", res);
this.myPolicyList = res;
}
this.initSelected();
}).catch(e => {
this.myPolicyList = null;
switch (e.code) {
case "2002":
// 不是客户，没有购买保单
break;
}
});
});
}
},
initSelected() {
let selectPolicy = null;
try {
let data = sessionStorage.getItem("_hklife_policy");
if (data) {
sessionStorage.removeItem("_hklife_policy");
selectPolicy = JSON.parse(decodeURIComponent(data));
if (selectPolicy) {
if (this.multiSelectable) {
this.selectPolicyCodes[selectPolicy.code] = selectPolicy;
} else {
this.selectPolicyCode = selectPolicy.code;
}
this.$emit("onSelect", [selectPolicy]);
// 判断最大显示
let index = -1;
for (let i = 0; i < this.myPolicyList.length; i++) {
if (selectPolicy.code == this.myPolicyList[i].policyCode) {
this.myPolicyList[i].activity = true;
index = i;
}
}
this.$set(this, "myPolicyList", this.myPolicyList);
if (index > 2) {
this.maxShow = this.myPolicyList.length;
}
}
}
} catch (e) {
}
if (!selectPolicy) {
let firstPolicy = this.myPolicyList[0];
this.myPolicyList[0].activity = true;
selectPolicy = {
id: firstPolicy.policyId,
code: firstPolicy.policyCode
};
if (this.multiSelectable) {
this.selectPolicyCodes[selectPolicy.code] = selectPolicy;
} else {
this.selectPolicyCode = selectPolicy.code;
}
this.$emit("onSelect", [selectPolicy]);
}
},
handlePolicySelect(item, index) {
let code = item.policyCode;
if (this.multiSelectable) {
let c = this.selectPolicyCodes[code];
if (!c || typeof c == "undefined") {
item.activity = true;
this.selectPolicyCodes[code] = {
code: code,
id: item.policyId
};
} else {
item.activity = false;
delete this.selectPolicyCodes[code];
}
// this.$set(this, 'myPolicyList', this.myPolicyList);
let data = [];
for (let key in this.selectPolicyCodes) {
data.push(this.selectPolicyCodes[key]);
}
this.$emit("onSelect", data);
} else {
if (code != this.selectPolicyCode) {
this.selectPolicyCode = code;
this.$emit("onSelect", [{
code: code,
id: item.policyId
}]);
}
}
},
isPolicySelect(item, index) {
let code = item.policyCode;
if (this.multiSelectable) {
let c = this.selectPolicyCodes[code];
if (!c || typeof c == "undefined") {
return false;
} else {
return true;
}
}
return false;
},
checkCustomer() {
return new Promise(resolve => {
resolve();
// httpPost({ url: api.profile, sid: true }).then(res => {
// if (res.isCustomer == 1) {
// resolve();
// } else {
// this.gotoCustomerAuthPage();
// }
// }).catch(res => {
// });
});
},
gotoCustomerAuthPage() {
let c = this.$route.fullPath;
this.$router.push({
name: "customerAuth",
query: {
c: c
}
});
},
formatMoney(s, t) {
if (typeof t == "undefined") {
t = 1;
}
return formatMoney(s, t);
},
// 保障年限，保n年
formatInsuredPeriod(t, v) {
return getInsuredPeriod(this.$i18n.locale, t, v);
},
formatInsuredState(c) {
return getInsuredState(this.$i18n.locale, c);
},
formatPolicyName(c, n) {
return getPolicyName(this.$i18n.locale, c, n);
},
downloadPolicy(policy) {
if (policy) {
httpPost({
url: api.getDownloadPath,
sid: true,
data: {
policyCode: policy.policyCode
}
}).then(res => {
if (res) {
let url = requestDomain() + api.downloadPolicy + "/" + res;
window.open(url);
} else {
this.showDownloadError = true;
}
});
}
}
},
components: {
Modal2Comp
},
mounted() {
this.queryList();
},
}
@import '@/styles/_support.scss';
.list-container {
overflow-x: auto;
margin-bottom: 24px;
}
.hide {
max-height: 0;
border-bottom: none;
}
.table-contaner {
position: relative;
}
.download {
position: relative;
&-tips {
display: none;
position: absolute;
top: -3px;
left: 20px;
z-index: 11;
padding: 2px;
@include border-tans();
min-width: 80px;
}
}
.guide {
position: absolute;
transition: all 0.5s;
cursor: pointer;
width: 12px;
height: 8px;
background: url("~@/assets/images/insurance-query/triangle-down2.png") no-repeat center center;
background-size: 100% 100%;
top: 16px;
right: 26px;
}
.rotate180 {
transform: rotate(180deg);
transition: all 0.5s;
}
.cell-group {
margin-bottom: 12px;
&:last-child {
margin-bottom: 0;
}
div {
color: #4c4948;
}
.w1 {
// width: 120px;
width: 240px;
text-align: center;
}
.w2 {
// width: 75px;
width: 150px;
text-align: center;
}
.table-header {
// width: 770px;
height: 39px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
background-color: #f2f2f2;
display: flex;
align-items: center;
.normal-header {
// width: 706px;
@extend .bb;
padding: 0 32px;
width: 100%;
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
.title {
font-weight: bold;
color: #575453;
}
.guide {
transition: all 0.5s;
cursor: pointer;
width: 12px;
height: 8px;
background: url("~@/assets/images/insurance-query/triangle-down.png") no-repeat center center;
background-size: 100% 100%;
}
.rotate180 {
transform: rotate(180deg);
transition: all 0.5s;
}
}
}
.table-content {
// width: 770px;
height: auto;
max-height: 600px;
// display: inline-block;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
border-left: solid 1px #f2f2f2;
border-right: solid 1px #f2f2f2;
border-bottom: solid 1px #f2f2f2;
padding: 0 32px;
transition: max-height ease-out 0.3s !important;
overflow: auto;
.data-line {
// padding: 0 32px;
height: 50px;
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
.td {
display: flex;
justify-content: center;
align-items: center;
}
.cell1 {
width: 98%;
display: flex;
justify-content: space-between;
margin: auto;
}
.separator-v {
height: 30px;
width: 2px;
background-color: #f2f2f2;
margin: 0 11px;
}
}
.label span {
color: $cOrange;
margin-left: 7px;
cursor: pointer;
text-decoration: underline;
}
.separator-h {
width: 100%;
height: 1px;
background-color: #f2f2f2;
}
}
.orange {
background-color: $cOrange;
div {
color: #ffffff;
}
}
.new{
@include linear-bg;
}
.hide {
max-height: 0;
border-bottom: none;
}
.sp {
text-decoration: underline;
padding: 0 4.8px;
}
.ac {
color: $cOrange !important;
}
}
.show-more-btn {
width: 100%;
color: $cOrange !important;
text-decoration: underline;
cursor: pointer;
justify-content: center !important;
}
.pointer {
cursor: pointer;
}
.activity {
background-color: $cOrange !important;
opacity: .5;
div {
color: #FFFFFF !important;
}
}
.empty {
height: 500px;
display: flex;
align-items: center;
justify-content: center;
.tips {
align-items: center;
display: flex;
.icon {
margin-right: 5px;
display: inline-block;
}
.btn {
color: $cOrange;
}
}
}
<template>
<div class="list-container">
<modal2-comp :visible="showDownloadError" :close="()=>{showDownloadError = false}" :content="$t('glbalTips.sysError')"></modal2-comp>
<div class="cell-group">
<div class="table-contaner">
<div class="table-header orange new" >
<div class="normal-header">
<div class="td w1">{{$t('customService.insuranceQuery.InsurantNumber')}}</div>
<div class="td w2">{{$t('customService.insuranceQuery.policyState')}}</div>
<div class="td w2">{{$t('customService.insuranceQuery.activeDate')}}</div>
<div class="td w2">{{$t('customService.insuranceQuery.Insurant')}}</div>
<div class="td w1">{{$t('customService.insuranceQuery.InsurantName')}}</div>
<div class="td w2">{{$t('customService.insuranceQuery.InsurantAmount')}}</div>
<div class="td w2">{{$t('customService.insuranceQuery.effectiveDate')}}</div>
<div class="td w2">{{$t('customService.insuranceQuery.period')}}</div>
</div>
</div>
<div class="guide" :class="{rotate180 : hide}" @click="hide = !hide"></div>
</div>
<div class="table-content" :class="{hide : hide}">
<template v-if="myPolicyList">
<div v-for="(item,index) in myPolicyList" :key="index">
<template v-if="index < maxShow">
<div class="data-line" @click="handlePolicySelect(item,index)">
<div class="td w1 pointer">
<template v-if="multiSelectable">
<img v-if="item.activity" class="icon-check pointer" src="@/assets/images/insurance-query/check.png">
<img v-else class="icon-check pointer" src="@/assets/images/insurance-query/un-check.png">
<span class="sp" :class="{ac: item.activity}">{{item.policyCode}}</span>
</template>
<template v-else>
<template v-if="model != 'download'">
<img v-if="selectPolicyCode == item.policyCode" class="icon-check pointer" src="@/assets/images/insurance-query/check.png">
<img v-else class="icon-check pointer" src="@/assets/images/insurance-query/un-check.png">
</template>
<span class="sp" :class="{ac: selectPolicyCode == item.policyCode}">{{item.policyCode}}</span>
<template v-if="model == 'download'">
<div class="download" @mouseover="onShowTipsOverHandler($event,item,index)" @mouseout="onShowTipsOutHandler($event,item,index)" @click="downloadPolicy(item)">
<div class="download-tips">
<div class="cont">{{$t('customService.insuranceQuery.downloadClick')}}</div>
</div>
<img class="icon-download" src="@/assets/images/insurance-query/icon-down-load.png" alt="">
</div>
</template>
</template>
</div>
<div class="td w2">{{formatInsuredState(item.policyState)}}</div>
<div class="td w2">{{item.activeDate?item.activeDate.split(" ")[0]:""}}</div>
<div class="td w2">{{lan == 'en' ? (item.insuredNameEn ? item.insuredNameEn : item.insuredNameCn) : (item.insuredNameCn ? item.insuredNameCn : item.insuredNameEn)}}</div>
<div class="td w1">{{formatPolicyName(item.productCode, item.productName)}}</div>
<div class="td w2">{{item.moneyCode}} {{formatMoney(item.amount,0)}}</div>
<div class="td w2">{{item.expireAt?item.expireAt.split(" ")[0]:""}}</div>
<!-- <div class="td w2">{{item.guaranteeAge?item.guaranteeAge.split(" ")[0]:""}}</div> -->
<div class="td w2">{{formatInsuredPeriod(item.insuredPeriodType,item.insuredPeriodValue)}}</div>
</div>
<div class="separator-h" v-if="index < myPolicyList.length - 1 && index < maxShow - 1"></div>
</template>
</div>
<template v-if="!policyList || maxShow < policyList.length">
<div class="separator-h"></div>
<div class="data-line show-more-btn" @click="maxShow = policyList.length">{{$t('customService.insuranceQuery.showMore')}}</div>
</template>
</template>
<template v-else>
<div class="empty">
<div class="tips">
<img class="icon" src="@/assets/images/common/icon-alert-i.png" alt="">
<div class="txt">
{{$t('customService.insuranceQuery.noPolicy')}}
<span class="pointer btn" @click="toContactUs">{{$t('customService.insuranceQuery.customService')}}</span>
</div>
</div>
</div>
</template>
</div>
</div>
</div>
</template>
<script src="./e-correspondence-head-list.js"></script>
<style lang="scss" scoped>
@import "./e-correspondence-head-list.scss";
</style>
<template>
<div class="container">
<!-- 登陆/注册提示 -->
<auth @onLogin="userLogin" @onLogout="userLogout" :checkProfile="true" :tipModel="'m1'" ref="auth"></auth>
<div v-if="showForm">
......
/**
* 组件描述：保单查询列表
*/
import api from '@/api/api';
import {
httpPost,
......@@ -23,11 +27,10 @@ export default {
},
model: {
type: String,
// checkbox
default: "download"
}
},
name: "InsuranceQuery",
},
name: "PolicyHeadList",
data() {
return {
myPolicyList: [],
......
......@@ -170,7 +170,7 @@
}
.orange {
background-color: $cOrange !important;
background-color: $cOrange;
div {
color: #ffffff;
......@@ -234,15 +234,3 @@
}
}
// @media (max-width: 1200px) {
// .list-container {
// display: -webkit-box;
// overflow-x: auto;
// -webkit-overflow-scrolling: touch;
// width: 92vw;
// }
// }
// .list-container::-webkit-scrollbar {
// display: none;
// }
......
......@@ -3,7 +3,7 @@
<modal2-comp :visible="showDownloadError" :close="()=>{showDownloadError = false}" :content="$t('glbalTips.sysError')"></modal2-comp>
<div class="cell-group">
<div class="table-contaner">
<div class="table-header orange">
<div class="table-header orange" >
<div class="normal-header">
<div class="td w1">{{$t('customService.insuranceQuery.InsurantNumber')}}</div>
<div class="td w2">{{$t('customService.insuranceQuery.policyState')}}</div>
......@@ -45,7 +45,6 @@
</template>
</div>
<div class="td w2">{{formatInsuredState(item.policyState)}}</div>
<div class="td w2">{{item.activeDate?item.activeDate.split(" ")[0]:""}}</div>
<div class="td w2">{{lan == 'en' ? (item.insuredNameEn ? item.insuredNameEn : item.insuredNameCn) : (item.insuredNameCn ? item.insuredNameCn : item.insuredNameEn)}}</div>
......
......@@ -141,10 +141,6 @@
font-size: $fontSize;
border-radius: $hei;
text-align: center;
// background: url("~@assets/images/vhis/vhis-btn.png");
// background-size: 100% 100%;
// background-repeat: no-repeat;
background-image: linear-gradient(135deg, #f15a08, #feab1b), linear-gradient(90deg, #fff, #fff);
color: white;
font-weight: 600;
......@@ -153,7 +149,6 @@
}
@mixin content-percent($percent:4%) {
box-sizing: border-box;
padding: 0 $percent;
......@@ -166,3 +161,8 @@
background-image: linear-gradient(90deg, #fff, #fff), linear-gradient(90deg, #feab1b, #f15a08);
border-radius: $borderRadius;
}
@mixin linear-bg() {
background-color: transparent;
background-image: linear-gradient(135deg, #f15a08, #feab1b), linear-gradient(90deg, #fff, #fff);
}
......
{
"compilerOptions": {
"target": "ES5",
"outDir": "bin-debug",
"sourceMap": true
},
"exclude": [
"bin-debug",
"bin-release",
"resource"
]
}
\ No newline at end of file