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

<template>
	<view class="complaint-submit-page">
		<nav-bar :title="praiseFlag ? '发表评价' : '提交投诉'" color="#000"></nav-bar>

		<view class="page-content">
			<!-- 评价类型切换 -->
			<view class="type-card card-shadow">
				<view class="type-item" :class="{ 'active': !praiseFlag }" @click="praiseFlag = false">
					<view class="icon-wrap bad">
						<text class="type-emoji">{{ !praiseFlag ? '👎' : '👎🏻' }}</text>
					</view>
					<text class="type-text">不赞</text>
					<text class="type-sub" v-if="!praiseFlag">投诉</text>
				</view>
				<view class="type-divider"></view>
				<view class="type-item" :class="{ 'active': praiseFlag }" @click="praiseFlag = true">
					<view class="icon-wrap good">
						<text class="type-emoji">{{ praiseFlag ? '👍' : '👍🏻' }}</text>
					</view>
					<text class="type-text">赞</text>
					<text class="type-sub" v-if="praiseFlag">好评</text>
				</view>
			</view>

			<!-- 内容输入 -->
			<view class="form-section card-shadow">
				<view class="section-title">
					<text class="title-text">{{ praiseFlag ? '评价详情' : '投诉原因' }}</text>
					<text class="title-tip">必填</text>
				</view>
				<textarea class="content-textarea" v-model="reason"
					:placeholder="praiseFlag ? '请记录您的满意点，帮助履约师提升服务质量...' : '请详细描述您遇到的问题，我们会尽快为您处理...'"
					maxlength="500"></textarea>
				<view class="word-count">{{ reason.length }}/500</view>
			</view>

			<!-- 图片上传 -->
			<view class="form-section card-shadow">
				<view class="section-title">
					<text class="title-text">凭证图片</text>
					<text class="title-tip gray">最多6张</text>
				</view>
				<view class="upload-grid">
					<view class="upload-item" v-for="(img, index) in imageList" :key="index">
						<image :src="img" mode="aspectFill" @click="previewImage(index)"></image>
						<view class="delete-icon" @click.stop="removeImage(index)">
							<uni-icons type="closeempty" size="12" color="#fff"></uni-icons>
						</view>
					</view>
					<view class="upload-add" v-if="imageList.length < 6" @click="chooseImage">
						<uni-icons type="plusempty" size="32" color="#ccc"></uni-icons>
						<text class="add-text">上传凭证</text>
					</view>
				</view>
			</view>

			<!-- 订单信息提示 -->
			<view class="order-info-bar">
				<text>关联订单：{{ orderCode }}</text>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="bottom-bar">
			<button class="submit-btn" :class="{ 'is-praise': praiseFlag }" @click="handleConfirmSubmit"
				:loading="submitting">
				{{ praiseFlag ? '确认赞' : '确认不赞' }}
			</button>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import navBar from '@/components/nav-bar/index.vue'
import { addComplaint } from '@/api/fulfiller/complaint'
import { BASE_URL, DEFAULT_HEADERS } from '@/utils/config'

/**
 * 投诉/评价提交页面 (参考网页端设计)
 * @Author: Antigravity
 */

const orderId = ref('')
const orderCode = ref('')
const fulfillerId = ref('')
const praiseFlag = ref(false)
const reason = ref('')
const imageList = ref([])  // 预览用 URL 列表
const ossIdList = ref([])  // 提交用 OSS ID 列表
const submitting = ref(false)

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

// 选择图片
const chooseImage = () => {
	uni.chooseImage({
		count: 6 - imageList.value.length,
		sizeType: ['compressed'],
		success: (res) => {
			const tempFiles = res.tempFiles
			uploadFiles(tempFiles)
		}
	})
}

// 上传图片到服务器
const uploadFiles = (tempFiles) => {
	uni.showLoading({ title: '上传中...' })
	const token = uni.getStorageSync('token') || ''

	const uploadPromises = tempFiles.map(file => {
		return new Promise((resolve, reject) => {
			uni.uploadFile({
				url: BASE_URL + '/resource/oss/upload',
				filePath: file.path,
				name: 'file',
				header: {
					...DEFAULT_HEADERS,
					'Authorization': `Bearer ${token}`
				},
				success: (res) => {
					const data = JSON.parse(res.data)
					if (data.code === 200) {
						resolve({ url: data.data.url, ossId: data.data.ossId })
					} else {
						reject(data.msg || '上传失败')
					}
				},
				fail: (err) => reject('请求失败')
			})
		})
	})

	Promise.all(uploadPromises).then(results => {
		imageList.value = [...imageList.value, ...results.map(r => r.url)]
		ossIdList.value = [...ossIdList.value, ...results.map(r => r.ossId)]
		uni.hideLoading()
	}).catch(err => {
		uni.hideLoading()
		uni.showToast({ title: String(err), icon: 'none' })
	})
}

const previewImage = (index) => {
	uni.previewImage({
		current: index,
		urls: imageList.value
	})
}

const removeImage = (index) => {
	imageList.value.splice(index, 1)
	ossIdList.value.splice(index, 1)
}

const handleConfirmSubmit = async () => {
	if (!reason.value.trim()) {
		uni.showToast({ title: praiseFlag.value ? '请输入评价内容' : '请输入投诉原因', icon: 'none' })
		return
	}
	if (!orderId.value || !fulfillerId.value) {
		uni.showToast({ title: '订单数据不完整，无法提交', icon: 'none' })
		return
	}

	submitting.value = true
	try {
		const payload = {
			orderId: orderId.value,
			fulfiller: fulfillerId.value,
			reason: reason.value,
			photos: ossIdList.value.join(','),
			praiseFlag: praiseFlag.value
		}

		await addComplaint(payload)

		uni.showToast({ title: '提交成功', icon: 'success' })
		setTimeout(() => {
			uni.navigateBack()
		}, 1500)
	} catch (error) {
		console.error('提交失败:', error)
		// 500提示已经在全局处理
	} finally {
		submitting.value = false
	}
}
</script>

<style lang="scss" scoped>
.complaint-submit-page {
	min-height: 100vh;
	background-color: #f8f9fb;
}

.page-content {
	padding: 30rpx;
}

.card-shadow {
	background: #fff;
	border-radius: 24rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.02);
	margin-bottom: 30rpx;
}

/* 类型切换卡片 */
.type-card {
	display: flex;
	align-items: center;
	height: 140rpx;
	padding: 0 16rpx;

	.type-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 8rpx;
		transition: all 0.3s;
		height: 110rpx;
		border-radius: 20rpx;

		&.active {
			background-color: #f6f6f6;

			.type-text {
				font-weight: bold;
				color: #333;
				font-size: 30rpx;
			}

			.type-emoji {
				transform: scale(1.3);
			}

			.type-sub {
				opacity: 1;
			}
		}

		.icon-wrap {
			width: 64rpx;
			height: 64rpx;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.icon-wrap.bad {
			background: rgba(244, 67, 54, 0.08);
		}

		.icon-wrap.good {
			background: rgba(76, 175, 80, 0.08);
		}

		.type-emoji {
			font-size: 36rpx;
			line-height: 1;
			transition: transform 0.3s ease;
		}

		.type-text {
			font-size: 28rpx;
			color: #999;
			transition: all 0.3s;
		}

		.type-sub {
			font-size: 20rpx;
			color: #bbb;
			opacity: 0;
			transition: opacity 0.3s;
		}
	}

	.type-divider {
		width: 2rpx;
		height: 60rpx;
		background: linear-gradient(180deg, transparent, #EEEEEE, transparent);
		border-radius: 2rpx;
	}
}

/* 表单板块 */
.form-section {
	padding: 32rpx;

	.section-title {
		display: flex;
		align-items: center;
		gap: 12rpx;
		margin-bottom: 24rpx;

		.title-text {
			font-size: 30rpx;
			font-weight: bold;
			color: #333;
		}

		.title-tip {
			font-size: 20rpx;
			color: #F44336;
			background: rgba(244, 67, 54, 0.1);
			padding: 2rpx 10rpx;
			border-radius: 4rpx;

			&.gray {
				color: #999;
				background: #f5f5f5;
			}
		}
	}

	.content-textarea {
		width: 100%;
		height: 260rpx;
		font-size: 28rpx;
		color: #333;
		line-height: 1.6;
		background-color: #fafafa;
		border-radius: 16rpx;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.word-count {
		text-align: right;
		font-size: 22rpx;
		color: #ccc;
		margin-top: 12rpx;
	}
}

/* 图片上传网格 */
.upload-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20rpx;

	.upload-item {
		position: relative;
		aspect-ratio: 1;
		border-radius: 12rpx;
		overflow: hidden;

		image {
			width: 100%;
			height: 100%;
		}

		.delete-icon {
			position: absolute;
			right: 0;
			top: 0;
			width: 36rpx;
			height: 36rpx;
			background: rgba(0, 0, 0, 0.5);
			border-bottom-left-radius: 12rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.upload-add {
		aspect-ratio: 1;
		border-radius: 12rpx;
		border: 2rpx dashed #EEEEEE;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: #fafafa;

		.add-text {
			font-size: 22rpx;
			color: #ccc;
			margin-top: 8rpx;
		}
	}
}

.order-info-bar {
	padding: 10rpx 0;
	font-size: 24rpx;
	color: #bbb;
	text-align: center;
}

/* 底部按钮 */
.bottom-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	background: #fff;
	padding: 24rpx 40rpx;
	padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
	box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.03);

	.submit-btn {
		height: 96rpx;
		line-height: 96rpx;
		border-radius: 48rpx;
		background: #333;
		color: #fff;
		font-size: 32rpx;
		font-weight: bold;
		border: none;
		transition: all 0.3s;

		&::after {
			border: none;
		}

		&.is-praise {
			background: #FF9500;
			color: #fff;
		}

		&:active {
			transform: scale(0.98);
			opacity: 0.9;
		}
	}
}
</style>