wx_oms/components/datePopup.vue

<template>
	<view>
		<uni-popup @change="change" ref="popup" type="center">
			<view class="datebody">
				<view style="text-align: end;">
					<uni-icons @click="change({show:false})" type="clear" size="30"></uni-icons>
				</view>
				<view style="flex: 1;display: flex;flex-wrap: wrap;align-content: flex-start; gap:25rpx">
					<view @click="seleFn(index)" v-for="(item,index) in dateOptions"
						:class=" seleIndex==index?'seledatebody_item': 'datebody_item'">{{item.label}}</view>
					<uni-datetime-picker @change='pickerClick' type="datetimerange" :start="starDate" :end="endDate"
						rangeSeparator="至" v-model="single">
						<view @click="seleIndex=4" :class=" seleIndex==4?'seledatebody_item':'datebody_item'">自定义</view>
					</uni-datetime-picker>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		props: {
			value: {
				type: Boolean,
				default: false
			},
			list: {
				type: Array,
				default: () => {
					return [{
							value: '1',
							label: '江'
						},
						{
							value: '2',
							label: '湖'
						}
					]
				}
			}
		},
		watch: {
			value: function(n, o) {
				console.log('监听', n)
				if (n) {
					this.$refs.popup.open('center')
				} else {
					this.$refs.popup.close()
				}
			}
		},
		data() {
			return {
				single: '',
				endDate: '',
				starDate: '',
				seleIndex: 1,
				seachValue: '',
				dateOptions: [{
						value: 0,
						label: '当天'
					},
					{
						value: 1,
						label: '昨日'
					},
					{
						value: 2,
						label: '上周'
					},
					{
						value: 3,
						label: '上月'
					}
				]
			}
		},
		created() {
			// let date = new Date
			// this.starDate = new Date
			// this.starDate.setMonth((date.getMonth() - 1 == 0 ? 12 : date.getMonth() - 1))
			// this.starDate.setDate(1)
			// this.starDate =
			// 	`${this.starDate.getFullYear()}-${this.starDate.getMonth()+1}-${this.starDate.getDate()} ${this.starDate.getHours()}:${this.starDate.getMinutes()}`
			// this.endDate =
			// 	`${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}`
		},
		methods: {
			pickerClick(e) {
				this.$emit('input', false)
				this.$emit('datePopupChange', e)
			},
			handlerDate(date) {
				if(date instanceof String || date instanceof Number) {
					date = new Date(parseInt(date))
				}
				if (!(date instanceof Date)) return {}
				return {
					y: date.getFullYear(),
					M: (date.getMonth() + 1 + '').padStart(2, '0'),
					d: (date.getDate() + '').padStart(2, '0'),
				}
			},
			seleFn(index) {
				this.seleIndex = index
				let date = new Date()
				switch (this.seleIndex) {
					case 0:
						let dayInfo =  this.handlerDate(date)
						this.$emit('datePopupChange', [
							`${dayInfo.y}-${dayInfo.M}-${dayInfo.d} 00:00:00`,
							`${dayInfo.y}-${dayInfo.M}-${dayInfo.d} 23:59:59`
						])
						break;
					case 1:
						let yesterday = new Date((date.getTime() - (86400000)));
						let yesterdayInfo = this.handlerDate(yesterday)
						this.$emit('datePopupChange', [
							`${yesterdayInfo.y}-${yesterdayInfo.M}-${yesterdayInfo.d} 00:00:00`,
							`${yesterdayInfo.y}-${yesterdayInfo.M}-${yesterdayInfo.d} 23:59:59`
						])
						break;
					case 2:
						let endLastWeek = new Date(date.getTime() - ((date.getDay() == 0 ? 7 : date.getDay()) * 86400000))
						let starLastWeek = new Date(endLastWeek.getTime() - (6 * 86400000))
						
						let starLastWeekInfo = this.handlerDate(starLastWeek)
						let endLastWeekInfo = this.handlerDate(endLastWeek)
						
						this.$emit('datePopupChange', [
							`${starLastWeekInfo.y}-${starLastWeekInfo.M}-${starLastWeekInfo.d} 00:00:00`,
							`${endLastWeekInfo.y}-${endLastWeekInfo.M}-${endLastWeekInfo.d} 23:59:59`
						])
						break;
					case 3:
						let LastMonth = new Date(date.getTime() - ((86400000 * date.getDate())))
						let LastMonthInfo = this.handlerDate(LastMonth)
						this.$emit('datePopupChange', [
							`${LastMonthInfo.y}-${LastMonthInfo.M}-01 00:00:00`,
							`${LastMonthInfo.y}-${LastMonthInfo.M}-${LastMonthInfo.d} 23:59:59`
						])
						break;
				}
				this.$emit('input', false)
			},
			pickerChange(e) {
				this.$emit('pickerChange', this.list[e.detail.value[0]])
			},
			change(e) {
				this.$emit('input', e.show)
			},
			confirmFn() {

			}
		}
	}
</script>

<style scoped>
	.seledatebody_item {
		width: 140rpx;
		height: 60rpx;
		background: #ADCEFF;
		border-radius: 10px;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 18rpx;
	}

	.datebody_item {
		width: 140rpx;
		height: 60rpx;
		background: #FFFFFF;
		border-radius: 10px;
		color: #BBBBBB;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 18rpx;
	}

	.datebody {
		width: 520rpx;
		height: 500rpx;
		background: #F0F0F0;
		border-radius: 20px !important;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		padding: 15rpx 23rpx;
	}
</style>