hitap-chat/pages/agricultural3W/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)" style="display: flex;">
					<view>
						{{item.name}}
					</view>
					<view style="margin-left: 10rpx;">
						{{item.num}}
					</view>
				</view>
			</view>

		</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>