ai-clone/frontend-ai/pages/settings/complaint.vue

<template>
	<view class="complaint-container">
		<view class="complaint-content">
			<view class="page-header">
				<text class="header-title">投诉建议</text>
				<text class="header-subtitle">请描述你遇到的问题，我们会尽快处理</text>
			</view>

			<view class="form-section">
				<view class="form-item">
					<view class="item-label">
						<text class="label-icon">📝</text>
						<text class="label-text">内容</text>
					</view>
					<textarea
						class="item-textarea"
						v-model="content"
						placeholder="请输入投诉/建议内容（最多1000字）"
						placeholder-class="input-placeholder"
						maxlength="1000"
						:auto-height="true"
					/>
					<view class="count-row">
						<text class="count-text">{{ content.length }}/1000</text>
					</view>
				</view>

				<view class="form-item">
					<view class="item-label">
						<text class="label-icon">📞</text>
						<text class="label-text">联系方式</text>
					</view>
					<input
						class="item-input"
						v-model="contact"
						placeholder="手机号/微信号/邮箱"
						placeholder-class="input-placeholder"
						maxlength="100"
					/>
				</view>
			</view>

			<view class="button-section">
				<button class="submit-btn" @click="handleSubmit" :disabled="submitting">
					{{ submitting ? '提交中...' : '提交' }}
				</button>
			</view>
		</view>
	</view>
</template>

<script>
import request, { post } from '@/utils/request.js';
import { API_ENDPOINTS } from '@/config/api.js';

export default {
	data() {
		return {
			content: '',
			contact: '',
			submitting: false
		};
	},
	methods: {
		validateForm() {
			if (!this.content || !this.content.trim()) {
				uni.showToast({
					title: '请输入内容',
					icon: 'none'
				});
				return false;
			}
			if (this.content.length > 1000) {
				uni.showToast({
					title: '内容不能超过1000字',
					icon: 'none'
				});
				return false;
			}
			if (!this.contact || !this.contact.trim()) {
				uni.showToast({
					title: '请输入联系方式',
					icon: 'none'
				});
				return false;
			}
			if (this.contact.length > 100) {
				uni.showToast({
					title: '联系方式不能超过100字',
					icon: 'none'
				});
				return false;
			}
			return true;
		},

		async handleSubmit() {
			if (!this.validateForm()) return;

			this.submitting = true;
			try {
				const res = await post(API_ENDPOINTS.complaint.create, {
					content: this.content.trim(),
					contact: this.contact.trim()
				});

				if (res && res.success) {
					uni.showToast({
						title: '提交成功',
						icon: 'success',
						duration: 1500
					});
					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
					return;
				}

				uni.showToast({
					title: (res && res.message) ? res.message : '提交失败',
					icon: 'none'
				});
			} catch (e) {
				uni.showToast({
					title: e.message || '提交失败',
					icon: 'none'
				});
			} finally {
				this.submitting = false;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.complaint-container {
	min-height: 100vh;
	background: linear-gradient(135deg, #FDF8F2 0%, #F5EDE0 100%);
}

.complaint-content {
	padding: 40upx 30upx;
}

.page-header {
	text-align: center;
	margin-bottom: 60upx;

	.header-title {
		display: block;
		font-size: 48upx;
		font-weight: 700;
		color: #333;
		margin-bottom: 20upx;
	}

	.header-subtitle {
		display: block;
		font-size: 26upx;
		color: #999;
	}
}

.form-section {
	background: white;
	border-radius: 30upx;
	padding: 40upx 30upx;
	margin-bottom: 40upx;
	box-shadow: 0 8upx 40upx rgba(0, 0, 0, 0.08);
}

.form-item {
	margin-bottom: 40upx;

	&:last-child {
		margin-bottom: 0;
	}

	.item-label {
		display: flex;
		align-items: center;
		margin-bottom: 20upx;

		.label-icon {
			font-size: 32upx;
			margin-right: 10upx;
		}

		.label-text {
			font-size: 28upx;
			font-weight: 600;
			color: #333;
		}
	}

	.item-input {
		width: 100%;
		max-width: 520upx;
		margin: 0 auto;
		padding: 24upx 30upx;
		background: #F8F8F8;
		border-radius: 20upx;
		font-size: 28upx;
		color: #333;
		border: 2upx solid transparent;

		&:focus {
			background: white;
			border-color: #8B7355;
		}
	}

	.item-textarea {
		width: 100%;
		min-height: 240upx;
		padding: 24upx 30upx;
		background: #F8F8F8;
		border-radius: 20upx;
		font-size: 28upx;
		color: #333;
		border: 2upx solid transparent;
		box-sizing: border-box;

		&:focus {
			background: white;
			border-color: #8B7355;
		}
	}

	.input-placeholder {
		color: #ccc;
	}
}

.count-row {
	display: flex;
	justify-content: flex-end;
	margin-top: 12upx;

	.count-text {
		font-size: 24upx;
		color: #999;
	}
}

.button-section {
	padding: 20upx 0;
}

.submit-btn {
	width: 100%;
	padding: 32upx;
	background: linear-gradient(135deg, #8B7355 0%, #6D8B8B 100%);
	border-radius: 50upx;
	color: white;
	font-size: 32upx;
	font-weight: 600;
	box-shadow: 0 10upx 40upx rgba(139, 115, 85, 0.3);
	border: none;

	&:active {
		opacity: 0.8;
		transform: scale(0.98);
	}

	&[disabled] {
		opacity: 0.6;
		background: #ccc;
	}
}
</style>