咨询等功能完善1

pom.xml

@@ -300,6 +300,11 @@
                 <artifactId>alipay-easysdk</artifactId>
                 <version>2.2.3</version>
             </dependency>
+            <dependency>
+                <groupId>org.springframework.boot</groupId>
+                <artifactId>spring-boot-starter-thymeleaf</artifactId>
+                <version>${spring-boot.version}</version>
+            </dependency>
         </dependencies>
     </dependencyManagement>
 

ruoyi-admin/pom.xml

@@ -61,6 +61,12 @@
             <artifactId>ruoyi-generator</artifactId>
         </dependency>
 
+        <!-- Thymeleaf模板引擎 -->
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-starter-thymeleaf</artifactId>
+        </dependency>
+
     </dependencies>
 
     <build>
@@ -89,6 +95,14 @@
                     <warName>${project.artifactId}</warName>
                 </configuration>   
            </plugin>
+            <plugin>
+                <groupId>org.apache.maven.plugins</groupId>
+                <artifactId>maven-compiler-plugin</artifactId>
+                <configuration>
+                    <source>9</source>
+                    <target>9</target>
+                </configuration>
+            </plugin>
         </plugins>
         <finalName>${project.artifactId}</finalName>
     </build>

ruoyi-admin/src/main/java/com/ruoyi/web/controller/client/ConsultClientController.java

@@ -0,0 +1,76 @@
+package com.ruoyi.web.controller.client;
+
+import com.ruoyi.common.core.controller.BaseController;
+import com.ruoyi.common.core.domain.AjaxResult;
+import com.ruoyi.common.core.domain.entity.ConsultInfo;
+import com.ruoyi.common.core.page.TableDataInfo;
+import com.ruoyi.system.service.IConsultInfoService;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PathVariable;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+
+import java.util.List;
+
+/**
+ * 咨询文章C端Controller
+ * 
+ * @author ruoyi
+ * @date 2025-08-15
+ */
+@RestController
+@RequestMapping("/client/consult")
+public class ConsultClientController extends BaseController
+{
+    @Autowired
+    private IConsultInfoService consultInfoService;
+
+//    /**
+//     * 获取咨询文章详细信息（JSON格式）
+//     */
+//    @GetMapping("/info/{id}")
+//    @ResponseBody
+//    public AjaxResult getInfo(@PathVariable("id") String id)
+//    {
+//        return success(consultInfoService.selectConsultInfoById(id));
+//    }
+//
+//    /**
+//     * 测试接口
+//     */
+//    @GetMapping("/test")
+//    @ResponseBody
+//    public String test()
+//    {
+//        return "ConsultClientController is working!";
+//    }
+//
+//    /**
+//     * 获取咨询文章详细信息（H5页面）
+//     */
+//    @GetMapping("/view/{id}")
+//    public String viewArticle(@PathVariable("id") String id, org.springframework.ui.Model model)
+//    {
+//        ConsultInfo consultInfo = consultInfoService.selectConsultInfoById(id);
+//        model.addAttribute("article", consultInfo);
+//        return "client/consult/article";
+//    }
+
+    @GetMapping("/list")
+    public TableDataInfo list(ConsultInfo consultInfo)
+    {
+        startPage();
+        List<ConsultInfo> list = consultInfoService.selectConsultInfoList(consultInfo);
+        return getDataTableData(list);
+    }
+
+
+    @GetMapping("/view/{id}")
+    public AjaxResult viewArticle(@PathVariable("id") String id)
+    {
+        ConsultInfo consultInfo = consultInfoService.selectConsultInfoById(id);
+        return AjaxResult.success(consultInfo);
+    }
+
+}

ruoyi-admin/src/main/resources/application.yml

@@ -87,6 +87,11 @@ spring:
         max-active: 8
         # #连接池最大阻塞等待时间（使用负值表示没有限制）
         max-wait: -1ms
+  thymeleaf:
+    cache: false
+    prefix: classpath:/templates/
+    suffix: .html
+    encoding: UTF-8
 
 # token配置
 token:

ruoyi-admin/src/main/resources/templates/client/consult/article.html

@@ -0,0 +1,230 @@
+<!DOCTYPE html>
+<html lang="zh" xmlns:th="http://www.thymeleaf.org">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title th:text="${article.title}">文章详情</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+            line-height: 1.6;
+            color: #333;
+            background-color: #f8f9fa;
+            max-width: 100%;
+            overflow-x: hidden;
+        }
+        .container {
+            max-width: 500px;
+            margin: 0 auto;
+            background-color: #fff;
+            min-height: 100vh;
+            position: relative;
+        }
+        .header {
+            padding: 15px;
+            border-bottom: 1px solid #eee;
+            display: flex;
+            align-items: center;
+        }
+        .back-button {
+            font-size: 20px;
+            margin-right: 15px;
+            text-decoration: none;
+            color: #333;
+        }
+        .title {
+            font-size: 18px;
+            font-weight: 500;
+            flex-grow: 1;
+            text-align: center;
+        }
+        .status-bar {
+            display: flex;
+            justify-content: space-between;
+            padding: 5px 15px;
+            font-size: 12px;
+            color: #666;
+        }
+        .status-bar-left {
+            display: flex;
+            align-items: center;
+        }
+        .status-bar-right {
+            display: flex;
+            align-items: center;
+        }
+        .swiper-container {
+            width: 100%;
+            height: 250px;
+            position: relative;
+            overflow: hidden;
+        }
+        .swiper-wrapper {
+            display: flex;
+            transition: transform 0.3s ease;
+            height: 100%;
+        }
+        .swiper-slide {
+            flex-shrink: 0;
+            width: 100%;
+            height: 100%;
+        }
+        .swiper-slide img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+        .swiper-pagination {
+            position: absolute;
+            bottom: 10px;
+            left: 0;
+            right: 0;
+            display: flex;
+            justify-content: center;
+            gap: 5px;
+        }
+        .swiper-pagination-bullet {
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background-color: rgba(255, 255, 255, 0.5);
+            cursor: pointer;
+        }
+        .swiper-pagination-bullet-active {
+            background-color: #fff;
+        }
+        .content {
+            padding: 20px 15px;
+        }
+        .article-title {
+            font-size: 20px;
+            font-weight: 600;
+            margin-bottom: 10px;
+        }
+        .article-subtitle {
+            font-size: 16px;
+            color: #666;
+            margin-bottom: 15px;
+        }
+        .article-meta {
+            display: flex;
+            justify-content: space-between;
+            font-size: 14px;
+            color: #999;
+            margin-bottom: 20px;
+        }
+        .article-content {
+            font-size: 16px;
+            line-height: 1.8;
+            color: #333;
+        }
+        .article-content p {
+            margin-bottom: 15px;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <!-- 状态栏 -->
+        <div class="status-bar">
+            <div class="status-bar-left">12:22 &#9992;</div>
+            <div class="status-bar-right">&#128246; &#128279; &#128267;</div>
+        </div>
+        
+        <!-- 头部 -->
+        <div class="header">
+            <a href="javascript:history.back();" class="back-button">&#8592;</a>
+            <div class="title" th:text="${article.title}">文章标题</div>
+        </div>
+        
+        <!-- 轮播图 -->
+        <div class="swiper-container" th:if="${article.rotaImg != null && article.rotaImg != ''}">
+            <div class="swiper-wrapper" id="swiperWrapper">
+                <!-- 轮播图将通过JavaScript动态添加 -->
+            </div>
+            <div class="swiper-pagination" id="swiperPagination"></div>
+        </div>
+        
+        <!-- 文章内容 -->
+        <div class="content">
+            <h1 class="article-title" th:text="${article.title}">文章标题</h1>
+            <h2 class="article-subtitle" th:text="${article.subTitle}">文章副标题</h2>
+            <div class="article-meta">
+                <span>作者：<span th:text="${article.author}">作者名</span></span>
+                <span th:text="${#dates.format(article.createTime, 'yyyy-MM-dd')}">发布日期</span>
+            </div>
+            <div class="article-content" th:utext="${article.content}">
+                <!-- 文章内容 -->
+            </div>
+        </div>
+    </div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            // 处理轮播图
+            const rotaImg = '[[${article.rotaImg}]]';
+            if (rotaImg) {
+                const imgArray = rotaImg.split(',');
+                const swiperWrapper = document.getElementById('swiperWrapper');
+                const swiperPagination = document.getElementById('swiperPagination');
+                
+                // 添加轮播图片
+                imgArray.forEach((img, index) => {
+                    const slide = document.createElement('div');
+                    slide.className = 'swiper-slide';
+                    
+                    const imgElement = document.createElement('img');
+                    imgElement.src = img;
+                    imgElement.alt = '轮播图' + (index + 1);
+                    
+                    slide.appendChild(imgElement);
+                    swiperWrapper.appendChild(slide);
+                    
+                    // 添加分页指示器
+                    const bullet = document.createElement('div');
+                    bullet.className = 'swiper-pagination-bullet';
+                    if (index === 0) {
+                        bullet.className += ' swiper-pagination-bullet-active';
+                    }
+                    bullet.onclick = function() {
+                        goToSlide(index);
+                    };
+                    swiperPagination.appendChild(bullet);
+                });
+                
+                // 初始化轮播
+                let currentSlide = 0;
+                const slides = document.querySelectorAll('.swiper-slide');
+                const bullets = document.querySelectorAll('.swiper-pagination-bullet');
+                
+                // 自动轮播
+                setInterval(() => {
+                    currentSlide = (currentSlide + 1) % slides.length;
+                    goToSlide(currentSlide);
+                }, 3000);
+                
+                // 切换到指定幻灯片
+                function goToSlide(index) {
+                    swiperWrapper.style.transform = `translateX(-${index * 100}%)`;
+                    
+                    // 更新分页指示器
+                    bullets.forEach((bullet, i) => {
+                        if (i === index) {
+                            bullet.classList.add('swiper-pagination-bullet-active');
+                        } else {
+                            bullet.classList.remove('swiper-pagination-bullet-active');
+                        }
+                    });
+                    
+                    currentSlide = index;
+                }
+            }
+        });
+    </script>
+</body>
+</html>

ruoyi-common/pom.xml

@@ -190,6 +190,11 @@
             <groupId>com.alipay.sdk</groupId>
             <artifactId>alipay-easysdk</artifactId>
         </dependency>
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-starter-thymeleaf</artifactId>
+
+        </dependency>
     </dependencies>
 
 </project>

ruoyi-ui/src/router/modules/consult.js

@@ -0,0 +1,34 @@
+// 咨询管理路由
+export default {
+  path: '/consult',
+  component: 'Layout',
+  hidden: false,
+  redirect: 'noRedirect',
+  name: 'Consult',
+  meta: {
+    title: '咨询管理',
+    icon: 'documentation'
+  },
+  children: [
+    {
+      path: 'index',
+      component: 'consult/index',
+      name: 'ConsultList',
+      meta: { title: '咨询列表', icon: 'list' }
+    },
+    {
+      path: 'add',
+      component: 'consult/add',
+      name: 'ConsultAdd',
+      meta: { title: '添加文章', activeMenu: '/consult/index' },
+      hidden: true
+    },
+    {
+      path: 'add/:id',
+      component: 'consult/add',
+      name: 'ConsultEdit',
+      meta: { title: '编辑文章', activeMenu: '/consult/index' },
+      hidden: true
+    }
+  ]
+}

ruoyi-ui/src/views/consult/add.vue

@@ -0,0 +1,273 @@
+<template>
+  <div class="app-container">
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <span>{{ isEdit ? '编辑文章' : '新增文章' }}</span>
+      </div>
+      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+        <el-form-item label="文章标题" prop="title">
+          <el-input v-model="form.title" placeholder="请输入文章标题" style="width: 500px;" />
+        </el-form-item>
+        <el-form-item label="子标题" prop="subTitle">
+          <el-input v-model="form.subTitle" placeholder="请输入子标题" style="width: 500px;" />
+        </el-form-item>
+        <el-form-item label="封面图片" prop="bannerImg">
+          <el-upload
+            class="avatar-uploader"
+            :action="upload.url"
+            :headers="upload.headers"
+            :show-file-list="false"
+            :on-success="handleBannerSuccess"
+            :before-upload="beforeUpload">
+            <img v-if="form.bannerImg" :src="form.bannerImg" class="avatar">
+            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+          </el-upload>
+          <div class="el-upload__tip">建议上传尺寸: 750px × 400px，大小不超过2MB</div>
+        </el-form-item>
+        <el-form-item label="轮播图片" prop="rotaImg">
+          <el-upload
+            class="upload-demo"
+            :action="upload.url"
+            :headers="upload.headers"
+            :on-preview="handlePictureCardPreview"
+            :on-remove="handleRemove"
+            :on-success="handleRotaSuccess"
+            :file-list="rotaFileList"
+            multiple
+            list-type="picture-card">
+            <i class="el-icon-plus"></i>
+          </el-upload>
+          <el-dialog :visible.sync="dialogVisible">
+            <img width="100%" :src="dialogImageUrl" alt="">
+          </el-dialog>
+          <div class="el-upload__tip">可上传多张轮播图片，建议尺寸统一，每张图片不超过2MB</div>
+        </el-form-item>
+        <el-form-item label="作者" prop="author">
+          <el-input v-model="form.author" placeholder="请输入作者" style="width: 300px;" />
+        </el-form-item>
+        <el-form-item label="正文内容" prop="content">
+          <editor 
+            v-model="form.content" 
+            :min-height="400"
+            :init="{
+              plugins: 'preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help emoticons autosave',
+              toolbar: 'code undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | table image media charmap emoticons hr pagebreak insertdatetime print preview | fullscreen | bdmap indent2em lineheight formatpainter axupimgs',
+              height: 650
+            }"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="submitForm">保存</el-button>
+          <el-button @click="cancel">返回</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { getInfo, addInfo, updateInfo } from "@/api/consult/info";
+import { getToken } from "@/utils/auth";
+
+export default {
+  name: "ConsultAdd",
+  data() {
+    return {
+      // 是否编辑模式
+      isEdit: false,
+      // 表单参数
+      form: {
+        id: null,
+        title: null,
+        subTitle: null,
+        bannerImg: null,
+        rotaImg: null,
+        content: null,
+        author: null,
+        isDel: 0
+      },
+      // 表单校验
+      rules: {
+        title: [
+          { required: true, message: "文章标题不能为空", trigger: "blur" }
+        ],
+        author: [
+          { required: true, message: "作者不能为空", trigger: "blur" }
+        ],
+        content: [
+          { required: true, message: "文章内容不能为空", trigger: "blur" }
+        ]
+      },
+      // 上传参数
+      upload: {
+        // 上传地址
+        url: process.env.VUE_APP_BASE_API + "/back/upload/config/file",
+        // 请求头部
+        headers: { Authorization: "Bearer " + getToken() }
+      },
+      // 轮播图片文件列表
+      rotaFileList: [],
+      // 预览图片URL
+      dialogImageUrl: '',
+      // 是否显示预览图片对话框
+      dialogVisible: false
+    };
+  },
+  created() {
+    const id = this.$route.params && this.$route.params.id;
+    if (id) {
+      this.isEdit = true;
+      this.getInfo(id);
+    } else {
+      // 设置默认值
+      this.form.isDel = 0;
+      this.form.author = this.$store.getters.name || '管理员';
+    }
+  },
+  methods: {
+    /** 获取文章详情 */
+    getInfo(id) {
+      getInfo(id).then(response => {
+        this.form = response.data;
+        // 处理轮播图片
+        if (this.form.rotaImg) {
+          const rotaImages = this.form.rotaImg.split(',');
+          this.rotaFileList = rotaImages.map((url, index) => {
+            return {
+              name: `轮播图${index + 1}`,
+              url: url
+            };
+          });
+        }
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.$router.push("/consult/index");
+    },
+    // 表单提交
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          // 处理轮播图片数据 - 已在handleRotaSuccess中处理，这里只需确保没有blob URL
+          if (this.rotaFileList.length > 0) {
+            // 再次检查确保没有blob URL
+            this.form.rotaImg = this.form.rotaImg.split(',')
+              .filter(url => url && !url.startsWith('blob:'))
+              .join(',');
+          }
+
+          if (this.form.id != null) {
+            updateInfo(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.$router.push("/consult/index");
+            });
+          } else {
+            addInfo(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.$router.push("/consult/index");
+            });
+          }
+        }
+      });
+    },
+    // 封面图片上传成功处理
+    handleBannerSuccess(res, file) {
+      if (res.code === 200) {
+        // 直接使用返回的URL路径
+        this.form.bannerImg = process.env.VUE_APP_BASE_API + res.data;
+        console.log('封面图片URL:', this.form.bannerImg);
+      } else {
+        this.$message.error('上传失败');
+      }
+    },
+    // 轮播图片上传成功处理
+    handleRotaSuccess(res, file, fileList) {
+      if (res.code === 200) {
+        // 打印上传响应，帮助调试
+        console.log('上传响应:', res);
+        
+        // 直接使用返回的URL路径
+        const fileUrl = process.env.VUE_APP_BASE_API + res.data;
+        
+        // 更新当前上传的文件URL
+        file.url = fileUrl;
+        
+        this.rotaFileList = fileList;
+        
+        // 更新表单中的轮播图片数据
+        this.form.rotaImg = fileList.map(item => {
+          // 如果是新上传的文件，使用返回的URL
+          if (item.response && item.response.data) {
+            return process.env.VUE_APP_BASE_API + item.response.data;
+          }
+          // 如果已经有URL，直接使用
+          else if (item.url && !item.url.startsWith('blob:')) {
+            return item.url;
+          }
+          return '';
+        }).filter(url => url).join(',');
+        
+        console.log('最终保存的轮播图片URL:', this.form.rotaImg);
+      } else {
+        this.$message.error('上传失败');
+      }
+    },
+    // 上传前检查
+    beforeUpload(file) {
+      const isImage = file.type.indexOf('image') !== -1;
+      const isLt2M = file.size / 1024 / 1024 < 2;
+
+      if (!isImage) {
+        this.$message.error('上传图片只能是图片格式!');
+        return false;
+      }
+      if (!isLt2M) {
+        this.$message.error('上传图片大小不能超过 2MB!');
+        return false;
+      }
+      return true;
+    },
+    // 删除图片
+    handleRemove(file, fileList) {
+      this.rotaFileList = fileList;
+    },
+    // 预览图片
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.url || file.response.url;
+      this.dialogVisible = true;
+    }
+  }
+};
+</script>
+
+<style scoped>
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+.avatar-uploader .el-upload:hover {
+  border-color: #409EFF;
+}
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 178px;
+  height: 178px;
+  line-height: 178px;
+  text-align: center;
+}
+.avatar {
+  width: 178px;
+  height: 178px;
+  display: block;
+}
+.el-upload__tip {
+  margin-top: 5px;
+  color: #909399;
+  font-size: 12px;
+}
+</style>

ruoyi-ui/src/views/consult/edit.vue

@@ -0,0 +1,259 @@
+<template>
+  <div class="app-container">
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <span>编辑文章</span>
+      </div>
+      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+        <el-form-item label="文章标题" prop="title">
+          <el-input v-model="form.title" placeholder="请输入文章标题" style="width: 500px;" />
+        </el-form-item>
+        <el-form-item label="子标题" prop="subTitle">
+          <el-input v-model="form.subTitle" placeholder="请输入子标题" style="width: 500px;" />
+        </el-form-item>
+        <el-form-item label="封面图片" prop="bannerImg">
+          <el-upload
+            class="avatar-uploader"
+            :action="upload.url"
+            :headers="upload.headers"
+            :show-file-list="false"
+            :on-success="handleBannerSuccess"
+            :before-upload="beforeUpload">
+            <img v-if="form.bannerImg" :src="form.bannerImg" class="avatar">
+            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+          </el-upload>
+          <div class="el-upload__tip">建议上传尺寸: 750px × 400px，大小不超过2MB</div>
+        </el-form-item>
+        <el-form-item label="轮播图片" prop="rotaImg">
+          <el-upload
+            class="upload-demo"
+            :action="upload.url"
+            :headers="upload.headers"
+            :on-preview="handlePictureCardPreview"
+            :on-remove="handleRemove"
+            :on-success="handleRotaSuccess"
+            :file-list="rotaFileList"
+            multiple
+            list-type="picture-card">
+            <i class="el-icon-plus"></i>
+          </el-upload>
+          <el-dialog :visible.sync="dialogVisible">
+            <img width="100%" :src="dialogImageUrl" alt="">
+          </el-dialog>
+          <div class="el-upload__tip">可上传多张轮播图片，建议尺寸统一，每张图片不超过2MB</div>
+        </el-form-item>
+        <el-form-item label="作者" prop="author">
+          <el-input v-model="form.author" placeholder="请输入作者" style="width: 300px;" />
+        </el-form-item>
+        <el-form-item label="正文内容" prop="content">
+          <editor 
+            v-model="form.content" 
+            :min-height="400"
+            :init="{
+              plugins: 'preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help emoticons autosave',
+              toolbar: 'code undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | table image media charmap emoticons hr pagebreak insertdatetime print preview | fullscreen | bdmap indent2em lineheight formatpainter axupimgs',
+              height: 650
+            }"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="submitForm">保存</el-button>
+          <el-button @click="cancel">返回</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { getInfo, updateInfo } from "@/api/consult/info";
+import { getToken } from "@/utils/auth";
+
+export default {
+  name: "ConsultEdit",
+  data() {
+    return {
+      // 表单参数
+      form: {
+        id: null,
+        title: null,
+        subTitle: null,
+        bannerImg: null,
+        rotaImg: null,
+        content: null,
+        author: null,
+        isDel: 0
+      },
+      // 表单校验
+      rules: {
+        title: [
+          { required: true, message: "文章标题不能为空", trigger: "blur" }
+        ],
+        author: [
+          { required: true, message: "作者不能为空", trigger: "blur" }
+        ],
+        content: [
+          { required: true, message: "文章内容不能为空", trigger: "blur" }
+        ]
+      },
+      // 上传参数
+      upload: {
+        // 上传地址
+        url: process.env.VUE_APP_BASE_API + "/back/upload/config/file",
+        // 请求头部
+        headers: { Authorization: "Bearer " + getToken() }
+      },
+      // 轮播图片文件列表
+      rotaFileList: [],
+      // 预览图片URL
+      dialogImageUrl: '',
+      // 是否显示预览图片对话框
+      dialogVisible: false
+    };
+  },
+  created() {
+    const id = this.$route.params && this.$route.params.id;
+    if (id) {
+      this.getInfo(id);
+    }
+  },
+  methods: {
+    /** 获取文章详情 */
+    getInfo(id) {
+      getInfo(id).then(response => {
+        this.form = response.data;
+        // 处理轮播图片
+        if (this.form.rotaImg) {
+          const rotaImages = this.form.rotaImg.split(',');
+          this.rotaFileList = rotaImages.map((url, index) => {
+            return {
+              name: `轮播图${index + 1}`,
+              url: url
+            };
+          });
+        }
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.$router.push("/consult/index");
+    },
+    // 表单提交
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          // 处理轮播图片数据 - 已在handleRotaSuccess中处理，这里只需确保没有blob URL
+          if (this.rotaFileList.length > 0) {
+            // 再次检查确保没有blob URL
+            this.form.rotaImg = this.form.rotaImg.split(',')
+              .filter(url => url && !url.startsWith('blob:'))
+              .join(',');
+          }
+
+          updateInfo(this.form).then(response => {
+            this.$modal.msgSuccess("修改成功");
+            this.$router.push("/consult/index");
+          });
+        }
+      });
+    },
+    // 封面图片上传成功处理
+    handleBannerSuccess(res, file) {
+      if (res.code === 200) {
+        // 直接使用返回的URL路径
+        this.form.bannerImg = process.env.VUE_APP_BASE_API + res.data;
+        console.log('封面图片URL:', this.form.bannerImg);
+      } else {
+        this.$message.error('上传失败');
+      }
+    },
+    // 轮播图片上传成功处理
+    handleRotaSuccess(res, file, fileList) {
+      if (res.code === 200) {
+        // 打印上传响应，帮助调试
+        console.log('上传响应:', res);
+        
+        // 直接使用返回的URL路径
+        const fileUrl = process.env.VUE_APP_BASE_API + res.data;
+        
+        // 更新当前上传的文件URL
+        file.url = fileUrl;
+        
+        this.rotaFileList = fileList;
+        
+        // 更新表单中的轮播图片数据
+        this.form.rotaImg = fileList.map(item => {
+          // 如果是新上传的文件，使用返回的URL
+          if (item.response && item.response.data) {
+            return process.env.VUE_APP_BASE_API + item.response.data;
+          }
+          // 如果已经有URL，直接使用
+          else if (item.url && !item.url.startsWith('blob:')) {
+            return item.url;
+          }
+          return '';
+        }).filter(url => url).join(',');
+        
+        console.log('最终保存的轮播图片URL:', this.form.rotaImg);
+      } else {
+        this.$message.error('上传失败');
+      }
+    },
+    // 上传前检查
+    beforeUpload(file) {
+      const isImage = file.type.indexOf('image') !== -1;
+      const isLt2M = file.size / 1024 / 1024 < 2;
+
+      if (!isImage) {
+        this.$message.error('上传图片只能是图片格式!');
+        return false;
+      }
+      if (!isLt2M) {
+        this.$message.error('上传图片大小不能超过 2MB!');
+        return false;
+      }
+      return true;
+    },
+    // 删除图片
+    handleRemove(file, fileList) {
+      this.rotaFileList = fileList;
+    },
+    // 预览图片
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.url || file.response.url;
+      this.dialogVisible = true;
+    }
+  }
+};
+</script>
+
+<style scoped>
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+.avatar-uploader .el-upload:hover {
+  border-color: #409EFF;
+}
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 178px;
+  height: 178px;
+  line-height: 178px;
+  text-align: center;
+}
+.avatar {
+  width: 178px;
+  height: 178px;
+  display: block;
+}
+.el-upload__tip {
+  margin-top: 5px;
+  color: #909399;
+  font-size: 12px;
+}
+</style>