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.
159 lines
3.1 KiB
159 lines
3.1 KiB
<template>
|
|
<view class="niu-calendar">
|
|
<view class="niu-calendar-wrapper">
|
|
<view class="niu-calendar-title">
|
|
<view class="niu-calendar-left">
|
|
当前选中: {{curYear}}
|
|
</view>
|
|
<view class="niu-calendar-right" @click="today">
|
|
回到今年
|
|
</view>
|
|
</view>
|
|
<view class="niu-calendar-content">
|
|
<view class="niu-calendar-list">
|
|
<view class="niu-calendar-item" :class="[curYear==year?'show':'', tagToday&&todayYear==year?'today':'', year<minYear?'disabled':'', year>maxYear?'disabled':'']" @click="choosYear(year)" v-for="(year,index) in years">
|
|
<text>{{year}}</text>
|
|
<text v-if="tagToday&&todayYear==year">今年</text>
|
|
</view>
|
|
</view>
|
|
<view class="niu-calendar-pages">
|
|
<view class="niu-calendar-page" @click="lastPage">
|
|
上页
|
|
</view>
|
|
<view class="niu-calendar-page" @click="nextPage">
|
|
下页
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="button" @click="confrim">
|
|
确认
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { createYears } from "./util.js"
|
|
let curYear = new Date().getFullYear();
|
|
let last = [-11,12]
|
|
export default {
|
|
props: {
|
|
minYear: {
|
|
type: Number,
|
|
default: 1990
|
|
},
|
|
maxYear: {
|
|
type: Number,
|
|
default: 2100
|
|
},
|
|
/**
|
|
* 突出今年
|
|
*/
|
|
tagToday: {
|
|
type: Boolean,
|
|
default: true
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
years: createYears(last),
|
|
todayYear: curYear,
|
|
curYear: curYear,
|
|
}
|
|
},
|
|
methods: {
|
|
confrim(){
|
|
this.$emit("confrim", this.curYear)
|
|
},
|
|
choosYear(year){
|
|
if(year<this.minYear||year>this.maxYear){
|
|
uni.showToast({
|
|
icon: "none",
|
|
title: "该年份无法选择"
|
|
})
|
|
return
|
|
}
|
|
this.curYear = year
|
|
},
|
|
today(){
|
|
let array = [-11,12]
|
|
this.years = createYears(array)
|
|
},
|
|
lastPage() {
|
|
let array = [last[0]-24,last[1]-24]
|
|
this.years = createYears(array)
|
|
last = array;
|
|
},
|
|
nextPage() {
|
|
let array = [last[0]+24,last[1]+24]
|
|
this.years = createYears(array)
|
|
last = array;
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.niu-calendar{
|
|
overflow: hidden;
|
|
}
|
|
.niu-calendar-title{
|
|
margin: 0 20rpx;
|
|
line-height: 1;
|
|
padding: 20rpx 0;
|
|
display: flex;
|
|
.niu-calendar-right{
|
|
flex: 1;
|
|
width: 0;
|
|
text-align: right;
|
|
}
|
|
}
|
|
.niu-calendar-pages{
|
|
display: flex;
|
|
.niu-calendar-page{
|
|
flex: 1;
|
|
text-align: center;
|
|
padding: 20rpx 0;
|
|
}
|
|
}
|
|
.niu-calendar-list{
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
.niu-calendar-item{
|
|
flex-shrink: 0;
|
|
width: calc(100% / 6);
|
|
height: 80rpx;
|
|
margin: 0 0;
|
|
padding: 20rpx 0;
|
|
text-align: center;
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
&.disabled{
|
|
color: #999;
|
|
}
|
|
&.today{
|
|
color: red;
|
|
font-weight: bold;
|
|
}
|
|
&.show{
|
|
background-color: #1AAD19;
|
|
border-radius: 10rpx;
|
|
color: white;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
.button{
|
|
margin: 20rpx;
|
|
background-color: #1AAD19;
|
|
border-radius: 10rpx;
|
|
text-align: center;
|
|
line-height: 1;
|
|
padding: 20rpx 0;
|
|
font-weight: bold;
|
|
color: white;
|
|
font-size: 30rpx;
|
|
}
|
|
</style>
|
|
|