Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
9f781307 by simon
Options

日期组件国际化,3处接入日期组件

1 parent 68150c6b
Inline Side-by-side
Showing 17 changed files with 438 additions and 354 deletions
...@@ -356,7 +356,7 @@ textarea { ...@@ -356,7 +356,7 @@ textarea {
356 } 356 }
357 357
358 .swiper-pagination-bullet-active { 358 .swiper-pagination-bullet-active {
359 background: #f05a23 !important; 359 background: $cOrange !important;
360 } 360 }
361 361
362 362
......
...@@ -8,98 +8,103 @@ module.exports = { ...@@ -8,98 +8,103 @@ module.exports = {
8 zh: 'Chinese', 8 zh: 'Chinese',
9 en: 'English' 9 en: 'English'
10 }, 10 },
11 glbalTips : { 11 glbalTips: {
12 sessionLost : "为了更好的体验，需要您登录后再进行此操作" 12 sessionLost: "为了更好的体验，需要您登录后再进行此操作"
13 },
14 form: {
15 datePicker: {
16 datePlaceholder: "please select date"
17 }
13 }, 18 },
14 nav: { 19 nav: {
15 loginData: { 20 loginData: {
16 name: "login", 21 name: "login",
17 path: "", 22 path: "",
18 list: [{ 23 list: [{
19 name: "register", 24 name: "register",
20 path: "/register", 25 path: "/register",
21 type: "noAuth", 26 type: "noAuth",
22 value: "" 27 value: ""
23 }, { 28 }, {
24 name: "login", 29 name: "login",
25 path: "/login", 30 path: "/login",
26 type: "noAuth", 31 type: "noAuth",
27 value: "" 32 value: ""
28 }, 33 },
29 { 34 {
30 name: "modify password", 35 name: "modify password",
31 path: "/password/reset", 36 path: "/password/reset",
32 type: "auth", 37 type: "auth",
33 value: "" 38 value: ""
34 }, 39 },
35 { 40 {
36 name: "logout", 41 name: "logout",
37 path: "", 42 path: "",
38 type: "auth", 43 type: "auth",
39 value: "logout" 44 value: "logout"
40 }, 45 },
41 ] 46 ]
42 }, 47 },
43 navList: [{ 48 navList: [{
44 name: "Product description", 49 name: "Product description",
45 path: "/product", 50 path: "/product",
46 list: [] 51 list: []
47 },
48 {
49 name: "Customer service",
50 path: "/custom/product",
51 list: [{
52 name: "Contact us",
53 path: "/custom/service?q=m1"
54 },
55 {
56 name: "Pay premium",
57 path: "/custom/service?q=m2"
58 },
59 {
60 name: "Query policy",
61 path: "/custom/service?q=m3"
62 }, 52 },
63 { 53 {
64 name: "Change policy", 54 name: "Customer service",
65 path: "/custom/service?q=m41" 55 path: "/custom/product",
56 list: [{
57 name: "Contact us",
58 path: "/custom/service?q=m1"
59 },
60 {
61 name: "Pay premium",
62 path: "/custom/service?q=m2"
63 },
64 {
65 name: "Query policy",
66 path: "/custom/service?q=m3"
67 },
68 {
69 name: "Change policy",
70 path: "/custom/service?q=m41"
71 },
72 {
73 name: "Claim report",
74 path: "/custom/service?q=m5"
75 },
76 {
77 name: "Reservation service",
78 path: "/custom/service?q=m6"
79 },
80 {
81 name: "Suggestions",
82 path: "/custom/service?q=m7"
83 },
84 {
85 name: "Common form",
86 path: "/custom/service?q=m8"
87 },
88 ]
66 }, 89 },
67 { 90 {
68 name: "Claim report", 91 name: "News",
69 path: "/custom/service?q=m5" 92 path: "/news/list",
93 list: []
70 }, 94 },
71 { 95 {
72 name: "Reservation service", 96 name: "About",
73 path: "/custom/service?q=m6" 97 path: "",
74 }, 98 list: [{
75 { 99 name: "Company",
76 name: "Suggestions", 100 path: "/profile"
77 path: "/custom/service?q=m7" 101 },
78 }, 102 {
79 { 103 name: "Leaders",
80 name: "Common form", 104 path: ""
81 path: "/custom/service?q=m8" 105 },
82 }, 106 ]
83 ]
84 },
85 {
86 name: "News",
87 path: "/news/list",
88 list: []
89 },
90 {
91 name: "About",
92 path: "",
93 list: [{
94 name: "Company",
95 path: "/profile"
96 },
97 {
98 name: "Leaders",
99 path: ""
100 }, 107 },
101 ]
102 },
103 ] 108 ]
104 }, 109 },
105 footer: { 110 footer: {
...@@ -285,7 +290,7 @@ module.exports = { ...@@ -285,7 +290,7 @@ module.exports = {
285 value: "W" 290 value: "W"
286 }] 291 }]
287 }, 292 },
288 successMsg : "更新成功", 293 successMsg: "更新成功",
289 errorTips: { 294 errorTips: {
290 e1: "請填寫姓名信息", 295 e1: "請填寫姓名信息",
291 e2: "請選擇性別", 296 e2: "請選擇性別",
...@@ -329,10 +334,10 @@ module.exports = { ...@@ -329,10 +334,10 @@ module.exports = {
329 contactTime: "期望聯絡時間", 334 contactTime: "期望聯絡時間",
330 notice1: "本表格所收集的個人資料根據「平安人壽香港個人資料收集聲明」處理及只會被用作於聯絡 閣下之用。然而所收集的個人資料未經您明確授權將不會轉移至「平安人壽香港個人資料收集聲明」列明以外之第三者機構。您可選擇不向我們提供所需的個人資料，惟這樣可能導致我們不能聯絡您。您亦可根據「平安人壽香港個人資料收集聲明」之權利查閱及更正個人資料。", 335 notice1: "本表格所收集的個人資料根據「平安人壽香港個人資料收集聲明」處理及只會被用作於聯絡 閣下之用。然而所收集的個人資料未經您明確授權將不會轉移至「平安人壽香港個人資料收集聲明」列明以外之第三者機構。您可選擇不向我們提供所需的個人資料，惟這樣可能導致我們不能聯絡您。您亦可根據「平安人壽香港個人資料收集聲明」之權利查閱及更正個人資料。",
331 notice2: "本人現確認明白並同意本人的個人資料根據中銀人壽個人資料收集聲明作以上述用途。", 336 notice2: "本人現確認明白並同意本人的個人資料根據中銀人壽個人資料收集聲明作以上述用途。",
332 contactTypes : ['電話','電郵'], 337 contactTypes: ['電話', '電郵'],
333 errorTips : { 338 errorTips: {
334 e1 : "請填寫該項內容", 339 e1: "請填寫該項內容",
335 e2 : "請填寫正確的聯繫方式" 340 e2: "請填寫正確的聯繫方式"
336 }, 341 },
337 }, 342 },
338 reservation: { 343 reservation: {
...@@ -382,71 +387,71 @@ module.exports = { ...@@ -382,71 +387,71 @@ module.exports = {
382 head4: "附件", 387 head4: "附件",
383 download: "下載文檔", 388 download: "下載文檔",
384 form: [{ 389 form: [{
385 type: "繳費類", 390 type: "繳費類",
386 list: [{ 391 list: [{
387 name: "「電子入賬服務」及銀行戶口<br>直接付款授權申請", 392 name: "「電子入賬服務」及銀行戶口<br>直接付款授權申請",
388 desc: "申請設立「 電子入賬服務」 及銀行戶口<br>直接付款授權時須提供", 393 desc: "申請設立「 電子入賬服務」 及銀行戶口<br>直接付款授權時須提供",
389 download: "", 394 download: "",
395 },
396 {
397 name: "信用卡戶口直接付款授權書",
398 desc: "申請信用卡戶口直接付款授權時須提供",
399 download: "",
400 }
401 ]
390 }, 402 },
391 { 403 {
392 name: "信用卡戶口直接付款授權書", 404 type: "保單變更類",
393 desc: "申請信用卡戶口直接付款授權時須提供", 405 list: [{
394 download: "", 406 name: "保險合同解除申請書",
395 } 407 desc: "退保、猶豫期退保業務適用",
396 ] 408 download: "",
397 }, 409 },
398 { 410 {
399 type: "保單變更類", 411 name: "保險合同變更申請書（ 保單貸款還款類）",
400 list: [{ 412 desc: "保單貸款、還款業務適用",
401 name: "保險合同解除申請書", 413 download: "",
402 desc: "退保、猶豫期退保業務適用", 414 },
403 download: "", 415 {
404 }, 416 name: "保險合同變更申請書（ 保險合同計劃變更類）",
405 { 417 desc: "加保、減保、新增附險、復效等業務適用",
406 name: "保險合同變更申請書（ 保單貸款還款類）", 418 download: "",
407 desc: "保單貸款、還款業務適用", 419 },
408 download: "", 420 {
421 name: "保險合同變更申請書（ 客戶信息變更類）",
422 desc: "基本信息變更業務適用",
423 download: "",
424 },
425 {
426 name: "保險合同變更申請書（ 客戶權益變更類）",
427 desc: "交費方式、自墊選擇權變更、補發等業務適用",
428 download: "",
429 },
430 {
431 name: "授權委托書",
432 desc: "委托他人代辦時須提供",
433 download: "",
434 },
435 {
436 name: "稅收聲明",
437 desc: "CRS要求",
438 download: "",
439 },
440 {
441 name: "健康告知",
442 desc: "須二次核保的業務須提供",
443 download: "",
444 }
445 ]
409 }, 446 },
410 { 447 {
411 name: "保險合同變更申請書（ 保險合同計劃變更類）", 448 type: "理賠類",
412 desc: "加保、減保、新增附險、復效等業務適用", 449 list: [{
413 download: "", 450 name: "理賠申請書",
451 desc: "紙質申請的應備文件",
452 download: "",
453 }]
414 }, 454 },
415 {
416 name: "保險合同變更申請書（ 客戶信息變更類）",
417 desc: "基本信息變更業務適用",
418 download: "",
419 },
420 {
421 name: "保險合同變更申請書（ 客戶權益變更類）",
422 desc: "交費方式、自墊選擇權變更、補發等業務適用",
423 download: "",
424 },
425 {
426 name: "授權委托書",
427 desc: "委托他人代辦時須提供",
428 download: "",
429 },
430 {
431 name: "稅收聲明",
432 desc: "CRS要求",
433 download: "",
434 },
435 {
436 name: "健康告知",
437 desc: "須二次核保的業務須提供",
438 download: "",
439 }
440 ]
441 },
442 {
443 type: "理賠類",
444 list: [{
445 name: "理賠申請書",
446 desc: "紙質申請的應備文件",
447 download: "",
448 }]
449 },
450 ] 455 ]
451 }, 456 },
452 policyChangeGuide: { 457 policyChangeGuide: {
...@@ -458,100 +463,100 @@ module.exports = { ...@@ -458,100 +463,100 @@ module.exports = {
458 head5: "應備材料", 463 head5: "應備材料",
459 download: "下載文檔", 464 download: "下載文檔",
460 form: [{ 465 form: [{
461 project: "退保", 466 project: "退保",
462 content: "在猶豫期後解除合同，公司將退還保單現金價值或未滿期凈保費。（待產品精算確認）", 467 content: "在猶豫期後解除合同，公司將退還保單現金價值或未滿期凈保費。（待產品精算確認）",
463 applicant: "投保人", 468 applicant: "投保人",
464 receptionTime: "保單效力終止前", 469 receptionTime: "保單效力終止前",
465 materialList: [{ 470 materialList: [{
466 name: "保險單", 471 name: "保險單",
467 }, 472 },
468 { 473 {
469 name: "申請書", 474 name: "申請書",
470 type: 1, 475 type: 1,
471 }, 476 },
472 { 477 {
473 name: "投保人有效身份證件", 478 name: "投保人有效身份證件",
474 }, 479 },
475 { 480 {
476 name: "存折银行卡相关", 481 name: "存折银行卡相关",
477 } 482 }
478 ], 483 ],
479 },
480 {
481 project: "猶豫期退保",
482 content: "在猶豫期內提出解除合同，公司會無息退還全部保費",
483 applicant: "投保人",
484 receptionTime: "猶豫期結束前",
485 materialList: [{
486 name: "保險單",
487 },
488 {
489 name: "申請書",
490 type: 1,
491 }, 484 },
492 { 485 {
493 name: "投保人有效身份證件", 486 project: "猶豫期退保",
487 content: "在猶豫期內提出解除合同，公司會無息退還全部保費",
488 applicant: "投保人",
489 receptionTime: "猶豫期結束前",
490 materialList: [{
491 name: "保險單",
492 },
493 {
494 name: "申請書",
495 type: 1,
496 },
497 {
498 name: "投保人有效身份證件",
499 },
500 {
501 name: "存折银行卡相关",
502 },
503 {
504 name: "首期保費發票",
505 }
506 ],
494 }, 507 },
495 { 508 {
496 name: "存折银行卡相关", 509 project: "客戶資料變更",
510 projectType: 1,
511 path: "/custom/service",
512 query: {
513 q: "m42"
514 },
515 content: "投保人、受保人、受益人的個人信息變更",
516 applicant: "投保人",
517 receptionTime: "不限",
518 materialList: [{
519 name: "申請書",
520 type: 1,
521 },
522 {
523 name: "必要的證明材料",
524 }
525 ],
497 }, 526 },
498 { 527 {
499 name: "首期保費發票", 528 project: "聯系方式變更",
500 } 529 projectType: 1,
501 ], 530 path: "/custom/service",
502 }, 531 query: {
503 { 532 q: "m43"
504 project: "客戶資料變更", 533 },
505 projectType: 1, 534 content: "地址、電話等信息的變更",
506 path: "/custom/service", 535 applicant: "投保人",
507 query: { 536 receptionTime: "不限",
508 q: "m42" 537 materialList: [{
509 }, 538 name: "申請書",
510 content: "投保人、受保人、受益人的個人信息變更", 539 type: 1,
511 applicant: "投保人", 540 },
512 receptionTime: "不限", 541 {
513 materialList: [{ 542 name: "投保人有效身份證件",
514 name: "申請書", 543 }
515 type: 1, 544 ],
516 }, 545 },
517 { 546 {
518 name: "必要的證明材料", 547 project: "交費方式變更",
519 } 548 content: "更改保單的續期交費方式或交費賬號",
520 ], 549 applicant: "投保人",
521 }, 550 receptionTime: "保單交費期滿前",
522 { 551 materialList: [{
523 project: "聯系方式變更", 552 name: "申請書",
524 projectType: 1, 553 type: 1,
525 path: "/custom/service", 554 },
526 query: { 555 {
527 q: "m43" 556 name: "保險單",
557 }
558 ],
528 }, 559 },
529 content: "地址、電話等信息的變更",
530 applicant: "投保人",
531 receptionTime: "不限",
532 materialList: [{
533 name: "申請書",
534 type: 1,
535 },
536 {
537 name: "投保人有效身份證件",
538 }
539 ],
540 },
541 {
542 project: "交費方式變更",
543 content: "更改保單的續期交費方式或交費賬號",
544 applicant: "投保人",
545 receptionTime: "保單交費期滿前",
546 materialList: [{
547 name: "申請書",
548 type: 1,
549 },
550 {
551 name: "保險單",
552 }
553 ],
554 },
555 ] 560 ]
556 }, 561 },
557 policyChangeContact: { 562 policyChangeContact: {
...@@ -560,10 +565,10 @@ module.exports = { ...@@ -560,10 +565,10 @@ module.exports = {
560 email: "E-Mail", 565 email: "E-Mail",
561 checkTips: "本人不同意接收宣傳信息", 566 checkTips: "本人不同意接收宣傳信息",
562 submit: "確認修改", 567 submit: "確認修改",
563 errorTips : { 568 errorTips: {
564 e1 : "請填寫正確的聯繫電話", 569 e1: "請填寫正確的聯繫電話",
565 e2 : "請填寫聯繫地址", 570 e2: "請填寫聯繫地址",
566 e3 : "請填寫正確的E-Mail地址" 571 e3: "請填寫正確的E-Mail地址"
567 } 572 }
568 }, 573 },
569 policyChangeInformation: { 574 policyChangeInformation: {
...@@ -672,11 +677,11 @@ module.exports = { ...@@ -672,11 +677,11 @@ module.exports = {
672 }, 677 },
673 reservation: { 678 reservation: {
674 submitBtn: '確認', 679 submitBtn: '確認',
675 contactTypes : ['電話'], 680 contactTypes: ['電話'],
676 reservationTypes: ['投保咨詢','代辦保單變更'], 681 reservationTypes: ['投保咨詢', '代辦保單變更'],
677 errorTips : { 682 errorTips: {
678 e1 : "請填寫該項內容", 683 e1: "請填寫該項內容",
679 e2 : "請填寫正確的聯繫方式" 684 e2: "請填寫正確的聯繫方式"
680 } 685 }
681 } 686 }
682 } 687 }
......
...@@ -11,6 +11,11 @@ module.exports = { ...@@ -11,6 +11,11 @@ module.exports = {
11 glbalTips : { 11 glbalTips : {
12 sessionLost : "為了更好的體驗，需要您登錄後再進行此操作" 12 sessionLost : "為了更好的體驗，需要您登錄後再進行此操作"
13 }, 13 },
14 form: {
15 datePicker: {
16 datePlaceholder: "请选择日期"
17 }
18 },
14 nav: { 19 nav: {
15 loginData: { 20 loginData: {
16 name: "登入", 21 name: "登入",
......
...@@ -11,6 +11,11 @@ module.exports = { ...@@ -11,6 +11,11 @@ module.exports = {
11 glbalTips: { 11 glbalTips: {
12 sessionLost: "为了更好的体验，需要您登录后再进行此操作" 12 sessionLost: "为了更好的体验，需要您登录后再进行此操作"
13 }, 13 },
14 form: {
15 datePicker: {
16 datePlaceholder: "请选择日期"
17 }
18 },
14 nav: { 19 nav: {
15 loginData: { 20 loginData: {
16 name: "登陆", 21 name: "登陆",
......
...@@ -19,12 +19,24 @@ export default { ...@@ -19,12 +19,24 @@ export default {
19 type: Boolean, 19 type: Boolean,
20 default: false 20 default: false
21 }, 21 },
22 // 需要过滤的日期列表 格式 ["yyyy-MM-dd","yyyy-MM-dd"]
22 filterDates: { 23 filterDates: {
23 type: Array, 24 type: Array,
24 default () { 25 default () {
25 return [] // ["2019-11-26", "2019-11-28"] 26 return [] // ["2019-11-26", "2019-11-28"]
26 } 27 }
28 },
29 /**
30 * 占位符
31 * 1.默认空格字符串 " " 即视觉上无内容
32 * 2.空字符串 "" 使用默认国际化
33 * 3.自定义传值
34 */
35 placeholder: {
36 type: String,
37 default: " "
27 } 38 }
39
28 }, 40 },
29 data() { 41 data() {
30 return { 42 return {
...@@ -43,6 +55,45 @@ export default { ...@@ -43,6 +55,45 @@ export default {
43 } 55 }
44 }, 56 },
45 components: {}, 57 components: {},
58 computed: {
59 locale() {
60 return this.$i18n.locale || 'tc';
61 },
62 i18n() {
63 return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {};
64 },
65 getDayList() {
66 if (this.locale == 'en') {
67 return ["Sun", "Mon", "Tue", "Wen", "Thu", "Fri", "Sat"]
68 } else {
69 return ["日", "一", "二", "三", "四", "五", "六"]
70 }
71 },
72 getMonthList() {
73 if (this.locale == 'en') {
74 return ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
75 } else {
76 return ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]
77 }
78 },
79 // 年月
80 getDateType1() {
81 if (this.locale == 'en') {
82 let date = Date.parse(`${this.month}/${this.date}/${this.year}`);
83 return date.toString('MMM , yyyy');
84 } else {
85 return `${this.year}年${this.month}月`
86 }
87 },
88 // 年
89 getDateType2() {
90 if (this.locale == 'en') {
91 return `${this.year}`
92 } else {
93 return `${this.year}年`
94 }
95 }
96 },
46 methods: { 97 methods: {
47 /** 98 /**
48 * 画月历图 99 * 画月历图
...@@ -180,7 +231,6 @@ export default { ...@@ -180,7 +231,6 @@ export default {
180 231
181 // 计算year渲染列表 232 // 计算year渲染列表
182 refreshYearList() { 233 refreshYearList() {
183
184 let yearPage = this.yearPage; 234 let yearPage = this.yearPage;
185 if (yearPage <= 0) return; 235 if (yearPage <= 0) return;
186 let yearList = []; 236 let yearList = [];
...@@ -202,6 +252,10 @@ export default { ...@@ -202,6 +252,10 @@ export default {
202 this.yearPage = yearPage; 252 this.yearPage = yearPage;
203 this.refreshYearList(); 253 this.refreshYearList();
204 }, 254 },
255 getMonthByIndex(index) {
256 let monthList = this.getMonthList;
257 return monthList[index - 1];
258 },
205 // 选择类型 年/月/日 259 // 选择类型 年/月/日
206 onTypeHandler() { 260 onTypeHandler() {
207 let dateType = this.dateType; 261 let dateType = this.dateType;
......
...@@ -2,9 +2,6 @@ ...@@ -2,9 +2,6 @@
2 2
3 .comp { 3 .comp {
4 position: relative; 4 position: relative;
5 height: 100px;
6
7
8 } 5 }
9 6
10 // 日历容器 7 // 日历容器
...@@ -113,9 +110,9 @@ ...@@ -113,9 +110,9 @@
113 } 110 }
114 111
115 .point { 112 .point {
116 width: 51px; 113 width: 120px;
117 height: 51px; 114 height: 64px;
118 line-height: 51px; 115 line-height: 64px;
119 } 116 }
120 } 117 }
121 } 118 }
......
...@@ -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"> 5 <div class="ipt-wrap">
6 <input v-bind:value="value" v-on:input="$emit('input', $event.target.value)" placeholder="请选择日期" @click="showCalendar(true)" class="ipt" type="type" 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')">
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">
...@@ -16,10 +16,11 @@ ...@@ -16,10 +16,11 @@
16 <div @click="onTypeHandler()" class="date"> 16 <div @click="onTypeHandler()" class="date">
17 <span class="pointer"> 17 <span class="pointer">
18 <template v-if="dateType == 1"> 18 <template v-if="dateType == 1">
19 {{year}}年{{month}}月 19 <!-- {{year}}年{{month}}月 -->
20 {{getDateType1}}
20 </template> 21 </template>
21 <template v-if="dateType == 2"> 22 <template v-if="dateType == 2">
22 {{year}}年 23 {{getDateType2}}
23 </template> 24 </template>
24 <template v-if="dateType == 3"> 25 <template v-if="dateType == 3">
25 {{yearRange}} 26 {{yearRange}}
...@@ -35,13 +36,13 @@ ...@@ -35,13 +36,13 @@
35 <div v-if="dateType == 1" class="con day"> 36 <div v-if="dateType == 1" class="con day">
36 <!-- 日历表头 --> 37 <!-- 日历表头 -->
37 <div class="th tr"> 38 <div class="th tr">
38 <div class="td" :class="{'disable':!weekend}">日</div> 39 <div class="td" :class="{'disable':!weekend}">{{getDayList[0]}}</div>
39 <div class="td">一</div> 40 <div class="td">{{getDayList[1]}}</div>
40 <div class="td">二</div> 41 <div class="td">{{getDayList[2]}}</div>
41 <div class="td">三</div> 42 <div class="td">{{getDayList[3]}}</div>
42 <div class="td">四</div> 43 <div class="td">{{getDayList[4]}}</div>
43 <div class="td">五</div> 44 <div class="td">{{getDayList[5]}}</div>
44 <div class="td" :class="{'disable':!weekend}">六</div> 45 <div class="td" :class="{'disable':!weekend}">{{getDayList[6]}}</div>
45 </div> 46 </div>
46 <!-- 日历主体 --> 47 <!-- 日历主体 -->
47 <div class="tr"> 48 <div class="tr">
...@@ -58,7 +59,7 @@ ...@@ -58,7 +59,7 @@
58 <div class="tr"> 59 <div class="tr">
59 <div class="td" v-for="(item,index) in 12" :key="index"> 60 <div class="td" v-for="(item,index) in 12" :key="index">
60 <div @click="selectMonth(item || '')" class="pointer point "> 61 <div @click="selectMonth(item || '')" class="pointer point ">
61 {{item}}月 62 {{getMonthByIndex(item)}}
62 </div> 63 </div>
63 </div> 64 </div>
64 </div> 65 </div>
......
...@@ -4,6 +4,8 @@ import { ...@@ -4,6 +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'
8
7 export default { 9 export default {
8 data() { 10 data() {
9 return { 11 return {
...@@ -28,7 +30,9 @@ export default { ...@@ -28,7 +30,9 @@ export default {
28 } 30 }
29 } 31 }
30 }, 32 },
31 components: {}, 33 components: {
34 DatePicker
35 },
32 computed: { 36 computed: {
33 locale() { 37 locale() {
34 return this.$i18n.locale || 'tc'; 38 return this.$i18n.locale || 'tc';
......
...@@ -93,7 +93,7 @@ ...@@ -93,7 +93,7 @@
93 right: 1rem; 93 right: 1rem;
94 display: flex; 94 display: flex;
95 align-items: center; 95 align-items: center;
96 // bottom: 0; 96 // bottom: 0;
97 97
98 img { 98 img {
99 display: inline-block; 99 display: inline-block;
...@@ -151,7 +151,8 @@ ...@@ -151,7 +151,8 @@
151 } 151 }
152 152
153 .ipt-wrap { 153 .ipt-wrap {
154 width: 50%; 154 position: relative;
155 // width: 50%;
155 margin-left: 1.75rem; 156 margin-left: 1.75rem;
156 157
157 input { 158 input {
...@@ -242,4 +243,4 @@ input { ...@@ -242,4 +243,4 @@ input {
242 .disabled { 243 .disabled {
243 background-color: gray !important; 244 background-color: gray !important;
244 background-image:none !important; 245 background-image:none !important;
245 }
...\ No newline at end of file ...\ No newline at end of file
246 }
......
...@@ -73,12 +73,13 @@ ...@@ -73,12 +73,13 @@
73 </div> 73 </div>
74 74
75 <!-- 联络时间 --> 75 <!-- 联络时间 -->
76 <div class="form-item form-item3"> 76 <div class="pure-u-1 form-item form-item3">
77 <div class="label"> 77 <div class="label">
78 <div class="icon"><img src="@/assets/images/reservation/icon-re-calendar.png"></div>{{$t('complaintAcceptance.contactTime')}} 78 <div class="icon"><img src="@/assets/images/reservation/icon-re-calendar.png"></div>{{$t('complaintAcceptance.contactTime')}}
79 </div> 79 </div>
80 <div class="ipt-wrap"> 80 <div class="ipt-wrap ipt-wrap2">
81 <input class="ipt" type="date" :class="{err:errorTips.contactDateErr.length>0}" v-model="data.contactDate"> 81 <!-- <input class="ipt" type="date" :class="{err:errorTips.contactDateErr.length>0}" v-model="data.contactDate"> -->
82 <date-picker v-model="data.contactDate"></date-picker>
82 </div> 83 </div>
83 <div class="validator" v-if="errorTips.contactDateErr.length > 0"> 84 <div class="validator" v-if="errorTips.contactDateErr.length > 0">
84 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.contactDateErr}} 85 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.contactDateErr}}
......
...@@ -4,6 +4,8 @@ import { ...@@ -4,6 +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'
8
7 export default { 9 export default {
8 data() { 10 data() {
9 return { 11 return {
...@@ -31,7 +33,9 @@ export default { ...@@ -31,7 +33,9 @@ export default {
31 } 33 }
32 } 34 }
33 }, 35 },
34 components: {}, 36 components: {
37 DatePicker
38 },
35 computed: { 39 computed: {
36 locale() { 40 locale() {
37 return this.$i18n.locale || 'tc'; 41 return this.$i18n.locale || 'tc';
......
...@@ -30,7 +30,7 @@ input { ...@@ -30,7 +30,7 @@ input {
30 margin-bottom: 2.333333rem; 30 margin-bottom: 2.333333rem;
31 31
32 .label { 32 .label {
33 color: #f05a23; 33 color: $cOrange;
34 display: flex; 34 display: flex;
35 align-items: center; 35 align-items: center;
36 margin-bottom: .7rem; 36 margin-bottom: .7rem;
...@@ -88,7 +88,7 @@ input { ...@@ -88,7 +88,7 @@ input {
88 right: 1rem; 88 right: 1rem;
89 display: flex; 89 display: flex;
90 align-items: center; 90 align-items: center;
91 // bottom: 0; 91 // bottom: 0;
92 92
93 img { 93 img {
94 display: inline-block; 94 display: inline-block;
...@@ -125,10 +125,10 @@ input { ...@@ -125,10 +125,10 @@ input {
125 .active { 125 .active {
126 border: none; 126 border: none;
127 color: #ffffff; 127 color: #ffffff;
128 background-color: #f05a23; 128 background-color: $cOrange;
129 box-shadow: 0px 10px 13px 0 rgba(236, 100, 41, 0.2); 129 box-shadow: 0px 10px 13px 0 rgba(236, 100, 41, 0.2);
130 background-blend-mode: soft-light, ; 130 background-blend-mode: soft-light, ;
131 // background-image: linear-gradient(to top, #000000, #ffffff), linear-gradient(to bottom, #f05a23, #f05a23); 131 // background-image: linear-gradient(to top, #000000, #ffffff), linear-gradient(to bottom, $cOrange, $cOrange);
132 background-image: linear-gradient(to bottom, #f05f28, #f05021); 132 background-image: linear-gradient(to bottom, #f05f28, #f05021);
133 } 133 }
134 } 134 }
...@@ -210,7 +210,7 @@ input { ...@@ -210,7 +210,7 @@ input {
210 cursor: pointer; 210 cursor: pointer;
211 border: none; 211 border: none;
212 color: #ffffff; 212 color: #ffffff;
213 background-color: #f05a23; 213 background-color: $cOrange;
214 box-shadow: 0px 10px 13px 0 rgba(236, 100, 41, 0.2); 214 box-shadow: 0px 10px 13px 0 rgba(236, 100, 41, 0.2);
215 background-blend-mode: soft-light, ; 215 background-blend-mode: soft-light, ;
216 background-image: linear-gradient(to top, #000000, #ffffff), linear-gradient(to bottom, #ec6429, #ec6429); 216 background-image: linear-gradient(to top, #000000, #ffffff), linear-gradient(to bottom, #ec6429, #ec6429);
...@@ -219,4 +219,4 @@ input { ...@@ -219,4 +219,4 @@ input {
219 .disabled { 219 .disabled {
220 background-color: gray !important; 220 background-color: gray !important;
221 background-image:none !important; 221 background-image:none !important;
222 }
...\ No newline at end of file ...\ No newline at end of file
222 }
......
...@@ -3,100 +3,101 @@ ...@@ -3,100 +3,101 @@
3 <div class="reservation-container"> 3 <div class="reservation-container">
4 <div class="gird-g form"> 4 <div class="gird-g form">
5 5
6 <div class="pure-u-1 pure-u-md-1-2 form-item"> 6 <div class="pure-u-1 pure-u-md-1-2 form-item">
7 <div class="label"> 7 <div class="label">
8 <div class="icon"><img src="@/assets/images/reservation/icon-re-name.png"></div> {{$t('reservation.name')}} 8 <div class="icon"><img src="@/assets/images/reservation/icon-re-name.png"></div> {{$t('reservation.name')}}
9 </div> 9 </div>
10 <div class="ipt-wrap"> 10 <div class="ipt-wrap">
11 <input :placeholder="$t('reservation.namePlaceholder')" class="ipt" :class="{err : errorTips.e1.length > 0}" type="text" v-model="data.name"> 11 <input :placeholder="$t('reservation.namePlaceholder')" class="ipt" :class="{err : errorTips.e1.length > 0}" type="text" v-model="data.name">
12 </div> 12 </div>
13 <div class="validator" v-if="errorTips.e1.length > 0"> 13 <div class="validator" v-if="errorTips.e1.length > 0">
14 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e1}} 14 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e1}}
15 </div>
16 </div> 15 </div>
16 </div>
17 17
18 <div class="pure-u-1 pure-u-md-1-2 form-item"> 18 <div class="pure-u-1 pure-u-md-1-2 form-item">
19 <div class="label"> 19 <div class="label">
20 <div class="icon"><img src="@/assets/images/reservation/icon-re-contact.png"></div>{{$t('reservation.contactType')}} 20 <div class="icon"><img src="@/assets/images/reservation/icon-re-contact.png"></div>{{$t('reservation.contactType')}}
21 </div> 21 </div>
22 <div class="ipt-wrap"> 22 <div class="ipt-wrap">
23 <div class="down-arrow"></div> 23 <div class="down-arrow"></div>
24 <select class="ipt" v-model="data.contactType"> 24 <select class="ipt" v-model="data.contactType">
25 <option v-for="(item,index) in contactTypes" :key="index" :value="item">{{item}}</option> 25 <option v-for="(item,index) in contactTypes" :key="index" :value="item">{{item}}</option>
26 </select> 26 </select>
27 </div>
28 </div> 27 </div>
28 </div>
29 29
30 <div class="pure-u-1 pure-u-md-1-2 form-item"> 30 <div class="pure-u-1 pure-u-md-1-2 form-item">
31 <div class="label"> 31 <div class="label">
32 <div class="icon"><img src="@/assets/images/reservation/icon-re-phone.png"></div>{{$t('reservation.contact')}} 32 <div class="icon"><img src="@/assets/images/reservation/icon-re-phone.png"></div>{{$t('reservation.contact')}}
33 </div>
34 <div class="ipt-wrap">
35 <input :placeholder="$t('reservation.contactPlaceholder')" class="ipt" :class="{err : errorTips.e3.length > 0}" type="text" v-model="data.contactMethod">
36 </div>
37 <div class="validator" v-if="errorTips.e3.length > 0">
38 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e3}}
39 </div>
40 </div> 33 </div>
34 <div class="ipt-wrap">
35 <input :placeholder="$t('reservation.contactPlaceholder')" class="ipt" :class="{err : errorTips.e3.length > 0}" type="text" v-model="data.contactMethod">
36 </div>
37 <div class="validator" v-if="errorTips.e3.length > 0">
38 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e3}}
39 </div>
40 </div>
41 41
42 <div class="pure-u-1 pure-u-md-1-2 form-item"> 42 <div class="pure-u-1 pure-u-md-1-2 form-item">
43 <div class="label"> 43 <div class="label">
44 <div class="icon"><img src="@/assets/images/reservation/icon-re-clock.png"></div>{{$t('reservation.reservationType')}} 44 <div class="icon"><img src="@/assets/images/reservation/icon-re-clock.png"></div>{{$t('reservation.reservationType')}}
45 </div> 45 </div>
46 <div class="ipt-wrap"> 46 <div class="ipt-wrap">
47 <div class="down-arrow"></div> 47 <div class="down-arrow"></div>
48 <select class="ipt" v-model="data.reservationType"> 48 <select class="ipt" v-model="data.reservationType">
49 <option v-for="(item,index) in reservationTypes" :key="index" :value="item">{{item}}</option> 49 <option v-for="(item,index) in reservationTypes" :key="index" :value="item">{{item}}</option>
50 </select> 50 </select>
51 </div>
52 </div> 51 </div>
52 </div>
53 53
54 <div class="pure-u-1 form-item"> 54 <div class="pure-u-1 form-item">
55 <div class="label"> 55 <div class="label">
56 <div class="icon"><img src="@/assets/images/reservation/icon-re-arrow-reservation.png"></div>{{$t('reservation.reservationRemark')}} 56 <div class="icon"><img src="@/assets/images/reservation/icon-re-arrow-reservation.png"></div>{{$t('reservation.reservationRemark')}}
57 </div> 57 </div>
58 <div class="ipt-wrap"> 58 <div class="ipt-wrap">
59 <textarea :placeholder="$t('reservation.reservationRemarkPlaceholder')" class="ipt textarea" :class="{err : errorTips.e5.length > 0}" v-model="data.instruction"></textarea> 59 <textarea :placeholder="$t('reservation.reservationRemarkPlaceholder')" class="ipt textarea" :class="{err : errorTips.e5.length > 0}" v-model="data.instruction"></textarea>
60 </div> 60 </div>
61 <div class="validator" v-if="errorTips.e5.length > 0"> 61 <div class="validator" v-if="errorTips.e5.length > 0">
62 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e5}} 62 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e5}}
63 </div>
64 </div> 63 </div>
64 </div>
65 65
66 <div class="pure-u-1 form-item form-item2"> 66 <div class="pure-u-1 form-item form-item2">
67 <div class="label">
68 <div class="icon"><img src="@/assets/images/reservation/icon-re-custom.png"></div>{{$t('reservation.hkClient')}}
69 </div>
70 <div class="cont">
71 <div class="boo-btn pointer" :class="{active:isHkCus}" @click="isHkCus=true">{{$t('reservation.yes')}}</div>
72 <div class="boo-btn pointer" :class="{active:!isHkCus}" @click="isHkCus=false">{{$t('reservation.no')}}</div>
73 </div>
74 </div>
75
76 <!-- 联络时间 -->
77 <div class="pure-u-1 form-item">
78 <div class="form-item3">
67 <div class="label"> 79 <div class="label">
68 <div class="icon"><img src="@/assets/images/reservation/icon-re-custom.png"></div>{{$t('reservation.hkClient')}} 80 <div class="icon"><img src="@/assets/images/reservation/icon-re-calendar.png"></div>{{$t('reservation.contactTime')}}
81 </div>
82 <div class="ipt-wrap">
83 <!-- <input class="ipt" type="date" v-model="data.contactDate" :class="{err : errorTips.e7.length > 0}"> -->
84 <date-picker v-model="data.contactDate"></date-picker>
69 </div> 85 </div>
70 <div class="cont"> 86 <div class="validator" v-if="errorTips.e7.length > 0">
71 <div class="boo-btn pointer" :class="{active:isHkCus}" @click="isHkCus=true">{{$t('reservation.yes')}}</div> 87 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e7}}
72 <div class="boo-btn pointer" :class="{active:!isHkCus}" @click="isHkCus=false">{{$t('reservation.no')}}</div>
73 </div> 88 </div>
74 </div> 89 <div class="mt8">
75
76 <!-- 联络时间 -->
77 <div class="pure-u-1 form-item">
78 <div class="form-item3">
79 <div class="label"> 90 <div class="label">
80 <div class="icon"><img src="@/assets/images/reservation/icon-re-calendar.png"></div>{{$t('reservation.contactTime')}}
81 </div> 91 </div>
82 <div class="ipt-wrap"> 92 <!-- <div class="calendar">
83 <input class="ipt" type="date" v-model="data.contactDate" :class="{err : errorTips.e7.length > 0}">
84 </div>
85 <div class="validator" v-if="errorTips.e7.length > 0">
86 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e7}}
87 </div>
88 <div class="mt8">
89 <div class="label">
90 </div>
91 <!-- <div class="calendar">
92 <img src="@/assets/images/reservation/re-calendar.png"> 93 <img src="@/assets/images/reservation/re-calendar.png">
93 </div> --> 94 </div> -->
94 </div>
95 </div> 95 </div>
96 </div> 96 </div>
97
98 </div> 97 </div>
99 98
99 </div>
100
100 <div class="box notice"> 101 <div class="box notice">
101 <p class="notice-item"> 102 <p class="notice-item">
102 <img class="notice-item-icon" src="@/assets/images/reservation/icon-re-notice.png"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{$t('reservation.notice1')}} 103 <img class="notice-item-icon" src="@/assets/images/reservation/icon-re-notice.png"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{$t('reservation.notice1')}}
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 <template> 2 <template>
3 <div class="content"> 3 <div class="content">
4 <div class="date-wrap"> 4 <div class="date-wrap">
5 <date-picker v-model="value1"></date-picker> 5 <date-picker v-model="value1" ></date-picker>
6 </div> 6 </div>
7 <div>{{value1}}</div> 7 <div>{{value1}}</div>
8 </div> 8 </div>
......
...@@ -5,6 +5,7 @@ import { ...@@ -5,6 +5,7 @@ import {
5 } from '@/api/fetch-api.js' 5 } from '@/api/fetch-api.js'
6 6
7 import modalComp from '@/components/modal-comp/modal-comp.vue'; 7 import modalComp from '@/components/modal-comp/modal-comp.vue';
8 import DatePicker from '@/components/date-picker/date-picker.vue'
8 9
9 export default { 10 export default {
10 data() { 11 data() {
...@@ -41,7 +42,8 @@ export default { ...@@ -41,7 +42,8 @@ export default {
41 } 42 }
42 }, 43 },
43 components: { 44 components: {
44 modalComp 45 modalComp,
46 DatePicker
45 }, 47 },
46 computed: { 48 computed: {
47 locale() { 49 locale() {
...@@ -66,8 +68,7 @@ export default { ...@@ -66,8 +68,7 @@ export default {
66 this.modalContent = content; 68 this.modalContent = content;
67 this.modalVisiable = true; 69 this.modalVisiable = true;
68 }, 70 },
69 initData() { 71 initData() {},
70 },
71 onUpdateHandler() { 72 onUpdateHandler() {
72 let b1 = this.checkCnName(); 73 let b1 = this.checkCnName();
73 let b2 = this.checkIdNo(); 74 let b2 = this.checkIdNo();
...@@ -167,30 +168,30 @@ export default { ...@@ -167,30 +168,30 @@ export default {
167 message = this.i18n.infomationImprove.errorTips.e6; 168 message = this.i18n.infomationImprove.errorTips.e6;
168 let idNo = this.information.idNo + ""; 169 let idNo = this.information.idNo + "";
169 switch (this.information.idType) { 170 switch (this.information.idType) {
170 case "0": // 外國人永久居留身份證 171 case "0": // 外國人永久居留身份證
171 // if (/[a-z][A-Z]{3}[0-9]{12}/.test(idNo)) { 172 // if (/[a-z][A-Z]{3}[0-9]{12}/.test(idNo)) {
172 // message = ""; 173 // message = "";
173 // } 174 // }
174 message = ""; 175 message = "";
175 break; 176 break;
176 case "1": // 身份證 177 case "1": // 身份證
177 message = idNo.length == 18 ? "" : message; 178 message = idNo.length == 18 ? "" : message;
178 break; 179 break;
179 case "2": // 護照 180 case "2": // 護照
180 message = idNo.length > 3 && idNo.length < 50 ? "" : message; 181 message = idNo.length > 3 && idNo.length < 50 ? "" : message;
181 break; 182 break;
182 case "3": // 軍官證或士兵證 183 case "3": // 軍官證或士兵證
183 message = idNo.length > 6 && idNo.length < 50 ? "" : message; 184 message = idNo.length > 6 && idNo.length < 50 ? "" : message;
184 break; 185 break;
185 case "6": // 港澳通行證/回鄉證或台胞證 186 case "6": // 港澳通行證/回鄉證或台胞證
186 message = idNo.length > 5 && idNo.length < 50 ? "" : message; 187 message = idNo.length > 5 && idNo.length < 50 ? "" : message;
187 break; 188 break;
188 case "V": // 港澳台居民居住證 189 case "V": // 港澳台居民居住證
189 // if ((/8[1|2]0000\\d{11}/.text(idNo) && (/\\d{15}/.test(idNo) || /\\d{17}/.test(idNo)))) { 190 // if ((/8[1|2]0000\\d{11}/.text(idNo) && (/\\d{15}/.test(idNo) || /\\d{17}/.test(idNo)))) {
190 message = ""; 191 message = "";
191 // } 192 // }
192 break; 193 break;
193 case "W": //台灣居民居住證 194 case "W": //台灣居民居住證
194 // if ((/830000\\d{11}/.text(idNo) && (/\\d{15}/.test(idNo) || /\\d{17}/.test(idNo)))) { 195 // if ((/830000\\d{11}/.text(idNo) && (/\\d{15}/.test(idNo) || /\\d{17}/.test(idNo)))) {
195 message = ""; 196 message = "";
196 // } 197 // }
...@@ -230,5 +231,5 @@ export default { ...@@ -230,5 +231,5 @@ export default {
230 this.errorTips.e5 = ""; 231 this.errorTips.e5 = "";
231 } 232 }
232 }, 233 },
233 created() { } 234 created() {}
234 } 235 }
......
...@@ -175,6 +175,10 @@ ...@@ -175,6 +175,10 @@
175 letter-spacing: .1rem; 175 letter-spacing: .1rem;
176 } 176 }
177 177
178 .date{
179 width: 100%;
180 }
181
178 // 长文本 182 // 长文本
179 .textarea { 183 .textarea {
180 min-height: 8.75rem; 184 min-height: 8.75rem;
......
...@@ -47,7 +47,8 @@ ...@@ -47,7 +47,8 @@
47 <img src="@/assets/images/improve-infomation/icon-improve-infomation-date.png"> {{$t('infomationImprove.t3')}} 47 <img src="@/assets/images/improve-infomation/icon-improve-infomation-date.png"> {{$t('infomationImprove.t3')}}
48 </div> 48 </div>
49 <div class="ipt-wrap"> 49 <div class="ipt-wrap">
50 <input class="ipt" type="date" :class="{err : errorTips.e3.length > 0}" v-model="birthDate"> 50 <!-- <input class="ipt" type="date" :class="{err : errorTips.e3.length > 0}" v-model="birthDate"> -->
51 <date-picker class="date" v-model="birthDate"></date-picker>
51 </div> 52 </div>
52 <div class="validator" v-if="errorTips.e3.length > 0 "> 53 <div class="validator" v-if="errorTips.e3.length > 0 ">
53 <img src="@/assets/images/common/icon-notice.png" alt=""> {{errorTips.e3}} 54 <img src="@/assets/images/common/icon-notice.png" alt=""> {{errorTips.e3}}
......