assess-app/common/statistics/head_filter.vue

<template>
	<view>
		<view class="head_filter row-justify-sb center p-lr30">
			<view class="filter_item r-100  bg-rgba-255" @click="startAnimation">
				<text class="text-color-fff size-28 sys-weight-600 p-r10">汇总统计-公司</text>
				<uni-icons :animation="animationData" class="dropdown-icon" :type="type" size="16"
					color="#fff"></uni-icons>
			</view>
			<view class="filter_item last_item r-100 bg-rgba-255" @click="startAnimation">
				<text class="text-color-fff size-28 sys-weight-600 p-r10">周数据</text>
				<uni-icons :animation="animationData" class="dropdown-icon" type="down" size="16"
					color="#fff"></uni-icons>
			</view>
			<view class="filter_item last_item r-100  bg-rgba-255 row-justify-c center">
				<uni-icons type="calendar" size="18" color="#fff"></uni-icons>
				<text class="text-color-fff size-28 sys-weight-600 m-l10">2024</text>
			</view>
		</view>
		<uni-popup background-color="#fff" ref="popup" type="bottom" border-radius="10px"
			@touchmove.stop.prevent="moveHandle">
			<EnSelect ref="system" @onChange="onChange"></EnSelect>
		</uni-popup>
	</view>
</template>

<script>
	import EnSelect from "@/components/en-utils/en-select/en-select.vue";

	export default {
		name: 'head_filter',
		components: {
			EnSelect
		},
		data() {
			return {
				type: 'down',
				animationData: {},
				isRote: false,
				animation: null,
			};
		},
		methods: {
			onChange(type) {
				this.$refs.popup.close('bottom')
				this.$emit('onTopSelect', type)
			},
			startAnimation() {
				//旋转角度 
				this.$refs.popup.open('bottom')
				let rota = 180;
				//判断是否展开
				if (this.isRote) {
					rota = 0;
					//标记未展开
					this.isRote = false;
					//隐藏需要隐藏的内容
					this.showAddPople = false;
				} else {
					this.isRote = true;
					//显示隐藏的内容
					this.showAddPople = true;
				}
				//创建动画
				this.animation = uni.createAnimation();
				//设置旋转角度 
				this.animation.rotate(rota).step()
				//导出动画
				this.animationData = this.animation.export()
			},
			moveHandle() {
				return false
			},
		}
	}
</script>

<style lang="scss" scoped>
	.head_filter {
		height: 35px;
		line-height: 36px;
		text-align: center;

		.filter_item {
			line-height: 36px;
			border: 2rpx solid rgba(255, 255, 255, 0.7);
		}

		.filter_item:first-child {
			width: 290rpx;
		}

		.last_item {
			width: 180rpx;
		}
	}

	.dropdown-icon {
		display: inline-block;
		transition: transform 0.3s ease-in-out;
		/* 添加平滑的旋转动画 */
	}
</style>