当前位置：首页 > article >正文

uniapp uni-calendar日历实现考勤统计功能

article 2024/11/13 14:53:32

根据日历组件代码结构构成相应结构的状态统计数据 list 再遍历到每日的子组件中

<view class="uni-calendar__weeks-item" v-for="(weeks,weeksIndex) in item" :key="weeksIndex">
	<calendar-item class="uni-calendar-item--hook" :weeks="weeks" :calendar="calendar"
		:selected="selected" :state="list[weeks.date]" :lunar="lunar" :checkHover="range" @change="choiceDate"
		@handleMouse="handleMouse">
	</calendar-item>
</view>

在这里插入图片描述

根据每日的状态字段完成样式的判断，展示状态

view style="display: flex;" v-if="state.clockInState && !weeks.disable">
	<view :style="[{'width': '6px'},{'height': '6px'},{'background-color': state.clockInState === 1 ? 'rgba(25,190,107,1)' : '#F0B230'},{'border-radius': '5px'}]"></view>
	<view :style="[{'width': '6px'},{'height': '6px'},{'background-color': state.clockOutState === 1 ?'rgba(25,190,107,1)' : '#F0B230'},{'border-radius': '5px'},{'margin-left': '5px'}]"></view>
</view>