school-shunt-app/pages/my/problem-feedback/problem-feedback.vue

<template>
	<view class="page-container ">
		<u-nav-bar title="问题反馈" color="#333" bg="white" ref="uNavBar"></u-nav-bar>
		<view class="main-content">
			<u-des-row label="问题描述" />
			<uni-easyinput type="textarea" :maxlength="300" autoHeight v-model="form.content" placeholder="请输入问题描述(最多300字)">
			</uni-easyinput>
			<!-- <u-des-row label="附件" :value="form.attachmentList.length + '/9'" /> -->
			<uni-file-picker v-model="form.attachmentList" @select="imgSelect" fileMediatype="image" style="margin-top: 24rpx;"
				file-extname="png,jpg" :auto-upload="false" mode="grid" :limit="9" title="附件">
				<view class="choose-image u-flex-center">
					<image src="/static/upload_icon.png" style="width: 70rpx;height: 60rpx;" mode=""></image>
					<view class="choose-image-tip">上传图片</view>
				</view>
			</uni-file-picker>
			<view class="u-flex" style="margin-top: 56rpx;">
				<button class="u-button sumbit-button" @click="onSumbit">
					提交
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	import formChecker from '@/common/formChecker.js'
	export default {
		data() {
			return {
				form: {
					content: '',
					attachmentList: [],
				},
			}
		},
		mounted() {},
		methods: {
			imgSelect(res) {
				let error2M = 0
				const newImgs = res.tempFiles.filter(file => {
					const isLt2M = file.size / 1024 / 1024 < 2
					if (!isLt2M) {
						error2M++
					}
					return isLt2M
				})
				if (error2M) {
					uni.showToast({
						title: `当前选择了${res.tempFiles.length}个文件，${error2M}个文件大于2M`,
						icon: "none"
					});
				}
				console.log(111, newImgs)
				this.form.attachmentList = this.form.attachmentList.concat(newImgs)
			},

			// api 
			async onSumbit(type) { // 1:暂存 2:提交
				//定义表单规则
				var rule = [{
					name: "content",
					checkType: "notnull",
					errorMsg: "请输入问题描述"
				}, {
					name: "attachmentList",
					// checkType: "notnull",
					errorMsg: "请添加附件"
				}];

				//进行表单检查
				var checkRes = formChecker.check(this.form, rule);
				if (!checkRes) {
					uni.showToast({
						title: formChecker.error,
						icon: "none"
					});
					return
				}

				await this.uploadFiles()
				const that = this
				uni.showLoading()
				const params = {
					...that.form
				}
				params.attachmentList = params.attachmentList.map(item => item.path)
				uni.showLoading()
				that.$ajax.post('/shunt/proposal-apply', params).then(res => {
					uni.hideLoading()
					uni.showToast({
						title: '提交成功',
						duration: 2000
					});
					setTimeout(function() {
						that.$refs.uNavBar.toBack()
					}, 2000);

				}).catch(error => {
					uni.hideLoading()
					uni.showModal({
						title: '错误',
						content: error.msg || error,
						showCancel: false
					})
				})

			},
			async uploadFiles(success) {
				uni.showLoading({
					title: '上传文件中...'
				});
				const promiseList = []
				const indexList = []
				const that = this
				that.form.attachmentList.forEach((element, index) => {
					if (element.status) {
						indexList.push(index)
						promiseList.push(uni.uploadFile({
							url: `/shunt/upload`,
							filePath: element.url,
							// fileType: 'image',
							name: 'file',
							header: {
								token: uni.getStorageSync('TOKEN')
							},
							formData: {
								// file: res.tempFiles[0],
								fileType: 'APPLY',
							},
							// success(uploadFileRes) {
							// 	const data = JSON.parse(uploadFileRes.data)
							// 	const filePath = data.data.filePath
							// 	console.log(1111, filePath)
							// 	that.form.attachmentList[index] = filePath
							// }
						}))
					}
				})
				await Promise.all(promiseList).then(resList => {
					resList.forEach((element, index) => {
						let uploadFileRes = element[1]
						const data = JSON.parse(uploadFileRes.data)
						const filePath = data.data.filePath
						const formIndex = indexList[index]
						that.form.attachmentList[formIndex].path = filePath
					})
				})
				uni.hideLoading()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-container {

		// background-color: #F5f5f5;
		// min-height: 100vh;

		.main-content {
			background-color: white;
			padding: 32rpx;
		}


		.save-button,
		.sumbit-button {
			flex: 1;
			height: 88rpx;
			background: linear-gradient(90deg, #FFCF18 0%, #FFB300 100%);
			border-radius: 8rpx;

			&.disabled {
				cursor: not-allowed;
				opacity: 0.3;
			}
		}

		.sumbit-button {
			background: linear-gradient(90deg, #36ACFC 0%, #078EF7 100%);
		}

		.choose-image {
			width: 100%;
			height: 100%;
			background: #FFFFFF;
			cursor: pointer;
			text-align: center;
			border: 1rpx dashed #A3ABBF;
			flex-direction: column;

			.choose-image-tip {
				font-size: 24rpx;
				font-weight: 400;
				color: #078EF7;
				margin-top: 24rpx;
			}

		}

	}
</style>