zhxg_app_v1.0/pages/classMeeting/addClassMeeting.vue

<template>
	<view class="container">
		<!-- 班会标题 -->
		<view class="form-item">
			<text class="lable">班会标题</text>
			<input v-model="title" class="uni-input" focus placeholder="请输入班会标题" />
		</view>
		<!-- 班会班级 -->
		<view class="form-text">
			<text class="lable">班会班级</text>
			<view class="txt">
				<uni-data-picker  :localdata="ClassNameList" :map="{text:'label',value:'value'}"  popup-title="请选择班级" @change="onchange" @nodeclick="onnodeclick"></uni-data-picker>
			</view>	
		</view>
		<!-- 班会总结 -->
		<view class="form-text">
			<text class="lable">班会总结</text>
			<view class="txt">
				<uni-forms-item>
					<uni-easyinput type="textarea" v-model="classcontent" maxlength="500" placeholder="请输入内容" />
				</uni-forms-item>
			</view>
		</view>
		<view class="form-item">
			<text class="lable timelable">班会时间</text>
			<picker mode="date" :value="startDate" @change="bindDateChange">
				<view class="uni-input">{{startDate}}</view>
			</picker>
		</view>
		<view class="file">
			<uni-file-picker v-model="fileValue" fileMediatype="all" mode="grid" @select="select" @progress="progress"
				@success="success" @fail="fail" file-extname='doc,xls,ppt,txt,pdf' title="" />
		</view>
		<!-- 提示 -->
		<view class="hint">
			<text>请上传 大小不超过是</text>
			<text style="color: red;">5MB</text>
			<text>格式为</text>
			<text style="color: red;">doc/xls/ppt/txt/pdf</text>
			<text>的文件</text>
		</view>
		<!-- 备注 -->
		<view class="form-item">
			<text class="lable">备注</text>
			<input v-model="remark" class="uni-input" focus placeholder="请输入内容" />
		</view>
		<!-- 按钮 -->
		<view class="bottom-container">
			<button @click="doApply">提交</button>
		</view>
		
	</view>
</template>

<script>
	import {
		ClassName
	} from "@/api/classmetting/classmeting.js"
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				title: "", // 班会标题
				date: currentDate, //当前选择的时间
				classcontent: "", //班会内容
				fileValue: [], //选取文件数组
				remark: '', //备注
				ClassNameList: [], //班级名称	
				institute: [], //学院
				choose_star: "",//选中班级的value
				startDate: this.getDate()
			};
		},
		onLoad() {
			this.getClassName()
		},
		methods: {
			//获取班级信息
			getClassName() {
				ClassName().then(res => {
					this.ClassNameList = res.data
				})
			},
			onchange(e) {
			  const value1 = e.detail.value
			  console.log(value1)
			},
			onnodeclick(node) {
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			bindDateChange: function(e) {
				this.startDate = e.detail.value;
			}
		}
	};
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 10rpx;
		position: relative;
	}
	.form-item {
		width: 95%;
		height: 80rpx;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		justify-content: space-between;
		border-bottom: 1px solid #ededee;
	}
	.hint {
		margin-bottom: 100rpx;
		text {
			font-size: 26rpx;
			color: #8a8a8a;
		}
	}

	.file {
		width: 95%;
		height: 80rpx;
		display: flex;
		align-items: center;
		margin: 100rpx 0;
		justify-content: space-between;
	}

	.form-text {
		width: 95%;
		margin-bottom: 20rpx;
		border-bottom: 1px solid #ededee;
	}

	.txt {
		margin-top: 20rpx;
	}
	.class{
		
	}
	.lable {
		
		text-align: right;
		margin-right: 20rpx;
	}
	.select {
		color: #888889;
	}
	.uni-input {
		/*      width: 23%; */
		color: #888889;
		text-align: right;
	}
	.bottom-container {
		position: fixed;
		width: 80%;
		bottom: 60rpx;
		left: 50%;
		transform: translateX(-50%);
	}
	button {
		width: 90%;
		background-color: #3388CC;
		color: white;
	}
</style>