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 {
}
.swiper-pagination-bullet-active {
background: #f05a23 !important;
background: $cOrange !important;
}
......
......@@ -8,98 +8,103 @@ module.exports = {
zh: 'Chinese',
en: 'English'
},
glbalTips : {
sessionLost : "为了更好的体验，需要您登录后再进行此操作"
glbalTips: {
sessionLost: "为了更好的体验，需要您登录后再进行此操作"
},
form: {
datePicker: {
datePlaceholder: "please select date"
}
},
nav: {
loginData: {
name: "login",
path: "",
list: [{
name: "register",
path: "/register",
type: "noAuth",
value: ""
}, {
name: "login",
path: "/login",
type: "noAuth",
value: ""
},
{
name: "modify password",
path: "/password/reset",
type: "auth",
value: ""
},
{
name: "logout",
path: "",
type: "auth",
value: "logout"
},
name: "register",
path: "/register",
type: "noAuth",
value: ""
}, {
name: "login",
path: "/login",
type: "noAuth",
value: ""
},
{
name: "modify password",
path: "/password/reset",
type: "auth",
value: ""
},
{
name: "logout",
path: "",
type: "auth",
value: "logout"
},
]
},
navList: [{
name: "Product description",
path: "/product",
list: []
},
{
name: "Customer service",
path: "/custom/product",
list: [{
name: "Contact us",
path: "/custom/service?q=m1"
},
{
name: "Pay premium",
path: "/custom/service?q=m2"
},
{
name: "Query policy",
path: "/custom/service?q=m3"
name: "Product description",
path: "/product",
list: []
},
{
name: "Change policy",
path: "/custom/service?q=m41"
name: "Customer service",
path: "/custom/product",
list: [{
name: "Contact us",
path: "/custom/service?q=m1"
},
{
name: "Pay premium",
path: "/custom/service?q=m2"
},
{
name: "Query policy",
path: "/custom/service?q=m3"
},
{
name: "Change policy",
path: "/custom/service?q=m41"
},
{
name: "Claim report",
path: "/custom/service?q=m5"
},
{
name: "Reservation service",
path: "/custom/service?q=m6"
},
{
name: "Suggestions",
path: "/custom/service?q=m7"
},
{
name: "Common form",
path: "/custom/service?q=m8"
},
]
},
{
name: "Claim report",
path: "/custom/service?q=m5"
name: "News",
path: "/news/list",
list: []
},
{
name: "Reservation service",
path: "/custom/service?q=m6"
},
{
name: "Suggestions",
path: "/custom/service?q=m7"
},
{
name: "Common form",
path: "/custom/service?q=m8"
},
]
},
{
name: "News",
path: "/news/list",
list: []
},
{
name: "About",
path: "",
list: [{
name: "Company",
path: "/profile"
},
{
name: "Leaders",
path: ""
name: "About",
path: "",
list: [{
name: "Company",
path: "/profile"
},
{
name: "Leaders",
path: ""
},
]
},
]
},
]
},
footer: {
......@@ -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: {
......@@ -382,71 +387,71 @@ module.exports = {
head4: "附件",
download: "下載文檔",
form: [{
type: "繳費類",
list: [{
name: "「電子入賬服務」及銀行戶口<br>直接付款授權申請",
desc: "申請設立「 電子入賬服務」 及銀行戶口<br>直接付款授權時須提供",
download: "",
type: "繳費類",
list: [{
name: "「電子入賬服務」及銀行戶口<br>直接付款授權申請",
desc: "申請設立「 電子入賬服務」 及銀行戶口<br>直接付款授權時須提供",
download: "",
},
{
name: "信用卡戶口直接付款授權書",
desc: "申請信用卡戶口直接付款授權時須提供",
download: "",
}
]
},
{
name: "信用卡戶口直接付款授權書",
desc: "申請信用卡戶口直接付款授權時須提供",
download: "",
}
]
},
{
type: "保單變更類",
list: [{
name: "保險合同解除申請書",
desc: "退保、猶豫期退保業務適用",
download: "",
},
{
name: "保險合同變更申請書（ 保單貸款還款類）",
desc: "保單貸款、還款業務適用",
download: "",
type: "保單變更類",
list: [{
name: "保險合同解除申請書",
desc: "退保、猶豫期退保業務適用",
download: "",
},
{
name: "保險合同變更申請書（ 保單貸款還款類）",
desc: "保單貸款、還款業務適用",
download: "",
},
{
name: "保險合同變更申請書（ 保險合同計劃變更類）",
desc: "加保、減保、新增附險、復效等業務適用",
download: "",
},
{
name: "保險合同變更申請書（ 客戶信息變更類）",
desc: "基本信息變更業務適用",
download: "",
},
{
name: "保險合同變更申請書（ 客戶權益變更類）",
desc: "交費方式、自墊選擇權變更、補發等業務適用",
download: "",
},
{
name: "授權委托書",
desc: "委托他人代辦時須提供",
download: "",
},
{
name: "稅收聲明",
desc: "CRS要求",
download: "",
},
{
name: "健康告知",
desc: "須二次核保的業務須提供",
download: "",
}
]
},
{
name: "保險合同變更申請書（ 保險合同計劃變更類）",
desc: "加保、減保、新增附險、復效等業務適用",
download: "",
type: "理賠類",
list: [{
name: "理賠申請書",
desc: "紙質申請的應備文件",
download: "",
}]
},
{
name: "保險合同變更申請書（ 客戶信息變更類）",
desc: "基本信息變更業務適用",
download: "",
},
{
name: "保險合同變更申請書（ 客戶權益變更類）",
desc: "交費方式、自墊選擇權變更、補發等業務適用",
download: "",
},
{
name: "授權委托書",
desc: "委托他人代辦時須提供",
download: "",
},
{
name: "稅收聲明",
desc: "CRS要求",
download: "",
},
{
name: "健康告知",
desc: "須二次核保的業務須提供",
download: "",
}
]
},
{
type: "理賠類",
list: [{
name: "理賠申請書",
desc: "紙質申請的應備文件",
download: "",
}]
},
]
},
policyChangeGuide: {
......@@ -458,100 +463,100 @@ module.exports = {
head5: "應備材料",
download: "下載文檔",
form: [{
project: "退保",
content: "在猶豫期後解除合同，公司將退還保單現金價值或未滿期凈保費。（待產品精算確認）",
applicant: "投保人",
receptionTime: "保單效力終止前",
materialList: [{
name: "保險單",
},
{
name: "申請書",
type: 1,
},
{
name: "投保人有效身份證件",
},
{
name: "存折银行卡相关",
}
],
},
{
project: "猶豫期退保",
content: "在猶豫期內提出解除合同，公司會無息退還全部保費",
applicant: "投保人",
receptionTime: "猶豫期結束前",
materialList: [{
name: "保險單",
},
{
name: "申請書",
type: 1,
project: "退保",
content: "在猶豫期後解除合同，公司將退還保單現金價值或未滿期凈保費。（待產品精算確認）",
applicant: "投保人",
receptionTime: "保單效力終止前",
materialList: [{
name: "保險單",
},
{
name: "申請書",
type: 1,
},
{
name: "投保人有效身份證件",
},
{
name: "存折银行卡相关",
}
],
},
{
name: "投保人有效身份證件",
project: "猶豫期退保",
content: "在猶豫期內提出解除合同，公司會無息退還全部保費",
applicant: "投保人",
receptionTime: "猶豫期結束前",
materialList: [{
name: "保險單",
},
{
name: "申請書",
type: 1,
},
{
name: "投保人有效身份證件",
},
{
name: "存折银行卡相关",
},
{
name: "首期保費發票",
}
],
},
{
name: "存折银行卡相关",
project: "客戶資料變更",
projectType: 1,
path: "/custom/service",
query: {
q: "m42"
},
content: "投保人、受保人、受益人的個人信息變更",
applicant: "投保人",
receptionTime: "不限",
materialList: [{
name: "申請書",
type: 1,
},
{
name: "必要的證明材料",
}
],
},
{
name: "首期保費發票",
}
],
},
{
project: "客戶資料變更",
projectType: 1,
path: "/custom/service",
query: {
q: "m42"
},
content: "投保人、受保人、受益人的個人信息變更",
applicant: "投保人",
receptionTime: "不限",
materialList: [{
name: "申請書",
type: 1,
project: "聯系方式變更",
projectType: 1,
path: "/custom/service",
query: {
q: "m43"
},
content: "地址、電話等信息的變更",
applicant: "投保人",
receptionTime: "不限",
materialList: [{
name: "申請書",
type: 1,
},
{
name: "投保人有效身份證件",
}
],
},
{
name: "必要的證明材料",
}
],
},
{
project: "聯系方式變更",
projectType: 1,
path: "/custom/service",
query: {
q: "m43"
project: "交費方式變更",
content: "更改保單的續期交費方式或交費賬號",
applicant: "投保人",
receptionTime: "保單交費期滿前",
materialList: [{
name: "申請書",
type: 1,
},
{
name: "保險單",
}
],
},
content: "地址、電話等信息的變更",
applicant: "投保人",
receptionTime: "不限",
materialList: [{
name: "申請書",
type: 1,
},
{
name: "投保人有效身份證件",
}
],
},
{
project: "交費方式變更",
content: "更改保單的續期交費方式或交費賬號",
applicant: "投保人",
receptionTime: "保單交費期滿前",
materialList: [{
name: "申請書",
type: 1,
},
{
name: "保險單",
}
],
},
]
},
policyChangeContact: {
......@@ -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';
......
......@@ -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}}
......