Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
68150c6b by simon
Options

默认提交

1 parent a0f4a8df
Inline Side-by-side
Showing 8 changed files with 311 additions and 23 deletions

6.52 KB | W: | H:

4.34 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
......@@ -7,28 +7,39 @@ import {
import Date from '@/utils/date.js';
export default {
inheritAttrs: false,
props: {
// 周末是否可选
value: {
type: String,
default: ""
},
// 周末是否可选
weekend: {
type: Boolean,
default: false
},
filterDates: {
type: Array,
default(){
return ["2019-11-26", "2019-11-28"]
default () {
return [] // ["2019-11-26", "2019-11-28"]
}
}
},
data() {
return {
key: 'value',
dateValue: "", // 日期value yyyy-MM-dd
dateType: 1, // 选择显示类型 1.日 2.月 3.年
year: 1970,
month: 1, // (1~12)
date: 1, // (1~31)
day: 0, // (0~6)
yearPage: 1,
yearList: [],
yearRange: "", // 年份范围
// 用户渲染的数据
fortmatMonthData: [],
visible: false,
}
},
components: {},
......@@ -44,7 +55,7 @@ export default {
* 输出数据
* fortmatMonthData 用于渲染日历的数据
*/
formatMonth() {
formatDate() {
let result = [];
let year = this.year;
let month = this.month;
......@@ -99,7 +110,7 @@ export default {
this.year = targetDate.getFullYear();
this.month = targetDate.getMonth() + 1;
this.date = targetDate.getDate();
this.formatMonth();
this.formatDate();
},
// 上一个月
prevMonth() {
......@@ -115,7 +126,7 @@ export default {
let targetDate = Date.parse(dateStr).addYears(value);
this.year = targetDate.getFullYear();
this.month = targetDate.getMonth() + 1;
this.formatMonth();
this.formatDate();
},
// 上一年
prevYear() {
......@@ -125,11 +136,116 @@ export default {
nextYear() {
this.addYear(1);
},
// 选择日期
selectDay(item) {
if (!item) return;
let curData = item;
let date = curData.date;
this.date = date;
let curDate = curData.date;
this.date = curDate;
let {
year,
month,
date
} = this;
this.dateValue = `${year}-${month}-${date}`;
this.showCalendar();
},
// 选择月份
selectMonth(item) {
if (!item) return;
this.dateType = 1;
this.month = item;
this.formatDate();
let {
year,
month,
date
} = this;
this.dateValue = `${year}-${month}-${date}`;
},
// 选择年份
selectYear(item) {
if (!item) return;
this.dateType = 2;
let curData = item;
let curYear = curData.year;
this.year = curYear;
let {
year,
month,
date,
} = this;
this.dateValue = `${year}-${month}-${date}`;
},
// 计算year渲染列表
refreshYearList() {
let yearPage = this.yearPage;
if (yearPage <= 0) return;
let yearList = [];
for (let index = 0; index < 12; index++) {
yearList.push({
year: yearPage * 10 + index - 1,
disable: index == 0 || index == 11
});
}
this.yearRange = `${yearPage * 10 + 0 }-${yearPage * 10 + 9 }`
this.yearList = yearList;
},
// 显示日历
showCalendar(boo) {
this.visible = boo;
this.dateType = 1;
let year = this.year;
let yearPage = Math.floor(year / 10);
this.yearPage = yearPage;
this.refreshYearList();
},
// 选择类型 年/月/日
onTypeHandler() {
let dateType = this.dateType;
if (dateType == 1) {
this.dateType = 2;
return;
}
if (dateType == 2) {
this.dateType = 3;
this.refreshYearList();
return;
}
},
// 上下按钮
onPrevHandler() {
if (this.dateType == 1) {
this.prevMonth();
return;
}
if (this.dateType == 2) {
this.prevYear();
return;
}
if (this.dateType == 3) {
this.yearPage--;
this.refreshYearList();
return;
}
},
onNextHandler() {
console.log("this.dateType:", this.dateType);
if (this.dateType == 1) {
this.nextMonth();
return;
}
if (this.dateType == 2) {
this.nextYear();
return;
}
if (this.dateType == 3) {
this.yearPage++;
this.refreshYearList();
return;
}
},
initData() {}
},
......@@ -140,6 +256,14 @@ export default {
this.year = today.getFullYear();
this.month = today.getMonth() + 1;
this.date = today.getDate();
this.formatMonth();
this.formatDate();
},
watch: {
value(val) {
this.dateValue = val;
},
dateValue(val) {
this.$emit('input', val)
}
}
}
......
@import '@/styles/_support';
.comp {
position: relative;
height: 100px;
}
// 日历容器
.date-wrap {
......@@ -8,7 +15,13 @@
// 日历
.calendar-wrap {
position: relative;
position: absolute;
// position: relative;
z-index: 1101;
margin-top: 12px;
margin-left: 0px;
@extend .bb;
width: 450px;
height: 320px;
......@@ -41,6 +54,7 @@
}
.con {
@extend .bb;
margin: 12px auto 0;
// 表头
......@@ -58,7 +72,6 @@
@extend .flb;
justify-content: flex-start;
flex-wrap: wrap;
// margin-top: 0px;
.td {
text-align: center;
......@@ -78,11 +91,33 @@
border-radius: 100%;
}
// 不需要选择状态
.sel {
color: #ffffff;
background-color: $cOrange;
}
}
// 日
.day {}
.month,.year {
margin: 36px auto 0;
.tr {
.td {
width: calc(100%/4);
height: 64px;
}
}
.point {
width: 51px;
height: 51px;
line-height: 51px;
}
}
}
}
......@@ -90,3 +125,80 @@
color: #dcdddd !important;
cursor: default !important;
}
.ipt-wrap {
position: relative;
display: flex;
justify-content: space-between;
z-index: 1;
// input和下拉
.ipt {
@extend .bb;
width: 100%;
height: 4.5rem;
border-radius: 4.5rem;
border: solid 1px #dcdddd !important;
background-color: #ffffff;
padding: 0 2rem;
flex: 1;
letter-spacing: .1rem;
}
// 长文本
.textarea {
min-height: 8.75rem;
border-radius: 1rem;
}
.down-arrow {
position: absolute;
top: 2.2rem;
right: 2rem;
}
.verify-btn {
@extend .fcc;
// font-family: Arial;
font-size: 18px;
width: 8.5rem;
border: solid 1px #dcdddd;
background-color: #f2f2f2;
flex: none;
margin-left: 1.5rem;
color: $cFontGray;
}
// 框内按钮
.ipt2 {
display: flex;
justify-content: space-between;
align-items: center;
.ipt-code {
flex: 1;
padding-right: 1.75rem;
}
.veri-btn {
color: $cOrange;
text-decoration: underline;
}
.veri-btn-default {
color: #aaaaaa;
}
}
}
// 遮罩
.date-mask {
width: 100%;
height: 100%;
position: fixed;
z-index: 1001;
left: 0;
top: 0;
}
......
<template>
<div class="comp">
<div class="date-wrap">
<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">
</div>
<div v-if="visible" class="date-wrap">
<div class="calendar-wrap">
<!-- 标题 -->
<div class="nav-wrap">
<div class="date-wrap">
<div class="pointer nav-btn" @click="prevMonth">
<div class="pointer nav-btn" @click="onPrevHandler">
<img src="@/assets/images/form/date-picker/data-picker-icon-up.png">
</div>
<div class="date">
<span class="pointer">{{year}}年{{month}}月</span>
<div @click="onTypeHandler()" class="date">
<span class="pointer">
<template v-if="dateType == 1">
{{year}}年{{month}}月
</template>
<template v-if="dateType == 2">
{{year}}年
</template>
<template v-if="dateType == 3">
{{yearRange}}
</template>
</span>
</div>
<div class="pointer nav-btn" @click="nextMonth">
<div class="pointer nav-btn" @click="onNextHandler">
<img src="@/assets/images/form/date-picker/data-picker-icon-down.png">
</div>
</div>
</div>
<!-- 日历躯干 -->
<div class="con">
<!-- 日历躯干 日 -->
<div v-if="dateType == 1" class="con day">
<!-- 日历表头 -->
<div class="th tr">
<div class="td" :class="{'disable':!weekend}">日</div>
......@@ -38,6 +52,29 @@
</div>
</div>
</div>
<!-- 月 -->
<div v-if="dateType == 2" class="con month">
<div class="tr">
<div class="td" v-for="(item,index) in 12" :key="index">
<div @click="selectMonth(item || '')" class="pointer point ">
{{item}}月
</div>
</div>
</div>
</div>
<!-- 年 -->
<div v-if="dateType == 3" class="con year">
<div class="tr">
<div class="td" v-for="(item,index) in yearList" :key="index">
<div @click="selectYear(item.disable ? null : item)" class="pointer point" :class="{'disable':item.disable}">
{{item.year}}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
......
......@@ -9,7 +9,8 @@ import DatePicker from '@/components/date-picker/date-picker.vue'
export default {
data() {
return {
key: 'value'
key: 'value',
value1: "",
}
},
components: {
......@@ -19,5 +20,7 @@ export default {
initData() {}
},
mounted() {},
created() {}
created() {
}
}
......
......@@ -4,3 +4,8 @@
// background-color: wheat;
padding-bottom: 200px;
}
.date-wrap{
width: 320px;
}
......
<template>
<div class="content">
<date-picker>
</date-picker>
<div class="date-wrap">
<date-picker v-model="value1"></date-picker>
</div>
<div>{{value1}}</div>
</div>
</template>
......
......@@ -35,6 +35,7 @@
margin-left: -512px;
height: 100%;
overflow: hidden;
&-img {
width: 100%;
height: 100%;
......@@ -75,6 +76,8 @@
position: absolute;
width: 100%;
color: #4c4948;
}
.t1 {
......@@ -85,7 +88,9 @@
bottom: 11.42rem;
}
img {}
img {
height: 100%;
}
&:first-child {
padding-left: 0;
......