ygoa_miniapp/pages/work/diary/index.vue

<template>
	<page-meta root-font-size="system" />
	<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="{ 'uni-tab-item-title-active': tabIndex == index }">{{ 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(scrollInto)" clickable>
					<template v-slot:header>
						<view class="date">
							<uni-row>本周</uni-row>
							<uni-row>11.11-11.17</uni-row>
						</view>
					</template>
					<template v-slot:footer>
						<view class="content">
							<uni-row :gutter="10">
								<uni-col :span="8">
									<uni-easyinput type="textarea" disabled v-model="TODO" autoHeight
										placeholder="请输入内容"></uni-easyinput>
								</uni-col>
								<uni-col :span="8">
									<uni-easyinput type="textarea" disabled v-model="DONE" autoHeight
										placeholder="请输入内容"></uni-easyinput>
								</uni-col>
								<uni-col :span="8">
									<uni-easyinput type="textarea" disabled v-model="BUG" autoHeight
										placeholder="请输入内容"></uni-easyinput>
								</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: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" disabled v-model="TODO" autoHeight
										placeholder="请输入内容"></uni-easyinput>
								</uni-col>
								<uni-col :span="8">
									<uni-easyinput type="textarea" disabled v-model="DONE" autoHeight
										placeholder="请输入内容"></uni-easyinput>
								</uni-col>
								<uni-col :span="8">
									<uni-easyinput type="textarea" disabled v-model="BUG" 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 BUG = ref('原生 map 组件仅提供查看地图功能，不提供定位功能')

function toEditDiary(day) {
	console.log('toEditDiary', day);
	// getWeekNumber(new Date())
	$tab.navigateTo('/pages/work/diary/edit?day=' + day)
}
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('2019-12-31 15:56:02')
	let day = tempDate.getDay()

	// 调整到同一周的周四
	// day 为 0（即周日），则使用 7 代替 day
	tempDate.setDate(tempDate.getDate() + 4 - (day || 7))
	// 将日期调整到 周四 这年的第一天（1月1日）
	const year = new Date(tempDate.getFullYear(), 0, 1)

	// 计算并返回当前日期所在的周数
	const week = Math.ceil(((tempDate - year) / 86400000 + 1) / 7)

	let _date = {
		year: year.getFullYear(),
		week,
		day
	}
	console.log('_date', _date);
	return week
}
function getTotalWeeksInYear(date) {
	// 创建一个新的日期对象，传入日期
	const tempDate = new Date(date)
	const year = tempDate.getFullYear()
	const startOfYear = new Date(year, 0, 1); // 1 月 1 日
	const endOfYear = new Date(year, 11, 31); // 12 月 31 日
}
</script>

<style lang="scss" scoped>
.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;
		}
	}
}

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

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

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