Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
0b5e6d57 by simon
Options

保单查询修改

1 parent f91f43a5
Inline Side-by-side
Showing 4 changed files with 297 additions and 264 deletions
...@@ -36,6 +36,7 @@ export default { ...@@ -36,6 +36,7 @@ export default {
36 this.dataForm = null; 36 this.dataForm = null;
37 httpPost({ url: api.policyDetail, sid: true, data: submitData }).then(res => { 37 httpPost({ url: api.policyDetail, sid: true, data: submitData }).then(res => {
38 this.dataForm = res; 38 this.dataForm = res;
39 console.log("this.dataForm:",this.dataForm.productCode)
39 40
40 41
41 if (this.dataForm.clientNameCn) { 42 if (this.dataForm.clientNameCn) {
......
1 @import '@/styles/_support.scss'; 1 @import "@/styles/_support.scss";
2 2
3 .container{ 3 .container {
4 // font-size: 18px; 4 // font-size: 18px;
5 } 5 }
6 6
...@@ -52,7 +52,8 @@ ...@@ -52,7 +52,8 @@
52 cursor: pointer; 52 cursor: pointer;
53 width: 12px; 53 width: 12px;
54 height: 8px; 54 height: 8px;
55 background: url("~@/assets/images/insurance-query/triangle-down.png") no-repeat center center; 55 background: url("~@/assets/images/insurance-query/triangle-down.png")
56 no-repeat center center;
56 background-size: 100% 100%; 57 background-size: 100% 100%;
57 } 58 }
58 59
...@@ -64,9 +65,7 @@ ...@@ -64,9 +65,7 @@
64 } 65 }
65 66
66 .table-content { 67 .table-content {
67
68 height: auto; 68 height: auto;
69 // display: inline-block;
70 border-bottom-left-radius: 8px; 69 border-bottom-left-radius: 8px;
71 border-bottom-right-radius: 8px; 70 border-bottom-right-radius: 8px;
72 border-left: solid 1px #f2f2f2; 71 border-left: solid 1px #f2f2f2;
...@@ -77,6 +76,49 @@ ...@@ -77,6 +76,49 @@
77 transition: max-height ease-out 0.3s !important; 76 transition: max-height ease-out 0.3s !important;
78 overflow: scroll; 77 overflow: scroll;
79 78
79 .cell {
80 position: relative;
81 display: flex;
82 justify-content: space-between;
83 align-items: center;
84 height: 50px;
85 border-bottom: solid 1px #f2f2f2;
86
87 .label span {
88 color: $cOrange;
89 margin-left: 7px;
90 cursor: pointer;
91 text-decoration: underline;
92 }
93
94 &:last-child(){
95 border-bottom: none;
96 }
97 &:nth-last-child(2){
98 border-bottom: none;
99 }
100
101 &:nth-child(odd) {
102 padding-right: 10px;
103 }
104 &:nth-child(even) {
105 padding-left: 10px;
106 }
107 &:nth-child(odd):after {
108 content: "";
109 background-color: #f2f2f2;
110 position: absolute;
111 top: 10px;
112 right: 0;
113 height: 30px;
114 width: 1px;
115 }
116 }
117
118 .cell1:nth-child(1){
119 text-align: right !important;
120 }
121
80 .data-line { 122 .data-line {
81 height: 50px; 123 height: 50px;
82 margin: auto; 124 margin: auto;
...@@ -114,7 +156,6 @@ ...@@ -114,7 +156,6 @@
114 } 156 }
115 } 157 }
116 158
117
118 .label span { 159 .label span {
119 color: #f05a23; 160 color: #f05a23;
120 margin-left: 7px; 161 margin-left: 7px;
...@@ -141,7 +182,6 @@ ...@@ -141,7 +182,6 @@
141 max-height: 0; 182 max-height: 0;
142 border-bottom: none; 183 border-bottom: none;
143 } 184 }
144
145 } 185 }
146 186
147 .cell-between { 187 .cell-between {
...@@ -156,7 +196,6 @@ ...@@ -156,7 +196,6 @@
156 } 196 }
157 } 197 }
158 } 198 }
159
160 } 199 }
161 200
162 .icon-download { 201 .icon-download {
...@@ -201,4 +240,3 @@ ...@@ -201,4 +240,3 @@
201 // .table-content{ 240 // .table-content{
202 // -ms-overflow-style: none; 241 // -ms-overflow-style: none;
203 // } 242 // }
204
......
1 <template> 1 <template>
2 <div class="container"> 2 <div class="container">
3 <!-- 登陆/注册提示 --> 3 <!-- 登陆/注册提示 -->
4 <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>
5 <div v-if="showForm"> 5 <div v-if="showForm">
6 <!-- 保单列表 --> 6 <!-- 保单列表 -->
7 <policy-head-list style="width:100%;" :multiSelectable="false" @onSelect="handlePolicySelect"></policy-head-list> 7 <policy-head-list style="width:100%;" :multiSelectable="false" @onSelect="handlePolicySelect"></policy-head-list>
8 8
9 <!-- 保单详情 --> 9 <!-- 保单详情 -->
10 <template v-if="dataForm"> 10 <template v-if="dataForm">
11 <div class="cell-group">
12 <div class="table-header">
13 <div class="normal-header">
14 <div class="title">{{$t('customService.insuranceQuery.t2Title')}}</div>
15 <div class="guide" :class="{rotate180 : !insuranceForm.f1}" @click="insuranceForm.f1 = !insuranceForm.f1"></div>
16 </div>
17 </div>
18 <div class="table-content" :class="{hide : !insuranceForm.f1}">
19 <div class="data-line">
20 <div class="cell1">
21 <div class="label">{{$t('customService.insuranceQuery.t2n1')}}</div>
22 <div class="label">{{formatPolicyName(dataForm.productCode, dataForm.productName)}}</div>
23 </div>
24 <div class="separator-v"></div>
25 <div class="cell1">
26 <div class="label">{{$t('customService.insuranceQuery.t2n2')}}</div>
27 <div class="label">{{dataForm.moneyMark}} {{formatMoney(dataForm.amount,0)}}</div>
28 </div>
29 </div>
30 11
31 <div class="separator-h"></div> 12 <!-- 1 -->
32 <div class="data-line"> 13 <div class="cell-group">
33 <div class="cell1"> 14 <div class="table-header">
34 <div class="label">{{$t('customService.insuranceQuery.t2n9k')}}</div> 15 <div class="normal-header">
35 <div class="label">{{$t('customService.insuranceQuery.t2n9v')}}</div> 16 <div class="title">{{$t('customService.insuranceQuery.t2Title')}}</div>
36 </div> 17 <div class="guide" :class="{rotate180 : !insuranceForm.f1}" @click="insuranceForm.f1 = !insuranceForm.f1"></div>
37 <div class="separator-v"></div> 18 </div>
38 <div class="cell1"> 19 </div>
39 <div class="label">{{$t('customService.insuranceQuery.t2n3')}}</div>
40 <div class="label">{{dataForm.activeDate?dataForm.activeDate.split(" ")[0]:""}}</div>
41 </div>
42 </div>
43 20
44 <div class="separator-h"></div> 21 <div class="gird-g table-content flw" :class="{hide : !insuranceForm.f1}">
45 <div class="data-line"> 22 <div class="pure-u-1-2 pure-u-md-1-2 cell">
46 <div class="cell1"> 23 <div class="label">{{$t('customService.insuranceQuery.t2n1')}}</div>
47 <div class="label">{{$t('customService.insuranceQuery.t2n4')}}</div> 24 <div class="label">{{formatPolicyName(dataForm.productCode, dataForm.productName)}}</div>
48 <div class="label">{{formatInsuredPeriod(dataForm.periodType,dataForm.periodValue)}}</div> 25 </div>
49 </div> 26 <div class="pure-u-1-2 pure-u-md-1-2 cell">
50 <div class="separator-v"></div> 27 <div class="label">{{$t('customService.insuranceQuery.t2n2')}}</div>
51 <div class="cell1"> 28 <div class="label">{{dataForm.moneyMark}} {{formatMoney(dataForm.amount,0)}}</div>
52 <div class="label">{{$t('customService.insuranceQuery.t2n5')}} 29 </div>
53 <span @click="toModifyPage(1)">{{$t('customService.insuranceQuery.modify')}}</span>
54 </div>
55 <div class="label">{{dataForm.insuredNameCn}}</div>
56 </div>
57 </div>
58 <div class="separator-h"></div>
59 <div class="data-line">
60 <div class="cell1">
61 <div class="label">{{$t('customService.insuranceQuery.t2n6')}}
62 <span @click="toModifyPage(1)">{{$t('customService.insuranceQuery.modify')}}</span>
63 </div>
64 <div class="label">{{dataForm.insuredNameEn}}</div>
65 </div>
66 <div class="separator-v"></div>
67 <div class="cell1">
68 <div class="label">{{$t('customService.insuranceQuery.t2n7')}}</div>
69 <div class="label">{{dataForm.insuredBirthday?dataForm.insuredBirthday.split(" ")[0]:""}}</div>
70 </div>
71 </div>
72 30
73 <div class="separator-h"></div> 31 <div class="pure-u-1-2 pure-u-md-1-2 cell" v-if="dataForm.productCode == 'WLPAR01' || dataForm.productCode == 'WLPAR02'">
74 <div class="data-line"> 32 <div class="label">{{$t('customService.insuranceQuery.t2n9k')}}</div>
75 <div class="cell1"> 33 <div class="label">{{$t('customService.insuranceQuery.t2n9v')}}</div>
76 <div class="label">{{$t('customService.insuranceQuery.t2n8')}} 34 </div>
77 <span @click="toModifyPage(1)">{{$t('customService.insuranceQuery.modify')}}</span>
78 </div>
79 <div class="label">{{dataForm.insuredIdNumber}}</div>
80 </div>
81 35
82 <div class="separator-v"></div> 36 <div class="pure-u-1-2 pure-u-md-1-2 cell">
83 <div class="cell1"> 37 <div class="label">{{$t('customService.insuranceQuery.t2n3')}}</div>
84 <div class="label"></div> 38 <div class="label">{{dataForm.activeDate?dataForm.activeDate.split(" ")[0]:""}}</div>
85 <div class="label"></div> 39 </div>
86 </div>
87 </div>
88 </div>
89 </div>
90 40
91 <div class="cell-group"> 41 <div class="pure-u-1-2 pure-u-md-1-2 cell">
92 <div class="table-header"> 42 <div class="label">{{$t('customService.insuranceQuery.t2n4')}}</div>
93 <div class="normal-header"> 43 <div class="label">{{formatInsuredPeriod(dataForm.periodType,dataForm.periodValue)}}</div>
94 <div class="title">{{$t('customService.insuranceQuery.t3Title')}}</div> 44 </div>
95 <div class="guide" :class="{rotate180 : !insuranceForm.f2}" @click="insuranceForm.f2 = !insuranceForm.f2"></div> 45 <div class="pure-u-1-2 pure-u-md-1-2 cell">
96 </div> 46 <div class="label">{{$t('customService.insuranceQuery.t2n5')}}
97 </div> 47 <span @click="toModifyPage(1)">{{$t('customService.insuranceQuery.modify')}}</span>
98 <div class="table-content" :class="{hide : !insuranceForm.f2}"> 48 </div>
99 <div class="data-line"> 49 <div class="label">{{dataForm.insuredNameCn}}</div>
100 <div class="cell1"> 50 </div>
101 <div class="label">{{$t('customService.insuranceQuery.t3n1')}}
102 <span @click="toModifyPage(2)">{{$t('customService.insuranceQuery.modify')}}</span>
103 </div>
104 <div class="label">{{dataForm.clientNameCn}}</div>
105 </div>
106 <div class="separator-v"></div>
107 <div class="cell1">
108 <div class="label">{{$t('customService.insuranceQuery.t3n2')}}
109 <span @click="toModifyPage(2)">{{$t('customService.insuranceQuery.modify')}}</span>
110 </div>
111 <div class="label">{{dataForm.clientNameEn}}</div>
112 </div>
113 </div>
114 <div class="separator-h"></div>
115 <div class="data-line">
116 <div class="cell1">
117 <div class="label">{{$t('customService.insuranceQuery.t3n3')}}</div>
118 <div class="label">{{dataForm.clientBirthday?dataForm.clientBirthday.split(" ")[0]:""}}</div>
119 </div>
120 <div class="separator-v"></div>
121 <div class="cell1">
122 <div class="label">{{$t('customService.insuranceQuery.t3n4')}}
123 <span @click="toModifyPage(2)">{{$t('customService.insuranceQuery.modify')}}</span>
124 </div>
125 <div class="label">{{dataForm.clientIdNumber}}</div>
126 </div>
127 </div>
128 <div class="separator-h"></div>
129 <div class="data-line">
130 <div class="cell1">
131 <div class="label">{{$t('customService.insuranceQuery.t3n5')}}
132 <span @click="toModifyPage(2,1)">{{$t('customService.insuranceQuery.modify')}}</span>
133 </div>
134 <div class="label"> {{dataForm.clientContactAddress}}</div>
135 </div>
136 <div class="separator-v"></div>
137 <div class="cell1">
138 <div class="label">{{$t('customService.insuranceQuery.t3n6')}}
139 <span @click="toModifyPage(2,1)">{{$t('customService.insuranceQuery.modify')}}</span>
140 </div>
141 <div class="label"> {{dataForm.clientLivingAddress}}</div>
142 </div>
143 </div>
144 <div class="separator-h"></div>
145 <div class="data-line">
146 <div class="cell1">
147 <div class="label">{{$t('customService.insuranceQuery.t3n7')}}
148 <span @click="toModifyPage(2,1)">{{$t('customService.insuranceQuery.modify')}}</span>
149 </div>
150 <div class="label">{{dataForm.clientMobileNo}}</div>
151 </div>
152 <div class="separator-v"></div>
153 <div class="cell1">
154 <div class="label">{{$t('customService.insuranceQuery.t3n8')}}
155 <span @click="toModifyPage(2,1)">{{$t('customService.insuranceQuery.modify')}}</span>
156 </div>
157 <div class="label">{{dataForm.clientEmail}}</div>
158 </div>
159 </div>
160 51
161 </div> 52 <div class="pure-u-1-2 pure-u-md-1-2 cell">
162 </div> 53 <div class="label">{{$t('customService.insuranceQuery.t2n6')}}
54 <span @click="toModifyPage(1)">{{$t('customService.insuranceQuery.modify')}}</span>
55 </div>
56 <div class="label">{{dataForm.insuredNameEn}}</div>
57 </div>
58 <div class="pure-u-1-2 pure-u-md-1-2 cell">
59 <div class="label">{{$t('customService.insuranceQuery.t2n7')}}</div>
60 <div class="label">{{dataForm.insuredBirthday?dataForm.insuredBirthday.split(" ")[0]:""}}</div>
61 </div>
163 62
164 <div class="cell-group cell-between"> 63 <div class="pure-u-1-2 pure-u-md-1-2 cell">
165 <div class="table-header"> 64 <div class="label">{{$t('customService.insuranceQuery.t2n8')}}
166 <div class="normal-header"> 65 <span @click="toModifyPage(1)">{{$t('customService.insuranceQuery.modify')}}</span>
167 <div class="title">{{$t('customService.insuranceQuery.t4Title')}}</div> 66 </div>
168 <div class="guide" :class="{rotate180 : !insuranceForm.f3}" @click="insuranceForm.f3 = !insuranceForm.f3"></div> 67 <div class="label">{{dataForm.insuredIdNumber}}</div>
169 </div> 68 </div>
170 </div>
171 <div class="table-content" :class="{hide : !insuranceForm.f3}">
172 <div class="data-line">
173 <div class="td w2">{{$t('customService.insuranceQuery.t4NameCn')}}</div>
174 <div class="td w2">{{$t('customService.insuranceQuery.t4NameEn')}}</div>
175 <div class="td w2">{{$t('customService.insuranceQuery.t4Relation')}}</div>
176 <div class="td w2">{{$t('customService.insuranceQuery.t4Allocation')}}</div>
177 </div>
178 <div class="separator-h"></div>
179 69
180 <div v-for="(item,index) in dataForm.benefitList" :key="index"> 70 <!-- 为了凑正对 -->
181 <div class="data-line"> 71 <div class="pure-u-1-2 pure-u-md-1-2 cell" v-if="dataForm.productCode == 'WLPAR01' || dataForm.productCode == 'WLPAR02'">
182 <div class="td w2">{{item.name}}</div> 72 <div class="label"></div>
183 <div class="td w2">{{item.nameEn}}</div> 73 <div class="label"></div>
184 <div class="td w2">{{formatBenefitType(item.relationshipWithLA)}}</div> 74 </div>
185 <div class="td w2">{{item.benefitRate}}</div> 75 </div>
186 </div> 76 </div>
187 <div class="separator-h" v-if="index < dataForm.benefitList.length - 1"></div>
188 </div>
189 </div>
190 </div>
191 77
192 <div class="cell-group"> 78 <!-- 2 -->
193 <div class="table-header"> 79 <div class="cell-group">
194 <div class="normal-header"> 80 <div class="table-header">
195 <div class="title">{{$t('customService.insuranceQuery.t5Title')}}</div> 81 <div class="normal-header">
196 <div class="guide" :class="{rotate180 : !insuranceForm.f4}" @click="insuranceForm.f4 = !insuranceForm.f4"></div> 82 <div class="title">{{$t('customService.insuranceQuery.t3Title')}}</div>
197 </div> 83 <div class="guide" :class="{rotate180 : !insuranceForm.f2}" @click="insuranceForm.f2 = !insuranceForm.f2"></div>
198 </div> 84 </div>
199 <div class="table-content" :class="{hide : !insuranceForm.f4}"> 85 </div>
200 <div class="data-line"> 86 <div class="table-content" :class="{hide : !insuranceForm.f2}">
201 <div class="cell1"> 87 <div class="data-line">
202 <div class="label">{{$t('customService.insuranceQuery.t5PaymentPeriod')}}</div> 88 <div class="cell1">
203 <div class="label">{{formatPayPeriod(dataForm.payPeriodType,dataForm.payPeriodValue)}}</div> 89 <div class="label">{{$t('customService.insuranceQuery.t3n1')}}
204 </div> 90 <span @click="toModifyPage(2)">{{$t('customService.insuranceQuery.modify')}}</span>
205 <div class="separator-v"></div> 91 </div>
206 <div class="cell1"> 92 <div class="label">{{dataForm.clientNameCn}}</div>
207 <div class="label">{{$t('customService.insuranceQuery.t5PaymentMethod')}}</div> 93 </div>
208 <div class="label">{{formatPayMode(dataForm.payMode)}}</div> 94 <div class="separator-v"></div>
209 </div> 95 <div class="cell1">
210 </div> 96 <div class="label">{{$t('customService.insuranceQuery.t3n2')}}
211 <div class="separator-h"></div> 97 <span @click="toModifyPage(2)">{{$t('customService.insuranceQuery.modify')}}</span>
98 </div>
99 <div class="label">{{dataForm.clientNameEn}}</div>
100 </div>
101 </div>
102 <div class="separator-h"></div>
103 <div class="data-line">
104 <div class="cell1">
105 <div class="label">{{$t('customService.insuranceQuery.t3n3')}}</div>
106 <div class="label">{{dataForm.clientBirthday?dataForm.clientBirthday.split(" ")[0]:""}}</div>
107 </div>
108 <div class="separator-v"></div>
109 <div class="cell1">
110 <div class="label">{{$t('customService.insuranceQuery.t3n4')}}
111 <span @click="toModifyPage(2)">{{$t('customService.insuranceQuery.modify')}}</span>
112 </div>
113 <div class="label">{{dataForm.clientIdNumber}}</div>
114 </div>
115 </div>
116 <div class="separator-h"></div>
117 <div class="data-line">
118 <div class="cell1">
119 <div class="label">{{$t('customService.insuranceQuery.t3n5')}}
120 <span @click="toModifyPage(2,1)">{{$t('customService.insuranceQuery.modify')}}</span>
121 </div>
122 <div class="label"> {{dataForm.clientContactAddress}}</div>
123 </div>
124 <div class="separator-v"></div>
125 <div class="cell1">
126 <div class="label">{{$t('customService.insuranceQuery.t3n6')}}
127 <span @click="toModifyPage(2,1)">{{$t('customService.insuranceQuery.modify')}}</span>
128 </div>
129 <div class="label"> {{dataForm.clientLivingAddress}}</div>
130 </div>
131 </div>
132 <div class="separator-h"></div>
133 <div class="data-line">
134 <div class="cell1">
135 <div class="label">{{$t('customService.insuranceQuery.t3n7')}}
136 <span @click="toModifyPage(2,1)">{{$t('customService.insuranceQuery.modify')}}</span>
137 </div>
138 <div class="label">{{dataForm.clientMobileNo}}</div>
139 </div>
140 <div class="separator-v"></div>
141 <div class="cell1">
142 <div class="label">{{$t('customService.insuranceQuery.t3n8')}}
143 <span @click="toModifyPage(2,1)">{{$t('customService.insuranceQuery.modify')}}</span>
144 </div>
145 <div class="label">{{dataForm.clientEmail}}</div>
146 </div>
147 </div>
212 148
213 <div class="data-line"> 149 </div>
214 <div class="cell1"> 150 </div>
215 <div class="label">{{$t('customService.insuranceQuery.t5PaymentCurrency')}}</div>
216 <div class="label">{{formatMoneyName(dataForm.moneyId)}}</div>
217 </div>
218 <div class="separator-v"></div>
219 <div class="cell1">
220 <div class="label">{{$t('customService.insuranceQuery.t5CurrentPremium')}}</div>
221 <div class="label">{{dataForm.moneyMark}} {{formatMoney(dataForm.premium)}}</div>
222 </div>
223 </div>
224 <div class="separator-h"></div>
225 151
226 <div class="data-line"> 152 <!-- 3 -->
227 <div class="cell1"> 153 <div class="cell-group cell-between">
228 <div class="label">{{$t('customService.insuranceQuery.t5PaymentBank')}}</div> 154 <div class="table-header">
229 <div class="label">{{dataForm.bankName}}</div> 155 <div class="normal-header">
230 </div> 156 <div class="title">{{$t('customService.insuranceQuery.t4Title')}}</div>
231 <div class="separator-v"></div> 157 <div class="guide" :class="{rotate180 : !insuranceForm.f3}" @click="insuranceForm.f3 = !insuranceForm.f3"></div>
232 <div class="cell1"> 158 </div>
233 <div class="label">{{$t('customService.insuranceQuery.t5PaymentAccount')}}</div> 159 </div>
234 <div class="label">{{dataForm.bankAccount}}</div> 160 <div class="table-content" :class="{hide : !insuranceForm.f3}">
235 </div> 161 <div class="data-line">
236 </div> 162 <div class="td w2">{{$t('customService.insuranceQuery.t4NameCn')}}</div>
237 <div class="separator-h"></div> 163 <div class="td w2">{{$t('customService.insuranceQuery.t4NameEn')}}</div>
238 </div> 164 <div class="td w2">{{$t('customService.insuranceQuery.t4Relation')}}</div>
239 </div> 165 <div class="td w2">{{$t('customService.insuranceQuery.t4Allocation')}}</div>
166 </div>
167 <div class="separator-h"></div>
240 168
241 <div class="cell-group cell-between"> 169 <div v-for="(item,index) in dataForm.benefitList" :key="index">
242 <div class="table-header"> 170 <div class="data-line">
243 <div class="normal-header"> 171 <div class="td w2">{{item.name}}</div>
244 <div class="title">{{$t('customService.insuranceQuery.t6Title')}}</div> 172 <div class="td w2">{{item.nameEn}}</div>
245 <div class="guide" :class="{rotate180 : !insuranceForm.f5}" @click="insuranceForm.f5 = !insuranceForm.f5"></div> 173 <div class="td w2">{{formatBenefitType(item.relationshipWithLA)}}</div>
246 </div> 174 <div class="td w2">{{item.benefitRate}}</div>
247 </div> 175 </div>
248 <div class="table-content" :class="{hide : !insuranceForm.f5}"> 176 <div class="separator-h" v-if="index < dataForm.benefitList.length - 1"></div>
249 <div class="data-line"> 177 </div>
250 <div class="td w2">{{$t('customService.insuranceQuery.t6PaymentPeriod')}}</div> 178 </div>
251 <div class="td w2">{{$t('customService.insuranceQuery.t6PaymentMethod')}}</div> 179 </div>
252 <div class="td w2">{{$t('customService.insuranceQuery.t6ClosingDate')}}</div> 180
253 <div class="td w2">{{$t('customService.insuranceQuery.t6PaymentAmount')}}</div> 181 <div class="cell-group">
254 </div> 182 <div class="table-header">
255 <div class="separator-h"></div> 183 <div class="normal-header">
256 <div v-for="(item,index) in dataForm.pandupList" :key="index"> 184 <div class="title">{{$t('customService.insuranceQuery.t5Title')}}</div>
257 <div class="data-line"> 185 <div class="guide" :class="{rotate180 : !insuranceForm.f4}" @click="insuranceForm.f4 = !insuranceForm.f4"></div>
258 <div class="td w2">{{formatPanduPayPeriod(item.policyYear,item.policyPeriod)}}</div> 186 </div>
259 <div class="td w2">{{formatPayMode(dataForm.payMode)}}</div> 187 </div>
260 <div class="td w2">{{item.receiptDate?item.receiptDate.split(" ")[0]:""}}</div> 188 <div class="table-content" :class="{hide : !insuranceForm.f4}">
261 <div class="td w2">{{dataForm.moneyMark}} {{formatMoney(item.totalPremium)}}</div> 189 <div class="data-line">
262 </div> 190 <div class="cell1">
263 <div class="separator-h" v-if="index < dataForm.pandupList.length - 1"></div> 191 <div class="label">{{$t('customService.insuranceQuery.t5PaymentPeriod')}}</div>
264 </div> 192 <div class="label">{{formatPayPeriod(dataForm.payPeriodType,dataForm.payPeriodValue)}}</div>
265 </div> 193 </div>
266 </div> 194 <div class="separator-v"></div>
267 </template> 195 <div class="cell1">
268 </div> 196 <div class="label">{{$t('customService.insuranceQuery.t5PaymentMethod')}}</div>
269 </div> 197 <div class="label">{{formatPayMode(dataForm.payMode)}}</div>
198 </div>
199 </div>
200 <div class="separator-h"></div>
201
202 <div class="data-line">
203 <div class="cell1">
204 <div class="label">{{$t('customService.insuranceQuery.t5PaymentCurrency')}}</div>
205 <div class="label">{{formatMoneyName(dataForm.moneyId)}}</div>
206 </div>
207 <div class="separator-v"></div>
208 <div class="cell1">
209 <div class="label">{{$t('customService.insuranceQuery.t5CurrentPremium')}}</div>
210 <div class="label">{{dataForm.moneyMark}} {{formatMoney(dataForm.premium)}}</div>
211 </div>
212 </div>
213 <div class="separator-h"></div>
214
215 <div class="data-line">
216 <div class="cell1">
217 <div class="label">{{$t('customService.insuranceQuery.t5PaymentBank')}}</div>
218 <div class="label">{{dataForm.bankName}}</div>
219 </div>
220 <div class="separator-v"></div>
221 <div class="cell1">
222 <div class="label">{{$t('customService.insuranceQuery.t5PaymentAccount')}}</div>
223 <div class="label">{{dataForm.bankAccount}}</div>
224 </div>
225 </div>
226 <div class="separator-h"></div>
227 </div>
228 </div>
229
230 <div class="cell-group cell-between">
231 <div class="table-header">
232 <div class="normal-header">
233 <div class="title">{{$t('customService.insuranceQuery.t6Title')}}</div>
234 <div class="guide" :class="{rotate180 : !insuranceForm.f5}" @click="insuranceForm.f5 = !insuranceForm.f5"></div>
235 </div>
236 </div>
237 <div class="table-content" :class="{hide : !insuranceForm.f5}">
238 <div class="data-line">
239 <div class="td w2">{{$t('customService.insuranceQuery.t6PaymentPeriod')}}</div>
240 <div class="td w2">{{$t('customService.insuranceQuery.t6PaymentMethod')}}</div>
241 <div class="td w2">{{$t('customService.insuranceQuery.t6ClosingDate')}}</div>
242 <div class="td w2">{{$t('customService.insuranceQuery.t6PaymentAmount')}}</div>
243 </div>
244 <div class="separator-h"></div>
245 <div v-for="(item,index) in dataForm.pandupList" :key="index">
246 <div class="data-line">
247 <div class="td w2">{{formatPanduPayPeriod(item.policyYear,item.policyPeriod)}}</div>
248 <div class="td w2">{{formatPayMode(dataForm.payMode)}}</div>
249 <div class="td w2">{{item.receiptDate?item.receiptDate.split(" ")[0]:""}}</div>
250 <div class="td w2">{{dataForm.moneyMark}} {{formatMoney(item.totalPremium)}}</div>
251 </div>
252 <div class="separator-h" v-if="index < dataForm.pandupList.length - 1"></div>
253 </div>
254 </div>
255 </div>
256 </template>
257 </div>
258 </div>
270 </template> 259 </template>
271 260
272 261
......
...@@ -8,6 +8,11 @@ ...@@ -8,6 +8,11 @@
8 display: flex; 8 display: flex;
9 } 9 }
10 10
11 .flw {
12 display: flex;
13 flex-wrap: wrap;
14 }
15
11 .flc { 16 .flc {
12 display: flex; 17 display: flex;
13 justify-content: center; 18 justify-content: center;
......