LandSurveyApplet/pages/feedback/index.vue

<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 flex justify-between items-center">
        <text>意见反馈</text>
        <text class="text-sm text-blue-600 font-normal" @click="goToFeedbackList">反馈列表</text>
      </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 goToFeedbackList = () => {
  uni.navigateTo({
    url: '/pages/feedback/list/index'
  })
}

// 选择图片
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'
  })

  // 实际项目中这里调用接口提交数据

  // 清空表单
  feedback.value.content = ''
  feedback.value.imageUrl = ''
}
</script>