hitap-chat/pages/approve/date-search.vue

<template>
	<view class="search-content">
		<view class="search-box">
			<view class="tab-content">
				<view :class="{
					'tab-item': true,
					'tab-item-active': tabActive == item.active
				}" v-for="(item, index) in tabList" :key="item.active" @click="handleClick(item.active)">
					{{item.name}}
				</view>
			</view>
			<view class="date-btn" @click="handleOpenDate">
				时间
				<image class="date-btn-icon" src="/static/time-search.png" mode=""></image>
			</view>
		</view>
		<view class="">
			<VdatePicker :show="timeShow" :formatter="formatter" title="时间选择" :visibleItemCount="3"
				:startDate.sync="start" :endDate.sync="end" mode="date" @cancel="timeShow = false"
				@confirm-date="changeDate" :min-date="getMinTimeForX()" :max-date="getCurTimeForX()">
			</VdatePicker>
		</view>

	</view>
</template>

<script>
	import VdatePicker from '@/components/u-view/v-date-picker/index.vue'
	export default {
		name: 'date-search',
		components: {
			VdatePicker
		},
		props: {
			tabList: {
				type: Array,
				default: () => ([])
			},
			tabActive: {
				type: [Number, String],
				default: 0
			},
			startDate: {
				type: String,
				default: ''
			},
			endDate: {
				type: String,
				default: ''
			}
		},
		computed: {
			start: {
				get() {
					return this.startDate
				},
				set(value) {
					this.$emit('update:startDate', value)
				}
			},
			end: {
				get() {
					return this.endDate
				},
				set(value) {
					this.$emit('update:endDate', value)
				}
			}
		},
		data() {
			return {
				timeShow: false,
			}
		},
		methods: {
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
			handleClick(active) {
				if (this.tabActive != active) {
					this.$emit('tabChange', active)
				}
			},
			handleOpenDate() {
				this.timeShow = true
			},
			getCurTimeForX() {
				return (new Date()).getTime()
			},
			getMinTimeForX() {
				return this.$moment('2021-01-01').valueOf()
			},
			formatTime(time) {
				return this.$moment(time).format('YYYY-MM-DD')
			},
			handleOpen(key) {
				this.$nextTick(() => {
					this[key] = true
				})
			},
			handleClear(key) {
				this[key] = ''
				this.$nextTick(() => {
					if (!this.endDate && !this.startDate) {
						this.$emit('handleSearch')
					}
				})
			},
			changeDate(timeArr) {
				const [start, end] = timeArr
				this.start = start
				this.end = end
				this.timeShow = false
				this.$nextTick(() => {
					this.$emit('handleSearch')
				})

			},
		}
	}
</script>

<style lang="scss">
	.search-content {
		padding-top: 12px;
		font-size: 14px;

		.search-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 27px;
		}

		.tab-content {
			display: flex;
			align-items: center;

			.tab-item {
				border-radius: 4px;
				padding: 4px 10px;
				background: rgba(208, 222, 245, 1);
				margin-right: 12px;
				color: rgba(54, 63, 77, 1);

				&-active {
					background: rgba(60, 109, 196, 1);
					color: rgba(255, 255, 255, 1);
				}
			}
		}

		.date-btn {
			display: flex;
			align-items: center;

			&-icon {
				width: 16px;
				height: 16px;
				margin-left: 5px;
			}
		}
	}
</style>