Ver Fonte

feat(log-report): add log report page with image upload functionality

- Created new log report page with form layout
- Implemented textarea for log content input
- Added image upload section with plus icon placeholder
- Integrated image selection from album or camera
- Added image preview and removal functionality
- Implemented form submission with validation
- Added navigation link to log report list page
nahida há 6 meses atrás
pai
commit
303829af02
1 ficheiros alterados com 124 adições e 0 exclusões
  1. 124 0
      src/pages/log-report/index.vue

+ 124 - 0
src/pages/log-report/index.vue

@@ -0,0 +1,124 @@
+<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="goToLogReportList">日志列表</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 goToLogReportList = () => {
+  uni.navigateTo({
+    url: '/pages/log-report/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>