ygoa_miniapp/pages/work/diary/edit.vue

<template>
	<view>
		<uni-nav-bar :title="date" right-text="确定" @clickRight="dialog"></uni-nav-bar>
		<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-easyinput type="textarea" v-model="TODO" :maxlength="-1" :autoHeight="true"
								placeholder="请输入内容"></uni-easyinput>
						</view>
					</template>
				</uni-list-item>
				<uni-list-item>
					<template v-slot:header>
						<view class="date">完成</view>
					</template>
					<template v-slot:footer>
						<view class="content">
							<uni-easyinput type="textarea" v-model="DONE" :maxlength="-1" :autoHeight="true"
								placeholder="请输入内容"></uni-easyinput>
						</view>
					</template>
				</uni-list-item>
				<uni-list-item>
					<template v-slot:header>
						<view class="date">反馈</view>
					</template>
					<template v-slot:footer>
						<view class="content">
							<uni-easyinput type="textarea" v-model="BUG" :maxlength="-1" :autoHeight="true"
								placeholder="请输入内容"></uni-easyinput>
						</view>
					</template>
				</uni-list-item>
				<uni-list-item>
					<template v-slot:header>
						<view class="date">备注</view>
					</template>
					<template v-slot:footer>
						<view class="content">
							<uni-easyinput type="textarea" v-model="remark" :maxlength="-1" :autoHeight="true"
								placeholder="请输入内容"></uni-easyinput>
						</view>
					</template>
				</uni-list-item>

				<uni-list-item>
					<template v-slot:footer>
						<view class="content">
							<button @click="dialog" type="primary">提交</button>
						</view>
					</template>
				</uni-list-item>
			</uni-list>
		</view>
		<!-- 确认提交弹出层 -->
		<view class="popup_container">
			<uni-popup ref="submitDialog" type="dialog">
				<uni-popup-dialog type="success" title="确认提交" @confirm="submit"></uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onMounted, ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { useUserStore } from '@/store/user.js'
	const date = ref('')

	const TODO = ref('')
	const DONE = ref('')
	const BUG = ref('')
	const remark = ref('')
	const userStore = useUserStore()
	onMounted(() => {
		console.log('diaryOnMounted', userStore.user);
	})
	onLoad((option) => {
		if (isNaN(Number(option.day))) {
			date.value = "11/12 周" + option.day
		} else {
			date.value = "第 " + option.day + " 周"
		}
	})
	const submitDialog = ref(null)
	function dialog() {
		submitDialog.value.open()
	}
	function submit() {
		console.log('submit');
		console.log('TODO', JSON.stringify(TODO.value));
		console.log('DONE', JSON.stringify(DONE.value));
		console.log('BUG', JSON.stringify(BUG.value));
		console.log('remark', JSON.stringify(remark.value));
	}
</script>

<style lang="scss">
	.diary_content {
		.date {
			text-align: center;
			width: 20%;
			margin: auto 0;
		}

		.content {
			width: 100%;

			textarea {
				height: 15vh !important;
			}
		}
	}
</style>