Mini_Program/pages/feedback/feedback.vue

<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="back-btn" @click="goBack">
				<text class="back-icon">←</text>
			</view>
			<text class="header-title">意见反馈</text>
			<view class="header-right"></view>
		</view>
		
		<scroll-view class="scroll-content" scroll-y>
			<!-- 反馈类型 -->
			<view class="section">
				<view class="section-title">
					<view class="title-indicator"></view>
					<text class="title-text">反馈类型</text>
				</view>
				<view class="type-buttons">
					<view 
						class="type-btn" 
						:class="{ active: feedbackType === 'bug' }"
						@click="selectType('bug')"
					>
						<text class="type-btn-text">产品bug</text>
					</view>
					<view 
						class="type-btn" 
						:class="{ active: feedbackType === 'suggestion' }"
						@click="selectType('suggestion')"
					>
						<text class="type-btn-text">功能建议</text>
					</view>
					<view 
						class="type-btn" 
						:class="{ active: feedbackType === 'other' }"
						@click="selectType('other')"
					>
						<text class="type-btn-text">其他</text>
					</view>
				</view>
			</view>
			
			<!-- 详细描述 -->
			<view class="section">
				<view class="section-title">
					<view class="title-indicator"></view>
					<text class="title-text">详细描述</text>
				</view>
				<textarea 
					class="description-input" 
					v-model="description" 
					placeholder="请输入您的问题"
					:maxlength="500"
					:auto-height="true"
				></textarea>
			</view>
			
			<!-- 上传图片 -->
			<view class="section">
				<view class="section-title">
					<view class="title-indicator"></view>
					<text class="title-text">上传图片</text>
				</view>
				<view class="upload-area">
					<view class="image-list">
						<view 
							class="image-item" 
							v-for="(image, index) in imageList" 
							:key="index"
						>
							<image class="uploaded-image" :src="image" mode="aspectFill"></image>
							<view class="delete-btn" @click="deleteImage(index)">
								<text class="delete-icon">×</text>
							</view>
						</view>
						<view 
							class="upload-btn" 
							v-if="imageList.length < 3"
							@click="chooseImage"
						>
							<text class="upload-icon">+</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		
		<!-- 提交按钮 -->
		<view class="submit-section">
			<button class="submit-btn" @click="submitFeedback">提交</button>
		</view>
	</view>
</template>

<script>
	import { submitFeedback } from '@/utils/api.js'
	
	export default {
		data() {
			return {
				feedbackType: 'bug', // bug, suggestion, other
				description: '',
				imageList: [],
				isSubmitting: false
			}
		},
		onLoad() {
			// 获取用户信息（从本地存储）
			const userInfo = uni.getStorageSync('userInfo')
			if (!userInfo || !userInfo.id) {
				uni.showToast({
					title: '请先登录',
					icon: 'none'
				})
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}, 1500)
			}
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			selectType(type) {
				this.feedbackType = type
			},
			chooseImage() {
				uni.chooseImage({
					count: 3 - this.imageList.length,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						// 将临时文件路径添加到列表
						// 注意：如果是真实项目，需要先将图片上传到服务器获取URL
						this.imageList = this.imageList.concat(res.tempFilePaths)
					},
					fail: (err) => {
						console.error('选择图片失败:', err)
						uni.showToast({
							title: '选择图片失败',
							icon: 'none'
						})
					}
				})
			},
			deleteImage(index) {
				this.imageList.splice(index, 1)
			},
			async submitFeedback() {
				// 获取用户信息
				const userInfo = uni.getStorageSync('userInfo')
				if (!userInfo || !userInfo.id) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					}, 1500)
					return
				}
				
				// 验证描述
				if (!this.description.trim()) {
					uni.showToast({
						title: '请输入详细描述',
						icon: 'none'
					})
					return
				}
				
				// 防止重复提交
				if (this.isSubmitting) {
					return
				}
				
				this.isSubmitting = true
				uni.showLoading({
					title: '提交中...',
					mask: true
				})
				
				try {
					// 准备提交数据
					const feedbackData = {
						userId: userInfo.id,
						type: this.feedbackType,
						description: this.description.trim(),
						images: this.imageList // 图片列表，暂时使用临时路径
						// 注意：在生产环境中，需要先将图片上传到服务器获取URL
						// images: uploadedImageUrls
					}
					
					// 调用API提交反馈
					const res = await submitFeedback(feedbackData)
					
					uni.hideLoading()
					this.isSubmitting = false
					
					if (res && res.code === 200) {
						uni.showToast({
							title: '提交成功',
							icon: 'success'
						})
						
						// 清空表单
						this.description = ''
						this.imageList = []
						this.feedbackType = 'bug'
						
						// 延迟返回上一页
						setTimeout(() => {
							uni.navigateBack()
						}, 1500)
					} else {
						uni.showToast({
							title: res.message || '提交失败，请重试',
							icon: 'none'
						})
					}
				} catch (error) {
					uni.hideLoading()
					this.isSubmitting = false
					console.error('提交反馈失败:', error)
					uni.showToast({
						title: error.message || '网络错误，请稍后再试',
						icon: 'none'
					})
				}
			}
		}
	}
</script>

<style scoped>
	.container {
		width: 100%;
		height: 100vh;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		padding-top: 30px;
		box-sizing: border-box;
	}
	
	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		background-color: #FFFFFF;
		border-bottom: 1rpx solid #F0F0F0;
		position: relative;
	}
	
	.back-btn {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 10;
	}
	
	.back-icon {
		font-size: 40rpx;
		color: #333333;
		font-weight: bold;
	}
	
	.header-title {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;
	}
	
	.header-right {
		width: 60rpx;
	}
	
	.scroll-content {
		flex: 1;
		width: 100%;
		padding-bottom: env(safe-area-inset-bottom);
	}
	
	.section {
		padding: 40rpx 30rpx;
		background-color: #FFFFFF;
	}
	
	.section-title {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
	}
	
	.title-indicator {
		width: 6rpx;
		height: 32rpx;
		background-color: #81C784;
		border-radius: 3rpx;
		margin-right: 15rpx;
	}
	
	.title-text {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
	}
	
	.type-buttons {
		display: flex;
		gap: 20rpx;
	}
	
	.type-btn {
		flex: 1;
		height: 80rpx;
		background-color: #F5F5F5;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 2rpx solid transparent;
		transition: all 0.3s;
	}
	
	.type-btn.active {
		background-color: #E8F5E9;
		border-color: #81C784;
	}
	
	.type-btn-text {
		font-size: 28rpx;
		color: #999999;
	}
	
	.type-btn.active .type-btn-text {
		color: #4CAF50;
		font-weight: bold;
	}
	
	.description-input {
		width: 100%;
		min-height: 300rpx;
		background-color: #F5F5F5;
		border-radius: 16rpx;
		padding: 30rpx;
		font-size: 28rpx;
		color: #333333;
		line-height: 1.6;
		box-sizing: border-box;
	}
	
	.description-input::placeholder {
		color: #CCCCCC;
	}
	
	.upload-area {
		width: 100%;
	}
	
	.image-list {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
	}
	
	.image-item {
		position: relative;
		width: 200rpx;
		height: 200rpx;
		border-radius: 12rpx;
		overflow: hidden;
	}
	
	.uploaded-image {
		width: 100%;
		height: 100%;
	}
	
	.delete-btn {
		position: absolute;
		top: 0;
		right: 0;
		width: 50rpx;
		height: 50rpx;
		background-color: rgba(0, 0, 0, 0.5);
		border-radius: 0 0 0 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.delete-icon {
		font-size: 40rpx;
		color: #FFFFFF;
		line-height: 1;
	}
	
	.upload-btn {
		width: 200rpx;
		height: 200rpx;
		border: 2rpx dashed #CCCCCC;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #FAFAFA;
	}
	
	.upload-icon {
		font-size: 80rpx;
		color: #CCCCCC;
		line-height: 1;
	}
	
	.submit-section {
		padding: 30rpx;
		background-color: #FFFFFF;
		border-top: 1rpx solid #F0F0F0;
		padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
	}
	
	.submit-btn {
		width: 100%;
		height: 88rpx;
		background-color: #4FC3F7;
		color: #FFFFFF;
		font-size: 32rpx;
		font-weight: bold;
		border: none;
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.submit-btn::after {
		border: none;
	}
</style>