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 = { ...@@ -791,6 +791,7 @@ module.exports = {
791 showMore: "Show all policies.", 791 showMore: "Show all policies.",
792 noPolicy: "You haven't bought any policy, if you have any questions please", 792 noPolicy: "You haven't bought any policy, if you have any questions please",
793 customService: " contact customer service", 793 customService: " contact customer service",
794 downloadClick:"Download",
794 }, 795 },
795 unauth: { 796 unauth: {
796 m1: { 797 m1: {
......
...@@ -763,6 +763,7 @@ module.exports = { ...@@ -763,6 +763,7 @@ module.exports = {
763 showMore: "顯示所有保單", 763 showMore: "顯示所有保單",
764 noPolicy: "您還未購買保單，如有疑問請", 764 noPolicy: "您還未購買保單，如有疑問請",
765 customService: "聯繫客服", 765 customService: "聯繫客服",
766 downloadClick:"點擊下載",
766 }, 767 },
767 unauth: { 768 unauth: {
768 m1: { 769 m1: {
......
...@@ -785,6 +785,7 @@ module.exports = { ...@@ -785,6 +785,7 @@ module.exports = {
785 showMore: "显示所有保单", 785 showMore: "显示所有保单",
786 noPolicy: "您还未购买保单，如有疑问请", 786 noPolicy: "您还未购买保单，如有疑问请",
787 customService: "联系客服", 787 customService: "联系客服",
788 downloadClick:"点击下载",
788 }, 789 },
789 unauth: { 790 unauth: {
790 m1: { 791 m1: {
......
...@@ -32,7 +32,7 @@ ...@@ -32,7 +32,7 @@
32 width: 1000px; 32 width: 1000px;
33 margin: 0 auto; 33 margin: 0 auto;
34 34
35 .content { 35 &-content {
36 // @extend .bb; 36 // @extend .bb;
37 display: flex; 37 display: flex;
38 justify-content: flex-start; 38 justify-content: flex-start;
......
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
5 <div class="border"> 5 <div class="border">
6 <div class="close" @click="onOverLayHandler()"><img src="@/assets/images/clarms/close.png"></div> 6 <div class="close" @click="onOverLayHandler()"><img src="@/assets/images/clarms/close.png"></div>
7 <div class="modal"> 7 <div class="modal">
8 <div class="content"> 8 <div class="modal-content">
9 <div class="info-icon"> 9 <div class="info-icon">
10 <img src="@/assets/images/clarms/suc.png"> 10 <img src="@/assets/images/clarms/suc.png">
11 </div> 11 </div>
......
...@@ -108,13 +108,74 @@ export default { ...@@ -108,13 +108,74 @@ export default {
108 nl: [[1, 1], [1, 2], [1, 3], [5, 5], [8, 15], [9, 9]] 108 nl: [[1, 1], [1, 2], [1, 3], [5, 5], [8, 15], [9, 9]]
109 }, 109 },
110 // 节假日，key是月份，value是日期列表 110 // 节假日，key是月份，value是日期列表
111 holiday: { 111 // holiday: {
112 112
113 } 113 // }
114 } 114 }
115 }, 115 },
116 components: {}, 116 components: {},
117 computed: { 117 computed: {
118 holiday(){
119 // 计算新历
120 let result = {};
121 let year = this.year;
122 if (!year) {
123 return;
124 }
125 let hkHolidayDefine = this.hkHolidayDefine;
126 for (let index = 0; index < hkHolidayDefine.gl.length; index++) {
127 let m = hkHolidayDefine.gl[index][0];
128 let d = hkHolidayDefine.gl[index][1];
129
130 // 如果是周六/周日，顺延到下周一
131 let date = Date.parse(`${year}.${m}.${d}`);
132 if (date.getDay() == 6) {
133 // 周六
134 date.addDays(2);
135 } else if (date.getDay() == 0) {
136 date.addDays(1);
137 }
138 m = date.getMonth() + 1;
139 d = date.getDate();
140
141 let list = result[m];
142 if (!list) {
143 result[m] = [];
144 list = result[m];
145 }
146 list.push(d);
147 }
148
149
150 for (let index = 0; index < hkHolidayDefine.nl.length; index++) {
151 let m = hkHolidayDefine.nl[index][0];
152 let d = hkHolidayDefine.nl[index][1];
153 let gl = toSolar(year, m, d);
154
155 m = gl[1];
156 d = gl[2];
157
158 // 如果是周六/周日，顺延到下周一
159 let date = Date.parse(`${year}.${m}.${d}`);
160
161 if (date.getDay() == 6) {
162 // 周六
163 date.addDays(2);
164 } else if (date.getDay() == 0) {
165 date.addDays(1);
166 }
167 m = date.getMonth() + 1;
168 d = date.getDate();
169
170 let list = result[m];
171 if (!list) {
172 result[m] = [];
173 list = result[m];
174 }
175 list.push(d);
176 }
177 return result;
178 },
118 locale() { 179 locale() {
119 return this.$i18n.locale || 'tc'; 180 return this.$i18n.locale || 'tc';
120 }, 181 },
...@@ -176,6 +237,7 @@ export default { ...@@ -176,6 +237,7 @@ export default {
176 * fortmatMonthData 用于渲染日历的数据 237 * fortmatMonthData 用于渲染日历的数据
177 */ 238 */
178 formatDate() { 239 formatDate() {
240 // console.log("qqq:",this.holiday);
179 let result = []; 241 let result = [];
180 let year = this.year; 242 let year = this.year;
181 let month = this.month; 243 let month = this.month;
...@@ -217,7 +279,7 @@ export default { ...@@ -217,7 +279,7 @@ export default {
217 disable = true; 279 disable = true;
218 } else { 280 } else {
219 let holidayCandidates = this.holiday[month+""]; 281 let holidayCandidates = this.holiday[month+""];
220 if (holidayCandidates && holidayCandidates.indexOf(d) >= 0) { 282 if (holidayCandidates && holidayCandidates.indexOf(date) != -1) {
221 disable = true; 283 disable = true;
222 } 284 }
223 } 285 }
...@@ -611,7 +673,7 @@ export default { ...@@ -611,7 +673,7 @@ export default {
611 this.$emit('input', val); 673 this.$emit('input', val);
612 }, 674 },
613 year() { 675 year() {
614 this.calculateHolidays(); 676 // this.calculateHolidays();
615 } 677 }
616 } 678 }
617 } 679 }
......
1 @import '@/styles/_support'; 1 @import '@/styles/_support';
2
2 .list-container { 3 .list-container {
3 overflow-x: auto; 4 overflow-x: auto;
4 margin-bottom: 2rem; 5 margin-bottom: 2rem;
...@@ -13,6 +14,21 @@ ...@@ -13,6 +14,21 @@
13 position: relative; 14 position: relative;
14 } 15 }
15 16
17 .download {
18 position: relative;
19
20 &-tips {
21 display: none;
22 position: absolute;
23 top: -3px;
24 left: 20px;
25 z-index: 11;
26 padding: 2px;
27 @include border-tans();
28 min-width: 80px;
29 }
30 }
31
16 .guide { 32 .guide {
17 position: absolute; 33 position: absolute;
18 transition: all 0.5s; 34 transition: all 0.5s;
...@@ -31,154 +47,156 @@ ...@@ -31,154 +47,156 @@
31 } 47 }
32 48
33 .cell-group { 49 .cell-group {
34 margin-bottom: 1rem; 50 margin-bottom: 1rem;
35 51
36 &:last-child { 52 &:last-child {
37 margin-bottom: 0; 53 margin-bottom: 0;
38 } 54 }
39 55
40 div { 56 div {
41 color: #4c4948; 57 color: #4c4948;
42 } 58 }
43 59
44 .w1 { 60 .w1 {
45 // width: 10rem; 61 // width: 10rem;
46 width: 20rem; 62 width: 20rem;
47 text-align: center; 63 text-align: center;
48 } 64 }
49 65
50 .w2 { 66 .w2 {
51 // width: 6.25rem; 67 // width: 6.25rem;
52 width: 12.5rem; 68 width: 12.5rem;
53 text-align: center; 69 text-align: center;
54 } 70 }
55 71
56 .table-header { 72 .table-header {
57 // width: 64.166667rem; 73 // width: 64.166667rem;
58 height: 3.25rem; 74 height: 3.25rem;
59 border-top-left-radius: .666667rem; 75 border-top-left-radius: .666667rem;
60 border-top-right-radius: .666667rem; 76 border-top-right-radius: .666667rem;
61 background-color: #f2f2f2; 77 background-color: #f2f2f2;
78 display: flex;
79 align-items: center;
80
81 .normal-header {
82 // width: 58.833333rem;
83 @extend .bb;
84 padding: 0 2.75rem;
85 width: 100%;
86 margin: auto;
62 display: flex; 87 display: flex;
88 justify-content: space-between;
63 align-items: center; 89 align-items: center;
64 90
65 .normal-header { 91 .title {
66 // width: 58.833333rem; 92 font-weight: bold;
67 @extend .bb; 93 color: #575453;
68 padding: 0 2.75rem; 94 }
69 width: 100%; 95
70 margin: auto; 96 .guide {
71 display: flex; 97 transition: all 0.5s;
72 justify-content: space-between; 98 cursor: pointer;
73 align-items: center; 99 width: 1rem;
100 height: .666667rem;
101 background: url("~@/assets/images/insurance-query/triangle-down.png") no-repeat center center;
102 background-size: 100% 100%;
103 }
74 104
75 .title { 105 .rotate180 {
76 font-weight: bold; 106 transform: rotate(180deg);
77 color: #575453; 107 transition: all 0.5s;
78 }
79
80 .guide {
81 transition: all 0.5s;
82 cursor: pointer;
83 width: 1rem;
84 height: .666667rem;
85 background: url("~@/assets/images/insurance-query/triangle-down.png") no-repeat center center;
86 background-size: 100% 100%;
87 }
88
89 .rotate180 {
90 transform: rotate(180deg);
91 transition: all 0.5s;
92 }
93 } 108 }
94 } 109 }
110 }
95 111
96 .table-content { 112 .table-content {
97 // width: 64.166667rem; 113 // width: 64.166667rem;
98 114
99 height: auto; 115 height: auto;
100 max-height: 50rem; 116 max-height: 50rem;
101 // display: inline-block; 117 // display: inline-block;
102 border-bottom-left-radius: .666667rem; 118 border-bottom-left-radius: .666667rem;
103 border-bottom-right-radius: .666667rem; 119 border-bottom-right-radius: .666667rem;
104 border-left: solid .083333rem #f2f2f2; 120 border-left: solid .083333rem #f2f2f2;
105 border-right: solid .083333rem #f2f2f2; 121 border-right: solid .083333rem #f2f2f2;
106 border-bottom: solid .083333rem #f2f2f2; 122 border-bottom: solid .083333rem #f2f2f2;
107 padding: 0 2.75rem; 123 padding: 0 2.75rem;
108 // max-height: 41.666667rem; 124 // max-height: 41.666667rem;
109 transition: max-height ease-out 0.3s !important; 125 transition: max-height ease-out 0.3s !important;
110 overflow: auto; 126 overflow: auto;
127
128 .data-line {
129 // padding: 0 2.75rem;
130 height: 4.416667rem;
131 margin: auto;
132 display: flex;
133 justify-content: space-between;
134 align-items: center;
111 135
112 .data-line { 136 .td {
113 // padding: 0 2.75rem;
114 height: 4.416667rem;
115 margin: auto;
116 display: flex; 137 display: flex;
117 justify-content: space-between; 138 justify-content: center;
118 align-items: center; 139 align-items: center;
119 140
120 .td { 141
121 display: flex;
122 justify-content: center;
123 align-items: center;
124 }
125
126 .cell1 {
127 width: 98%;
128 display: flex;
129 justify-content: space-between;
130 margin: auto;
131 }
132
133 .separator-v {
134 height: 2.5rem;
135 width: .166667rem;
136 background-color: #f2f2f2;
137 margin: 0 .916667rem;
138 }
139 } 142 }
140 143
141 .label span { 144 .cell1 {
142 color: $cOrange; 145 width: 98%;
143 margin-left: .583333rem; 146 display: flex;
144 cursor: pointer; 147 justify-content: space-between;
145 text-decoration: underline; 148 margin: auto;
146 } 149 }
147 150
148 .separator-h { 151 .separator-v {
149 width: 100%; 152 height: 2.5rem;
150 height: 1px; 153 width: .166667rem;
151 background-color: #f2f2f2; 154 background-color: #f2f2f2;
155 margin: 0 .916667rem;
152 } 156 }
153 } 157 }
154 158
155 .orange { 159 .label span {
156 background-color: $cOrange !important; 160 color: $cOrange;
157 161 margin-left: .583333rem;
158 div { 162 cursor: pointer;
159 color: #ffffff; 163 text-decoration: underline;
160 }
161 } 164 }
162 165
163 .hide { 166 .separator-h {
164 max-height: 0; 167 width: 100%;
165 border-bottom: none; 168 height: 1px;
169 background-color: #f2f2f2;
166 } 170 }
171 }
167 172
168 .sp { 173 .orange {
169 text-decoration :underline; 174 background-color: $cOrange !important;
170 padding: 0 .4rem;
171 }
172 175
173 .ac { 176 div {
174 color: $cOrange !important; 177 color: #ffffff;
175 } 178 }
179 }
180
181 .hide {
182 max-height: 0;
183 border-bottom: none;
184 }
185
186 .sp {
187 text-decoration: underline;
188 padding: 0 .4rem;
189 }
190
191 .ac {
192 color: $cOrange !important;
193 }
176 } 194 }
177 195
178 .show-more-btn { 196 .show-more-btn {
179 width: 100%; 197 width: 100%;
180 color: $cOrange !important; 198 color: $cOrange !important;
181 text-decoration :underline; 199 text-decoration: underline;
182 cursor: pointer; 200 cursor: pointer;
183 justify-content: center !important; 201 justify-content: center !important;
184 } 202 }
...@@ -190,12 +208,13 @@ ...@@ -190,12 +208,13 @@
190 .activity { 208 .activity {
191 background-color: $cOrange !important; 209 background-color: $cOrange !important;
192 opacity: .5; 210 opacity: .5;
193 div{ 211
212 div {
194 color: #FFFFFF !important; 213 color: #FFFFFF !important;
195 } 214 }
196 } 215 }
197 216
198 .empty{ 217 .empty {
199 height: 41.666667rem; 218 height: 41.666667rem;
200 display: flex; 219 display: flex;
201 align-items: center; 220 align-items: center;
...@@ -228,4 +247,4 @@ ...@@ -228,4 +247,4 @@
228 247
229 .list-container::-webkit-scrollbar { 248 .list-container::-webkit-scrollbar {
230 display: none; 249 display: none;
231 }
...\ No newline at end of file ...\ No newline at end of file
250 }
......
1 <template> 1 <template>
2 <div class="list-container"> 2 <div class="list-container">
3 <modal2-comp :visible="showDownloadError" :close="()=>{showDownloadError = false}" :content="$t('glbalTips.sysError')"></modal2-comp> 3 <modal2-comp :visible="showDownloadError" :close="()=>{showDownloadError = false}" :content="$t('glbalTips.sysError')"></modal2-comp>
4 <div class="cell-group"> 4 <div class="cell-group">
5 <div class="table-contaner"> 5 <div class="table-contaner">
6 <div class="table-header orange"> 6 <div class="table-header orange">
7 <div class="normal-header"> 7 <div class="normal-header">
8 <div class="td w1">{{$t('customService.insuranceQuery.InsurantNumber')}}</div> 8 <div class="td w1">{{$t('customService.insuranceQuery.InsurantNumber')}}</div>
9 <div class="td w2">{{$t('customService.insuranceQuery.Insurant')}}</div> 9 <div class="td w2">{{$t('customService.insuranceQuery.Insurant')}}</div>
10 <div class="td w1">{{$t('customService.insuranceQuery.InsurantName')}}</div> 10 <div class="td w1">{{$t('customService.insuranceQuery.InsurantName')}}</div>
11 <div class="td w2">{{$t('customService.insuranceQuery.InsurantAmount')}}</div> 11 <div class="td w2">{{$t('customService.insuranceQuery.InsurantAmount')}}</div>
12 <div class="td w2">{{$t('customService.insuranceQuery.effectiveDate')}}</div> 12 <div class="td w2">{{$t('customService.insuranceQuery.effectiveDate')}}</div>
13 <div class="td w2">{{$t('customService.insuranceQuery.period')}}</div> 13 <div class="td w2">{{$t('customService.insuranceQuery.period')}}</div>
14 </div> 14 </div>
15 </div> 15 </div>
16 <div class="guide" :class="{rotate180 : hide}" @click="hide = !hide"></div> 16 <div class="guide" :class="{rotate180 : hide}" @click="hide = !hide"></div>
17 </div> 17 </div>
18 <div class="table-content" :class="{hide : hide}"> 18 <div class="table-content" :class="{hide : hide}">
19 <template v-if="myPolicyList"> 19 <template v-if="myPolicyList">
20 <div v-for="(item,index) in myPolicyList" :key="index"> 20 <div v-for="(item,index) in myPolicyList" :key="index">
21 <template v-if="index < maxShow"> 21 <template v-if="index < maxShow">
22 <div class="data-line" @click="handlePolicySelect(item,index)"> 22 <div class="data-line" @click="handlePolicySelect(item,index)">
23 <div class="td w1 pointer"> 23 <div class="td w1 pointer">
24 <template v-if="multiSelectable"> 24 <template v-if="multiSelectable">
25 <img v-if="item.activity" class="icon-check pointer" src="@/assets/images/insurance-query/check.png"> 25 <img v-if="item.activity" class="icon-check pointer" src="@/assets/images/insurance-query/check.png">
26 <img v-else class="icon-check pointer" src="@/assets/images/insurance-query/un-check.png"> 26 <img v-else class="icon-check pointer" src="@/assets/images/insurance-query/un-check.png">
27 <span class="sp" :class="{ac: item.activity}">{{item.policyCode}}</span> 27 <span class="sp" :class="{ac: item.activity}">{{item.policyCode}}</span>
28 </template> 28 </template>
29 <template v-else> 29 <template v-else>
30 <template v-if="model != 'download'"> 30 <template v-if="model != 'download'">
31 <img v-if="selectPolicyCode == item.policyCode" class="icon-check pointer" src="@/assets/images/insurance-query/check.png"> 31 <img v-if="selectPolicyCode == item.policyCode" class="icon-check pointer" src="@/assets/images/insurance-query/check.png">
32 <img v-else class="icon-check pointer" src="@/assets/images/insurance-query/un-check.png"> 32 <img v-else class="icon-check pointer" src="@/assets/images/insurance-query/un-check.png">
33 </template> 33 </template>
34 <span class="sp" :class="{ac: selectPolicyCode == item.policyCode}">{{item.policyCode}}</span> 34 <span class="sp" :class="{ac: selectPolicyCode == item.policyCode}">{{item.policyCode}}</span>
35 <template v-if="model == 'download'"> 35 <template v-if="model == 'download'">
36 <img @click="downloadPolicy(item)" class="icon-download" src="@/assets/images/insurance-query/icon-down-load.png" alt=""> 36 <div class="download" @mouseover="onShowTipsOverHandler($event,item,index)" @mouseout="onShowTipsOutHandler($event,item,index)">
37 </template> 37 <div class="download-tips">
38 </template> 38 <div class="cont">{{$t('customService.insuranceQuery.downloadClick')}}</div>
39 </div> 39 </div>
40 40 <img class="icon-download" src="@/assets/images/insurance-query/icon-down-load.png" alt="">
41 <div class="td w2">{{lan == 'en' ? (item.insuredNameEn ? item.insuredNameEn : item.insuredNameCn) : (item.insuredNameCn ? item.insuredNameCn : item.insuredNameEn)}}</div> 41 </div>
42 <div class="td w1">{{formatPolicyName(item.productCode, item.productName)}}</div> 42 </template>
43 <div class="td w2">{{item.moneyCode}} {{formatMoney(item.amount,0)}}</div> 43 </template>
44 <div class="td w2">{{item.expireAt?item.expireAt.split(" ")[0]:""}}</div> 44 </div>
45 <!-- <div class="td w2">{{item.guaranteeAge?item.guaranteeAge.split(" ")[0]:""}}</div> -->
46 <div class="td w2">{{formatInsuredPeriod(item.insuredPeriodType,item.insuredPeriodValue)}}</div>
47
48 </div>
49 <div class="separator-h" v-if="index < myPolicyList.length - 1 && index < maxShow - 1"></div>
50 </template>
51 </div>
52 <template v-if="!policyList || maxShow < policyList.length">
53 <div class="separator-h"></div>
54 <div class="data-line show-more-btn" @click="maxShow = policyList.length">{{$t('customService.insuranceQuery.showMore')}}</div>
55 </template>
56 </template>
57 45
58 <template v-else> 46 <div class="td w2">{{lan == 'en' ? (item.insuredNameEn ? item.insuredNameEn : item.insuredNameCn) : (item.insuredNameCn ? item.insuredNameCn : item.insuredNameEn)}}</div>
59 <div class="empty"> 47 <div class="td w1">{{formatPolicyName(item.productCode, item.productName)}}</div>
60 <div class="tips"> 48 <div class="td w2">{{item.moneyCode}} {{formatMoney(item.amount,0)}}</div>
61 <img class="icon" src="@/assets/images/common/icon-alert-i.png" alt=""> 49 <div class="td w2">{{item.expireAt?item.expireAt.split(" ")[0]:""}}</div>
62 <div class="txt"> 50 <!-- <div class="td w2">{{item.guaranteeAge?item.guaranteeAge.split(" ")[0]:""}}</div> -->
63 {{$t('customService.insuranceQuery.noPolicy')}} 51 <div class="td w2">{{formatInsuredPeriod(item.insuredPeriodType,item.insuredPeriodValue)}}</div>
64 <span class="pointer btn" @click="toContactUs">{{$t('customService.insuranceQuery.customService')}}</span> 52
65 </div> 53 </div>
66 </div> 54 <div class="separator-h" v-if="index < myPolicyList.length - 1 && index < maxShow - 1"></div>
67 </div> 55 </template>
68 </template> 56 </div>
69 </div> 57 <template v-if="!policyList || maxShow < policyList.length">
70 </div> 58 <div class="separator-h"></div>
71 </div> 59 <div class="data-line show-more-btn" @click="maxShow = policyList.length">{{$t('customService.insuranceQuery.showMore')}}</div>
60 </template>
61 </template>
62
63 <template v-else>
64 <div class="empty">
65 <div class="tips">
66 <img class="icon" src="@/assets/images/common/icon-alert-i.png" alt="">
67 <div class="txt">
68 {{$t('customService.insuranceQuery.noPolicy')}}
69 <span class="pointer btn" @click="toContactUs">{{$t('customService.insuranceQuery.customService')}}</span>
70 </div>
71 </div>
72 </div>
73 </template>
74 </div>
75 </div>
76 </div>
72 </template> 77 </template>
73 78
74 79
......
...@@ -307,7 +307,8 @@ $borderSize: 6px; ...@@ -307,7 +307,8 @@ $borderSize: 6px;
307 307
308 &-border { 308 &-border {
309 width: 100%; 309 width: 100%;
310 height: 3px; 310 height: 4px;
311 background-color: $cOrange2;
311 } 312 }
312 313
313 .table-item { 314 .table-item {
...@@ -418,9 +419,10 @@ $borderSize: 6px; ...@@ -418,9 +419,10 @@ $borderSize: 6px;
418 max-width: 602px; 419 max-width: 602px;
419 height: 67px; 420 height: 67px;
420 line-height: 67px; 421 line-height: 67px;
421 padding: 2px; 422 // padding: 2px;
422 border-radius: $borderSize; 423 // border-radius: $borderSize;
423 cursor: pointer; 424 cursor: pointer;
425 @include border-tans($borderSize);
424 426
425 .cont { 427 .cont {
426 // @extend .fcc; 428 // @extend .fcc;
......
...@@ -87,6 +87,10 @@ input { ...@@ -87,6 +87,10 @@ input {
87 .text-jtf { 87 .text-jtf {
88 text-align: justify; 88 text-align: justify;
89 text-align-last: left; 89 text-align-last: left;
90 -webkit-text-align: justify;
91 -webkit-text-align-last: left;
92 -moz-text-align: justify;
93 -moz-text-align-last: left;
90 } 94 }
91 95
92 .underline { 96 .underline {
......