公司小程序
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.

256 lines
6.1 KiB

<template>
<view class="min-picker">
<view class="min-popup" v-if="show" :class="[show ? 'min-show' : 'min-hide']">
<view class="min-content" :style="{height:heightRpx+'rpx'}">
<view class="main-top">
<view class="picer-top">
<text @click="cacel">取消</text>
<text @click="sure" class="sure">确认</text>
</view>
</view>
<picker-view :indicator-style="indicatorStyle" :value="value" @change="bindChange" style="height:400rpx" :key="value.toString()">
<picker-view-column>
<view class="picker item" v-for="(item,index) in years" :key="index">{{item}}年</view>
</picker-view-column>
<picker-view-column v-if="showType<=1">
<view class="picker item" v-for="(item,index) in months" :key="index">{{item}}月</view>
</picker-view-column>
<picker-view-column v-if="showType==0">
<view class="picker item" v-for="(item,index) in days" :key="index">{{item}}</view>
</picker-view-column>
</picker-view>
</view>
</view>
</view>
</template>
<script>
export default {
name:'MinPicker',
props: {
show: {
type: Boolean,
default: false
},
///日期选择器的起始时间
startTime:{
type: Array,
default: () => [2018,6,5]
},
///日期选择器的结束时间
endTime:{
type: Number,
default: 2045
},
heightRpx: {
type: String
},
///日期选择器默认显示的时间,例如[2022,1,1],默认月份与天数都是以1开始。
currentTime : {
type : [Array,null],
default:null
},
/**
* 现实类型,0->年月日,1->年月,2->年
* 默认显示年月日
*/
showType : {
type : Number,
default: 0,
}
},
data() {
return {
years: [],
months: [],
days: [],
dayLength: 30,
value: [0, 0, 0],
visible: false,
month: '',
year: '',
flag: false,
indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth / (750 / 100))}rpx;`
}
},
mounted() {
this.getYears();
// 获取初始位置
if(this.currentTime == null){
const time = new Date()
const year = time.getFullYear()
const month = time.getMonth() + 1
this.month = month
this.year = year
this.getMonth()
this.getDaysInOneMonth(year, month)
this.value = [this.years.indexOf(this.year),this.months.indexOf(this.month),this.days.indexOf( time.getDate())]
}else{
this.year = this.currentTime[0];
this.getMonth();
var m = this.months.indexOf(this.currentTime[1]);
console.log(m);
this.month = this.currentTime[1];
this.getDaysInOneMonth(this.year, this.month);
this.value = [this.years.indexOf(this.year),m,this.days.indexOf(this.currentTime[2])];
}
this.getDays()
},
methods: {
bindChange: function(e) {
//console.log(e);
this.getDaysInOneMonth(this.years[e.target.value[0]], this.months[e.target.value[1]])
this.flag = true;
const val = e.detail.value;
this.year = this.years[val[0]];
this.getMonth();
this.month = this.months[val[1]];
this.getDays();
//this.month = this.months[val[1]] < 10 ? '0' + this.months[val[1]] : this.months[val[1]];
this.day = this.days[val[2]];
//console.log(this.year,this.month,this.day);
},
// 获得年份
getYears() {
this.years = []
for (let i = this.startTime[0]; i <= this.endTime; i++) {
this.years.push(i)
}
},
// 获取月份
getMonth() {
this.months = []
var year = this.year;
//console.log("获取年份:"+ year + "的所有月份!");
if(year == this.startTime[0]){
if(this.startTime[1]){
//定义了起始月份的
for(var i = this.startTime[1];i<=12;i++){
this.months.push(i);
}
return;
}
}
for (let i = 1; i <= 12; i++) {
this.months.push(i)
}
},
/**
* 获取当前月份的天数信息,在调用本方法之前,请确保你设置了this.year,this.month,
*/
getDays() {
this.days = []
var year = this.year;
var month = this.month;
if(year == this.startTime[0] && month == this.startTime[1]){
if(this.startTime[2]){
for(var i = this.startTime[2];i<=this.dayLength;i++){
this.days.push(i)
}
return;
}
}
for (let i = 1; i <= this.dayLength; i++) {
this.days.push(i)
}
},
// 获取某年某月多少天
getDaysInOneMonth(year, month) {
month = parseInt(month, 10)
var d = new Date(year, month, 0)
this.dayLength = d.getDate()
this.getDays()
return d.getDate()
},
// 取消
cacel() {
this.$emit('cancel', false)
},
// 确认
sure() {
this.value = [this.years.indexOf(this.year),
this.months.indexOf(this.month),
this.days.indexOf(this.day ?? 1),
];
this.$emit('cancel', false)
this.$emit('sure', {
a: this.year,
b: this.month,
c: this.day
})
}
}
}
</script>
<style lang="scss" scoped>
.main-top {
padding: 0 30rpx;
border-radius: 20rpx;
.picer-top {
width: 100%;
height: 100rpx;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
font-size: 30rpx;
//background-color: #1CBBB4;
.sure {
color: #007aff;
}
}
}
.picker {
text-align: center;
line-height: 50rpx;
}
.min-popup{
width: 100vw;
height: 100vh;
position: fixed;
top:0;
left: 0;
z-index: 100;
&.min-hide{
.min-content{
animation: hide .5s linear forwards;
}
.min-content-height{ animation: hide .5s linear forwards;}
}
&.min-show{
.min-content{
animation: show .5s linear forwards;
}
.min-content-height{ animation: show .5s linear forwards;}
}
.min-content{
width: 100%;
height:800rpx;
background: #fff;
position: absolute;
left: 0;
bottom: 0;
z-index: 9999;
overflow: hidden;
border-radius: 20rpx 20rpx 0 0;
}
@keyframes hide {
100% {
transform: translateY(100%);
}
0% {
transform: translateY(0);
}
}
@keyframes show {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(0);
}
}
}
</style>