From e3ab9c05bd8932f9c442929a3a9ec3ae132c4ec6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E5=BF=97=E5=BC=BA?= <357099073@qq.com>
Date: Fri, 20 Mar 2026 09:13:27 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E7=95=8C=E9=9D=A2=EF=BC=8C?=
 =?UTF-8?q?=E7=89=B9=E8=89=B2=E6=9C=8D=E5=8A=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/services.js                           |  53 +++
 .../apps/cms/services/components/edit.vue     | 321 ++++++++++++++++++
 src/views/apps/cms/services/index.vue         | 307 +++++++++++++++++
 3 files changed, 681 insertions(+)
 create mode 100644 src/api/services.js
 create mode 100644 src/views/apps/cms/services/components/edit.vue
 create mode 100644 src/views/apps/cms/services/index.vue

diff --git a/src/api/services.js b/src/api/services.js
new file mode 100644
index 0000000..4e0b121
--- /dev/null
+++ b/src/api/services.js
@@ -0,0 +1,53 @@
+import request from '@/utils/request'
+
+/**
+ * 获取特色服务列表
+ * @param {Object} params - 查询参数
+ * @returns {Promise}
+ */
+export function getServiceList(params) {
+  return request({
+    url: '/admin/services',
+    method: 'get',
+    params
+  })
+}
+
+/**
+ * 添加特色服务
+ * @param {Object} data - 服务数据
+ * @returns {Promise}
+ */
+export function addService(data) {
+  return request({
+    url: '/admin/services',
+    method: 'post',
+    data
+  })
+}
+
+/**
+ * 更新特色服务
+ * @param {number} id - 服务ID
+ * @param {Object} data - 服务数据
+ * @returns {Promise}
+ */
+export function updateService(id, data) {
+  return request({
+    url: `/admin/services/${id}`,
+    method: 'put',
+    data
+  })
+}
+
+/**
+ * 删除特色服务
+ * @param {number} id - 服务ID
+ * @returns {Promise}
+ */
+export function deleteService(id) {
+  return request({
+    url: `/admin/services/${id}`,
+    method: 'delete'
+  })
+}
diff --git a/src/views/apps/cms/services/components/edit.vue b/src/views/apps/cms/services/components/edit.vue
new file mode 100644
index 0000000..0fc12ff
--- /dev/null
+++ b/src/views/apps/cms/services/components/edit.vue
@@ -0,0 +1,321 @@
+<template>
+  <el-dialog
+    v-model="visible"
+    :title="title"
+    width="600px"
+    destroy-on-close
+    @close="handleClose"
+  >
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+    >
+      <el-form-item label="服务名称" prop="title">
+        <el-input v-model="formData.title" placeholder="请输入服务名称" />
+      </el-form-item>
+      <el-form-item label="服务描述" prop="desc">
+        <el-input
+          v-model="formData.desc"
+          type="textarea"
+          :rows="5"
+          placeholder="请输入服务描述"
+        />
+      </el-form-item>
+      <el-form-item label="Logo" prop="thumb">
+        <div class="flex-direction">
+          <el-upload
+            class="image-uploader"
+            :action="uploadUrl"
+            :headers="uploadHeaders"
+            :show-file-list="false"
+            :on-success="handleImageSuccess"
+            :on-error="handleImageError"
+            :before-upload="beforeImageUpload"
+            accept="image/*"
+          >
+            <img
+              v-if="formData.thumb"
+              :src="getImageUrl(formData.thumb)"
+              class="image-preview"
+            />
+            <div v-else class="upload-placeholder">
+              <el-icon class="image-uploader-icon"><Plus /></el-icon>
+              <div class="el-upload__text">点击上传服务图标</div>
+            </div>
+          </el-upload>
+          <div
+            style="
+              margin-top: 8px;
+              font-size: 12px;
+              color: var(--el-text-color-secondary);
+            "
+          >
+            建议尺寸：200x200，支持 jpg、png、gif 格式，大小不超过 2MB
+          </div>
+        </div>
+        <el-button
+          v-if="formData.thumb"
+          size="small"
+          type="danger"
+          text
+          @click="handleRemoveImage"
+          style="margin-top: 8px"
+        >
+          删除图标
+        </el-button>
+      </el-form-item>
+      <el-form-item label="排序" prop="sort">
+        <el-input-number v-model="formData.sort" :min="0" :max="999" />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-radio-group v-model="formData.status">
+          <el-radio :label="1">启用</el-radio>
+          <el-radio :label="0">禁用</el-radio>
+        </el-radio-group>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="handleClose">取消</el-button>
+        <el-button
+          type="primary"
+          @click="handleSubmit"
+          :loading="submitLoading"
+        >
+          确定
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref, reactive, watch } from "vue";
+import { ElMessage } from "element-plus";
+import { Plus } from "@element-plus/icons-vue";
+import { addService, updateService } from "@/api/services";
+
+// @ts-ignore
+const API_BASE_URL = import.meta.env.VITE_API_BASE_URL;
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+  title: {
+    type: String,
+    default: "添加服务",
+  },
+  isEdit: {
+    type: Boolean,
+    default: false,
+  },
+  rowData: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const emit = defineEmits(["update:modelValue", "success"]);
+
+const visible = ref(false);
+const submitLoading = ref(false);
+const formRef = ref(null);
+
+// 上传配置
+const uploadUrl = ref(API_BASE_URL + "/admin/uploadfiles");
+const uploadHeaders = ref({
+  Authorization: "Bearer " + (localStorage.getItem("token") || ""),
+});
+
+// 图片上传前校验
+const beforeImageUpload = (file) => {
+  const isImage = file.type.startsWith("image/");
+  const isLt2M = file.size / 1024 / 1024 < 2;
+
+  if (!isImage) {
+    ElMessage.error("请上传图片文件!");
+    return false;
+  }
+  if (!isLt2M) {
+    ElMessage.error("图片大小不能超过 2MB!");
+    return false;
+  }
+  return true;
+};
+
+// 图片上传成功
+const handleImageSuccess = (response) => {
+  if (response.code === 200 || response.code === 201) {
+    formData.link_logo = response.data.url || response.data.path;
+    ElMessage.success(
+      response.code === 201 ? "文件已存在，直接使用" : "图片上传成功",
+    );
+  } else {
+    ElMessage.error(response.msg || "图片上传失败");
+  }
+};
+
+// 图片上传失败
+const handleImageError = () => {
+  ElMessage.error("图片上传失败，请重试");
+};
+
+// 删除图片
+const handleRemoveImage = () => {
+  formData.link_logo = "";
+  ElMessage.success("图片已删除");
+};
+
+// 获取图片完整URL（用于预览）
+const getImageUrl = (imagePath) => {
+  if (!imagePath) return "";
+  if (imagePath.startsWith("http")) return imagePath;
+  return API_BASE_URL + imagePath;
+};
+
+const formData = reactive({
+  title: "",
+  desc: "",
+  thumb: "",
+  url: "",
+  sort: 0,
+  status: 1,
+});
+
+const formRules = {
+  title: [
+    { required: true, message: "请输入服务名称", trigger: "blur" },
+    { max: 100, message: "长度不超过100个字符", trigger: "blur" },
+  ],
+  desc: [
+    { required: true, message: "请输入服务描述", trigger: "blur" },
+    { max: 200, message: "描述长度不超过200个字符", trigger: "blur" },
+  ],
+};
+
+// 监听 modelValue 变化
+watch(
+  () => props.modelValue,
+  (val) => {
+    visible.value = val;
+    if (val) {
+      resetForm();
+      if (props.isEdit && props.rowData) {
+        Object.assign(formData, props.rowData);
+      }
+    }
+  },
+);
+
+// 监听 visible 变化
+watch(visible, (val) => {
+  emit("update:modelValue", val);
+});
+
+// 重置表单
+const resetForm = () => {
+  formData.title = "";
+  formData.desc = "";
+  formData.thumb = "";
+  formData.url = "";
+  formData.sort = 0;
+  formData.status = 1;
+};
+
+// 关闭
+const handleClose = () => {
+  visible.value = false;
+};
+
+// 提交
+const handleSubmit = async () => {
+  if (!formRef.value) return;
+
+  await formRef.value.validate(async (valid) => {
+    if (valid) {
+      submitLoading.value = true;
+      try {
+        let res;
+        if (props.isEdit) {
+          res = await updateService(props.rowData.id, formData);
+        } else {
+          res = await addService(formData);
+        }
+
+        if (res.code === 200) {
+          ElMessage.success(props.isEdit ? "更新成功" : "添加成功");
+          handleClose();
+          emit("success");
+        } else {
+          ElMessage.error(res.msg || "操作失败");
+        }
+      } catch (error) {
+        console.error("提交失败:", error);
+        ElMessage.error("操作失败");
+      } finally {
+        submitLoading.value = false;
+      }
+    }
+  });
+};
+</script>
+
+<style scoped>
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+
+/* 图片上传样式 */
+.image-uploader {
+  border: 1px dashed var(--el-border-color);
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: var(--el-transition-duration-fast);
+  width: 120px;
+  height: 120px;
+}
+
+.image-uploader:hover {
+  border-color: var(--el-color-primary);
+}
+
+.upload-placeholder {
+  width: 120px;
+  height: 120px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: var(--el-text-color-secondary);
+}
+
+.image-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  margin-bottom: 8px;
+}
+
+.el-upload__text {
+  font-size: 12px;
+}
+
+.image-preview {
+  width: 120px;
+  height: 120px;
+  object-fit: contain;
+  display: block;
+}
+.flex-direction {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+</style>
diff --git a/src/views/apps/cms/services/index.vue b/src/views/apps/cms/services/index.vue
new file mode 100644
index 0000000..85cce79
--- /dev/null
+++ b/src/views/apps/cms/services/index.vue
@@ -0,0 +1,307 @@
+<template>
+  <div class="container-box">
+    <div class="header-bar">
+      <h2>特色服务管理</h2>
+      <div class="header-actions">
+        <el-button type="primary" @click="handleAdd">
+          <el-icon><Plus /></el-icon>
+          添加内容
+        </el-button>
+        <el-button @click="refresh" :loading="loading">
+          <el-icon><Refresh /></el-icon>
+          刷新
+        </el-button>
+      </div>
+    </div>
+
+    <el-divider></el-divider>
+
+    <!-- 搜索栏 -->
+    <div class="search-bar">
+      <el-input
+        v-model="searchForm.keyword"
+        placeholder="请输入内容搜索"
+        clearable
+        style="width: 200px; margin-right: 10px"
+        @keyup.enter="handleSearch"
+      />
+      <el-select
+        v-model="searchForm.status"
+        placeholder="状态筛选"
+        clearable
+        style="width: 120px; margin-right: 10px"
+      >
+        <el-option label="启用" :value="1" />
+        <el-option label="禁用" :value="0" />
+      </el-select>
+      <el-button type="primary" @click="handleSearch">
+        <el-icon><Search /></el-icon>
+        搜索
+      </el-button>
+      <el-button @click="resetSearch">重置</el-button>
+    </div>
+
+    <!-- 数据表格 -->
+    <el-table
+      :data="servicesList"
+      style="width: 100%"
+      v-loading="loading"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column prop="id" label="ID" width="80" align="center" />
+      <el-table-column prop="thumb" label="服务图片" min-width="150" align="center" />
+      <el-table-column prop="title" label="服务名称" min-width="150" align="center" />
+      <el-table-column prop="desc" label="服务描述" min-width="150" align="center" />
+      <el-table-column prop="url" label="跳转地址" min-width="150" align="center" />
+      <el-table-column prop="sort" label="排序" width="80" align="center" />
+      <el-table-column prop="status" label="状态" width="100" align="center">
+        <template #default="{ row }">
+          <el-switch
+            v-model="row.status"
+            :active-value="1"
+            :inactive-value="0"
+            @change="(val) => handleStatusChange(row, val)"
+          />
+        </template>
+      </el-table-column>
+      <el-table-column prop="create_time" label="创建时间" width="180" align="center" />
+      <el-table-column label="操作" width="200" align="center" fixed="right">
+        <template #default="{ row }">
+          <el-button type="primary" link @click="handleEdit(row)">
+            <el-icon><Edit /></el-icon>
+            编辑
+          </el-button>
+          <el-button type="danger" link @click="handleDelete(row)">
+            <el-icon><Delete /></el-icon>
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 分页 -->
+    <div class="pagination-container">
+      <el-pagination
+        v-model:current-page="pagination.page"
+        v-model:page-size="pagination.limit"
+        :page-sizes="[10, 20, 50, 100]"
+        :total="pagination.total"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="handleSizeChange"
+        @current-change="handlePageChange"
+      />
+    </div>
+
+    <!-- 添加/编辑组件 -->
+    <EditDialog
+      v-model="dialogVisible"
+      :title="dialogTitle"
+      :is-edit="isEdit"
+      :row-data="currentRow"
+      @success="handleSuccess"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus, Refresh, Search, Edit, Delete } from '@element-plus/icons-vue'
+import {
+  getServiceList,
+  updateService,
+  deleteService
+} from '@/api/services'
+import EditDialog from './components/edit.vue'
+
+// @ts-ignore
+const API_BASE_URL = import.meta.env.VITE_API_BASE_URL;
+
+// 获取图片完整URL
+const getImageUrl = (imagePath) => {
+  if (!imagePath) return "";
+  if (imagePath.startsWith("http")) return imagePath;
+  return API_BASE_URL + imagePath;
+};
+
+// 加载状态
+const loading = ref(false)
+
+// 搜索表单
+const searchForm = reactive({
+  keyword: '',
+  status: ''
+})
+
+// 分页
+const pagination = reactive({
+  page: 1,
+  limit: 10,
+  total: 0
+})
+
+// 数据列表
+const servicesList = ref([])
+const selectedIds = ref([])
+
+// 对话框
+const dialogVisible = ref(false)
+const dialogTitle = ref('')
+const isEdit = ref(false)
+const currentRow = ref({})
+
+// 获取列表
+const fetchList = async () => {
+  loading.value = true
+  try {
+    const res = await getServiceList({
+      page: pagination.page,
+      limit: pagination.limit,
+      keyword: searchForm.keyword,
+      status: searchForm.status
+    })
+    if (res.code === 200) {
+      servicesList.value = res.data.list
+      pagination.total = res.data.total
+    }
+  } catch (error) {
+    console.error('获取特色服务列表失败:', error)
+    ElMessage.error('获取特色服务列表失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+// 搜索
+const handleSearch = () => {
+  pagination.page = 1
+  fetchList()
+}
+
+// 重置搜索
+const resetSearch = () => {
+  searchForm.keyword = ''
+  searchForm.status = ''
+  pagination.page = 1
+  fetchList()
+}
+
+// 刷新
+const refresh = () => {
+  fetchList()
+}
+
+// 分页变化
+const handleSizeChange = (val) => {
+  pagination.limit = val
+  fetchList()
+}
+
+const handlePageChange = (val) => {
+  pagination.page = val
+  fetchList()
+}
+
+// 选择变化
+const handleSelectionChange = (selection) => {
+  selectedIds.value = selection.map(item => item.id)
+}
+
+// 添加
+const handleAdd = () => {
+  isEdit.value = false
+  dialogTitle.value = '添加特色服务'
+  currentRow.value = {}
+  dialogVisible.value = true
+}
+
+// 编辑
+const handleEdit = (row) => {
+  isEdit.value = true
+  dialogTitle.value = '编辑特色服务'
+  currentRow.value = row
+  dialogVisible.value = true
+}
+
+// 删除
+const handleDelete = async (row) => {
+  try {
+    await ElMessageBox.confirm('确定要删除该特色服务吗？', '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    })
+
+    const res = await deleteService(row.id)
+    if (res.code === 200) {
+      ElMessage.success('删除成功')
+      fetchList()
+    } else {
+      ElMessage.error(res.msg || '删除失败')
+    }
+  } catch (error) {
+    if (error !== 'cancel') {
+      console.error('删除特色服务失败:', error)
+      ElMessage.error('删除特色服务失败')
+    }
+  }
+}
+
+// 状态变化
+const handleStatusChange = async (row, val) => {
+  try {
+    const res = await updateService(row.id, { status: val })
+    if (res.code === 200) {
+      ElMessage.success('状态更新成功')
+    } else {
+      ElMessage.error(res.msg || '状态更新失败')
+      row.status = val === 1 ? 0 : 1
+    }
+  } catch (error) {
+    console.error('更新特色服务状态失败:', error)
+    ElMessage.error('更新特色服务状态失败')
+    row.status = val === 1 ? 0 : 1
+  }
+}
+
+// 编辑成功回调
+const handleSuccess = () => {
+  fetchList()
+}
+
+// 初始化
+onMounted(() => {
+  fetchList()
+})
+</script>
+
+<style scoped>
+.container-box {
+  padding: 20px;
+}
+
+.header-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.header-bar h2 {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.search-bar {
+  margin-bottom: 20px;
+  display: flex;
+  align-items: center;
+}
+
+.pagination-container {
+  margin-top: 20px;
+  display: flex;
+  justify-content: flex-end;
+}
+</style>