MoeNovaClient/pages/my/feedback.vue

<template>
	<view class="page">
		<!-- <PageHeader title="意见与反馈" class="PageHeader">
			<template slot="center"> </template>
		</PageHeader> -->
		<view class="feedback-container">
			<!-- 问题描述区域 -->
			<view class="description-area">
				<view class="title">问题描述</view>
				<textarea class="input-area" v-model="content" placeholder="请尽可能详细地描述您的反馈或问题" :maxlength="200"
					show-count></textarea>
				<view class="word-count">{{ content.length }}/200</view>
			</view>

			<!-- 图片上传区域 -->
			<view class="upload-area">
				<view class="title">上传图片 <text class="subtitle">（最多5张，可选）</text></view>
				<view class="tips">* 上传问题截图更好的帮助我们快速定位您反馈的问题</view>
				<view class="tips" style="margin-bottom: 20rpx;">* 需要您授权相册权限</view>
				<view class="image-list">
					<view class="image-item" v-for="(item, index) in imgList" :key="index">
						<image class="preview" :src="item" mode="aspectFill"></image>
						<view class="delete-btn" @tap="deleteImage(index)">
							<text class="fa fa-times"></text>
						</view>
					</view>
					<view class="upload-btn" @tap="upload" v-if="imgList.length < 5">
						<text class="fa fa-plus"></text>
					</view>
				</view>

			</view>

			<!-- 提交按钮 -->
			<view class="submit-btn" @tap="submitFeedback">
				确认提交
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			content: '',
			imgList: [],
			skey: getApp().globalData.skey || ''
		}
	},
	methods: {
		// 上传图片
		upload() {
			if (this.imgList.length >= 5) {
				uni.showToast({
					title: '最多只能上传5张图片',
					icon: 'none'
				});
				return;
			}

			let that = this;
			uni.chooseImage({
				count: 5 - this.imgList.length,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera'],
				success: function (res) {
					let tempFilePaths = [];

					// #ifdef H5
					res.tempFiles.forEach(file => {
						tempFilePaths.push(file.path);
					});
					// #endif

					// #ifdef APP-PLUS || MP
					tempFilePaths = res.tempFilePaths;
					// #endif

					for (let i = 0; i < tempFilePaths.length; i++) {
						const uploadTask = uni.uploadFile({
							url: that.$apiHost + '/Xweb/upload_img?skey=' + that.skey,
							filePath: tempFilePaths[i],
							name: 'file',
							success: function (uploadFileRes) {
								let resdata = JSON.parse(uploadFileRes.data);
								if (resdata.success == 'yes') {
									that.imgList.push(resdata.url);
								} else {
									uni.showToast({
										title: resdata.str || '上传失败',
										icon: 'none'
									});
								}
							},
							fail: function (err) {
								console.error('上传失败：', err);
								uni.showToast({
									title: '图片上传失败',
									icon: 'none'
								});
							}
						});
					}
				}
			});
		},

		// 删除图片
		deleteImage(index) {
			this.imgList.splice(index, 1);
		},

		// 提交反馈
		submitFeedback() {
			if (!this.content.trim()) {
				uni.showToast({
					title: '请输入问题描述',
					icon: 'none'
				});
				return;
			}

			let imgStr = this.imgList.join('|');

			uni.request({
				url: this.$apiHost + '/Member/feedback',
				method: 'POST',
				data: {
					uuid: getApp().globalData.uuid,
					content: this.content,
					image: imgStr
				},
				header: {
					'Content-Type': 'application/x-www-form-urlencoded',
					'sign': getApp().globalData.headerSign,
					uuid: getApp().globalData.uuid,
				},
				success: (res) => {
					if (res.data.success === 'yes') {
						uni.showToast({
							title: '反馈成功！我们将尽快处理',
							icon: 'no'
						});
						setTimeout(() => {
							uni.navigateBack();
						}, 1500);
					} else {
						uni.showToast({
							title: res.data.str || '提交失败',
							icon: 'none'
						});
					}
				},
				fail: (err) => {
					console.error('提交失败：', err);
					uni.showToast({
						title: '网络错误，请稍后重试',
						icon: 'none'
					});
				}
			});
		}
	}
}
</script>

<style lang="scss">
// 导入FontAwesome
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");

.page {
	min-height: 100vh;
	background-color: #f8f8f8;
	padding-bottom: env(safe-area-inset-bottom);
}

.feedback-container {
	padding: 30rpx;

	.description-area {
		background: #fff;
		border-radius: 16rpx;
		padding: 24rpx;
		margin-bottom: 30rpx;
		position: relative;

		.title {
			font-size: 32rpx;
			color: #333;
			margin-bottom: 20rpx;
		}

		.input-area {
			width: 100%;
			height: 300rpx;
			font-size: 28rpx;
			line-height: 1.6;
			padding: 20rpx;
			background: #f8f8f8;
			border-radius: 12rpx;
		}

		.word-count {
			position: absolute;
			right: 44rpx;
			bottom: 44rpx;
			font-size: 24rpx;
			color: #999;
		}
	}

	.upload-area {
		background: #fff;
		border-radius: 16rpx;
		padding: 24rpx;
		margin-bottom: 30rpx;

		.title {
			font-size: 32rpx;
			color: #333;
			margin-bottom: 20rpx;

			.subtitle {
				font-size: 24rpx;
				color: #999;
			}
		}

		.image-list {
			display: flex;
			flex-wrap: wrap;
			gap: 16rpx;
			margin-bottom: 20rpx;

			.image-item {
				width: 200rpx;
				height: 200rpx;
				position: relative;

				.preview {
					width: 100%;
					height: 100%;
					border-radius: 12rpx;
				}

				.delete-btn {
					position: absolute;
					top: -16rpx;
					right: -16rpx;
					width: 40rpx;
					height: 40rpx;
					background: rgba(0, 0, 0, 0.5);
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;

					.fa {
						color: #fff;
						font-size: 24rpx;
					}
				}
			}

			.upload-btn {
				width: 200rpx;
				height: 200rpx;
				background: #f8f8f8;
				border-radius: 12rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.fa {
					font-size: 48rpx;
					color: #999;
				}
			}
		}

		.tips {
			font-size: 24rpx;
			color: #999;
			line-height: 1.6;
		}
	}

	.submit-btn {
		width: 100%;
		height: 88rpx;
		background: #000;
		border-radius: 44rpx;
		color: #fff;
		font-size: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 60rpx;

		&:active {
			opacity: 0.9;
		}
	}
}
</style>