feat：投诉记录添加详情页-展示多图片

src/api/course/userCourseComplaintRecord.js

@@ -9,13 +9,13 @@ export function listUserCourseComplaintRecord(query) {
   })
 }
 
-// // 查询看课投诉记录详细
-// export function getUserCourseComplaintRecord(recordId) {
-//   return request({
-//     url: '/course/userCourseComplaintRecord/' + recordId,
-//     method: 'get'
-//   })
-// }
+// 查询看课投诉记录详细
+export function getUserCourseComplaintRecord(recordId) {
+  return request({
+    url: '/course/userCourseComplaintRecord/' + recordId,
+    method: 'get'
+  })
+}
 //
 // // 新增看课投诉记录
 // export function addUserCourseComplaintRecord(data) {

src/views/course/userCourseComplaintRecord/index.vue

@@ -87,6 +87,13 @@
 <!--            @click="handleDelete(scope.row)"-->
 <!--            v-hasPermi="['course:userCourseComplaintRecord:remove']"-->
 <!--          >删除</el-button>-->
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-info"
+            @click="handleDetails(scope.row)"
+            v-hasPermi="['course:userCourseComplaintRecord:edit']"
+          >详情</el-button>
           <el-button
             size="mini"
             type="text"
@@ -106,32 +113,55 @@
       @pagination="getList"
     />
 
-    <!-- 添加或修改看课投诉记录对话框 -->
-<!--    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>-->
-<!--      <el-form ref="form" :model="form" :rules="rules" label-width="80px">-->
-<!--        <el-form-item label="用户昵称" prop="nickName">-->
-<!--          <el-input v-model="form.nickName" placeholder="请输入用户昵称" />-->
-<!--        </el-form-item>-->
-<!--        <el-form-item label="投诉类型" prop="complaintTypeName">-->
-<!--          <el-input v-model="form.complaintTypeName" placeholder="请输入投诉类型" />-->
+<!--     投诉记录详情对话框-->
+    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+        <el-form-item label="用户昵称" prop="nickName">
+          <el-input v-model="form.nickName" readonly />
+        </el-form-item>
+        <el-form-item label="投诉类型" prop="complaintTypeName">
+          <el-input v-model="form.complaintTypeName" readonly />
+        </el-form-item>
+        <el-form-item label="投诉内容" prop="complaintContent">
+          <el-input v-model="form.complaintContent" type="textarea" :rows="4" readonly />
+        </el-form-item>
+        <el-form-item label="投诉上传图片">
+          <div v-if="imageList.length > 0" class="image-preview-container">
+            <div v-for="(imageUrl, index) in imageList" :key="index" class="image-item">
+              <el-image
+                :src="imageUrl"
+                :preview-src-list="imageList"
+                fit="cover"
+                class="preview-image"
+                @click="previewImage(index)"
+              >
+                <div slot="error" class="image-slot">
+                  <i class="el-icon-picture-outline"></i>
+                </div>
+              </el-image>
+            </div>
+          </div>
+          <span v-else class="no-image-text">暂无图片</span>
+        </el-form-item>
+        <el-form-item label="所属课程" prop="courseName">
+          <el-input v-model="form.courseName" readonly />
+        </el-form-item>
+        <el-form-item label="所属小节" prop="title">
+          <el-input v-model="form.title" readonly />
+        </el-form-item>
+<!--        <el-form-item label="创建时间" prop="createTime">-->
+<!--          <el-input v-model="form.createTime" readonly />-->
 <!--        </el-form-item>-->
-<!--        <el-form-item label="所属课程" prop="courseName">-->
-<!--          <el-input v-model="form.courseName" placeholder="请输入所属课程" />-->
-<!--        </el-form-item>-->
-<!--        <el-form-item label="所属小节" prop="title">-->
-<!--          <el-input v-model="form.title" placeholder="请输入所属小节" />-->
-<!--        </el-form-item>-->
-<!--      </el-form>-->
-<!--      <div slot="footer" class="dialog-footer">-->
-<!--        <el-button type="primary" @click="submitForm">确 定</el-button>-->
-<!--        <el-button @click="cancel">取 消</el-button>-->
-<!--      </div>-->
-<!--    </el-dialog>-->
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="cancel">关 闭</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { listUserCourseComplaintRecord, delUserCourseComplaintRecord, exportUserCourseComplaintRecord } from "@/api/course/userCourseComplaintRecord";
+import { listUserCourseComplaintRecord, delUserCourseComplaintRecord, exportUserCourseComplaintRecord, getUserCourseComplaintRecord } from "@/api/course/userCourseComplaintRecord";
 import { addBlack } from "@/api/course/courseWatchComment";
 export default {
   name: "UserCourseComplaintRecord",
@@ -157,6 +187,8 @@ export default {
       title: "",
       // 是否显示弹出层
       open: false,
+      // 图片列表
+      imageList: [],
       // 查询参数
       queryParams: {
         pageNum: 1,
@@ -199,15 +231,17 @@ export default {
         recordId: null,
         nickName: null,
         complaintTypeName: null,
+        complaintContent: null,
+        complaintUrl: null,
         courseName: null,
         title: null,
-        createTime: null
-        // userId: null,
-        // complaintTypeId: null,
-        // complaintContent: null,
-        // courseId: null,
-        // videoId: null,
+        createTime: null,
+        userId: null,
+        complaintTypeId: null,
+        courseId: null,
+        videoId: null,
       };
+      this.imageList = [];
       this.resetForm("form");
     },
     /** 搜索按钮操作 */
@@ -232,16 +266,29 @@ export default {
     //   this.open = true;
     //   this.title = "添加看课投诉记录";
     // },
-    // /** 修改按钮操作 */
-    // handleUpdate(row) {
-    //   this.reset();
-    //   const recordId = row.recordId || this.ids
-    //   getUserCourseComplaintRecord(recordId).then(response => {
-    //     this.form = response.data;
-    //     this.open = true;
-    //     this.title = "修改看课投诉记录";
-    //   });
-    // },
+    /** 详情按钮操作 */
+    handleDetails(row) {
+      this.reset();
+      const recordId = row.recordId || this.ids
+      getUserCourseComplaintRecord(recordId).then(response => {
+        this.form = response.data;
+        // 处理多个图片URL，通过逗号分割
+        if (this.form.complaintUrl) {
+          this.imageList = this.form.complaintUrl.split(',').filter(url => url.trim() !== '');
+        } else {
+          this.imageList = [];
+        }
+        this.open = true;
+        this.title = "看课投诉记录详情";
+      }).catch(error => {
+        console.error('获取详情失败:', error);
+        this.msgError("获取详情失败，请稍后重试");
+      });
+    },
+    /** 预览图片 */
+    previewImage(index) {
+      // Element UI的图片组件会自动处理预览
+    },
     // /** 提交按钮 */
     // submitForm() {
     //   this.$refs["form"].validate(valid => {
@@ -315,3 +362,58 @@ export default {
   }
 };
 </script>
+
+<style scoped>
+.image-preview-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.image-item {
+  width: 100px;
+  height: 100px;
+  border: 1px solid #dcdfe6;
+  border-radius: 6px;
+  overflow: hidden;
+  cursor: pointer;
+}
+
+.preview-image {
+  width: 100%;
+  height: 100%;
+}
+
+.image-slot {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  background: #f5f7fa;
+  color: #909399;
+  font-size: 20px;
+}
+
+.no-image-text {
+  color: #909399;
+  font-size: 14px;
+}
+
+/* 只读表单样式优化 */
+.el-input.is-disabled .el-input__inner,
+.el-input__inner[readonly] {
+  background-color: #f5f7fa;
+  border-color: #e4e7ed;
+  color: #606266;
+  cursor: not-allowed;
+}
+
+.el-textarea.is-disabled .el-textarea__inner,
+.el-textarea__inner[readonly] {
+  background-color: #f5f7fa;
+  border-color: #e4e7ed;
+  color: #606266;
+  cursor: not-allowed;
+}
+</style>