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 = { ...@@ -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 api from '@/api/api'; 1 import api from '@/api/api';
2 import { 2 import {
3 httpPost, 3 httpPost,
4 requestDomain 4 requestDomain
5 } from '@/api/fetch-api.js'; 5 } from '@/api/fetch-api.js';
6 6
7 import { 7 import {
8 mapState 8 mapState
9 } from 'vuex'; 9 } from 'vuex';
10 import { formatMoney, getInsuredPeriod, getPolicyName } from "@/utils/biz.js"; 10 import {
11 formatMoney,
12 getInsuredPeriod,
13 getPolicyName
14 } from "@/utils/biz.js";
11 import Modal2Comp from '@/components/modal2-comp/modal2-comp.vue'; 15 import Modal2Comp from '@/components/modal2-comp/modal2-comp.vue';
12 16
13 export default { 17 export default {
14 props: { 18 props: {
15 multiSelectable: { 19 multiSelectable: {
16 type: Boolean, 20 type: Boolean,
17 default: false 21 default: false
18 }, 22 },
19 model: { 23 model: {
20 type: String, 24 type: String,
21 // checkbox 25 // checkbox
22 default: "download" 26 default: "download"
23 } 27 }
24 }, 28 },
25 name: "InsuranceQuery", 29 name: "InsuranceQuery",
26 data() { 30 data() {
27 return { 31 return {
28 myPolicyList: [], 32 myPolicyList: [],
29 maxShow: 2, 33 maxShow: 2,
30 selectPolicyCode: "", 34 selectPolicyCode: "",
31 selectPolicyCodes: {}, 35 selectPolicyCodes: {},
32 hide: false, 36 hide: false,
33 showDownloadError : false 37 showDownloadError: false
34 } 38 }
35 }, 39 },
36 computed: { 40 computed: {
37 ...mapState({ 41 ...mapState({
38 policyList: state => state.policyList 42 policyList: state => state.policyList
39 }), 43 }),
40 lan() { 44 lan() {
41 return this.$i18n.locale; 45 return this.$i18n.locale;
42 }, 46 },
43 i18n() { 47 i18n() {
44 return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {}; 48 return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {};
45 }, 49 },
46 }, 50 },
47 methods: { 51 methods: {
48 toContactUs() { 52 onShowTipsOverHandler(event, item, index) {
49 this.$router.push({ 53 let child = event.currentTarget.childNodes[0];
50 path: "/custom/service", 54 child.style.display = "block";
51 query: { 55 },
52 q: "m1" 56 onShowTipsOutHandler(event, item, index) {
53 } 57 let child = event.currentTarget.childNodes[0];
54 }); 58 child.style.display = "none";
55 }, 59 },
56 queryList() { 60 toContactUs() {
57 if (this.policyList && this.policyList.length > 0) { 61 this.$router.push({
58 this.myPolicyList = this.policyList; 62 path: "/custom/service",
59 this.myPolicyList.forEach(element => { 63 query: {
60 element.activity = false; 64 q: "m1"
61 }) 65 }
62 this.initSelected(); 66 });
63 } else { 67 },
64 this.checkCustomer().then(() => { 68 queryList() {
65 httpPost({ url: api.policyList, sid: true }).then(res => { 69 if (this.policyList && this.policyList.length > 0) {
66 if (!res || res.length == 0) { 70 this.myPolicyList = this.policyList;
67 this.myPolicyList = null; 71 this.myPolicyList.forEach(element => {
68 } else { 72 element.activity = false;
69 res.forEach(element => { 73 })
70 element.activity = false; 74 this.initSelected();
71 // let len = element.policyCode.length; 75 } else {
72 // element.policyCodeStr = element.policyCode && len > 5 ? 76 this.checkCustomer().then(() => {
73 // element.policyCode.substring(0, 2) + "**********" 77 httpPost({
74 // + element.policyCode.substring(len - 4, len) : element.policyCode; 78 url: api.policyList,
75 }); 79 sid: true
76 this.$store.commit("CACHE_POLICY_LIST", res); 80 }).then(res => {
77 this.myPolicyList = res; 81 if (!res || res.length == 0) {
78 } 82 this.myPolicyList = null;
79 this.initSelected(); 83 } else {
80 }).catch(e => { 84 res.forEach(element => {
81 this.myPolicyList = null; 85 element.activity = false;
82 switch (e.code) { 86 // let len = element.policyCode.length;
83 case "2002": 87 // element.policyCodeStr = element.policyCode && len > 5 ?
84 // 不是客户，没有购买保单 88 // element.policyCode.substring(0, 2) + "**********"
85 break; 89 // + element.policyCode.substring(len - 4, len) : element.policyCode;
86 } 90 });
87 }); 91 this.$store.commit("CACHE_POLICY_LIST", res);
88 }); 92 this.myPolicyList = res;
93 }
94 this.initSelected();
95 }).catch(e => {
96 this.myPolicyList = null;
97 switch (e.code) {
98 case "2002":
99 // 不是客户，没有购买保单
100 break;
101 }
102 });
103 });
89 104
90 } 105 }
91 }, 106 },
92 initSelected() { 107 initSelected() {
93 let selectPolicy = null; 108 let selectPolicy = null;
94 try { 109 try {
95 let data = sessionStorage.getItem("_hklife_policy"); 110 let data = sessionStorage.getItem("_hklife_policy");
96 if (data) { 111 if (data) {
97 sessionStorage.removeItem("_hklife_policy"); 112 sessionStorage.removeItem("_hklife_policy");
98 selectPolicy = JSON.parse(decodeURIComponent(data)); 113 selectPolicy = JSON.parse(decodeURIComponent(data));
99 if (selectPolicy) { 114 if (selectPolicy) {
100 if (this.multiSelectable) { 115 if (this.multiSelectable) {
101 this.selectPolicyCodes[selectPolicy.code] = selectPolicy; 116 this.selectPolicyCodes[selectPolicy.code] = selectPolicy;
102 } else { 117 } else {
103 this.selectPolicyCode = selectPolicy.code; 118 this.selectPolicyCode = selectPolicy.code;
104 } 119 }
105 this.$emit("onSelect", [selectPolicy]); 120 this.$emit("onSelect", [selectPolicy]);
106 121
107 // 判断最大显示 122 // 判断最大显示
108 let index = -1; 123 let index = -1;
109 for (let i = 0; i < this.myPolicyList.length; i++) { 124 for (let i = 0; i < this.myPolicyList.length; i++) {
110 if (selectPolicy.code == this.myPolicyList[i].policyCode) { 125 if (selectPolicy.code == this.myPolicyList[i].policyCode) {
111 this.myPolicyList[i].activity = true; 126 this.myPolicyList[i].activity = true;
112 index = i; 127 index = i;
113 } 128 }
114 } 129 }
115 this.$set(this, "myPolicyList", this.myPolicyList); 130 this.$set(this, "myPolicyList", this.myPolicyList);
116 if (index > 2) { 131 if (index > 2) {
117 this.maxShow = this.myPolicyList.length; 132 this.maxShow = this.myPolicyList.length;
118 } 133 }
119 } 134 }
120 } 135 }
121 } catch (e) { 136 } catch (e) {
122 137
123 } 138 }
124 if (!selectPolicy) { 139 if (!selectPolicy) {
125 let firstPolicy = this.myPolicyList[0]; 140 let firstPolicy = this.myPolicyList[0];
126 this.myPolicyList[0].activity = true; 141 this.myPolicyList[0].activity = true;
127 selectPolicy = { id: firstPolicy.policyId, code: firstPolicy.policyCode }; 142 selectPolicy = {
128 if (this.multiSelectable) { 143 id: firstPolicy.policyId,
129 this.selectPolicyCodes[selectPolicy.code] = selectPolicy; 144 code: firstPolicy.policyCode
130 } else { 145 };
131 this.selectPolicyCode = selectPolicy.code; 146 if (this.multiSelectable) {
132 } 147 this.selectPolicyCodes[selectPolicy.code] = selectPolicy;
133 this.$emit("onSelect", [selectPolicy]); 148 } else {
134 } 149 this.selectPolicyCode = selectPolicy.code;
135 }, 150 }
136 handlePolicySelect(item, index) { 151 this.$emit("onSelect", [selectPolicy]);
137 let code = item.policyCode; 152 }
138 if (this.multiSelectable) { 153 },
139 let c = this.selectPolicyCodes[code]; 154 handlePolicySelect(item, index) {
140 if (!c || typeof c == "undefined") { 155 let code = item.policyCode;
141 item.activity = true; 156 if (this.multiSelectable) {
142 this.selectPolicyCodes[code] = { code: code, id: item.policyId }; 157 let c = this.selectPolicyCodes[code];
143 } else { 158 if (!c || typeof c == "undefined") {
144 item.activity = false; 159 item.activity = true;
145 delete this.selectPolicyCodes[code]; 160 this.selectPolicyCodes[code] = {
146 } 161 code: code,
147 // this.$set(this, 'myPolicyList', this.myPolicyList); 162 id: item.policyId
148 let data = []; 163 };
149 for (let key in this.selectPolicyCodes) { 164 } else {
150 data.push(this.selectPolicyCodes[key]); 165 item.activity = false;
151 } 166 delete this.selectPolicyCodes[code];
152 this.$emit("onSelect", data); 167 }
153 } else { 168 // this.$set(this, 'myPolicyList', this.myPolicyList);
154 if (code != this.selectPolicyCode) { 169 let data = [];
155 this.selectPolicyCode = code; 170 for (let key in this.selectPolicyCodes) {
156 this.$emit("onSelect", [{ code: code, id: item.policyId }]); 171 data.push(this.selectPolicyCodes[key]);
157 } 172 }
158 } 173 this.$emit("onSelect", data);
159 }, 174 } else {
160 isPolicySelect(item, index) { 175 if (code != this.selectPolicyCode) {
161 let code = item.policyCode; 176 this.selectPolicyCode = code;
162 if (this.multiSelectable) { 177 this.$emit("onSelect", [{
163 let c = this.selectPolicyCodes[code]; 178 code: code,
164 if (!c || typeof c == "undefined") { 179 id: item.policyId
165 return false; 180 }]);
166 } else { 181 }
167 return true; 182 }
168 } 183 },
169 } 184 isPolicySelect(item, index) {
170 return false; 185 let code = item.policyCode;
171 }, 186 if (this.multiSelectable) {
172 checkCustomer() { 187 let c = this.selectPolicyCodes[code];
173 return new Promise(resolve => { 188 if (!c || typeof c == "undefined") {
174 resolve(); 189 return false;
175 // httpPost({ url: api.profile, sid: true }).then(res => { 190 } else {
176 // if (res.isCustomer == 1) { 191 return true;
177 // resolve(); 192 }
178 // } else { 193 }
179 // this.gotoCustomerAuthPage(); 194 return false;
180 // } 195 },
181 // }).catch(res => { 196 checkCustomer() {
197 return new Promise(resolve => {
198 resolve();
199 // httpPost({ url: api.profile, sid: true }).then(res => {
200 // if (res.isCustomer == 1) {
201 // resolve();
202 // } else {
203 // this.gotoCustomerAuthPage();
204 // }
205 // }).catch(res => {
182 206
183 // }); 207 // });
184 }); 208 });
185 }, 209 },
186 gotoCustomerAuthPage() { 210 gotoCustomerAuthPage() {
187 let c = this.$route.fullPath; 211 let c = this.$route.fullPath;
188 this.$router.push({ 212 this.$router.push({
189 name: "customerAuth", 213 name: "customerAuth",
190 query: { 214 query: {
191 c: c 215 c: c
192 } 216 }
193 }); 217 });
194 }, 218 },
195 formatMoney(s, t) { 219 formatMoney(s, t) {
196 if (typeof t == "undefined") { 220 if (typeof t == "undefined") {
197 t = 1; 221 t = 1;
198 } 222 }
199 return formatMoney(s, t); 223 return formatMoney(s, t);
200 }, 224 },
201 // 保障年限，保n年 225 // 保障年限，保n年
202 formatInsuredPeriod(t, v) { 226 formatInsuredPeriod(t, v) {
203 return getInsuredPeriod(this.$i18n.locale, t, v); 227 return getInsuredPeriod(this.$i18n.locale, t, v);
204 }, 228 },
205 formatPolicyName(c, n) { 229 formatPolicyName(c, n) {
206 return getPolicyName(this.$i18n.locale, c, n); 230 return getPolicyName(this.$i18n.locale, c, n);
207 }, 231 },
208 downloadPolicy(policy) { 232 downloadPolicy(policy) {
209 if (policy) { 233 if (policy) {
210 httpPost({ url: api.getDownloadPath, sid: true, data: { policyCode: policy.policyCode } }).then(res => { 234 httpPost({
211 if (res) { 235 url: api.getDownloadPath,
212 let url = requestDomain() + api.downloadPolicy + "/" + res; 236 sid: true,
213 window.open(url); 237 data: {
214 } else { 238 policyCode: policy.policyCode
215 this.showDownloadError = true; 239 }
216 } 240 }).then(res => {
217 }); 241 if (res) {
218 } 242 let url = requestDomain() + api.downloadPolicy + "/" + res;
219 } 243 window.open(url);
220 }, 244 } else {
221 components: { 245 this.showDownloadError = true;
222 Modal2Comp 246 }
223 }, 247 });
224 mounted() { 248 }
225 this.queryList(); 249 }
226 }, 250 },
251 components: {
252 Modal2Comp
253 },
254 mounted() {
255 this.queryList();
256 },
227 } 257 }
......
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 {
......