crm-app-vue3/pages/market/index.vue

<template>
	<view>
		<u-sticky bgColor="#fff" class="sticky_wrap">
			<u-tabs class="uTabsWrap" :list="list" :activeStyle="{
			color: '#303133',
			fontWeight: 'bold',
			fontSize : '36rpx'
			}" :inactiveStyle="{
			color: '#606266',
			fontWeight: 'bold',
			fontSize : '32rpx'}" @change="handleTabChange">
			</u-tabs>
			<view class="dayNum_wrap" @click="handleClickDayNum">
				{{dayName}}
			</view>
		</u-sticky>
		<view class="main_warp" id="main_warp">
			<brief-report :class="['teamReport_wrap',activeTab !== 'teamReport' ? 'hidden' : '' ]"
				:type="1" :queryParams="queryParams" ref="teamReport"></brief-report>
			<brief-report :class="[activeTab !== 'personReport' ? 'hidden' : '' ]" ref="personReport"
				:type="2" :queryParams="queryParams"></brief-report>
		</view>

		<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 briefReport from "./briefReport/index.vue";
	import dayjs from "dayjs";
	export default {
		components: {
			briefReport
		},
		data() {
			return {
				list: [{
					name: '团队简报',
					value: "teamReport"
				}, {
					name: '个人简报',
					value: "personReport"
				}],

				activeTab: "teamReport",

				dayNumDict: [{
					name: "今天",
					value: "0"
				}, {
					name: "昨天",
					value: "1"
				},{
					name: "7天",
					value: "7"
				}, {
					name: "30天",
					value: "30"
				},
				],

				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;
				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.$refs.teamReport.handleInit();
				this.$refs.personReport.handleInit();
			},
			handleTabChange({
				value
			}) {
				this.activeTab = value;
			}
		},
	}
</script>

<style lang="scss" scoped>
	.dayNumSelect{
		height: 0px;
		overflow: hidden;
	}
	.sticky_wrap {
		position: relative;

		.dayNum_wrap {
			position: absolute;
			right: 20px;
			top: 10px;
		}
	}

	.hidden {
		padding: 0;
		height: 0;
		overflow: hidden;
	}

	.personClue {
		background-color: #fff;
		display: flex;
		justify-content: flex-start;
	}
</style>