|
|
@@ -0,0 +1,110 @@
|
|
|
+<template>
|
|
|
+ <view class="bg-gray-50 p-2 min-h-screen">
|
|
|
+ <view class="bg-white rounded-xl shadow-sm p-4">
|
|
|
+ <!-- 标题 -->
|
|
|
+ <view class="text-gray-900 text-lg font-medium mb-6">意见反馈</view>
|
|
|
+
|
|
|
+ <!-- 表单内容 -->
|
|
|
+ <view class="space-y-6">
|
|
|
+ <!-- 反馈输入框（带边框） -->
|
|
|
+ <view>
|
|
|
+ <textarea
|
|
|
+ v-model="feedback.content"
|
|
|
+ placeholder="请输入"
|
|
|
+ class="bg-transparent outline-none border-gray-200 border-solid border-1 rounded-lg p-4 min-h-[180rpx] resize-none"
|
|
|
+ ></textarea>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 图片上传区域（使用plus.png） -->
|
|
|
+ <view>
|
|
|
+ <text class="text-gray-700 text-sm block mb-3">图片信息</text>
|
|
|
+ <view class="border-2 border-dashed border-gray-200 rounded-lg p-4 w-32 h-32 flex items-center justify-center relative" @click="chooseImage">
|
|
|
+ <!-- 初始状态显示plus.png -->
|
|
|
+ <image
|
|
|
+ src="/static/plus.png"
|
|
|
+ class="w-42 h-42 text-gray-400"
|
|
|
+ v-if="!feedback.imageUrl"
|
|
|
+ />
|
|
|
+
|
|
|
+ <!-- 已选择图片时显示预览 -->
|
|
|
+ <image
|
|
|
+ :src="feedback.imageUrl"
|
|
|
+ class="w-full h-full object-cover rounded"
|
|
|
+ v-else
|
|
|
+ />
|
|
|
+
|
|
|
+ <!-- 已选择图片时显示删除按钮 -->
|
|
|
+ <view v-if="feedback.imageUrl" class="absolute top-2 right-2 w-6 h-6 bg-black/50 rounded-full flex items-center justify-center" @click.stop="removeImage">
|
|
|
+ <text class="text-white text-xs">×</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 确认按钮 -->
|
|
|
+ <view class="mt-6 px-8">
|
|
|
+ <view
|
|
|
+ class="w-full text-center bg-blue-600 text-white py-3 rounded-2xl font-medium shadow-sm hover:bg-blue-700 transition-colors"
|
|
|
+ @click="submitFeedback"
|
|
|
+ >
|
|
|
+ <text>确认</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { ref } from 'vue'
|
|
|
+
|
|
|
+// 反馈数据
|
|
|
+const feedback = ref({
|
|
|
+ content: '',
|
|
|
+ imageUrl: ''
|
|
|
+})
|
|
|
+
|
|
|
+// 选择图片
|
|
|
+const chooseImage = () => {
|
|
|
+ // 如果已有图片则先清空
|
|
|
+ if (feedback.value.imageUrl) {
|
|
|
+ feedback.value.imageUrl = ''
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ // 调用图片选择API
|
|
|
+ uni.chooseImage({
|
|
|
+ count: 1,
|
|
|
+ sizeType: ['original', 'compressed'],
|
|
|
+ sourceType: ['album', 'camera'],
|
|
|
+ success: (res) => {
|
|
|
+ feedback.value.imageUrl = res.tempFilePaths[0]
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+// 移除图片
|
|
|
+const removeImage = () => {
|
|
|
+ feedback.value.imageUrl = ''
|
|
|
+}
|
|
|
+
|
|
|
+// 提交反馈
|
|
|
+const submitFeedback = () => {
|
|
|
+ // 验证反馈内容
|
|
|
+ if (!feedback.value.content.trim()) {
|
|
|
+ uni.showToast({
|
|
|
+ title: '请输入反馈内容',
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ // 提交逻辑
|
|
|
+ console.log('提交反馈:', feedback.value)
|
|
|
+ uni.showToast({
|
|
|
+ title: '反馈提交成功',
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+
|
|
|
+ // 实际项目中这里调用接口提交数据
|
|
|
+}
|
|
|
+</script>
|
