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 136 additions and 52 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,8 +8,13 @@ module.exports = { ...@@ -8,8 +8,13 @@ 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: {
...@@ -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: {
...@@ -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';
......
...@@ -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 {
......
...@@ -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;
...@@ -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);
......
...@@ -80,7 +80,8 @@ ...@@ -80,7 +80,8 @@
80 <div class="icon"><img src="@/assets/images/reservation/icon-re-calendar.png"></div>{{$t('reservation.contactTime')}} 80 <div class="icon"><img src="@/assets/images/reservation/icon-re-calendar.png"></div>{{$t('reservation.contactTime')}}
81 </div> 81 </div>
82 <div class="ipt-wrap"> 82 <div class="ipt-wrap">
83 <input class="ipt" type="date" v-model="data.contactDate" :class="{err : errorTips.e7.length > 0}"> 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>
84 </div> 85 </div>
85 <div class="validator" v-if="errorTips.e7.length > 0"> 86 <div class="validator" v-if="errorTips.e7.length > 0">
86 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e7}} 87 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e7}}
......
...@@ -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();
...@@ -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}}
......