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

@@ -356,7 +356,7 @@ textarea {
 }
 
 .swiper-pagination-bullet-active {
-  background: #f05a23 !important;
+  background: $cOrange !important;
 }
 
 

@@ -8,8 +8,13 @@ module.exports = {
 		zh: 'Chinese',
 		en: 'English'
 	},
-	glbalTips : {
-		sessionLost : "为了更好的体验，需要您登录后再进行此操作"
+	glbalTips: {
+		sessionLost: "为了更好的体验，需要您登录后再进行此操作"
+	},
+	form: {
+		datePicker: {
+			datePlaceholder: "please select date"
+		}
 	},
 	nav: {
 		loginData: {
@@ -285,7 +290,7 @@ module.exports = {
 				value: "W"
 			}]
 		},
-		successMsg : "更新成功",
+		successMsg: "更新成功",
 		errorTips: {
 			e1: "請填寫姓名信息",
 			e2: "請選擇性別",
@@ -329,10 +334,10 @@ module.exports = {
 		contactTime: "期望聯絡時間",
 		notice1: "本表格所收集的個人資料根據「平安人壽香港個人資料收集聲明」處理及只會被用作於聯絡 閣下之用。然而所收集的個人資料未經您明確授權將不會轉移至「平安人壽香港個人資料收集聲明」列明以外之第三者機構。您可選擇不向我們提供所需的個人資料，惟這樣可能導致我們不能聯絡您。您亦可根據「平安人壽香港個人資料收集聲明」之權利查閱及更正個人資料。",
 		notice2: "本人現確認明白並同意本人的個人資料根據中銀人壽個人資料收集聲明作以上述用途。",
-		contactTypes : ['電話','電郵'],
-		errorTips : {
-			e1 : "請填寫該項內容",
-			e2 : "請填寫正確的聯繫方式"
+		contactTypes: ['電話', '電郵'],
+		errorTips: {
+			e1: "請填寫該項內容",
+			e2: "請填寫正確的聯繫方式"
 		},
 	},
 	reservation: {
@@ -560,10 +565,10 @@ module.exports = {
 		email: "E-Mail",
 		checkTips: "本人不同意接收宣傳信息",
 		submit: "確認修改",
-		errorTips : {
-			e1 : "請填寫正確的聯繫電話",
-			e2 : "請填寫聯繫地址",
-			e3 : "請填寫正確的E-Mail地址"
+		errorTips: {
+			e1: "請填寫正確的聯繫電話",
+			e2: "請填寫聯繫地址",
+			e3: "請填寫正確的E-Mail地址"
 		}
 	},
 	policyChangeInformation: {
@@ -672,11 +677,11 @@ module.exports = {
 		},
 		reservation: {
 			submitBtn: '確認',
-			contactTypes : ['電話'],
-			reservationTypes: ['投保咨詢','代辦保單變更'],
-			errorTips : {
-				e1 : "請填寫該項內容",
-				e2 : "請填寫正確的聯繫方式"
+			contactTypes: ['電話'],
+			reservationTypes: ['投保咨詢', '代辦保單變更'],
+			errorTips: {
+				e1: "請填寫該項內容",
+				e2: "請填寫正確的聯繫方式"
 			}
 		}
 	}

@@ -11,6 +11,11 @@ module.exports = {
 	glbalTips : {
 		sessionLost : "為了更好的體驗，需要您登錄後再進行此操作"
 	},
+	form: {
+		datePicker: {
+			datePlaceholder: "请选择日期"
+		}
+	},
 	nav: {
 		loginData: {
 			name: "登入",

@@ -11,6 +11,11 @@ module.exports = {
 	glbalTips: {
 		sessionLost: "为了更好的体验，需要您登录后再进行此操作"
 	},
+	form: {
+		datePicker: {
+			datePlaceholder: "请选择日期"
+		}
+	},
 	nav: {
 		loginData: {
 			name: "登陆",

@@ -19,12 +19,24 @@ export default {
 			type: Boolean,
 			default: false
 		},
+		// 需要过滤的日期列表 格式 ["yyyy-MM-dd","yyyy-MM-dd"]
 		filterDates: {
 			type: Array,
 			default () {
 				return [] // ["2019-11-26", "2019-11-28"]
 			}
+		},
+		/**
+		 * 占位符
+		 * 1.默认空格字符串 " " 即视觉上无内容
+		 * 2.空字符串 ""  使用默认国际化
+		 * 3.自定义传值
+		 */
+		placeholder: {
+			type: String,
+			default: " "
 		}
+
 	},
 	data() {
 		return {
@@ -43,6 +55,45 @@ export default {
 		}
 	},
 	components: {},
+	computed: {
+		locale() {
+			return this.$i18n.locale || 'tc';
+		},
+		i18n() {
+			return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {};
+		},
+		getDayList() {
+			if (this.locale == 'en') {
+				return ["Sun", "Mon", "Tue", "Wen", "Thu", "Fri", "Sat"]
+			} else {
+				return ["日", "一", "二", "三", "四", "五", "六"]
+			}
+		},
+		getMonthList() {
+			if (this.locale == 'en') {
+				return ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
+			} else {
+				return ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]
+			}
+		},
+		// 年月
+		getDateType1() {
+			if (this.locale == 'en') {
+				let date = Date.parse(`${this.month}/${this.date}/${this.year}`);
+				return date.toString('MMM , yyyy');
+			} else {
+				return `${this.year}年${this.month}月`
+			}
+		},
+		// 年
+		getDateType2() {
+			if (this.locale == 'en') {
+				return `${this.year}`
+			} else {
+				return `${this.year}年`
+			}
+		}
+	},
 	methods: {
 		/**
 		 * 画月历图
@@ -180,7 +231,6 @@ export default {
 
 		// 计算year渲染列表
 		refreshYearList() {
-
 			let yearPage = this.yearPage;
 			if (yearPage <= 0) return;
 			let yearList = [];
@@ -202,6 +252,10 @@ export default {
 			this.yearPage = yearPage;
 			this.refreshYearList();
 		},
+		getMonthByIndex(index) {
+			let monthList = this.getMonthList;
+			return monthList[index - 1];
+		},
 		// 选择类型 年/月/日
 		onTypeHandler() {
 			let dateType = this.dateType;

@@ -2,9 +2,6 @@
 
 .comp {
   position: relative;
-  height: 100px;
-
-
 }
 
 // 日历容器
@@ -113,9 +110,9 @@
       }
 
       .point {
-        width: 51px;
-        height: 51px;
-        line-height: 51px;
+        width: 120px;
+        height: 64px;
+        line-height: 64px;
       }
     }
   }

@@ -3,7 +3,7 @@
 	<div class="comp">
 		<div class="date-mask" v-if="visible" @click="showCalendar()"></div>
 		<div class="ipt-wrap">
-			<input v-bind:value="value" v-on:input="$emit('input', $event.target.value)" placeholder="请选择日期" @click="showCalendar(true)" class="ipt" type="type" readonly="readonly">
+			<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')">
 		</div>
 		<div v-if="visible" class="date-wrap">
 			<div class="calendar-wrap">
@@ -16,10 +16,11 @@
 						<div @click="onTypeHandler()" class="date">
 							<span class="pointer">
 								<template v-if="dateType == 1">
-									{{year}}年{{month}}月
+									<!-- {{year}}年{{month}}月 -->
+									{{getDateType1}}
 								</template>
 								<template v-if="dateType == 2">
-									{{year}}年
+									{{getDateType2}}
 								</template>
 								<template v-if="dateType == 3">
 									{{yearRange}}
@@ -35,13 +36,13 @@
 				<div v-if="dateType == 1" class="con day">
 					<!-- 日历表头 -->
 					<div class="th tr">
-						<div class="td" :class="{'disable':!weekend}">日</div>
-						<div class="td">一</div>
-						<div class="td">二</div>
-						<div class="td">三</div>
-						<div class="td">四</div>
-						<div class="td">五</div>
-						<div class="td" :class="{'disable':!weekend}">六</div>
+						<div class="td" :class="{'disable':!weekend}">{{getDayList[0]}}</div>
+						<div class="td">{{getDayList[1]}}</div>
+						<div class="td">{{getDayList[2]}}</div>
+						<div class="td">{{getDayList[3]}}</div>
+						<div class="td">{{getDayList[4]}}</div>
+						<div class="td">{{getDayList[5]}}</div>
+						<div class="td" :class="{'disable':!weekend}">{{getDayList[6]}}</div>
 					</div>
 					<!-- 日历主体 -->
 					<div class="tr">
@@ -58,7 +59,7 @@
 					<div class="tr">
 						<div class="td" v-for="(item,index) in 12" :key="index">
 							<div @click="selectMonth(item || '')" class="pointer point ">
-								{{item}}月
+								{{getMonthByIndex(item)}}
 							</div>
 						</div>
 					</div>

@@ -4,6 +4,8 @@ import {
 	httpPost
 } from '@/api/fetch-api.js'
 
+import DatePicker from '@/components/date-picker/date-picker.vue'
+
 export default {
 	data() {
 		return {
@@ -28,7 +30,9 @@ export default {
 			}
 		}
 	},
-	components: {},
+	components: {
+		DatePicker
+	},
 	computed: {
 		locale() {
 			return this.$i18n.locale || 'tc';

@@ -151,7 +151,8 @@
     }
 
     .ipt-wrap {
-      width: 50%;
+      position: relative;
+      // width: 50%;
       margin-left: 1.75rem;
 
       input {

@@ -73,12 +73,13 @@
 			</div>
 
 			<!-- 联络时间 -->
-			<div class="form-item form-item3">
+			<div class="pure-u-1 form-item form-item3">
 				<div class="label">
 					<div class="icon"><img src="@/assets/images/reservation/icon-re-calendar.png"></div>{{$t('complaintAcceptance.contactTime')}}
 				</div>
-				<div class="ipt-wrap">
-					<input  class="ipt" type="date" :class="{err:errorTips.contactDateErr.length>0}" v-model="data.contactDate">
+				<div class="ipt-wrap ipt-wrap2">
+					<!-- <input  class="ipt" type="date" :class="{err:errorTips.contactDateErr.length>0}" v-model="data.contactDate"> -->
+					<date-picker v-model="data.contactDate"></date-picker>
 				</div>
 				<div class="validator" v-if="errorTips.contactDateErr.length > 0">
 					<img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.contactDateErr}}

@@ -4,6 +4,8 @@ import {
 	httpPost
 } from '@/api/fetch-api.js'
 
+import DatePicker from '@/components/date-picker/date-picker.vue'
+
 export default {
 	data() {
 		return {
@@ -31,7 +33,9 @@ export default {
 			}
 		}
 	},
-	components: {},
+	components: {
+		DatePicker
+	},
 	computed: {
 		locale() {
 			return this.$i18n.locale || 'tc';

@@ -30,7 +30,7 @@ input {
     margin-bottom: 2.333333rem;
 
     .label {
-      color: #f05a23;
+      color: $cOrange;
       display: flex;
       align-items: center;
       margin-bottom: .7rem;
@@ -125,10 +125,10 @@ input {
       .active {
         border: none;
         color: #ffffff;
-        background-color: #f05a23;
+        background-color: $cOrange;
         box-shadow: 0px 10px 13px 0 rgba(236, 100, 41, 0.2);
         background-blend-mode: soft-light, ;
-        // background-image: linear-gradient(to top, #000000, #ffffff), linear-gradient(to bottom, #f05a23, #f05a23);
+        // background-image: linear-gradient(to top, #000000, #ffffff), linear-gradient(to bottom, $cOrange, $cOrange);
         background-image: linear-gradient(to bottom, #f05f28, #f05021);
       }
     }
@@ -210,7 +210,7 @@ input {
   cursor: pointer;
   border: none;
   color: #ffffff;
-  background-color: #f05a23;
+  background-color: $cOrange;
   box-shadow: 0px 10px 13px 0 rgba(236, 100, 41, 0.2);
   background-blend-mode: soft-light, ;
   background-image: linear-gradient(to top, #000000, #ffffff), linear-gradient(to bottom, #ec6429, #ec6429);

@@ -80,7 +80,8 @@
 						<div class="icon"><img src="@/assets/images/reservation/icon-re-calendar.png"></div>{{$t('reservation.contactTime')}}
 					</div>
 					<div class="ipt-wrap">
-							<input class="ipt" type="date" v-model="data.contactDate" :class="{err : errorTips.e7.length > 0}">
+						<!-- <input class="ipt" type="date" v-model="data.contactDate" :class="{err : errorTips.e7.length > 0}"> -->
+						<date-picker v-model="data.contactDate"></date-picker>
 					</div>
 					<div class="validator" v-if="errorTips.e7.length > 0">
 						<img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e7}}

@@ -2,7 +2,7 @@
 <template>
 	<div class="content">
 		<div class="date-wrap">
-			<date-picker v-model="value1"></date-picker>
+			<date-picker v-model="value1" ></date-picker>
 		</div>
 		<div>{{value1}}</div>
 	</div>

@@ -5,6 +5,7 @@ import {
 } from '@/api/fetch-api.js'
 
 import modalComp from '@/components/modal-comp/modal-comp.vue';
+import DatePicker from '@/components/date-picker/date-picker.vue'
 
 export default {
 	data() {
@@ -41,7 +42,8 @@ export default {
 		}
 	},
 	components: {
-		modalComp
+		modalComp,
+		DatePicker
 	},
 	computed: {
 		locale() {
@@ -66,8 +68,7 @@ export default {
 			this.modalContent = content;
 			this.modalVisiable = true;
 		},
-		initData() {
-		},
+		initData() {},
 		onUpdateHandler() {
 			let b1 = this.checkCnName();
 			let b2 = this.checkIdNo();
@@ -230,5 +231,5 @@ export default {
 			this.errorTips.e5 = "";
 		}
 	},
-	created() { }
+	created() {}
 }

@@ -175,6 +175,10 @@
         letter-spacing: .1rem;
       }
 
+      .date{
+        width: 100%;
+      }
+
       // 长文本
       .textarea {
         min-height: 8.75rem;

@@ -47,7 +47,8 @@
 							<img src="@/assets/images/improve-infomation/icon-improve-infomation-date.png"> {{$t('infomationImprove.t3')}}
 						</div>
 						<div class="ipt-wrap">
-							<input class="ipt" type="date" :class="{err : errorTips.e3.length > 0}" v-model="birthDate">
+							<!-- <input class="ipt" type="date" :class="{err : errorTips.e3.length > 0}" v-model="birthDate"> -->
+							<date-picker class="date" v-model="birthDate"></date-picker>
 						</div>
 						<div class="validator" v-if="errorTips.e3.length > 0 ">
 							<img src="@/assets/images/common/icon-notice.png" alt=""> {{errorTips.e3}}