h5-elab-open-ownerUnion/components/subComponents/dmDateScreen.vue

<template>
	<view class="dateContainer">
		<view class="topSection">
			<view class="title">{{title}}</view>
			<view class="dateItems">
				<view class="item" v-for="(item, idx) in dateItems" :key="idx" :style="`color: ${item.value == defaultParameter.dateType ? '#454545' : '#999999'};`"
				 @click="screenAction(item.value)">
					{{item.title}}
				</view>
			</view>
		</view>
		<view class="botttomSection" @click="screenAction(4)">
			<view class="bottomItem">
				<view class="leftText">起</view>
				<view class="dateText">{{beginDate | visitTimeFilter}}</view>
				<image class="rightIcon" src="../../static/icons/more.png" mode=""></image>
			</view>
			<view class="bottomItem">
				<view class="leftText">终</view>
				<view class="dateText">{{endDate | visitTimeFilter}}</view>
				<image class="rightIcon" src="../../static/icons/more.png" mode=""></image>
			</view>
		</view>

		<dm-calendar-picker-view ref='calendarPickerView' @confirmSelDate='confirmSelDate'></dm-calendar-picker-view>
	</view>
</template>

<script>
	import dmCalendarPickerView from './dmCalendarPickerView.vue'
	import moment from '../../static/moment.min.js'
	import {
		displayDateFormatChi
	} from '../../static/format.js'

	export default {
		props: {
			title: {
				type: String,
				default: '筛选日期'
			},
			defaultParameter: {
				type: Object,
				default () {
					return {
						'dateType': '1',
						'startDate': '',
						'endDate': '',
						'terminal': '0'
					}
				}
			},
			modelValue: {
				type: [Number, String],
				default: '0'
			},
		},
		data() {
			return {
				dateItems: [{
						title: '今日',
						value: 1
					},
					{
						title: '近7日',
						value: 2
					},
					{
						title: '近30天',
						value: 3
					},
				],
				beginDate: null,
				endDate: null
			}
		},
		mounted() {

		},
		methods: {
			screenAction(val) {
				if (val < 4) {
					this.$emit('screenDateAction', val)
				} else {
					this.$refs.calendarPickerView.show()
				}
			},

			confirmSelDate(e) {
				const startDate = e.startDate;
				const endDate = e.endDate;
				var start = ''
				var end = ''
				if (moment(startDate).isBefore(endDate)) {
					start = startDate;
					end = endDate;
				} else {
					start = endDate;
					end = startDate;
				}

				this.$emit('screenDateAction', 4, start, end)
			},

			displayDate() {
				var dateType = parseInt(this.defaultParameter.dateType)
				let curDate = (new Date()).getTime();
				this.beginDate = null
				this.endDate = null

				if (dateType == 1) {
					this.beginDate = curDate
					this.endDate = curDate
				} else if (dateType == 2) {
					this.endDate = curDate
					this.beginDate = this.getBeginDate(6)
				} else if (dateType == 3) {
					this.endDate = curDate
					this.beginDate = this.getBeginDate(29)
				} else if (dateType == 4) {
					this.beginDate = this.stringToStamp(this.defaultParameter.startDate)
					this.endDate = this.stringToStamp(this.defaultParameter.endDate)
				}
			},

			getBeginDate(days) {
				let curDate = (new Date()).getTime();
				let beginDay = curDate - days * 24 * 60 * 60 * 1000
				return beginDay
			},
			stringToStamp(val) {
				// var timeStr = val.replace('-', '/') + ' ' + '00:00:00'
				var timeStr = val.replace(/-/g,'/') + " " + '00:00:00'
				var stamp = new Date(timeStr).getTime()
				return stamp
			}
		},

		filters: {
			visitTimeFilter(val) {
				return displayDateFormatChi(val)
			},
		},
		watch: {
			defaultParameter: {
				handler(e) {
					this.displayDate()
				},
				deep: true,
				immediate: true
			}
		},
		components: {
			dmCalendarPickerView
		}
	}
</script>

<style scoped lang="scss">
	.dateContainer {
		width: 100%;
		font-family: Verdana;
		padding: 0 30rpx;
		box-sizing: border-box;

		.topSection {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.title {
				color: #454545;
				font-size: 32rpx;
				font-weight: bold;
			}

			.dateItems {
				display: flex;
				justify-content: flex-end;
				font-size: 28rpx;
				color: #999999;

				.item {
					margin-left: 20rpx;
				}
			}
		}

		.botttomSection {
			background-color: #F1F5F9;
			border-radius: 16rpx;
			width: 100%;
			height: 94rpx;
			display: flex;
			justify-content: space-between;
			padding: 0 30rpx;
			box-sizing: border-box;
			margin-top: 22rpx;

			.bottomItem {
				display: flex;
				justify-content: flex-start;
				align-items: center;

				.leftText {
					color: #999999;
					font-size: 28rpx;
					font-weight: bold;
					margin-right: 12rpx;
				}

				.dateText {
					color: #333333;
					font-size: 28rpx;
					margin-right: 20rpx;
				}

				.rightIcon {
					width: 15rpx;
					height: 24rpx;
				}

			}
		}

	}
</style>