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
Expand all
Inline Side-by-side
Showing 17 changed files with 198 additions and 119 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
......
...@@ -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}}
......