ygoa_miniapp/pages/work/diary/index.vue

<template>
	<view>
		<view class="yearSelect">
			<uni-combox :candidates="yearRange" placeholder="请选择年份" v-model="selectYear"></uni-combox>
		</view>
		<view class="scroll_bar">
			<uni-list>
				<uni-list-item>
					<template v-slot:header>
						<view>
							<button class="week_button" @click="showDrawer" type="primary"> {{scrollInto}} </button>
						</view>
					</template>
					<template v-slot:body>
						<scroll-view id="tab-bar" class="scroll-h" :scroll-x="true" :show-scrollbar="false"
							:scroll-into-view="scrollInto">
							<view v-for="(tab,index) in tabBars" :key="tab.id" class="uni-tab-item" :id="tab.id" :data-current="index"
								@click="ontabtap">
								<text class="uni-tab-item-title"
									:class="tabIndex==index ? 'uni-tab-item-title-active' : ''">{{tab.name}}</text>
							</view>
						</scroll-view>
					</template>
				</uni-list-item>
			</uni-list>
		</view>
		<view class="diary_content">
			<uni-list>
				<uni-list-item>
					<template v-slot:header>
						<view class="date">日期</view>
					</template>
					<template v-slot:footer>
						<view class="content">
							<uni-row :gutter="10">
								<uni-col :span="8">任务</uni-col>
								<uni-col :span="8">完成</uni-col>
								<uni-col :span="8">反馈</uni-col>
							</uni-row>
						</view>
					</template>
				</uni-list-item>
				<uni-list-item @click="toEditDiary(day)" v-for="(day, index) in '一二三四五六日'" :key="index" clickable>
					<!-- <template v-slot:footer>
						<view class="content">
							<view style="margin-bottom: 5px;">
									<uni-row gutter="10">
										<uni-col :span="12">周{{day}}</uni-col>
										<uni-col :span="12">11.1{{index+1}}</uni-col>
									</uni-row>
							</view>
							<uni-row :gutter="10">
								<uni-col :span="4">
									<text>任务</text>
								</uni-col>
								<uni-col :span="20">
									<uni-easyinput type="textarea" v-model="TODO" disabled autoHeight placeholder="请输入内容"></uni-easyinput>
								</uni-col>
							</uni-row>
							<uni-row :gutter="10">
								<uni-col :span="4">
									<text>完成</text>
								</uni-col>
								<uni-col :span="20">
									<uni-easyinput type="textarea" v-model="DONE" disabled autoHeight placeholder="请输入内容"></uni-easyinput>
								</uni-col>
							</uni-row>
							<uni-row :gutter="10">
								<uni-col :span="4">
									<text>反馈</text>
								</uni-col>
								<uni-col :span="20">
									<uni-easyinput type="textarea" v-model="TAG" disabled autoHeight placeholder="请输入内容"></uni-easyinput>
								</uni-col>
							</uni-row>
						</view>
					</template> -->
					<template v-slot:header>
						<view class="date">
							<uni-row :gutter="10">周{{day}}</uni-row>
							<uni-row :gutter="10">11.1{{index+1}}</uni-row>
						</view>
					</template>
					<template v-slot:footer>
						<view class="content">
							<uni-row :gutter="10">
								<uni-col :span="8">
									<uni-easyinput type="textarea" v-model="TODO" disabled autoHeight placeholder="请输入内容"></uni-easyinput>
								</uni-col>
								<uni-col :span="8">
									<uni-easyinput type="textarea" v-model="DONE" disabled autoHeight placeholder="请输入内容"></uni-easyinput>
								</uni-col>
								<uni-col :span="8">
									<uni-easyinput type="textarea" v-model="TAG" disabled autoHeight placeholder="请输入内容"></uni-easyinput>
								</uni-col>
							</uni-row>
						</view>
					</template>
				</uni-list-item>
			</uni-list>
		</view>
		<view class="drawer_container">
			<uni-drawer ref="rightDrawer" mode="left">
				<scroll-view style="height: 100%;" scroll-y="true">
					<view v-for="item in 60" :key="item">第 {{ item }} 周</view>
				</scroll-view>
			</uni-drawer>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onMounted, reactive, ref } from 'vue'
	import $tab from '@/plugins/tab.js'
	const TODO = ref('1. 完成 通讯录 页面\n2. 完成 人员信息 页面')
	const DONE = ref('1. 完成 通讯录 页面\n2. 完成 通讯录人员信息 页面\n3. 解决 地图无法正常显示定位 问题')
	const TAG = ref('原生 map 组件仅提供查看地图功能，不提供定位功能')
	function toEditDiary(e) {
		console.log('toEditDiary', e);
		$tab.navigateTo('/pages/work/diary/edit?day=' + e)
	}
	const rightDrawer = ref(null)
	function showDrawer() {
		rightDrawer.value.open()
	}
	function closeDrawer() {
		rightDrawer.value.close()
	}
	const scrollInto = ref(1)
	const tabIndex = ref(0)
	let tabBars = reactive([])
	function ontabtap(e) {
		console.log('ontabtap', e);
		let index = e.target.dataset.current || e.currentTarget.dataset.current;
		switchTab(index);
	}
	function switchTab(index) {
		if (tabIndex.value === index) {
			return;
		}
		tabIndex.value = index;
		scrollInto.value = tabBars[index].id;
	}
	const selectYear = ref(-1)
	let yearRange = reactive([])
	onMounted(() => {
		tabBars = [
			{
				name: '第1周',
				id: '1'
			}, {
				name: '第2周',
				id: '2'
			}, {
				name: '第3周',
				id: '3'
			}, {
				name: '第4周',
				id: '4'
			}, {
				name: '第5周',
				id: '5'
			}, {
				name: '第6周',
				id: '6'
			}, {
				name: '第7周',
				id: '7'
			}, {
				name: '第8周',
				id: '8'
			}, {
				name: '第9周',
				id: '9'
			},
		],
			yearRange = ['2023', '2024']
		let thisYear = yearRange.find((item) => Number(item) == new Date().getFullYear())
		console.log('thisYear', thisYear)
		selectYear.value = thisYear
	})
	function changeYear(e) {
		let a = getWeekNumber(new Date())

		console.log('changeYear', e)
	}
	function getWeekNumber(date) {
		// 创建一个新的日期对象，传入日期
		const tempDate = new Date(date.getTime())

		// 将日期调整到该年的第一天（1月1日）
		tempDate.setDate(tempDate.getDate() + 4 - (tempDate.getDay() || 7))

		// 获取该年1月1日对应的周四所在的日期
		const yearStart = new Date(tempDate.getFullYear(), 0, 1)

		// 计算并返回当前日期所在的周数
		const weekNumber = Math.ceil(((tempDate - yearStart) / 86400000 + 1) / 7)
		// 计算年份
		let year = date.getFullYear()
		if (weekNumber == 1 && date.getDate() >= 7) year += 1

		return weekNumber
	}
</script>

<style lang="scss">
	.yearSelect {
		input {
			text-align: center;
		}
	}

	.year_button {
		border-radius: 0px;
	}

	.scroll_bar {
		.week_button {
			height: 80rpx;
			border-radius: 0 5px 5px 0;
		}

		::v-deep .uni-list-item__container {
			padding-left: 0;
		}

		.scroll-h {
			width: 95%;
			/* #ifdef H5 */
			width: 100%;
			/* #endif */
			height: 80rpx;
			flex-direction: row;
			/* #ifndef APP-PLUS */
			white-space: nowrap;
			margin-left: 5px;
			margin-right: 5px;
			/* #endif */
			/* flex-wrap: nowrap; */
			// border-color: #cccccc;
			// border-bottom-style: solid;
			// border-bottom-width: 1px;

			.uni-tab-item {
				/* #ifndef APP-PLUS */
				display: inline-block;
				/* #endif */
				flex-wrap: nowrap;
				padding-left: 34rpx;
				padding-right: 34rpx;
			}

			.uni-tab-item-title {
				color: #555;
				font-size: 30rpx;
				height: 80rpx;
				line-height: 80rpx;
				flex-wrap: nowrap;
				/* #ifndef APP-PLUS */
				white-space: nowrap;
				/* #endif */
			}

			.uni-tab-item-title-active {
				color: #007AFF;
			}
		}
	}

	.diary_content {
		.date {
			text-align: center;
			width: 20%;
		}

		.content {
			text-align: center;
			width: 100%;

			.is-disabled {
				background-color: #fff !important;
				color: #000 !important;
			}
		}
	}
</style>