Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
7c06b389 by joe
Options

1

1 parent f7033f49
Inline Side-by-side
Showing 12 changed files with 1137 additions and 215 deletions
...@@ -19,6 +19,7 @@ ...@@ -19,6 +19,7 @@
19 "co": "^4.6.0", 19 "co": "^4.6.0",
20 "core-js": "^2.6.5", 20 "core-js": "^2.6.5",
21 "crypto-js": "^3.1.9-1", 21 "crypto-js": "^3.1.9-1",
22 "element-ui": "^2.13.0",
22 "glob": "^7.1.4", 23 "glob": "^7.1.4",
23 "jsencrypt": "^3.0.0-rc.1", 24 "jsencrypt": "^3.0.0-rc.1",
24 "mockjs": "^1.0.1-beta3", 25 "mockjs": "^1.0.1-beta3",
......
1 import api from '@/api/api'
2 import {
3 httpGet,
4 httpPost,
5 formdata
6 } from '@/api/fetch-api.js'
7
8 import DatePicker from '@/components/date-picker/date-picker.vue';
9 import ClarmsUpload from './clarms-plugins-upload.vue';
10 import Vue from 'vue';
11 import { Loading } from 'vant';
12 Vue.use(Loading);
13
14 export default {
15
16 data() {
17 return {
18 uploadFiles: 0,
19 typeCandidates: ['1', '2', '3', '4', '5'], // 候选人所购买的保单可选择的类型
20 typeSelected: [], // 已经选择的类型,
21 images: [],
22 agress: false,
23 data: {
24 contactDate: "",
25 insured : {}
26 },
27 insuredList : [{name : "张三疯"}],
28 contactDateError : false
29 }
30 },
31 components: {
32 DatePicker,
33 ClarmsUpload
34 },
35 computed: {
36 i18n() {
37 return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {};
38 },
39 },
40 methods: {
41 initData() {
42
43 },
44 typeClickHandle(t) {
45 let index = this.typeSelected.indexOf(t);
46 if (index > -1) {
47 this.typeSelected.splice(index, 1);
48 } else {
49 this.typeSelected.push(t);
50 }
51 },
52 uploadSuccess(data){
53 console.log(data);
54 },
55 checkDate(data) {
56 this.contactDateError = data.disable;
57 if (this.contactDateError) {
58
59 }
60 },
61 toContact() {
62 this.$router.push({
63 path: "/custom/service?q=m1"
64 });
65 },
66 },
67 watch: {
68
69 },
70 mounted() {
71 this.initData();
72 },
73 created() { }
74 }
1 @import '@/styles/_support';
2
3 input {
4 padding: 0 2.083333rem;
5 color: #333333;
6 }
7
8 .orange {
9 color: $cOrange;
10 }
11
12 .gray {
13 color: #747474;
14 }
15
16 .submit-btn{
17 background: url("~@assets/images/vhis/vhis-btn.png");
18 background-size: 100% 100%;
19 background-repeat: no-repeat;
20 width: 15rem;
21 height: 2.5rem;
22 line-height: 2.5rem;
23 color: white;
24 font-weight: 600;
25 cursor: pointer;
26 margin: 2.5rem auto;
27 text-align: center;
28 }
29
30 .reservation-container-2 {
31 @extend .bb;
32 border-radius: .666667rem;
33 border: solid .083333rem $cOrange;
34 background-color: #ffffff;
35 padding: 1.666667rem 10rem 2.833333rem 10rem;
36
37 .title {
38 font-size: 1.333333rem;
39 color: $cOrange;
40 text-align: center;
41 margin: 1.666667rem auto 0 auto;
42
43 select {
44 padding: 0 1.25rem ;
45 border: none;
46 border-bottom: .083333rem solid #666666;
47 color: #666666;
48 }
49 }
50
51 .default-mt {
52 margin-top: 2.666667rem;
53 }
54
55 .submit-btn{
56 margin: 2.5rem auto 1rem;
57 }
58
59 .flex-top {
60 display: flex;
61 justify-content: left;
62 align-items: flex-start;
63 }
64
65 .flex-start {
66 display: flex;
67 justify-content: left;
68 align-items: flex-start;
69 flex-wrap: wrap;
70 }
71
72 .check-item {
73 display: flex;
74 align-items: center;
75 margin-right: 2rem;
76 margin-bottom: .833333rem;
77
78 span {
79 margin-left: .833333rem;
80 }
81
82 img {
83 width: 1.666667rem ;
84 }
85 }
86
87 .item-group {
88 display: flex;
89 justify-content: flex-start;
90 align-items: flex-start;
91 flex-wrap: wrap;
92 }
93
94 .ml10 {
95 margin-left: .833333rem;
96 }
97
98 .mr10 {
99 margin-right: .833333rem;
100 }
101
102 .mt20 {
103 margin-top: 1.666667rem;
104 }
105
106 .mt10 {
107 margin-top: .833333rem;
108 }
109
110 .upload-item {
111
112 .tip {
113 color: $cOrange;
114 font-size: 1rem;
115 margin-top: .833333rem ;
116 text-align: center;
117 width: 8.333333rem ;
118 letter-spacing: 1px;
119 }
120
121 .upload-icon-1 {
122 width: 8.333333rem ;
123 height: 8.333333rem ;
124 background: url("~@/assets/images/clarms/icon1.png");
125 background-size: 100% 100%;
126 }
127
128 .upload-icon-2 {
129 width: 8.333333rem ;
130 height: 8.333333rem ;
131 background: url("~@/assets/images/clarms/icon2.png");
132 background-size: 100% 100%;
133 }
134
135 .upload-icon-3 {
136 width: 8.333333rem ;
137 height: 8.333333rem ;
138 background: url("~@/assets/images/clarms/icon3.png");
139 background-size: 100% 100%;
140 }
141
142 .upload-icon-4 {
143 width: 8.333333rem ;
144 height: 8.333333rem ;
145 background: url("~@/assets/images/clarms/icon4.png");
146 background-size: 100% 100%;
147 }
148
149 .upload-icon-5 {
150 width: 8.333333rem ;
151 height: 8.333333rem ;
152 background: url("~@/assets/images/clarms/icon5.png");
153 background-size: 100% 100%;
154 }
155 }
156
157 .bottom-tip {
158 font-size: .833333rem ;
159 display: flex;
160 align-items: center;
161 span {
162 margin-left: 1.3rem;
163 }
164
165 img {
166 width: 1.3rem;
167 }
168 }
169
170 hr {
171 border-top: 1px solid #eee;
172 margin-top: 2.5rem ;
173 }
174
175 .tips {
176 display: flex;
177 justify-content: flex-start;
178 align-items: center;
179
180 img {
181 width: .833333rem;
182 }
183
184 span {
185 font-size: 1rem ;
186 margin-left: .833333rem;
187 color: $cOrange;
188 }
189 }
190
191 .contact {
192 text-align: center;
193 cursor: pointer;
194 color: $cOrange;
195 font-weight: 600;
196 }
197 }
198
199
200 .form {
201 display: flex;
202 justify-content: space-between;
203 flex-wrap: wrap;
204
205 &-name {
206 font-size: 1.333333rem ;
207 font-weight: 600;
208 text-align: left;
209 color: $cOrange;
210 padding-left: 15px;
211 }
212
213 .ipt-date {
214 width: 100%;
215 border: 1px solid $cOrange !important;
216 border-radius: .416667rem ;
217 height: 3rem;
218 align-items: center;
219 padding-left: .833333rem;
220 }
221
222 &-item {
223 width: 50%;
224 display: flex;
225 justify-content: center;
226 padding: 0 $marginSmall;
227 margin-bottom: 1.333333rem;
228
229 .label {
230 display: flex;
231 align-items: center;
232 min-width: 30%;
233 justify-content: flex-start;
234 padding-left: 5px;
235 letter-spacing: .25rem;
236 }
237
238 .ipt-wrap {
239 width: 70%;
240 position: relative;
241
242 // input和下拉
243 .ipt {
244 border: 1px solid $cOrange !important;
245 border-radius: .416667rem ;
246 height: 3rem;
247 display:flex;
248 align-items: center;
249 }
250
251 // 长文本
252 .textarea {
253 min-height: 8.75rem;
254 @extend .bb;
255 padding: .75rem;
256 }
257
258 .down-arrow {
259 z-index: 10;
260 position: absolute;
261 top: 1.3rem;
262 right: 1.2rem;
263 background-image: url('~@/assets/images/reservation/re-down-arrow-2.png');
264 background-size: 100% 100%;
265 width: .633333rem;
266 height: .433333rem;
267 pointer-events: none;
268 cursor: default;
269 }
270 }
271
272 .validator {
273 color: $cOrange;
274 margin-top: 0.5rem;
275 position: absolute;
276 right: 1rem;
277 display: flex;
278 align-items: center;
279 // bottom: 0;
280
281 img {
282 display: inline-block;
283 margin-right: 0.4rem;
284 }
285 }
286 }
287
288
289 &-item-2 {
290 width: 100%;
291 display: flex;
292 justify-content: flex-start;
293 padding: 0 $marginSmall;
294 margin-bottom: 1.333333rem;
295
296 .label {
297 align-items: center;
298 width: 25%;
299 padding-left: 5px;
300 letter-spacing: .25rem;
301
302 .main-label {
303 color: $cOrange;
304 }
305 }
306
307 .date-container {
308 width: 60%;
309 position: relative;
310 }
311
312 .value {
313 width: 75%;
314 position: relative;
315 .ipt-wrap {
316
317 // input和下拉
318 .ipt {
319 border: 1px solid $cOrange !important;
320 border-radius: .416667rem ;
321 height: 3rem;
322 display:flex;
323 align-items: center;
324 }
325
326
327 .ipt2 {
328 width: 100%;
329 border-bottom: 1px solid #ccc;
330 height: 3rem;
331 display:flex;
332 align-items: center;
333 margin-bottom: .833333rem ;
334 }
335
336 // 长文本
337 .textarea {
338 min-height: 8.75rem;
339 @extend .bb;
340 padding: .75rem;
341 }
342
343 .down-arrow {
344 z-index: 10;
345 position: absolute;
346 top: 1.3rem;
347 right: 1.2rem;
348 background-image: url('~@/assets/images/reservation/re-down-arrow-2.png');
349 background-size: 100% 100%;
350 width: .633333rem;
351 height: .433333rem;
352 pointer-events: none;
353 cursor: default;
354 }
355 }
356 }
357 }
358 }
359
360
361 .notice {
362 margin-top: 4rem;
363 @extend .bb;
364 padding: 0 1rem;
365
366 &-item {
367 position: relative;
368 line-height: 2;
369 letter-spacing: 1.2px;
370 margin-bottom: 1rem;
371
372 &-icon {
373 width: 1.166667rem;
374 position: absolute;
375 top: .6rem;
376 }
377 }
378 }
379
380 @media (max-width: 1000px) {
381 .reservation-container-2 {
382 padding: 1.666667rem 2rem 2.833333rem 2rem;
383 }
384
385 .form {
386 &-item {
387 width: 100%;
388 .label {
389 min-width: 30%;
390 }
391
392 .ipt-wrap {
393 width: 70%;
394 }
395 }
396
397 &-item-2 {
398 .date-container {
399 width: 80%;
400 }
401 }
402 }
403 }
404
405 @media (max-width: 600px) {
406 .form {
407 &-item {
408 width: 100%;
409
410 .label {
411 min-width: 30%;
412 }
413
414 .ipt-wrap {
415 width: 70%;
416 }
417 }
418
419 &-item2 {
420 display: block;
421
422 .ipt-wrap {
423 margin: 0;
424 }
425 }
426
427 &-item-2 {
428 .label {
429 width: 30%;
430 }
431 .value {
432 width: 70%;
433 }
434
435 .date-container {
436 width: 100%;
437 }
438 }
439
440 &-item3 {
441 display: block;
442
443 .ipt-wrap {
444 margin: 0;
445 width: 100%;
446 }
447 }
448 }
449
450 .notice {
451 margin: 0;
452 }
453 }
454
455
456 @media (max-width: 400px) {
457 .reservation-container-2 {
458 padding: 1.666667rem 1rem;
459 }
460 }
...\ No newline at end of file ...\ No newline at end of file
1 <template>
2
3 <div class="reservation-container-2">
4 <div class="title default-mt">
5 <span>{{$t('clarms.step2.label1')}}</span>
6 <el-select v-model="data.insured">
7 <el-option v-for="(item,index) in insuredList" :key="index" :label="item.name" :value="item.name">
8 </el-option>
9 </el-select>
10 <span>{{$t('clarms.step2.label2')}}</span>
11 </div>
12 <hr>
13 <div class="gird-g form default-mt">
14 <div class="pure-u-1 form-item-2">
15 <div class="label">
16 <div class="main-label">
17 {{$t('clarms.step2.label3')}}
18 </div>
19 <div class="sub-label">{{$t('clarms.step2.label4')}}</div>
20 </div>
21 <div class="value">
22 <div class="ipt-wrap item-group">
23 <div class="check-item pointer" v-if="typeCandidates.indexOf('1') > -1" @click="typeClickHandle('1')">
24 <img v-if="typeSelected.indexOf('1') > -1" src="@/assets/images/clarms/checked.png">
25 <img v-else src="@/assets/images/clarms/uncheck.png">
26 <span>{{$t('clarms.step2.op1')}}</span>
27 </div>
28 <div class="check-item pointer" v-if="typeCandidates.indexOf('2') > -1" @click="typeClickHandle('2')">
29 <img v-if="typeSelected.indexOf('2') > -1" src="@/assets/images/clarms/checked.png">
30 <img v-else src="@/assets/images/clarms/uncheck.png">
31 <span>{{$t('clarms.step2.op2')}}</span>
32 </div>
33 <div class="check-item pointer" v-if="typeCandidates.indexOf('3') > -1" @click="typeClickHandle('3')">
34 <img v-if="typeSelected.indexOf('3') > -1" src="@/assets/images/clarms/checked.png">
35 <img v-else src="@/assets/images/clarms/uncheck.png">
36 <span>{{$t('clarms.step2.op3')}}</span>
37 </div>
38 <div class="check-item pointer" v-if="typeCandidates.indexOf('4') > -1" @click="typeClickHandle('4')">
39 <img v-if="typeSelected.indexOf('4') > -1" src="@/assets/images/clarms/checked.png">
40 <img v-else src="@/assets/images/clarms/uncheck.png">
41 <span>{{$t('clarms.step2.op4')}}</span>
42 </div>
43 <div class="check-item pointer" v-if="typeCandidates.indexOf('5') > -1" @click="typeClickHandle('5')">
44 <img v-if="typeSelected.indexOf('5') > -1" src="@/assets/images/clarms/checked.png">
45 <img v-else src="@/assets/images/clarms/uncheck.png">
46 <span>{{$t('clarms.step2.op5')}}</span>
47 </div>
48 </div>
49 <div class="tips"><img src="@/assets/images/clarms/impor.png"> <span>{{$t('clarms.step2.label5')}}</span></div>
50 </div>
51 </div>
52
53 <div class="pure-u-1 form-item-2 mt20">
54 <div class="label">
55 <div class="main-label">
56 {{$t('clarms.step2.label6')}}
57 </div>
58 <div class="sub-label">{{$t('clarms.step2.label7')}} </div>
59 </div>
60 <div class="value">
61 <div>
62 <div class="ipt-wrap">
63 <input class="ipt2" type="number">
64 </div>
65 </div>
66 <div class="tips"><img src="@/assets/images/clarms/impor.png"> <span>{{$t('clarms.step2.label8')}}</span></div>
67 </div>
68 </div>
69
70 <div class="pure-u-1 form-item-2 mt20">
71 <div class="label">
72 <div class="main-label">
73 {{$t('clarms.step2.label9')}}
74 </div>
75 </div>
76 <div class="value">
77 <div class="ipt-wrap date-container">
78 <div class="down-arrow"></div>
79 <date-picker class="ipt-date" v-model="data.contactDate" :filtModel="['future']" :check="checkDate" :cusStyle="{border:'none !important','background-color':'transparent !important',height:'3rem', 'color':'#f05a23','font-weight':'600'}"></date-picker>
80 </div>
81 </div>
82 </div>
83
84 <div class="pure-u-1 form-item-2 mt20">
85 <div class="label">
86 <div class="main-label">
87 {{$t('clarms.step2.label10')}}
88 </div>
89 </div>
90 <div class="value">
91 <clarms-upload :icon="require('@/assets/images/clarms/icon1.png')" :options="{name:$t('clarms.step2.label11'),imageTypeID:'HT41',imageMainTypeID:'HT11',imageFileName:'医疗收费票据/医疗收据'}" @success="uploadSuccess"></clarms-upload>
92 <clarms-upload class="mt20" :icon="require('@/assets/images/clarms/icon2.png')" :options="{name:$t('clarms.step2.label12'),imageTypeID:'HT26',imageMainTypeID:'HT06',imageFileName:'住院病历'}"></clarms-upload>
93 </div>
94 </div>
95
96 <div class="pure-u-1 form-item-2 mt20">
97 <div class="label">
98 <div class="main-label">
99 {{$t('clarms.step2.label13')}}
100 </div>
101 </div>
102 <div class="value">
103 <clarms-upload :icon="require('@/assets/images/clarms/icon3.png')" :options="{name:$t('clarms.step2.label14'),imageTypeID:'HT29',imageMainTypeID:'HT06',imageFileName:'检查报告'}"></clarms-upload>
104 <clarms-upload class="mt20" :icon="require('@/assets/images/clarms/icon4.png')" :options="{name:$t('clarms.step2.label15'),imageTypeID:'HT34',imageMainTypeID:'HT08',imageFileName:'银行账户'}"></clarms-upload>
105 <clarms-upload class="mt20" :icon="require('@/assets/images/clarms/icon5.png')" :options="{name:$t('clarms.step2.label16'),imageTypeID:'HT16',imageMainTypeID:'HT03',imageFileName:'警察报告/证明'}"></clarms-upload>
106 </div>
107 </div>
108 </div>
109 <hr>
110 <div class="bottom-tip orange mt20">{{$t('clarms.step2.label17')}}</div>
111 <div class="bottom-tip gray mt10">{{$t('clarms.step2.tip1')}}</div>
112
113 <div class="bottom-tip orange mt20">{{$t('clarms.step2.label18')}}</div>
114 <div class="bottom-tip gray mt10">{{$t('clarms.step2.tip2')}}</div>
115 <div class="bottom-tip gray mt10">{{$t('clarms.step2.tip3')}}</div>
116
117 <div class="bottom-tip orange mt10 pointer" @click="agress = !agress">
118 <img v-if="agress" src="@/assets/images/clarms/checked.png">
119 <img v-else src="@/assets/images/clarms/uncheck.png">
120 <span>{{$t('clarms.step2.tip4')}}</span>
121 </div>
122
123 <div class="submit-btn">{{$t('clarms.step2.btn')}}</div>
124
125 <div class="contact" @click="toContact">{{$t('clarms.step2.contact')}}</div>
126 </div>
127 </template>
128
129 <script src="./clarms-plugins-material.js"></script>
130 <style lang="scss" scoped>
131 @import "./clarms-plugins-material.scss";
132 </style>
...\ No newline at end of file ...\ No newline at end of file
...@@ -113,6 +113,12 @@ ...@@ -113,6 +113,12 @@
113 height: 2.5rem ; 113 height: 2.5rem ;
114 } 114 }
115 } 115 }
116
117 .mask-bg-2 {
118 background-color: rgba($color: #000000, $alpha: .5) !important;
119 color: white !important;
120 font-size: 1rem;
121 }
116 } 122 }
117 123
118 .clarms-upload-tips { 124 .clarms-upload-tips {
......
...@@ -20,14 +20,18 @@ ...@@ -20,14 +20,18 @@
20 <div class="clarms-img-item-plugin" @mouseover="onOverHandler($event,item,index)" v-for="(item,index) in images" :key="index"> 20 <div class="clarms-img-item-plugin" @mouseover="onOverHandler($event,item,index)" v-for="(item,index) in images" :key="index">
21 <div class="clarms-img-item"> 21 <div class="clarms-img-item">
22 <img class="clarms-img-cont" :src="item.data"> 22 <img class="clarms-img-cont" :src="item.data">
23 <div class="clarms-img-mask" v-if="item.showMask"> 23 <div class="clarms-img-mask" v-if="item.showMask && !item.intervial && !item.err">
24 <img src="@/assets/images/clarms/close.png"> 24 <img src="@/assets/images/clarms/close.png">
25 </div> 25 </div>
26 <div class="clarms-img-mask" v-if="item.showMask" @mouseout="onOutHandler($event,item,index)" @click="removeItem(index)"> 26 <div class="clarms-img-mask" v-if="item.showMask && !item.intervial && !item.err" @mouseout="onOutHandler($event,item,index)" @click="removeItem(index)">
27 </div>
28 <div class="clarms-img-mask mask-bg-2" v-if="item.intervial">
29 Uploading{{item.tips}}
30 </div>
31 <div class="clarms-img-mask mask-bg-2" v-if="item.err" @click="removeItem(index)">
32 Uploading{{item.err}}
27 </div> 33 </div>
28 </div> 34 </div>
29 <div class="clarms-upload-tips" v-if="!item.cacheKey && !item.err">Uploading{{item.tips}}</div>
30 <div class="clarms-upload-tips" v-if="item.err">{{item.err}}</div>
31 </div> 35 </div>
32 </div> 36 </div>
33 <div class="clarms-empty-line"></div> 37 <div class="clarms-empty-line"></div>
...@@ -38,7 +42,7 @@ ...@@ -38,7 +42,7 @@
38 </template> 42 </template>
39 43
40 44
41 <script src="./clarms-upload.js"></script> 45 <script src="./clarms-plugins-upload.js"></script>
42 <style lang="scss" scoped> 46 <style lang="scss" scoped>
43 @import "./clarms-upload.scss"; 47 @import "./clarms-plugins-upload.scss";
44 </style> 48 </style>
...\ No newline at end of file ...\ No newline at end of file
......
1 import api from '@/api/api'
2 import {
3 httpGet,
4 httpPost,
5 formdata
6 } from '@/api/fetch-api.js'
7
8 import Vue from 'vue';
9 import DatePicker from '@/components/date-picker/date-picker.vue';
10 import { Loading } from 'vant';
11 Vue.use(Loading);
12
13 export default {
14 data() {
15 return {
16 data : {},
17 reservationTypes: []
18 }
19 },
20 components: {
21 DatePicker
22 },
23 computed: {
24 i18n() {
25 return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {};
26 },
27 },
28 methods: {
29 initData() {
30
31 },
32 checkDate(){
33
34 }
35 },
36 watch: {
37
38 },
39 mounted() {
40 this.initData();
41 },
42 created() { }
43 }
1 @import '@/styles/_support';
2
3 input {
4 padding: 0 2.083333rem;
5 color: #333333;
6 }
7
8 .orange {
9 color: $cOrange;
10 }
11
12 .gray {
13 color: #747474;
14 }
15
16 .submit-btn{
17 background: url("~@assets/images/vhis/vhis-btn.png");
18 background-size: 100% 100%;
19 background-repeat: no-repeat;
20 width: 15rem;
21 height: 2.5rem;
22 line-height: 2.5rem;
23 color: white;
24 font-weight: 600;
25 cursor: pointer;
26 margin: 2.5rem auto;
27 text-align: center;
28 }
29
30 .reservation-container {
31 @extend .bb;
32 border-radius: .666667rem;
33 border: solid .083333rem $cOrange;
34 background-color: #ffffff;
35 padding: 2.666667rem 10rem 2.833333rem 10rem;
36
37 .title {
38 font-size: 1.333333rem;
39 color: $cOrange;
40 text-align: center;
41 margin: 1.666667rem auto 0 auto;
42
43 span {
44 padding: 0 .166667rem;
45 }
46 }
47
48 .default-mt {
49 margin-top: 2.666667rem;
50 }
51
52 .flex-top {
53 display: flex;
54 justify-content: left;
55 align-items: flex-start;
56 }
57
58 .flex-start {
59 display: flex;
60 justify-content: left;
61 align-items: flex-start;
62 flex-wrap: wrap;
63 }
64
65 .check-item {
66 display: flex;
67 align-items: center;
68 span {
69 margin-left: .833333rem;
70 }
71 }
72 }
73
74
75
76
77 .form {
78 display: flex;
79 justify-content: space-between;
80 flex-wrap: wrap;
81
82 &-name {
83 font-size: 1.333333rem ;
84 font-weight: 600;
85 text-align: left;
86 color: $cOrange;
87 padding-left: 15px;
88 }
89
90 .ipt-date {
91 width: 100%;
92 border: 1px solid $cOrange !important;
93 border-radius: .416667rem ;
94 height: 3rem;
95 align-items: center;
96 padding-left: .833333rem;
97 }
98
99 &-item {
100 width: 50%;
101 display: flex;
102 justify-content: center;
103 padding: 0 $marginSmall;
104 margin-bottom: 1.333333rem;
105
106 .label {
107 display: flex;
108 align-items: center;
109 min-width: 30%;
110 justify-content: flex-start;
111 padding-left: 5px;
112 letter-spacing: .25rem;
113 }
114
115 .ipt-wrap {
116 width: 70%;
117 position: relative;
118
119 // input和下拉
120 .ipt {
121 border: 1px solid $cOrange !important;
122 border-radius: .416667rem ;
123 height: 3rem;
124 display:flex;
125 align-items: center;
126 }
127
128 // 长文本
129 .textarea {
130 min-height: 8.75rem;
131 @extend .bb;
132 padding: .75rem;
133 }
134
135 .down-arrow {
136 z-index: 10;
137 position: absolute;
138 top: 1.3rem;
139 right: 1.2rem;
140 background-image: url('~@/assets/images/reservation/re-down-arrow-2.png');
141 background-size: 100% 100%;
142 width: .633333rem;
143 height: .433333rem;
144 pointer-events: none;
145 cursor: default;
146 }
147 }
148
149 .validator {
150 color: $cOrange;
151 margin-top: 0.5rem;
152 position: absolute;
153 right: 1rem;
154 display: flex;
155 align-items: center;
156 // bottom: 0;
157
158 img {
159 display: inline-block;
160 margin-right: 0.4rem;
161 }
162 }
163 }
164
165
166 &-item-2 {
167 width: 100%;
168 display: flex;
169 justify-content: flex-start;
170 padding: 0 $marginSmall;
171 margin-bottom: 1.333333rem;
172
173 .label {
174 align-items: center;
175 width: 25%;
176 padding-left: 5px;
177 letter-spacing: .25rem;
178
179 .main-label {
180 color: $cOrange;
181 }
182 }
183
184 .date-container {
185 width: 60%;
186 position: relative;
187 }
188
189 .value {
190 width: 75%;
191 position: relative;
192 .ipt-wrap {
193
194 // input和下拉
195 .ipt {
196 border: 1px solid $cOrange !important;
197 border-radius: .416667rem ;
198 height: 3rem;
199 display:flex;
200 align-items: center;
201 }
202
203
204 .ipt2 {
205 width: 100%;
206 border-bottom: 1px solid #ccc;
207 height: 3rem;
208 display:flex;
209 align-items: center;
210 margin-bottom: .833333rem ;
211 }
212
213 // 长文本
214 .textarea {
215 min-height: 8.75rem;
216 @extend .bb;
217 padding: .75rem;
218 }
219
220 .down-arrow {
221 z-index: 10;
222 position: absolute;
223 top: 1.3rem;
224 right: 1.2rem;
225 background-image: url('~@/assets/images/reservation/re-down-arrow-2.png');
226 background-size: 100% 100%;
227 width: .633333rem;
228 height: .433333rem;
229 pointer-events: none;
230 cursor: default;
231 }
232 }
233 }
234 }
235 }
236
237
238 .notice {
239 margin-top: 4rem;
240 @extend .bb;
241 padding: 0 1rem;
242
243 &-item {
244 position: relative;
245 line-height: 2;
246 letter-spacing: 1.2px;
247 margin-bottom: 1rem;
248
249 &-icon {
250 width: 1.166667rem;
251 position: absolute;
252 top: .6rem;
253 }
254 }
255 }
256
257
258 @media (max-width: 1200px) {
259 .mobile-margin {
260 margin-top: 2.5rem;
261 }
262 }
263
264 @media (max-width: 1000px) {
265
266 .form {
267 &-item {
268 width: 100%;
269 .label {
270 min-width: 30%;
271 }
272
273 .ipt-wrap {
274 width: 70%;
275 }
276 }
277
278 &-item-2 {
279 .date-container {
280 width: 80%;
281 }
282 }
283 }
284 }
285
286 @media (max-width: 600px) {
287 .reservation-container {
288 padding: 2.666667rem 2rem 2.833333rem 2rem;
289 }
290
291 .form {
292 &-item {
293 width: 100%;
294
295 .label {
296 min-width: 30%;
297 }
298
299 .ipt-wrap {
300 width: 70%;
301 }
302 }
303
304 &-item2 {
305 display: block;
306
307 .ipt-wrap {
308 margin: 0;
309 }
310 }
311
312 &-item-2 {
313 .label {
314 width: 30%;
315 }
316 .value {
317 width: 70%;
318 }
319
320 .date-container {
321 width: 100%;
322 }
323 }
324
325 &-item3 {
326 display: block;
327
328 .ipt-wrap {
329 margin: 0;
330 width: 100%;
331 }
332 }
333 }
334
335 .notice {
336 margin: 0;
337 }
338 }
339
1 <template>
2 <div class="reservation-container">
3 <div class="title"><u><span class="pointer">{{$t('clarms.step1.register')}}</span>/<span class="pointer">{{$t('clarms.step1.login')}}</span></u>{{$t('clarms.step1.t1')}}</div>
4 <div class="form-name default-mt"> {{$t('clarms.step1.label0')}}</div>
5 <div class="gird-g form default-mt">
6 <div class="pure-u-1 pure-u-md-1-2 form-item">
7 <div class="label">
8 {{$t('clarms.step1.label1')}}
9 </div>
10 <div class="ipt-wrap">
11 <input class="ipt" type="text" v-model="data.name">
12 </div>
13 </div>
14
15 <div class="pure-u-1 pure-u-md-1-2 form-item">
16 <div class="label">
17 {{$t('clarms.step1.label2')}}
18 </div>
19 <div class="ipt-wrap">
20 <input class="ipt" type="text" v-model="data.name">
21 </div>
22 </div>
23
24 <div class="pure-u-1 pure-u-md-1-2 form-item">
25 <div class="label">
26 {{$t('clarms.step1.label3')}}
27 </div>
28 <div class="ipt-wrap">
29 <div class="down-arrow"></div>
30 <select class="ipt" v-model="data.reservationType">
31 <option v-for="(item,index) in reservationTypes" :key="index" :value="item.value">{{item.name}}</option>
32 </select>
33 </div>
34 </div>
35
36 <div class="pure-u-1 pure-u-md-1-2 form-item">
37 <div class="label">
38 {{$t('clarms.step1.label4')}}
39 </div>
40 <div class="ipt-wrap">
41 <input class="ipt" type="text" v-model="data.name">
42 </div>
43 </div>
44
45 <div class="pure-u-1 pure-u-md-1-2 form-item">
46 <div class="label">
47 {{$t('clarms.step1.label5')}}
48 </div>
49 <div class="ipt-wrap">
50 <div class="down-arrow"></div>
51 <date-picker class="ipt-date" v-model="data.contactDate" :filtModel="['future']" :check="checkDate" :cusStyle="{border:'none !important','background-color':'transparent !important',height:'3rem', 'color':'#f05a23','font-weight':'600'}"></date-picker>
52 </div>
53 </div>
54 </div>
55 <div class="submit-btn">{{$t('clarms.step1.btn')}}</div>
56 </div>
57 </template>
58
59 <script src="./clarms-plugins-verifyform.js"></script>
60 <style lang="scss" scoped>
61 @import "./clarms-plugins-verifyform.scss";
62 </style>
...\ No newline at end of file ...\ No newline at end of file
...@@ -4,11 +4,8 @@ import { ...@@ -4,11 +4,8 @@ import {
4 httpPost 4 httpPost
5 } from '@/api/fetch-api.js' 5 } from '@/api/fetch-api.js'
6 6
7 import DatePicker from '@/components/date-picker/date-picker.vue'; 7 import ClarmsVerifyForm from './clarms-plugins-verifyform.vue';
8 import ClarmsUpload from './clarms-upload.vue'; 8 import ClarmsMaterial from './clarms-plugins-material.vue';
9 import Vue from 'vue';
10 import { Loading } from 'vant';
11 Vue.use(Loading);
12 9
13 // 用户没有登录 10 // 用户没有登录
14 // 校验成功 11 // 校验成功
...@@ -23,8 +20,6 @@ export default { ...@@ -23,8 +20,6 @@ export default {
23 data() { 20 data() {
24 return { 21 return {
25 step: 2, // 1是表单；2是报案页面 22 step: 2, // 1是表单；2是报案页面
26 typeSelected: [], // 已经选择的类型,
27 typeCandidates: ['1', '2', '3', '4', '5'], // 候选人所购买的保单可选择的类型
28 agress: false, 23 agress: false,
29 data: { 24 data: {
30 contactDate: "" 25 contactDate: ""
...@@ -33,8 +28,8 @@ export default { ...@@ -33,8 +28,8 @@ export default {
33 } 28 }
34 }, 29 },
35 components: { 30 components: {
36 DatePicker, 31 ClarmsVerifyForm,
37 ClarmsUpload 32 ClarmsMaterial
38 }, 33 },
39 computed: { 34 computed: {
40 i18n() { 35 i18n() {
...@@ -45,28 +40,6 @@ export default { ...@@ -45,28 +40,6 @@ export default {
45 initData() { 40 initData() {
46 41
47 }, 42 },
48 uploadSuccess(data){
49 console.log(data);
50 },
51 checkDate(data) {
52 this.contactDateError = data.disable;
53 if (this.contactDateError) {
54
55 }
56 },
57 typeClickHandle(t) {
58 let index = this.typeSelected.indexOf(t);
59 if (index > -1) {
60 this.typeSelected.splice(index, 1);
61 } else {
62 this.typeSelected.push(t);
63 }
64 },
65 toContact() {
66 this.$router.push({
67 path: "/custom/service?q=m1"
68 });
69 },
70 }, 43 },
71 watch: { 44 watch: {
72 45
......
1 1
2 <template> 2 <template>
3 <div class="mobile-margin"> 3 <div class="mobile-margin">
4 <div class="reservation-container" v-if="step == 1">
5 <div class="title"><u><span class="pointer">{{$t('clarms.step1.register')}}</span>/<span class="pointer">{{$t('clarms.step1.login')}}</span></u>{{$t('clarms.step1.t1')}}</div>
6 <div class="form-name default-mt"> {{$t('clarms.step1.label0')}}</div>
7 <div class="gird-g form default-mt">
8 <div class="pure-u-1 pure-u-md-1-2 form-item">
9 <div class="label">
10 {{$t('clarms.step1.label1')}}
11 </div>
12 <div class="ipt-wrap">
13 <input class="ipt" type="text" v-model="data.name">
14 </div>
15 </div>
16 4
17 <div class="pure-u-1 pure-u-md-1-2 form-item"> 5 <template v-if="step == 1">
18 <div class="label"> 6 <clarms-verify-form></clarms-verify-form>
19 {{$t('clarms.step1.label2')}} 7 </template>
20 </div>
21 <div class="ipt-wrap">
22 <input class="ipt" type="text" v-model="data.name">
23 </div>
24 </div>
25 8
26 <div class="pure-u-1 pure-u-md-1-2 form-item"> 9 <template v-if="step == 2">
27 <div class="label"> 10 <clarms-material></clarms-material>
28 {{$t('clarms.step1.label3')}} 11 </template>
29 </div>
30 <div class="ipt-wrap">
31 <div class="down-arrow"></div>
32 <select class="ipt" v-model="data.reservationType">
33 <option v-for="(item,index) in reservationTypes" :key="index" :value="item.value">{{item.name}}</option>
34 </select>
35 </div>
36 </div>
37
38 <div class="pure-u-1 pure-u-md-1-2 form-item">
39 <div class="label">
40 {{$t('clarms.step1.label4')}}
41 </div>
42 <div class="ipt-wrap">
43 <input class="ipt" type="text" v-model="data.name">
44 </div>
45 </div>
46
47 <div class="pure-u-1 pure-u-md-1-2 form-item">
48 <div class="label">
49 {{$t('clarms.step1.label5')}}
50 </div>
51 <div class="ipt-wrap">
52 <div class="down-arrow"></div>
53 <date-picker class="ipt-date" v-model="data.contactDate" :filtModel="['future']" :check="checkDate" :cusStyle="{border:'none !important','background-color':'transparent !important',height:'3rem', 'color':'#f05a23','font-weight':'600'}"></date-picker>
54 </div>
55 </div>
56 </div>
57 <div class="submit-btn">{{$t('clarms.step1.btn')}}</div>
58 </div>
59
60 <div class="reservation-container-2" v-if="step == 2">
61 <div class="title default-mt">
62 <span>{{$t('clarms.step2.label1')}}</span>
63 <select>
64 <option>陈小明</option>
65 </select>
66 <span>{{$t('clarms.step2.label2')}}</span>
67 </div>
68 <hr>
69 <div class="gird-g form default-mt">
70 <div class="pure-u-1 form-item-2">
71 <div class="label">
72 <div class="main-label">
73 {{$t('clarms.step2.label3')}}
74 </div>
75 <div class="sub-label">{{$t('clarms.step2.label4')}}</div>
76 </div>
77 <div class="value">
78 <div class="ipt-wrap item-group">
79 <div class="check-item pointer" v-if="typeCandidates.indexOf('1') > -1" @click="typeClickHandle('1')">
80 <img v-if="typeSelected.indexOf('1') > -1" src="@/assets/images/clarms/checked.png">
81 <img v-else src="@/assets/images/clarms/uncheck.png">
82 <span>{{$t('clarms.step2.op1')}}</span>
83 </div>
84 <div class="check-item pointer" v-if="typeCandidates.indexOf('2') > -1" @click="typeClickHandle('2')">
85 <img v-if="typeSelected.indexOf('2') > -1" src="@/assets/images/clarms/checked.png">
86 <img v-else src="@/assets/images/clarms/uncheck.png">
87 <span>{{$t('clarms.step2.op2')}}</span>
88 </div>
89 <div class="check-item pointer" v-if="typeCandidates.indexOf('3') > -1" @click="typeClickHandle('3')">
90 <img v-if="typeSelected.indexOf('3') > -1" src="@/assets/images/clarms/checked.png">
91 <img v-else src="@/assets/images/clarms/uncheck.png">
92 <span>{{$t('clarms.step2.op3')}}</span>
93 </div>
94 <div class="check-item pointer" v-if="typeCandidates.indexOf('4') > -1" @click="typeClickHandle('4')">
95 <img v-if="typeSelected.indexOf('4') > -1" src="@/assets/images/clarms/checked.png">
96 <img v-else src="@/assets/images/clarms/uncheck.png">
97 <span>{{$t('clarms.step2.op4')}}</span>
98 </div>
99 <div class="check-item pointer" v-if="typeCandidates.indexOf('5') > -1" @click="typeClickHandle('5')">
100 <img v-if="typeSelected.indexOf('5') > -1" src="@/assets/images/clarms/checked.png">
101 <img v-else src="@/assets/images/clarms/uncheck.png">
102 <span>{{$t('clarms.step2.op5')}}</span>
103 </div>
104 </div>
105 <div class="tips"><img src="@/assets/images/clarms/impor.png"> <span>{{$t('clarms.step2.label5')}}</span></div>
106 </div>
107 </div>
108
109 <div class="pure-u-1 form-item-2 mt20">
110 <div class="label">
111 <div class="main-label">
112 {{$t('clarms.step2.label6')}}
113 </div>
114 <div class="sub-label">{{$t('clarms.step2.label7')}} </div>
115 </div>
116 <div class="value">
117 <div>
118 <div class="ipt-wrap">
119 <input class="ipt2" type="number">
120 </div>
121 </div>
122 <div class="tips"><img src="@/assets/images/clarms/impor.png"> <span>{{$t('clarms.step2.label8')}}</span></div>
123 </div>
124 </div>
125
126 <div class="pure-u-1 form-item-2 mt20">
127 <div class="label">
128 <div class="main-label">
129 {{$t('clarms.step2.label9')}}
130 </div>
131 </div>
132 <div class="value">
133 <div class="ipt-wrap date-container">
134 <div class="down-arrow"></div>
135 <date-picker class="ipt-date" v-model="data.contactDate" :filtModel="['future']" :check="checkDate" :cusStyle="{border:'none !important','background-color':'transparent !important',height:'3rem', 'color':'#f05a23','font-weight':'600'}"></date-picker>
136 </div>
137 </div>
138 </div>
139
140 <div class="pure-u-1 form-item-2 mt20">
141 <div class="label">
142 <div class="main-label">
143 {{$t('clarms.step2.label10')}}
144 </div>
145 </div>
146 <div class="value">
147 <clarms-upload :icon="require('@/assets/images/clarms/icon1.png')" :options="{name:$t('clarms.step2.label11'),imageTypeID:'HT41',imageMainTypeID:'HT11',imageFileName:'医疗收费票据/医疗收据'}" @success="uploadSuccess"></clarms-upload>
148 <clarms-upload class="mt20" :icon="require('@/assets/images/clarms/icon2.png')" :options="{name:$t('clarms.step2.label12'),imageTypeID:'HT26',imageMainTypeID:'HT06',imageFileName:'住院病历'}"></clarms-upload>
149 </div>
150 </div>
151
152
153 <div class="pure-u-1 form-item-2 mt20">
154 <div class="label">
155 <div class="main-label">
156 {{$t('clarms.step2.label13')}}
157 </div>
158 </div>
159 <div class="value">
160 <clarms-upload :icon="require('@/assets/images/clarms/icon3.png')" :options="{name:$t('clarms.step2.label14'),imageTypeID:'HT29',imageMainTypeID:'HT06',imageFileName:'检查报告'}"></clarms-upload>
161 <clarms-upload class="mt20" :icon="require('@/assets/images/clarms/icon4.png')" :options="{name:$t('clarms.step2.label15'),imageTypeID:'HT34',imageMainTypeID:'HT08',imageFileName:'银行账户'}"></clarms-upload>
162 <clarms-upload class="mt20" :icon="require('@/assets/images/clarms/icon5.png')" :options="{name:$t('clarms.step2.label16'),imageTypeID:'HT16',imageMainTypeID:'HT03',imageFileName:'警察报告/证明'}"></clarms-upload>
163 </div>
164 </div>
165 </div>
166 <hr>
167 <div class="bottom-tip orange mt20">{{$t('clarms.step2.label17')}}</div>
168 <div class="bottom-tip gray mt10">{{$t('clarms.step2.tip1')}}</div>
169
170 <div class="bottom-tip orange mt20">{{$t('clarms.step2.label18')}}</div>
171 <div class="bottom-tip gray mt10">{{$t('clarms.step2.tip2')}}</div>
172 <div class="bottom-tip gray mt10">{{$t('clarms.step2.tip3')}}</div>
173
174 <div class="bottom-tip orange mt10 pointer" @click="agress = !agress">
175 <img v-if="agress" src="@/assets/images/clarms/checked.png">
176 <img v-else src="@/assets/images/clarms/uncheck.png">
177 <span>{{$t('clarms.step2.tip4')}}</span>
178 </div>
179
180 <div class="submit-btn">{{$t('clarms.step2.btn')}}</div>
181
182 <div class="contact" @click="toContact">{{$t('clarms.step2.contact')}}</div>
183 </div>
184 </div> 12 </div>
185 </template> 13 </template>
186 14
......