jsm-mall-h5-front/src/components/zj-common/zj-shortCalendar.vue

<template>
	<view class="date">
		<view class="date_dl">
			<view class="dd" v-for="(item,index) in week" :key="index">{{item}}</view>
		</view>
		<view class="date_dd">
			<view class="dd" @click="item_click(item, index)" v-for="(item, index) in week_list" :key="index">
				<view 
					class="num" 
					:class="[item.today ? 'today' : '', item.active ? 'active' : '']">
					{{item.today ? '今天':item.day}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props:{
		value:{
			type: String,
			default: ''
		},
	},
	data(){
		return {
			week:['一','二','三','四','五','六','日'],
			week_list:[],
			start_date:'',
			end_date:'',
			prev_date:'',
			next_date:'',
			nowYear:'',
			nowMonth:'',
			nowDay:'',
			retract:false,
			nowTime:0,
			date:'',
		}
	},
	watch:{
		value(value){
			this.get_date(this.date_parse(value));
		},

	},
	created(){
		this.init();
	},
	methods:{
		change(){
			let value = {
				fulldate: this.date.replace(/-(\d)(?!\d)/g, '-0$1')
			};
			
			this.$emit('change',value)
		},
		
		init(){
			if(this.value){
				this.get_date(this.date_parse(this.value));
				this.item_click({
					date: this.value,
					day: this.value.slice(8, 10)
				})
			}else{
				this.get_date();
			}
		},
		
		set_to_day(){
			this.week_list.forEach((item, index)=>{
				if(item.date == `${this.date}`){
					item.active = true;
				}else{
					item.active = false;
				}
			})
		},
		
		item_click(item){
			console.log(item);
			if(item.empty) return false;
			this.date = item.date;
			this.nowDay = item.day;
			
			let now_arr = item.date.split('-')
			this.nowYear = now_arr[0];
			this.nowMonth = now_arr[1];
			this.nowDay = now_arr[2];
			
			
			this.set_to_day()
			
			this.nowTime = this.date_parse(`${item.date}`);
			
			this.change();
			
		},
		
		date_parse(str){
			return Date.parse(str.replace(/-(\d)(?!\d)/g, '-0$1'));
		},
		
		get_date(value = ''){
			let date = new Date();
			if(value){
				date = new Date(value);
			}
			let nowMonth = date.getMonth() + 1,
				nowYear = date.getFullYear(),
				nowDay = date.getDate(),
				nowTime = date.getTime(),
				nowWeek = date.getDay();

			let days = this.get_month_days(nowMonth,nowYear);
			let start_date = new Date(nowYear,nowMonth - 1, 1);
			let end_date = new Date(nowYear,nowMonth - 1, days);
			let prev_date = new Date(start_date.getTime() - 1);
			let next_date = new Date(end_date.getTime() + 86401 * 1000);
			let date_arrs = [];
			
			let week_list = [];
			let count_days = 14;
			
			let needNextMonth = (days - nowDay) < count_days;
			
			for(let i = 1; i <= (needNextMonth ? days : nowDay+count_days); i++){
				if(i >= nowDay) {
					date_arrs.push({
						day: i,
						today: i == nowDay ? true : false,
						active: false,
						date: `${nowYear}-${nowMonth < 9 ? ('0' + nowMonth) : nowMonth}-${i < 9 ? ('0' + i) : i}`
					})
					
					if(i == nowDay){
						this.date = `${nowYear}-${nowMonth < 9 ? ('0' + nowMonth) : nowMonth}-${i < 9 ? ('0' + i) : i}`;
					}
				}
			}
			
			let date_arrs_length = date_arrs.length;
			
			if(needNextMonth && date_arrs_length < 14){
				for(let i = 1; i <= count_days - date_arrs_length; i++){
					date_arrs.push({
						day: i,
						today: false,
						active: false,
						date: `${next_date.getFullYear()}-${next_date.getMonth()+1}-${i}`
					})
				}
			}
			
			for(let i=0; i < nowWeek - 1; i++) {
				date_arrs.unshift({
					day: '',
					empty: true
				})
			}
			
			
			this.week_list = date_arrs;
			this.nowYear = nowYear;
			this.nowMonth = nowMonth;
			this.nowDay = nowDay;
			this.nowTime = nowTime;
			this.start_date = start_date;
			this.end_date = end_date;
			this.prev_date = prev_date;
			this.next_date = next_date;
			
		},
		get_month_days(nowMonth,nowYear){
			let month_arr = [1,3,5,7,8,10,12];
			let days = 0;
			if(nowMonth == 2){
				if(nowYear % 4 == 0){
					days = 29;
				}else{
					days = 28;
				}
			}else if(month_arr.indexOf(nowMonth) >= 0){
				days = 31;
			}else{
				days = 30;
			}
			return days;
		}
	}
}
</script>

<style lang="scss" scoped>
.date{
	width: 100%;
}
.head{
	display: flex; align-items: center; height: 100rpx; justify-content: center;
	border-bottom: 1rpx solid #f5f5f5; color: #333333;
	.title{
		width: 200rpx; font-size: 30rpx; text-align: center;
	}
	.icon{
		display: block;
		.next{
			transform: rotate(180deg); display: block;
		}
	}
}
.retract{
	display: flex; justify-content: center; align-items: center; height: 80rpx;;
	.iconfont{
		transform: rotate(90deg);
		&.retract_icon{
			transform: rotate(270deg);
		}
	}
}
.date_dl{
	display: flex; width: 100%;
	.dd{
		flex:1; text-align: center;
		height: 80rpx;
		font-size: 26rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
		color: #666;
	}
}

.date_dd {
	display: flex; width: 100%;
	flex-wrap: wrap;
	.dd{
		width: calc(100%/7);
		text-align: center;
		height: 80rpx;
		font-size: 26rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
		.num{
			width: 60rpx; height: 60rpx; border-radius: 50%; line-height: 60rpx; 
			&.disabled{
				color: #f1f1f1;
			}
			&.month{
				color:  #333333;
			}
			&.today{
				color: $theme-color; font-size: 24rpx;
			}
			&.active{
				background: $theme-color; color:#fff;
			}
		}
	}
}
</style>