场景方案提交

src/api/enterprisePurchase/scenarioCards/index.ts

@@ -0,0 +1,63 @@
+import request from '@/utils/request';
+import { AxiosPromise } from 'axios';
+import { ScenarioCardsVO, ScenarioCardsForm, ScenarioCardsQuery } from '@/api/enterprisePurchase/scenarioCards/types';
+
+/**
+ * 查询场景解决方案卡片列表
+ * @param query
+ * @returns {*}
+ */
+
+export const listScenarioCards = (query?: ScenarioCardsQuery): AxiosPromise<ScenarioCardsVO[]> => {
+  return request({
+    url: '/mall/scenarioCards/list',
+    method: 'get',
+    params: query
+  });
+};
+
+/**
+ * 查询场景解决方案卡片详细
+ * @param id
+ */
+export const getScenarioCards = (id: string | number): AxiosPromise<ScenarioCardsVO> => {
+  return request({
+    url: '/mall/scenarioCards/' + id,
+    method: 'get'
+  });
+};
+
+/**
+ * 新增场景解决方案卡片
+ * @param data
+ */
+export const addScenarioCards = (data: ScenarioCardsForm) => {
+  return request({
+    url: '/mall/scenarioCards',
+    method: 'post',
+    data: data
+  });
+};
+
+/**
+ * 修改场景解决方案卡片
+ * @param data
+ */
+export const updateScenarioCards = (data: ScenarioCardsForm) => {
+  return request({
+    url: '/mall/scenarioCards',
+    method: 'put',
+    data: data
+  });
+};
+
+/**
+ * 删除场景解决方案卡片
+ * @param id
+ */
+export const delScenarioCards = (id: string | number | Array<string | number>) => {
+  return request({
+    url: '/mall/scenarioCards/' + id,
+    method: 'delete'
+  });
+};

src/api/enterprisePurchase/scenarioCards/types.ts

@@ -0,0 +1,131 @@
+export interface ScenarioCardsVO {
+  /**
+   * 主键ID
+   */
+  id: string | number;
+
+  /**
+   * 排序权重
+   */
+  sortOrder: number;
+
+  /**
+   * 卡片主标题
+   */
+  title: string;
+
+  /**
+   * 标题颜色
+   */
+  titleColor: string;
+
+  /**
+   * 卡片副标题
+   */
+  subTitle: string;
+
+  /**
+   * 封面图片URL
+   */
+  imageUrl: string;
+
+  /**
+   * 卡片跳转链接
+   */
+  jumpLink: string;
+
+  /**
+   * 备注
+   */
+  remark: string;
+
+}
+
+export interface ScenarioCardsForm extends BaseEntity {
+  /**
+   * 主键ID
+   */
+  id?: string | number;
+
+  /**
+   * 排序权重
+   */
+  sortOrder?: number;
+
+  /**
+   * 卡片主标题
+   */
+  title?: string;
+
+  /**
+   * 标题颜色
+   */
+  titleColor?: string;
+
+  /**
+   * 卡片副标题
+   */
+  subTitle?: string;
+
+  /**
+   * 封面图片URL
+   */
+  imageUrl?: string;
+
+  /**
+   * 卡片跳转链接
+   */
+  jumpLink?: string;
+
+  /**
+   * 备注
+   */
+  remark?: string;
+
+}
+
+export interface ScenarioCardsQuery extends PageQuery {
+
+  /**
+   * 排序权重
+   */
+  sortOrder?: number;
+
+  /**
+   * 卡片主标题
+   */
+  title?: string;
+
+  /**
+   * 标题颜色
+   */
+  titleColor?: string;
+
+  /**
+   * 卡片副标题
+   */
+  subTitle?: string;
+
+  /**
+   * 封面图片URL
+   */
+  imageUrl?: string;
+
+  /**
+   * 卡片跳转链接
+   */
+  jumpLink?: string;
+
+  /**
+   * 平台标识
+   */
+  platformCode?: string;
+
+    /**
+     * 日期范围参数
+     */
+    params?: any;
+}
+
+
+

src/api/enterprisePurchase/scenarioGlobalSettings/index.ts

@@ -0,0 +1,67 @@
+import request from '@/utils/request';
+import { AxiosPromise } from 'axios';
+import {
+  ScenarioGlobalSettingsVO,
+  ScenarioGlobalSettingsForm,
+  ScenarioGlobalSettingsQuery
+} from '@/api/enterprisePurchase/scenarioGlobalSettings/types';
+
+/**
+ * 查询场景解决方案全局设置列表
+ * @param query
+ * @returns {*}
+ */
+
+export const listScenarioGlobalSettings = (query?: ScenarioGlobalSettingsQuery): AxiosPromise<ScenarioGlobalSettingsVO[]> => {
+  return request({
+    url: '/mall/scenarioGlobalSettings/list',
+    method: 'get',
+    params: query
+  });
+};
+
+/**
+ * 查询场景解决方案全局设置详细
+ * @param id
+ */
+export const getScenarioGlobalSettings = (id: string | number): AxiosPromise<ScenarioGlobalSettingsVO> => {
+  return request({
+    url: '/mall/scenarioGlobalSettings/' + id,
+    method: 'get'
+  });
+};
+
+/**
+ * 新增场景解决方案全局设置
+ * @param data
+ */
+export const addScenarioGlobalSettings = (data: ScenarioGlobalSettingsForm) => {
+  return request({
+    url: '/mall/scenarioGlobalSettings',
+    method: 'post',
+    data: data
+  });
+};
+
+/**
+ * 修改场景解决方案全局设置
+ * @param data
+ */
+export const updateScenarioGlobalSettings = (data: ScenarioGlobalSettingsForm) => {
+  return request({
+    url: '/mall/scenarioGlobalSettings',
+    method: 'put',
+    data: data
+  });
+};
+
+/**
+ * 删除场景解决方案全局设置
+ * @param id
+ */
+export const delScenarioGlobalSettings = (id: string | number | Array<string | number>) => {
+  return request({
+    url: '/mall/scenarioGlobalSettings/' + id,
+    method: 'delete'
+  });
+};

src/api/enterprisePurchase/scenarioGlobalSettings/types.ts

@@ -0,0 +1,116 @@
+export interface ScenarioGlobalSettingsVO {
+  /**
+   * 主键ID
+   */
+  id: string | number;
+
+  /**
+   * 场景主标题
+   */
+  mainTitle: string;
+
+  /**
+   * 场景副标题
+   */
+  subTitle: string;
+
+  /**
+   * 按钮文字
+   */
+  btnText: string;
+
+  /**
+   * 全局跳转链接
+   */
+  jumpLink: string;
+
+  /**
+   * 主题背景色
+   */
+  themeColor: string;
+
+  /**
+   * 备注
+   */
+  remark: string;
+
+}
+
+export interface ScenarioGlobalSettingsForm extends BaseEntity {
+  /**
+   * 主键ID
+   */
+  id?: string | number;
+
+  /**
+   * 场景主标题
+   */
+  mainTitle?: string;
+
+  /**
+   * 场景副标题
+   */
+  subTitle?: string;
+
+  /**
+   * 按钮文字
+   */
+  btnText?: string;
+
+  /**
+   * 全局跳转链接
+   */
+  jumpLink?: string;
+
+  /**
+   * 主题背景色
+   */
+  themeColor?: string;
+
+  /**
+   * 备注
+   */
+  remark?: string;
+
+}
+
+export interface ScenarioGlobalSettingsQuery extends PageQuery {
+
+  /**
+   * 场景主标题
+   */
+  mainTitle?: string;
+
+  /**
+   * 场景副标题
+   */
+  subTitle?: string;
+
+  /**
+   * 按钮文字
+   */
+  btnText?: string;
+
+  /**
+   * 全局跳转链接
+   */
+  jumpLink?: string;
+
+  /**
+   * 主题背景色
+   */
+  themeColor?: string;
+
+  /**
+   * 平台标识
+   */
+  platformCode?: string;
+
+    /**
+     * 日期范围参数
+     */
+    params?: any;
+}
+
+
+

src/views/enterprisePurchase/index.vue

@@ -1470,6 +1470,20 @@ import { listCarousel, getCarousel, delCarousel, addCarousel, updateCarousel } f
 import { CarouselVO, CarouselQuery, CarouselForm } from '@/api/enterprisePurchase/carousel/types';
 import { listCategoryMain, getCategoryMain, delCategoryMain, addCategoryMain, updateCategoryMain } from '@/api/enterprisePurchase/categoryMain';
 import { CategoryMainVO, CategoryMainQuery, CategoryMainForm } from '@/api/enterprisePurchase/categoryMain/types';
+import { listScenarioCards, getScenarioCards, delScenarioCards, addScenarioCards, updateScenarioCards } from '@/api/enterprisePurchase/scenarioCards';
+import { ScenarioCardsVO, ScenarioCardsQuery, ScenarioCardsForm } from '@/api/enterprisePurchase/scenarioCards/types';
+import {
+  listScenarioGlobalSettings,
+  getScenarioGlobalSettings,
+  delScenarioGlobalSettings,
+  addScenarioGlobalSettings,
+  updateScenarioGlobalSettings
+} from '@/api/enterprisePurchase/scenarioGlobalSettings';
+import {
+  ScenarioGlobalSettingsVO,
+  ScenarioGlobalSettingsQuery,
+  ScenarioGlobalSettingsForm
+} from '@/api/enterprisePurchase/scenarioGlobalSettings/types';
 
 import {
   listHeaderCategory,
@@ -1556,6 +1570,8 @@ const handleMainSave = async () => {
       }
     } else if (activeSubTab.value == 'carousel') {
       saveLeftAdConfig();
+    } else if (activeSubTab.value == 'scenario') {
+      saveScenarioGlobalSettings();
     }
   } catch (error) {
     console.error('保存配置失败:', error);
@@ -2068,6 +2084,7 @@ const submitCategoryForm = async () => {
 
 // 场景方案模块逻辑
 const scenarioSettings = reactive({
+  id: null as string | number | null,
   mainTitle: '场景解决方案',
   subTitle: '一站全买齐',
   btnText: '进入全场景',
@@ -2075,52 +2092,88 @@ const scenarioSettings = reactive({
   themeColor: '#66e0a3'
 });
 
-const scenarioList = ref([
-  {
-    id: 1,
-    title: '耗材采购',
-    titleColor: '#00965e',
-    subTitle: '低量频度实惠用',
-    subTitleColor: '#666',
-    image: 'https://images.unsplash.com/photo-1586769852836-bc069f19e1b6?q=80&w=272&h=80&auto=format&fit=crop',
-    link: '',
-    bgColor: '#ffffff',
-    opacity: 1
-  },
-  {
-    id: 2,
-    title: '防暑降温',
-    titleColor: '#00965e',
-    subTitle: '守护员工健康',
-    subTitleColor: '#666',
-    image: 'https://images.unsplash.com/photo-1513104890138-7c749659a591?q=80&w=272&h=80&auto=format&fit=crop',
-    link: '',
-    bgColor: '#ffffff',
-    opacity: 1
-  },
-  {
-    id: 3,
-    title: '员工团建',
-    titleColor: '#00965e',
-    subTitle: '同心聚力',
-    subTitleColor: '#666',
-    image: 'https://images.unsplash.com/photo-1529156069898-49953e39b3ac?q=80&w=272&h=80&auto=format&fit=crop',
-    link: '',
-    bgColor: '#ffffff',
-    opacity: 1
-  },
-  {
-    id: 4,
-    title: '营销物资',
-    titleColor: '#00965e',
-    subTitle: '全场景解决方案',
-    subTitleColor: '#666',
-    image: 'https://images.unsplash.com/photo-1531050171669-014464ce1500?q=80&w=272&h=80&auto=format&fit=crop',
-    link: '',
-    bgColor: '#ffffff',
-    opacity: 1
+// 获取场景全局设置
+const getScenarioGlobalSettingsList = async () => {
+  try {
+    const res = await listScenarioGlobalSettings();
+    if (res.code === 200 && res.rows && res.rows.length > 0) {
+      const data = res.rows[0];
+      scenarioSettings.id = data.id;
+      scenarioSettings.mainTitle = data.mainTitle || '';
+      scenarioSettings.subTitle = data.subTitle || '';
+      scenarioSettings.btnText = data.btnText || '';
+      scenarioSettings.jumpLink = data.jumpLink || '';
+      scenarioSettings.themeColor = data.themeColor || '#66e0a3';
+    }
+  } catch (error) {
+    console.error('获取场景全局设置失败:', error);
+    ElMessage.error('获取场景全局设置失败');
   }
-]);
+};
+
+// 保存场景全局设置
+const saveScenarioGlobalSettings = async () => {
+  const data: ScenarioGlobalSettingsForm = {
+    mainTitle: scenarioSettings.mainTitle,
+    subTitle: scenarioSettings.subTitle,
+    btnText: scenarioSettings.btnText,
+    jumpLink: scenarioSettings.jumpLink,
+    themeColor: scenarioSettings.themeColor
+  };
+
+  try {
+    let res;
+    if (scenarioSettings.id) {
+      res = await updateScenarioGlobalSettings({ ...data, id: scenarioSettings.id });
+    } else {
+      res = await addScenarioGlobalSettings(data);
+      if (res.code === 200 && res.data) {
+        scenarioSettings.id = res.data.id;
+      }
+    }
+    if (res.code === 200) {
+      ElMessage.success('场景全局设置保存成功');
+    } else {
+      ElMessage.error(res.msg || '保存失败');
+    }
+  } catch (error) {
+    console.error('保存场景全局设置失败:', error);
+    ElMessage.error('保存失败');
+  }
+};
+
+const scenarioList = ref<ScenarioCardsVO[]>([]);
+
+// 获取场景卡片列表
+const getScenarioList = async () => {
+  try {
+    const res = await listScenarioCards();
+    if (res.code === 200 && res.rows) {
+      scenarioList.value = res.rows.map((item: ScenarioCardsVO) => {
+        let extra = { subTitleColor: '#333333', bgColor: '#ffffff', opacity: 1 };
+        try {
+          if ((item as any).remark) {
+            extra = { ...extra, ...JSON.parse((item as any).remark) };
+          }
+        } catch (e) {
+          /* remark JSON 解析失败使用默认值 */
+        }
+
+        return {
+          ...item,
+          image: (item as any).imageUrl || '',
+          link: (item as any).jumpLink || '',
+          subTitleColor: extra.subTitleColor,
+          bgColor: extra.bgColor,
+          opacity: extra.opacity
+        };
+      });
+    }
+  } catch (error) {
+    console.error('获取场景卡片列表失败:', error);
+    ElMessage.error('获取场景卡片列表失败');
+  }
+};
 
 const scenarioDialogVisible = ref(false);
 const scenarioEditIndex = ref(-1);
@@ -2141,17 +2194,71 @@ const handleEditScenario = (row, index) => {
   scenarioDialogVisible.value = true;
 };
 
-const submitScenarioForm = () => {
-  scenarioList.value[scenarioEditIndex.value] = JSON.parse(JSON.stringify(scenarioForm));
-  scenarioDialogVisible.value = false;
-  ElMessage.success('方案修改成功');
+const submitScenarioForm = async () => {
+  const item = scenarioList.value[scenarioEditIndex.value];
+  if (!item) return;
+
+  const data: ScenarioCardsForm = {
+    id: item.id,
+    title: scenarioForm.title,
+    titleColor: scenarioForm.titleColor,
+    subTitle: scenarioForm.subTitle,
+    imageUrl: scenarioForm.image,
+    jumpLink: scenarioForm.link,
+    sortOrder: (item as any).sortOrder ?? scenarioEditIndex.value,
+    remark: JSON.stringify({
+      subTitleColor: scenarioForm.subTitleColor,
+      bgColor: scenarioForm.bgColor,
+      opacity: scenarioForm.opacity
+    })
+  };
+
+  try {
+    const res = await updateScenarioCards(data);
+    if (res.code === 200) {
+      ElMessage.success('方案修改成功');
+      scenarioDialogVisible.value = false;
+      getScenarioList();
+    } else {
+      ElMessage.error(res.msg || '修改失败');
+    }
+  } catch (error) {
+    console.error('修改失败:', error);
+    ElMessage.error('修改失败');
+  }
 };
 
-const moveScenario = (index, direction) => {
+const moveScenario = async (index: number, direction: number) => {
   const newIndex = index + direction;
   if (newIndex < 0 || newIndex >= scenarioList.value.length) return;
   const item = scenarioList.value.splice(index, 1)[0];
   scenarioList.value.splice(newIndex, 0, item);
+
+  // 同步排序到后端
+  try {
+    const start = Math.min(index, newIndex);
+    const end = Math.max(index, newIndex);
+    for (let i = start; i <= end; i++) {
+      const row = scenarioList.value[i] as any;
+      await updateScenarioCards({
+        id: row.id,
+        title: row.title,
+        titleColor: row.titleColor,
+        subTitle: row.subTitle,
+        imageUrl: row.image || row.imageUrl,
+        jumpLink: row.link || row.jumpLink,
+        sortOrder: i,
+        remark: JSON.stringify({
+          subTitleColor: row.subTitleColor || '#333333',
+          bgColor: row.bgColor || '#ffffff',
+          opacity: row.opacity ?? 1
+        })
+      });
+    }
+  } catch (error) {
+    console.error('排序更新失败:', error);
+    ElMessage.error('排序更新失败');
+  }
 };
 
 const handleRemoveCategory = async (index: number) => {
@@ -2861,6 +2968,8 @@ onMounted(() => {
   getCarouselList();
   getHeaderCategoryList();
   getCategoryList();
+  getScenarioGlobalSettingsList();
+  getScenarioList();
   // 获取左侧广告配置
   nextTick(() => {
     updateNavArrows();