Skip to content

dev / pingan-life-index-pro

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

默认提交

1 parent ff3c25fe
Inline Side-by-side
Showing 11 changed files with 532 additions and 407 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 api from '@/api/api';
import {
httpPost,
requestDomain
httpPost,
requestDomain
} from '@/api/fetch-api.js';
import {
mapState
mapState
} from 'vuex';
import { formatMoney, getInsuredPeriod, getPolicyName } from "@/utils/biz.js";
import {
formatMoney,
getInsuredPeriod,
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,
// checkbox
default: "download"
}
},
name: "InsuranceQuery",
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: {
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;
}
});
});
props: {
multiSelectable: {
type: Boolean,
default: false
},
model: {
type: String,
// checkbox
default: "download"
}
},
name: "InsuranceQuery",
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]);
}
},
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) {
// 判断最大显示
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 => {
}
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);
},
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();
},
// });
});
},
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);
},
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';
.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 {
......