siyu_app/pages_watch/components/dateTimePicker/dateTimePicker.vue

<template>
	<view class="pickebox">
		<view class="pickebox-typebox" v-if="showType">
			<view :class="activeTab == index ? 'type-active':''" v-for="(item,index) in tabs" :key="index" @click="handleTab(item,index)">{{item.label}}</view>
		</view>
		<view class="pickebox-picker">
			<view class="pickebox-pickerbtn prev" @click="handlePrev">
				<image src="@/static/images/pages_watch/icons/arrow_time_yes_icon.png"></image>
				<!-- <image src="@/static/images/pages_watch/icons/arrow_time_no_icon.png"></image> -->
			</view>
			<view v-if="activeTab == 1" @click="openWeek">{{weekValue}}</view>
			<template v-else>
				<picker mode="date" :fields="fields" :value="value" style="display:inline-block;" @change="bindPickerChange">
					<view>{{_date}}</view>
				</picker>
			</template>
			<view class="pickebox-pickerbtn next" @click="handleNext">
				<image src="@/static/images/pages_watch/icons/arrow_time_yes_icon.png"></image>
				<!-- <image src="@/static/images/pages_watch/icons/arrow_time_no_icon.png"></image> -->
			</view>
		</view>
		<!-- 周 -->
		<uni-popup ref="popup" type="bottom">
		    <myWeekPicker :value="value" @change="getWeeks"></myWeekPicker>
		</uni-popup>
	</view>
</template>

<script>
	import myWeekPicker from "@/pages_watch/components/myWeekPicker/myWeekPicker.vue"
	import weekjs from '../myWeekPicker/week.js';
	export default {
		name:"dateTimePicker",
		components: {
			myWeekPicker
		},
		props: {
			showType: {
				type: Boolean,
				default: true
			},
			// 0: yyyy-mm-dd
			// 1: yyyy年mm月dd日
			formatType: {
				type: Number,
				default: 0
			},
			from: {
				type: String,
				default: ""
			}
		},
		data() {
			return {
				tabs: [{
					label: '每日',
					value: 'day'
				},{
					label: '每周',
					value: 'week'
				},{
					label: '每月',
					value: 'month'
				}],
				activeTab: 0,
				//  year、month、day，表示选择器的粒度，默认为 day
				fields: 'day',
				value: this.$timeFormat(),
				weekValue: "",
				startTime: "",
				endTime: ""
			}
		},
		computed: {
			_date() {
				if(this.formatType == 1 && this.value) {
					console.log(this.fields)
					if(this.fields == 'month') {
						return this.$timeFormat(new Date(this.value),'yyyy年mm月')
					} else {
						return this.$timeFormat(new Date(this.value),'yyyy年mm月dd日')
					}
				} else {
					return this.value
				}
			}
		},
		created() {
			if(this.from == "report") {
				this.activeTab = 2
				this.fields = 'month'
				this.value = this.$timeFormat(new Date(), 'yyyy-mm')
			} else if(this.from == "sports") {
				this.tabs = [{
					label: '每日',
					value: 'day'
				},{
					label: '每周',
					value: 'week'
				}]
			}
			this.resetTime()
		},
		methods: {
			handleTab(item,index) {
				this.activeTab = index
				this.fields = item.value == 'week' ? 'day' : item.value
				if(this.activeTab == 0) { // 每日
					this.value = this.$timeFormat()
				} else if(this.activeTab == 1) { // 每周
					this.value = this.$timeFormat()
				} else if(this.activeTab == 2) { // 每月
					this.value = this.$timeFormat(new Date(), 'yyyy-mm')
				}
				this.resetTime()
			},
			bindPickerChange(e) {
				this.value = e.detail.value
				this.resetTime()
			},
			handlePrev() {
				// 前一天
				const yesterday = new Date(this.value).setDate(new Date(this.value).getDate() - 1);
				// 前一个月
				let day = this.value
				if(this.activeTab == 2) {
					day = day + '-01'
				}
				const prevMonths = new Date(day).setMonth(new Date(day).getMonth() - 1);
				// 7天前日期
				const weekday = new Date(this.value).setDate(new Date(this.value).getDate() - 7);
				
				if(this.activeTab == 0) { // 每日
					this.value = this.$timeFormat(yesterday)
				} else if(this.activeTab == 1) { // 每周
					this.value = this.$timeFormat(weekday)
				} else if(this.activeTab == 2) { // 每月
					this.value = this.$timeFormat(prevMonths, 'yyyy-mm')
				}
				this.resetTime()
			},
			handleNext() {
				// 下一天
				const yesterday = new Date(this.value).setDate(new Date(this.value).getDate() + 1);
				// 下一个月
				let day = this.value
				if(this.activeTab == 2) {
					day = day + '-01'
				}
				const prevMonths = new Date(day).setMonth(new Date(day).getMonth() + 1);
				// 7天后日期
				const weekday = new Date(this.value).setDate(new Date(this.value).getDate() + 7);
				
				if(this.activeTab == 0) { // 每日
					this.value = this.$timeFormat(yesterday)
				} else if(this.activeTab == 1) { // 每周
					this.value = this.$timeFormat(weekday)
				} else if(this.activeTab == 2) { // 每月
					this.value = this.$timeFormat(prevMonths, 'yyyy-mm')
				}
				this.resetTime()
			},
			resetTime() {
				if(this.activeTab == 0) { // 每日
					this.startTime = this.value + " 00:00:00"
					this.endTime = this.value + " 23:59:59"
				} else if(this.activeTab == 1) { // 每周
					let y = this.value.split('-')[0];
					let m = this.value.split('-')[1];
					let res =  weekjs.getWeeksByMonth(y, m,this.value,0); 
					this.weekValue = res.week.formatVal
					this.startTime = this.weekValue.split('至')[0] + " 00:00:00"
					this.endTime = this.weekValue.split('至')[1] + " 23:59:59"
				} else if(this.activeTab == 2) { // 每月
					this.startTime = this.$timeFormat(this.value, 'yyyy-mm-dd') + " 00:00:00"
					const currentYear = this.value.split('-')[0]
					const currentMonth = this.value.split('-')[1]
					const lastday = new Date(currentYear, currentMonth, 0)
					this.endTime = this.$timeFormat(lastday, 'yyyy-mm-dd') + " 23:59:59"
				}
				this.$emit("onChange",[this.startTime,this.endTime,this.value,this.activeTab])
			},
			getWeeks(res) {
			    if (res) { 
					this.value = res.week.val
			        this.weekValue = res.week.formatVal
					this.resetTime()
			    }
			    this.$refs['popup'].close()
			},
			openWeek() {
			    this.$refs['popup'].open()
			}
		}
	}
</script>

<style lang="scss" scoped>
	@mixin u-flex($flexD, $alignI, $justifyC) {
		display: flex;
		flex-direction: $flexD;
		align-items: $alignI;
		justify-content: $justifyC;
	}
	.pickebox {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #333333;
		.type-active {
			background: #FF7700;
			font-weight: 500;
			font-size: 30rpx;
			color: #FFFFFF;
		}
		&-typebox {
			height: 88rpx;
			@include u-flex(row, center, center);
			// gap: 16rpx;
			view {
				width: 124rpx;
				height: 64rpx;
				margin: 8rpx;
				border-radius: 32rpx 32rpx 32rpx 32rpx;
				color: #757575;
				line-height: 64rpx;
				text-align: center;
			}
		}
		&-picker {
			height: 88rpx;
			margin: 20rpx 0;
			@include u-flex(row, center, center);
			// gap: 32rpx;
		}
		&-pickerbtn {
			margin: 0 32rpx;
			image {
				width: 48rpx;
				height: 48rpx;
				background: #FFFFFF;
				border-radius: 50%;
				overflow: hidden;
			}
		}
		.next image{
			transform: rotateZ(180deg);
		}
	}
</style>