shunfengche-sfd/my/jgOrder/DateSelector.vue

<template>
	<view class="date-selector">
		<view style="padding: 0 26%;">
			<u-tabs
				:list="list"
				:is-scroll="false"
				:current="currentTab"
				@change="tabChange"
				activeColor="#00C18A"
				inactiveColor="#999999"
				bgColor="transparent"
			></u-tabs>
		</view>
		<view class="date-control-box">
			<view class="contol-btn">
				<view class="left-btn" @click="onClickLeft" :class="startDisabled ? 'disable' : ''">
					<view class="left-bracket bracket"></view>
				</view>
				<view class="right-btn" @click="onClickRight" :class="endDisabled ? 'disable' : ''">
					<view class="right-bracket bracket"></view>
				</view>
			</view>
			<view>{{ currentSelect.start}} - {{ currentSelect.end }}</view>
		</view>
	</view>
</template>

<script>
	import { 
		isSameDay,
		getCurrentWeekDates, getLastWeekDates,
		getMonthlyDates, getLastMonthDates ,
		getNextWeekDates, getNextMonthDates
	} from '@/utils/dateUtil.js'
	
	export default {
		name: 'DateSelector',
		data() {
			return {
				list: [
					{ name: '周统计' },
					{ name: '月统计' },
				],
				currentTab: 0,
				currentSelect: {},
				startDisabled: false,
				endDisabled: false,
			}
		},
		methods: {
			initDate(param) {
				if(this.currentTab === 0) {
					this.currentSelect = getCurrentWeekDates(param)
				} else {
					this.currentSelect = getMonthlyDates(param)
				}
				this.fetchData()
			},
			tabChange(index) {
				this.currentTab = index
				this.initDate(new Date())
			},
			onClickLeft() {
				const start = this.currentSelect.start
				const startDate = new Date(start)
				if(start) {
					if(this.currentTab === 0) {
						// 周统计
						this.currentSelect = getLastWeekDates(startDate)
					} else {
						// 月统计
						this.currentSelect = getLastMonthDates(startDate)
					}
					this.fetchData()
				}
			},
			onClickRight() {
				const end = this.currentSelect.end
				const endDate = new Date(end)
				const isSame = isSameDay(new Date(), endDate)
				if(isSame) {
					return
				}
				if(end) {
					if(this.currentTab === 0) {
						// 周统计
						this.currentSelect = getNextWeekDates(endDate)
					} else {
						// 月统计
						this.currentSelect = getNextMonthDates(endDate)
					}
					this.fetchData()
				}
			},
			fetchData() {
				this.$emit('dateChange', this.currentSelect)
			},
		},
	}
</script>

<style lang="scss">
	.date-selector {
		
		.date-control-box {
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			line-height: 42rpx;
			font-weight: 700;
			color: #00C18A;
			position: relative;
			
			.contol-btn {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				display: flex;
				justify-content: space-between;
				
				.left-btn, .right-btn {
					height: 80rpx;
					width: 80rpx;
					border-radius: 40rpx;
					color: #00C18A;
					background-color: #E8FBF6;
					// background-color: red;
					display: flex;
					justify-content: center;
					align-items: center;
					
					&:active {
						opacity: .5;
					}
				}
				
				.bracket {
					position: relative;
					width: 40rpx;
					height: 40rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				
				.left-bracket {
					margin-right: 8rpx;
				}
				
				.right-bracket {
					margin-left: 8rpx;
				}
			 
				.left-bracket::before,
				.right-bracket::after {
					content: '';
					position: absolute;
					width: 0;
					height: 0;
					border-style: solid;
				}
			 
				.left-bracket::before {
					border-width: 20rpx 20rpx 20rpx 0;
					border-color: transparent #00C18A transparent transparent;
				}
			 
				.right-bracket::after {
					border-width: 20rpx 0 20rpx 20rpx;
					border-color: transparent transparent transparent #00C18A;
				}
			}
		}
	}
</style>