unApp下开发的一个小程序日期插件
(打包微信小程序下测试)
效果图：
//组件调用
<components :list="list" hasMoney @select="changeDate"></components>
//list
list:[
{start: '',end:'',price:'0.01'},
{start: '2020-07-01',end:'2020-07-31',price:'0.09'},
{start: '2020-08-01',end:'2020-09-15',price:'1.09'}
]//组件代码(待完善)
<template>
<view class="free-calendar">
<view class="calendar-months">
<view class="months_item" :class="{active:monthZhIndex==index}" v-for="(item, index) in monthZh" :key="index" @click="changeMonth(item.id,index)">{{item.name}}</view>
</view>
<view class="content">
<view class="week_day">
<view class="week_day_text" v-for="(item, index) in weekZh" :key="index">{{item}}</view>
</view>
<view class="content_day">
<block v-for="(item, index) in weekdayArr" :key="index">
<view class="content_day_item"></view>
</block>
<view class="content_day_item" :class="{'active':activeDate==`${year}-${month}-${index+1}`}"
v-for="(item, index) in daysArr" :key="index"
@tap="dateClick(item)"
><view class="day">{{item.day}}</view><view class="money" v-if="hasMoney">￥{{item.money}}</view></view>
</view>
</view>
</view>
</template>
<script>
export default {
name:"test",
props:{
list:{
type: Array,
default(){
return []
}
},
hasMoney:{
type: Boolean,
default: false
},
count:{
type: Number,
default: 3
}
},
data() {
return {
year:'',
month:'',
day:'',
today:'',
activeDate:'',
days:'', //天数
dayMoney:'',
defaultMoney:'',
daysArr:[],
weekday:'',
weekdayArr:[],
weekZh: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
monthZhIndex: 0,
monthZh:[],
moneyArr:[]
};
},
created() {
this.init();
},
methods:{
init(){
let now = new Date();
this.year = now.getFullYear();
this.month = now.getMonth() + 1;
this.day = now.getDate();
this.today = `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()}`;
this.activeDate = this.today;
this.getMonthNav();
this.changeData();
},
generateArray: function(start, end) {
return Array.from(new Array(end + 1).keys()).slice(start);
},
//补0
formatNum: function(num) {
return num < 10 ? '0' + num : num + '';
},
//一个月有多少天
getMonthDay(year, month) {
let days = new Date(year, month, 0).getDate();
return days;
},
getWeekday(year, month) {
let date = new Date(`${year}/${month}/01 00:00:00`);
return date.getDay();
},
getWeekText(date) {
date = new Date(`${date.replace(/\-/g, '/')} 00:00:00`);
let week = date.getDay();
return '星期' + ['日', '一', '二', '三', '四', '五', '六'][week];
},
getMoneyText(month) {
month = month - 1;
return ['一', '二', '三', '四', '五', '六','七', '八', '九', '十', '十一', '十二'][month] +'月';
},
getMonthNav(){
for(var i=0; i< this.count; i++){
let id = this.month + i;
let monthIndex = id;
if(monthIndex > 12){
monthIndex = monthIndex - 12
}
this.monthZh.push({id: id,name:this.getMoneyText(monthIndex)})
}
},
changeMonth(month, index){
this.monthZhIndex = index;
let year = month > 12 ? this.year + 1 : this.year;
this.month = month > 12 ? month - 12 : month;
this.year = year;
this.activeDate = `${year}-${this.month}-${this.day}`;
this.changeData();
},
changeData() {
this.days = this.getMonthDay(this.year, this.month);
//this.daysArr=this.generateArray(1,this.days)
this.daysArr = this.getMonthDayArr(this.days)
this.weekday = this.getWeekday(this.year, this.month);
this.weekdayArr=this.generateArray(1,this.weekday);
this.selectHandler({
year: this.year,
month: this.month,
day: this.day,
date: this.activeDate,
money: this.daysArr[this.day-1].money
})
},
getMonthDayArr(days){
let daysArr = new Array();
if(this.hasMoney){
daysArr = this.moneyData(days)
}else{
for(let i=1;i<= days;i++){
daysArr.push({day:i})
}
}
return daysArr
},
moneyData(days){
let that= this, daysArr = new Array();
for(let i=1;i<= days;i++){
daysArr.push({day:i,money:''});
}
that.list.forEach((item, index)=>{
if(item.end==''||item.end==null){
daysArr.forEach(d=>{
d.money = item.price
})
that.defaultMoney = item.price;
}else{
let startDate = new Date(item.start);
let endDate = new Date(item.end);
let startYear = startDate.getFullYear();
let startMonth = startDate.getMonth() + 1;
let startDay = startDate.getDate();
let endYear = endDate.getFullYear();
let endMonth = endDate.getMonth() + 1;
let endDay = endDate.getDate();
if(startYear == that.year && endYear == that.year){//同年
if(startMonth== that.month){ //本月
if(endMonth==that.month){
daysArr.forEach(d=>{
if(endDay >= d.day >= startDay){
d.money = item.price
}
})
}else{ //跨月
daysArr.forEach(d=>{
d.money = item.price
})
}
}else if(endMonth==that.month){
daysArr.forEach(d=>{
if(endDay >= d.day){
d.money = item.price
}else{
d.money = that.defaultMoney
}
})
}
}//同年结束
}
})
return daysArr;
},
//日期选择
dateClick(item){
this.day = item.day;
this.activeDate = `${this.year}-${this.month}-${item.day}`;
this.dayMoney =item.money;
this.selectHandler({
year: this.year,
month: this.month,
day: this.day,
date: this.activeDate,
money: this.dayMoney
})
},
selectHandler(data){
this.$emit('select',data);
}
}
}
</script>
<style lang="scss" scoped>
.calendar-months{
padding: 0 30rpx;
line-height: 80rpx;
.months_item{
width: 150rpx;
display: inline-block;
&.active{
color: #2979ff
}
}
}
.week_day{
display: flex;
align-items: center;
justify-content: center;
padding: 6px 0;
overflow: hidden;
&_text {
flex: 1;
font-size: 24rpx;
color: #858585;
text-align: center;
}
};
.content_day{
width: 100%;
display: flex;
flex-wrap: wrap;
padding: 6px 0;
box-sizing: border-box;
background-color: #fff;
position: relative;
&_item{
width: 14.2857%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10px 0;
overflow: hidden;
position: relative;
z-index: 2;
&.active{
color: #ffffff;
background: #2979ff;
}
.money{
font-size: 20rpx;
color: red;
}
}
}
</style>