1、新增首页轮播图切换效果

2、其他调整
2024-09-30 18:20:29 +08:00
parent 7a180ee5a7
commit 713f24ca3e
22 changed files with 3239 additions and 1603 deletions
--- a/.env.development
+++ b/.env.development
@@ -1,11 +1,11 @@
 VITE_APP_NAME=后台管理系统
 VITE_SOCKET_URL=wss://server.gxwebsoft.com
-#VITE_SERVER_URL=https://server.gxwebsoft.com/api
+VITE_SERVER_URL=https://server.gxwebsoft.com/api
 VITE_THINK_URL=https://gxtyzx-api.websoft.top/api
-VITE_API_URL=https://modules.gxwebsoft.com/api
+#VITE_API_URL=https://modules.gxwebsoft.com/api


-VITE_SERVER_URL=http://127.0.0.1:9090/api
-#VITE_API_URL=http://127.0.0.1:9001/api
+#VITE_SERVER_URL=http://127.0.0.1:9090/api
+VITE_API_URL=http://127.0.0.1:9002/api
 #VITE_THINK_URL=http://127.0.0.1:9099/api
 #/booking/bookingItem
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
    "@bytemd/plugin-gfm": "^1.17.2",
    "@bytemd/plugin-highlight": "^1.17.4",
    "@bytemd/plugin-highlight-ssr": "^1.20.2",
+    "@cyhnkckali/vue3-color-picker": "^2.0.2",
    "@wecom/jssdk": "^1.3.1",
    "ali-oss": "^6.18.0",
    "ant-design-vue": "^3.2.11",
--- a/src/api/cms/mpAd/model/index.ts
+++ b/src/api/cms/mpAd/model/index.ts
@@ -20,6 +20,7 @@ export interface MpAd {
  height?: string;
  // 广告图片
  images?: string;
+  colors?: string;
  // 路由/链接地址
  path?: string;
  // 用户ID
--- a/src/api/shop/goods/model/index.ts
+++ b/src/api/shop/goods/model/index.ts
@@ -22,6 +22,7 @@ export interface Goods {
  goodsName?: string;
  // 商品封面图
  image?: string;
+  video?: string;
  // 商品详情
  content?: string;
  // 商品分类
--- a/src/api/shop/merchant/model/index.ts
+++ b/src/api/shop/merchant/model/index.ts
@@ -21,8 +21,12 @@ export interface Merchant {
  itemType?: string;
  // 商户分类
  category?: string;
+  merchantCategoryId?: number;
+  merchantCategoryTitle?: string;
  // 商户坐标
  lngAndLat?: string;
+  lng?: string;
+  lat?: string;
  // 省
  province?: string;
  // 市
--- a/src/api/shop/merchantCategory/index.ts
+++ b/src/api/shop/merchantCategory/index.ts
@@ -0,0 +1,106 @@
+import request from '@/utils/request';
+import type { ApiResult, PageResult } from '@/api';
+import type { MerchantCategory, MerchantCategoryParam } from './model';
+import { MODULES_API_URL } from '@/config/setting';
+
+/**
+ * 分页查询商家分类
+ */
+export async function pageMerchantCategory(params: MerchantCategoryParam) {
+  const res = await request.get<ApiResult<PageResult<MerchantCategory>>>(
+    MODULES_API_URL + '/shop/merchant-category/page',
+    {
+      params
+    }
+  );
+  if (res.data.code === 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 查询商家分类列表
+ */
+export async function listMerchantCategory(params?: MerchantCategoryParam) {
+  const res = await request.get<ApiResult<MerchantCategory[]>>(
+    MODULES_API_URL + '/shop/merchant-category',
+    {
+      params
+    }
+  );
+  if (res.data.code === 0 && res.data.data) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 添加商家分类
+ */
+export async function addMerchantCategory(data: MerchantCategory) {
+  const res = await request.post<ApiResult<unknown>>(
+    MODULES_API_URL + '/shop/merchant-category',
+    data
+  );
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 修改商家分类
+ */
+export async function updateMerchantCategory(data: MerchantCategory) {
+  const res = await request.put<ApiResult<unknown>>(
+    MODULES_API_URL + '/shop/merchant-category',
+    data
+  );
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 删除商家分类
+ */
+export async function removeMerchantCategory(id?: number) {
+  const res = await request.delete<ApiResult<unknown>>(
+    MODULES_API_URL + '/shop/merchant-category/' + id
+  );
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 批量删除商家分类
+ */
+export async function removeBatchMerchantCategory(data: (number | undefined)[]) {
+  const res = await request.delete<ApiResult<unknown>>(
+    MODULES_API_URL + '/shop/merchant-category/batch',
+    {
+      data
+    }
+  );
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 根据id查询商家分类
+ */
+export async function getMerchantCategory(id: number) {
+  const res = await request.get<ApiResult<MerchantCategory>>(
+    MODULES_API_URL + '/shop/merchant-category/' + id
+  );
+  if (res.data.code === 0 && res.data.data) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
--- a/src/api/shop/merchantCategory/model/index.ts
+++ b/src/api/shop/merchantCategory/model/index.ts
@@ -0,0 +1,47 @@
+import type { PageParam } from '@/api';
+
+/**
+ * 商家分类
+ */
+export interface MerchantCategory {
+  // 商品分类ID
+  categoryId?: number;
+  // 分类名称
+  title?: string;
+  // 类型 0商家分类
+  type?: number;
+  // 分类图片
+  image?: string;
+  // 上级分类ID
+  parentId?: number;
+  // 用户ID
+  userId?: number;
+  // 商品数量
+  count?: number;
+  // 排序(数字越小越靠前)
+  sortNumber?: number;
+  // 备注
+  comments?: string;
+  // 是否隐藏, 0否, 1是(仅注册路由不显示在左侧菜单)
+  hide?: number;
+  // 状态, 0正常, 1禁用
+  status?: number;
+  // 是否删除, 0否, 1是
+  deleted?: number;
+  // 租户id
+  tenantId?: number;
+  // 注册时间
+  createTime?: string;
+  // 修改时间
+  updateTime?: string;
+  children?: MerchantCategory[]
+}
+
+/**
+ * 商家分类搜索条件
+ */
+export interface MerchantCategoryParam extends PageParam {
+  categoryId?: number;
+  parentId?: number | null;
+  keywords?: string;
+}
--- a/src/components/SelectFile/components/select-data.vue
+++ b/src/components/SelectFile/components/select-data.vue
@@ -24,14 +24,41 @@
                                v-if="type == 'video'"
                                :show-upload-list="false"
                                :customRequest="onUpload"
+                                :accept="'.mp4'"
                            >
                                <a-button type="primary" class="ele-btn-icon">
                                    <template #icon>
-                    <UploadOutlined />
+                                        <UploadOutlined/>
                                    </template>
                                    <span>上传视频</span>
                                </a-button>
                            </a-upload>
+                            <a-upload
+                                v-else-if="type == 'audio'"
+                                :show-upload-list="false"
+                                :customRequest="onUpload"
+                                :accept="'.mp3'"
+                            >
+                                <a-button type="primary" class="ele-btn-icon">
+                                    <template #icon>
+                                        <UploadOutlined/>
+                                    </template>
+                                    <span>上传音频</span>
+                                </a-button>
+                            </a-upload>
+                            <a-upload
+                                v-else-if="type == 'file'"
+                                :show-upload-list="false"
+                                :customRequest="onUpload"
+                                :accept="'.xls,.xlsx,.pdf,.doc,.docx'"
+                            >
+                                <a-button type="primary" class="ele-btn-icon">
+                                    <template #icon>
+                                        <UploadOutlined/>
+                                    </template>
+                                    <span>上传文件</span>
+                                </a-button>
+                            </a-upload>
                            <a-upload
                                v-else
                                :show-upload-list="false"
@@ -40,7 +67,7 @@
                            >
                                <a-button type="primary" class="ele-btn-icon">
                                    <template #icon>
-                    <UploadOutlined />
+                                        <UploadOutlined/>
                                    </template>
                                    <span>上传图片</span>
                                </a-button>
@@ -68,7 +95,8 @@
                    <a-button
                        style="margin-right: 20px"
                        @click="openUrl('/cms/photo/dict')"
-            >管理分组</a-button
+                    >管理分组
+                    </a-button
                    >
                </div>
            </template>
@@ -99,44 +127,50 @@
                <template v-if="column.dataIndex === 'name'">
                    <a-space class="ele-cell" style="display: flex">
                        <span>{{ record.name }}</span>
-            <EditOutlined title="编辑" @click="openEdit(record)" />
+                        <EditOutlined title="编辑" @click="openEdit(record)"/>
                    </a-space>
                </template>
                <template v-if="column.key === 'action'">
                    <template v-if="pageId == record.pageId">
-            <a-radio v-model:checked="checked" @click="onRadio(record)" />
+                        <a-radio v-model:checked="checked" @click="onRadio(record)"/>
                    </template>
                    <template v-else>
+                        <a-space>
                            <lebal>
-                <a-radio @click="onRadio(record)" />
+                                <a-radio @click="onRadio(record)"/>
                                <a class="ele-text-success">选择</a>
                            </lebal>
+                            <a-divider type="vertical"/>
+                            <a class="ele-text-placeholder">编辑</a>
+                            <a-divider type="vertical"/>
+                            <a class="ele-text-placeholder">删除</a>
+                        </a-space>
                    </template>
                </template>
            </template>
        </ele-pro-table>
    </ele-modal>
    <!-- 编辑弹窗 -->
-  <FileRecordEdit v-model:visible="showEdit" :data="current" @done="reload" />
+    <FileRecordEdit v-model:visible="showEdit" :data="current" @done="reload"/>
 </template>

 <script lang="ts" setup>
-  import { ref, watch } from 'vue';
-  import {
+import {ref, watch} from 'vue';
+import {
    ColumnItem,
    DatasourceFunction
-  } from 'ele-admin-pro/es/ele-pro-table/types';
-  import { pageFiles, uploadOss, uploadOssByGroupId } from '@/api/system/file';
-  import { EleProTable, messageLoading } from 'ele-admin-pro';
-  import { FileRecord, FileRecordParam } from '@/api/system/file/model';
-  import { EditOutlined, UploadOutlined } from '@ant-design/icons-vue';
-  import { DictData } from '@/api/system/dict-data/model';
-  import { pageDictData } from '@/api/system/dict-data';
-  import {isImage, openNew, openUrl} from '@/utils/common';
-  import { message } from 'ant-design-vue/es';
-  import FileRecordEdit from './file-record-edit.vue';
+} from 'ele-admin-pro/es/ele-pro-table/types';
+import {pageFiles, uploadOss, uploadOssByGroupId} from '@/api/system/file';
+import {EleProTable, messageLoading} from 'ele-admin-pro';
+import {FileRecord, FileRecordParam} from '@/api/system/file/model';
+import {EditOutlined, UploadOutlined} from '@ant-design/icons-vue';
+import {DictData} from '@/api/system/dict-data/model';
+import {pageDictData} from '@/api/system/dict-data';
+import {isImage, openUrl} from '@/utils/common';
+import {message} from 'ant-design-vue/es';
+import FileRecordEdit from './file-record-edit.vue';

-  const props = defineProps<{
+const props = defineProps<{
    // 弹窗是否打开
    visible: boolean;
    // 标题
@@ -145,32 +179,32 @@
    type?: string;
    // 修改回显的数据
    data?: FileRecord | null;
-  }>();
+}>();

-  const emit = defineEmits<{
+const emit = defineEmits<{
    (e: 'done', data: FileRecord): void;
    (e: 'update:visible', visible: boolean): void;
-  }>();
+}>();

-  /* 更新visible */
-  const updateVisible = (value: boolean) => {
+/* 更新visible */
+const updateVisible = (value: boolean) => {
    emit('update:visible', value);
-  };
+};

-  // 搜索内容
-  const searchText = ref(null);
-  const pageId = ref<number>(0);
-  const checked = ref<boolean>(true);
-  const groupList = ref<DictData[]>();
-  const showEdit = ref<boolean>(false);
-  const current = ref<FileRecord | null>();
-  const dictDataId = ref<any>(undefined);
+// 搜索内容
+const searchText = ref(null);
+const pageId = ref<number>(0);
+const checked = ref<boolean>(true);
+const groupList = ref<DictData[]>();
+const showEdit = ref<boolean>(false);
+const current = ref<FileRecord | null>();
+const dictDataId = ref<any>(undefined);

-  // 表格实例
-  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+// 表格实例
+const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);

-  // 表格配置
-  const columns = ref<ColumnItem[]>([
+// 表格配置
+const columns = ref<ColumnItem[]>([
    {
        title: 'ID',
        dataIndex: 'id'
@@ -189,7 +223,7 @@
        title: '大小',
        dataIndex: 'length',
        key: 'length',
-      customRender: ({ text }) => {
+        customRender: ({text}) => {
            if (text < 1024) {
                return text + 'B';
            } else if (text < 1024 * 1024) {
@@ -206,10 +240,10 @@
        key: 'action',
        align: 'center'
    }
-  ]);
+]);

-  // 表格数据源
-  const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
+// 表格数据源
+const datasource: DatasourceFunction = ({page, limit, where, orders}) => {
    where = {};
    // 搜索条件
    if (searchText.value) {
@@ -218,27 +252,49 @@
    if (dictDataId.value) {
        where.groupId = dictDataId.value;
    }
+    if (props.type) {
+        let contentTypes = ''
+        switch (props.type) {
+            case 'audio' : {
+                contentTypes = 'audio/mpeg';
+            }
+                break;
+            case 'file' : {
+                contentTypes = 'application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/pdf,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
+            }
+                break;
+            case 'video' : {
+                contentTypes = 'video/mp4';
+            }
+                break;
+            default : {
+                contentTypes = 'image/jpeg,image/png,image/jpg';
+            }
+                break;
+        }
+        where.contentTypes = contentTypes;
+    }
    return pageFiles({
        ...where,
        ...orders,
        page,
        limit
    });
-  };
+};

-  /* 搜索 */
-  const reload = (where?: FileRecordParam) => {
-    tableRef?.value?.reload({ page: 1, where });
-  };
+/* 搜索 */
+const reload = (where?: FileRecordParam) => {
+    tableRef?.value?.reload({page: 1, where});
+};

-  const onRadio = (record: FileRecord) => {
+const onRadio = (record: FileRecord) => {
    pageId.value = Number(record.id);
    updateVisible(false);
    emit('done', record);
-  };
+};

-  const getGroupList = () => {
-    pageDictData({ dictCode: 'groupId' }).then((res) => {
+const getGroupList = () => {
+    pageDictData({dictCode: 'groupId'}).then((res) => {
        groupList.value = res?.list.map((d) => {
            return {
                label: d.dictDataName,
@@ -246,17 +302,17 @@
            };
        });
    });
-  };
+};

-  const onGroupId = (index: number) => {
+const onGroupId = (index: number) => {
    dictDataId.value = index;
    reload();
-  };
+};

-  // 上传文件
-  const onUpload = (item) => {
-    const { file } = item;
-    if (!file.type.startsWith('image') && props.type != 'video') {
+// 上传文件
+const onUpload = (item) => {
+    const {file} = item;
+    if (!file.type.startsWith('image') && props.type && !['video', 'audio', 'file'].includes(props.type)) {
        message.error('只能选择图片');
        return;
    }
@@ -265,6 +321,11 @@
            message.error('大小不能超过 100MB');
            return;
        }
+    } else if (props.type == 'audio') {
+        if (file.size / 1024 / 1024 > 20) {
+            message.error('大小不能超过 20MB');
+            return;
+        }
    } else {
        if (file.size / 1024 / 1024 > 10) {
            message.error('大小不能超过 10MB');
@@ -299,15 +360,15 @@
                hide();
            });
    }
-  };
+};

-  const openEdit = (row?: FileRecord) => {
+const openEdit = (row?: FileRecord) => {
    current.value = row ?? null;
    showEdit.value = true;
-  };
+};

-  /* 自定义行属性 */
-  const customRow = (record: FileRecord) => {
+/* 自定义行属性 */
+const customRow = (record: FileRecord) => {
    return {
        // 行点击事件
        // onClick: () => {
@@ -320,14 +381,14 @@
            emit('done', record);
        }
    };
-  };
+};

-  watch(
+watch(
    () => props.visible,
    (visible) => {
        if (visible) {
            getGroupList();
        }
    }
-  );
+);
 </script>
--- a/src/components/SelectFile/index.vue
+++ b/src/components/SelectFile/index.vue
@@ -1,38 +1,51 @@
 <template>
-  <a-image-preview-group>
-    <a-space>
+  <a-space style="display: flex;
+        align-items: center;
+        justify-content: flex-start;flex-wrap: wrap">
    <template v-for="(item, index) in data" :key="index">
-        <div class="image-upload-item" v-if="isImage(item.url)">
+      <video v-if="type === 'video'" :src="item.url" style="width: 400px; height: 200px" controls="controls"></video>
+      <a-tag :key="item.url" closable @close="onDeleteItem(index)"
+             @click.native="open(item.url)" style="cursor: pointer"
+             v-else-if="type && ['audio', 'file'].includes(type)"> {{ item.url }}
+      </a-tag>
+      <div class="image-upload-item" v-else>
+        <a-image-preview-group>
          <a-image
-            :style="{
-              border: '1px dashed var(--grey-7)',
-              width: width + 'px',
-              height: height + 'px'
-            }"
+            :width="width"
+            :height="width"
+            style="border: 1px dashed var(--grey-7)"
            :src="item.url"
          />
          <a class="image-upload-close" @click="onDeleteItem(index)">
-            <CloseOutlined />
-          </a>
-        </div>
-        <div v-else class="image-upload-item">
-          <YoutubeOutlined />
-          <a class="image-upload-close" @click="onDeleteItem(index)">
-            <CloseOutlined />
+            <CloseOutlined/>
          </a>
+        </a-image-preview-group>
      </div>
    </template>
+    <template v-if="type === 'video'">
+      <a-button type="primary"
+                @click="openEdit"
+                v-if="data?.length < limit">
+        选择视频
+      </a-button>
+    </template>
+    <template v-else-if="type === 'audio'">
+      <a-button type="primary"
+                @click="openEdit"
+                v-if="data?.length < limit">
+        选择音频
+      </a-button>
+    </template>
+    <template v-else>
      <a-button
        @click="openEdit"
-        v-if="data?.length < limit"
-        :style="{ width: width + 'px', height: height + 'px' }"
+        v-if="data?.length < limit || limit === -1"
        class="select-picture-btn ele-text-placeholder"
      >
-        <PlusOutlined />
+        <PlusOutlined/>
      </a-button>
+    </template>
  </a-space>
-  </a-image-preview-group>
-
  <!-- 选择弹窗 -->
  <SelectData
    v-model:visible="showEdit"
@@ -44,18 +57,16 @@
 </template>

 <script lang="ts" setup>
-  import { PlusOutlined, CloseOutlined, YoutubeOutlined } from '@ant-design/icons-vue';
-  import { ref } from 'vue';
-  import SelectData from './components/select-data.vue';
-  import { FileRecord } from '@/api/system/file/model';
-  import { isImage } from "@/utils/common";
+import {PlusOutlined, CloseOutlined} from '@ant-design/icons-vue';
+import {ref} from 'vue';
+import SelectData from './components/select-data.vue';
+import {FileRecord} from '@/api/system/file/model';

-  const props = withDefaults(
+const props = withDefaults(
  defineProps<{
    value?: any;
    data?: any[];
    width?: number;
-      height?: number;
    type?: string;
    limit?: number;
    placeholder?: string;
@@ -64,51 +75,60 @@
  {
    placeholder: '请选择数据',
    width: 80,
-      height: 80,
    limit: 1
  }
-  );
+);

-  const emit = defineEmits<{
+const emit = defineEmits<{
  (e: 'done', data: FileRecord): void;
  (e: 'del', index: number): void;
  (e: 'clear'): void;
-  }>();
+}>();

-  // 是否显示编辑弹窗
-  const showEdit = ref(false);
-  // 当前编辑数据
-  const current = ref<FileRecord | null>(null);
+// 是否显示编辑弹窗
+const showEdit = ref(false);
+// 当前编辑数据
+const current = ref<FileRecord | null>(null);

-  /* 打开编辑弹窗 */
-  const openEdit = (row?: FileRecord) => {
+/* 打开编辑弹窗 */
+const openEdit = (row?: FileRecord) => {
  current.value = row ?? null;
  showEdit.value = true;
-  };
+};

-  const onChange = (row) => {
+const onChange = (row) => {
  row.index = props.index;
  emit('done', row);
-  };
+};

-  const onDeleteItem = (index: number) => {
+const onDeleteItem = (index: number) => {
  emit('del', index);
-  };
+};
+
+const open = (url: string) => {
+  if (['docx', 'doc', 'xlsx', 'xls', 'pdf'].includes(url.split('.').pop()!)) {
+    window.open(`https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(url)}`);
+  } else window.open(url)
+}
 </script>
 <style lang="less" scoped>
-  .select-picture-btn {
+.select-picture-btn {
  background-color: var(--grey-9);
  border: 1px dashed var(--border-color-base);
+  width: 80px;
+  height: 80px;
  font-size: 16px;
-  }
-  //.ant-image-img {
-  //  width: 100px !important;
-  //  height: 100px !important;
-  //}
-  .image-upload-item {
+}
+
+//.ant-image-img {
+//  width: 100px !important;
+//  height: 100px !important;
+//}
+.image-upload-item {
  position: relative;
-  }
-  .image-upload-close {
+}
+
+.image-upload-close {
  width: 18px;
  height: 18px;
  color: rgb(255, 255, 255);
@@ -128,8 +148,9 @@
  //display: flex;
  //justify-content: center;
  //align-items: center;
-  }
-  .image-upload-close:hover {
+}
+
+.image-upload-close:hover {
  background-color: var(--red-6);
-  }
+}
 </style>
--- a/src/main.ts
+++ b/src/main.ts
@@ -5,6 +5,7 @@ import router from './router';
 import permission from './utils/permission';
 import i18n from './i18n';
 import './styles/index.less';
+import '@cyhnkckali/vue3-color-picker/dist/style.css';

 const app = createApp(App);

--- a/src/views/cms/ad/components/ad-edit.vue
+++ b/src/views/cms/ad/components/ad-edit.vue
@@ -146,51 +146,51 @@
 </template>

 <script lang="ts" setup>
-  import { ref, reactive, watch } from 'vue';
-  import { Form, message } from 'ant-design-vue';
-  import { assignObject } from 'ele-admin-pro';
-  import { addAd, updateAd } from '@/api/cms/ad';
-  import { Ad } from '@/api/cms/ad/model';
-  import { useThemeStore } from '@/store/modules/theme';
-  import { storeToRefs } from 'pinia';
-  import { FormInstance, type Rule } from 'ant-design-vue/es/form';
-  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
-  import { uploadFile } from '@/api/system/file';
-  import { FileRecord } from '@/api/system/file/model';
-  import { Design } from '@/api/cms/design/model';
-  import { getMerchantId } from '@/utils/merchant';
+import {ref, reactive, watch} from 'vue';
+import {Form, message} from 'ant-design-vue';
+import {assignObject} from 'ele-admin-pro';
+import {addAd, updateAd} from '@/api/cms/ad';
+import {Ad} from '@/api/cms/ad/model';
+import {useThemeStore} from '@/store/modules/theme';
+import {storeToRefs} from 'pinia';
+import {FormInstance, type Rule} from 'ant-design-vue/es/form';
+import {ItemType} from 'ele-admin-pro/es/ele-image-upload/types';
+import {uploadFile} from '@/api/system/file';
+import {FileRecord} from '@/api/system/file/model';
+import {Design} from '@/api/cms/design/model';
+import {getMerchantId} from '@/utils/merchant';

-  // 是否是修改
-  const isUpdate = ref(false);
-  const useForm = Form.useForm;
-  // 是否开启响应式布局
-  const themeStore = useThemeStore();
-  const { styleResponsive } = storeToRefs(themeStore);
+// 是否是修改
+const isUpdate = ref(false);
+const useForm = Form.useForm;
+// 是否开启响应式布局
+const themeStore = useThemeStore();
+const {styleResponsive} = storeToRefs(themeStore);

-  const props = defineProps<{
+const props = defineProps<{
  // 弹窗是否打开
  visible: boolean;
  // 修改回显的数据
  data?: Ad | null;
-  }>();
+}>();

-  const emit = defineEmits<{
+const emit = defineEmits<{
  (e: 'done'): void;
  (e: 'update:visible', visible: boolean): void;
-  }>();
+}>();

-  // 提交状态
-  const loading = ref(false);
-  // 已上传数据
-  const images = ref<ItemType[]>([]);
-  const pathList = ref<any[]>([]);
-  // 是否显示最大化切换按钮
-  const maxable = ref(true);
-  // 表格选中数据
-  const formRef = ref<FormInstance | null>(null);
+// 提交状态
+const loading = ref(false);
+// 已上传数据
+const images = ref<ItemType[]>([]);
+const pathList = ref<any[]>([]);
+// 是否显示最大化切换按钮
+const maxable = ref(true);
+// 表格选中数据
+const formRef = ref<FormInstance | null>(null);

-  // 用户信息
-  const form = reactive<Ad>({
+// 用户信息
+const form = reactive<Ad>({
  adId: undefined,
  name: '',
  adType: '图片广告',
@@ -205,15 +205,15 @@
  pageName: '',
  pageId: undefined,
  merchantId: undefined
-  });
+});

-  /* 更新visible */
-  const updateVisible = (value: boolean) => {
+/* 更新visible */
+const updateVisible = (value: boolean) => {
  emit('update:visible', value);
-  };
+};

-  // 表单验证规则
-  const rules = reactive({
+// 表单验证规则
+const rules = reactive({
  adType: [
    {
      required: true,
@@ -238,12 +238,12 @@
      }
    }
  ]
-  });
+});

-  const { resetFields } = useForm(form, rules);
+const {resetFields} = useForm(form, rules);

-  /* 上传事件 */
-  const uploadHandler = (file: File) => {
+/* 上传事件 */
+const uploadHandler = (file: File) => {
  const item: ItemType = {
    file,
    uid: (file as any).uid,
@@ -263,11 +263,11 @@
  }

  onUpload(item);
-  };
+};

-  // 上传文件
-  const onUpload = (item: any) => {
-    const { file } = item;
+// 上传文件
+const onUpload = (item: any) => {
+  const {file} = item;
  uploadFile(file)
    .then((data) => {
      images.value.push({
@@ -282,29 +282,29 @@
    .catch((e) => {
      message.error(e.message);
    });
-  };
+};

-  const chooseFile = (data: FileRecord) => {
+const chooseFile = (data: FileRecord) => {
  images.value.push({
    uid: data.id,
    url: data.downloadUrl,
    status: 'done'
  });
  form.images = data.downloadUrl;
-  };
+};

-  const onDeleteItem = (index: number) => {
+const onDeleteItem = (index: number) => {
  images.value.splice(index, 1);
  form.images = '';
-  };
+};

-  const choosePageId = (data: Design) => {
+const choosePageId = (data: Design) => {
  form.pageName = data.name;
  form.pageId = data.pageId;
-  };
+};

-  /* 保存编辑 */
-  const save = () => {
+/* 保存编辑 */
+const save = () => {
  if (!formRef.value) {
    return;
  }
@@ -332,10 +332,12 @@
          message.error(e.message);
        });
    })
-      .catch(() => {});
-  };
+    .catch(() => {
+    });
+};

-  watch(
+
+watch(
  () => props.visible,
  (visible) => {
    if (visible) {
@@ -343,6 +345,7 @@
        assignObject(form, props.data);
        images.value = [];
        pathList.value = [];
+
        if (props.data.images) {
          const arr = JSON.parse(props.data.images);
          arr.map((d) => {
@@ -367,24 +370,27 @@
      resetFields();
    }
  },
-    { immediate: true }
-  );
+  {immediate: true}
+);
 </script>
 <style lang="less">
-  .tab-pane {
+.tab-pane {
  min-height: 300px;
-  }
-  .ml-10 {
+}
+
+.ml-10 {
  margin-left: 5px;
-  }
-  .upload-text {
+}
+
+.upload-text {
  margin-right: 70px;
-  }
-  .icon-bg {
+}
+
+.icon-bg {
  width: 50px;
  height: 50px;
  display: block;
  border-radius: 50px;
  background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(6.123233995736766e-17%2C%201%2C%20-0.024693877551020406%2C%206.123233995736766e-17%2C%200.5%2C%200)%22%3E%3Cstop%20stop-color%3D%22%230a060d%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23660061%22%20stop-opacity%3D%221%22%20offset%3D%220.95%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E');
-  }
+}
 </style>
--- a/src/views/cms/mpAd/components/mpAdEdit.vue
+++ b/src/views/cms/mpAd/components/mpAdEdit.vue
@@ -94,6 +94,22 @@
          />
        </template>
      </a-form-item>
+      <a-form-item label="图标背景色" v-if="data && data.adId === 278">
+        <div class="flex justify-start items-start flex-wrap">
+          <div class="flex flex-col justify-center items-center" v-for="(item, index) in colors" :key="index">
+            <div
+              @click="changeShowColorPicker(index)"
+              class=" w-10 h-10 rounded-full m-2 cursor-pointer border-2 border-solid flex justify-center items-center text-red-600"
+              :class="[item ? 'border-none' : 'border-red-300']"
+              :style="{backgroundColor: item ?? 'red'}"
+            >{{ item ? '' : '选色' }}
+            </div>
+            <span v-if="item" class="text-sm cursor-pointer" @click="clearColor(index)">清除</span>
+          </div>
+        </div>
+        <Vue3ColorPicker v-if="showColorPicker" v-model="colors[showColorPickerIndex]" mode="solid"
+                         :showColorList="false" :showEyeDrop="false" type="RGBA"/>
+      </a-form-item>
      <a-form-item label="标题" name="name">
        <a-input
          allow-clear
@@ -130,70 +146,72 @@
 </template>

 <script lang="ts" setup>
-  import { ref, reactive, watch } from 'vue';
-  import { Form, message } from 'ant-design-vue';
-  import { assignObject } from 'ele-admin-pro';
-  import { addMpAd, updateMpAd } from '@/api/cms/mpAd';
-  import { MpAd } from '@/api/cms/mpAd/model';
-  import { useThemeStore } from '@/store/modules/theme';
-  import { storeToRefs } from 'pinia';
-  import { FormInstance, type Rule, RuleObject } from 'ant-design-vue/es/form';
-  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
-  import { FileRecord } from '@/api/system/file/model';
-  import { MpPages } from '@/api/cms/mpPages/model';
+import {ref, reactive, watch} from 'vue';
+import {Form, message} from 'ant-design-vue';
+import {assignObject} from 'ele-admin-pro';
+import {addMpAd, updateMpAd} from '@/api/cms/mpAd';
+import {MpAd} from '@/api/cms/mpAd/model';
+import {useThemeStore} from '@/store/modules/theme';
+import {storeToRefs} from 'pinia';
+import {FormInstance, type Rule, RuleObject} from 'ant-design-vue/es/form';
+import {ItemType} from 'ele-admin-pro/es/ele-image-upload/types';
+import {FileRecord} from '@/api/system/file/model';
+import {MpPages} from '@/api/cms/mpPages/model';
+import {Vue3ColorPicker} from "@cyhnkckali/vue3-color-picker";

-  // 是否是修改
-  const isUpdate = ref(false);
-  const useForm = Form.useForm;
-  // 是否开启响应式布局
-  const themeStore = useThemeStore();
-  const { styleResponsive } = storeToRefs(themeStore);
+// 是否是修改
+const isUpdate = ref(false);
+const useForm = Form.useForm;
+// 是否开启响应式布局
+const themeStore = useThemeStore();
+const {styleResponsive} = storeToRefs(themeStore);

-  const props = defineProps<{
+const props = defineProps<{
  // 弹窗是否打开
  visible: boolean;
  // 修改回显的数据
  data?: MpAd | null;
-  }>();
+}>();

-  const emit = defineEmits<{
+const emit = defineEmits<{
  (e: 'done'): void;
  (e: 'update:visible', visible: boolean): void;
-  }>();
+}>();

-  // 提交状态
-  const loading = ref(false);
-  // 已上传数据
-  const images = ref<ItemType[]>([]);
-  const pathList = ref<any[]>([]);
-  // 是否显示最大化切换按钮
-  const maxable = ref(true);
-  // 表格选中数据
-  const formRef = ref<FormInstance | null>(null);
+// 提交状态
+const loading = ref(false);
+// 已上传数据
+const images = ref<ItemType[]>([]);
+const pathList = ref<any[]>([]);
+// 是否显示最大化切换按钮
+const maxable = ref(true);
+// 表格选中数据
+const formRef = ref<FormInstance | null>(null);

-  // 用户信息
-  const form = reactive<MpAd>({
+// 用户信息
+const form = reactive<MpAd>({
  adId: undefined,
  pageId: 0,
  pageName: '',
  name: '',
  adType: '图片广告',
  images: '',
+  colors: '',
  width: '',
  height: '',
  path: '',
  status: 0,
  comments: '',
  sortNumber: 100
-  });
+});

-  /* 更新visible */
-  const updateVisible = (value: boolean) => {
+/* 更新visible */
+const updateVisible = (value: boolean) => {
  emit('update:visible', value);
-  };
+};

-  // 表单验证规则
-  const rules = reactive({
+// 表单验证规则
+const rules = reactive({
  adType: [
    {
      required: true,
@@ -218,31 +236,33 @@
      }
    }
  ]
-  });
+});

-  const { resetFields } = useForm(form, rules);
+const {resetFields} = useForm(form, rules);

-  const chooseFile = (data: FileRecord) => {
+const chooseFile = (data: FileRecord) => {
  images.value.push({
    uid: data.id,
    url: data.downloadUrl,
    status: 'done'
  });
  form.images = data.downloadUrl;
-  };
+  colors.value.push('')
+};

-  const onDeleteItem = (index: number) => {
+const onDeleteItem = (index: number) => {
  images.value.splice(index, 1);
+  colors.value.splice(index, 1);
  form.images = '';
-  };
+};

-  const choosePageId = (data: MpPages) => {
+const choosePageId = (data: MpPages) => {
  form.pageName = data.title;
  form.pageId = data.id;
-  };
+};

-  /* 保存编辑 */
-  const save = () => {
+/* 保存编辑 */
+const save = () => {
  if (!formRef.value) {
    return;
  }
@@ -253,6 +273,7 @@
      const formData = {
        ...form,
        images: JSON.stringify(images.value),
+        colors: JSON.stringify(colors.value),
        path:
          form.adType == '幻灯片' ? JSON.stringify(pathList.value) : form.path
      };
@@ -269,10 +290,27 @@
          message.error(e.message);
        });
    })
-      .catch(() => {});
-  };
+    .catch(() => {
+    });
+};

-  watch(
+const colors = ref<string[]>([])
+const showColorPicker = ref(false)
+const showColorPickerIndex = ref<number>(-1)
+const changeShowColorPicker = (index: number) => {
+  if (showColorPickerIndex.value === index) showColorPicker.value = !showColorPicker.value
+  else {
+    showColorPickerIndex.value = index
+    showColorPicker.value = true
+  }
+}
+
+const clearColor = (index) => {
+  showColorPicker.value = false
+  colors.value[index] = ''
+}
+
+watch(
  () => props.visible,
  (visible) => {
    if (visible) {
@@ -280,6 +318,7 @@
        assignObject(form, props.data);
        images.value = [];
        pathList.value = [];
+        colors.value = []
        if (props.data.images) {
          const arr = JSON.parse(props.data.images);
          arr.map((d) => {
@@ -290,6 +329,14 @@
            });
          });
        }
+        if (props.data.colors) {
+          colors.value = JSON.parse(props.data.colors);
+        } else {
+          colors.value = []
+          for (let i = 0; i < images.value.length; i++) {
+            colors.value.push('')
+          }
+        }
        if (props.data.adType == '幻灯片') {
          const arr = JSON.parse(props.data.path);
          arr.map((d) => {
@@ -305,24 +352,27 @@
      resetFields();
    }
  },
-    { immediate: true }
-  );
+  {immediate: true}
+);
 </script>
 <style lang="less">
-  .tab-pane {
+.tab-pane {
  min-height: 300px;
-  }
-  .ml-10 {
+}
+
+.ml-10 {
  margin-left: 5px;
-  }
-  .upload-text {
+}
+
+.upload-text {
  margin-right: 70px;
-  }
-  .icon-bg {
+}
+
+.icon-bg {
  width: 50px;
  height: 50px;
  display: block;
  border-radius: 50px;
  background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(6.123233995736766e-17%2C%201%2C%20-0.024693877551020406%2C%206.123233995736766e-17%2C%200.5%2C%200)%22%3E%3Cstop%20stop-color%3D%22%230a060d%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23660061%22%20stop-opacity%3D%221%22%20offset%3D%220.95%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E');
-  }
+}
 </style>
--- a/src/views/cms/mpAd/index.vue
+++ b/src/views/cms/mpAd/index.vue
@@ -41,7 +41,7 @@
              <a-space>
                <a @click="openEdit(record)">修改</a>
                <a-divider type="vertical" />
-                <a-popconfirm
+                <a-popconfirm v-if="record.adId !== 278"
                  title="确定要删除此记录吗？"
                  @confirm="remove(record)"
                >
--- a/src/views/shop/goods/components/goodsEdit.vue
+++ b/src/views/shop/goods/components/goodsEdit.vue
@@ -27,13 +27,15 @@
                :type="form.type == 1 ? 'primary' : ''"
                @click="onType(1)"
                :ghost="form.type == 1"
-                >实物商品</a-button
+              >实物商品
+              </a-button
              >
              <a-button
                :type="form.type == 2 ? 'primary' : ''"
                @click="onType(2)"
                :ghost="form.type == 2"
-                >虚拟商品</a-button
+              >虚拟商品
+              </a-button
              >
            </a-space>
            <div class="ele-text-placeholder">
@@ -161,7 +163,8 @@
              @del="onDeleteItem"
            />
            <div class="ele-text-placeholder"
-              >支持上传视频（mp4格式），视频时长不超过60秒，视频大小不超过200M。</div
+            >支持上传视频（mp4格式），视频时长不超过60秒，视频大小不超过200M。
+            </div
            >
          </a-form-item>
          <a-form-item label="轮播图" name="files">
@@ -236,10 +239,12 @@
              </a-card>
              <a-space v-if="spec.length > 0">
                <a-button type="primary" class="mt-5" @click="openSpecForm"
-                >添加新规格</a-button
+                >添加新规格
+                </a-button
                >
                <a-button type="primary" class="mt-5" @click="generateSku"
-                >生成SKU</a-button
+                >生成SKU
+                </a-button
                >
              </a-space>
            </a-space>
@@ -268,16 +273,16 @@
                      />
                    </template>
                    <template v-if="column.key === 'price'">
-                      <a-input :placeholder="`成本价`" v-model:value="skuList[index].price" />
+                      <a-input :placeholder="`成本价`" v-model:value="skuList[index].price"/>
                    </template>
                    <template v-if="column.key === 'salePrice'">
-                      <a-input :placeholder="`售价`" v-model:value="record.salePrice" />
+                      <a-input :placeholder="`售价`" v-model:value="record.salePrice"/>
                    </template>
                    <template v-if="column.key === 'stock'">
-                      <a-input :placeholder="`库存`" v-model:value="record.stock" />
+                      <a-input :placeholder="`库存`" v-model:value="record.stock"/>
                    </template>
                    <template v-if="column.key === 'skuNo'">
-                      <a-input :placeholder="`编码`" v-model:value="record.skuNo" />
+                      <a-input :placeholder="`编码`" v-model:value="record.skuNo"/>
                    </template>
                  </template>
                </a-table>
@@ -286,6 +291,16 @@
          </a-form-item>
        </a-tab-pane>
        <a-tab-pane tab="商品详情" key="content">
+<!--          <a-form-item label="视频">-->
+<!--            <SelectFile-->
+<!--              type="video"-->
+<!--              :placeholder="`请选择商品视频`"-->
+<!--              :limit="1"-->
+<!--              :data="videos || []"-->
+<!--              @done="chooseVideo"-->
+<!--              @del="onDeleteVideo"-->
+<!--            />-->
+<!--          </a-form-item>-->
          <a-form-item name="content">
            <!-- 编辑器 -->
            <tinymce-editor
@@ -353,73 +368,73 @@
 </template>

 <script lang="ts" setup>
-  import { CloseCircleOutlined } from '@ant-design/icons-vue';
-  import { ref, reactive, watch } from 'vue';
-  import { Form, message } from 'ant-design-vue';
-  import { assignObject, uuid } from 'ele-admin-pro';
-  import { addGoods, updateGoods } from "@/api/shop/goods";
-  import { Goods } from '@/api/shop/goods/model';
-  import { useThemeStore } from '@/store/modules/theme';
-  import { storeToRefs } from 'pinia';
-  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
-  import { FormInstance, RuleObject } from 'ant-design-vue/es/form';
-  import { FileRecord } from '@/api/system/file/model';
-  import { Merchant } from '@/api/shop/merchant/model';
-  import TinymceEditor from '@/components/TinymceEditor/index.vue';
-  import { uploadFile, uploadOss } from "@/api/system/file";
-  import { SpecValue } from "@/api/shop/specValue/model";
-  import { Spec } from "@/api/shop/spec/model";
-  import { GoodsSku } from "@/api/shop/goodsSku/model";
-  import { GoodsSpec } from "@/api/shop/goodsSpec/model";
-  import { generateGoodsSku, listGoodsSku } from "@/api/shop/goodsSku";
-  import { listGoodsSpec } from "@/api/shop/goodsSpec";
-  import { GoodsCategory } from "@/api/shop/goodsCategory/model";
-  import { listGoodsCategory } from "@/api/shop/goodsCategory";
-  import { getMerchantId } from "@/utils/merchant";
+import {CloseCircleOutlined} from '@ant-design/icons-vue';
+import {ref, reactive, watch} from 'vue';
+import {Form, message} from 'ant-design-vue';
+import {assignObject, uuid} from 'ele-admin-pro';
+import {addGoods, updateGoods} from "@/api/shop/goods";
+import {Goods} from '@/api/shop/goods/model';
+import {useThemeStore} from '@/store/modules/theme';
+import {storeToRefs} from 'pinia';
+import {ItemType} from 'ele-admin-pro/es/ele-image-upload/types';
+import {FormInstance, RuleObject} from 'ant-design-vue/es/form';
+import {FileRecord} from '@/api/system/file/model';
+import {Merchant} from '@/api/shop/merchant/model';
+import TinymceEditor from '@/components/TinymceEditor/index.vue';
+import {uploadFile, uploadOss} from "@/api/system/file";
+import {SpecValue} from "@/api/shop/specValue/model";
+import {Spec} from "@/api/shop/spec/model";
+import {GoodsSku} from "@/api/shop/goodsSku/model";
+import {GoodsSpec} from "@/api/shop/goodsSpec/model";
+import {generateGoodsSku, listGoodsSku} from "@/api/shop/goodsSku";
+import {listGoodsSpec} from "@/api/shop/goodsSpec";
+import {GoodsCategory} from "@/api/shop/goodsCategory/model";
+import {listGoodsCategory} from "@/api/shop/goodsCategory";
+import {getMerchantId} from "@/utils/merchant";

-  // 是否是修改
-  const isUpdate = ref(false);
-  const useForm = Form.useForm;
-  // 是否开启响应式布局
-  const themeStore = useThemeStore();
-  const { styleResponsive } = storeToRefs(themeStore);
+// 是否是修改
+const isUpdate = ref(false);
+const useForm = Form.useForm;
+// 是否开启响应式布局
+const themeStore = useThemeStore();
+const {styleResponsive} = storeToRefs(themeStore);

-  const props = defineProps<{
+const props = defineProps<{
  // 弹窗是否打开
  visible: boolean;
  // 修改回显的数据
  data?: Goods | null;
-  }>();
+}>();

-  const emit = defineEmits<{
+const emit = defineEmits<{
  (e: 'done'): void;
  (e: 'update:visible', visible: boolean): void;
-  }>();
+}>();

-  // 提交状态
-  const loading = ref(false);
-  // 是否显示最大化切换按钮
-  const maxable = ref(true);
-  // 表格选中数据
-  const formRef = ref<FormInstance | null>(null);
-  const images = ref<ItemType[]>([]);
-  const content = ref('');
-  const disabled = ref(false);
-  // 当前选项卡
-  const active = ref('base');
+// 提交状态
+const loading = ref(false);
+// 是否显示最大化切换按钮
+const maxable = ref(true);
+// 表格选中数据
+const formRef = ref<FormInstance | null>(null);
+const images = ref<ItemType[]>([]);
+const content = ref('');
+const disabled = ref(false);
+// 当前选项卡
+const active = ref('base');

-  const spec = ref<SpecValue[]>([]);
-  const showSpecForm = ref(false);
-  const name = ref();
-  const value = ref();
-  const skuList = ref<GoodsSku[]>([]);
-  const files = ref<ItemType[]>([]);
-  const goodsSpec = ref<GoodsSpec>();
-  const category = ref<string[]>([]);
-  const takeaway = ref<GoodsCategory[]>([]);
-  const merchantId = getMerchantId();
+const spec = ref<SpecValue[]>([]);
+const showSpecForm = ref(false);
+const name = ref();
+const value = ref();
+const skuList = ref<GoodsSku[]>([]);
+const files = ref<ItemType[]>([]);
+const goodsSpec = ref<GoodsSpec>();
+const category = ref<string[]>([]);
+const takeaway = ref<GoodsCategory[]>([]);
+const merchantId = getMerchantId();

-  const columns = [
+const columns = [
  {
    title: '图片',
    dataIndex: 'image',
@@ -450,15 +465,16 @@
    key: 'skuNo',
    align: 'center',
  },
-  ];
+];

-  // 用户信息
-  const form = reactive<Goods>({
+// 用户信息
+const form = reactive<Goods>({
  goodsId: undefined,
  type: 1,
  code: undefined,
  goodsName: undefined,
  image: undefined,
+  video: undefined,
  content: undefined,
  unitName: '',
  categoryId: undefined,
@@ -486,15 +502,15 @@
  comments: '',
  sortNumber: 100,
  specName: ''
-  });
+});

-  /* 更新visible */
-  const updateVisible = (value: boolean) => {
+/* 更新visible */
+const updateVisible = (value: boolean) => {
  emit('update:visible', value);
-  };
+};

-  // 表单验证规则
-  const rules = reactive({
+// 表单验证规则
+const rules = reactive({
  type: [
    {
      required: true,
@@ -603,39 +619,39 @@
      trigger: 'blur'
    }
  ]
-  });
+});

-  const onType = (index: number) => {
+const onType = (index: number) => {
  form.type = index;
-  };
+};

-  /* 搜索 */
-  const chooseMerchantId = (item: Merchant) => {
+/* 搜索 */
+const chooseMerchantId = (item: Merchant) => {
  form.merchantName = item.merchantName;
  form.merchantId = item.merchantId;
-  };
+};

-  const chooseGoodsCategory = (item: GoodsCategory,value: any) => {
+const chooseGoodsCategory = (item: GoodsCategory, value: any) => {
  form.categoryId = value[1].value;
  form.parentName = value[0].label;
  form.categoryName = value[1].label;
-  }
-  const chooseTakeawayCategory = (item: GoodsCategory, value: any) => {
+}
+const chooseTakeawayCategory = (item: GoodsCategory, value: any) => {
  form.categoryParent = '店铺分类';
  form.categoryChildren = value[0].label;
  form.categoryId = item[0];
-  }
+}

-  const chooseImage = (data: FileRecord) => {
+const chooseImage = (data: FileRecord) => {
  images.value.push({
    uid: data.id,
    url: data.path,
    status: 'done'
  });
  form.image = data.path;
-  };
+};

-  const chooseSkuImage = (data: FileRecord) => {
+const chooseSkuImage = (data: FileRecord) => {
  const index = data?.index;
  skuList.value[index].images?.push({
    uid: uuid(),
@@ -643,22 +659,37 @@
    status: 'done'
  });
  skuList.value[index].image = data.path;
-  }
+}

-  const onDeleteSkuItem = (index: number) => {
+const onDeleteSkuItem = (index: number) => {
  images.value.splice(index, 1);
-  };
+};

-  const onChange = (text: string) => {
+const videos = ref<ItemType[]>([]);
+const chooseVideo = (data: FileRecord) => {
+  videos.value = [{
+    uid: uuid(),
+    url: data.path,
+    status: 'done'
+  }]
+  form.video = data.path;
+}
+
+const onDeleteVideo = (index: number) => {
+  images.value.splice(index, 1);
+  form.video = undefined;
+};
+
+const onChange = (text: string) => {
  // 加载商品多规格
-    if(text == 'spec'){
+  if (text == 'spec') {
    const goodsId = props.data?.goodsId;
-      if(goodsId){
+    if (goodsId) {
      listGoodsSpec({goodsId}).then(data => {

        const specValue = data[0].specValue;
-          if(specValue){
-            spec.value = JSON.parse(specValue).map( d => {
+        if (specValue) {
+          spec.value = JSON.parse(specValue).map(d => {
            console.log(d);
            return {
              value: d.value,
@@ -673,31 +704,31 @@
      })
    }
  }
-  };
+};

-  const onDeleteItem = (index: number) => {
+const onDeleteItem = (index: number) => {
  images.value.splice(index, 1);
  form.image = '';
-  };
+};

-  const onClose = (index) => {
+const onClose = (index) => {
  spec.value.splice(index, 1);
-  };
+};

-  const openSpecForm = () => {
+const openSpecForm = () => {
  showSpecForm.value = !showSpecForm.value;
-  };
+};

-  const onSpec = (row: Spec) => {
+const onSpec = (row: Spec) => {
  form.specName = row.specName;
  goodsSpec.value = row;
-    if(row.specValue){
+  if (row.specValue) {
    spec.value = JSON.parse(row?.specValue);
  }
-  }
+}

-  // 新增规格
-  const addSpecValue = () => {
+// 新增规格
+const addSpecValue = () => {
  if (!name.value || !value.value) {
    message.error(`请输入规格和规格值`);
    return false;
@@ -714,33 +745,33 @@
  name.value = '';
  value.value = '';
  openSpecForm();
-  };
+};

-  const chooseFile = (data: FileRecord) => {
+const chooseFile = (data: FileRecord) => {
  files.value.push({
    uid: data.id,
    url: data.path,
    status: 'done'
  });
-  };
+};

-  const onDeleteFile = (index: number) => {
+const onDeleteFile = (index: number) => {
  files.value.splice(index, 1);
-  };
+};

-  /**
+/**
 * 生成商品SKU列表
 */
-  const generateSku = () => {
+const generateSku = () => {
  generateGoodsSku(spec.value).then(data => {
-      if(data){
+    if (data) {
      skuList.value = data;
    }
  })
-  }
+}

-  const editorRef = ref<InstanceType<typeof TinymceEditor> | null>(null);
-  const config = ref({
+const editorRef = ref<InstanceType<typeof TinymceEditor> | null>(null);
+const config = ref({
  height: 500,
  images_upload_handler: (blobInfo, success, error) => {
    const file = blobInfo.blob();
@@ -752,6 +783,10 @@
      error(msg);
    })
  },
+  video_template_callback: function (data) {
+    console.log(data)
+    return `<video width="${data.width}" height="${data.height}" controls="controls" src="${data.source}"></video>`
+  },
  // 自定义文件上传(这里使用把选择的文件转成 blob 演示)
  file_picker_callback: (callback: any, _value: any, meta: any) => {
    const input = document.createElement('input');
@@ -769,10 +804,10 @@
      }
      if (meta.filetype === 'media') {
        if (file.size / 1024 / 1024 > 200) {
-            editorRef.value?.alert({ content: '大小不能超过 200MB' });
+          editorRef.value?.alert({content: '大小不能超过 200MB'});
          return;
        }
-          if(file.type.startsWith('application/pdf')){
+        if (file.type.startsWith('application/pdf')) {
          uploadOss(file).then(res => {
            const addPath = `<a href="${res.downloadUrl}" target="_blank">${res.name}</a>`;
            content.value = content.value + addPath
@@ -780,7 +815,7 @@
          return;
        }
        if (!file.type.startsWith('video/')) {
-            editorRef.value?.alert({ content: '只能选择视频文件' });
+          editorRef.value?.alert({content: '只能选择视频文件'});
          return;
        }
        uploadOss(file).then(res => {
@@ -790,10 +825,10 @@
    };
    input.click();
  }
-  });
+});

-  /* 粘贴图片上传服务器并插入编辑器 */
-  const onPaste = (e) => {
+/* 粘贴图片上传服务器并插入编辑器 */
+const onPaste = (e) => {
  const items = (e.clipboardData || e.originalEvent.clipboardData).items;
  let hasFile = false;
  for (let i = 0; i < items.length; i++) {
@@ -818,12 +853,12 @@
  if (hasFile) {
    e.preventDefault();
  }
-  }
+}

-  const { resetFields } = useForm(form, rules);
+const {resetFields} = useForm(form, rules);

-  /* 保存编辑 */
-  const save = () => {
+/* 保存编辑 */
+const save = () => {
  if (!formRef.value) {
    return;
  }
@@ -854,16 +889,18 @@
          message.error(e.message);
        });
    })
-      .catch(() => {});
-  };
+    .catch(() => {
+    });
+};

-  watch(
+watch(
  () => props.visible,
  (visible) => {
    if (visible) {
      images.value = [];
      category.value = [];
      files.value = [];
+      videos.value = [];
      if (props.data) {
        assignObject(form, props.data);
        if (props.data.image) {
@@ -873,16 +910,16 @@
            status: 'done'
          });
        }
-          if(props.data.files){
+        if (props.data.files) {
          files.value = JSON.parse(props.data.files);
        }
-          if(props.data.goodsSpecs){
+        if (props.data.goodsSpecs) {
          goodsSpec.value = props.data.goodsSpecs[0];
-            if(props.data.specs == 1){
+          if (props.data.specs == 1) {
            form.specName = props.data.goodsSpecs[0].specName;
          }
        }
-          if(props.data.goodsSkus){
+        if (props.data.goodsSkus) {
          skuList.value = props.data.goodsSkus.map(d => {
            d.images = [];
            d.images.push({
@@ -893,14 +930,21 @@
            return d;
          });
        }
+        if (props.data.video) {
+          videos.value = [{
+            uid: uuid(),
+            url: props.data.video,
+            status: 'done'
+          }]
+        }
        // 商品分类
-          if(props.data.parentName){
+        if (props.data.parentName) {
          category.value.push(props.data.parentName);
        }
-          if(props.data.category){
+        if (props.data.category) {
          category.value = JSON.parse(props.data.category);
        }
-          if (props.data.content){
+        if (props.data.content) {
          content.value = props.data.content;
        }
        // 外卖商品分类
@@ -919,6 +963,6 @@
      resetFields();
    }
  },
-    { immediate: true }
-  );
+  {immediate: true}
+);
 </script>
--- a/src/views/shop/merchant/components/merchantEdit.vue
+++ b/src/views/shop/merchant/components/merchantEdit.vue
@@ -63,6 +63,12 @@
          @done="chooseShopType"
        />
      </a-form-item>
+      <a-form-item label="经营类型" name="merchantCategoryId">
+        <a-cascader v-model:value="merchantCategoryId" :options="merchantCategoryList"
+                    :field-names="{ label: 'title', value: 'categoryId' }"
+                    @change="selectMerchantCategory"
+                    placeholder="请选择经营类型"/>
+      </a-form-item>
      <a-form-item label="商户分类" name="category">
        <industry-select
          v-model:value="form.category"
@@ -186,53 +192,55 @@
 </template>

 <script lang="ts" setup>
-  import { ref, reactive, watch } from 'vue';
-  import { Form, message } from 'ant-design-vue';
-  import { assignObject, uuid, phoneReg } from 'ele-admin-pro';
-  import { addMerchant, updateMerchant } from '@/api/shop/merchant';
-  import { Merchant } from '@/api/shop/merchant/model';
-  import { useThemeStore } from '@/store/modules/theme';
-  import { storeToRefs } from 'pinia';
-  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
-  import { FormInstance } from 'ant-design-vue/es/form';
-  import { FileRecord } from '@/api/system/file/model';
-  import { MerchantType } from '@/api/shop/merchantType/model';
-  import { CenterPoint } from 'ele-admin-pro/es/ele-map-picker/types';
-  import { listRoles } from '@/api/system/role';
-  import { getTenantId } from '@/utils/domain';
+import {ref, reactive, watch} from 'vue';
+import {Form, message} from 'ant-design-vue';
+import {assignObject, uuid, phoneReg} from 'ele-admin-pro';
+import {addMerchant, updateMerchant} from '@/api/shop/merchant';
+import {Merchant} from '@/api/shop/merchant/model';
+import {useThemeStore} from '@/store/modules/theme';
+import {storeToRefs} from 'pinia';
+import {ItemType} from 'ele-admin-pro/es/ele-image-upload/types';
+import {FormInstance} from 'ant-design-vue/es/form';
+import {FileRecord} from '@/api/system/file/model';
+import {MerchantType} from '@/api/shop/merchantType/model';
+import {CenterPoint} from 'ele-admin-pro/es/ele-map-picker/types';
+import {listRoles} from '@/api/system/role';
+import {getTenantId} from '@/utils/domain';
+import {MerchantCategory} from "@/api/shop/merchantCategory/model";
+import {listMerchantCategory} from "@/api/shop/merchantCategory";

-  // 是否是修改
-  const isUpdate = ref(false);
-  const useForm = Form.useForm;
-  // 是否开启响应式布局
-  const themeStore = useThemeStore();
-  const { styleResponsive, darkMode } = storeToRefs(themeStore);
+// 是否是修改
+const isUpdate = ref(false);
+const useForm = Form.useForm;
+// 是否开启响应式布局
+const themeStore = useThemeStore();
+const {styleResponsive, darkMode} = storeToRefs(themeStore);

-  const props = defineProps<{
+const props = defineProps<{
  // 弹窗是否打开
  visible: boolean;
  // 修改回显的数据
  data?: Merchant | null;
-  }>();
+}>();

-  const emit = defineEmits<{
+const emit = defineEmits<{
  (e: 'done'): void;
  (e: 'update:visible', visible: boolean): void;
-  }>();
+}>();

-  // 提交状态
-  const loading = ref(false);
-  // 是否显示最大化切换按钮
-  const maxable = ref(true);
-  // 表格选中数据
-  const formRef = ref<FormInstance | null>(null);
-  const images = ref<ItemType[]>([]);
-  const files = ref<ItemType[]>([]);
-  // 是否显示地图选择弹窗
-  const showMap = ref(false);
+// 提交状态
+const loading = ref(false);
+// 是否显示最大化切换按钮
+const maxable = ref(true);
+// 表格选中数据
+const formRef = ref<FormInstance | null>(null);
+const images = ref<ItemType[]>([]);
+const files = ref<ItemType[]>([]);
+// 是否显示地图选择弹窗
+const showMap = ref(false);

-  // 用户信息
-  const form = reactive<Merchant>({
+// 用户信息
+const form = reactive<Merchant>({
  merchantId: undefined,
  merchantName: undefined,
  image: undefined,
@@ -240,11 +248,15 @@
  realName: undefined,
  shopType: undefined,
  category: undefined,
+  merchantCategoryId: undefined,
+  merchantCategoryTitle: undefined,
  province: '',
  city: '',
  region: '',
  address: '',
  lngAndLat: '',
+  lng: '',
+  lat: '',
  commission: 0,
  keywords: undefined,
  files: undefined,
@@ -258,15 +270,15 @@
  roleId: undefined,
  roleName: '',
  tenantId: undefined
-  });
+});

-  /* 更新visible */
-  const updateVisible = (value: boolean) => {
+/* 更新visible */
+const updateVisible = (value: boolean) => {
  emit('update:visible', value);
-  };
+};

-  // 表单验证规则
-  const rules = reactive({
+// 表单验证规则
+const rules = reactive({
  merchantName: [
    {
      required: true,
@@ -318,79 +330,102 @@
      message: '手机号格式不正确',
      type: 'string'
    }
+  ],
+  merchantCategoryId: [
+    {
+      required: true,
+      type: 'number',
+      message: '请选择经营类型',
+      trigger: 'blur'
+    }
  ]
-  });
+});

-  const chooseShopType = (data: MerchantType) => {
+const chooseShopType = (data: MerchantType) => {
  form.shopType = data.name;
-  };
+};

-  const chooseImage = (data: FileRecord) => {
+const merchantCategoryId = ref<number[]>([])
+const selectMerchantCategory = (value: number[]) => {
+  if (value.length < 2) return message.error('请选择二级分类')
+  form.merchantCategoryId = value[1];
+  const data = merchantCategoryList.value.find(item => item.categoryId === value[1])
+  if (data) {
+    form.merchantCategoryTitle = data.title;
+  }
+  console.log(value)
+};
+
+const chooseImage = (data: FileRecord) => {
  images.value.push({
    uid: data.id,
    url: data.path,
    status: 'done'
  });
  form.image = data.path;
-  };
+};

-  const onDeleteItem = (index: number) => {
+const onDeleteItem = (index: number) => {
  images.value.splice(index, 1);
  form.image = '';
-  };
+};

-  const chooseFiles = (data: FileRecord) => {
+const chooseFiles = (data: FileRecord) => {
  files.value.push({
    uid: data.id,
    url: data.path,
    status: 'done'
  });
-  };
+};

-  /* 打开位置选择 */
-  const openMapPicker = () => {
+/* 打开位置选择 */
+const openMapPicker = () => {
  showMap.value = true;
-  };
+};

-  /* 地图选择后回调 */
-  const onDone = (location: CenterPoint) => {
+/* 地图选择后回调 */
+const onDone = (location: CenterPoint) => {
  // city.value = [
  //   `${location.city?.province}`,
  //   `${location.city?.city}`,
  //   `${location.city?.district}`
  // ];
+  if (location) {
    form.province = `${location.city?.province}`;
    form.city = `${location.city?.city}`;
    form.region = `${location.city?.district}`;
    form.address = `${location.address}`;
    form.lngAndLat = `${location.lng},${location.lat}`;
+    form.lng = location.lng?.toString();
+    form.lat = location.lat?.toString();
+  }
  showMap.value = false;
-  };
+};

-  const onDeleteFiles = (index: number) => {
+const onDeleteFiles = (index: number) => {
  files.value.splice(index, 1);
-  };
+};

-  const updateOwnStore = (value: boolean) => {
+const updateOwnStore = (value: boolean) => {
  form.ownStore = value ? 1 : 0;
-  };
+};

-  const updateRecommend = (value: boolean) => {
+const updateRecommend = (value: boolean) => {
  form.recommend = value ? 1 : 0;
-  };
+};

-  const updateGoodsReview = (value: boolean) => {
+const updateGoodsReview = (value: boolean) => {
  form.goodsReview = value ? 1 : 0;
-  };
+};

-  const onIndustry = (item: any) => {
+const onIndustry = (item: any) => {
  form.category = item[0] + '/' + item[1];
-  };
+};

-  const { resetFields } = useForm(form, rules);
+const {resetFields} = useForm(form, rules);

-  /* 保存编辑 */
-  const save = () => {
+/* 保存编辑 */
+const save = () => {
  if (!formRef.value) {
    return;
  }
@@ -417,15 +452,25 @@
          message.error(e.message);
        });
    })
-      .catch(() => {});
-  };
+    .catch(() => {
+    });
+};

-  watch(
+const merchantCategoryList = ref<MerchantCategory[]>([]);
+const getMerchantCategoryList = async () => {
+  merchantCategoryList.value = await listMerchantCategory({
+    parentId: 0
+  });
+}
+
+watch(
  () => props.visible,
-    (visible) => {
+  async (visible) => {
    if (visible) {
+      await getMerchantCategoryList()
      images.value = [];
      files.value = [];
+      merchantCategoryId.value = [];
      if (props.data) {
        isUpdate.value = true;
        assignObject(form, props.data);
@@ -449,11 +494,17 @@
        if (props.data.keywords) {
          form.keywords = JSON.parse(props.data.keywords);
        }
+        if (props.data && props.data.merchantCategoryId) {
+          merchantCategoryList.value.forEach(item => {
+            const cate = item.children?.find(i => i.categoryId === props?.data?.merchantCategoryId)
+            if (cate) merchantCategoryId.value.push(item?.categoryId, cate.categoryId)
+          });
+        }
      } else {
        isUpdate.value = false;
      }
      // 获取商户管理员的roleId
-        listRoles({ roleCode: 'merchant' }).then((res) => {
+      listRoles({roleCode: 'merchant'}).then((res) => {
        form.roleId = res[0].roleId;
        form.roleName = res[0].roleName;
      });
@@ -461,13 +512,13 @@
      resetFields();
    }
  },
-    { immediate: true }
-  );
+  {immediate: true}
+);
 </script>

 <style lang="less" scoped>
-  .flex-sb {
+.flex-sb {
  display: flex;
  justify-content: space-between;
-  }
+}
 </style>
--- a/src/views/shop/merchantCategory/components/category-edit.vue
+++ b/src/views/shop/merchantCategory/components/category-edit.vue
@@ -0,0 +1,299 @@
+<!-- 编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="620"
+    :visible="visible"
+    :confirm-loading="loading"
+    :title="isUpdate ? '修改分类' : '新建分类'"
+    :body-style="{ paddingBottom: '8px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="styleResponsive ? { md: 4, sm: 4, xs: 24 } : { flex: '90px' }"
+      :wrapper-col="
+        styleResponsive ? { md: 18, sm: 20, xs: 24 } : { flex: '1' }
+      "
+    >
+      <a-row :gutter="16">
+        <a-col
+          v-bind="styleResponsive ? { md: 24, sm: 24, xs: 24 } : { span: 12 }"
+        >
+          <a-form-item label="上级分类" name="parentId">
+            <a-tree-select
+              allow-clear
+              :tree-data="categoryList"
+              tree-default-expand-all
+              placeholder="请选择上级分类"
+              :value="form.parentId || undefined"
+              :dropdown-style="{ maxHeight: '360px', overflow: 'auto' }"
+              @update:value="(value?: number) => (form.parentId = value)"
+            />
+          </a-form-item>
+          <a-form-item label="分类名称" name="title">
+            <a-input
+              allow-clear
+              placeholder="请输入分类名称"
+              v-model:value="form.title"
+              @pressEnter="save"
+            />
+          </a-form-item>
+        </a-col>
+        <a-col
+          v-bind="styleResponsive ? { md: 24, sm: 24, xs: 24 } : { span: 12 }"
+        >
+          <a-form-item label="排序号" name="sortNumber">
+            <a-input-number
+              :min="0"
+              :max="99999"
+              class="ele-fluid"
+              placeholder="请输入排序号"
+              v-model:value="form.sortNumber"
+            />
+          </a-form-item>
+          <a-form-item label="是否展示">
+            <a-switch
+              checked-children="是"
+              un-checked-children="否"
+              :checked="form.status === 0"
+              @update:checked="updateHideValue"
+            />
+          </a-form-item>
+          <a-form-item label="分类图标" name="image" extra="尺寸180*180">
+            <SelectFile
+              :placeholder="`请选择图片`"
+              :limit="1"
+              :data="images"
+              @done="chooseFile"
+              @del="onDeleteItem"
+            />
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <div style="margin-bottom: 22px">
+        <a-divider/>
+      </div>
+      <a-form-item
+        label="备注"
+        name="comments"
+        :label-col="
+          styleResponsive ? { md: 3, sm: 4, xs: 24 } : { flex: '90px' }
+        "
+        :wrapper-col="
+          styleResponsive ? { md: 21, sm: 20, xs: 24 } : { flex: '1' }
+        "
+      >
+        <a-textarea
+          :rows="4"
+          :maxlength="200"
+          placeholder="请输入备注信息"
+          v-model:value="form.comments"
+        />
+      </a-form-item>
+    </a-form>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+import {ref, reactive, watch} from 'vue';
+import {message} from 'ant-design-vue/es';
+import type {FormInstance, Rule} from 'ant-design-vue/es/form';
+import {storeToRefs} from 'pinia';
+import {useThemeStore} from '@/store/modules/theme';
+import useFormData from '@/utils/use-form-data';
+import {ItemType} from 'ele-admin-pro/es/ele-image-upload/types';
+import {FileRecord} from '@/api/system/file/model';
+import {getMerchantId} from "@/utils/merchant";
+import {MerchantCategory} from "@/api/shop/merchantCategory/model";
+import {addMerchantCategory, updateMerchantCategory} from "@/api/shop/merchantCategory";
+
+// 是否开启响应式布局
+const themeStore = useThemeStore();
+const {styleResponsive} = storeToRefs(themeStore);
+// 已上传数据
+const images = ref<ItemType[]>([]);
+
+const emit = defineEmits<{
+  (e: 'done'): void;
+  (e: 'update:visible', visible: boolean): void;
+}>();
+
+const props = defineProps<{
+  // 弹窗是否打开
+  visible: boolean;
+  // 修改回显的数据
+  data?: MerchantCategory | null;
+  // 上级分类id
+  parentId?: number;
+  // 全部分类数据
+  categoryList: MerchantCategory[];
+}>();
+
+//
+const formRef = ref<FormInstance | null>(null);
+
+// 是否是修改
+const isUpdate = ref(false);
+
+// 提交状态
+const loading = ref(false);
+
+// 表单数据
+const {form, resetFields, assignFields} = useFormData<MerchantCategory>({
+  categoryId: undefined,
+  title: '',
+  parentId: undefined,
+  image: '',
+  status: 0,
+  sortNumber: 100
+});
+
+// 表单验证规则
+const rules = reactive<Record<string, Rule[]>>({
+  title: [
+    {
+      required: true,
+      message: '请输入分类名称',
+      type: 'string',
+      trigger: 'blur'
+    }
+  ],
+  sortNumber: [
+    {
+      required: true,
+      message: '请输入排序号',
+      type: 'number',
+      trigger: 'blur'
+    }
+  ],
+  meta: [
+    {
+      type: 'string',
+      validator: async (_rule: Rule, value: string) => {
+        if (value) {
+          const msg = '请输入正确的JSON格式';
+          try {
+            const obj = JSON.parse(value);
+            if (typeof obj !== 'object' || obj === null) {
+              return Promise.reject(msg);
+            }
+          } catch (_e) {
+            return Promise.reject(msg);
+          }
+        }
+        return Promise.resolve();
+      },
+      trigger: 'blur'
+    }
+  ]
+});
+
+const chooseFile = (data: FileRecord) => {
+  images.value.push({
+    uid: data.id,
+    url: data.path,
+    status: 'done'
+  });
+  form.image = data.path;
+};
+
+const onDeleteItem = (index: number) => {
+  images.value.splice(index, 1);
+  form.image = '';
+};
+
+/* 保存编辑 */
+const save = () => {
+  if (!formRef.value) {
+    return;
+  }
+  formRef.value
+    .validate()
+    .then(() => {
+      loading.value = true;
+      const categoryForm = {
+        ...form,
+        // menuType 对应的值与后端不一致在前端处理
+        // menuType: form.menuType === 2 ? 1 : 0,
+        parentId: form.parentId || 0
+      };
+      const saveOrUpdate = isUpdate.value
+        ? updateMerchantCategory
+        : addMerchantCategory;
+      saveOrUpdate(categoryForm)
+        .then((msg) => {
+          loading.value = false;
+          message.success(msg);
+          updateVisible(false);
+          emit('done');
+        })
+        .catch((e) => {
+          loading.value = false;
+          message.error(e.message);
+        });
+    })
+    .catch(() => {
+    });
+};
+
+/* 更新visible */
+const updateVisible = (value: boolean) => {
+  emit('update:visible', value);
+};
+
+const updateHideValue = (value: boolean) => {
+  form.status = value ? 0 : 1;
+};
+
+watch(
+  () => props.visible,
+  (visible) => {
+    if (visible) {
+      if (props.data) {
+        assignFields({
+          ...props.data,
+          parentId:
+            props.data.parentId === 0 ? undefined : props.data.parentId
+        });
+        images.value = [];
+        if (props.data.image) {
+          images.value.push({
+            uid: `${props.data.categoryId}`,
+            url: props.data.image,
+            status: 'done'
+          });
+        }
+        isUpdate.value = true;
+      } else {
+        images.value = [];
+        form.parentId = props.parentId;
+        isUpdate.value = false;
+      }
+    } else {
+      resetFields();
+      formRef.value?.clearValidate();
+    }
+  }
+);
+</script>
+
+<script lang="ts">
+import * as icons from '@/layout/menu-icons';
+
+export default {
+  components: icons,
+  data() {
+    return {
+      iconData: [
+        {
+          title: '已引入的图标',
+          icons: Object.keys(icons)
+        }
+      ]
+    };
+  }
+};
+</script>
--- a/src/views/shop/merchantCategory/components/merchant-category-edit.vue
+++ b/src/views/shop/merchantCategory/components/merchant-category-edit.vue
@@ -0,0 +1,294 @@
+<!-- 编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="620"
+    :visible="visible"
+    :confirm-loading="loading"
+    :title="isUpdate ? '修改分类' : '新建分类'"
+    :body-style="{ paddingBottom: '8px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="styleResponsive ? { md: 4, sm: 4, xs: 24 } : { flex: '90px' }"
+      :wrapper-col="
+        styleResponsive ? { md: 18, sm: 20, xs: 24 } : { flex: '1' }
+      "
+    >
+      <a-row :gutter="16">
+        <a-col
+          v-bind="styleResponsive ? { md: 24, sm: 24, xs: 24 } : { span: 12 }"
+        >
+          <a-form-item label="分类名称" name="title">
+            <a-input
+              allow-clear
+              placeholder="请输入分类名称"
+              v-model:value="form.title"
+              @pressEnter="save"
+            />
+          </a-form-item>
+        </a-col>
+        <a-col
+          v-bind="styleResponsive ? { md: 24, sm: 24, xs: 24 } : { span: 12 }"
+        >
+          <a-form-item label="排序号" name="sortNumber">
+            <a-input-number
+              :min="0"
+              :max="99999"
+              class="ele-fluid"
+              placeholder="请输入排序号"
+              v-model:value="form.sortNumber"
+            />
+          </a-form-item>
+          <a-form-item label="是否展示">
+            <a-switch
+              checked-children="是"
+              un-checked-children="否"
+              :checked="form.status === 0"
+              @update:checked="updateHideValue"
+            />
+          </a-form-item>
+          <a-form-item label="分类图标" name="image" extra="尺寸180*180">
+            <SelectFile
+              :placeholder="`请选择图片`"
+              :limit="1"
+              :data="images"
+              @done="chooseFile"
+              @del="onDeleteItem"
+            />
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <div style="margin-bottom: 22px">
+        <a-divider />
+      </div>
+      <a-form-item
+        label="备注"
+        name="comments"
+        :label-col="
+          styleResponsive ? { md: 3, sm: 4, xs: 24 } : { flex: '90px' }
+        "
+        :wrapper-col="
+          styleResponsive ? { md: 21, sm: 20, xs: 24 } : { flex: '1' }
+        "
+      >
+        <a-textarea
+          :rows="4"
+          :maxlength="200"
+          placeholder="请输入备注信息"
+          v-model:value="form.comments"
+        />
+      </a-form-item>
+    </a-form>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { message } from 'ant-design-vue/es';
+  import type { FormInstance, Rule } from 'ant-design-vue/es/form';
+  import { storeToRefs } from 'pinia';
+  import { useThemeStore } from '@/store/modules/theme';
+  import useFormData from '@/utils/use-form-data';
+  import { GoodsCategory } from '@/api/shop/goodsCategory/model';
+  import {
+    addGoodsCategory,
+    updateGoodsCategory
+  } from '@/api/shop/goodsCategory';
+  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
+  import { FileRecord } from '@/api/system/file/model';
+  import { getMerchantId } from "@/utils/merchant";
+
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+  // 已上传数据
+  const images = ref<ItemType[]>([]);
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: GoodsCategory | null;
+    // 上级分类id
+    parentId?: number;
+    // 商户ID
+    merchantId?: number;
+    // 全部分类数据
+    categoryList: GoodsCategory[];
+  }>();
+
+  //
+  const formRef = ref<FormInstance | null>(null);
+
+  // 是否是修改
+  const isUpdate = ref(false);
+
+  // 提交状态
+  const loading = ref(false);
+
+  // 表单数据
+  const { form, resetFields, assignFields } = useFormData<GoodsCategory>({
+    categoryId: undefined,
+    title: '',
+    parentId: undefined,
+    image: '',
+    status: 0,
+    sortNumber: 100,
+    merchantId: getMerchantId()
+  });
+
+  // 表单验证规则
+  const rules = reactive<Record<string, Rule[]>>({
+    title: [
+      {
+        required: true,
+        message: '请输入分类名称',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ],
+    sortNumber: [
+      {
+        required: true,
+        message: '请输入排序号',
+        type: 'number',
+        trigger: 'blur'
+      }
+    ],
+    meta: [
+      {
+        type: 'string',
+        validator: async (_rule: Rule, value: string) => {
+          if (value) {
+            const msg = '请输入正确的JSON格式';
+            try {
+              const obj = JSON.parse(value);
+              if (typeof obj !== 'object' || obj === null) {
+                return Promise.reject(msg);
+              }
+            } catch (_e) {
+              return Promise.reject(msg);
+            }
+          }
+          return Promise.resolve();
+        },
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  const chooseFile = (data: FileRecord) => {
+    images.value.push({
+      uid: data.id,
+      url: data.path,
+      status: 'done'
+    });
+    form.image = data.path;
+  };
+
+  const onDeleteItem = (index: number) => {
+    images.value.splice(index, 1);
+    form.image = '';
+  };
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        const categoryForm = {
+          ...form,
+          // menuType 对应的值与后端不一致在前端处理
+          // menuType: form.menuType === 2 ? 1 : 0,
+          parentId: form.parentId || 0,
+          type: 1
+        };
+        const saveOrUpdate = isUpdate.value
+          ? updateGoodsCategory
+          : addGoodsCategory;
+        saveOrUpdate(categoryForm)
+          .then((msg) => {
+            loading.value = false;
+            message.success(msg);
+            updateVisible(false);
+            emit('done');
+          })
+          .catch((e) => {
+            loading.value = false;
+            message.error(e.message);
+          });
+      })
+      .catch(() => {});
+  };
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  const updateHideValue = (value: boolean) => {
+    form.status = value ? 0 : 1;
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        if (props.data) {
+          assignFields({
+            ...props.data,
+            parentId:
+              props.data.parentId === 0 ? undefined : props.data.parentId
+          });
+          images.value = [];
+          if (props.data.image) {
+            images.value.push({
+              uid: `${props.data.categoryId}`,
+              url: props.data.image,
+              status: 'done'
+            });
+          }
+          isUpdate.value = true;
+        } else {
+          images.value = [];
+          form.parentId = props.parentId;
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+        formRef.value?.clearValidate();
+      }
+    }
+  );
+</script>
+
+<script lang="ts">
+  import * as icons from '@/layout/menu-icons';
+
+  export default {
+    components: icons,
+    data() {
+      return {
+        iconData: [
+          {
+            title: '已引入的图标',
+            icons: Object.keys(icons)
+          }
+        ]
+      };
+    }
+  };
+</script>
--- a/src/views/shop/merchantCategory/components/merchantCategoryEdit.vue
+++ b/src/views/shop/merchantCategory/components/merchantCategoryEdit.vue
@@ -0,0 +1,206 @@
+<!-- 编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="800"
+    :visible="visible"
+    :maskClosable="false"
+    :maxable="maxable"
+    :title="isUpdate ? '编辑商家分类' : '添加商家分类'"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules">
+      <a-form-item label="分类名称" name="title">
+        <a-input
+          allow-clear
+          placeholder="请输入分类名称"
+          v-model:value="form.title"
+        />
+      </a-form-item>
+      <a-form-item
+        label="分类图片"
+        name="image">
+        <SelectFile
+          :placeholder="`请选择图片`"
+          :limit="1"
+          :data="images"
+          @done="chooseImage"
+          @del="onDeleteItem"
+        />
+      </a-form-item>
+      <a-form-item label="上级分类" name="parentId">
+        <a-select v-model:value="form.parentId">
+          <a-select-option v-for="(item, index) in parentList" :key="index" :value="item.categoryId">{{ item.title }}</a-select-option>
+        </a-select>
+      </a-form-item>
+      <a-form-item label="排序(数字越小越靠前)" name="sortNumber">
+        <a-input-number
+          :min="0"
+          :max="9999"
+          class="ele-fluid"
+          placeholder="请输入排序号"
+          v-model:value="form.sortNumber"
+        />
+      </a-form-item>
+      <a-form-item label="备注" name="comments">
+        <a-textarea
+          :rows="4"
+          :maxlength="200"
+          placeholder="请输入描述"
+          v-model:value="form.comments"
+        />
+      </a-form-item>
+
+    </a-form>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+import {ref, reactive, watch} from 'vue';
+import {Form, message} from 'ant-design-vue';
+import {assignObject, uuid} from 'ele-admin-pro';
+import {addMerchantCategory, listMerchantCategory, updateMerchantCategory} from '@/api/shop/merchantCategory';
+import {MerchantCategory} from '@/api/shop/merchantCategory/model';
+import {useThemeStore} from '@/store/modules/theme';
+import {storeToRefs} from 'pinia';
+import {ItemType} from 'ele-admin-pro/es/ele-image-upload/types';
+import {FormInstance} from 'ant-design-vue/es/form';
+import {FileRecord} from '@/api/system/file/model';
+
+// 是否是修改
+const isUpdate = ref(false);
+const useForm = Form.useForm;
+// 是否开启响应式布局
+const themeStore = useThemeStore();
+const {styleResponsive} = storeToRefs(themeStore);
+
+const props = defineProps<{
+  // 弹窗是否打开
+  visible: boolean;
+  // 修改回显的数据
+  data?: MerchantCategory | null;
+}>();
+
+const emit = defineEmits<{
+  (e: 'done'): void;
+  (e: 'update:visible', visible: boolean): void;
+}>();
+
+// 提交状态
+const loading = ref(false);
+// 是否显示最大化切换按钮
+const maxable = ref(true);
+// 表格选中数据
+const formRef = ref<FormInstance | null>(null);
+const images = ref<ItemType[]>([]);
+
+// 用户信息
+const form = reactive<MerchantCategory>({
+  categoryId: undefined,
+  title: undefined,
+  type: 0,
+  image: undefined,
+  parentId: undefined,
+  userId: undefined,
+  count: undefined,
+  sortNumber: undefined,
+  comments: undefined,
+  hide: undefined,
+  status: undefined,
+  deleted: undefined,
+  tenantId: undefined,
+  createTime: undefined,
+  updateTime: undefined,
+});
+
+/* 更新visible */
+const updateVisible = (value: boolean) => {
+  emit('update:visible', value);
+};
+
+// 表单验证规则
+const rules = reactive({
+  title: [{required: true, message: '请输入分类名称', trigger: 'blur'}],
+  image: [{required: true, message: '请选择分类图片', trigger: 'blur'}],
+});
+
+const chooseImage = (data: FileRecord) => {
+  images.value.push({
+    uid: data.id,
+    url: data.path,
+    status: 'done'
+  });
+  form.image = data.path;
+};
+
+const onDeleteItem = (index: number) => {
+  images.value.splice(index, 1);
+  form.image = '';
+};
+
+const {resetFields} = useForm(form, rules);
+
+/* 保存编辑 */
+const save = () => {
+  if (!formRef.value) {
+    return;
+  }
+  formRef.value
+    .validate()
+    .then(() => {
+      loading.value = true;
+      const formData = {
+        ...form
+      };
+      const saveOrUpdate = isUpdate.value ? updateMerchantCategory : addMerchantCategory;
+      saveOrUpdate(formData)
+        .then((msg) => {
+          loading.value = false;
+          message.success(msg);
+          updateVisible(false);
+          emit('done');
+        })
+        .catch((e) => {
+          loading.value = false;
+          message.error(e.message);
+        });
+    })
+    .catch(() => {
+    });
+};
+
+const parentList = ref<MerchantCategory[]>([])
+const getParentList = async () => {
+  parentList.value = await listMerchantCategory({parentId: null})
+}
+
+watch(
+  () => props.visible,
+  (visible) => {
+    if (visible) {
+      getParentList()
+      images.value = [];
+      if (props.data) {
+        assignObject(form, props.data);
+        if (props.data.image) {
+          images.value.push({
+            uid: uuid(),
+            url: props.data.image,
+            status: 'done'
+          })
+        }
+        isUpdate.value = true;
+      } else {
+        isUpdate.value = false;
+      }
+    } else {
+      resetFields();
+    }
+  },
+  {immediate: true}
+);
+</script>
--- a/src/views/shop/merchantCategory/components/search.vue
+++ b/src/views/shop/merchantCategory/components/search.vue
@@ -0,0 +1,42 @@
+<!-- 搜索表单 -->
+<template>
+  <a-space :size="10" style="flex-wrap: wrap">
+    <a-button type="primary" class="ele-btn-icon" @click="add">
+      <template #icon>
+        <PlusOutlined />
+      </template>
+      <span>添加</span>
+    </a-button>
+  </a-space>
+</template>
+
+<script lang="ts" setup>
+  import { PlusOutlined } from '@ant-design/icons-vue';
+  import type { GradeParam } from '@/api/user/grade/model';
+  import { watch } from 'vue';
+
+  const props = withDefaults(
+    defineProps<{
+      // 选中的角色
+      selection?: [];
+    }>(),
+    {}
+  );
+
+  const emit = defineEmits<{
+    (e: 'search', where?: GradeParam): void;
+    (e: 'add'): void;
+    (e: 'remove'): void;
+    (e: 'batchMove'): void;
+  }>();
+
+  // 新增
+  const add = () => {
+    emit('add');
+  };
+
+  watch(
+    () => props.selection,
+    () => {}
+  );
+</script>
--- a/src/views/shop/merchantCategory/index.vue
+++ b/src/views/shop/merchantCategory/index.vue
@@ -0,0 +1,306 @@
+<template>
+  <div class="ele-body">
+    <a-card :bordered="false">
+      <!-- 表格 -->
+      <ele-pro-table
+        ref="tableRef"
+        row-key="categoryId"
+        :columns="columns"
+        :datasource="datasource"
+        :parse-data="parseData"
+        :need-page="false"
+        :customRow="customRow"
+        :expand-icon-column-index="1"
+        :expanded-row-keys="expandedRowKeys"
+        :scroll="{ x: 1200 }"
+        cache-key="proGoodsCategoryTable"
+        @done="onDone"
+        @expand="onExpand"
+      >
+        <template #toolbar>
+          <search
+            @search="reload"
+            :merchantId="merchantId"
+            @add="openEdit"
+            @expand="expandAll"
+            @fold="foldAll"
+          />
+        </template>
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'path'">
+            <span class="ele-text-placeholder">{{ record.path }}</span>
+          </template>
+          <template v-if="column.key === 'component'">
+            <span class="ele-text-placeholder">{{ record.component }}</span>
+          </template>
+          <template v-else-if="column.key === 'title'">
+            <a-avatar
+              :size="26"
+              shape="square"
+              :src="`${record.image}`"
+              style="margin-right: 10px"
+              v-if="record.image"
+            />
+            <a
+              :href="`${domain}/product/${record.categoryId}`"
+              target="_blank"
+            >{{ record.title }}</a
+            >
+          </template>
+          <template v-if="column.key === 'status'">
+            <a-tag v-if="record.status === 0" color="green">显示</a-tag>
+            <a-tag v-if="record.status === 1" color="orange">隐藏</a-tag>
+          </template>
+          <template v-else-if="column.key === 'action'">
+            <a-space>
+              <a @click="openEdit(null, record.categoryId)">添加</a>
+              <a-divider type="vertical"/>
+              <a @click="moveUp(record)">上移
+                <ArrowUpOutlined/>
+              </a>
+              <a-divider type="vertical"/>
+              <a @click="openEdit(record)">修改</a>
+              <a-divider type="vertical"/>
+              <a-popconfirm
+                placement="topRight"
+                title="确定要删除此分类吗？"
+                @confirm="remove(record)"
+              >
+                <a class="ele-text-danger">删除</a>
+              </a-popconfirm>
+            </a-space>
+          </template>
+        </template>
+      </ele-pro-table>
+    </a-card>
+    <!-- 商城分类编辑弹窗 -->
+    <MerchantCategoryEdit
+      v-model:visible="showEdit"
+      :data="current"
+      :parent-id="parentId"
+      :category-list="categoryData"
+      @done="reload"
+    />
+
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref, watch} from 'vue';
+import {message} from 'ant-design-vue/es';
+import {
+  ArrowUpOutlined,
+} from '@ant-design/icons-vue';
+import type {
+  DatasourceFunction,
+  ColumnItem,
+  EleProTableDone
+} from 'ele-admin-pro/es/ele-pro-table/types';
+import {
+  messageLoading,
+  toDateString,
+  toTreeData,
+  eachTreeData
+} from 'ele-admin-pro/es';
+import type {EleProTable} from 'ele-admin-pro/es';
+import MerchantCategoryEdit from './components/merchantCategoryEdit.vue';
+import {getSiteInfo} from '@/api/layout';
+import router from '@/router';
+import Search from './components/search.vue';
+import {getSiteDomain} from '@/utils/domain';
+import {MerchantCategory, MerchantCategoryParam} from "@/api/shop/merchantCategory/model";
+import {listMerchantCategory, removeMerchantCategory, updateMerchantCategory} from "@/api/shop/merchantCategory";
+
+// 表格实例
+const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+// 表格列配置
+const columns = ref<ColumnItem[]>([
+  {
+    title: 'ID',
+    dataIndex: 'categoryId',
+    width: 80
+  },
+  {
+    title: '分类名称',
+    dataIndex: 'title',
+    key: 'title',
+    showSorterTooltip: false,
+    ellipsis: true
+  },
+  {
+    title: '排序',
+    dataIndex: 'sortNumber',
+    align: 'center',
+    width: 120,
+    showSorterTooltip: false
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    key: 'status',
+    align: 'center',
+    width: 120,
+    showSorterTooltip: false,
+    customRender: ({text}) => ['显示', '隐藏'][text]
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createTime',
+    showSorterTooltip: false,
+    ellipsis: true,
+    width: 180,
+    customRender: ({text}) => toDateString(text)
+  },
+  {
+    title: '操作',
+    key: 'action',
+    width: 200,
+    align: 'center'
+  }
+]);
+
+// 当前编辑数据
+const current = ref<MerchantCategory | null>(null);
+// 是否显示编辑弹窗
+const showEdit = ref(false);
+// 上级分类id
+const parentId = ref<number>();
+// 分类数据
+const categoryData = ref<MerchantCategory[]>([]);
+// 表格展开的行
+const expandedRowKeys = ref<number[]>([]);
+const searchText = ref('');
+const tenantId = ref<number>();
+const merchantId = ref<number>();
+// 网站域名
+const domain = getSiteDomain();
+
+getSiteInfo().then((data) => {
+  tenantId.value = data.tenantId;
+});
+
+// 表格数据源
+const datasource: DatasourceFunction = ({where}) => {
+  where.title = searchText.value;
+  return listMerchantCategory({...where});
+};
+
+
+// 上移
+const moveUp = (row?: MerchantCategory) => {
+  updateMerchantCategory({
+    categoryId: row?.categoryId,
+    sortNumber: Number(row?.sortNumber) - 1
+  }).then((msg) => {
+    message.success(msg);
+    reload();
+  });
+};
+
+/* 数据转为树形结构 */
+const parseData = (data: MerchantCategory[]) => {
+  return toTreeData({
+    data: data.map((d) => {
+      return {...d, key: d.categoryId, value: d.categoryId};
+    }),
+    idField: 'categoryId',
+    parentIdField: 'parentId'
+  });
+};
+
+/* 表格渲染完成回调 */
+const onDone: EleProTableDone<MerchantCategory> = ({data}) => {
+  categoryData.value = data;
+};
+
+/* 刷新表格 */
+const reload = (where?: MerchantCategoryParam) => {
+  tableRef?.value?.reload({where});
+};
+
+/* 打开编辑弹窗 */
+const openEdit = (row?: MerchantCategory | null, id?: number) => {
+  current.value = row ?? null;
+  parentId.value = id;
+  showEdit.value = true;
+};
+
+/* 删除单个 */
+const remove = (row: MerchantCategory) => {
+  if (row.children?.length) {
+    message.error('请先删除子节点');
+    return;
+  }
+  const hide = messageLoading('请求中..', 0);
+  removeMerchantCategory(row.categoryId)
+    .then((msg) => {
+      hide();
+      message.success(msg);
+      reload();
+    })
+    .catch((e) => {
+      hide();
+      message.error(e.message);
+    });
+};
+
+/* 展开全部 */
+const expandAll = () => {
+  let keys: number[] = [];
+  eachTreeData(categoryData.value, (d) => {
+    if (d.children && d.children.length && d.categoryId) {
+      keys.push(d.categoryId);
+    }
+  });
+  expandedRowKeys.value = keys;
+};
+
+/* 折叠全部 */
+const foldAll = () => {
+  expandedRowKeys.value = [];
+};
+
+/* 点击展开图标时触发 */
+const onExpand = (expanded: boolean, record: MerchantCategory) => {
+  if (expanded) {
+    expandedRowKeys.value = [
+      ...expandedRowKeys.value,
+      record.categoryId as number
+    ];
+  } else {
+    expandedRowKeys.value = expandedRowKeys.value.filter(
+      (d) => d !== record.categoryId
+    );
+  }
+};
+
+/* 自定义行属性 */
+const customRow = (record: MerchantCategory) => {
+  return {
+    // 行点击事件
+    onClick: () => {
+      // console.log(record);
+    },
+    // 行双击事件
+    onDblclick: () => {
+      openEdit(record);
+    }
+  };
+};
+
+watch(
+  () => router.currentRoute.value.params.id,
+  (id) => {
+    merchantId.value = Number(id);
+    reload();
+  },
+  {immediate: true}
+);
+</script>
+
+<script lang="ts">
+export default {
+  name: 'MerchantCategory'
+};
+</script>
--- a/src/views/shop/merchantCategory/preview/index.vue
+++ b/src/views/shop/merchantCategory/preview/index.vue
@@ -0,0 +1,124 @@
+<template>
+  <a-card :title="title" class="ele-body">
+    <a-list item-layout="vertical" :pagination="pagination" :data-source="list">
+      <template #renderItem="{ item }">
+        <a-list-item key="item.title">
+          <template #actions>
+            <span v-for="{ icon, text } in actions" :key="icon">
+              <component :is="icon" style="margin-right: 8px" />
+              {{ text }}
+            </span>
+          </template>
+          <template #extra>
+            <img
+              width="100"
+              height="100"
+              alt="logo"
+              v-if="item.image"
+              :src="item.image"
+            />
+          </template>
+          <a-list-item-meta :description="item.title">
+            <template #title>
+              <a @click="openNew('/cms/article/' + item.articleId)">{{
+                item.title
+              }}</a>
+            </template>
+          </a-list-item-meta>
+        </a-list-item>
+      </template>
+    </a-list>
+  </a-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref, unref, watch } from 'vue';
+  import { useRouter } from 'vue-router';
+  import { setPageTabTitle } from '@/utils/page-tab-util';
+  import { pageArticle } from '@/api/cms/article';
+  import { Article } from '@/api/cms/article/model';
+  import { getArticleCategory } from '@/api/cms/category';
+  import { ArticleCategory } from '@/api/cms/category/model';
+
+  import {
+    StarOutlined,
+    LikeOutlined,
+    MessageOutlined
+  } from '@ant-design/icons-vue';
+  import { openNew } from '@/utils/common';
+  const { currentRoute } = useRouter();
+  const title = ref<string>('');
+  const categoryId = ref(0);
+  const category = ref<ArticleCategory | any>();
+  const list = ref<Article[]>([]);
+  const spinning = ref(true);
+  const page = ref(1);
+
+  const pagination = {
+    onChange: (index: number) => {
+      page.value = index;
+      reload();
+    },
+    total: 10,
+    pageSize: 10
+  };
+
+  const actions: Record<string, any>[] = [
+    { icon: StarOutlined, text: '156' },
+    { icon: LikeOutlined, text: '156' },
+    { icon: MessageOutlined, text: '2' }
+  ];
+
+  /**
+   * 加载数据
+   */
+  const reload = () => {
+    // 加载文章分类
+    getArticleCategory(categoryId.value).then((data) => {
+      category.value = data;
+      // 修改页签标题
+      if (data.title) {
+        title.value = data.title;
+        setPageTabTitle(data.title);
+      }
+    });
+    // 加载文章列表
+    pageArticle({ categoryId: categoryId.value, page: page.value }).then(
+      (data) => {
+        if (data?.list) {
+          pagination.total = data.count;
+          list.value = data.list;
+        }
+        spinning.value = false;
+      }
+    );
+  };
+
+  watch(
+    currentRoute,
+    (route) => {
+      const { params } = unref(route);
+      const { id } = params;
+      if (id) {
+        categoryId.value = Number(id);
+        reload();
+      }
+    },
+    { immediate: true }
+  );
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'ArticleCategoryPreview'
+  };
+</script>
+<style>
+  body {
+    background: #f0f2f5;
+  }
+  .ele-body {
+    margin: 0 auto;
+    max-width: 1000px;
+  }
+</style>
--- a/yarn.lock
+++ b/yarn.lock
@@ -314,6 +314,11 @@
  resolved "https://registry.npmmirror.com/@ctrl/tinycolor/-/tinycolor-3.4.1.tgz"
  integrity sha512-ej5oVy6lykXsvieQtqZxCOaLT+xD4+QNarq78cIYISHmZXshCvROLudpQN3lfL8G0NL7plMSSK+zlyvCaIJ4Iw==

+"@cyhnkckali/vue3-color-picker@^2.0.2":
+  version "2.0.2"
+  resolved "https://registry.npmmirror.com/@cyhnkckali/vue3-color-picker/-/vue3-color-picker-2.0.2.tgz#7a66643095cffad748d2354625dd53a140b4673f"
+  integrity sha512-XfmaQ3r3xmPtfWUuO8gEw+oDXW6KjMJaF9xpnRDj3ZEhUTsS9EE2yCF1n7IrYQjk3Rybatvv2TMvFOc8tzdMDg==
+
 "@esbuild/linux-loong64@0.14.54":
  version "0.14.54"
  resolved "https://registry.npmmirror.com/@esbuild/linux-loong64/-/linux-loong64-0.14.54.tgz#de2a4be678bd4d0d1ffbb86e6de779cde5999028"
@@ -1504,13 +1509,6 @@ commander@^4.0.0:
  resolved "https://registry.npmmirror.com/commander/-/commander-4.1.1.tgz"
  integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==

-commander@~1.1.1:
-  version "1.1.1"
-  resolved "https://registry.npmmirror.com/commander/-/commander-1.1.1.tgz#50d1651868ae60eccff0a2d9f34595376bc6b041"
-  integrity sha512-71Rod2AhcH3JhkBikVpNd0pA+fWsmAaVoti6OR38T76chA7vE3pSerS0Jor4wDw+tOueD2zLVvFOw5H0Rcj7rA==
-  dependencies:
-    keypress "0.1.x"
-
 compress-commons@^4.1.0:
  version "4.1.1"
  resolved "https://registry.npmmirror.com/compress-commons/-/compress-commons-4.1.1.tgz"
@@ -3430,11 +3428,6 @@ jszip@^3.5.0:
    readable-stream "~2.3.6"
    setimmediate "^1.0.5"

-keypress@0.1.x:
-  version "0.1.0"
-  resolved "https://registry.npmmirror.com/keypress/-/keypress-0.1.0.tgz#4a3188d4291b66b4f65edb99f806aa9ae293592a"
-  integrity sha512-x0yf9PL/nx9Nw9oLL8ZVErFAk85/lslwEP7Vz7s5SI1ODXZIgit3C5qyWjw4DxOuO/3Hb4866SQh28a1V1d+WA==
-
 kind-of@^3.0.2:
  version "3.2.2"
  resolved "https://registry.npmmirror.com/kind-of/-/kind-of-3.2.2.tgz"
@@ -4442,13 +4435,6 @@ pinia@^2.0.21:
    "@vue/devtools-api" "^6.2.1"
    vue-demi "*"

-pinyin@^4.0.0-alpha.2:
-  version "4.0.0-alpha.2"
-  resolved "https://registry.npmmirror.com/pinyin/-/pinyin-4.0.0-alpha.2.tgz#336fca765b834794b60bc9377844b7d263fbf23c"
-  integrity sha512-SED2wWr1X0QwH6rXIDgg20zS1mAk0AVMO8eM3KomUlOYzC8mNMWZnspZWhhI0M8MBIbF2xwa+5r30jTSjAqNsg==
-  dependencies:
-    commander "~1.1.1"
-
 pirates@^4.0.1:
  version "4.0.6"
  resolved "https://registry.npmmirror.com/pirates/-/pirates-4.0.6.tgz"
@@ -5068,16 +5054,8 @@ stream-wormhole@^1.0.4:
  resolved "https://registry.npmmirror.com/stream-wormhole/-/stream-wormhole-1.1.0.tgz"
  integrity sha512-gHFfL3px0Kctd6Po0M8TzEvt3De/xu6cnRrjlfYNhwbhLPLwigI2t1nc6jrzNuaYg5C4YF78PPFuQPzRiqn9ew==

-"string-width-cjs@npm:string-width@^4.2.0":
-  version "4.2.3"
-  resolved "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-string-width@^4.1.0:
+"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0:
+  name string-width-cjs
  version "4.2.3"
  resolved "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz"
  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -5145,7 +5123,7 @@ stringify-entities@^4.0.2:
    character-entities-html4 "^2.0.0"
    character-entities-legacy "^3.0.0"

-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
  version "6.0.1"
  resolved "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz"
  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -5159,13 +5137,6 @@ strip-ansi@^3.0.0:
  dependencies:
    ansi-regex "^2.0.0"

-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
 strip-ansi@^7.0.1:
  version "7.1.0"
  resolved "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-7.1.0.tgz"