Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
1b402f3f by simon
Options

默认提交

1 parent ff3c25fe
Expand all
Inline Side-by-side
Showing 11 changed files with 289 additions and 194 deletions
......@@ -791,6 +791,7 @@ module.exports = {
showMore: "Show all policies.",
noPolicy: "You haven't bought any policy, if you have any questions please",
customService: " contact customer service",
downloadClick:"Download",
},
unauth: {
m1: {
......
......@@ -763,6 +763,7 @@ module.exports = {
showMore: "顯示所有保單",
noPolicy: "您還未購買保單，如有疑問請",
customService: "聯繫客服",
downloadClick:"點擊下載",
},
unauth: {
m1: {
......
......@@ -785,6 +785,7 @@ module.exports = {
showMore: "显示所有保单",
noPolicy: "您还未购买保单，如有疑问请",
customService: "联系客服",
downloadClick:"点击下载",
},
unauth: {
m1: {
......
......@@ -32,7 +32,7 @@
width: 1000px;
margin: 0 auto;
.content {
&-content {
// @extend .bb;
display: flex;
justify-content: flex-start;
......
......@@ -5,7 +5,7 @@
<div class="border">
<div class="close" @click="onOverLayHandler()"><img src="@/assets/images/clarms/close.png"></div>
<div class="modal">
<div class="content">
<div class="modal-content">
<div class="info-icon">
<img src="@/assets/images/clarms/suc.png">
</div>
......
......@@ -108,13 +108,74 @@ export default {
nl: [[1, 1], [1, 2], [1, 3], [5, 5], [8, 15], [9, 9]]
},
// 节假日，key是月份，value是日期列表
holiday: {
// holiday: {
}
// }
}
},
components: {},
computed: {
holiday(){
// 计算新历
let result = {};
let year = this.year;
if (!year) {
return;
}
let hkHolidayDefine = this.hkHolidayDefine;
for (let index = 0; index < hkHolidayDefine.gl.length; index++) {
let m = hkHolidayDefine.gl[index][0];
let d = hkHolidayDefine.gl[index][1];
// 如果是周六/周日，顺延到下周一
let date = Date.parse(`${year}.${m}.${d}`);
if (date.getDay() == 6) {
// 周六
date.addDays(2);
} else if (date.getDay() == 0) {
date.addDays(1);
}
m = date.getMonth() + 1;
d = date.getDate();
let list = result[m];
if (!list) {
result[m] = [];
list = result[m];
}
list.push(d);
}
for (let index = 0; index < hkHolidayDefine.nl.length; index++) {
let m = hkHolidayDefine.nl[index][0];
let d = hkHolidayDefine.nl[index][1];
let gl = toSolar(year, m, d);
m = gl[1];
d = gl[2];
// 如果是周六/周日，顺延到下周一
let date = Date.parse(`${year}.${m}.${d}`);
if (date.getDay() == 6) {
// 周六
date.addDays(2);
} else if (date.getDay() == 0) {
date.addDays(1);
}
m = date.getMonth() + 1;
d = date.getDate();
let list = result[m];
if (!list) {
result[m] = [];
list = result[m];
}
list.push(d);
}
return result;
},
locale() {
return this.$i18n.locale || 'tc';
},
......@@ -176,6 +237,7 @@ export default {
* fortmatMonthData 用于渲染日历的数据
*/
formatDate() {
// console.log("qqq:",this.holiday);
let result = [];
let year = this.year;
let month = this.month;
......@@ -217,7 +279,7 @@ export default {
disable = true;
} else {
let holidayCandidates = this.holiday[month+""];
if (holidayCandidates && holidayCandidates.indexOf(d) >= 0) {
if (holidayCandidates && holidayCandidates.indexOf(date) != -1) {
disable = true;
}
}
......@@ -611,7 +673,7 @@ export default {
this.$emit('input', val);
},
year() {
this.calculateHolidays();
// this.calculateHolidays();
}
}
}
......
@import '@/styles/_support';
.list-container {
overflow-x: auto;
margin-bottom: 2rem;
......@@ -13,6 +14,21 @@
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;
......@@ -31,154 +47,156 @@
}
.cell-group {
margin-bottom: 1rem;
margin-bottom: 1rem;
&:last-child {
margin-bottom: 0;
}
&:last-child {
margin-bottom: 0;
}
div {
color: #4c4948;
}
div {
color: #4c4948;
}
.w1 {
// width: 10rem;
width: 20rem;
text-align: center;
}
.w1 {
// width: 10rem;
width: 20rem;
text-align: center;
}
.w2 {
// width: 6.25rem;
width: 12.5rem;
text-align: center;
}
.w2 {
// width: 6.25rem;
width: 12.5rem;
text-align: center;
}
.table-header {
// width: 64.166667rem;
height: 3.25rem;
border-top-left-radius: .666667rem;
border-top-right-radius: .666667rem;
background-color: #f2f2f2;
.table-header {
// width: 64.166667rem;
height: 3.25rem;
border-top-left-radius: .666667rem;
border-top-right-radius: .666667rem;
background-color: #f2f2f2;
display: flex;
align-items: center;
.normal-header {
// width: 58.833333rem;
@extend .bb;
padding: 0 2.75rem;
width: 100%;
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
.normal-header {
// width: 58.833333rem;
@extend .bb;
padding: 0 2.75rem;
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: 1rem;
height: .666667rem;
background: url("~@/assets/images/insurance-query/triangle-down.png") no-repeat center center;
background-size: 100% 100%;
}
.title {
font-weight: bold;
color: #575453;
}
.guide {
transition: all 0.5s;
cursor: pointer;
width: 1rem;
height: .666667rem;
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;
}
.rotate180 {
transform: rotate(180deg);
transition: all 0.5s;
}
}
}
.table-content {
// width: 64.166667rem;
height: auto;
max-height: 50rem;
// display: inline-block;
border-bottom-left-radius: .666667rem;
border-bottom-right-radius: .666667rem;
border-left: solid .083333rem #f2f2f2;
border-right: solid .083333rem #f2f2f2;
border-bottom: solid .083333rem #f2f2f2;
padding: 0 2.75rem;
// max-height: 41.666667rem;
transition: max-height ease-out 0.3s !important;
overflow: auto;
.table-content {
// width: 64.166667rem;
height: auto;
max-height: 50rem;
// display: inline-block;
border-bottom-left-radius: .666667rem;
border-bottom-right-radius: .666667rem;
border-left: solid .083333rem #f2f2f2;
border-right: solid .083333rem #f2f2f2;
border-bottom: solid .083333rem #f2f2f2;
padding: 0 2.75rem;
// max-height: 41.666667rem;
transition: max-height ease-out 0.3s !important;
overflow: auto;
.data-line {
// padding: 0 2.75rem;
height: 4.416667rem;
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
.data-line {
// padding: 0 2.75rem;
height: 4.416667rem;
margin: auto;
.td {
display: flex;
justify-content: space-between;
justify-content: center;
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: 2.5rem;
width: .166667rem;
background-color: #f2f2f2;
margin: 0 .916667rem;
}
}
.label span {
color: $cOrange;
margin-left: .583333rem;
cursor: pointer;
text-decoration: underline;
.cell1 {
width: 98%;
display: flex;
justify-content: space-between;
margin: auto;
}
.separator-h {
width: 100%;
height: 1px;
.separator-v {
height: 2.5rem;
width: .166667rem;
background-color: #f2f2f2;
margin: 0 .916667rem;
}
}
.orange {
background-color: $cOrange !important;
div {
color: #ffffff;
}
.label span {
color: $cOrange;
margin-left: .583333rem;
cursor: pointer;
text-decoration: underline;
}
.hide {
max-height: 0;
border-bottom: none;
.separator-h {
width: 100%;
height: 1px;
background-color: #f2f2f2;
}
}
.sp {
text-decoration :underline;
padding: 0 .4rem;
}
.orange {
background-color: $cOrange !important;
.ac {
color: $cOrange !important;
div {
color: #ffffff;
}
}
.hide {
max-height: 0;
border-bottom: none;
}
.sp {
text-decoration: underline;
padding: 0 .4rem;
}
.ac {
color: $cOrange !important;
}
}
.show-more-btn {
width: 100%;
color: $cOrange !important;
text-decoration :underline;
text-decoration: underline;
cursor: pointer;
justify-content: center !important;
}
......@@ -190,12 +208,13 @@
.activity {
background-color: $cOrange !important;
opacity: .5;
div{
div {
color: #FFFFFF !important;
}
}
.empty{
.empty {
height: 41.666667rem;
display: flex;
align-items: center;
......@@ -228,4 +247,4 @@
.list-container::-webkit-scrollbar {
display: none;
}
\ No newline at end of file
}
......
<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">
<div class="normal-header">
<div class="td w1">{{$t('customService.insuranceQuery.InsurantNumber')}}</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'">
<img @click="downloadPolicy(item)" class="icon-download" src="@/assets/images/insurance-query/icon-down-load.png" alt="">
</template>
</template>
</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>
<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">
<div class="normal-header">
<div class="td w1">{{$t('customService.insuranceQuery.InsurantNumber')}}</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)">
<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>
<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>
<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>
......
......@@ -307,7 +307,8 @@ $borderSize: 6px;
&-border {
width: 100%;
height: 3px;
height: 4px;
background-color: $cOrange2;
}
.table-item {
......@@ -418,9 +419,10 @@ $borderSize: 6px;
max-width: 602px;
height: 67px;
line-height: 67px;
padding: 2px;
border-radius: $borderSize;
// padding: 2px;
// border-radius: $borderSize;
cursor: pointer;
@include border-tans($borderSize);
.cont {
// @extend .fcc;
......
......@@ -87,6 +87,10 @@ input {
.text-jtf {
text-align: justify;
text-align-last: left;
-webkit-text-align: justify;
-webkit-text-align-last: left;
-moz-text-align: justify;
-moz-text-align-last: left;
}
.underline {
......