subject_gxj/xj_project_app/pages/message/search/index.vue

<script setup>
	import {
		ref
	} from "vue";

	import {
		onLoad,
	} from "@dcloudio/uni-app";

	import {
		timeFormat
	} from "@/utils/timeFormatter.js";

	// ====================================选择开始时间
	let beginDateStart = ref(null)
	let beginTimeShow = ref(false)

	function showBeginTimeChoose() {
		beginTimeShow.value = true
	}

	function beginTimeClose(e) {
		if (e) {
			let time = timeFormat(e.value)
			pageForm.value.beginDate = time
		}
		beginTimeShow.value = false
	}
	// ====================================选择结束时间
	let beginDateEnd = ref(null)
	let endTimeShow = ref(false)

	function showEndTimeChoose() {
		endTimeShow.value = true
	}

	function endTimeClose(e) {
		if (e) {
			let time = timeFormat(e.value)
			pageForm.value.endDate = time
		}
		endTimeShow.value = false
	}

	let pageForm = ref({
		userName: null,
		beginDate: null,
		endDate: null,
		content: null,
	});

	const confirmParams = function() {
		const sendParams = Object.assign({}, pageForm.value);
		if (sendParams.beginDate) {
			sendParams.beginDate = sendParams.beginDate.replace('/', '-');
			sendParams.beginDate = sendParams.beginDate.replace('/', '-');
		}
		if (sendParams.endDate) {
			sendParams.endDate = sendParams.endDate.replace('/', '-');
			sendParams.endDate = sendParams.endDate.replace('/', '-');
		}
		uni.$emit('messageSearch', sendParams);
		uni.navigateBack({});
	};

	onLoad(() => {
		let now = new Date();
		let year = now.getFullYear();
		let month = now.getMonth() + 1 < 10 ? `0${now.getMonth() + 1< 10}` : now.getMonth() + 1;
		let day = now.getDate() < 10 ? `0${now.getDate()}` : now.getDate();
		beginDateStart.value = `${year}/${month}/${day}`; // 开始时间
		beginDateEnd.value = `${year}/${month}/${day}`; // 结束时间
	})
</script>

<template>
	<view class="container">
		<page-title>查询消息</page-title>

		<view class="content">
			<view class="card only-card">
				<view class="card-name">
					<view class="card-name-title">
						<text class="card-name-description">接收人</text>
					</view>

					<input class="card-item-input" v-model="pageForm.userName" placeholder="请输入接收人姓名"
						placeholder-style="color: #D8D8D8" maxlength="20" />
				</view>

				<!-- 计划开始日期 -->
				<view class="card-name" @click="showBeginTimeChoose()">
					<view class="card-name-title"><text class="card-name-description">开始日期</text></view>
					<view class="card-item-description select-item">
						<view v-if="pageForm.beginDate">{{pageForm.beginDate}}</view>
						<view v-else class="remind-text">请选择开始日期</view>
						<u-icon name="arrow-right" color="#343437" size="16" customStyle="margin-left:10rpx"></u-icon>
					</view>
				</view>

				<!-- 计划结束日期 -->
				<view class="card-name" @click="showEndTimeChoose()">
					<view class="card-name-title"><text class="card-name-description">结束日期</text></view>
					<view class="card-item-description select-item">
						<view v-if="pageForm.endDate">{{pageForm.endDate}}</view>
						<view v-else class="remind-text">请选择结束日期</view>
						<u-icon name="arrow-right" color="#343437" size="16" customStyle="margin-left:10rpx"></u-icon>
					</view>
				</view>

				<view class="card-item">
					<view class="card-item-name">内容</view>

					<view class="item-textarea">
						<u--textarea v-model="pageForm.content" maxlength="-1" height='294rpx'></u--textarea>
					</view>
				</view>

				<view class="card-item">
					<view class="card-btn fat-btn" @click="confirmParams()">确定</view>
				</view>
			</view>
		</view>

		<!-- 开始时间 -->
		<u-datetime-picker :show="beginTimeShow" @confirm="beginTimeClose" @cancel="beginTimeClose" @close="beginTimeClose"
			v-model="beginDateStart" mode="date" closeOnClickOverlay></u-datetime-picker>
		<!-- 结束时间 -->
		<u-datetime-picker :show="endTimeShow" @confirm="endTimeClose" @cancel="endTimeClose" @close="endTimeClose"
			v-model="beginDateEnd" mode="date" closeOnClickOverlay></u-datetime-picker>
	</view>
</template>

<style lang="scss" scoped>
	.clear {
		position: absolute;
		top: 8%;
		right: 4%;
		display: flex;
		font-size: 40rpx;
		font-weight: 500;
		color: #FFF;
	}

	.content {
		position: absolute;
		top: 5%;
		left: 0;
		width: 100%;
		height: 95%;
		padding: 100rpx 4% 0;
		box-sizing: border-box;
		// border-radius: 40rpx 40rpx 0 0;
		background-color: #fff;
	}

	.select-item {
		display: flex;
		align-items: center;
		font-size: 32rpx;
		color: #343437;
	}

	.card-item-input {
		text-align: right;
		height: 100rpx
	}

	.item-textarea {
		width: 100%;
		min-height: 294rpx;
		padding: 20rpx;
		border: 2rpx solid #D0D9E7;
		border-radius: 20rpx;
	}
</style>