zhxg_app_v1.0/pages/classMeeting/classMaterials.vue

<template>
	<view class="">
		<view class="materials">
			<!-- 班会主题 -->
			<view class="title">
				<text>班会主题：{{mettingList.crCmTitle}}</text>
			</view>
			<view class="content">
				<text>班会名称：{{mettingList.className}}</text>
			</view>
			<view class="content">
				<text>辅导员：{{mettingList.crTeacherName}}</text>
			</view>
			<!-- 班会主题内容 -->
			<view class="content">
				<text>班会总结：</text>
				<text v-html="mettingList.crContent"></text>
				<text></text>
			</view>
			<!-- 班会活动要求 -->
			<view class="demand">
				<text>班会时间：{{mettingList.crTime}}</text>
			</view>
			<!-- 班会性质 -->
			<view class="nature">
				<text>班会地址：{{(mettingList.crAddr)}}</text>
				<text></text>
			</view>
			<!-- 备注 -->
			<view class="remark">
				<text>备注：{{mettingList.remark}}</text>
				<text></text>
			</view>
			<!-- 佐证材料 -->
			<view class="evidence">
				<text>佐证材料</text>
			</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>
			<!-- 上传图片 -->
			<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 class="bottom-container">
				<button @click="onSubmit()">提交</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		classMettingDetail,
		editClassMetting,
		uploadFiles
	} from "@/api/classmetting/classmeting.js";
	export default {

		data() {
			return {
				mettingList: {},
				fileValue: [],
				resPath: [],
				resName: ""
			};
		},
		onLoad() {
			const id = this.$route.query.id;
			this.getclassMettingDetail(id);
		},
		methods: {
			// 获取上传状态
			select(e) {
				console.log('选择文件：', e)
				console.log(e.tempFiles[0].name)
				console.log(e.tempFilePaths)
			},
			// 获取上传进度
			progress(e) {
				console.log('上传进度：', e)
			},

			// 上传成功
			success(e) {
				console.log('上传成功')
				this.resPath = e.tempFilePaths
				this.resName = e.tempFiles[0].name
			},

			// 上传失败
			fail(e) {
				console.log('上传失败：', e)
			},
			getclassMettingDetail(id) {
				classMettingDetail(id).then(res => {
					console.log(res);
					this.mettingList = res.data;
				})
			},
			onSubmit() {
				let data = {
					resPath: this.resPath,
					resName: this.resName
				};
				uploadFiles(data).then(res => {
					uni.showToast({
						title: res.msg,
						icon: "error"
					})
					console.log(res)
				})
			}
		}
	}
</script>

<style lang="scss">
	.materials {
		padding: 50rpx 30rpx;
		background-color: #F6F6F6;
		height: 100vh;
		position: relative;

		// overflow-y: auto;
		.title {
			margin-bottom: 70rpx;

			text {
				font-weight: bold;
				font-size: 37rpx;
			}
		}

		.content {
			display: flex;

			margin-bottom: 80rpx;

			text:nth-child(1) {

				font-weight: bold;
			}

			text:nth-child(2) {
				flex: 1;
				color: #8a8a8a;
				font-size: 27rpx;
			}
		}

		.demand {
			margin-bottom: 100rpx;
			display: flex;

			text:nth-child(1) {
				font-weight: bold;
			}

			text:nth-child(2) {
				flex: 1;
				color: #8a8a8a;
				font-size: 27rpx;
			}
		}

		.nature {
			display: flex;
			margin-bottom: 50rpx;

			text:nth-child(1) {
				font-weight: bold;
			}

			text:nth-child(2) {
				flex: 1;
				color: #8a8a8a;
			}
		}

		.attachment {
			margin-bottom: 100rpx;

			text:nth-child(1) {
				font-weight: bold;
			}

			text:nth-child(2) {
				color: #8a8a8a;
			}
		}

		.remark {
			margin-bottom: 60rpx;

			text:nth-child(1) {
				font-weight: bold;
			}

			text:nth-child(2) {
				color: #8a8a8a;
			}
		}

		.evidence {
			margin-bottom: 30rpx;

			text:nth-child(1) {
				font-weight: bold;
			}
		}

		.hint {
			margin-bottom: 50rpx;

			text {
				font-size: 26rpx;
				color: #8a8a8a;
			}
		}

		.bottom-container {
			position: fixed;
			width: 80%;
			bottom: 60rpx;
			left: 50%;
			transform: translateX(-50%);

			button {
				background-color: #3388CC;
				color: white;
			}
		}

		/deep/.file-picker__box-content {
			background-color: #ffffff;

		}
	}
</style>