zhxg_app_v1.0/pages/dormitory/apply.vue

<template>
	<view class="container">
		<view class="form-item">
			<label><text class="tip">*</text>申请类型</label>
			<picker :range="options" v-model="selectedOptionIndex" @change="onPickerChange">
				<view class="uni-input">
					<text class="val">{{options[selectedOptionIndex] || '请选择类型'}}</text>
					<uni-icons type="down" size="16" color="#202020"></uni-icons>
				</view>
			</picker>
		</view>
		<view class="form-item">
			<label><text class="tip">*</text>申请理由</label>
			<textarea class="main-his" v-model="deeds" maxlength="500" placeholder="请输入申请理由"></textarea>
		</view>
		<!-- 留宿时间 根据选择的申请类型来决定是否显示-->
		<view class="form-item" v-if="selectedOptionIndex === 1">
			<label><text class="tip">*</text>留宿开始时间</label>
			<uni-datetime-picker type="date" :clear-icon="false" v-model="beginData" @maskClick="maskClick"
				:border="false" />
		</view>
		<view class="form-item" v-if="selectedOptionIndex === 1">
			<label><text class="tip">*</text>留宿结束时间</label>
			<uni-datetime-picker type="date" :clear-icon="false" v-model="endData" @maskClick="maskClick"
				:border="false" />
		</view>
		<!-- <view class="form-item" v-if="selectedOptionIndex === 1"> 
			<text class="label">留宿开始时间：</text>

			<view class="example-body">
				<uni-datetime-picker type="date" :clear-icon="false" v-model="beginData" @maskClick="maskClick"
					:border="false" />
			</view>
		</view> -->
		<!-- <view class="form-item" v-if="selectedOptionIndex === 1"> 
			<text class="label">留宿结束时间：</text>
			<view class="example-body">
				<uni-datetime-picker type="date" :clear-icon="false" v-model="endData" @maskClick="maskClick"
					:border="false" />
			</view>
		</view> -->
		<!-- 按钮 -->
		<view class="btn">
			<button @click="doApply" :disabled="isSubmitting">提交申请</button>
		</view>
	</view>
</template>

<script>
	import {
		addApplication
	} from "@/api/dms/index.js";

	export default {
		data() {
			return {
				isSubmitting: false, //表单提交标志位
				options: ['调宿申请', '退宿申请'], // 奖项选项
				selectedOptionIndex: -1, //
				deeds: "",
				beginData: '',
				endData: ''
			};
		},
		methods: {
			async doApply() {
				if (this.selectedOptionIndex == -1) {
					uni.showToast({
						title: "请选择申请类型",
						icon: "none"
					});
					return;
				}
				if (this.deeds == "") {
					uni.showToast({
						title: "请输入申请理由",
						icon: "none"
					});
					return;
				}
				let applyType = this.options[this.selectedOptionIndex];
				let sdata = {};
				if (applyType == "调宿申请") {
					sdata = {
						type: 1,
						reason: this.deeds
					};
				} else {
					sdata = {
						type: 2,
						reason: this.deeds
					};
				}
				this.isSubmitting = true; // 设置为正在提交
				let res = await addApplication(sdata);
				if (res.code == 200) {
					uni.showToast({
						title: res.msg,
						icon: "success"
					});
					this.isSubmitting = false; // 设置为正在提交
				} else {
					uni.showToast({
						title: res.msg,
						icon: "error"
					});
				}
			},

			// 当选择发生变化时触发
			onPickerChange(event) {
				this.selectedOptionIndex = event.detail.value;
				console.log(this.selectedOptionIndex);
			},
			// 政治面貌选择改变时触发
			onPoliticalChange(event) {
				this.selectedPoliticalIndex = event.detail.value;
			},
			maskClick(e) {
				console.log('maskClick事件:', e);
			}
		}
	};
</script>

<style scoped lang="scss">
	.container {
		background-color: #F5F5F7;
		padding: 10px;
		padding-bottom: 80px;
		height:calc(100vh - 44px);
	}
	.form-item {
		display: flex;
		flex-direction: column;
		padding: 22rpx 40rpx;
		background-color: white;
		margin-bottom: 20rpx;
		border-radius: 16rpx;
	
		.tip {
			color: red;
			font-size: 24rpx;
		}
	
		label {
			margin-bottom: 20rpx;
			display: inline-block;
		}
	
		input {
			border: 1px solid #E1E1E1;
			border-radius: 10rpx;
			height: 70rpx;
			padding-left: 30rpx;
	
			.input-placeholder {
				color: #b6b6b6;
			}
		}
	
		textarea {
			border: 1px solid #E1E1E1;
			border-radius: 10rpx;
			width: 100%;
			height:250rpx;
			padding: 30rpx;
			&.main-his{
				height:350rpx;
			}
			.input-placeholder {
				color: #b6b6b6;
			}
		}
	
		picker {
			border: 1px solid #E1E1E1;
			height: 70rpx;
			line-height: 70rpx;
			padding: 0 30rpx;
	
			.uni-input {
				display: flex;
				color: #797979;
	
				.val {
					flex: 1;
				}
			}
		}
	}
	// .form-item {
	// 	width: 95%;
	// 	height: 80rpx;
	// 	display: flex;
	// 	align-items: center;
	// 	margin-bottom: 20rpx;
	// 	justify-content: space-between;
	// 	border-bottom: 1px solid #ededee;
	// }

	// .form-text {
	// 	width: 95%;
	// 	margin-bottom: 20rpx;
	// }

	// .txt {
	// 	margin-top: 20rpx;
	// }

	// .label {
	// 	text-align: right;
	// 	margin-right: 20rpx;
	// }

	// .select {
	// 	color: #888889;
	// }

	// .uni-input {
	// 	color: #888889;
	// 	text-align: right;
	// }



	// .time {
	// 	display: flex;
	// 	align-items: center;
	// 	justify-content: center;
	// }

	.btn {
		padding: 10px;
		display: flex;
		background: white;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;

		button {
			flex: 1;
			background-color: #1890FF;
			color: white;

			&[disabled] {
				opacity: 0.5;
			}
		}

	}
</style>