Homestay_manage_app/pages/complaint/complaint.vue

<template>
	<view class="container">
		<!-- 标题区域 -->
		<view class="title">
			<view class="title_key">标题</view>
			<view class="title_value">
				<input maxlength="10" type="text" placeholder="请输入标题，不要超过10个字哦~" placeholder-style="color:#B3B3B3;fontSize:28rpx;" />
			</view>
		</view>

		<!-- 评价上传图片视频区域 -->
		<view class="operation">
			<!-- 输入框区域 -->
			<view class="operation_input">
				<textarea
					maxlength="1000"
					class="textarea"
					placeholder-style="color:#B3B3B3;font-size:24rpx"
					placeholder="写出你的相关问题"
					v-model="textareaValue"
					@input="handleInput"
				/>
				<view class="operation_count">（{{ textareaValuelength }}/1000）</view>
			</view>

			<!-- 上传区域 -->
			<view class="operation_uploading">
				<view class="uploading_box" @click="handleUpLoad">
					<img class="img" src="../../static/index/photo.png" />
					<view class="msg">照片/视频</view>
				</view>
				<view class="uploading_box" v-for="(ele, index) in subImgList" :key="index">
					<img class="img2" mode="aspectFill" :src="ele" />
					<view class="icon" @click="handleDelete(index)">
						<img src="../../static/index/close2.png" />
					</view>
				</view>
			</view>
		</view>

		<!-- 提交按钮区域 -->
		<view class="btn" @click="handleSub">提交</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 评价绑定数据
			textareaValue: '',
			// 评价文字长度
			textareaValuelength: 0,
			// 上传的图片数据
			subImgList: []
		}
	},
	methods: {
		// 评价输入框输入回调
		handleInput(e) {
			this.textareaValuelength = e.detail.cursor
		},
		handleUpLoad() {
			uni.chooseMedia({
				count: 9,
				maxDuration: 15,
				success: (res) => {
					console.log(res)
					console.log(res.tempFiles)
					if (this.subImgList.length + res.tempFiles.length > 9) {
						uni.showToast({
							title: '最多只能上传9个图片/视频',
							icon: 'none'
						})
						return
					}
					uni.showLoading({
						title: '上传中'
					})
					// reverse()
					res.tempFiles.forEach((ele) => {
						uni.uploadFile({
							url: `https://chtech.ncjti.edu.cn/hotelReservation/mhotel/mhotel/uploadhimage.action`,
							filePath: ele.tempFilePath,
							name: 'myFile',
							success: (uploadFileRes) => {
								console.log(JSON.parse(uploadFileRes.data))
								let temRes = JSON.parse(uploadFileRes.data)
								if (temRes.code === 200) {
									this.subImgList.push(temRes.data.url)
									console.log(this.subImgList)
									uni.hideLoading()
								} else {
									uni.showToast({
										title: temRes.message,
										icon: 'none'
									})
								}
							},
							fail: () => {
								uni.showToast({
									title: '上传失败',
									icon: 'error'
								})
							}
						})
					})
				}
			})
		},
		handleSub() {
			uni.navigateTo({
				url: `/pages/complaintStatus/complaintStatus?status=1`
			})
		},
		// 删除图片回调
		handleDelete(index) {
			this.subImgList.splice(index, 1)
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background-color: #f2f3f5;

	.title {
		display: flex;
		align-items: center;
		margin: 20rpx 0;
		padding: 0 20rpx;
		height: 144rpx;
		background-color: #fff;

		.title_key {
			font-size: 28rpx;
			font-weight: bold;
		}

		.title_value {
			display: flex;
			align-items: center;
			box-sizing: border-box;
			padding: 0 26rpx;
			margin-left: 30rpx;
			width: 625rpx;
			height: 80rpx;
			border-radius: 11rpx;
			background-color: #f2f2f2;

			input {
				width: 100%;
			}
		}
	}

	.operation {
		padding: 20rpx 20rpx 33rpx;
		margin-bottom: 20rpx;
		background-color: #fff;

		.operation_input {
			box-sizing: border-box;
			padding: 20rpx;
			width: 710rpx;
			height: 282rpx;
			border-radius: 9rpx;
			background-color: #f2f2f2;

			.textarea {
				width: 100%;
				height: 203rpx;
			}

			.operation_count {
				height: 39rpx;
				text-align: end;
				color: #b3b3b3;
				font-size: 24rpx;
			}
		}

		.operation_uploading {
			display: grid;
			gap: 21rpx;
			grid-template-columns: repeat(auto-fill, 124rpx);
			margin-top: 20rpx;

			::v-deep .uni-file-picker__item {
				background-color: red;
			}

			.uploading_box {
				position: relative;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 124rpx;
				height: 124rpx;
				border-radius: 7rpx;
				background-color: #f2f2f2;

				.img {
					width: 40rpx;
					height: 40rpx;
				}

				.msg {
					margin-top: 5rpx;
					color: #a6a6a6;
					font-size: 20rpx;
				}

				.img2 {
					width: 124rpx;
					height: 124rpx;
					border-radius: 7rpx;
				}

				.icon {
					position: absolute;
					top: 0;
					right: 0;
					display: flex;
					justify-content: center;
					align-items: center;
					width: 30rpx;
					height: 30rpx;
					border-radius: 7rpx;
					background-color: rgba(000, 000, 000, 0.5);

					img {
						width: 30rpx;
						height: 30rpx;
					}
				}
			}
		}
	}

	.btn {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 368rpx auto 78rpx;
		width: 710rpx;
		height: 96rpx;
		color: #fff;
		font-size: 32rpx;
		border-radius: 64rpx;
		background-color: #096562;
	}
}
</style>