时间控件展示全月的，支持切换月份

pages.json

@@ -45,7 +45,8 @@
 		{
 			"path": "pages/my/headhunter",
 			"style": {
-				"navigationBarTitleText": "猎头服务"
+				"navigationBarTitleText": "猎头服务",
+				"navigationStyle": "custom"
 			}
 		},
 		{

pages/my/headhunter.vue

@@ -1,19 +1,82 @@
 <template>
-	<view class="lt-img">
-		<image src="/static/images/lt.png" mode="heightFix"></image>
+	<view>
+		<view class="navbar" :style="{ paddingTop: (12 + statusBarHeight) + 'px' }">
+			<view class="navbar-content">
+				<view class="navbar-left" @click="goBack">
+					<u-icon name="arrow-leftward" size="36" color="#fff"></u-icon>
+				</view>
+				<view class="navbar-title"></view>
+				<view class="navbar-right"></view>
+			</view>
+		</view>
+
+		<view class="contain flex flex-direction">
+			<image src="/static/images/lt.png" class="header-icon" mode="widthFix" />
+		</view>
 	</view>
 </template>
 
 <script>
+	export default {
+		onLoad(options) {
+			let systemInfo = uni.getSystemInfoSync();
+			this.statusBarHeight = systemInfo.statusBarHeight || 0;
+		},
+		methods: {
+			goBack() {
+				uni.navigateBack();
+			},
+		}
+	};
 </script>
 
-<style>
-	.lt-img{
-		width: 100%;
-		height: calc(100vh - 44px);
+<style lang="scss" scoped>
+	.navbar {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		z-index: 999;
+
+		.navbar-content {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			padding: 0 30rpx;
+			height: 60rpx;
+
+			.navbar-left {
+				width: 60rpx;
+				height: 60rpx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+			}
+
+			.navbar-title {
+				color: rgba(23, 23, 37, 1);
+				font-family: DM Sans;
+				font-size: 36rpx;
+				font-weight: 700;
+				line-height: 52rpx;
+				letter-spacing: 0%;
+				text-align: center;
+			}
+
+			.navbar-right {
+				width: 60rpx;
+				height: 60rpx;
+			}
+		}
 	}
-	.lt-img image{
-		width: 100%;
-		height: 100%;
+	.contain {
+		background: linear-gradient(to right, #4286F5, #276DE7);
+		padding-top: 120rpx;
+		align-items: center;
+		height: 100vh;
+		.header-icon {
+			width: 100%;
+			display: block;
+		}
 	}
 </style>

pages/recruitmentData/communicationRecords.vue

@@ -108,12 +108,28 @@
 			<view class="interview-list" v-if="activeTab === 1">
 				<!-- Date Selector -->
 				<view class="date-selector">
+					<!-- Month Switcher -->
+					<view class="month-switcher">
+						<u-icon name="arrow-left" color="#666" size="28" @click="changeMonth(-1)"></u-icon>
+						<text class="current-month">{{ currentYear }}年{{ currentMonth }}月</text>
+						<u-icon name="arrow-right" color="#666" size="28" @click="changeMonth(1)"></u-icon>
+					</view>
+					
+					<!-- Week Days -->
 					<view class="week-days">
-						<text class="day-name" v-for="day in currentWeekDays" :key="day.name">{{ day.name }}</text>
+						<text class="day-name" v-for="day in currentMonthDays" :key="day.name">{{ day.name }}</text>
 					</view>
-					<view class="week-dates">
-						<view class="date-item" :class="{ active: date.isSelected }" v-for="date in currentWeekDates"
-							:key="date.value" @click="selectDate(date)">
+					
+					<!-- Month Dates -->
+					<view class="month-dates">
+						<view class="date-item" 
+							:class="{ 
+								active: date.isSelected, 
+								'other-month': date.isOtherMonth 
+							}" 
+							v-for="(date,index) in currentMonthDates"
+							:key="index" 
+							@click="selectDate(date)">
 							<text class="date-value">{{ date.value }}</text>
 						</view>
 					</view>
@@ -151,7 +167,7 @@
 					<!-- 空状态显示 -->
 					<view class="empty-state" v-else>
 						<view class="empty-illustration">
-							<image src="../../static/images/index/Hrempty.svg" class="empty-image" mode="aspectFit" />
+							<image style="height: 300px;" src="../../static/images/index/Hrempty.svg" class="empty-image" mode="aspectFit" />
 						</view>
 					</view>
 				</view>
@@ -256,29 +272,32 @@
 <script>
 	export default {
 		data() {
-			return {
-				statusBarHeight: 0,
-				activeTab: 0,
-				tabs: [{
-						name: '沟通过'
-					},
-					{
-						name: '面试'
-					},
-					{
-						name: '收藏简历'
-					},
-					// { name: '收藏职位' }
-				],
-				communicationRecords: [],
-				// 面试相关数据
-				selectedDate: null, // 当前选中的日期
-				// 收藏相关数据
-				favoriteRecords: [], // 收藏记录（空数组，显示空状态）
-				favoriteJobs: [], // 收藏职位（空数组，显示空状态）
-				interviewRecords: []
-			}
-		},
+		return {
+			statusBarHeight: 0,
+			activeTab: 0,
+			tabs: [{
+					name: '沟通过'
+				},
+				{
+					name: '面试'
+				},
+				{
+					name: '收藏简历'
+				},
+				// { name: '收藏职位' }
+			],
+			communicationRecords: [],
+			// 面试相关数据
+			selectedDate: null, // 当前选中的日期
+			// 收藏相关数据
+			favoriteRecords: [], // 收藏记录（空数组，显示空状态）
+			favoriteJobs: [], // 收藏职位（空数组，显示空状态）
+			interviewRecords: [],
+			// 当前显示的年月
+			currentYear: new Date().getFullYear(),
+			currentMonth: new Date().getMonth() + 1 // 1-12
+		}
+	},
 		computed: {
 			groupedRecords() {
 				const records = Array.isArray(this.communicationRecords) ?
@@ -302,45 +321,72 @@
 
 				return Object.values(groups)
 			},
-			// 当前周的星期名称
-			currentWeekDays() {
-				const weekDays = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+			// 星期名称
+			currentMonthDays() {
+				const weekDays = ['日', '一', '二', '三', '四', '五', '六']
 				return weekDays.map(name => ({
 					name
 				}))
 			},
-			// 当前周的日期
-			currentWeekDates() {
+			// 当前月的日期
+			currentMonthDates() {
 				const today = new Date()
-				const currentDay = today.getDay() // 0-6，0是周日
-
-				// 获取本周一的日期（周一开始）
-				const monday = new Date(today)
-				// 如果今天是周日(0)，则往前推6天到周一
-				// 如果今天是周一(1)，则往前推0天
-				// 如果今天是周二(2)，则往前推1天
-				const daysToMonday = currentDay === 0 ? 6 : currentDay - 1
-				monday.setDate(today.getDate() - daysToMonday)
-
-				// 生成本周7天的日期
-				const weekDates = []
-				for (let i = 0; i < 7; i++) {
-					const date = new Date(monday)
-					date.setDate(monday.getDate() + i)
-
+				// 计算当前月份的第一天
+				const firstDay = new Date(this.currentYear, this.currentMonth - 1, 1)
+				// 计算当前月份的天数
+				const daysInMonth = new Date(this.currentYear, this.currentMonth, 0).getDate()
+				// 计算第一天是星期几（0-6，0是周日）
+				const firstDayOfWeek = firstDay.getDay()
+				
+				// 生成当前月份的日期数组
+				const monthDates = []
+				
+				// 添加上月的日期（填充第一行）
+				if (firstDayOfWeek > 0) {
+					const prevMonthLastDay = new Date(this.currentYear, this.currentMonth - 1, 0).getDate()
+					for (let i = firstDayOfWeek - 1; i >= 0; i--) {
+						const date = new Date(this.currentYear, this.currentMonth - 1, prevMonthLastDay - i)
+						monthDates.push({
+							value: date.getDate().toString(),
+							date: date,
+							isSelected: false,
+							isOtherMonth: true
+						})
+					}
+				}
+				
+				// 添加当月的日期
+				for (let i = 1; i <= daysInMonth; i++) {
+					const date = new Date(this.currentYear, this.currentMonth - 1, i)
 					const isToday = date.toDateString() === today.toDateString()
 					const isSelected = this.selectedDate ?
 						date.toDateString() === this.selectedDate.toDateString() : isToday
-
-					weekDates.push({
-						value: date.getDate().toString(),
+					
+					monthDates.push({
+						value: i.toString(),
 						date: date,
-						isSelected: isSelected
+						isSelected: isSelected,
+						isOtherMonth: false
 					})
 				}
-
-				return weekDates
-			}
+				
+				// 添加下月的日期（填充最后一行）
+				const totalCells = Math.ceil(monthDates.length / 7) * 7
+				if (monthDates.length < totalCells) {
+					const remainingCells = totalCells - monthDates.length
+					for (let i = 1; i <= remainingCells; i++) {
+						const date = new Date(this.currentYear, this.currentMonth, i)
+						monthDates.push({
+							value: i.toString(),
+							date: date,
+							isSelected: false,
+							isOtherMonth: true
+						})
+					}
+				}
+				
+				return monthDates
+			},
 		},
 		onLoad(options) {
 			console.log(options);
@@ -453,6 +499,22 @@
 				this.selectedDate = date.date
 				console.log('选中日期:', date.date)
 			},
+			// 切换月份
+			changeMonth(direction) {
+				let newMonth = this.currentMonth + direction
+				let newYear = this.currentYear
+				
+				if (newMonth < 1) {
+					newMonth = 12
+					newYear--
+				} else if (newMonth > 12) {
+					newMonth = 1
+					newYear++
+				}
+				
+				this.currentYear = newYear
+				this.currentMonth = newMonth
+			},
 			goToInterviewDetail(record) {
 				console.log('查看面试详情:', record)
 				uni.navigateTo({
@@ -782,15 +844,32 @@
 	.date-selector {
 		background: #ffffff;
 		border-radius: 12rpx;
-		padding: 24rpx 0;
-		//    margin-bottom: 20rpx;
-		//    border: 0.5px solid rgba(227, 231, 236, 1);
+		padding: 24rpx;
+		margin-bottom: 20rpx;
 	}
 
+	/* Month Switcher */
+	.month-switcher {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		margin-bottom: 24rpx;
+	}
+
+	.current-month {
+		color: rgba(51, 51, 51, 1);
+		font-family: DM Sans;
+		font-size: 28rpx;
+		font-weight: 700;
+		line-height: 36rpx;
+	}
+
+	/* Week Days */
 	.week-days {
 		display: flex;
 		justify-content: space-between;
 		margin-bottom: 16rpx;
+		padding: 0 10rpx;
 	}
 
 	.day-name {
@@ -803,27 +882,32 @@
 		flex: 1;
 	}
 
-	.week-dates {
+	/* Month Dates */
+	.month-dates {
 		display: flex;
-		justify-content: space-between;
+		flex-wrap: wrap;
+		padding: 0 10rpx;
 	}
 
 	.date-item {
-		flex: 1;
+		width: 14.28%;
 		display: flex;
 		justify-content: center;
 		align-items: center;
-		height: 60rpx;
-		border-radius: 50%;
+		height: 72rpx;
+		// border-radius: 50%;
 		cursor: pointer;
-		min-width: 60rpx;
-		max-width: 60rpx;
+		box-sizing: border-box;
 	}
 
 	.date-item.active {
 		background: rgba(1, 107, 246, 1);
 	}
 
+	.date-item.other-month {
+		opacity: 0.5;
+	}
+
 	.date-value {
 		color: rgba(51, 51, 51, 1);
 		font-family: DM Sans;
@@ -837,6 +921,10 @@
 		color: #ffffff;
 	}
 
+	.date-item.other-month .date-value {
+		color: rgba(153, 153, 153, 1);
+	}
+
 	/* Interview Records */
 	.interview-records {
 		background: #ffffff;