feat(diary): 日报模块

pages/work/diary/edit.vue

@@ -1,4 +1,5 @@
 <template>
+	<page-meta root-font-size="system" />
 	<view>
 		<uni-nav-bar :title="date" right-text="确定" @clickRight="dialog"></uni-nav-bar>
 		<view class="diary_content">

pages/work/diary/index.vue

@@ -1,4 +1,5 @@
 <template>
+	<page-meta root-font-size="system" />
 	<view>
 		<view class="yearSelect">
 			<uni-combox :candidates="yearRange" placeholder="请选择年份" v-model="selectYear"></uni-combox>
@@ -8,16 +9,16 @@
 				<uni-list-item>
 					<template v-slot:header>
 						<view>
-							<button class="week_button" @click="showDrawer" type="primary"> {{scrollInto}} </button>
+							<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">
+							<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>
+									:class="{ 'uni-tab-item-title-active': tabIndex == index }">{{ tab.name }}</text>
 							</view>
 						</scroll-view>
 					</template>
@@ -51,13 +52,16 @@
 						<view class="content">
 							<uni-row :gutter="10">
 								<uni-col :span="8">
-									<uni-easyinput type="textarea" disabled v-model="TODO" autoHeight placeholder="请输入内容"></uni-easyinput>
+									<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-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-easyinput type="textarea" disabled v-model="BUG" autoHeight
+										placeholder="请输入内容"></uni-easyinput>
 								</uni-col>
 							</uni-row>
 						</view>
@@ -66,21 +70,24 @@
 				<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>
+							<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-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-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-easyinput type="textarea" disabled v-model="BUG" autoHeight
+										placeholder="请输入内容"></uni-easyinput>
 								</uni-col>
 							</uni-row>
 						</view>
@@ -99,191 +106,191 @@
 </template>
 
 <script setup lang="ts">
-	import { onMounted, reactive, ref } from 'vue'
-	import $tab from '@/plugins/tab.js'
+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 组件仅提供查看地图功能，不提供定位功能')
+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)
+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;
 	}
-	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())
+	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()
+	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)
+	// 调整到同一周的周四
+	// 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)
+	// 计算并返回当前日期所在的周数
+	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 日
+	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">
-	.yearSelect {
-		input {
-			text-align: center;
-		}
+<style lang="scss" scoped>
+.yearSelect {
+	input {
+		text-align: center;
 	}
+}
 
-	.year_button {
-		border-radius: 0px;
+.year_button {
+	border-radius: 0px;
+}
+
+.scroll_bar {
+	.week_button {
+		height: 80rpx;
+		border-radius: 0 5px 5px 0;
 	}
 
-	.scroll_bar {
-		.week_button {
-			height: 80rpx;
-			border-radius: 0 5px 5px 0;
-		}
+	::v-deep .uni-list-item__container {
+		padding-left: 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;
 
-		.scroll-h {
-			width: 95%;
-			/* #ifdef H5 */
-			width: 100%;
+		.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;
-			flex-direction: row;
+			line-height: 80rpx;
+			flex-wrap: nowrap;
 			/* #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;
-			}
+		.uni-tab-item-title-active {
+			color: #007AFF;
 		}
 	}
+}
 
-	.diary_content {
-		.date {
-			text-align: center;
-			width: 20%;
-		}
+::v-deep .diary_content {
+	.date {
+		text-align: center;
+		width: 20%;
+	}
 
-		.content {
-			text-align: center;
-			width: 100%;
+	.content {
+		text-align: center;
+		width: 100%;
 
-			.is-disabled {
-				color: #000 !important;
-			}
+		.is-disabled {
+			color: #000 !important;
 		}
 	}
+}
 </style>