crm-app-vue3/pages/index/components/dateSelect/index.vue

<template>
	<view class="dayNum_wrap" @click="handleClickDayNum">
		<view class="text">{{dayName}}</view>
		<u-icon name="arrow-down-fill" color="#aaa" size="12"></u-icon>
		<ld-select :list="dayNumDict" label-key="name" value-key="value" placeholder="" v-model="dayNum" clearable
			@change="handleDayNumChange" ref="dayNum" class="dayNumSelect"></ld-select>
	</view>
</template>

<script>
	import dayjs from 'dayjs';
	export default {
		data() {
			return {
				dayNumDict: [{
					name: "今天",
					value: "0"
				}, {
					name: "昨天",
					value: "1"
				}, {
					name: "7天",
					value: "7"
				}, {
					name: "30天",
					value: "30"
				}, {
					name: "全部",
					value: null
				}],

				dayNum: "0",

				dayName: "今天",

				queryParams: {
					createTimeStart: "",
					createTimeEnd: "",
				},
			}
		},
		mounted() {
			this.handleDayNumChange({
				name: this.dayName,
				value: this.dayNum
			});
		},
		methods: {
			handleClickDayNum() {
				this.$refs.dayNum.showModal();
			},
			handleDayNumChange(val) {
				const {
					name,
					value
				} = val;
				this.dayName = name;
				this.dayNum = value;
				if (this.dayNum === null) {
					this.queryParams.createTimeStart = "";
					this.queryParams.createTimeEnd = "";
				} else {
					this.queryParams.createTimeStart = dayjs().subtract(this.dayNum, 'day').format("YYYY-MM-DD ") +
						"00:00:00";
					if (this.dayNum === '1') {
						this.queryParams.createTimeEnd = dayjs().subtract(this.dayNum, 'day').format("YYYY-MM-DD ") +
							"23:59:59";
					} else {
						this.queryParams.createTimeEnd = dayjs().format("YYYY-MM-DD ") + "23:59:59";
					}
				}
				this.$emit("confirm", this.queryParams);
			},
		}
	}
</script>

<style scoped lang="scss">
	.dayNum_wrap {
		display: flex;
		align-items: center;

		.text {
			font-size: 28rpx;
			color: #b8b8b8;
			margin-right: 20rpx;
		}
	}

	.dayNumSelect {
		height: 0px;
		width: 0px;
		overflow: hidden;
	}
</style>