默认提交
Showing
11 changed files
with
622 additions
and
31 deletions
... | @@ -6,12 +6,12 @@ import { | ... | @@ -6,12 +6,12 @@ import { |
6 | } from '@/api/fetch-api.js' | 6 | } from '@/api/fetch-api.js' |
7 | 7 | ||
8 | import Auth from '@components/auth/auth.vue'; | 8 | import Auth from '@components/auth/auth.vue'; |
9 | import PolicyHeadList from "./policy-head-list.vue"; | 9 | import ECorrespondenceHeadList from "./e-correspondence-head-list.vue"; |
10 | 10 | ||
11 | import { formatMoney, getInsuredPeriod, getBenefitType, getPayPeriod, getPayType, getMoneyName, getPayMode, getPolicyName } from "@/utils/biz.js"; | 11 | import { formatMoney, getInsuredPeriod, getBenefitType, getPayPeriod, getPayType, getMoneyName, getPayMode, getPolicyName } from "@/utils/biz.js"; |
12 | 12 | ||
13 | export default { | 13 | export default { |
14 | name: "InsuranceQuery", | 14 | name: "ECorrespondenceEnquiry", |
15 | data() { | 15 | data() { |
16 | return { | 16 | return { |
17 | showForm: false, | 17 | showForm: false, |
... | @@ -162,6 +162,6 @@ export default { | ... | @@ -162,6 +162,6 @@ export default { |
162 | }, | 162 | }, |
163 | components: { | 163 | components: { |
164 | Auth, | 164 | Auth, |
165 | PolicyHeadList, | 165 | ECorrespondenceHeadList, |
166 | }, | 166 | }, |
167 | } | 167 | } | ... | ... |
1 | <template> | 1 | <template> |
2 | <div class="container"> | 2 | <div class="container"> |
3 | |||
4 | <!-- 登陆/注册提示 --> | 3 | <!-- 登陆/注册提示 --> |
5 | <auth @onLogin="userLogin" @onLogout="userLogout" :checkProfile="true" :tipModel="'m1'" ref="auth"></auth> | 4 | <auth @onLogin="userLogin" @onLogout="userLogout" :checkProfile="true" :tipModel="'m1'" ref="auth"></auth> |
6 | <div v-if="showForm"> | 5 | <div v-if="showForm"> |
7 | <!-- 保单列表 --> | 6 | <!-- 保单列表 --> |
8 | <policy-head-list :multiSelectable="false" @onSelect="handlePolicySelect"></policy-head-list> | 7 | <e-correspondence-head-list :multiSelectable="false" @onSelect="handlePolicySelect"></e-correspondence-head-list> |
9 | 8 | ||
10 | <!-- 保单详情 --> | 9 | <!-- 保单详情 --> |
11 | <template v-if="dataForm"> | 10 | <template v-if="dataForm"> |
... | @@ -271,7 +270,7 @@ | ... | @@ -271,7 +270,7 @@ |
271 | </template> | 270 | </template> |
272 | 271 | ||
273 | 272 | ||
274 | <script src="./insurance-query.js"></script> | 273 | <script src="./e-correspondence-enquiry.js"></script> |
275 | <style lang="scss" scoped> | 274 | <style lang="scss" scoped> |
276 | @import "./insurance-query.scss"; | 275 | @import "./e-correspondence-enquiry.scss"; |
277 | </style> | 276 | </style> | ... | ... |
1 | /** | ||
2 | * 组件描述:保单查询列表 | ||
3 | */ | ||
4 | |||
5 | import api from '@/api/api'; | ||
6 | import { | ||
7 | httpPost, | ||
8 | requestDomain | ||
9 | } from '@/api/fetch-api.js'; | ||
10 | |||
11 | import { | ||
12 | mapState | ||
13 | } from 'vuex'; | ||
14 | import { | ||
15 | formatMoney, | ||
16 | getInsuredPeriod, | ||
17 | getInsuredState, | ||
18 | getPolicyName | ||
19 | } from "@/utils/biz.js"; | ||
20 | import Modal2Comp from '@/components/modal2-comp/modal2-comp.vue'; | ||
21 | |||
22 | export default { | ||
23 | props: { | ||
24 | multiSelectable: { | ||
25 | type: Boolean, | ||
26 | default: false | ||
27 | }, | ||
28 | model: { | ||
29 | type: String, | ||
30 | default: "download" | ||
31 | }, | ||
32 | }, | ||
33 | name: "PolicyHeadList", | ||
34 | data() { | ||
35 | return { | ||
36 | myPolicyList: [], | ||
37 | maxShow: 2, | ||
38 | selectPolicyCode: "", | ||
39 | selectPolicyCodes: {}, | ||
40 | hide: false, | ||
41 | showDownloadError: false | ||
42 | } | ||
43 | }, | ||
44 | computed: { | ||
45 | ...mapState({ | ||
46 | policyList: state => state.policyList | ||
47 | }), | ||
48 | lan() { | ||
49 | return this.$i18n.locale; | ||
50 | }, | ||
51 | i18n() { | ||
52 | return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {}; | ||
53 | }, | ||
54 | }, | ||
55 | methods: { | ||
56 | onShowTipsOverHandler(event, item, index) { | ||
57 | let child = event.currentTarget.childNodes[0]; | ||
58 | child.style.display = "block"; | ||
59 | }, | ||
60 | onShowTipsOutHandler(event, item, index) { | ||
61 | let child = event.currentTarget.childNodes[0]; | ||
62 | child.style.display = "none"; | ||
63 | }, | ||
64 | toContactUs() { | ||
65 | this.$router.push({ | ||
66 | path: "/custom/service", | ||
67 | query: { | ||
68 | q: "m1" | ||
69 | } | ||
70 | }); | ||
71 | }, | ||
72 | queryList() { | ||
73 | if (this.policyList && this.policyList.length > 0) { | ||
74 | this.myPolicyList = this.policyList; | ||
75 | this.myPolicyList.forEach(element => { | ||
76 | element.activity = false; | ||
77 | }) | ||
78 | this.initSelected(); | ||
79 | } else { | ||
80 | this.checkCustomer().then(() => { | ||
81 | httpPost({ | ||
82 | url: api.policyList, | ||
83 | sid: true | ||
84 | }).then(res => { | ||
85 | if (!res || res.length == 0) { | ||
86 | this.myPolicyList = null; | ||
87 | } else { | ||
88 | res.forEach(element => { | ||
89 | element.activity = false; | ||
90 | // let len = element.policyCode.length; | ||
91 | // element.policyCodeStr = element.policyCode && len > 5 ? | ||
92 | // element.policyCode.substring(0, 2) + "**********" | ||
93 | // + element.policyCode.substring(len - 4, len) : element.policyCode; | ||
94 | }); | ||
95 | this.$store.commit("CACHE_POLICY_LIST", res); | ||
96 | this.myPolicyList = res; | ||
97 | } | ||
98 | this.initSelected(); | ||
99 | }).catch(e => { | ||
100 | this.myPolicyList = null; | ||
101 | switch (e.code) { | ||
102 | case "2002": | ||
103 | // 不是客户,没有购买保单 | ||
104 | break; | ||
105 | } | ||
106 | }); | ||
107 | }); | ||
108 | |||
109 | } | ||
110 | }, | ||
111 | initSelected() { | ||
112 | let selectPolicy = null; | ||
113 | try { | ||
114 | let data = sessionStorage.getItem("_hklife_policy"); | ||
115 | if (data) { | ||
116 | sessionStorage.removeItem("_hklife_policy"); | ||
117 | selectPolicy = JSON.parse(decodeURIComponent(data)); | ||
118 | if (selectPolicy) { | ||
119 | if (this.multiSelectable) { | ||
120 | this.selectPolicyCodes[selectPolicy.code] = selectPolicy; | ||
121 | } else { | ||
122 | this.selectPolicyCode = selectPolicy.code; | ||
123 | } | ||
124 | this.$emit("onSelect", [selectPolicy]); | ||
125 | |||
126 | // 判断最大显示 | ||
127 | let index = -1; | ||
128 | for (let i = 0; i < this.myPolicyList.length; i++) { | ||
129 | if (selectPolicy.code == this.myPolicyList[i].policyCode) { | ||
130 | this.myPolicyList[i].activity = true; | ||
131 | index = i; | ||
132 | } | ||
133 | } | ||
134 | this.$set(this, "myPolicyList", this.myPolicyList); | ||
135 | if (index > 2) { | ||
136 | this.maxShow = this.myPolicyList.length; | ||
137 | } | ||
138 | } | ||
139 | } | ||
140 | } catch (e) { | ||
141 | |||
142 | } | ||
143 | if (!selectPolicy) { | ||
144 | let firstPolicy = this.myPolicyList[0]; | ||
145 | this.myPolicyList[0].activity = true; | ||
146 | selectPolicy = { | ||
147 | id: firstPolicy.policyId, | ||
148 | code: firstPolicy.policyCode | ||
149 | }; | ||
150 | if (this.multiSelectable) { | ||
151 | this.selectPolicyCodes[selectPolicy.code] = selectPolicy; | ||
152 | } else { | ||
153 | this.selectPolicyCode = selectPolicy.code; | ||
154 | } | ||
155 | this.$emit("onSelect", [selectPolicy]); | ||
156 | } | ||
157 | }, | ||
158 | handlePolicySelect(item, index) { | ||
159 | let code = item.policyCode; | ||
160 | if (this.multiSelectable) { | ||
161 | let c = this.selectPolicyCodes[code]; | ||
162 | if (!c || typeof c == "undefined") { | ||
163 | item.activity = true; | ||
164 | this.selectPolicyCodes[code] = { | ||
165 | code: code, | ||
166 | id: item.policyId | ||
167 | }; | ||
168 | } else { | ||
169 | item.activity = false; | ||
170 | delete this.selectPolicyCodes[code]; | ||
171 | } | ||
172 | // this.$set(this, 'myPolicyList', this.myPolicyList); | ||
173 | let data = []; | ||
174 | for (let key in this.selectPolicyCodes) { | ||
175 | data.push(this.selectPolicyCodes[key]); | ||
176 | } | ||
177 | this.$emit("onSelect", data); | ||
178 | } else { | ||
179 | if (code != this.selectPolicyCode) { | ||
180 | this.selectPolicyCode = code; | ||
181 | this.$emit("onSelect", [{ | ||
182 | code: code, | ||
183 | id: item.policyId | ||
184 | }]); | ||
185 | } | ||
186 | } | ||
187 | }, | ||
188 | isPolicySelect(item, index) { | ||
189 | let code = item.policyCode; | ||
190 | if (this.multiSelectable) { | ||
191 | let c = this.selectPolicyCodes[code]; | ||
192 | if (!c || typeof c == "undefined") { | ||
193 | return false; | ||
194 | } else { | ||
195 | return true; | ||
196 | } | ||
197 | } | ||
198 | return false; | ||
199 | }, | ||
200 | checkCustomer() { | ||
201 | return new Promise(resolve => { | ||
202 | resolve(); | ||
203 | // httpPost({ url: api.profile, sid: true }).then(res => { | ||
204 | // if (res.isCustomer == 1) { | ||
205 | // resolve(); | ||
206 | // } else { | ||
207 | // this.gotoCustomerAuthPage(); | ||
208 | // } | ||
209 | // }).catch(res => { | ||
210 | |||
211 | // }); | ||
212 | }); | ||
213 | }, | ||
214 | gotoCustomerAuthPage() { | ||
215 | let c = this.$route.fullPath; | ||
216 | this.$router.push({ | ||
217 | name: "customerAuth", | ||
218 | query: { | ||
219 | c: c | ||
220 | } | ||
221 | }); | ||
222 | }, | ||
223 | formatMoney(s, t) { | ||
224 | if (typeof t == "undefined") { | ||
225 | t = 1; | ||
226 | } | ||
227 | return formatMoney(s, t); | ||
228 | }, | ||
229 | // 保障年限,保n年 | ||
230 | formatInsuredPeriod(t, v) { | ||
231 | return getInsuredPeriod(this.$i18n.locale, t, v); | ||
232 | }, | ||
233 | formatInsuredState(c) { | ||
234 | return getInsuredState(this.$i18n.locale, c); | ||
235 | }, | ||
236 | formatPolicyName(c, n) { | ||
237 | return getPolicyName(this.$i18n.locale, c, n); | ||
238 | }, | ||
239 | downloadPolicy(policy) { | ||
240 | if (policy) { | ||
241 | httpPost({ | ||
242 | url: api.getDownloadPath, | ||
243 | sid: true, | ||
244 | data: { | ||
245 | policyCode: policy.policyCode | ||
246 | } | ||
247 | }).then(res => { | ||
248 | if (res) { | ||
249 | let url = requestDomain() + api.downloadPolicy + "/" + res; | ||
250 | window.open(url); | ||
251 | } else { | ||
252 | this.showDownloadError = true; | ||
253 | } | ||
254 | }); | ||
255 | } | ||
256 | } | ||
257 | }, | ||
258 | components: { | ||
259 | Modal2Comp | ||
260 | }, | ||
261 | mounted() { | ||
262 | this.queryList(); | ||
263 | }, | ||
264 | } |
1 | @import '@/styles/_support.scss'; | ||
2 | |||
3 | .list-container { | ||
4 | overflow-x: auto; | ||
5 | margin-bottom: 24px; | ||
6 | } | ||
7 | |||
8 | .hide { | ||
9 | max-height: 0; | ||
10 | border-bottom: none; | ||
11 | } | ||
12 | |||
13 | .table-contaner { | ||
14 | position: relative; | ||
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 | |||
32 | .guide { | ||
33 | position: absolute; | ||
34 | transition: all 0.5s; | ||
35 | cursor: pointer; | ||
36 | width: 12px; | ||
37 | height: 8px; | ||
38 | background: url("~@/assets/images/insurance-query/triangle-down2.png") no-repeat center center; | ||
39 | background-size: 100% 100%; | ||
40 | top: 16px; | ||
41 | right: 26px; | ||
42 | } | ||
43 | |||
44 | .rotate180 { | ||
45 | transform: rotate(180deg); | ||
46 | transition: all 0.5s; | ||
47 | } | ||
48 | |||
49 | .cell-group { | ||
50 | margin-bottom: 12px; | ||
51 | |||
52 | &:last-child { | ||
53 | margin-bottom: 0; | ||
54 | } | ||
55 | |||
56 | div { | ||
57 | color: #4c4948; | ||
58 | } | ||
59 | |||
60 | .w1 { | ||
61 | // width: 120px; | ||
62 | width: 240px; | ||
63 | text-align: center; | ||
64 | } | ||
65 | |||
66 | .w2 { | ||
67 | // width: 75px; | ||
68 | width: 150px; | ||
69 | text-align: center; | ||
70 | } | ||
71 | |||
72 | .table-header { | ||
73 | // width: 770px; | ||
74 | height: 39px; | ||
75 | border-top-left-radius: 8px; | ||
76 | border-top-right-radius: 8px; | ||
77 | background-color: #f2f2f2; | ||
78 | display: flex; | ||
79 | align-items: center; | ||
80 | |||
81 | .normal-header { | ||
82 | // width: 706px; | ||
83 | @extend .bb; | ||
84 | padding: 0 32px; | ||
85 | width: 100%; | ||
86 | margin: auto; | ||
87 | display: flex; | ||
88 | justify-content: space-between; | ||
89 | align-items: center; | ||
90 | |||
91 | .title { | ||
92 | font-weight: bold; | ||
93 | color: #575453; | ||
94 | } | ||
95 | |||
96 | .guide { | ||
97 | transition: all 0.5s; | ||
98 | cursor: pointer; | ||
99 | width: 12px; | ||
100 | height: 8px; | ||
101 | background: url("~@/assets/images/insurance-query/triangle-down.png") no-repeat center center; | ||
102 | background-size: 100% 100%; | ||
103 | } | ||
104 | |||
105 | .rotate180 { | ||
106 | transform: rotate(180deg); | ||
107 | transition: all 0.5s; | ||
108 | } | ||
109 | } | ||
110 | } | ||
111 | |||
112 | .table-content { | ||
113 | // width: 770px; | ||
114 | |||
115 | height: auto; | ||
116 | max-height: 600px; | ||
117 | // display: inline-block; | ||
118 | border-bottom-left-radius: 8px; | ||
119 | border-bottom-right-radius: 8px; | ||
120 | border-left: solid 1px #f2f2f2; | ||
121 | border-right: solid 1px #f2f2f2; | ||
122 | border-bottom: solid 1px #f2f2f2; | ||
123 | padding: 0 32px; | ||
124 | transition: max-height ease-out 0.3s !important; | ||
125 | overflow: auto; | ||
126 | |||
127 | .data-line { | ||
128 | // padding: 0 32px; | ||
129 | height: 50px; | ||
130 | margin: auto; | ||
131 | display: flex; | ||
132 | justify-content: space-between; | ||
133 | align-items: center; | ||
134 | |||
135 | .td { | ||
136 | display: flex; | ||
137 | justify-content: center; | ||
138 | align-items: center; | ||
139 | |||
140 | |||
141 | } | ||
142 | |||
143 | .cell1 { | ||
144 | width: 98%; | ||
145 | display: flex; | ||
146 | justify-content: space-between; | ||
147 | margin: auto; | ||
148 | } | ||
149 | |||
150 | .separator-v { | ||
151 | height: 30px; | ||
152 | width: 2px; | ||
153 | background-color: #f2f2f2; | ||
154 | margin: 0 11px; | ||
155 | } | ||
156 | } | ||
157 | |||
158 | .label span { | ||
159 | color: $cOrange; | ||
160 | margin-left: 7px; | ||
161 | cursor: pointer; | ||
162 | text-decoration: underline; | ||
163 | } | ||
164 | |||
165 | .separator-h { | ||
166 | width: 100%; | ||
167 | height: 1px; | ||
168 | background-color: #f2f2f2; | ||
169 | } | ||
170 | } | ||
171 | |||
172 | .orange { | ||
173 | background-color: $cOrange; | ||
174 | |||
175 | div { | ||
176 | color: #ffffff; | ||
177 | } | ||
178 | } | ||
179 | |||
180 | .new{ | ||
181 | @include linear-bg; | ||
182 | } | ||
183 | |||
184 | .hide { | ||
185 | max-height: 0; | ||
186 | border-bottom: none; | ||
187 | } | ||
188 | |||
189 | .sp { | ||
190 | text-decoration: underline; | ||
191 | padding: 0 4.8px; | ||
192 | } | ||
193 | |||
194 | .ac { | ||
195 | color: $cOrange !important; | ||
196 | } | ||
197 | } | ||
198 | |||
199 | .show-more-btn { | ||
200 | width: 100%; | ||
201 | color: $cOrange !important; | ||
202 | text-decoration: underline; | ||
203 | cursor: pointer; | ||
204 | justify-content: center !important; | ||
205 | } | ||
206 | |||
207 | .pointer { | ||
208 | cursor: pointer; | ||
209 | } | ||
210 | |||
211 | .activity { | ||
212 | background-color: $cOrange !important; | ||
213 | opacity: .5; | ||
214 | |||
215 | div { | ||
216 | color: #FFFFFF !important; | ||
217 | } | ||
218 | } | ||
219 | |||
220 | .empty { | ||
221 | height: 500px; | ||
222 | display: flex; | ||
223 | align-items: center; | ||
224 | justify-content: center; | ||
225 | |||
226 | .tips { | ||
227 | align-items: center; | ||
228 | display: flex; | ||
229 | |||
230 | .icon { | ||
231 | margin-right: 5px; | ||
232 | display: inline-block; | ||
233 | } | ||
234 | |||
235 | .btn { | ||
236 | color: $cOrange; | ||
237 | } | ||
238 | } | ||
239 | } | ||
240 |
1 | <template> | ||
2 | <div class="list-container"> | ||
3 | <modal2-comp :visible="showDownloadError" :close="()=>{showDownloadError = false}" :content="$t('glbalTips.sysError')"></modal2-comp> | ||
4 | <div class="cell-group"> | ||
5 | <div class="table-contaner"> | ||
6 | <div class="table-header orange new" > | ||
7 | <div class="normal-header"> | ||
8 | <div class="td w1">{{$t('customService.insuranceQuery.InsurantNumber')}}</div> | ||
9 | <div class="td w2">{{$t('customService.insuranceQuery.policyState')}}</div> | ||
10 | <div class="td w2">{{$t('customService.insuranceQuery.activeDate')}}</div> | ||
11 | <div class="td w2">{{$t('customService.insuranceQuery.Insurant')}}</div> | ||
12 | <div class="td w1">{{$t('customService.insuranceQuery.InsurantName')}}</div> | ||
13 | <div class="td w2">{{$t('customService.insuranceQuery.InsurantAmount')}}</div> | ||
14 | <div class="td w2">{{$t('customService.insuranceQuery.effectiveDate')}}</div> | ||
15 | <div class="td w2">{{$t('customService.insuranceQuery.period')}}</div> | ||
16 | </div> | ||
17 | </div> | ||
18 | <div class="guide" :class="{rotate180 : hide}" @click="hide = !hide"></div> | ||
19 | </div> | ||
20 | <div class="table-content" :class="{hide : hide}"> | ||
21 | <template v-if="myPolicyList"> | ||
22 | <div v-for="(item,index) in myPolicyList" :key="index"> | ||
23 | <template v-if="index < maxShow"> | ||
24 | <div class="data-line" @click="handlePolicySelect(item,index)"> | ||
25 | <div class="td w1 pointer"> | ||
26 | <template v-if="multiSelectable"> | ||
27 | <img v-if="item.activity" class="icon-check pointer" src="@/assets/images/insurance-query/check.png"> | ||
28 | <img v-else class="icon-check pointer" src="@/assets/images/insurance-query/un-check.png"> | ||
29 | <span class="sp" :class="{ac: item.activity}">{{item.policyCode}}</span> | ||
30 | </template> | ||
31 | <template v-else> | ||
32 | <template v-if="model != 'download'"> | ||
33 | <img v-if="selectPolicyCode == item.policyCode" class="icon-check pointer" src="@/assets/images/insurance-query/check.png"> | ||
34 | <img v-else class="icon-check pointer" src="@/assets/images/insurance-query/un-check.png"> | ||
35 | </template> | ||
36 | <span class="sp" :class="{ac: selectPolicyCode == item.policyCode}">{{item.policyCode}}</span> | ||
37 | <template v-if="model == 'download'"> | ||
38 | <div class="download" @mouseover="onShowTipsOverHandler($event,item,index)" @mouseout="onShowTipsOutHandler($event,item,index)" @click="downloadPolicy(item)"> | ||
39 | <div class="download-tips"> | ||
40 | <div class="cont">{{$t('customService.insuranceQuery.downloadClick')}}</div> | ||
41 | </div> | ||
42 | <img class="icon-download" src="@/assets/images/insurance-query/icon-down-load.png" alt=""> | ||
43 | </div> | ||
44 | </template> | ||
45 | </template> | ||
46 | </div> | ||
47 | |||
48 | <div class="td w2">{{formatInsuredState(item.policyState)}}</div> | ||
49 | <div class="td w2">{{item.activeDate?item.activeDate.split(" ")[0]:""}}</div> | ||
50 | <div class="td w2">{{lan == 'en' ? (item.insuredNameEn ? item.insuredNameEn : item.insuredNameCn) : (item.insuredNameCn ? item.insuredNameCn : item.insuredNameEn)}}</div> | ||
51 | <div class="td w1">{{formatPolicyName(item.productCode, item.productName)}}</div> | ||
52 | <div class="td w2">{{item.moneyCode}} {{formatMoney(item.amount,0)}}</div> | ||
53 | <div class="td w2">{{item.expireAt?item.expireAt.split(" ")[0]:""}}</div> | ||
54 | <!-- <div class="td w2">{{item.guaranteeAge?item.guaranteeAge.split(" ")[0]:""}}</div> --> | ||
55 | <div class="td w2">{{formatInsuredPeriod(item.insuredPeriodType,item.insuredPeriodValue)}}</div> | ||
56 | |||
57 | </div> | ||
58 | <div class="separator-h" v-if="index < myPolicyList.length - 1 && index < maxShow - 1"></div> | ||
59 | </template> | ||
60 | </div> | ||
61 | <template v-if="!policyList || maxShow < policyList.length"> | ||
62 | <div class="separator-h"></div> | ||
63 | <div class="data-line show-more-btn" @click="maxShow = policyList.length">{{$t('customService.insuranceQuery.showMore')}}</div> | ||
64 | </template> | ||
65 | </template> | ||
66 | |||
67 | <template v-else> | ||
68 | <div class="empty"> | ||
69 | <div class="tips"> | ||
70 | <img class="icon" src="@/assets/images/common/icon-alert-i.png" alt=""> | ||
71 | <div class="txt"> | ||
72 | {{$t('customService.insuranceQuery.noPolicy')}} | ||
73 | <span class="pointer btn" @click="toContactUs">{{$t('customService.insuranceQuery.customService')}}</span> | ||
74 | </div> | ||
75 | </div> | ||
76 | </div> | ||
77 | </template> | ||
78 | </div> | ||
79 | </div> | ||
80 | </div> | ||
81 | </template> | ||
82 | |||
83 | |||
84 | <script src="./e-correspondence-head-list.js"></script> | ||
85 | <style lang="scss" scoped> | ||
86 | @import "./e-correspondence-head-list.scss"; | ||
87 | </style> |
1 | <template> | 1 | <template> |
2 | <div class="container"> | 2 | <div class="container"> |
3 | |||
4 | <!-- 登陆/注册提示 --> | 3 | <!-- 登陆/注册提示 --> |
5 | <auth @onLogin="userLogin" @onLogout="userLogout" :checkProfile="true" :tipModel="'m1'" ref="auth"></auth> | 4 | <auth @onLogin="userLogin" @onLogout="userLogout" :checkProfile="true" :tipModel="'m1'" ref="auth"></auth> |
6 | <div v-if="showForm"> | 5 | <div v-if="showForm"> | ... | ... |
1 | /** | ||
2 | * 组件描述:保单查询列表 | ||
3 | */ | ||
4 | |||
1 | import api from '@/api/api'; | 5 | import api from '@/api/api'; |
2 | import { | 6 | import { |
3 | httpPost, | 7 | httpPost, |
... | @@ -23,11 +27,10 @@ export default { | ... | @@ -23,11 +27,10 @@ export default { |
23 | }, | 27 | }, |
24 | model: { | 28 | model: { |
25 | type: String, | 29 | type: String, |
26 | // checkbox | ||
27 | default: "download" | 30 | default: "download" |
28 | } | ||
29 | }, | 31 | }, |
30 | name: "InsuranceQuery", | 32 | }, |
33 | name: "PolicyHeadList", | ||
31 | data() { | 34 | data() { |
32 | return { | 35 | return { |
33 | myPolicyList: [], | 36 | myPolicyList: [], | ... | ... |
... | @@ -170,7 +170,7 @@ | ... | @@ -170,7 +170,7 @@ |
170 | } | 170 | } |
171 | 171 | ||
172 | .orange { | 172 | .orange { |
173 | background-color: $cOrange !important; | 173 | background-color: $cOrange; |
174 | 174 | ||
175 | div { | 175 | div { |
176 | color: #ffffff; | 176 | color: #ffffff; |
... | @@ -234,15 +234,3 @@ | ... | @@ -234,15 +234,3 @@ |
234 | } | 234 | } |
235 | } | 235 | } |
236 | 236 | ||
237 | // @media (max-width: 1200px) { | ||
238 | // .list-container { | ||
239 | // display: -webkit-box; | ||
240 | // overflow-x: auto; | ||
241 | // -webkit-overflow-scrolling: touch; | ||
242 | // width: 92vw; | ||
243 | // } | ||
244 | // } | ||
245 | |||
246 | // .list-container::-webkit-scrollbar { | ||
247 | // display: none; | ||
248 | // } | ... | ... |
... | @@ -3,7 +3,7 @@ | ... | @@ -3,7 +3,7 @@ |
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.policyState')}}</div> | 9 | <div class="td w2">{{$t('customService.insuranceQuery.policyState')}}</div> |
... | @@ -45,7 +45,6 @@ | ... | @@ -45,7 +45,6 @@ |
45 | </template> | 45 | </template> |
46 | </div> | 46 | </div> |
47 | 47 | ||
48 | |||
49 | <div class="td w2">{{formatInsuredState(item.policyState)}}</div> | 48 | <div class="td w2">{{formatInsuredState(item.policyState)}}</div> |
50 | <div class="td w2">{{item.activeDate?item.activeDate.split(" ")[0]:""}}</div> | 49 | <div class="td w2">{{item.activeDate?item.activeDate.split(" ")[0]:""}}</div> |
51 | <div class="td w2">{{lan == 'en' ? (item.insuredNameEn ? item.insuredNameEn : item.insuredNameCn) : (item.insuredNameCn ? item.insuredNameCn : item.insuredNameEn)}}</div> | 50 | <div class="td w2">{{lan == 'en' ? (item.insuredNameEn ? item.insuredNameEn : item.insuredNameCn) : (item.insuredNameCn ? item.insuredNameCn : item.insuredNameEn)}}</div> | ... | ... |
... | @@ -141,10 +141,6 @@ | ... | @@ -141,10 +141,6 @@ |
141 | font-size: $fontSize; | 141 | font-size: $fontSize; |
142 | border-radius: $hei; | 142 | border-radius: $hei; |
143 | text-align: center; | 143 | text-align: center; |
144 | |||
145 | // background: url("~@assets/images/vhis/vhis-btn.png"); | ||
146 | // background-size: 100% 100%; | ||
147 | // background-repeat: no-repeat; | ||
148 | background-image: linear-gradient(135deg, #f15a08, #feab1b), linear-gradient(90deg, #fff, #fff); | 144 | background-image: linear-gradient(135deg, #f15a08, #feab1b), linear-gradient(90deg, #fff, #fff); |
149 | color: white; | 145 | color: white; |
150 | font-weight: 600; | 146 | font-weight: 600; |
... | @@ -153,7 +149,6 @@ | ... | @@ -153,7 +149,6 @@ |
153 | } | 149 | } |
154 | 150 | ||
155 | 151 | ||
156 | |||
157 | @mixin content-percent($percent:4%) { | 152 | @mixin content-percent($percent:4%) { |
158 | box-sizing: border-box; | 153 | box-sizing: border-box; |
159 | padding: 0 $percent; | 154 | padding: 0 $percent; |
... | @@ -166,3 +161,8 @@ | ... | @@ -166,3 +161,8 @@ |
166 | background-image: linear-gradient(90deg, #fff, #fff), linear-gradient(90deg, #feab1b, #f15a08); | 161 | background-image: linear-gradient(90deg, #fff, #fff), linear-gradient(90deg, #feab1b, #f15a08); |
167 | border-radius: $borderRadius; | 162 | border-radius: $borderRadius; |
168 | } | 163 | } |
164 | |||
165 | @mixin linear-bg() { | ||
166 | background-color: transparent; | ||
167 | background-image: linear-gradient(135deg, #f15a08, #feab1b), linear-gradient(90deg, #fff, #fff); | ||
168 | } | ... | ... |
-
Please register or sign in to post a comment