pet-system-merchant-app/pages/my/complaint/submit/index.vue

<template>
	<view class="complaint-submit-page">
		<view class="form-card">
			<view class="form-item">
				<text class="form-label">关联订单</text>
				<text class="form-value">{{ orderId || '无' }}</text>
			</view>
			<view class="form-item">
				<text class="form-label">投诉评分</text>
				<view class="rate-wrap">
					<text v-for="i in 5" :key="i" :class="['star', { active: i <= rating }]" @click="rating = i">★</text>
				</view>
			</view>
			<view class="form-item column">
				<text class="form-label">投诉内容</text>
				<textarea class="form-textarea" v-model="content" placeholder="请详细描述您的投诉内容..." maxlength="500"></textarea>
			</view>
		</view>
		<button class="submit-btn" @click="onSubmit">提交投诉</button>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

const orderId = ref('')
const rating = ref(3)
const content = ref('')

onLoad((options) => {
	if (options.orderId) orderId.value = options.orderId
})

const onSubmit = () => {
	if (!content.value) { uni.showToast({ title: '请填写投诉内容', icon: 'none' }); return }
	uni.showToast({ title: '投诉已提交', icon: 'success' })
	setTimeout(() => uni.navigateBack(), 1000)
}
</script>

<style lang="scss" scoped>
.complaint-submit-page { min-height: 100vh; background: #f7f8fa; padding: 24rpx; padding-bottom: 160rpx; }
.form-card { background: #fff; border-radius: 24rpx; padding: 8rpx 32rpx; }
.form-item { display: flex; align-items: center; padding: 28rpx 0; border-bottom: 1rpx solid #f5f5f5; }
.form-item.column { flex-direction: column; align-items: flex-start; }
.form-item:last-child { border-bottom: none; }
.form-label { width: 180rpx; font-size: 28rpx; color: #333; flex-shrink: 0; margin-bottom: 16rpx; }
.form-value { flex: 1; font-size: 28rpx; color: #666; text-align: right; }
.rate-wrap { display: flex; gap: 12rpx; }
.star { font-size: 40rpx; color: #ddd; }
.star.active { color: #f7ca3e; }
.form-textarea { width: 100%; font-size: 28rpx; color: #333; height: 240rpx; background: #f9f9f9; border-radius: 16rpx; padding: 20rpx; }
.submit-btn { margin-top: 48rpx; width: 100%; height: 96rpx; background: linear-gradient(90deg, #ffd53f, #ff9500); color: #333; border: none; border-radius: 48rpx; font-size: 32rpx; font-weight: bold; line-height: 96rpx; }
</style>