shuhi-app/pages/book/components/feedbackPopup.vue

<template>
	<u-popup mode="center" :show="show" @close="handleClose" :closeOnClickOverlay="false">
		<view class="popup-container">
			<u-form ref="formRef" :model="formData" :rules="rules" labelPosition="top" labelWidth="100%">

				<!-- 反馈信息 -->
				<u-form-item label="反馈图书信息" prop="feedbackText" :borderBottom="true">
					<u-input v-model="formData.feedbackText" type="textarea" placeholder="请输入反馈信息" :border="true"
						height="100"></u-input>
				</u-form-item>

				<!-- 图片上传 -->
				<u-form-item label="上传照片" prop="images" :borderBottom="false">
					<u-upload :fileList="formData.images" @afterRead="afterRead" @delete="deletePic" name="1" multiple
						:maxCount="1" :imageMode="true">
						<view class="upload-slot">
							<u-icon name="plus" size="30"></u-icon>
							<text class="upload-text">上传照片</text>
						</view>
					</u-upload>
				</u-form-item>
			</u-form>

			<!-- 按钮组 -->
			<view class="button-group">
				<u-button type="info" text="取消" :plain="true" @click="handleCancel" :disabled="submitting"></u-button>
				<u-button type="primary" text="确认" @click="handleConfirm" :loading="submitting"></u-button>
			</view>
		</view>
	</u-popup>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'

	const props = defineProps({
		show: {
			type: Boolean,
			default: false
		}
	})

	const emit = defineEmits(['update:show', 'submit'])

	// 表单引用
	const formRef = ref(null)

	// 提交状态
	const submitting = ref(false)

	// 表单数据
	const formData = reactive({
		feedbackText: '',
		images: []
	})

	// 表单验证规则
	const rules = {
		feedbackText: [{
			required: true,
			message: '请输入反馈信息',
			trigger: ['blur', 'change']
		}, {
			min: 5,
			message: '反馈信息不能少于5个字',
			trigger: ['blur', 'change']
		}],
		images: [{
			required: true,
			message: '请上传照片',
			trigger: ['change']
		}]
	}

	// 上传图片后的处理
	function afterRead(event) {
		const {
			file
		} = event
		// 这里可以处理图片上传到服务器的逻辑
		formData.images.push({
			url: file.url,
			status: 'success',
			message: '上传成功'
		})
	}

	// 删除图片
	function deletePic(event) {
		const index = event.index
		formData.images.splice(index, 1)
	}

	// 取消操作
	function handleCancel() {
		resetForm()
		emit('update:show', false)
	}

	// 确认操作
	async function handleConfirm() {
		try {
			// 表单验证
			await formRef.value?.validate()

			submitting.value = true

			// 模拟提交操作
			await new Promise(resolve => setTimeout(resolve, 1000))

			// 提交成功
			uni.showToast({
				title: '反馈已提交',
				icon: 'success'
			})

			// 触发提交事件
			emit('submit', {
				feedbackText: formData.feedbackText,
				images: formData.images
			})

			// 重置表单并关闭弹窗
			resetForm()
			emit('update:show', false)
		} catch (error) {
			console.error('表单验证失败:', error)
		} finally {
			submitting.value = false
		}
	}

	// 重置表单
	function resetForm() {
		formData.feedbackText = ''
		formData.images = []
		formRef.value?.resetFields()
	}
</script>

<style lang="scss" scoped>
	.popup-container {
		width: 600rpx;
		background-color: #ffffff;
		border-radius: 12rpx;
		padding: 30rpx;

		:deep(.u-form) {
			.u-form-item {
				&__body {
					padding: 20rpx 0;
				}

				&__body__left__content {
					padding-bottom: 8rpx;
				}
			}
		}

		.upload-slot {
			width: 160rpx;
			height: 160rpx;
			border: 2rpx dashed #dcdfe6;
			border-radius: 8rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.upload-text {
				font-size: 24rpx;
				color: #909399;
				margin-top: 10rpx;
			}
		}

		.button-group {
			display: flex;
			justify-content: space-between;
			margin-top: 40rpx;
			padding: 0 20rpx;

			:deep(.u-button) {
				width: 45%;
				border-radius: 8rpx;
			}
		}
	}
</style>