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 {
}
.swiper-pagination-bullet-active {
background: #f05a23 !important;
background: $cOrange !important;
}
......
......@@ -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';
......
......@@ -93,7 +93,7 @@
right: 1rem;
display: flex;
align-items: center;
// bottom: 0;
// bottom: 0;
img {
display: inline-block;
......@@ -151,7 +151,8 @@
}
.ipt-wrap {
width: 50%;
position: relative;
// width: 50%;
margin-left: 1.75rem;
input {
......@@ -242,4 +243,4 @@ input {
.disabled {
background-color: gray !important;
background-image:none !important;
}
\ No newline at end of file
}
......
......@@ -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;
......@@ -88,7 +88,7 @@ input {
right: 1rem;
display: flex;
align-items: center;
// bottom: 0;
// bottom: 0;
img {
display: inline-block;
......@@ -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);
......@@ -219,4 +219,4 @@ input {
.disabled {
background-color: gray !important;
background-image:none !important;
}
\ No newline at end of file
}
......
......@@ -3,100 +3,101 @@
<div class="reservation-container">
<div class="gird-g form">
<div class="pure-u-1 pure-u-md-1-2 form-item">
<div class="label">
<div class="icon"><img src="@/assets/images/reservation/icon-re-name.png"></div> {{$t('reservation.name')}}
</div>
<div class="ipt-wrap">
<input :placeholder="$t('reservation.namePlaceholder')" class="ipt" :class="{err : errorTips.e1.length > 0}" type="text" v-model="data.name">
</div>
<div class="validator" v-if="errorTips.e1.length > 0">
<img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e1}}
</div>
<div class="pure-u-1 pure-u-md-1-2 form-item">
<div class="label">
<div class="icon"><img src="@/assets/images/reservation/icon-re-name.png"></div> {{$t('reservation.name')}}
</div>
<div class="ipt-wrap">
<input :placeholder="$t('reservation.namePlaceholder')" class="ipt" :class="{err : errorTips.e1.length > 0}" type="text" v-model="data.name">
</div>
<div class="validator" v-if="errorTips.e1.length > 0">
<img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e1}}
</div>
</div>
<div class="pure-u-1 pure-u-md-1-2 form-item">
<div class="label">
<div class="icon"><img src="@/assets/images/reservation/icon-re-contact.png"></div>{{$t('reservation.contactType')}}
</div>
<div class="ipt-wrap">
<div class="down-arrow"></div>
<select class="ipt" v-model="data.contactType">
<option v-for="(item,index) in contactTypes" :key="index" :value="item">{{item}}</option>
</select>
</div>
<div class="pure-u-1 pure-u-md-1-2 form-item">
<div class="label">
<div class="icon"><img src="@/assets/images/reservation/icon-re-contact.png"></div>{{$t('reservation.contactType')}}
</div>
<div class="ipt-wrap">
<div class="down-arrow"></div>
<select class="ipt" v-model="data.contactType">
<option v-for="(item,index) in contactTypes" :key="index" :value="item">{{item}}</option>
</select>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-2 form-item">
<div class="label">
<div class="icon"><img src="@/assets/images/reservation/icon-re-phone.png"></div>{{$t('reservation.contact')}}
</div>
<div class="ipt-wrap">
<input :placeholder="$t('reservation.contactPlaceholder')" class="ipt" :class="{err : errorTips.e3.length > 0}" type="text" v-model="data.contactMethod">
</div>
<div class="validator" v-if="errorTips.e3.length > 0">
<img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e3}}
</div>
<div class="pure-u-1 pure-u-md-1-2 form-item">
<div class="label">
<div class="icon"><img src="@/assets/images/reservation/icon-re-phone.png"></div>{{$t('reservation.contact')}}
</div>
<div class="ipt-wrap">
<input :placeholder="$t('reservation.contactPlaceholder')" class="ipt" :class="{err : errorTips.e3.length > 0}" type="text" v-model="data.contactMethod">
</div>
<div class="validator" v-if="errorTips.e3.length > 0">
<img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e3}}
</div>
</div>
<div class="pure-u-1 pure-u-md-1-2 form-item">
<div class="label">
<div class="icon"><img src="@/assets/images/reservation/icon-re-clock.png"></div>{{$t('reservation.reservationType')}}
</div>
<div class="ipt-wrap">
<div class="down-arrow"></div>
<select class="ipt" v-model="data.reservationType">
<option v-for="(item,index) in reservationTypes" :key="index" :value="item">{{item}}</option>
</select>
</div>
<div class="pure-u-1 pure-u-md-1-2 form-item">
<div class="label">
<div class="icon"><img src="@/assets/images/reservation/icon-re-clock.png"></div>{{$t('reservation.reservationType')}}
</div>
<div class="ipt-wrap">
<div class="down-arrow"></div>
<select class="ipt" v-model="data.reservationType">
<option v-for="(item,index) in reservationTypes" :key="index" :value="item">{{item}}</option>
</select>
</div>
</div>
<div class="pure-u-1 form-item">
<div class="label">
<div class="icon"><img src="@/assets/images/reservation/icon-re-arrow-reservation.png"></div>{{$t('reservation.reservationRemark')}}
</div>
<div class="ipt-wrap">
<textarea :placeholder="$t('reservation.reservationRemarkPlaceholder')" class="ipt textarea" :class="{err : errorTips.e5.length > 0}" v-model="data.instruction"></textarea>
</div>
<div class="validator" v-if="errorTips.e5.length > 0">
<img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e5}}
</div>
<div class="pure-u-1 form-item">
<div class="label">
<div class="icon"><img src="@/assets/images/reservation/icon-re-arrow-reservation.png"></div>{{$t('reservation.reservationRemark')}}
</div>
<div class="ipt-wrap">
<textarea :placeholder="$t('reservation.reservationRemarkPlaceholder')" class="ipt textarea" :class="{err : errorTips.e5.length > 0}" v-model="data.instruction"></textarea>
</div>
<div class="validator" v-if="errorTips.e5.length > 0">
<img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e5}}
</div>
</div>
<div class="pure-u-1 form-item form-item2">
<div class="pure-u-1 form-item form-item2">
<div class="label">
<div class="icon"><img src="@/assets/images/reservation/icon-re-custom.png"></div>{{$t('reservation.hkClient')}}
</div>
<div class="cont">
<div class="boo-btn pointer" :class="{active:isHkCus}" @click="isHkCus=true">{{$t('reservation.yes')}}</div>
<div class="boo-btn pointer" :class="{active:!isHkCus}" @click="isHkCus=false">{{$t('reservation.no')}}</div>
</div>
</div>
<!-- 联络时间 -->
<div class="pure-u-1 form-item">
<div class="form-item3">
<div class="label">
<div class="icon"><img src="@/assets/images/reservation/icon-re-custom.png"></div>{{$t('reservation.hkClient')}}
<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}"> -->
<date-picker v-model="data.contactDate"></date-picker>
</div>
<div class="cont">
<div class="boo-btn pointer" :class="{active:isHkCus}" @click="isHkCus=true">{{$t('reservation.yes')}}</div>
<div class="boo-btn pointer" :class="{active:!isHkCus}" @click="isHkCus=false">{{$t('reservation.no')}}</div>
<div class="validator" v-if="errorTips.e7.length > 0">
<img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e7}}
</div>
</div>
<!-- 联络时间 -->
<div class="pure-u-1 form-item">
<div class="form-item3">
<div class="mt8">
<div class="label">
<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}">
</div>
<div class="validator" v-if="errorTips.e7.length > 0">
<img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e7}}
</div>
<div class="mt8">
<div class="label">
</div>
<!-- <div class="calendar">
<!-- <div class="calendar">
<img src="@/assets/images/reservation/re-calendar.png">
</div> -->
</div>
</div>
</div>
</div>
</div>
<div class="box notice">
<p class="notice-item">
<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 @@
<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();
......@@ -167,30 +168,30 @@ export default {
message = this.i18n.infomationImprove.errorTips.e6;
let idNo = this.information.idNo + "";
switch (this.information.idType) {
case "0": // 外國人永久居留身份證
case "0": // 外國人永久居留身份證
// if (/[a-z][A-Z]{3}[0-9]{12}/.test(idNo)) {
// message = "";
// }
message = "";
break;
case "1": // 身份證
case "1": // 身份證
message = idNo.length == 18 ? "" : message;
break;
case "2": // 護照
case "2": // 護照
message = idNo.length > 3 && idNo.length < 50 ? "" : message;
break;
case "3": // 軍官證或士兵證
case "3": // 軍官證或士兵證
message = idNo.length > 6 && idNo.length < 50 ? "" : message;
break;
case "6": // 港澳通行證/回鄉證或台胞證
case "6": // 港澳通行證/回鄉證或台胞證
message = idNo.length > 5 && idNo.length < 50 ? "" : message;
break;
case "V": // 港澳台居民居住證
case "V": // 港澳台居民居住證
// if ((/8[1|2]0000\\d{11}/.text(idNo) && (/\\d{15}/.test(idNo) || /\\d{17}/.test(idNo)))) {
message = "";
// }
break;
case "W": //台灣居民居住證
case "W": //台灣居民居住證
// if ((/830000\\d{11}/.text(idNo) && (/\\d{15}/.test(idNo) || /\\d{17}/.test(idNo)))) {
message = "";
// }
......@@ -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}}
......