185 lines
4.1 KiB
Vue
185 lines
4.1 KiB
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> |