Encapsulate a week, month and day time switching component dataSwitch

 

 

<template>
	<view class="dateSwitch">
		<!--    <el-radio-group v-model="dateFlag" @input="selectDate" size="small">
      <el-radio-button label="周"></el-radio-button>
      <el-radio-button label="月"></el-radio-button>
    </el-radio-group> -->
		<view class="dateSwitch-button" :class="{activeDate:currentType == item.value}" v-for="(item,index) in dateType"
			:key="index" @click="selectDate(item.value)">
			<text>{
   
   {item.label}}</text>
		</view>
	</view>
</template>
<script>
	export default {
		props: {
			showToday: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				currentType: 'week',
				type: [{
					value: 'day',
					label: '本日'
				}, {
					value: 'week',
					label: '本周'
				}, {
					value: 'month',
					label: '本月'
				}],
				typeWithoutDay: [{
					value: 'week',
					label: '本周'
				}, {
					value: 'month',
					label: '本月'
				}]
			};
		},
		computed: {
			dateType() {
				return this.showToday ? this.type : this.typeWithoutDay
			},
		},
		// watch: {
		// 	showToday(newValue, oldValue) {
		// 		if (newValue) {
		// 			this.currentType = 'day'
		// 		}
		// 	}
		// },
		mounted() {
			if(this.showToday){
				this.selectDate("day");
			}else{
				this.selectDate("week");
			}
			
		},
		methods: {
			selectDate(val) {
				this.currentType = val
				this.$emit(
					"selectDate",
					this.getDate(val)
				);
			},
			//格式化时间
			getNowFormatDate(date) {
				//   let date = new Date(),
				let year = date.getFullYear(), //获取完整的年份(4位)
					month = date.getMonth() + 1, //获取当前月份(0-11,0代表1月)
					strDate = date.getDate(); // 获取当前日(1-31)
				if (month < 10) month = `0${month}`; // 如果月份是个位数，在前面补0
				if (strDate < 10) strDate = `0${strDate}`; // 如果日是个位数，在前面补0

				return `${year}-${month}-${strDate}`;
			},
			// 获取本日时间
			getToday() {
				const date = new Date();
				return {
					startTime: this.getNowFormatDate(date),
					endTime: this.getNowFormatDate(date),
				};
			},
			//获取周一到周日
			getWeekDate() {
				const date = new Date();
				const nowTime = date.getTime();
				const week = date.getDay() > 0 ? date.getDay() : 7; // 0-6，0 表示星期日，
				const startTime = new Date(nowTime - (week - 1) * 24 * 60 * 60 * 1000);
				const endTime = new Date(nowTime + (7 - week) * 24 * 60 * 60 * 1000);
				return {
					startTime: this.getNowFormatDate(startTime),
					endTime: this.getNowFormatDate(endTime),
				};
			},
			//本月时间
			getMonthDate() {
				const date = new Date();
				const start = new Date(date.setDate(1)); //本月第一天
				const end = new Date(date.getFullYear(), date.getMonth() + 1, 0); //本月的最后一天
				return {
					startTime: this.getNowFormatDate(start),
					endTime: this.getNowFormatDate(end),
				};
			},
			getDate(type) {
				switch (type) {
					case 'week':
						return this.getWeekDate()
						break;
					case 'month':
						return this.getMonthDate()
						break;
					case 'day':
						return this.getToday()
						break;
					default:
						break;
				}
			}
		},
	};
</script>
<style lang="scss" scoped>
	.dateSwitch {
		display: flex;

		&-button {
            margin-right: 24rpx;
			font-size: 24rpx;
			width: 88rpx;
			height: 52rpx;
			border-radius: 26rpx;
			border: 2rpx solid #34BEEA;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.activeDate {
			background: linear-gradient(90deg, #34BEEA 0%, #6DDCFF 100%);
			opacity: 1;
			color: #fff;
		}
	}
</style>