You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
293 lines
7.3 KiB
293 lines
7.3 KiB
<template>
|
|
<view class="datePicker">
|
|
<uni-popup ref="updateTreatment" :safe-area="false">
|
|
<view class="popup-container">
|
|
<view class="header">
|
|
<view class="title PfScMedium">出生年份</view>
|
|
</view>
|
|
<view class="desc">请选择阳历出生年份</view>
|
|
|
|
<view class="content-container">
|
|
|
|
<view class="datepicker-wrapper">
|
|
<picker-view mask-class="datepicker-mask-class" :indicatorStyle="indicatorStyle" indicator-class="datepicker-custom-indicator" :value="dateValue" @change="onDateChange" @pickstart="pickstart" @pickend="pickend" class="datepicker-picker-view" v-if="visible">
|
|
<picker-view-column v-show="showPickerColumn(0)">
|
|
<view :class="getItemClass(0, index)+'item ft24'" v-for="(item, index) in years" :key="index">{{item}}</view>
|
|
</picker-view-column>
|
|
|
|
<picker-view-column v-show="showPickerColumn(1)">
|
|
<view :class="getItemClass(1, index)+'item ft24'" v-for="(item, index) in months" :key="index">{{item.toString().length==1?('0'+item):item}}</view>
|
|
</picker-view-column>
|
|
|
|
<picker-view-column v-show="showPickerColumn(2)">
|
|
<view :class="getItemClass(2, index)+'item ft24'" v-for="(item, index) in days" :key="index">{{item.toString().length==1?('0'+item):item}}</view>
|
|
</picker-view-column>
|
|
</picker-view>
|
|
</view>
|
|
|
|
|
|
<view class="close-up-btn" @click="closePop">
|
|
<img :src="((cssUrl+'pop_close_ic.svg').replace('/user/', '/'))" alt="" />
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view class="confirm-button-wrapper btPadding">
|
|
<view class="confirm-button PfScMedium" @click="onUpdateTreatmentConfirmButtonClick">
|
|
确认
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name:'datePicker',
|
|
data() {
|
|
const date = new Date()
|
|
const years = []
|
|
var year = date.getFullYear()
|
|
const months = []
|
|
var month = date.getMonth() + 1
|
|
const days = []
|
|
var day = date.getDate()
|
|
for (let i = date.getFullYear()-100; i <= date.getFullYear(); i++) {
|
|
years.push(i)
|
|
}
|
|
for (let i = 1; i <= 12; i++) {
|
|
months.push(i)
|
|
}
|
|
for (let i = 1; i <= 31; i++) {
|
|
days.push(i)
|
|
}
|
|
|
|
month = 1;
|
|
day = 1;
|
|
year = year - 10
|
|
var datestr = year+'/'+(month.toString().length==1?('0'+month):month)+'/'+(day.toString().length==1?('0'+day):day)
|
|
|
|
var dateValue = [years.indexOf(year), months.indexOf(month), days.indexOf(day)];
|
|
return {
|
|
title: "datepicker-picker-view",
|
|
years,
|
|
year,
|
|
months,
|
|
month,
|
|
days,
|
|
day,
|
|
cssUrl:this.cssUrl,
|
|
dateValue,
|
|
date:datestr,
|
|
treatmentDateString:'',
|
|
indicatorStyle: 'height: '+uni.upx2px(68)+'px;',
|
|
visible: true,
|
|
timetimer:null,
|
|
dateChangeFlag:true
|
|
}
|
|
},
|
|
props: {
|
|
defaultDate:{
|
|
type:String,
|
|
default:''
|
|
},
|
|
format:{
|
|
type:String,
|
|
default:'yyyy'
|
|
}
|
|
},
|
|
computed: {
|
|
},
|
|
methods: {
|
|
showPickerColumn(columnIndex) {
|
|
if (columnIndex === 0 && this.format.indexOf('yyyy') !== -1) return true
|
|
if (columnIndex === 1 && this.format.indexOf('mm')!== -1) return true
|
|
if (columnIndex === 2 && this.format.indexOf('dd')!== -1) return true
|
|
return false
|
|
},
|
|
getItemClass(columnIndex, index) {
|
|
var curindex = this.dateValue[columnIndex]
|
|
if(index == curindex) return 'selected PfScMedium ';
|
|
var abs = Math.abs(index-curindex)
|
|
if(abs <= 3) return 'style'+abs+' ';
|
|
return '';
|
|
},
|
|
open(direction){
|
|
this.visible = false;
|
|
this.$nextTick(() => {
|
|
this.visible = true;
|
|
this.$refs.updateTreatment.open(direction);
|
|
});
|
|
},
|
|
pickstart(e) {
|
|
this.dateChangeFlag = false
|
|
},
|
|
pickend(e) {
|
|
this.dateChangeFlag = true
|
|
},
|
|
onDateChange(e) {
|
|
var datainfo = e.detail.value
|
|
var year = this.years[datainfo[0]]
|
|
var month = this.months[datainfo[1]]
|
|
var day = this.days[datainfo[2]]
|
|
this.dateValue = [datainfo[0], datainfo[1], datainfo[2]];
|
|
this.date = year+'/'+(month.toString().length==1?('0'+month):month)+'/'+(day.toString().length==1?('0'+day):day)
|
|
},
|
|
closePop() {
|
|
this.$refs.updateTreatment.close();
|
|
this.visible = false;
|
|
},
|
|
onUpdateTreatmentConfirmButtonClick() {
|
|
if(!this.dateChangeFlag) return
|
|
|
|
this.treatmentDateString = this.date;
|
|
this.$emit('getDateString', this.treatmentDateString);
|
|
this.$refs.updateTreatment.close();
|
|
this.visible = false;
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.datePicker{
|
|
.popup-container {
|
|
position: relative;
|
|
max-height: calc(100vh - 50rpx);
|
|
overflow-y: scroll;
|
|
background: #ffffff;
|
|
border-radius: 40rpx 40rpx 0px 0px;
|
|
padding: 42rpx 32rpx 0;
|
|
|
|
.header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
|
|
.title {
|
|
font-size: 36rpx;
|
|
color: #000000;
|
|
height: 50px;
|
|
line-height: 50px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.close-icon {
|
|
position: absolute;
|
|
z-index: 1;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
right: 0;
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
}
|
|
.desc{
|
|
font-size: 28rpx;
|
|
font-weight: normal;
|
|
line-height: 38rpx;
|
|
height: 38rpx;
|
|
color: #666666;
|
|
text-align: center;
|
|
margin-top: 12rpx;
|
|
}
|
|
.content-container{
|
|
width: 100%;
|
|
padding: 0 25rpx;
|
|
box-sizing: border-box;
|
|
margin-bottom: 42rpx;
|
|
background: #F7F7F7;
|
|
|
|
.datepicker-wrapper{
|
|
width: calc(100% - 80rpx);
|
|
margin: 0 auto;
|
|
}
|
|
.close-up-btn{
|
|
position: absolute;
|
|
right: 44rpx;
|
|
top: 44rpx;
|
|
z-index: 9;
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
img{
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
}
|
|
.item{
|
|
line-height: 68rpx;
|
|
height: 68rpx;
|
|
color: #E5E5E5;
|
|
&.selected {
|
|
font-size: 57rpx !important;
|
|
color: #000000 !important;
|
|
}
|
|
&.style1 {
|
|
font-size: 26rpx !important;
|
|
|
|
color: #999999 !important;
|
|
}
|
|
&.style2 {
|
|
color: #BEBEBE !important;
|
|
font-size: 24rpx !important;
|
|
}
|
|
&.style3 {
|
|
color: #E5E5E5 !important;
|
|
font-size: 24rpx !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.datepicker-picker-view {
|
|
margin-top: 46rpx;
|
|
width: 100%;
|
|
height: 470rpx;
|
|
background: #F7F7F7;
|
|
}
|
|
|
|
.item {
|
|
line-height: 100rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.confirm-button-wrapper{
|
|
box-shadow: 0rpx -2rpx 6rpx 0rpx rgba(181,181,181,0.13);
|
|
height: 124rpx;
|
|
width: 750rpx;
|
|
margin-left: -32rpx;
|
|
background: #FFFFFF;
|
|
overflow: hidden;
|
|
position: relative;
|
|
z-index: 888;
|
|
.confirm-button {
|
|
margin: 16rpx 54rpx;
|
|
height: 92rpx;
|
|
background: #39d067;
|
|
border-radius: 16rpx;
|
|
font-size: 32rpx;
|
|
color: #ffffff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
</style>
|
|
<style>
|
|
>>> .datepicker-mask-class{
|
|
background-image: none;
|
|
}
|
|
.datepicker-custom-indicatorr::before{
|
|
border-top: 3rpx solid #D7D7D7 !important;
|
|
}
|
|
.datepicker-custom-indicatorr::after{
|
|
border-bottom: 3rpx solid #D7D7D7 !important;
|
|
}
|
|
</style>
|