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

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

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

				<!-- 图片上传 -->
				<u-form-item label="上传照片" prop="imgUrl" :borderBottom="false">
					<u-upload :fileList="formData.imgUrl" @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 show = ref(false)
	const emit = defineEmits(['submit'])

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

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

	// 表单数据
	const formData = reactive({
		feedbackContent: '',
		imgUrl: '',
		isbn: ''
	})

	// 表单验证规则
	const rules = {
		feedbackContent: [{
			required: true,
			message: '请输入反馈信息',
			trigger: ['blur', 'change']
		}],
	}

	//打开
	function open(data) {
		show.value = true
		formData.isbn = data.isbn
	}

	// 取消操作
	function handleCancel() {
		resetForm()
		show.value = false
	}

	// 确认操作
	async function handleConfirm() {
		// 表单验证
		formRef.value?.validate().then(res => {
			submitting.value = true
			uni.$u.http.post('/app/feedback/add', formData).then(res => {
				if (res.code == 200) {
					// 提交成功
					uni.showToast({
						title: '反馈已提交',
						icon: 'success'
					})

					// 触发提交事件
					emit('submit', formData)
					show.value = false
				} else {
					uni.$u.toast(res.msg)
				}
			}).finally(() => {
				submitting.value = false
			})
		})
	}

	// 重置表单
	function resetForm() {
		formData.feedbackContent = ''
		formData.imgUrl = ''
		formRef.value?.resetFields()
	}
	
	defineExpose({
		open
	})
</script>

<style lang="scss" scoped>
	:deep(.u-popup__content) {
		border-radius: 12px;
	}

	.popup-container {
		width: 640rpx;
		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>