移动端V1.0

pages/classMeeting/addClassMeeting.vue

@@ -0,0 +1,185 @@
+<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>