Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
8da1eaf7 by joe
Options

简易理赔

1 parent 34259a6a
Inline Side-by-side
Showing 18 changed files with 920 additions and 9 deletions
...@@ -831,5 +831,50 @@ module.exports = { ...@@ -831,5 +831,50 @@ module.exports = {
831 tip2: "hereby confirmed that", 831 tip2: "hereby confirmed that",
832 tip3: "collection of the above policies", 832 tip3: "collection of the above policies",
833 tip4: "I would like to contact customer service" 833 tip4: "I would like to contact customer service"
834 },
835 clarms: {
836 step1: {
837 register: "Register",
838 login: "Login",
839 t1: "Ping An UniAccount that we can provide you with better services",
840 label0: "Claimant information",
841 label1: "Last name",
842 label2: "First name",
843 label3: "Document type",
844 label4: "Identification Number",
845 label5: "Birthday",
846 btn: "Confirm"
847 },
848 step2: {
849 label1: "I want to",
850 label2: "Claim for compensation",
851 label3: "Application type",
852 label4: "(Multiple choice)",
853 op1: "Accident medical treatment",
854 op2: "Accidental death",
855 op3: "Disease medical treatment",
856 op4: "Death of illness",
857 op5: "Major diseases",
858 label5: "Please fill in the amount of this visit.",
859 label6: "Amount of this visit",
860 label7: "(HKD)",
861 label8: "If you pay non Hong Kong dollars at the time of treatment, please convert it into Hong Kong dollars and fill in the amount.",
862 label9: "Accident time",
863 label10: "Must transmit information",
864 label11: "Expense receipt and list",
865 label12: "Medical records",
866 label13: "Biography data",
867 label14: "Hospital diagnosis report",
868 label15: "Account information of claimant",
869 label16: "Other",
870 label17: "Statement of authorization:",
871 label18: "Statement of personal data collection:",
872 btn: "Confirm",
873 contact: "I would like to contact customer service",
874 tip1: "I / we hereby authorize (1) any employer, registered western medicine, hospital, clinic, insurance company, bank, government agency, or other institution, organization or person, who knows or holds any record of the policyholder / insured, to provide, issue and transfer such information to Ping An Life Insurance (Hong Kong) Co., Ltd. (2) your company or any The doctor or laboratory designated by him may apply for medical assessment and test on behalf of the policyholder / insured for the purpose of examining the health status of the policyholder / insured. This power of attorney shall be binding on the successors and assignors of the policyholder / insured, and shall remain in force even if the policyholder / Insured dies or is incapacitated.",
875 tip2: "I / we confirm that I / we have read and understood the personal data collection statement (this statement) of Ping An Life Insurance (Hong Kong) Co., Ltd.",
876 tip3: "I / we hereby confirm and agree that you use and transfer my / our personal data in accordance with this statement, including the use and provision of my / our personal data for direct promotion purposes. I / we confirm and agree to transfer my / our personal data outside Hong Kong to the type of transferee described in this statement for the purposes described in this statement.",
877 tip4: "I / we hereby declare that all the above statements and information, to the best of my / our knowledge and belief, are true and complete."
878 }
834 } 879 }
835 } 880 }
......
...@@ -826,5 +826,50 @@ module.exports = { ...@@ -826,5 +826,50 @@ module.exports = {
826 tip2: "現確認於", 826 tip2: "現確認於",
827 tip3: "收托上述保單", 827 tip3: "收托上述保單",
828 tip4: "我想聯絡客服" 828 tip4: "我想聯絡客服"
829 },
830 clarms: {
831 step1: {
832 register: "註冊",
833 login: "登入",
834 t1: "一賬通以便我們為您提供更好的服務",
835 label0: "索償人資訊",
836 label1: "姓",
837 label2: "名",
838 label3: "證件類型",
839 label4: "證件號碼",
840 label5: "出生日期",
841 btn: "立即申請"
842 },
843 step2: {
844 label1: "我想為",
845 label2: "申請索賠",
846 label3: "申請類型",
847 label4: "（可多選）",
848 op1: "意外醫療",
849 op2: "意外身故",
850 op3: "疾病醫療",
851 op4: "疾病身故",
852 op5: "重大疾病",
853 label5: "請填寫本次就診金額。",
854 label6: "本次就診金額",
855 label7: "（港幣）",
856 label8: "如就診時支付非港幣，請折算為港幣後填寫金額。",
857 label9: "事故時間",
858 label10: "必傳資料",
859 label11: "費用收據及清單",
860 label12: "病歷資料",
861 label13: "選傳資料",
862 label14: "醫院診斷報告",
863 label15: "索償人賬戶資料",
864 label16: "其他",
865 label17: "授權聲明：",
866 label18: "收集個人資料聲明：",
867 btn: "提交",
868 contact: "我想聯絡客服",
869 tip1 : "本人/我們謹此授權（1）任何雇主、注册西醫、醫院、診所、保險公司、銀行、政府機構、或其他機構、組織或人士、凡知道或持有任何有關保單持有人/受保人之紀錄者，均可將該等資料提供、發放及轉交給中國平安人壽保險（香港）有限公司；（2）貴公司或任何其指定之醫生或化驗所，可就此賠償申請替保單持有人/受保人進行所需之醫療評估及測試，作為稽核保單持有人/受保人之健康狀況。此授權對保單持有人/受保人之繼承人及授讓人具有約束力；即使保單持有人/受保人死亡或無行為能力時，此授權書仍具效力。",
870 tip2 : "本人/我們確認已閱讀及明白「中國平安人壽保險（香港）有限公司」的收集個人資料聲明（本聲明）。",
871 tip3 : "本人/我們特此確認並同意貴公司根據本聲明使用和移轉本人/我們的個人資料，包括為直接促銷之目的使用和提供本人/我們的個人資料。本人/我們確認並同意為本聲明中所述之目的將本人/我們的個人資料移轉至香港境外給本聲明所述的承轉人的類別。",
872 tip4 : "本人/我們謹此聲明上述一切陳述及資料，就本人/我們所知所信，均為事實之全部並確實無訛。"
873 }
829 } 874 }
830 } 875 }
......
...@@ -828,5 +828,50 @@ module.exports = { ...@@ -828,5 +828,50 @@ module.exports = {
828 tip2: "现确认于", 828 tip2: "现确认于",
829 tip3: "受托上述保单", 829 tip3: "受托上述保单",
830 tip4: "我想联络客服" 830 tip4: "我想联络客服"
831 },
832 clarms: {
833 step1: {
834 register: "注册",
835 login: "登入",
836 t1: "一账通以便我们为您提供更好的服务",
837 label0: "索偿人信息",
838 label1: "姓",
839 label2: "名",
840 label3: "证件类型",
841 label4: "证件号码",
842 label5: "出生日期",
843 btn: "立即申请"
844 },
845 step2: {
846 label1: "我想为",
847 label2: "申请索赔",
848 label3: "申请类型",
849 label4: "（可多選）",
850 op1: "意外医疗",
851 op2: "意外身故",
852 op3: "疾病医疗",
853 op4: "疾病身故",
854 op5: "重大疾病",
855 label5: "请填写本次就诊金额。",
856 label6: "本次就诊金额",
857 label7: "（港币）",
858 label8: "如就诊时支付非港币，请折算为港币后填写金额。",
859 label9: "事故时间",
860 label10: "必传资料",
861 label11: "费用收录及清单",
862 label12: "病例资料",
863 label13: "选传资料",
864 label14: "医院诊断报告",
865 label15: "索偿人账户资料",
866 label16: "其他",
867 label17: "授权声明：",
868 label18: "收集个人资料声明：",
869 btn: "提交",
870 contact: "我想联络客服",
871 tip1: "本人/我们谨此授权（1）任何雇主、注册西医、医院、诊所、保险公司、银行、政府机构、或其他机构、组织或人士、凡知道或持有任何有关保单持有人/受保人之纪录者，均可将该等数据提供、发放及转交给中国平安人寿保险（香港）有限公司；（2）贵公司或任何其指定之医生或化验所，可就此赔偿申请替保单持有人/受保人进行所需之医疗评价及测试，作为审核保单持有人/受保人之健康状况。此授权对保单持有人/受保人之继承人及授让人具有约束力；即使保单持有人/受保人死亡或无行为能力时，此授权书仍具效力。",
872 tip2: "本人/我们确认已阅读及明白「中国平安人寿保险（香港）有限公司」的收集个人资料声明（本声明）。",
873 tip3: "本人/我们特此确认并同意贵公司根据本声明使用和移转本人/我们的个人资料，包括为直接促销之目的使用和提供本人/我们的个人资料。本人/我们确认并同意为本声明中所述之目的将本人/我们的个人资料移转至香港境外给本声明所述的承转人的类别。",
874 tip4: "本人/我们谨此声明上述一切陈述及数据，就本人/我们所知所信，均为事实之全部并确实无讹。"
875 }
831 } 876 }
832 } 877 }
......
...@@ -26,14 +26,14 @@ export default { ...@@ -26,14 +26,14 @@ export default {
26 // today : 当日不可选择 26 // today : 当日不可选择
27 filtModel: { 27 filtModel: {
28 type: Array, 28 type: Array,
29 default () { 29 default() {
30 return ["history", "weekend", "today"] 30 return ["history", "weekend", "today"]
31 } 31 }
32 }, 32 },
33 // 需要过滤的日期列表 格式 ["yyyy-MM-dd","yyyy-MM-dd"] 33 // 需要过滤的日期列表 格式 ["yyyy-MM-dd","yyyy-MM-dd"]
34 filterDates: { 34 filterDates: {
35 type: Array, 35 type: Array,
36 default () { 36 default() {
37 return [] // ["2019-11-26", "2019-11-28"] 37 return [] // ["2019-11-26", "2019-11-28"]
38 } 38 }
39 }, 39 },
...@@ -60,6 +60,10 @@ export default { ...@@ -60,6 +60,10 @@ export default {
60 type: Function, 60 type: Function,
61 default: null 61 default: null
62 }, 62 },
63 showStyle: {
64 type: Boolean,
65 default: true
66 },
63 }, 67 },
64 data() { 68 data() {
65 return { 69 return {
...@@ -405,7 +409,7 @@ export default { ...@@ -405,7 +409,7 @@ export default {
405 this.month = Number(ymd[1]); 409 this.month = Number(ymd[1]);
406 this.date = Number(ymd[2]); 410 this.date = Number(ymd[2]);
407 isInit = true; 411 isInit = true;
408 } catch (e) {} 412 } catch (e) { }
409 } 413 }
410 } 414 }
411 if (!isInit) { 415 if (!isInit) {
...@@ -441,7 +445,7 @@ export default { ...@@ -441,7 +445,7 @@ export default {
441 445
442 } 446 }
443 }, 447 },
444 mounted() {}, 448 mounted() { },
445 created() { 449 created() {
446 this.initData(); 450 this.initData();
447 }, 451 },
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
3 <div class="comp"> 3 <div class="comp">
4 <div class="date-mask" v-if="visible" @click="showCalendar()"></div> 4 <div class="date-mask" v-if="visible" @click="showCalendar()"></div>
5 <div class="ipt-wrap" :class="{'readonly':readonly}"> 5 <div class="ipt-wrap" :class="{'readonly':readonly}">
6 <input v-bind:value="value" v-on:input="$emit('input', $event.target.value)" @click="showCalendar(true)" class="ipt" type="type" :readonly="readonly" :placeholder="placeholder || $t('form.datePicker.datePlaceholder')"> 6 <input v-bind:value="value" v-on:input="$emit('input', $event.target.value)" @click="showCalendar(true)" :class="{ipt: showStyle}" type="type" :readonly="readonly" :placeholder="placeholder || $t('form.datePicker.datePlaceholder')">
7 </div> 7 </div>
8 <div v-if="visible" class="date-wrap"> 8 <div v-if="visible" class="date-wrap">
9 <div class="calendar-wrap"> 9 <div class="calendar-wrap">
......
...@@ -62,7 +62,7 @@ ...@@ -62,7 +62,7 @@
62 } 62 }
63 63
64 hr { 64 hr {
65 border-top: 1px solid #e4e4e5; 65 border-top: .083333rem solid #e4e4e5;
66 width: 70%; 66 width: 70%;
67 margin: auto; 67 margin: auto;
68 } 68 }
...@@ -153,7 +153,7 @@ ...@@ -153,7 +153,7 @@
153 } 153 }
154 154
155 hr { 155 hr {
156 border-top: 1px solid #e4e4e5; 156 border-top: .083333rem solid #e4e4e5;
157 width: 80%; 157 width: 80%;
158 margin: auto; 158 margin: auto;
159 } 159 }
...@@ -181,7 +181,7 @@ ...@@ -181,7 +181,7 @@
181 } 181 }
182 182
183 hr { 183 hr {
184 border-top: 1px solid #e4e4e5; 184 border-top: .083333rem solid #e4e4e5;
185 width: 90% ; 185 width: 90% ;
186 margin: auto; 186 margin: auto;
187 } 187 }
......
1 import api from '@/api/api'
2 import {
3 httpGet,
4 httpPost
5 } from '@/api/fetch-api.js'
6
7 import DatePicker from '@/components/date-picker/date-picker.vue';
8 import Vue from 'vue';
9 import { Loading } from 'vant';
10 Vue.use(Loading);
11
12 export default {
13 data() {
14 return {
15 step: 2, // 1是表单；2是报案页面
16 typeSelected: [], // 已经选择的类型,
17 typeCandidates: ['1', '2', '3', '4', '5'], // 候选人所购买的保单可选择的类型
18 agress: false,
19 data: {
20 contactDate: ""
21 },
22 reservationTypes: []
23 }
24 },
25 components: {
26 DatePicker
27 },
28 computed: {
29 i18n() {
30 return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {};
31 },
32 },
33 methods: {
34 initData() {
35
36 },
37 checkDate(data) {
38 this.contactDateError = data.disable;
39 if (this.contactDateError) {
40
41 }
42 },
43 typeClickHandle(t) {
44 let index = this.typeSelected.indexOf(t);
45 if (index > -1) {
46 this.typeSelected.splice(index, 1);
47 } else {
48 this.typeSelected.push(t);
49 }
50 }
51 },
52 watch: {
53
54 },
55 mounted() {
56 this.initData();
57 },
58 created() { }
59 }
......
1 @import '@/styles/_support';
2
3
4
5 input {
6 padding: 0 2.083333rem;
7 color: #333333;
8 }
9
10 .orange {
11 color: $cOrange;
12 }
13
14 .gray {
15 color: #747474;
16 }
17
18
19 .submit-btn{
20 background: url("~@assets/images/vhis/vhis-btn.png");
21 background-size: 100% 100%;
22 background-repeat: no-repeat;
23 width: 15rem;
24 height: 2.5rem;
25 line-height: 2.5rem;
26 color: white;
27 font-weight: 600;
28 cursor: pointer;
29 margin: 2.5rem auto;
30 text-align: center;
31 }
32
33 .reservation-container {
34 @extend .bb;
35 border-radius: .666667rem;
36 border: solid .083333rem $cOrange;
37 background-color: #ffffff;
38 padding: 2.666667rem 10rem 2.833333rem 10rem;
39
40 .title {
41 font-size: 1.333333rem;
42 color: $cOrange;
43 text-align: center;
44 margin: 1.666667rem auto 0 auto;
45
46 span {
47 padding: 0 .166667rem;
48 }
49 }
50
51 .default-mt {
52 margin-top: 2.666667rem;
53 }
54
55 .flex-top {
56 display: flex;
57 justify-content: left;
58 align-items: flex-start;
59 }
60
61 .flex-start {
62 display: flex;
63 justify-content: left;
64 align-items: flex-start;
65 flex-wrap: wrap;
66 }
67
68 .check-item {
69 display: flex;
70 align-items: center;
71 span {
72 margin-left: .833333rem;
73 }
74 }
75
76 }
77
78
79 .reservation-container-2 {
80 @extend .bb;
81 border-radius: .666667rem;
82 border: solid .083333rem $cOrange;
83 background-color: #ffffff;
84 padding: 1.666667rem 10rem 2.833333rem 10rem;
85
86 .title {
87 font-size: 1.333333rem;
88 color: $cOrange;
89 text-align: center;
90 margin: 1.666667rem auto 0 auto;
91
92 select {
93 padding: 0 1.25rem ;
94 border: none;
95 border-bottom: .083333rem solid #666666;
96 color: #666666;
97 }
98 }
99
100 .default-mt {
101 margin-top: 2.666667rem;
102 }
103
104 .submit-btn{
105 margin: 2.5rem auto 1rem;
106 }
107
108 .flex-top {
109 display: flex;
110 justify-content: left;
111 align-items: flex-start;
112 }
113
114 .flex-start {
115 display: flex;
116 justify-content: left;
117 align-items: flex-start;
118 flex-wrap: wrap;
119 }
120
121 .check-item {
122 display: flex;
123 align-items: center;
124 margin-right: 2rem;
125 margin-bottom: .833333rem;
126
127 span {
128 margin-left: .833333rem;
129 }
130
131 img {
132 width: 1.666667rem ;
133 }
134 }
135
136 .item-group {
137 display: flex;
138 justify-content: flex-start;
139 align-items: flex-start;
140 flex-wrap: wrap;
141 }
142
143 .ml10 {
144 margin-left: .833333rem;
145 }
146
147 .mt20 {
148 margin-top: 1.666667rem;
149 }
150
151 .mt10 {
152 margin-top: .833333rem;
153 }
154
155 .upload-item {
156
157 .tip {
158 color: $cOrange;
159 font-size: 1rem;
160 margin-top: .833333rem ;
161 text-align: center;
162 width: 8.333333rem ;
163 }
164
165 .upload-icon-1 {
166 width: 8.333333rem ;
167 height: 8.333333rem ;
168 background: url("~@/assets/images/clarms/icon1.png");
169 background-size: 100% 100%;
170 }
171
172 .upload-icon-2 {
173 width: 8.333333rem ;
174 height: 8.333333rem ;
175 background: url("~@/assets/images/clarms/icon2.png");
176 background-size: 100% 100%;
177 }
178
179 .upload-icon-3 {
180 width: 8.333333rem ;
181 height: 8.333333rem ;
182 background: url("~@/assets/images/clarms/icon3.png");
183 background-size: 100% 100%;
184 }
185
186 .upload-icon-4 {
187 width: 8.333333rem ;
188 height: 8.333333rem ;
189 background: url("~@/assets/images/clarms/icon4.png");
190 background-size: 100% 100%;
191 }
192
193 .upload-icon-5 {
194 width: 8.333333rem ;
195 height: 8.333333rem ;
196 background: url("~@/assets/images/clarms/icon5.png");
197 background-size: 100% 100%;
198 }
199 }
200
201 .bottom-tip {
202 font-size: .833333rem ;
203 display: flex;
204 align-items: center;
205 span {
206 margin-left: 1.3rem;
207 }
208
209 img {
210 width: 1.3rem;
211 }
212 }
213
214 hr {
215 border-top: 1px solid #eee;
216 margin-top: 2.5rem ;
217 }
218
219 .tips {
220 display: flex;
221 justify-content: flex-start;
222 align-items: center;
223
224 img {
225 width: .833333rem;
226 }
227
228 span {
229 font-size: 1rem ;
230 margin-left: .833333rem;
231 color: $cOrange;
232 }
233 }
234
235 .contact {
236 text-align: center;
237 cursor: pointer;
238 color: $cOrange;
239 font-weight: 600;
240 }
241 }
242
243
244 .form {
245 display: flex;
246 justify-content: space-between;
247 flex-wrap: wrap;
248
249 &-name {
250 font-size: 1.333333rem ;
251 font-weight: 600;
252 text-align: left;
253 color: $cOrange;
254 padding-left: 15px;
255 }
256
257 &-item {
258 width: 50%;
259 display: flex;
260 justify-content: center;
261 padding: 0 $marginSmall;
262 margin-bottom: 1.333333rem;
263
264 .label {
265 display: flex;
266 align-items: center;
267 min-width: 30%;
268 justify-content: flex-start;
269 padding-left: 5px;
270 letter-spacing: .25rem;
271 }
272
273 .ipt-wrap {
274 width: 70%;
275 position: relative;
276
277 // input和下拉
278 .ipt {
279 border: 1px solid $cOrange !important;
280 border-radius: .416667rem ;
281 height: 3rem;
282 display:flex;
283 align-items: center;
284 }
285
286 // 长文本
287 .textarea {
288 min-height: 8.75rem;
289 @extend .bb;
290 padding: .75rem;
291 }
292
293 .down-arrow {
294 z-index: 10;
295 position: absolute;
296 top: 1.3rem;
297 right: 1.2rem;
298 background-image: url('~@/assets/images/reservation/re-down-arrow-2.png');
299 background-size: 100% 100%;
300 width: .633333rem;
301 height: .433333rem;
302 pointer-events: none;
303 cursor: default;
304 }
305 }
306
307 .validator {
308 color: $cOrange;
309 margin-top: 0.5rem;
310 position: absolute;
311 right: 1rem;
312 display: flex;
313 align-items: center;
314 // bottom: 0;
315
316 img {
317 display: inline-block;
318 margin-right: 0.4rem;
319 }
320 }
321 }
322
323
324 &-item-2 {
325 width: 100%;
326 display: flex;
327 justify-content: flex-start;
328 padding: 0 $marginSmall;
329 margin-bottom: 1.333333rem;
330
331 .label {
332 align-items: center;
333 width: 25%;
334 padding-left: 5px;
335 letter-spacing: .25rem;
336
337 .main-label {
338 color: $cOrange;
339 }
340 }
341
342 .value {
343 width: 75%;
344 position: relative;
345 .ipt-wrap {
346
347 // input和下拉
348 .ipt {
349 border: 1px solid $cOrange !important;
350 border-radius: .416667rem ;
351 height: 3rem;
352 display:flex;
353 align-items: center;
354 }
355
356 .ipt2 {
357 width: 100%;
358 border-bottom: 1px solid #ccc;
359 height: 3rem;
360 display:flex;
361 align-items: center;
362 margin-bottom: .833333rem ;
363 }
364
365 // 长文本
366 .textarea {
367 min-height: 8.75rem;
368 @extend .bb;
369 padding: .75rem;
370 }
371
372 .down-arrow {
373 z-index: 10;
374 position: absolute;
375 top: 1.3rem;
376 right: 1.2rem;
377 background-image: url('~@/assets/images/reservation/re-down-arrow-2.png');
378 background-size: 100% 100%;
379 width: .633333rem;
380 height: .433333rem;
381 pointer-events: none;
382 cursor: default;
383 }
384 }
385 }
386 }
387 }
388
389
390 .notice {
391 margin-top: 4rem;
392 @extend .bb;
393 padding: 0 1rem;
394
395 &-item {
396 position: relative;
397 line-height: 2;
398 letter-spacing: 1.2px;
399 margin-bottom: 1rem;
400
401 &-icon {
402 width: 1.166667rem;
403 position: absolute;
404 top: .6rem;
405 }
406 }
407 }
408
409 // .submit-btn {
410 // width: 13.583333rem;
411 // height: 4.083333rem;
412 // margin: 2.5rem auto;
413 // line-height: 4.083333rem;
414 // box-shadow: 0px 10px 13px 0 rgba(236, 100, 41, 0.2);
415 // background-blend-mode: soft-light, ;
416 // background-image: linear-gradient(to bottom, #ec6429, #ec6429), linear-gradient(to top, #000000, #ffffff);
417 // // background-image: linear-gradient(to top, #000000, #ffffff), linear-gradient(to bottom, #ec6429, #ec6429);
418 // text-align: center;
419 // font-size: $fontSize;
420 // letter-spacing: .129167rem;
421 // color: #ffffff;
422 // border-radius: 3.5rem;
423 // cursor: pointer;
424 // border: none;
425 // color: #ffffff;
426 // background-color: $cOrange;
427 // box-shadow: 0px 10px 13px 0 rgba(236, 100, 41, 0.2);
428 // background-blend-mode: soft-light, ;
429 // background-image: linear-gradient(to bottom, #ec6429, #ec6429), linear-gradient(to top, #000000, #ffffff);
430 // // background-image: linear-gradient(to top, #000000, #ffffff), linear-gradient(to bottom, #ec6429, #ec6429);
431 // }
432
433
434 @media (max-width: 1200px) {
435 .mobile-margin {
436 margin-top: 2.5rem;
437 }
438 }
439
440 @media (max-width: 1000px) {
441
442 .reservation-container-2 {
443 padding: 1.666667rem 2rem 2.833333rem 2rem;
444 }
445
446 .form {
447 &-item {
448 width: 100%;
449 .label {
450 min-width: 30%;
451 }
452
453 .ipt-wrap {
454 width: 70%;
455 }
456 }
457 }
458 }
459
460 @media (max-width: 600px) {
461
462 .reservation-container {
463 padding: 2.666667rem 2rem 2.833333rem 2rem;
464 }
465
466 .form {
467 &-item {
468 width: 100%;
469
470 .label {
471 min-width: 30%;
472 }
473
474 .ipt-wrap {
475 width: 70%;
476 }
477 }
478
479 &-item2 {
480 display: block;
481
482 .ipt-wrap {
483 margin: 0;
484 }
485 }
486
487 &-item-2 {
488 .label {
489 width: 30%;
490 }
491 .value {
492 width: 70%;
493 }
494 }
495
496 &-item3 {
497 display: block;
498
499 .ipt-wrap {
500 margin: 0;
501 width: 100%;
502 }
503 }
504 }
505
506 .notice {
507 margin: 0;
508 }
509 }
......
1 1
2 <template> 2 <template>
3 <div style="height:500px;"></div> 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
17 <div class="pure-u-1 pure-u-md-1-2 form-item">
18 <div class="label">
19 {{$t('clarms.step1.label2')}}
20 </div>
21 <div class="ipt-wrap">
22 <input class="ipt" type="text" v-model="data.name">
23 </div>
24 </div>
25
26 <div class="pure-u-1 pure-u-md-1-2 form-item">
27 <div class="label">
28 {{$t('clarms.step1.label3')}}
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" v-model="data.contactDate" :check="checkDate" :showStyle="false"></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 pure-u-md-1-2 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 pure-u-md-1-2 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>
117 <div class="value">
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 pure-u-md-1-2 form-item-2 mt20">
127 <div class="label">
128 <div class="main-label">
129 {{$t('clarms.step2.label9')}}
130 </div>
131 </div>
132 <div>
133 <div class="value">
134 <div class="ipt-wrap item-group">
135 <div class="down-arrow"></div>
136 <date-picker class="ipt" v-model="data.contactDate" :check="checkDate" :showStyle="false"></date-picker>
137 </div>
138 </div>
139 </div>
140 </div>
141
142 <div class="pure-u-1 pure-u-md-1-2 form-item-2 mt20">
143 <div class="label">
144 <div class="main-label">
145 {{$t('clarms.step2.label10')}}
146 </div>
147 </div>
148 <div>
149 <div class="value" style="display:flex;">
150 <div class="upload-item pointer">
151 <div class="upload-icon-1"></div>
152 <div class="tip">{{$t('clarms.step2.label11')}}</div>
153 </div>
154
155 <div class="upload-item ml10 pointer">
156 <div class="upload-icon-2"></div>
157 <div class="tip">{{$t('clarms.step2.label12')}}</div>
158 </div>
159 </div>
160 </div>
161 </div>
162
163 <div class="pure-u-1 pure-u-md-1-2 form-item-2 mt20">
164 <div class="label">
165 <div class="main-label">
166 {{$t('clarms.step2.label13')}}
167 </div>
168 </div>
169 <div>
170 <div class="value" style="display:flex;">
171 <div class="upload-item pointer">
172 <div class="upload-icon-3"></div>
173 <div class="tip">{{$t('clarms.step2.label14')}}</div>
174 </div>
175
176 <div class="upload-item ml10 pointer">
177 <div class="upload-icon-4"></div>
178 <div class="tip">{{$t('clarms.step2.label15')}}</div>
179 </div>
180
181 <div class="upload-item ml10 pointer">
182 <div class="upload-icon-5"></div>
183 <div class="tip">{{$t('clarms.step2.label16')}}</div>
184 </div>
185 </div>
186 </div>
187 </div>
188 </div>
189 <hr>
190 <div class="bottom-tip orange mt20">{{$t('clarms.step2.label17')}}</div>
191 <div class="bottom-tip gray mt10">{{$t('clarms.step2.tip1')}}</div>
192
193 <div class="bottom-tip orange mt20">{{$t('clarms.step2.label18')}}</div>
194 <div class="bottom-tip gray mt10">{{$t('clarms.step2.tip2')}}</div>
195 <div class="bottom-tip gray mt10">{{$t('clarms.step2.tip3')}}</div>
196
197 <div class="bottom-tip orange mt10 pointer" @click="agress = !agress">
198 <img v-if="agress" src="@/assets/images/clarms/checked.png">
199 <img v-else src="@/assets/images/clarms/uncheck.png">
200 <span>{{$t('clarms.step2.tip4')}}</span>
201 </div>
202
203 <div class="submit-btn">{{$t('clarms.step2.btn')}}</div>
204
205 <div class="contact">{{$t('clarms.step2.contact')}}</div>
206 </div>
207 </div>
4 </template> 208 </template>
5 209
6 <script src="./clarms.js"></script> 210 <script src="./clarms.js"></script>
......